Mobilajām attēliem ne vienmēr ir tas, kas, šķiet, ir
Grafikas profesionāļiem kļūst arvien biežāk sastopams darbs drukā, bet arī tīmeklī un ierīcēs, piemēram, iPhone, iPad, Android ierīcēs un Android tabletēs. Uz zemes virsmas to var uzskatīt par "labu", jo plašsaziņas līdzekļi, kuru darbība parādās, paplašinās līdz digitālajiem ekrāniem. Negatīvie ir lielais ekrānu skaits un apjukuma ekrāna izšķirtspēju skaits. Nav nekas neparasts dzirdēt pieredzējušos profesionāļus, jo viņiem rodas jautājums par to, kas notika ar dienām, kad CMYK formātā bija 300 dpi izšķirtspējas TIFF attēls . Ak, vecas labas dienas!
Šīs dienas ir beidzies. Tagad mums ir jācīnās ar faktu, ka no 200 līdz 200 attēlam vienā ierīcē var parādīties naudas sods, bet vēl vienā ceturksnī izmērs ir ceturksnī un trīs ceturtdaļās. Tas viss tiešām nonāk līdz "Izšķirtspējas ieroču sacensībai", kuru vada ierīču ražotāji, jo viņi mēģina ievilkt vairāk pikseļu ekrānā nekā viņu konkurenti.
Tas mūs noved pie tāda, ko mēs saucam par "The Suffixes Rise". Sfiksācijas ir tās lietas - @ 2x, @ 3x - tiek apzīmētas ar attēla nosaukumu. Piemēram, tie būtībā, pareizajā attēlā ievieto pareizajā vietā pareizajā ierīcē. Tad tas kļūst vēl labāk.
Mūsu darbs lielā mērā ir saistīts ar darbu ar ikonām, un, palielinoties Flat dizaina kustībai, šīs lietas tiek veidotas šādos vektoru zīmēšanas lietojumos, piemēram, Illustrator un Sketch. Problēma ir tāda, ka ierīces vienkārši nevar pārveidot failus .ai vai .eps. Tie ir jāpārveido par Scalable Vector Graphics, un, atkarībā no lietojuma, ko izmanto ikonu izveidošanai, iespējams, nav SVG opcijas.
Tad tas kļūst vēl labāk.
Ir jauna programmatūras klase - prototipēšanas lietojumprogrammas - tās kļūst par montāžas vietu, pirms jūsu attēli un ikonas tiek pārvietotas uz ierīcēm, un tām ir arī savas īpatnības.
Šī apmācība pārvietojas starp Photoshop un Sketch grafikām un izmanto Adobe Experience Design, lai parādītu dažas sāpju vietas starp jūsu ideju un iespējamo ieviešanu. Sāksim.
01 no 05
Kā sagatavot attēlus mobilajām ierīcēm Adobe Photoshop
Pirmais solis šajā procesā ir jūsu mērķa ierīces vai ierīču zināšana. Šajā gadījumā jūs mērķēsit uz iPhone 6, kura ekrāna platība ir 375 pikseļi plata un augstāka par 667 pikseļiem. Dizains prasa, lai attēls būtu ekrāna platums.
Lietojamais attēls tika nofotēts Bernes Minsteres katedrāle Bernā, Šveicē. Kad attēls atveras Photoshop, izvēlieties Image> Image Size, lai pārbaudītu attēla izmērus un to izšķirtspēju. Acīmredzot, attēls, kas ir 3156 x 2592 ar izšķirtspēju 300 ppi un faila izmērs 23,4 Mb vienkārši nedarbosies.
Dialoglodziņā Attēla lielums iekšā samazināt izšķirtspēju līdz 100 ppi . Vispirms veiciet to, jo mainīsies arī attēla izmēri. Izveidojot izšķirtspēju, mainiet platumu līdz 375 pikseļiem. Ja pārbaudīsit attēla lieluma datus, jūs ievērosit, ka attēls ir samazinājies no 23,4 Mb līdz mobilam draudzīgam 338 k. Noklikšķiniet uz Labi, lai apstiprinātu izmaiņas un aizveriet dialoglodziņu Attēla lielums.
02 no 05
Kā lietot Adobe Photoshop dialoga lodziņu "Eksportēt kā ..."
Kad attēls ir gatavs eksportēšanai, atlasiet "Eksportēt> Eksportēt kā ...", lai atvērtu dialoglodziņu Eksportēt kā.
Šis dialoglodziņš ir nesenais Photoshop papildinājums un aizstāj dialoglodziņu "Saglabāt Web", ko tās izmantoja gadiem ilgi. Ja jums tas joprojām ir vajadzīgs, varat to atrast Eksportēšanas lodziņā. Skaidru iemeslu dēļ tas tagad ir pazīstams kā "Export for Web (Legacy)". Ja šī ir jūsu pirmā vizīte šajā dialoglodziņā, šeit ir īss ceļojums:
- Izmērs: šajā slejā tiek iestatīts attēla izvades lielums. Interesants aspekts šajā jomā ir tā, ka attēls tiks palielināts, taču attēls ierīcē nebūs redzams kā "izplūdis", jo ierīcei ir liels pikseļu skaits.
- 1X: Noklikšķiniet uz turētāja, un jums tiks piedāvāti vairāki izmēri. 1x, 2x un 3x kategorijas parasti ir saistītas ar Hi Dpi ierīcēm no Apple, un kopā ar dažiem citiem tā sagatavos attēlus Android ierīcēm.
- Suffix: šī izvēle parādīs jūsu izmēru, bet tas tiks parādīts kā @ 2x vai lielums ir izvēlēts. Šis piedēklis tiks pievienots attēla nosaukumam.
- + Zīme: noklikšķiniet uz šī, lai pievienotu dažādus izmērus. Šajā gadījumā uzklikšķiniet uz tā divreiz un izvēlieties 2x un 3x no pop up. Tas aptvers gandrīz jebkuru iOS ierīci.
- Trash Can: Noklikšķiniet uz šī un izvēle tiek noņemta no lineup.
- Faila iestatījumi: izvēlieties formātu - jpg, png, gif vai svg - vislabāk piemērots attēlam. Ja faila lielums ir bažas, varat arī samazināt kvalitātes iestatījumus.
- Attēla izmērs: varat mainīt attēla fiziskos izmērus.
- Gleznas izmērs: varat mainīt attēla audekla fiziskos izmērus.
- Metadati: varat pievienot autortiesības un kontaktinformāciju attēla metadatos.
Kad esat pabeidzis, noklikšķiniet uz pogas Eksportēt visu. Jums tiks vaicāts, kur vēlaties ievietot attēlus. Labs ieradums attīstīties ir noklikšķiniet uz pogas Jauna mape un izveidojiet mapi, kurā vēlaties eksportēt attēlus. Noklikšķinot uz Eksportēt, tiks parādīti mapē attēli.
03 no 05
Kā sagatavot attēlus mobilajām ierīcēm 3. shēmā no Bohēmijas kodēšanas
Skice 3, kas ir tikai Macintosh programmatūra no Bohēmijas kodēšanas, strauji pievērš uzmanību UX un UI dizaineriem, jo tā koncentrējas uz tīmekļa un lietotņu dizainu. Faktiski Photoshop daudzos veidos ir nepāra situācijā, kad spēlēt "panākt" ar Sketch.
Lai attēlā sagatavotu attēlu mobilajam attēlam, izvēlnē esošajā attēlā izvēlieties attēlu un paneļa Properties apakšdaļā noklikšķiniet uz pogas Make Exportable (padarīt eksportējamu) . Tas atvērs eksportēšanas dialoglodziņu. Noklikšķiniet uz + zīmes, lai pievienotu 2x un 3x versijas, kā arī pievienot sufiksus. Pieejamie formāti ir PNG, JPG, TIF, PDF, EPS un SVG. Šajā gadījumā izvēlieties JPG. Noklikšķiniet uz pogas Eksportēt un mērķēt vai izveidojiet mapi, kurā tiek glabāti dažādi eksportētie attēli.
04 no 05
Kāpēc jums ir jāizveido trīs (vai vairāk) attēla versijas
Daudzos aspektos Mobilais tirgus ir rezolūciju "Wild West", un viens izmērs noteikti neatbilst visiem. Iepriekš minētajā Adobe Experience Design dizaina piemērā attēls tiek novietots uz 2 iPhone 6 mobīldaļu un Android ierīces māklodziņu. Ievērojiet, ka 1x versija kreisajā pusē šķiet puse izmēra. Tas ir tieši tas, kā attēls parādīsies iPhone 6 ar tīklenes ekrānu. 2x versija ir lieliski piemērota, un Android versija darbojas ekrānā. Jūsu izvēle ir vai nu mērogot attēlu, vai arī eksportēt attēlu no Photoshop citā izmērā.
05 no 05
Pārbaudi agri, bieži pārbaudiet, neuzticieties, neuzticieties nevienam un sevišķi sevi
Kas jums ir jāsaprot, tas ir tikai procesa sākums. Jūsu darba skatīšana pēc iespējas vairāk ierīcēm ir jāuzskata par svarīgu darba plūsmas daļu. Jums arī jāzina, ka tas ir tikai pirmais solis grafisko līdzekļu izveidei lietotnes vai mobilo tīmekļa projektu ietvaros.
Izmantojot prototipēšanas lietojumprogrammas, tas ir lielisks veids, kā atklāt sāpju vietas, bet šiem pašiem aktīviem būs jāizdod izstrādātājam. Daudzos gadījumos aktīvu fiziskie izmēri, ieskaitot ikonas, būs fiziski milzīgi, nevis svg, bet png formātā. No pirmā acu uzmetiena tas var šķist nedaudz virs galda, bet atcerieties zelta likumu par attēlu mērogošanu: labāk ir samazināt, nevis palielināt.
Apakšējā līnija ir cieši sadarboties ar jūsu izstrādātāju un izmantot prototipēšanas programmatūru, lai parādītu jūsu dizaina nodomu. Galu galā tomēr šie paši aktīvi būs gatavi gala produktam, un jūsu izstrādātājam būs labāk rīkoties ar to, kas viņam vai viņai ir vajadzīgs, nekā jūs.