Պատկերներ պատրաստելու համար շարժական սարքերի համար

Բջջային հեռախոսի համար պատկերումը միշտ չէ, որ այն կարծես թե

Այն դառնում է ավելի տարածված գրաֆիկայի համար `ոչ միայն իրենց աշխատանքը հայտնվում տպարանում, այլեւ վեբում եւ սարքերում, ինչպիսիք են iPhones, iPads, Android սարքեր եւ Android հաբեր: Մակերեւույթի վրա դա կարելի է դիտարկել որպես «լավ բան», քանի որ լրատվամիջոցները մեր աշխատանքը հայտնվում են թվային էկրանների ընդլայնման մեջ: Դեֆիցիտը հանդիսանում է էկրանների թափանցիկ քանակ եւ էկրանների թույլատրելի քանակի քանակ: Դա հազվադեպ է լսելի տեսք լսել, թե ինչ է տեղի ունեցել այն օրերին, երբ CMYK ֆորմատում TIFF- ի 300 դյույմ տեսանյութը նորմ էր: Oh լավ հին օրերի համար:

Այդ օրերը ավարտվեցին: Այժմ մենք պետք է վիճենք այն փաստի հետ, որ 200-ից 200 պատկերը կարող է մեկ սարքի վրա տուգանք լինել եւ դեռեւս մեկ եւ երեք եռամսյակի եռամսյակային կտրվածքով հայտնվում է մեկ այլ սարքի վրա: Այն ամենը, իրոք, գալիս է «լուծման սպառազինությունների մրցավազք», որը վարում է սարքի արտադրողները, քանի որ փորձում են ավելի շատ պիքսել խառնել էկրանին, քան մրցակիցները:

Սա բերում է այն, ինչ մենք կկոչենք «The Success of the Suffixes»: Հեղինակները այս բաներն են `@ 2x, @ 3x - պատկերն անվանել: Նրանք, ըստ էության, ճիշտ պատկերն են ճիշտ տեղում համապատասխան սարքում: Այնուհետեւ այն ավելի լավ է ստանում:

Շատ մեր աշխատանքը ներառում է սրբապատկերների հետ աշխատելը եւ հարթ դիզայնի շարժման բարձրանալով, դրանք ստեղծվում են այնպիսի վեկտորային նկարչություններում, ինչպիսիք են Illustrator եւ Sketch: Խնդիրն այն սարքերը պարզապես չեն կարող մատուցել .ai կամ .eps ֆայլերը: Նրանք պետք է վերածվեն Scalable Vector Graphics- ի եւ, կախված նրանից, թե ինչպես է օգտագործվում պատկերակները ստեղծելու համար, կարող է նույնիսկ լինել SVG տարբերակ:

Այնուհետեւ այն ավելի լավ է ստանում:

Ծրագրերի նոր դաս կա `նախատիպային ծրագրեր, որոնք դառնում են հավաքման կետ, նախքան ձեր պատկերները եւ պատկերակները տեղադրվում են սարքերին եւ նրանք ունեն նաեւ իրենց առանձնահատկությունները:

Այս ձեռնարկը շարժվում է Photoshop- ի եւ Sketch- ի միջեւ գրաֆիկայի համար եւ օգտագործելով Adobe Experience Design- ը `ձեր գաղափարի եւ վերջնական տեղակայման միջեւ ցավերի մի քանիսի ցուցադրելու համար: Եկեք սկսենք.

01-ը 05-ից

Ինչպես պատրաստել Պատկերներ Adobe Photoshop- ի շարժական սարքերի համար

Այս գործընթացի առաջին քայլը իմանալն է ձեր նպատակային սարքի կամ սարքերի մասին: Այս դեպքում դուք կկարողանաք թիրախավորել iPhone 6-ը, որը ունի 375 փիքսել լայնությամբ էկրան 667 պիքսել բարձրությամբ: Դիզայնը կոչ է անում պատկերի լինել էկրանի լայնությունը:

Շվեյցարիայի Բերն քաղաքում գտնվող Բեռն Միդեռի տաճարի ներսում նկարահանվել է նկարը: Պատկերը Photoshop- ում բացվելուց հետո Image> Image Size- ը ընտրեք պատկերի չափերը եւ դրա որոշումը: Ակնհայտ է, որ պատկերը 3156 x 2592 է, որը 300 ppi բանաձեւով եւ 23.4 Մբ ֆայլի չափով ուղղակի չի աշխատի:

