Բովանդակություն
- 01. Սկսեք ցանցից
- 02. Սահմանեք տարբեր ոլորտներ
- 03. Ավելացրեք որոշ նավարկություն
- 04. Կլորացրեք ձեր ուղղանկյունները
- 05. Ավելացրեք պատկերներ
- 06. Ներկայացրե՛ք շերտերի ոճեր
- 07. Մեկուսացրեք ձեր շերտերը
- 08. Ստեղծեք պատկերի ակտիվներ
- 09. Պատճենել CSS հատկանիշները
Այժմ կան նախատիպավորման բազմաթիվ գործիքներ և մեթոդներ, որոնք կօգնեն ձեզ արագ և հեշտությամբ ստեղծել կայքի ծաղրեր: Գուցե դա չեք գիտակցում, բայց Photoshop CC- ը հիանալի գործիք է արագ նախատիպավորման համար: Յուրաքանչյուր վերանայման արդյունքում ծրագրակազմը ավելի մեծ ֆունկցիոնալություն է ձեռք բերել այն դիզայներների համար, ովքեր ցանկանում են արագորեն ստեղծել մետաղալարեր կամ նախատիպեր հաճախորդի հետ կիսելու կամ մշակողին պատրաստ դիզայն կառուցելու համար:
Photoshop CC- ի արագ նախատիպավորման ամենաօգտակար հատկությունները ներառում են շերտերը մեկուսացնելու, անկյունները կսմթելու ուղիղ Rounded Rectangle գործիքի միջոցով և CSS հատկանիշները առանձին շերտերից պատճենելու հնարավորությունները: Եվ Creative Cloud- ի տեղադրումը նաև օգտակար համագործակցության տարրեր է տրամադրում (բաժանորդագրվեք Adobe Creative Cloud- ին այստեղ):
Այս հոդվածում մենք կքննարկենք, թե ինչպես կարելի է ստեղծել արագ նախատիպ Photoshop- ում `օգտագործելով գործիքների լայնությունը` մշակողի և հաճախորդի համար հարմար էջի ծաղր ստեղծելու համար:
01. Սկսեք ցանցից
Կարգավորեք ձեր կողմից նախագծվող էկրանի չափսերով փաստաթուղթ (սմարթֆոն, պլանշետ և այլն): Հաջորդը, ստեղծեք ցանց, որը կձևավորի բազային կառուցվածքը. Դրա համար օգտակար է անվճար ընդլայնում GuideGuide: Բացեք ընդլայնումը վերև, մուտքագրեք ձեր լուսանցքի լայնությունները, սյունակների քանակը և ջրհորդանի լայնությունը: Կտտացրեք GG կոճակին և ունեք ձեր ցանցը:
02. Սահմանեք տարբեր ոլորտներ
Այս պահին օգտակար է արգելափակել ձեր էջի դասավորության հիմնական ոլորտները: Ստեղծեք պանակ ձեր վերնագրի, էջատակի, բովանդակության և ձեզ համար անհրաժեշտ ցանկացած այլ բանի համար: Լավ գաղափար է սահմանել կայքի ձևավորման ցանկացած հիմնական ոլորտ `դրանք ուրվագծելու համար սկսելով բաց գորշ տուփից: Այստեղ ես օգտագործել եմ Rectangle գործիքը ՝ կայքի վերնագրի տարածքը նկարելու համար (1200 x 240px) և ավելացրել վերնագիրը:
03. Ավելացրեք որոշ նավարկություն
Այժմ ավելացրեք նավիգացիոն տարրեր: Ձեր տեսակը կրկնօրինակելու համար ընտրեք շերտը, պահեք այն Հեռացնել/Ալտ բանալին և քաշել: Հոլդինգ Հերթափոխ սահմանափակում է հավասարեցումը: Ձեր տեքստի շերտերը ճշգրտորեն ընտրեք ՝ ընտրելով նավիգացիոն տեքստը և Գործիքների ընտրանքների սանդղակում սեղմելով տարածել ուղղահայաց կենտրոններ: Սա ուղղահայացորեն հարթեցնում և հավասարաչափ տարածում է ձեր շերտերը ՝ այն իդեալական դարձնելով ընտրացանկի տարրերի համար, ինչպես ցույց է տրված:
04. Կլորացրեք ձեր ուղղանկյունները
Այստեղ մենք ավելացնում ենք գրանցման ձևը հիմնական էջի դասավորությանը ՝ օգտագործելով Rounded Rectangle գործիքը: Photoshop CC- ն ունի Ուղիղ կլորացված ուղղանկյունների կենդանի հատկություն, որը հնարավորություն է տալիս փոխել ձեր ձևի անկյունային շառավիղը: Սա նշանակում է, որ դուք կարող եք հետ վերադառնալ և հետագայում փոխել ձեր անկյունները, եթե ձեր դիզայնը դա պահանջում է: Սա կարող է թվալ որպես աննշան հատկանիշ, բայց շատ հարմար է:
05. Ավելացրեք պատկերներ
Արժե պատկերները խելացի օբյեկտների վերափոխել, քանի որ դա նրանց ավելի հեշտ է թարմացնում կամ փոխարինում: Պատկերները պահելու համար կարող եք օգտագործել ձեր տեղապահի ուղղանկյունները որպես վեկտորային դիմակներ: Կամ նկար բերեք որպես նոր շերտ, կրկնօրինակեք ուղղանկյան դիմակը և կապեք այն այդ շերտի հետ, կամ ընտրություն կատարեք ձեր ուղղանկյունից և օգտագործեք Paste Special> Paste Into:
06. Ներկայացրե՛ք շերտերի ոճեր
Շերտերի ոճերը էֆեկտներ ավելացնելու պարկեշտ միջոց են: Ձեր շերտի մեկ այլ շերտի վրա ներկայումս օգտագործվող շերտի ոճը կիրառելու համար սեղմեք Հեռացնել/Ալտ և քաշեք FX պատկերակը դեպի ձեր նոր շերտ: Hover Over շերտ ստեղծելու համար, որը հնարավոր է միացնել կամ անջատել, պարզապես կրկնօրինակեք ձեր ֆոնի ուղղանկյունը և խմբավորեք այս շերտը և ձեր տեքստի շերտը շերտերի խմբի մեջ:
07. Մեկուսացրեք ձեր շերտերը
Սա եւս մեկ օգտակար հատկություն է Photoshop CC- ում, եթե ցանկանում եք խմբագրել ձեր շերտերից միայն մի քանիսը: Ընտրեք այն շերտերը, որոնք ցանկանում եք խմբագրել, ապա անցնել Ընտրել> Մեկուսացնել շերտերը: Սա հնարավորություն է տալիս կենտրոնանալ աշխատանքի հատուկ կարիք ունեցող ոլորտների վրա ՝ առանց խառնաշփոթություն առաջ բերող այլ շերտերի խառնաշփոթի:
08. Ստեղծեք պատկերի ակտիվներ
Adobe Generator- ը Photoshop CC առանձնահատկություն է, որը հնարավորություն է տալիս ստեղծել պատկերային ակտիվներ թռիչքի ժամանակ: Գնացեք Ֆայլ> Ստեղծեք> Պատկերի ակտիվներ: Այժմ Շերտերի վահանակում ավելացրեք ֆայլի ածանց, ինչպիսիք են .png կամ .jpeg, այդ շերտը ավտոմատ կերպով արտահանելու համար նշված թղթապանակ: Մենք դա արել ենք այստեղ պատկերակային ֆայլով:
09. Պատճենել CSS հատկանիշները
HTML նախատիպը ստեղծելիս Photoshop CC- ի հիանալի առանձնահատկությունը շերտի CSS պատճենելու հնարավորությունն է: Անել դա Ctrl + աջ սեղմում պահանջվող շերտի վրա և հարվածել Պատճենել CSS ոճը ՝ կոդը clipboard- ին ավելացնելու համար: Բացեք նոր փաստաթուղթ Dreamweaver- ում, Muse- ում կամ Adobe XD- ում և տեղադրեք ձեր CSS կոդի մեջ:
Այս հոդվածն ի սկզբանե հայտնվել է Համակարգչային արվեստաշխարհի գրաֆիկական դիզայներների առաջատար ամսագիրը: Բաժանորդագրվեք այստեղ.
