Webանցում կա հսկայական քանակությամբ վեբ կայքի ձևանմուշներ, բայց դրանք ունեն մեկ թերություն. Դրանք եզակի չեն: Եթե կայքի սեփականատերը չի ցանկանում, որ իր կայքի դիզայնը կրկնվի այլուր, նա կարող է պատվիրել ձևանմուշ պրոֆեսիոնալ դիզայներից կամ փորձել այն ստեղծել ինքնուրույն:
Դա անհրաժեշտ է
Adobe Photoshop ծրագիր:
Հրահանգներ
Քայլ 1
Սեփական ձևանմուշ ստեղծելը այնքան էլ բարդ խնդիր չէ, ինչպես կարող է թվալ առաջին հայացքից: Աշխատելու համար ձեզ հարկավոր է Adobe Photoshop - իհարկե, պետք է ունենալ առնվազն դրա հետ աշխատելու հիմնական ըմբռնում: Բայց նախքան ծրագիրը սկսեք և սկսեք ստեղծել, դուք պետք է նախապես մտածեք ապագա դիզայնի մասին: Դա անելու ամենահարմար տարբերակն է նախ ծանոթանալ առնվազն հարյուր պատրաստի կաղապարների հետ, գնահատել դրանց առավելություններն ու թերությունները: Ուշադրություն դարձրեք որոշակի նախագծման տարրերի հաջող լուծումներին: Դա չի նշանակում, որ դուք դրանք պատճենելու եք, բայց միանգամայն ողջամիտ է հիմք ընդունել մի քանի գեղեցիկ և հարմարավետ լուծումներ:
Քայլ 2
Հիմնվելով այլ մարդկանց կաղապարների վերլուծության վրա և ձեր սեփական ստեղծագործական ունակությունների վրա, դուք պետք է գաղափար ստանաք, թե ինչպես է ձեր կայքը նայելու: Ապագա դիզայնի կոպիտ ուրվագծերը լավագույնն է անել սովորական A4 թերթերի վրա գունավոր մատիտներով: Դուք պետք է սկսեք աշխատել Photoshop- ի հետ միայն այն բանից հետո, երբ հստակ պատկերացում ունենաք, թե կոնկրետ ինչ եք նկարելու:
Քայլ 3
Սկսեք Photoshop- ը, ստեղծեք նոր 1200x1600 նախագիծ, սահմանեք թափանցիկ ֆոն: Միացրեք Ruler գործիքը, եթե այն արդեն միացված չէ, դա անելու համար սեղմեք Ctrl + R ստեղնաշարի համադրությունը: Միացնել կտրումը. Դիտում - Բեկում:
Քայլ 4
Այժմ մենք պետք է բաժանենք ձևանմուշը ուղեցույցներով, որոնք ցույց կտան դրա տարրերի սահմանները `կողմերը, սյունները և այլն: Օրինակ, դուք ցանկանում եք բաժանել ձևանմուշը այնպես, որ ձախ կողմում լինի նեղ սյուն, ձևանմուշից աջ ՝ լայն սյուն, իսկ վերևում տեղ լինի վերնագրի համար: Սա նշանակում է, որ ձեզ հարկավոր են երեք ուղղահայաց գծեր (ձևանմուշի ձախ եզր, աջ և նրանց միջև գծեր) և հորիզոնական, որոնք ցույց են տալիս վերնագրի ներքևի եզրը: Ուղղահայաց գիծ սահմանելու համար կուրսորը տեղափոխեք ձախ կողմում գտնվող ձախ քանոնի, սեղմեք V և, բանալին պահելով, գիծը քաշեք ցանկալի վայր: Նույնը արեք մյուս երկու ուղղահայաց գծերի հետ: Հորիզոնականները կառուցված են նույն կերպ, օգտագործվում է միայն վերին քանոնը:
Քայլ 5
Գտեք ձեր ձևանմուշի ֆոնը, այն պետք է լինի փոքր, կրկնվող օրինակ: Բացեք այն Photoshop- ում, ընտրեք, պատճենեք: Դրանից հետո կպցրեք կաղապարի մեջ այնքան անգամ, որքան անհրաժեշտ է այն ֆոնով լրացնելու համար: Տեղադրումն արվում է այսպես. «Խմբագրել» - «Տեղադրել», ապա հետին պլանի տարածքը քաշել ցանկալի վայր: Նույնիսկ ավելի արագ է պատկեր տեղադրելը ՝ օգտագործելով Ctrl + V հրամանը: Նույն կերպ ավելացնել ֆոն կայքի վերնագրի համար: Ֆոն ստեղծելու համար կարող եք օգտագործել գրադիենտի տարբեր լցոնումներ:
Քայլ 6
Օգտագործելով Մատիտ գործիքը, գծեք կաղապարի սահմանները ՝ կենտրոնանալով արդեն գծված գծերի վրա (այսինքն ՝ դրանց գագաթին): Դուք ստացել եք ամենապարզ ձևանմուշի հիմքը, այժմ անհրաժեշտ է այն լրացնել անհրաժեշտ մանրամասներով ՝ նավիգացիոն կոճակներ, ընտրացանկի տողեր, զարդարման տարբեր տարրեր և այլն: Կոճակներ և այլ տարրեր ստեղծելու մասին լրացուցիչ տեղեկությունների համար կարդացեք Adobe Photoshop- ի հետ աշխատելու վերաբերյալ համապատասխան հոդվածները:
Քայլ 7
Ձևանմուշը ստեղծվել է, այժմ դուք պետք է կտրեք այն մասերի ՝ դրանք html էջում տեղադրելու համար: Կտրեք գործիքի կտոր գործիքով: Այն գտնելու համար բացեք ընտրացանկից աջ կտտացրեք Frame գործիքը և ընտրեք Cutout: Այժմ ձևանմուշը կարող եք տեղադրել ըստ ցանկության, այնուհետև պահպանել ՝ «Ֆայլ» - «Պահել վեբի համար»: Բացված պատուհանում ընտրեք ֆայլի տեսակը ՝ HTML և պատկերներ, նշեք ֆայլի անունը ՝ index.htm և պահեք այն: Դուք կունենաք index.htm ֆայլ և կտոր պատկերներով պատկերների պանակ:
