Өнөөдөр вэбсайтад "хамгийн халуун" техникүүдийн нэг нь параллак гүйлгэх юм. Бид хулгана дээрээ гүйлгэх дугуйг эргүүлэх тэр газруудад бид бүгд очиж байсан бөгөөд хуудасны агуулга дээш доош, доошоо эсвэл хуудасны дундуур хулганын эргэлт эргэлдэж байна.
Вэб дизайн, график дизайнтай хүмүүст энэ аргыг хэрэглэхэд шаардлагатай CSS хэмжээний хувьд энэ аргыг ашиглахад үлэмж хэцүү байж болно.
Хэрэв та үүнийг дүрсэлсэн бол график зураачдад зүгээр л өргөж болох хэд хэдэн програмууд байдаг. Тэдгээр нь үндсэндээ вэб хуудсанд танил хуудас байрлуулах аргыг ашигладаг бөгөөд энэ нь кодыг оролцуулаад олон зүйл байгаагүй юм. Adobe Muse нь алдартай болсон програм юм.
Muse-г ашигладаг графикаар хийдэг ажил нь үнэхээр гайхамшигтай бөгөөд энэ өдрийн Muse Site-д зочлон юу хийж болох талаар дээж авах боломжтой. Хэдийгээр вэбсайт нь Muse-г "салхинаас хамгаалах тоглоом" гэж үздэг ч дизайнерууд нь гар утасны болон вэб протоколыг үүсгэх бөгөөд тэдгээрийг өөрсдийн багийн хөгжүүлэгчдэд хүлээлгэн өгдөг.
Muse-тай хийх маш сонирхолтой арга бол parallax scrolling бөгөөд хэрэв та дасгалын иж бүрэн хувилбарыг харахыг хүсвэл бид энэ алхмыг хийх болно. Та хулганыхаа гүйлгээг эргүүлбэл текстийг хуудасны дээд ба доод хэмжээг дээшлүүлэх мэт харагдана.
Эхэлцгээе.
01 - 07
Вэб хуудас үүсгэх
Та Muse-ийг ажиллуулахдаа New Site link дээр дарна уу. Энэ нь Шинэ Сайтын Properties- ийг нээх болно. Энэ төсөл нь ширээний програмын зориулалтаар хийгдсэн байх ёстой бөгөөд та эхлээд Загварт байрлуулах цэсээр сонгож болно. Та баганууд, ус зайлуулах суваг, маржин, дэвсгэртүүдийн утгыг тохируулж болно. Энэ тохиолдолд бид үүнийг маш их анхаарч үзэхгүй байсан бөгөөд зүгээр л OK дарсан.
07
Хуудсыг форматлах
Та сайтын шинж чанарыг тохируулах, OK дарах үед та Plan view гэж нэрлэгдсэн зүйлийг авч явсан. Дээд талд Нүүр хуудас болон цонхны доод хэсэгт Мастер хуудас байна. Бид зөвхөн нэг хуудас хэрэгтэй. Загвар харахыг үзэхийн тулд интерфэйсийг нээсэн Нүүр хуудсыг дахин товшсон.
Зүүн талд хэд хэдэн үндсэн хэрэгслүүд байдаг ба баруун талд нь хуудас дээрх агууламжийг удирдах олон төрлийн самбар байдаг. Дээрхээс гадна хуудсан дээр, эсвэл хуудсан дээр сонгосон зүйлсийн шинж чанарууд байдаг. Энэ тохиолдолд бид хар дэвсгэртэй байхыг хүсч байсан. Үүнийг гүйцэлдүүлэхийн тулд бид Browser Color өнгөний чип дээр дарж Өнгө Picker-с хараарай.
03 - 07
Текстийг хуудас руу нэмнэ үү
Дараагийн алхам бол хуудсанд зарим нэг текст нэмэх явдал юм. Бид Text Tool-г сонгож, текст хайрцгийг гаргав. Бид "Тавтай морил" гэдэг үгийг оруулж, Properties текстийг Arial- д текстийг 120 пиксел Цагаан болгосон. Төвийг холбосон.
Дараа нь бид Сонгох хэрэгслийг шилжүүлэн, Textbox дээр дарж, Y байрлалыг дээд талаас 168 пиксель болгожээ. Текст хайрцгийг сонгож, бид Align самбарыг нээгээд текстийг төв рүү холбоно.
Эцэст нь сонгосон текстийн хайрцагт Options / Alt болон Shift товчлууруудаа дарж , текстийн хайрцагны дөрвөн хуулбарыг хийсэн. Бид хуулбар бүрийн текст болон байрлалыг өөрчилсөн:
- 871
- График, 1621
- Програм хангамж, 2371
- @ About.com, 3181
Та текстийн хайрцаг бүрийн байрлалыг тохируулсны дараа текстийн байршлыг тохируулах хуудасны хэмжээг өөрчилнө.
04 - 07
Зургийн байршуулагч нэмэх
Дараагийн алхам бол текстийн блокуудын хооронд зураг оруулах явдал юм.
Эхний алхам нь Rectangle Tool- ыг сонгож, хуудасны нөгөө талаас нөгөө талаас сунгаж буй хайрцгийг зурах явдал юм. Тэгш өнцөгтийг сонгосоноор бид өндрийг 250 пиксел , түүний байрлалыг 425 пиксел хүртэл тавьдаг . Төлөвлөгөө нь хэрэглэгчийн хөтчийн харагдацыг тохируулахын тулд хуудсын өргөнийг байнга сунгаж, эсвэл гэрээтэй байлгах явдал юм. Үүний тулд бид Properties дахь 100% өргөн товчийг дарсан. Энэ нь X-ийн утгаас хэтэрдэг бөгөөд зураг дээр хөтчийн дэлгэцийн өргөнийг 100% үргэлж байлгахыг баталгаажуулах.
05 - 07
Зургийн байршуулагчид зураг нэмэх
Rectangle сонгосон нь бид дүүргэх холбоосыг дарсан - Өнгөт Chip - би математикийн бэхийг дарж тэгш өнцөгт дэх зураг нэмэхийн тулд. Fitting area-д бид Scale To Fit- ийг сонгож Pos image дэх төвийн бариулыг дүрсийн төвөөс хэмжсэн масштабтай болгохыг баталгаажуулсан.
Дараа нь бид эхний хоёр текстийн блокуудын хоорондох зургийг хуулбарлахын тулд Option / Alt-Shift-drag technique-ыг ашигласан. Үлдсэн хоёр зургийг бид бас хийлээ.
Зургийн байршлаар хөдөлгөөнийг нэмэх цаг болжээ.
06 - 07
Parallax Scrolling нэмэх
Adobe Muse дээр parallax scrolling нэмэх хэд хэдэн арга байдаг. Бид танд үүнийг хийх энгийн арга замыг үзүүлэх болно.
Хоосон самбарыг нээхийн дараа Scroll-н товчлуурыг дараад нээж, Motion checkbox дээр дар .
Эхний ба Final Motion-ийн утгыг та харах болно. Эдгээр нь Scroll Wheel-тэй хэр хурдан дүрсийг тодорхойлно. Жишээ нь, 1.5 утга нь зурагнаас 1.5 дахин хурдан хөдөлж чадна. Бид зургийг байршуулахын тулд 0 утгыг ашигласан.
Хэвтээ ба босоо сумнууд нь хөдөлгөөний чиглэлийг тодорхойлно. Хэрвээ утга нь 0 гэвэл ямар сум таны товшсоныг үл харгалзан зураг зурж үл болно.
Дундаж утга - Түлхүүр байрлал - зурагнууд хөдөлж эхлэх цэгийг харуулна. Зурагт дээрх мөр эхэлнэ, энэ зурагны хувьд хуудасны дээд талд 325 пиксель байна. Гүйлгээ нь тухайн утгыг хүрэхэд зураг хөдөлж эхэлнэ. Та энэ утгыг харилцах цонхон дээр өөрчлөх юмуу эсвэл мөрийн дээд талд байрлах эсвэл дээш доош нь чирж болно.
Энэ хуудсанд байгаа бусад зургуудыг давт.
07-ийн 07
Хөтчийн Тест
Энэ үед бид дууссан. Бид хамгийн түрүүнд хийж байсан зүйл нь Файл> Хадгалах Сайтыг сонгох явдал байв. Хөтөч тестийн хувьд бид зүгээр л Хөтөч дэх Файл> Урьдчилсан хуудас сонгосон. Энэ нь манай компьютерын үндсэн хөтөчийг нээж, хуудас нээгдэх үед бид гүйлгэж эхлэв.