Вебтегі «ең ыстық» әдістердің бірі бүгінгі параллакспен жылжу болып табылады. Біз тінтуірдің айналдыру дөңгелегін айналдырған сайттарға барып, тінтуір дөңгелегін айналдырғанда, беттегі мазмұн жоғары немесе төмен жылжиды немесе беттің арасына жылжиды.
Веб-дизайн және графикалық дизайнға арналған жаңа адамдар үшін бұл әдіс қажетті CSS көлеміне байланысты өте қиын болуы мүмкін.
Егер сізді сипаттайтын болсаңыз, графикалық суретшілерге ғана хабарласуға болатын бірқатар бағдарламалар бар. Олар негізінен веб-беттерге таныс бет орналасуының әдісін қолданады, бұл дегеніміз, егер бар болса, кодтау тартылған. Adobe Muse-тің нағыз таңқалдырған бір қосымшасы.
Мұражайдың көмегімен графикамен айналысатын жұмыс өте таңқаларлық және Мұстауның Күннің сайтына кіріп, не істей алатыныңызды көре аласыз. Веб-ойыншылар Мұзды «ойын-сауық ойыншықтары» ретінде қарастырса да, дизайнерлер оларды ұжымда әзірлеушілерге берілетін ұялы және веб-прототиптерді жасау үшін пайдаланады.
Muse әдістерін орындаудың керемет әдісі - параллакспен айналдыру және жаттығудың аяқталған нұсқасын көргіңіз келсе, біз осы серуендеуге барамыз. Тінтуірдің айналдыру доңғалағын айналдырсаңыз, мәтін беті жоғары немесе төмен жылжытылады және суреттер өзгереді.
Бастайық.
01-ден 07-ге дейін
Веб-парақты жасау
Muse іске қосылған кезде Жаңа сайт сілтемесін басыңыз. Бұл жаңа торап сипаттарын ашады . Бұл жоба жұмыс үстелі бағдарламасына арналған және оны Бастапқы Layout ашылмалы мәзірінен таңдауға болады. Сондай-ақ, бағандар саны, Gutter Width, Margins және Padding үшін мәндерді орнатуға болады. Бұл жағдайда, біз бұған қатты алаңдаған жоқпыз және OK-ны басқанбыз.
02/07
Бетті пішімдеу
Сайт сипаттарын орнатқаныңызда және OK түймешігін басқан кезде, сіз жоспар көрінісі деп аталады. Терезенің төменгі бөлігіндегі басты бет және Мастер-бет бар . Бізге тек бір бет қажет болды. Дизайн көрінісіне жету үшін, интерфейсті ашатын басты бетке екі рет шықтық.
Сол жақта бірнеше негізгі құралдар бар және оң жағында беттердегі мазмұнды басқару үшін қолданылатын панельдер әр түрлі болады. Жоғарғы жағында параққа немесе кез-келгенде таңдалған кез-келген қолдануға болады. Бұл жағдайда біз қара фонға ие болғымыз келді. Мұны орындау үшін біз Browser Fill түстер чипін басып, Color Picker-ден қара түсті таңдаймыз.
03 07
Мәтінді бетке қосыңыз
Келесі қадам - бетке кейбір мәтін қосу. Біз мәтін құралын таңдап, мәтіндік терезені шығардық. Біз «Қош келдіңіз» сөзін енгіздік және Сипаттарда Arial, 120 пиксель ақ түсті мәтінді орнаттық. Орталығы бекітілді.
Содан кейін Таңдау құралына ауысып, Мәтіндік жәшікке шықтық және оның Y позициясын жоғарыдан 168 пиксельге орнаттық. Мәтіндік терезе әлі таңдалған болса, біз Атрибуты тақтасын ашып, мәтіндік терезені ортаға дәл келтірдік.
Ақыр соңында, таңдалған мәтін жолымен біз Опцион / Alt және Shift пернелерін ұстап, мәтіндік терезенің төрт көшірмесін жасадық. Біз әр мәтіннің мәтінін және Y позициясын өзгерттік:
- Кімге, 871
- Графика, 1621
- Бағдарламалық жасақтама, 2371
- @ @, 3181
Әрбір мәтін ұясының орнын орнатқан кезде, мәтіннің орнын орналастыру үшін беттің өлшемі өзгереді.
04 07
Кескінді ұстаушылар қосу
Келесі қадам - мәтін блоктарының арасында сурет салу.
Бірінші қадам - Тік бұрышты құралды таңдау және беттің бір жағынан екіншісіне созылған қорапты салу. Тіктөртбұрышты таңдалған кезде, біз оның биіктігі 250 пиксельге және оның орналасуын 425 пикселге дейін орнаттық . Жоспар пайдаланушының браузерінің көрініс портын орналастыру үшін әрдайым бет еніне созылу немесе келісім жасау болып табылады. Мұны орындау үшін Properties (Сипаттар) ішіндегі 100% ені түймесін басамыз. Бұл әрекеттің мәні X мәнінен ақшыл болып табылады және суреттің шолғышта әрқашан көрінетін терезенің енінің 100% екендігін қамтамасыз ету үшін.
05 07
Кескіндерді бейнелеу орындарына қосыңыз
Таңдалған тіктөртбұрышпен біз Color Chip дегенді емес , Толтыру сілтемесін нұқып, төртбұрышта кескін қосу үшін I кескін сиясын басқанбыз . Fitting алаңында кескіннің ортасынан масштабтауды қамтамасыз ету үшін Fit To Scale параметрін таңдадық және Орналасу аумағындағы ортаңғы тұтқаны бассаңыз.
Одан кейін, алғашқы екі мәтін блоғы арасында кескіннің көшірмесін жасау үшін, Опция / Alt-Shift-drag техникасын пайдаланып, Дайын тақтасын ашып, басқа бейнені ауыстырдық. Біз қалған екі кескін үшін де мұны істедік.
Суреттер орнында қозғалысты қосу уақыты келді.
07 07
Parallax Scrolling қосыңыз
Adobe Muse-те параллакспен жылжудың бірнеше жолдары бар. Біз сізге қарапайым тәсілді танытатын боламыз.
Толтыру тақтасы ашылғанда, Жылжыту қойындысын нұқыңыз және ол ашылған кезде Қозғалыс құсбелгісін қойыңыз .
Бастапқы және соңғы қозғалыс мәндерін көресіз. Бұл кескіннің Айналмалы доңғалаққа қатысты қаншалықты тез қозғалатынын анықтайды. Мысалы, 1,5 мәні кескінді дөңгелектен 1,5 есе жылдам жылжытады. Суреттерді орнына бекіту үшін 0 мәнін қолдандық.
Көлденең және тік бағыттауыштар қозғалыс бағытын анықтайды. Егер мәндер 0 болса, сіз қандай көрсеткі басылғанына қарамай, кескіндер шығады.
Орташа мән - Кілттің позициясы - суреттер жылжитын нүктені көрсетеді. Кескіннің жоғарғы жағында сызық, осы кескін үшін беттің жоғарғы жағынан 325 пиксел басталады. Шиыршық бұл мәнге жеткенде кескін жылжи бастайды. Бұл мәнді диалогтық терезеде өзгерту арқылы немесе жоғары немесе төменгі жолдың жоғарғы жағындағы нүктені басу және апару арқылы өзгерте аласыз.
Бетті басқа суреттер үшін қайталаңыз.
07 07
Браузерді тексеру
Осы сәтте біз аяқталды. Біріншіден, біз нақты себептерге байланысты Файл> Сақтау торабын таңдаңыз. Браузер сынағына қарап, біз тек Файл> Браузерде алдын-ала қарау парағын таңдадық. Бұл компьютердің әдепкі браузері ашылып, бет ашылған кезде біз жылжуға кірістік.