Ներսի Պատկերի երկխոսության դաշտում, նվազեցնել բանաձեւը 100 ppi : Արդյոք սա առաջինն է, քանի որ պատկերը չափերը նույնպես փոխվելու են: Բանաձեւի որոշմամբ փոխեք լայնությունը `375 պիքսել: Եթե ​​դուք ստուգեք Image Size- ի տվյալները, ապա դուք կտեսնեք, որ պատկերը կրճատվել է 23.4 Մբ-ից մինչեւ ավելի բջջային 338k: Սեղմեք OK , փոփոխությունը ընդունելու համար եւ փակեք Image Size երկխոսությունը:

02-ից 05-ը

Ինչպես օգտվել Adobe Photoshop- ում «Export As ...» երկխոսության տուփից

Պատկերը պատրաստ է արտահանման համար, ընտրեք «Արտահանել> Արտահանել որպես ...» , արտահանման արտաբերման աղյուսակը բացելու համար:

Այս երկխոսության տուփը Photoshop- ի վերջին հավելվածն է եւ փոխարինում է «Պահել վեբի» երկխոսության տուփը, որը տարիներ շարունակ օգտագործվում է: Եթե ​​դուք դեռ կարիք ունեք, ապա այն կարող եք գտնել այն արտահանման փոշին ներքեւում: Դա ակնհայտ պատճառներով, այժմ հայտնի է որպես «Արտահանման համար վեբ (Legacy)»: Եթե ​​սա ձեր առաջին այցն է այս երկխոսության դաշտը, այստեղ կարճատեւ շրջադարձ է.

• Size: Այս սյունակը սահմանում է պատկերը պատկերի չափը: Այս տարածքի հետաքրքիր կողմն այն է, որ պատկերը ընդլայնվի, բայց սարքը էկրանին չի երեւում, քանի որ սարքի էկրանին հսկայական թվով պիքսել է:
• 1X: Սեղմիր պահեք սա, եւ դուք կներկայացնեք մի շարք չափերի: 1x, 2x եւ 3x կատեգորիաները սովորաբար կապված են Apple- ի Hi Dpi սարքերի հետ եւ մի քանի ուրիշների հետ միասին պատրաստվում են պատկերներ Android սարքերի համար:
• Suffix: Այս ընտրությունը ցույց կտա ձեր չափը, բայց այն կցուցադրվի որպես @ 2x կամ ընտրված չափը: Այս վերջնակետը կցուցադրվի պատկերի անուն:
• + Նշանը. Սեղմեք այստեղ, ելքի համար տարբեր չափեր ավելացնելու համար: Այս դեպքում կտտացրեք այն երկու անգամ եւ ընտրեք 2x եւ 3x ընտրացանկից: Դա կկապի գրեթե ցանկացած iOS սարք:
• The Trash Can: Սեղմեք այս եւ ընտրությունը հեռացվում է գծապատկերից:
• Ֆայլի կարգավորումներ. Ընտրեք ձեւաչափը `jpg, png, gif կամ svg - պատկերի առավել հարմար: Եթե ​​ֆայլի չափը մտահոգություն է, կարող եք նաեւ նվազեցնել Որակի պարամետրերը:
• Image Size: Դուք կարող եք փոխել պատկերի ֆիզիկական չափերը:
• Canvas Size: Դուք կարող եք փոխել պատկերը կտավ ֆիզիկական չափերը:
• Մետատվյալներ. Դուք կարող եք հեղինակային իրավունքի եւ ձեր կոնտակտային տվյալները ավելացնել պատկերը մետատվյալներին:

