Պրոֆեսիոնալ վեբ դիզայներները զարգացնում են վեբ կայքի ձևանմուշներ, սովորաբար գրաֆիկական հզոր խմբագիրներում, ինչպիսիք են Adobe Photoshop- ը: Աշխատանքի արդյունքը պատկերով ֆայլ է, որն այս տեսքով տրամադրվում է հաճախորդին: Պատրաստի ձևավորումն օգտագործելու համար, այսինքն `համացանցային կայք տեղադրելու համար հարկավոր է կտրել ձևանմուշը:
Անհրաժեշտ է
ռաստերային գրաֆիկայի խմբագիր Adobe Photoshop:
Հրահանգներ
Քայլ 1
Բացեք կաղապարի ֆայլը Adobe Photoshop- ի գրաֆիկական խմբագրում: Ընտրացանկից ընտրեք File և Open կամ սեղմեք Ctrl + O ստեղնների համադրությունը: Դրանից հետո հայտնվող երկխոսությունում անցեք ֆայլով գրացուցակը, ընտրեք այն ցուցակում և կտտացրեք «Բացել» կոճակին:
Քայլ 2
Կաղապարի պատկերը դիտելու համար ընտրեք հարմար սանդղակ: Օգտագործեք Zoom Tool կամ համատեքստային ընտրացանկի տարրերը: Ընտրեք սանդղակ, որը թույլ է տալիս կուրսորը տեղադրել պիքսելային ճշգրտությամբ: Դա անհրաժեշտ է հղման տողերը ճշգրիտ սահմանելու համար:
Քայլ 3
Ձևանմուշի նկարի վերևում ձևավորեք տողերի մի շարք: Միացրեք տիրակալների ցուցադրումը փաստաթղթերի պատուհաններում, եթե այն արդեն միացված չէ: Դա անելու համար սեղմեք Ctrl + R կամ ընտրացանկից ընտրեք Դիտել և Կառավարիչներ:
Քայլ 4
Տեղափոխեք մկնիկի կուրսորը վերևի քանոնի վրա ՝ հորիզոնական հղման գիծ ավելացնելու համար: Սեղմեք և պահեք ձախ ստեղնը: Տեղափոխեք մկնիկի կուրսորը դեպի պատկերի տարածք: Նմանապես, օգտագործելով ճիշտ քանոն, կարող եք ավելացնել հորիզոնական գծեր:
Քայլ 5
Ավելացրեք հղման գծերի պահանջվող քանակը և տեղադրեք դրանք ձևանմուշի շրջանների բաժանման սահմանների երկայնքով: Տողերը պետք է անցնեն բոլոր այն տեղերը, որտեղ ցանկանում եք կտրել ձևանմուշը: Դրանք պետք է սահմանափակեն բոլոր պատկերներն ու տրամաբանական տարածքները (պատկերանշան, կայքի վերնագիր, հորիզոնական և ուղղահայաց ընտրացանկեր և այլն), որոնք կներկայացվեն ինտերնետային էջում:
Քայլ 6
Ակտիվացրեք Slice գործիքը: Դրա կոճակը ուղղահայաց գործիքագոտում է:
Քայլ 7
Կտոր գործիքի միջոցով ստեղծեք կտրող տարածքների պահանջվող քանակը: Կաղապարը ցուցադրելու համար ընտրեք հարմար սանդղակ: Մկնիկի միջոցով սահմանեք տարածքների սահմանները: Երրորդ քայլում ավելացված ուղեցույցները կտրամադրեն ձեր ստեղծած օբյեկտների սահմանների ճշգրիտ դիրքավորումը: Անհրաժեշտության դեպքում կարգավորեք եղած տարածքները `օգտագործելով Slice Select Tool- ը:
Քայլ 8
Անհրաժեշտության դեպքում փոխեք կտրող շրջանների հատկությունները: Ակտիվացրեք կտոր ընտրելու գործիքը: Աջ կտտացրեք ցանկալի հատվածին: Համատեքստային ընտրացանկում ընտրեք Խմբագրել կտոր ընտրանքները: Հայտնվող կտորների ընտրանքների երկխոսությունում ընտրեք տարածքի տեսակը (նկար, դատարկ տարածք, աղյուսակ), ֆոնի լրացման ռեժիմը, անհրաժեշտության դեպքում նշեք անունը, թիրախային URL- ն, alt="Պատկեր" հատկանիշի պարունակությունը և այլ արժեքներ, Սեղմեք OK:
Քայլ 9
Կտրեք կաղապարը: Ընտրացանկից ընտրեք File and Save for Web & Devices- ի համար կամ սեղմեք Shift + Ctrl + Alt + S: Պահպանեք վեբ և սարքերի համար երկխոսության մեջ նշեք ձևաչափը և պատկերի սեղմման պարամետրերը, որոնցում կջնջվի ձևանմուշը: Կտտացրեք «Պահել» կոճակին: Saveուցադրվելու է Save Optimized As երկխոսությունը:
Քայլ 10
Ընտրեք HTML և Պատկերներ (*.html) Ֆայլի տեսակը բացվող ցուցակում, իսկ File name դաշտում մուտքագրեք այն ֆայլի անունը, որտեղ տեղադրվելու է ձևանմուշի HTML նշումը: Կտորների ցանկում ընտրեք Բոլոր Կտորները: Նշեք արդյունքի գրացուցակը և կտտացրեք «Պահել» կոճակին:
Քայլ 11
HTML ֆայլը կտեղադրվի նպատակային գրացուցակում, որն, ըստ էության, պատրաստի վեբ էջի ձևանմուշ է: Պատկերների ենթագրացուցակը պարունակում է պատկերների ամբողջություն, որոնց մեջ կտրվել է սկզբնական ձևանմուշը:
