Ինտերնետում «ամենաշոգ» մեթոդներից մեկն այսօր զուգահեռային գույն է: Մենք բոլորս եղել ենք այն կայքերը, որտեղ դուք մկնիկը վերածում եք ոլորման անիվը եւ էջի բովանդակությունը շարժվում է վեր կամ վար կամ էջի վրա, երբ դուք մկնիկը շրջում եք:
Նրանց համար նոր վեբ դիզայնի եւ գրաֆիկական դիզայնի համար այս տեխնիկան կարող է չափազանց դժվար է հասնել CSS- ի պահանջվող գումարի չափով:
Եթե դա նկարագրում է ձեզ, կան մի շարք ծրագրեր, որոնք կարող են պարզապես դիմել գրաֆիկական նկարիչների: Նրանք հիմնականում օգտագործում են ծանոթ էջերի դասավորության մոտեցում վեբ էջերում, ինչը նշանակում է, որ շատ բան չկա, եթե այդպիսիք կան, կոդավորումը ներգրավված է: Մի ծրագիր, որը իսկապես առաջ է քաշվել, հայտնի է Adobe Muse- ին:
Գաղափարների միջոցով կատարվող աշխատանքը բավականին զարմանալի է, եւ դուք կարող եք տեսնել նմուշառման այն, ինչ կարող եք անել, այցելելով Muse- ի օրը : Թեեւ վեբ պեսը հակված է դիտել Muse- ը որպես «քամու խաղալիք», այն նաեւ օգտագործվում է դիզայներների կողմից `շարժական եւ վեբ նախատիպերի ստեղծման համար, որոնք ի վերջո հանձնվում են մշակողների վրա իրենց թիմում:
Մի տեխնիկան, որը շատ հեշտ է իրականացնել Muse- ը, զուգահեռ շարժում է, եւ եթե ցանկանում եք տեսնել զորավարժությունների ավարտված տարբերակը, մենք անցնելու ենք, նշեք ձեր բրաուզերը այս էջում: Երբ դուք գլորում եք մկնիկի գունավոր անիվը, տեքստը կարծես տեղափոխվում է էջի վերեւ կամ ներքեւ, եւ պատկերները փոխվում են:
Եկեք սկսենք.
01-ը 07-ը
Ստեղծեք վեբ էջ
Երբ սկսում եք Muse, սեղմեք New Site հղումը: Դա կբացի նոր կայքի հատկությունները : Այս նախագիծը նախատեսված է աշխատասեղանի դիմումի համար, եւ այն կարող եք ընտրել այն սկզբնական կարգի բացվող ցանկում: Կարող եք նաեւ սահմանել արժեքները սյունակների, ճեղքերի լայնության, ծայրերի եւ լրացումների համար: Այս պարագայում մենք չենք մտահոգված այս հարցում եւ ուղղակի սեղմեց OK- ը :
02-ից 07-ը
Ֆորմատը էջը
Երբ դուք տեղադրեք կայքի հատկությունները եւ կտտացրեք OK, դուք տեղափոխվել եք այն, ինչ կոչվում է Plan view: Վերեւի էջը եւ պատուհանի ներքեւի մասում Վարպետի էջ կա: Մենք միայն մեկ էջ հարկավոր էինք: Դիզայն Տեսքի հասնելու համար մենք կրկնակի կտտացրինք այն ինտերֆեյսը բացող Գլխավոր էջին:
Ձախ կողմում մի քանի հիմնական գործիքներ են, եւ աջ կողմում են տարբեր վահանակներ, որոնք օգտագործվում են էջի բովանդակությունը մղելու համար: Վերեւի մասում այն հատկությունները, որոնք կարող են կիրառվել էջում կամ էջում ընտրված որեւէ բան: Այս դեպքում մենք ուզում էինք ունենալ սեւ ֆոն: Դրան հասնելու համար մենք սեղմեք « Browser Fill» գույնի չիպի վրա եւ ընտրում ենք Գույնի ընտրիչից:
03-ից 07-ը
Ավելացնել էջի տեքստը Էջում
Հաջորդ քայլը էջին մի քանի տեքստի ավելացումն է: Մենք ընտրեցինք տեքստային գործիքը եւ դուրս հանեցինք տեքստային տուփ: Մենք մտանք «Ողջույն» բառը եւ «Properties» - ում տեքստի տեքստը Arial- ին, 120 պիքսել սպիտակ: Կենտրոնը հավասարակշռված է:
Այնուհետեւ անցել ենք ընտրության գործիքին, կտտացրինք տեքստային տուփին եւ դրեց իր Y դիրքը 168- ից մինչեւ փիքսել: Ընտրված տեքստային արկղով մենք բացեցինք Հավասարեցնել վահանակը եւ տեքստային տուփը կենտրոնում:
Վերջապես, ընտրված տեքստային տուփով մենք պահեցինք Տարբերակ / Alt եւ Shift ստեղները եւ տեքստային տուփի չորս օրինակ: Մենք փոխել ենք տեքստի եւ յուրաքանչյուր պատճենի Y- ի դիրքորոշումը.
- Դեպի, 871
- Գրաֆիկա, 1621
- Ծրագրային ապահովում, 2371
- @ 3181
Դուք կտեսնեք, ինչպես նշեք յուրաքանչյուր տեքստային տուփի տեղադրությունը, էջը չափափոխվում է `տեղավորելու տեքստի գտնվելու վայրը:
04-ից 07-ը
Ավելացնել պատկերների տեղադրողներ
Հաջորդ քայլը տեքստի բլոկների միջեւ պատկերներ տեղադրելն է:
Առաջին քայլն այն է, որ ընտրեք ուղղանկյուն գործիքը եւ նկարեք մեր տուփը, որը ձգվում է էջի մի կողմից մյուսը: Ընտրված ուղղանկյունով մենք բարձրացրինք նրա բարձրությունը մինչեւ 250 պիքսել եւ նրա դիրքը `425 պիքսել : Ծրագիրը պետք է ունենա դրանք միշտ ձգվել կամ պայմանագիր կնքել էջի լայնությամբ `տեղադրելու օգտվողի դիտարկիչի տեսողությունը: Դա կատարելու համար մենք սեղմեցինք Properties- ի 100% լայնության կոճակը: Ինչ է սա օգնում է գունավոր X- ի արժեքին եւ պատկերն ապահովում է դիտարկիչի տեսքի լայնության 100% -ը:
05-ից 07-ը
Ավելացնել նկարներ Image Placeholders- ին
Ընտրված ուղղանկյունով մենք կտտացրինք Լրացրեք հղումը `ոչ թե Color Chip- ը եւ կտտացրեց I մագ թանաքը ` ուղղանկյունի պատկեր ավելացնելու համար: Ներդաշնակության տարածքում ընտրեցինք Scale To Fit- ը եւ կտտացրեց Position- ի կենտրոնի բռնիչը , որպեսզի պատկերն ընդարձակված լինի պատկերի կենտրոնից:
Հաջորդը, մենք օգտագործեցինք Option / Alt-Shift-drag տեխնիկան, առաջին երկու տեքստային բլոկների միջեւ պատկերի պատճենը ստեղծելու համար, բացեց Ֆայլի վահանակը եւ փոխեց պատկերը մյուսի համար: Մենք դա արեցինք մնացած երկու պատկերների համար:
Ներկայացրած պատկերներով, ժամանակն է ավելացնելու միջնորդությունը:
06-ից 07-ը
Ավելացնել Parallax Scrolling
Adobe Muse- ում parallax- ի սկավառակի ավելացման մի քանի եղանակներ կան: Մենք ձեզ ցույց կտանք, թե դա պարզ ձեւ է:
Լրացրեք վահանակը բացելուց հետո սեղմեք Ոլորման էջը եւ երբ այն բացվում է, կտտացրեք Շարժման վանդակը :
Դուք կտեսնեք նախնական եւ վերջնական շարժման արժեքները: Սրանք որոշում են, թե որքան արագ է պատկերի շարժումը կապված Scroll Wheel- ի հետ: Օրինակ, 1.5 արժեքը պատկերը 1.5 անգամ ավելի արագ կտեղափոխի, քան անիվը: Պատկերները տեղադրելու համար 0 արժեք ենք օգտագործել:
Հորիզոնական եւ ուղղահայաց նետերը որոշում են շարժման ուղղությունը: Եթե արժեքները 0 են, պատկերները կախված չեն անկախ նրանից, թե որ սլաքն եք սեղմում:
Միջին արժեքը ` հիմնական դիրքորոշումը ցույց է տալիս այն կետը, որտեղ պատկերները սկսում են շարժվել: Պատկերի վերեւում գիծը սկսվում է այս պատկերը, էջի վերեւից 325 փիքսել: Երբ գիրքը հասնում է այդ արժեքին, պատկերը սկսում է շարժվել: Այս արժեքը կարող եք փոխել այն, փոխելով այն երկխոսության դաշտում կամ սեղմելով եւ սահեցնելով կետը գծի վերեւում կամ վեր կամ վար:
Կրկնեք այս էջի մյուս պատկերների համար:
07-ից 07-ը
Browser Test
Այս պահին մենք ավարտվեցինք: Առաջին բանը, որ մենք արեցինք, ակնհայտ պատճառներով պետք է ընտրել Պատկեր> Պահել կայքը : Բրաուզերի փորձարկումին մենք պարզապես ընտրեցինք Ֆայլի> Նախադիտման էջը Browser- ում : Սա բացեց մեր համակարգչի լռելյայն զննարկիչը եւ երբ էջը բացվեց, մենք սկսեցինք շարժվել: