Ko'chma tasvirlar doimo ko'rinmaydi
Grafika mutaxassislariga nafaqat ularning bosma nashri, balki iPhone, iPad, Android qurilmalari va Android planshetlari kabi veb-va qurilmalarda ham borgan sari keng tarqalgan. Bizning ishimiz raqamli ekranlarga kengayib borar ekan, sirtda bu "yaxshi narsa" sifatida ko'rilishi mumkin. Salbiy tomon ekranlarning aniq soni va ekran ruxsati shubhali raqamidir. CMYK formatida 300 dpi ruxsatda TIFF tasvirining norma bo'lgan kunlarda sodir bo'lgan voqealarni hayron qoldiradigan teshiklarni eshitib turish odatiy hol emas. Oh yaxshi kunlar uchun!
O'sha kunlar tugadi. Keling, 200 dan 200 gacha rasmning bir qurilmada yaxshi ko'rinishi va yana uchinchi va uchinchi chorakdagi kattaligi uchdan biriga to'g'ri kelishi bilan kurashishimiz kerak. Bu, albatta, qurilma ishlab chiqaruvchilari tomonidan amalga oshirilayotgan "Ruxsat berish qurollari yarmi" ga tushadi, chunki ular ekranga ko'proq piksellarni raqiblaridan ko'ra ko'proq siqib olishga harakat qilishadi.
Bu bizni "Suksiyalarning ko'tarilishi" deb ataymiz. Bu qo'shimchalar - @ 2x, @ 3x - tasvirning nomiga tiqiladi. Asosan, masalan, to'g'ri tasvirni to'g'ri qurilmaga to'g'ri joyda joylashtirish. Keyin yana yaxshi bo'ladi.
Bizning ko'p ishimiz piktogramma bilan ishlashni o'z ichiga oladi va Flat Design harakatining oshishi bilan, bu narsalar Illustrator va Sketch kabi vektor chizilgan ilovalarida yaratilgan. Muammo shundaki, qurilmalar faqatgina .ai yoki .eps fayllarini ko'rsatolmaydi. Ular miqyosli Vektorli Grafikalarga aylantirilishi kerak va piktogramma yaratish uchun ishlatiladigan dasturga bog'liq ravishda SVG variantini ham bo'lishi mumkin emas.
Keyin yana yaxshi bo'ladi.
Sizning tasvirlaringiz va piktogrammalar qurilmalar oldida to'planish nuqtasi bo'lib, ular ham o'ziga xos xususiyatlarga ega bo'lgan dasturiy ta'minot - Prototyping dasturlarining yangi klassi mavjud.
Ushbu o'quvchi fotoshop va sketch grafikalar va sizning fikringiz va nihoyat tarqatish o'rtasidagi og'riq nuqtalarining bir nechtasini namoyish qilish uchun Adobe Tecrübesi Dizaynı'ndan foydalanadi. Qani boshladik.
01dan 05gacha
Adobe Photoshop-da mobil qurilmalar uchun rasmlarni tayyorlash
Ushbu jarayondagi birinchi qadam maqsadli qurilmani yoki qurilmalarni bilishdir. Bu holatda siz iPhone 6-ni 667 piksel balandlikda 375 piksel kenglikda ekranga ega bo'lasiz. Dizayn tasvirni ekranning kengligi bo'lishini talab qiladi.
Shveytsariyaning Bern shahrida joylashgan Bernga Minster sobori tarkibida ishlatiladigan tasvir tasvirlangan. Rasm fotoshopda ochilgach vahiyning o'lchamlarini va uning o'lchamlarini tekshirish uchun Image> Image Size ni tanlang . Shubhasiz, 300 ppi o'lchamdagi va 23,4 Mb fayl o'lchamiga ega bo'lgan 3156 x 2592 tasvir oddiygina ishlamaydi.
Rasm o'lchami bilan dialog oynasida Ruxsatni 100 ppigacha kamaytiring . Rasm o'lchamlari ham o'zgaradi, chunki bu birinchi bajaring. Ruxsat sozlamalari yordamida kengligi 375 pikselgacha o'zgartiring. Tasvir o'lchami ma'lumotlarini tekshirsangiz, tasvir 23,4 Mb dan 338k gacha mobil aloqa darajasiga tushganini ko'rasiz. O'zgartirishni qabul qilish va rasm o'lchami dialog oynasini yopish uchun OK ni bosing .
02 of 05
Adobe Photoshop-da "Export As ..." dialog oynasidan qanday foydalanish kerak
Rasm eksport qilish uchun tayyor bo'lgandan so'ng, " Export As" muloqot qutisini ochish uchun "Export ... Export As ..." -ni tanlang .
Ushbu suhbat qutisi fotoshopga yaqinda qo'shilgan va ko'p yillar davomida foydalanadigan "Veb uchun saqlash" dialog oynasining o'rnini bosadi. Agar siz hali ham bunga muhtoj bo'lsangiz, uni "Eksport" rejimida topishingiz mumkin. Bu aniq sabablarga ko'ra hozir "Export For Web (Legacy)" deb nomlanadi. Agar bu sizning birinchi tashrifingiz bo'lsa, bu qisqa tashrif:
- Hajmi: Ushbu ustun tasvirning chiqish hajmini belgilaydi. Ushbu sohaning qiziqarli jihati tasvirni kengaytiradi, lekin qurilma ekrandagi ko'p sonli piksellar tufayli tasvir qurilmada "loyqa" ko'rinmas.
- 1X: ushlab turing va siz bir qator kattalik bilan taqdim etiladi. 1x, 2x va 3x turkumlari an'anaviy ravishda Apple'dan Xristian Dpi asboblari bilan bog'langan va ular bir-birlari bilan birga Android qurilmalari uchun rasmlarni tayyorlaydilar.
- Suffix: Ushbu tanlov sizning hajmingizni ko'rsatadi, lekin u @ 2x yoki kattaligi tanlanadi. Bu qo'shimcha rasm nomiga qo'shiladi.
- + Belgisi: Chiqish uchun turli o'lchamlarni kiritish uchun buni bosing. Bunday holda, ikki marta bosing va pop-updan 2x va 3x ni tanladingiz. Bu deyarli barcha iOS qurilmalarini qamrab oladi.
- Axlat qutisi: Bu tugmani bosing va tanlov ketma-ketlikdan o'chiriladi.
- Fayl parametrlari: formatini tanlang - jpg, png, gif yoki svg - tasvirga eng mos keladi. Fayl hajmi tashvish bo'lsa, siz Sifat parametrlarini ham qisqartirishingiz mumkin.
- Rasm hajmi: tasvirning jismoniy o'lchamlarini o'zgartirishingiz mumkin.
- Tuval o'lchami: Tasvir tuvalining jismoniy o'lchamlarini o'zgartirishingiz mumkin.
- Metama'lumotlar: Siz mualliflik huquqi va kontakt ma'lumotlarini tasvirning metama'lumotlariga qo'shishingiz mumkin.
Ish tugagach, Hammasini tashlash tugmasini bosing. Rasmlarni qaerga joylashtirishni so'raladi. Rivojlanadigan yaxshi odat - yangi papka tugmasini bosish va eksport qilinadigan rasmlarni saqlash uchun papka yaratish. Siz "Export" tugmasini bosganingizda, siz papkadagi rasmlarni ko'rsatasiz.
03 dan 05 gacha
Sketch 3da Bohem kodlashidan mobil qurilmalar uchun tasvirlarni tayyorlash
Sketch 3, Macintosh-ning faqat Bohemian kodlash dasturi, UX va UI dizaynerlari orasida tezda veb-va ilovalarni loyihalashga qaratilgan e'tiborga sazovor. Aslida fotoshop, ko'p jihatdan, Sketch bilan "ushlab turish" ga ega bo'lishning g'alati holatidadir.
Sketchda mobil telefon uchun tasvirni tayyorlash uchun ish stoli rasmini tanlang va Properties panelining pastki qismidagi Exportable tugmachasini bosing . Bu esa, eksport dialogini ochadi. 2x va 3x versiyasini qo'shish va qo'shimcha qo'shimchalarni qo'shish uchun + belgisini bosing. Mavjud formatlar: PNG, JPG, TIF, PDF, EPS va SVG. Bunday holda, JPG-ni tanlang. Eksport tugmasini bosing va maqsadga o'ting yoki eksport qilinadigan turli xil rasmlarni saqlash uchun papka yarating.
04/05
Nima uchun siz rasmning uch (yoki undan ko'p) versiyasini yaratishingiz kerak
Ko'pgina jihatlarga ko'ra, mobil bozorlar "Wild West" ning qarorlaridir va bir o'lcham hammasiga mos kelmaydi. Yuqoridagi misolda Adobe Apps Design dan tasvir 2 ta iPhone 6-satrda va Android-qurilmaning ish stoli ustida joylashgan. Chapdagi 1x versiyasining yarmi kattaligi qanday ko'rinishini ko'rib chiqing. Tasvirning retina ekrani bilan iPhone 6 da paydo bo'lishi aniq. 2x versiyasi juda mos keladi va Android versiyasi ekranning o'chiriladi. Sizning tanlovingiz tasvirni kattalashtirish yoki fotosuratni boshqa o'lchamda eksport qilishdir.
05 05
Erta sinovdan o'ting, tez-tez sinab ko'ring, hech narsa ishonmang, hech kimga va ayniqsa o'zingizga ishonavermang
Qanday tushunishingiz kerak, bu jarayonning boshlanishi. Sizning ishingizni juda ko'p qurilmada ko'rishingiz mumkin , chunki siz biznes rivojining muhim bir qismi deb hisoblashingiz mumkin . Bundan tashqari, bu dastur yoki mobil veb-loyihalari uchun grafik aktivlarni yaratish jarayonidagi birinchi qadamdir.
Prototyping ilovalarini ishlatish og'riqlarni ochib berishning ajoyib usuli hisoblanadi, lekin ayni bir xil aktivlarni ishlab chiquvchi tomonidan ishlatilishi kerak bo'ladi. Aksariyat hollarda aktivlarning jismoniy o'lchamlari, shu jumladan ifodalar jismoniy jihatdan juda katta bo'ladi va SVG formatida emas, balki png shaklida bo'ladi. Bir qarashda, bu yuqoridan biroz ko'rinishi mumkin, ammo tasvirlarni o'lchashning oltin qoidasini yodda tuting: bu kattaligidan kattaroqroq bo'lish yaxshiroqdir.
Pastki satr sizning ishlab chiquvchi bilan yaqinroq ishlashi va dizayn niyatini ko'rsatish uchun prototip dasturiy ta'minotidan foydalanish. Oxir-oqibat, o'sha narsalar oxirgi mahsulotga tayyor bo'lishi kerak va ishlab chiquvchi sizga kerak bo'lgan narsalar haqida yaxshiroq ma'lumotga egadir.