Ավարտելուց հետո կտտացրեք Արտահանում բոլոր կոճակը: Ձեզանից կպահանջվի, թե որտեղ եք ցանկանում տեղադրել պատկերները: Կատարելու լավ սովորություն է սեղմել Նոր Թղթապանակ կոճակը եւ ստեղծել թղթապանակ `արտահանվող պատկերները պահելու համար: Երբ կտտացրեք Արտահանումը, ձեզ կցուցադրվեն պատկերների պատկերները:

03-ից 05-ը

Ինչպես պատրաստել պատկերներ բջջային սարքերի համար, ուրեմն 3-ից Bohemian Coding- ից

Եզրագծային 3, Macintosh- ի միայն Բուխեմյան կոդավորման ծրագիրը, արագորեն ձեռք է բերում UX- ի եւ UI- ի դիզայներների միջեւ `վեբ եւ ծրագրերի նախագծման ինտենսիվ ուշադրության կենտրոնում: Փաստորեն, Photoshop- ը, շատ առումներով, տարօրինակ վիճակում է, որպեսզի «բռնել» «Sketch» ​​- ով:

Sketch- ում բջջային համար պատկեր պատրաստելու համար ընտրեք նկարը աշխատասեղանին եւ կտտացրեք Վերանվանել Արտահանման կոճակը, Վերեւի մասի վահանակի ներքեւում : Դա կբացվի Արտահանման երկխոսության վանդակը: Սեղմիր + նշանը, 2x եւ 3x տարբերակները ավելացնելու համար, ինչպես նաեւ ավելացնել suffixes: Ֆորմատներ `PNG, JPG, TIF, PDF, EPS եւ SVG: Այս դեպքում ընտրել JPG: Կտտացրեք Արտահանման կոճակը եւ թիրախը կամ ստեղծեք թղթապանակ, արտահանվող տարբեր պատկերները պահելու համար:

04-ից 05-ը

Ինչու դուք պետք է ստեղծեք Պատկերի երեք (կամ ավելի) տարբերակները

Շատ առումով, Բջջային շուկան բանաձեւերի «Վայրի արեւմուտք» է եւ մեկ չափսը, իհարկե, չի համապատասխանում բոլորին: Adobe Experience Design- ի վերոհիշյալ օրինակից պատկերը տեղադրվում է 2 iPhone 6 վահանակի վրա եւ Android սարքի աշխատասեղան: Ուշադրություն դարձրեք, թե ինչպես ձախ կողմում 1x տարբերակը կարծես կիսով չափ է: Ահա թե ինչպես է պատկերը հայտնվել iPhone 6-ի իր ցանցային էկրանով: 2x տարբերակը համապատասխանում է կատարելապես եւ Android- ի տարբերակը գործարկում է էկրանին: Ձեր ընտրությունն այն է, թե կամ մասշտաբի պատկերը կամ արտապատկերել Photoshop- ից այլ չափով:

05-ից 05-ը

Վաղը փորձեք, փորձեք հաճախ, վստահեք ոչինչ, վստահեք ոչ մեկը եւ հատկապես ինքներդ

Այն, ինչ դուք պետք է հասկանաք, սա հենց գործընթացի սկիզբն է: Դիտեք ձեր աշխատանքը այնքան սարքերում, որքան կարող եք համարվել որպես աշխատանքային հոսքի կենսական կտոր: Դուք նաեւ պետք է տեղյակ լինեք, որ դա ընդամենը առաջին քայլն է գրաֆիկական ակտիվների ստեղծման գործընթացում ծրագրի կամ բջջային ծրագրերի համար:

Օգտագործելով նախատիպերի կիրառումը ցավային կետերը բացահայտելու մեծ միջոց է, սակայն այդ նույն ակտիվները պետք է մշակվեն արտադրողի կողմից օգտագործման համար: Շատ դեպքերում ակտիվների ֆիզիկական չափերը, ներառյալ սրբապատկերները, ֆիզիկապես մեծ են եւ ոչ թե svg, այլ png ֆորմատով: Առաջին հայացքից դա կարող է թվալ, թե մի քիչ ավելի բարձր է, բայց հիշում է պատկերների չափման ոսկե կանոնը. Ավելի լավ է ընդլայնել, քան ընդարձակել:

Ներքեւի տողը սերտորեն աշխատեք ձեր մշակողի հետ եւ օգտագործեք նախատիպի ծրագրային ապահովումը `որպես դիզայներական մտադրությունների ցուցադրման միջոց: Ի վերջո, այնուամենայնիվ, այդ նույն ակտիվները պետք է պատրաստ լինեն վերջնական արտադրանքի, եւ ձեր մշակողը ավելի լավ տիրապետում է այն բանին, ինչ նա կարիք ունի: