Მომზადება სურათები მობილური მოწყობილობების

მობილური ტელეფონისთვის ყოველთვის არ არის ისეთი, როგორიც ჩანს

იგი სულ უფრო მეტად გავრცელებულია გრაფიკული პროგრამებისთვის , რომლებიც არა მარტო მათი ნამუშევარი გამოიფინება ბეჭდვით, არამედ ვებსაითის და მოწყობილობებისთვის, როგორიცაა iPhones, iPads, Android მოწყობილობები და Android ტაბლეტები. ზედაპირზე, ეს შეიძლება იყოს "კარგი რამე", როგორც მედია, ჩვენი ნამუშევარი გამოჩნდება ციფრულ ეკრანებზე. Downside არის მტკნარი რაოდენობის ეკრანები და დამაბნეველი რაოდენობის ეკრანის რეზოლუციებს. ეს არ არის იშვიათია მოსმენილი seasoned პროდები გაინტერესებთ რაც მოხდა იმ დღეებში, როდესაც 300 dpi რეზოლუციის TIFF იმიჯი CMYK ფორმატში იყო ნორმა. ოჰ, კარგი ძველი დღეები!

ეს დღეები დასრულდა. ჩვენ ახლა უნდა დავამტკიცოთ ის ფაქტი, რომ 200 by 200 სურათი შეიძლება აღმოჩნდეს ჯარიმა ერთი მოწყობილობა და ჯერ კიდევ კვარტალში ზომა სხვა და სამი მეოთხედი ზომა კიდევ ერთი. ეს ყველაფერი მართლაც მოდის "რეზერვის იარაღის რბოლაში", რომელიც მოწყობილობის მწარმოებლების მიერ ხორციელდება, რადგან ისინი ცდილობენ ჯემი უფრო მეტ პიქსელ ეკრანზე, ვიდრე მათი კონკურენტები.

ეს მოაქვს, რასაც ჩვენ მოვუწოდებთ "ზრდის სუფიქსები". სუფიქსები არიან ისეთებიც, როგორიცაა: @ 2x, 3x 3x - იმიჯს სახელით. ისინი, ძირითადად, მაგალითად, სწორი სურათის სწორ ადგილას დააყენეთ. მაშინ კიდევ უფრო უკეთესია.

ბევრი ჩვენი ნამუშევარი გულისხმობს ხატებით მუშაობას და ბინა დიზაინის მოძრაობის ჩამოყალიბებას, ეს ყველაფერი შეიქმნა ისეთი ვექტორებით, როგორიცაა Illustrator და Sketch. პრობლემა ის არის, რომ მოწყობილობები უბრალოდ შეუძლებელია. მათ უნდა გადაკეთონ სკალაბური ვექტორული გრაფიკა და, იმის მიხედვით, რომ გამოყენებული იქნას გამოყენებული ხატები, შეიძლება არ იყოს SVG ვარიანტიც.

მაშინ კიდევ უფრო უკეთესია.

არსებობს ახალი კლასის პროგრამული უზრუნველყოფა - Prototyping განაცხადების - რომლებიც ხდება ასამბლეის წერტილი, სანამ თქვენი სურათები და ხატები shoved out მოწყობილობები და მათ აქვთ თავისებურებები ასევე.

ამ სამეურვეო გადადის Photoshop- ისა და Sketch- სთვის გრაფიკისთვის და Adobe Experiment Design- ის გამოყენებით, რათა წარმოაჩინოთ რამდენიმე ტკივილის რაოდენობა თქვენს იდეასა და საბოლოო განლაგებას შორის. დავიწყოთ.

01 წლის 05

როგორ მოვამზადოთ სურათები მობილური მოწყობილობებისთვის Adobe Photoshop- ში

ამ პროცესში პირველი ნაბიჯი იცის თქვენი სამიზნე მოწყობილობა ან მოწყობილობები. ამ შემთხვევაში, თქვენ უნდა იყოს გათვლილი iPhone 6, რომელიც ეკრანის ფართობი 375 პიქსელით 667 პიქსელით მაღალია. დიზაინი მოუწოდებს გამოსახულებას ეკრანის სიგანეზე.

ბერლინის, ბერლინში, ბერლინის სახელობის ტაძრის შიგნით მოხდა გამოსახულება. მას შემდეგ, რაც სურათი იწყება Photoshop- ში, აირჩიეთ გამოსახულება> სურათის ზომა, რათა შეამოწმოთ გამოსახულების ზომები და მისი რეზოლუცია. ცხადია, 3156 x 2592 გამოსახულება 300 ppi- ს და 23.4 Mb ფაილის ზომა არ მუშაობს.

გამოსახულების ზომის დიალოგური ფანჯრის შიგნით, რეზოლუციის შემცირება 100 ppi- ზე . ამის გაკეთება პირველი იმიტომ, რომ გამოსახულების ზომებიც შეიცვლება. რეზოლუციის კომპლექტის მიხედვით, სიგანე შეცვალეთ 375 პიქსელზე. თუ სურათის ზომა მონაცემებს შეამოწმებთ, შეამჩნევთ გამოსახულებას 23.4 მბ-დან უფრო მობილური-მეგობრული 338k -მდე. დაწკაპეთ OK ცვლილების მისაღებად და დახურეთ გამოსახულების ზომა დიალოგურ ფანჯარაში.

02 05

როგორ გამოვიყენოთ "ექსპორტი როგორც ..." დიალოგი ყუთში Adobe Photoshop- ში

მას შემდეგ, რაც სურათი მზად არის ექსპორტისთვის, აირჩიეთ "ექსპორტი> ექსპორტი როგორც ..." ექსპორტის გახსნისას დიალოგური ფანჯარა.

ეს დიალოგის ყუთი ბოლო წლების განმავლობაში არის Photoshop- ში და იცვლება "Save For Web" დიალოგის ყუთი წლების განმავლობაში. თუ ჯერ კიდევ სჭირდება, შეგიძლიათ იპოვოთ ექსპორტის პოპში. ეს არის აშკარა მიზეზები, ახლა ცნობილია როგორც "ექსპორტის ვებ (Legacy)". თუ ეს თქვენი პირველი ვიზიტია ამ დიალოგურ ყუთში, აქ მოკლე ტურია:

• ზომა: ეს სვეტი გამოსახულია გამომავალი ზომის გამოსახულებაზე. ამ არეალის საინტერესო ასპექტი ის სურათის გაფართოებაა, მაგრამ გამოსახულება არ ჩანს, როგორც "საეჭვო" მოწყობილობაზე, რადგან მოწყობილობის ეკრანზე უზარმაზარი რაოდენობის პიქსელია.
• 1X: დააწექით ღილაკს და თქვენ მიიღებთ რამდენიმე ზომის რაოდენობას. 1x, 2x და 3x კატეგორიები ტრადიციულად ასოცირდება Hi Dpi მოწყობილობებით Apple- დან და რამდენიმე მათგანს ერთად მოამზადებენ სურათებს Android მოწყობილობებისთვის.
• სუფიქსი: ეს არჩევანი გაჩვენებთ თქვენს ზომას, მაგრამ ნაჩვენები იქნება @ 2x ან ზომა. ეს სუპიქსი დაემატება იმიჯს.
• + ნიშანი: დაწკაპეთ ეს დამატება სხვადასხვა ზომის გამომავალი. ამ შემთხვევაში, დააჭირეთ ორჯერ და აირჩია 2x და 3x პოპ ქვემოთ. ეს დაფარავს პრაქტიკულად ნებისმიერ iOS მოწყობილობას.
• ნაშთი შეიძლება: დააჭირეთ ამას და არჩევანი ამოღებულ იქნა ხაზოვანიდან.
• ფაილების პარამეტრები: აირჩიეთ ფორმატის - jpg, png, gif ან svg - საუკეთესო შესაფერისი image. თუ ფაილის ზომა შეშფოთებულია, შეგიძლიათ შეამციროთ ხარისხის პარამეტრები.
• გამოსახულების ზომა: თქვენ შეგიძლიათ შეცვალოთ გამოსახულების ფიზიკური ზომები.
• ტილო ზომა: თქვენ შეგიძლიათ შეცვალოთ გამოსახულების ტიპების ფიზიკური ზომები.
• მეტამონაცემები: თქვენ შეგიძლიათ დაამატოთ საავტორო და თქვენი საკონტაქტო ინფორმაცია სურათის მეტადატისთვის.

დასრულების შემდეგ დააჭირეთ ექსპორტს ყველა ღილაკს. თქვენ მოგეთხოვებათ, სადაც გსურთ სურათების განთავსება. კარგი ჩვევა განავითაროს ახალი ფოლდერის ღილაკზე დაჭერით და შექმნა ფოლდერი ექსპორტის სურათების ჩასატარებლად. როდესაც თქვენ დააჭირეთ ექსპორტი, თქვენ ნაჩვენები იქნება სურათების საქაღალდეში.

05 of 03

როგორ მოვამზადოთ სურათები მობილური მოწყობილობებისთვის Sketch 3- ში ბოჰემის კოდირებით

მაკედოტო-მხოლოდ განაცხადი ბოჰემის კოდიდან 3-ის ჩანაცვლება სწრაფად იმოგზაურა UX- ს და UI- ის დიზაინერებს შორის, ინტენსიური ფოკუსირებით ინტერნეტში და აპლიკაციის დიზაინზე. სინამდვილეში, Photoshop, ბევრი თვალსაზრისით, არის უცნაური პოზიცია, რომელსაც უნდა ითამაშოს "დაწევას" ერთად Sketch.

სურათისთვის სურათის მომზადებისთვის სკეიჩში შეარჩიეთ სურათი არტბორდზე და დააჭირეთ "ექსპორტიორების" ღილაკს "თვისებები პანელის" ბოლოში . ეს გახსნის ექსპორტის დიალოგურ ყუთს. დაწკაპეთ + ნიშანი 2x და 3x ვერსიების დაამატოთ და ასევე დაამატოთ suffixes. ხელმისაწვდომია ფორმატები PNG, JPG, TIF, PDF, EPS და SVG. ამ შემთხვევაში, აირჩიეთ JPG. დაწკაპეთ ექსპორტი ღილაკი და სამიზნე ან შექმნა ფოლდერი გამართავს სხვადასხვა სურათები ექსპორტირებული.

04 of 05

რატომ უნდა შექმნათ სამი (ან მეტი) ვერსიის გამოსახულება

ბევრი თვალსაზრისით, მობილური ბაზარია რეზოლუციების "ველური დასავლეთი" და ერთი ზომა ნამდვილად არ შეესაბამება ყველა. ამ მაგალითში Adobe Experience Design- ისგან გამოსახულია გამოსახულება 2 iPhone 6- ის ხელოვნების დაფაზე და Android მოწყობილობის მხატვარზე. გაითვალისწინეთ, თუ როგორ ჩანს 1x ვერსია მარცხნივ ნახევარი ზომა. ეს ზუსტად ისაა, თუ როგორ გამოჩნდება ეს სურათი iPhone 6- ზე მისი ბადურის ეკრანზე. 2x ვერსია იდეალურად შეესაბამება და Android- ს ვერსიით ეკრანზე გადის. შენი არჩევანი არის სურათის მასშტაბის ან ექსპორტის იმიჯის გარეთ Photoshop სხვადასხვა ზომის.

05 05

გამოცდა ადრეული, ტესტი ხშირად, ენდობა არაფერი, ენდობა არავინ და განსაკუთრებით საკუთარ თავს

რა უნდა გესმოდეთ, ეს პროცესი მხოლოდ დასაწყისია. ნახულობთ თქვენი მუშაობის შესახებ იმდენი მოწყობილობის შესახებ, რამდენადაც თქვენ შეგიძლიათ განიხილოთ სამუშაოს სასიცოცხლო ნაწილად. თქვენ ასევე უნდა იცოდეთ, რომ ეს არის პირველი ნაბიჯი გრაფიკული აქტივების შექმნის პროცესში, ან აპლიკაციის მობილური პროექტებისთვის.

გამოყენების პროტოტიპის გამოყენება ტკივილის ქულების გამოვლენის დიდი გზაა, მაგრამ იგივე აქტივები უნდა გამოვიყენოთ დეველოპერის მიერ გამოსაყენებლად. ხშირ შემთხვევაში, ფიზიკური განზომილება აქტივების, მათ შორის ხატები, იქნება ფიზიკურად დიდი და არა svg მაგრამ png ფორმატში. ერთი შეხედვით, ეს შეიძლება ცოტა ხნით ჩანდეს, მაგრამ გახსოვდეთ, რომ სურათების სკალირების ოქროს წესია.

ქვედა ხაზი არის მჭიდროდ იმუშაოს თქვენს დეველოპერთან და გამოიყენოთ პროტოტიპის პროგრამული უზრუნველყოფა, როგორც თქვენი დიზაინის განზოგადება. საბოლოო ჯამში, ეს იგივე აქტივები უნდა იყოს მზად საბოლოო პროდუქტისთვის და თქვენი დეველოპერი უკეთეს სახელს ჰყავს, ვიდრე შენს სჭირდება.