Mobil görünüşü həmişə göründüyü kimi deyil
Qrafik işəgötürənlər üçün işlərini təkcə çapda, həm də iPhone, iPad, Android cihazları və Android tabletləri kimi veb və qurğularda göstərmək üçün getdikcə daha çox yayılır. Səthdə bu, bizim işimiz rəqəmsal ekranlara genişləndiyində göründüyü kimi "yaxşı bir şey" kimi qəbul edilə bilər. Həddindən artıq ekran ekranların sayını və ekran qərarlarının çaşqın sayını təşkil edir. CMYK formatında 300 dpi çözünürlükte TIFF görünüşü normal olduğu günlərdə baş verən hər şeyə maraqlanan təcrübəli prosessorları eşitmək qeyri-adi deyil. Yaxşı köhnə günlər üçün!
O günlər bitdi. İndi bir 200 ilə 200 şəklin bir cihazda gözəl görünə biləcəyini və hələ başqa bir və üçdə dörddə bir ölçüsündə dörddəbir ölçüsü göründüyünü iddia etməliyik. Bütün bunlar, həqiqətən, cihazın istehsalçıları tərəfindən çəkilən "Çözünürlük Silahı Yarışı" na düşür, çünki onlar rəqiblərinə nisbətdə daha çox piksel yığmağa çalışırlar.
Bu, bizi "Suffixes'in Yüksəlişi" deyəcəyik. Sonunlar bunlardır: @ 2x, @ 3x - bir şəkil adına tökülür. Onlar əslində, məsələn, hüququ yerə düzgün surətdə düzgün surətdə yerləşdirdilər. Sonra daha da yaxşılaşır.
Bir çox işimiz ikonlarla işləmək və Flat dizayn hərəkətinin yüksəlməsini nəzərdə tutur, bunlar Illustrator və Sketch kimi vektor rəsm proqramlarında yaradılır. Problem cihazlar sadəcə .ai və ya .eps faylları göstərə bilməyəcəkdir. Ölçeklendirilebilen Vector Graphics'e dönüştürülmeli ve simgeleri yaratmaq üçün kullanılan uygulamaya bağlı olaraq bir SVG seçeneği bile olmayabilir.
Sonra daha da yaxşılaşır.
Prototip tətbiqi yeni bir sinif var - sizin şəkillərinizə və simgelerinizə qurğulara baxılmadan əvvəl montaj nöqtəsi halına gələn və onların xüsusiyyətlərinə də sahibdir.
Bu təlimçi, Photoshop və Sketch arasında qrafiklər və fikir və nəhayət yerləşdirmə arasında bir neçə ağrı nöqtəsini nümayiş etdirmək üçün Adobe təcrübəsi Dizaynı istifadə edir. Gəlin başlayaq.
01 ilə 05
Adobe Photoshop-da Mobil Cihazlar üçün Şəkillər hazırlamaq
Bu prosesin ilk addımı hədəf cihazınızı və ya cihazlarınızı bilməkdir. Bu halda, 667 piksel yüksəklikdə 375 piksel genişlikdə ekrana malik olan iPhone 6-u hədəfə alacaqsınız. Dizayn ekranın eni olmasını tələb edir.
İstifadə olunacaq görüntü, İsveçin Bern şəhərində Bern Minster Katedrali daxilində çəkilmişdir. Şəkil Photoshop'ta açıldıqda, şəkilin ölçüsünü və onun həllini yoxlamaq üçün Image> Image Size seçin . Aydındır ki, 300 ppi və 23.4 Mb fayl ölçüsü ilə 3156 x 2592 olan bir şəkil sadəcə işləməyəcək.
Image Size daxilində, Çözünürlüğü 100 ppi azaltın . Şəkil ölçüsünün də dəyişəcəyi, çünki bu ilk olun. Çözünürlük dəsti ilə genişliyi 375 Piksel olaraq dəyişdirin. Image Ölçü məlumatlarını yoxlayırsaniz, görüntünün 23.4 Mb-dan daha mobil telefonla 338k-a çatdığını görəcəksiniz. Değişikliği kabul etmek ve Resim Boyutu informasiya qutusunu bağlamaq üçün Tamam'ı basın .
02/05
Adobe Photoshop-da "Export As ..." Dialoq qutusunu necə istifadə edin
Görünüş ixrac üçün hazır olduqda, "İxrac As> As ..." seçin və "İxrac As" informasiya qutusunu açın.
Bu Dialoq Box Photoshop-a yaxın bir əlavədir və illərdir istifadə etdikləri "Web üçün Saxla" dialoqunun yerini alır. Hələ də ehtiyacınız varsa, onu Export pop-da aşağıda tapa bilərsiniz. "Aşkar Web (Legacy)" kimi tanınan açıq səbəblərdəndir. Bu, bu informasiya qutunuza ilk səfərinizdirsə, burada qısa bir tur var:
- Ölçü: Bu sütun, görüntünün çıxış ölçüsünü təyin edir. Bu sahənin maraqlı cəhəti görüntü genişləndirəcəkdir, lakin cihazın ekranında çox sayda piksel sayəsində cihaz "bulanık" görünməyəcək.
- 1X: Basıb saxlayın və siz bir sıra ölçülərlə təqdim olunacaqsınız. 1x, 2x və 3x kateqoriyalar ənənəvi olaraq Apple-dan Hi Dpi cihazları ilə əlaqələndirilir və bir çoxları ilə birlikdə Android cihazlar üçün şəkillər hazırlayacaqlar.
- Suffix: Bu seçim sizin ölçüsünü göstərəcək, ancaq @ 2x və ya ölçüsü seçilir. Bu əlavə et şəkil adına əlavə olunacaq.
- + Işarəsi: Çıxış üçün müxtəlif ölçüləri əlavə etmək üçün bunu basın. Bu vəziyyətdə, iki dəfə basın və açılırdan 2x və 3x seçdi. Bu demək olar ki, hər hansı bir iOS cihazını əhatə edəcəkdir.
- Çöp Kutusu: Bunu basın və seçim sıraya çıxarılır.
- Fayl Ayarları: formatı seçin - jpg, png, gif və svg - şəkilə ən uyğun. Faylın ölçüsü narahatlıq yaratsa, keyfiyyət parametrlərini də azalda bilərsiniz.
- Image Size: görüntünün fiziki ölçülərini dəyişə bilərsiniz.
- Tuval Ölçüləri: Görünüş tuvalinin fiziki ölçülərini dəyişə bilərsiniz.
- Metadata: Müəlliflik hüququnu və əlaqə məlumatınızı təsvir metadata əlavə edə bilərsiniz.
Bitirdikdən sonra, Bütün Dışa Aktar düyməsini basın. Şəkilləri yerləşdirmək istədiyiniz yerdə soruşulacaqsınız. İnkişaf etmək üçün yaxşı bir vərdiş Yeni Qovluq düyməsini basmaq və ixrac edilən şəkilləri saxlayacaq bir qovluq yaratmaqdır. Dışa Aktar'ı tıkladığınızda, qovluqdakı şəkillər göstərilir.
03-də 05
Sketch 3-də Bohem Coding-dən Mobil Cihazlar üçün Şəkillər hazırlamaq
Sketch 3, Bohemian Coding-dən Macintosh tətbiqi olan proqram, veb və tətbiq dizaynına sıx diqqət göstərməklə sürətlə UX və UI dizaynerləri arasında üstünlük qazanır. Əslində Photoshop bir çox cəhətdən Sketch ilə "tutmaq" oynayırıq ki, qəribə vəziyyətdədir.
Sketch'ta mobil üçün bir şəkil hazırlamaq üçün, işarənin görünüşünü seçin və Properties panelinin altındakı Exportable düyməsini basın . Bu, İxracat informasiya qutusunu açacaq. 2x və 3x versiyasını əlavə etmək üçün + işaretini basın və həmçinin əlavələri əlavə edin. Mövcud formatlar PNG, JPG, TIF, PDF, EPS və SVG. Bu halda, JPG seçin. İxrac düyməsini basın və hədəfləyin və ya ixrac edilən müxtəlif şəkilləri tutmaq üçün bir qovluq yaradın.
04 04
Nə üçün üç (və ya daha çox) şəkilləri yaratmalısınız?
Bir çox cəhətdən, Mobil bazarda qətnamələrin "Wild West" və bir ölçüsü mütləq bütün uyğun deyil. Adobe təcrübəsi Dizaynından yuxarıda göstərilən nümunədə, şəkil 2 iPhone 6 işəgötürənlə və bir Android cihaz işarəsi üzərində yerləşdirilir. Solda 1x versiyasının yarım ölçüsü necə göründüyünə diqqət edin. Bu, retina ekranı ilə iPhone 6-da görünə bilər. 2x versiyası mükəmməl şəkildə uyğun gəlir və Android versiyası ekranın üzərindən qaçır. Seçdiyiniz şəkili ölçeklendirmek və ya Photoshop'tan fərqli ölçüdə şəkil çıxarmaq.
05 05
Erkən test, tez-tez test, heç bir şeyə güvənməyin, heç kimə və xüsusilə özünüzə güvənməyin
Anladığınız şey bu prosesin başlanğıcıdır. İşinizin vacib bir parçası olaraq qəbul edilmək üçün işinizi bir çox qurğu üzərində baxın. Bundan əlavə, bu bir app və ya mobil web layihələri üçün qrafik aktivlərin yaradılması prosesində ilk addımdır.
Prototip tətbiqi istifadə ağrı nöqtələrinin açılması üçün böyük bir yoldur, lakin eyni aktivləri geliştirici tərəfindən istifadə edilməli olacaq. Bir çox hallarda, aktivlərin fiziki ölçüləri, ikonlar da daxil olmaqla, fiziki cəhətdən böyük və svg deyil, png formatında olacaqdır. İlk baxışdan bu yuxarıdan bir qədər görünə bilər, ancaq görünüşlərin ölçülməsi üçün qızıl qaydasını xatırlayırıq: ölçüsündən daha aşağı miqyaslıdır.
Aşağı xətt sizin geliştiricinizlə yaxından işləmək və dizayn niyyətinizi göstərmək yolu olaraq prototip proqramını istifadə etməkdir. Nəhayət, eyni məhsullar son məhsula hazır olmağı bacaracaq və sizin geliştiriciniz sizin ehtiyaclarınıza görə daha yaxşı bir işə malikdir.