Mobil cihazlar için görüntüleme her zaman göründüğü gibi değil
Grafik uzmanlarının sadece çalışmalarının baskıda değil, web'de ve iPhone'larda, iPad'lerde, Android cihazlarda ve Android tabletlerde de görülmesi giderek yaygınlaşıyor. Yüzeyde bu, işimizin dijital ekranlara doğru genişlediğine dair medyada “iyi bir şey” olarak görülebilir. Dezavantajı, çok sayıda ekran ve karmaşık ekran çözünürlüğü sayısıdır. CMYK formatında 300 dpi çözünürlükte bir TIFF görüntüsünün norm olduğu günlerde ne olup bittiğini merak eden deneyimli profesyoneller duymak nadir değildir. Ah eski güzel günler için!
O günler bitti. Şimdi, 200 x 200 boyutundaki bir görüntünün bir cihazda iyi görünebileceği gerçeğine ve henüz bir başka çeyrekte bir başka üç çeyrek boyuya çıkabileceğimiz gerçeğiyle mücadele etmeliyiz. Cihaz üreticilerinin, rakiplerine göre bir ekrana daha fazla piksel ayırmaya çalıştıkları "Gerçekleştirilen Silahlar Yarışı" ne düşüyor.
Bu bizi “Son Eklerin Yükselişi” olarak adlandırdığımız şeye getiriyor. Sonekler, bir resmin adına yapıştırılan şeylerdir - 2x, @ 3x. Aslında, örneğin, doğru görüntüyü doğru cihaza doğru yere koydular. Sonra daha da iyi olur.
Çalışmamızın birçoğu ikonlarla çalışmayı ve Düz tasarım hareketinin yükselişini içeriyorsa, bu şeyler Illustrator ve Sketch gibi vektör çizim uygulamalarında yaratılıyor. Sorun, cihazların sadece .ai veya .eps dosyalarını oluşturamamasıdır. Ölçeklendirilebilir Vektör Grafiğine dönüştürülmeli ve simgelerin oluşturulmasında kullanılan uygulamaya bağlı olarak, SVG seçeneği bile olmayabilir.
Sonra daha da iyi olur.
Yeni bir yazılım-Prototipleme uygulamaları sınıfı var - resimleriniz ve simgeleriniz cihazlara takılmadan önce montaj noktası haline geliyor ve onların da kendine özgü özellikleri var.
Bu eğitici, grafikler için Photoshop ve Sketch arasında hareket eder ve fikrinizle nihai dağıtım arasındaki birkaç acı noktasını göstermek için Adobe Experience Design'ı kullanır. Başlayalım.
05/05
Adobe Photoshop'ta Mobil Cihazlar İçin Görüntüler Nasıl Hazırlanır?
Bu süreçteki ilk adım, hedef cihazınızı veya cihazlarınızı bilmek. Bu durumda, 375 piksel genişliğinde ve 667 piksel genişliğinde bir ekran alanına sahip olan iPhone 6'yı hedefleyeceksiniz. Tasarım, görüntünün ekranın genişliği olmasını gerektiriyor.
Kullanılacak resim Bern, İsviçre'deki Bern Minster Katedrali'nde çekildi. Görüntü Photoshop'ta açıldığında, resmin boyutlarını ve çözünürlüğünü kontrol etmek için Görüntü> Görüntü Boyutu'nu seçin . Açıkçası, 300 ppi Çözünürlük ve 23.4 Mb bir dosya boyutu ile 3156 x 2592 olan bir görüntü çalışmaz.
Görüntü Boyutu iletişim kutusunun içinde Çözünürlüğü 100 ppi'ye indirin . Bunu ilk yapın çünkü görüntü boyutları da değişecektir. Çözünürlük ayarıyla, genişliği 375 Piksel olarak değiştirin. Görüntü Boyutu verilerini kontrol ederseniz, görüntünün 23,4 Mb'den daha fazla mobil uyumlu 338k'a küçüldüğünü göreceksiniz. Değişikliği kabul etmek ve Görüntü Boyutu iletişim kutusunu kapatmak için Tamam'a tıklayın .
02/05
Adobe Photoshop'taki "Dışa Aktar…" Diyaloğu Nasıl Kullanılır
Görüntü dışa aktarmaya hazır olduğunda Dışa Aktar iletişim kutusunu açmak için "Dışa Aktar> Dışa Aktar…" ı seçin .
Bu Diyalog Kutusu, Photoshop'a yeni eklenen bir eklentidir ve yıllardır kullandıkları "Web İçin Kaydet" iletişim kutusunun yerini alır. Eğer hala ihtiyacınız varsa, İhracat açılır listesinde bulabilirsiniz. Şu anda "Web için İhracat (Eski)" olarak bilinen açık nedenlerden ötürü. Bu iletişim kutusuna ilk ziyaretiniz buysa, kısa bir tur:
- Boyut: Bu sütun resmin çıktı boyutunu ayarlar. Bu alanın ilginç yönü, görüntüyü büyütecek, ancak cihazın ekranındaki çok sayıda pikselden dolayı görüntü, cihazda “bulanık” olarak görünmeyecek.
- 1X: Bunu basılı tutun ve bir dizi boyutta sunulacaksınız. 1x, 2x ve 3x kategorileri geleneksel olarak Apple'ın Hi Dpi cihazlarıyla ilişkilidir ve birkaçı ile birlikte Android cihazlar için görüntüler hazırlar.
- Sonek: Bu seçim boyutunuzu gösterir ancak 2x olarak gösterilecek veya boyut seçilecektir. Bu son ek görüntü adına eklenecektir.
- + Işareti: Çıktı için çeşitli boyutlar eklemek için bunu tıklayın. Bu durumda, iki kez tıklayın ve açılır menüden 2x ve 3x'i seçin. Bu pratik olarak herhangi bir iOS cihazını kapsayacaktır.
- Çöp Kutusu: Bunu tıklayın ve seçim diziden kaldırılır.
- Dosya Ayarları: Biçimi seç - jpg, png, gif veya svg - görüntüye en uygun. Dosya boyutu bir sorun ise, Kalite ayarlarını da azaltabilirsiniz.
- Görüntü Boyutu: Görüntünün fiziksel boyutlarını değiştirebilirsiniz.
- Kanvas Boyutu: Resim kanvasının fiziksel boyutlarını değiştirebilirsiniz.
- Meta veriler: Resmin meta verilerine telif hakkı ve iletişim bilgilerinizi ekleyebilirsiniz.
Tamamlandığında, Tümünü Dışa Aktar düğmesini tıklayın. Resimleri yerleştirmek istediğiniz yere sorulacaksınız. Geliştirmek için iyi bir alışkanlık, Yeni Klasör düğmesine tıklamak ve dışa aktarılan görüntüleri tutmak için bir klasör oluşturmaktır. Dışa Aktar'a tıkladığınızda, klasördeki resimler gösterilir.
03/05
Kroki 3 Mobil Cihazlar için Görüntüler Hazırlama Nasıl Bohemian Kodlama
Bohemian Kodlama'dan Macintosh'a özgü bir uygulama olan Sketch 3, web ve uygulama tasarımına yoğun odaklanması nedeniyle UX ve UI tasarımcıları arasında hızla öne çıkıyor. Aslında Photoshop birçok yönden Sketch ile “yetişmek” zorunda kalmanın garip pozisyonunda.
Sketch'de mobil için bir görüntü hazırlamak için, çalışma yüzeyindeki görüntüyü seçin ve Özellikler panelinin altındaki Exportable Yap düğmesine tıklayın . Bu, Dışa Aktar iletişim kutusunu açacaktır. 2x ve 3x sürümlerini eklemek için + işaretini tıklayın ve sonekleri de ekleyin. Mevcut formatlar PNG, JPG, TIF, PDF, EPS ve SVG'dir. Bu durumda, JPG'yi seçin. Dışa Aktar düğmesini tıklayın ve dışa aktarılan çeşitli görüntüleri tutmak için bir klasör oluşturun veya oluşturun.
04/05
Görüntünün Üç (veya Daha Fazla) Sürümünü Oluşturmaya Neden Gerekiyor?
Birçok açıdan, Mobil pazar kararların "Vahşi Batı'sı" ve bir boyut kesinlikle herkese uymuyor. Adobe Experience Design'dan alınan yukarıdaki örnekte, görüntü 2 iPhone 6 çalışma yüzeyine ve Android cihaz çalışma yüzeyine yerleştirilmiştir. Soldaki 1x versiyonunun yarı boyut olarak nasıl göründüğüne dikkat edin. Bu tam olarak görüntünün retina ekranı ile bir iPhone 6'da nasıl görüneceği. 2x versiyonu mükemmel uyuyor ve Android sürümü ekrandan çıkıyor. Seçiminiz görüntüyü ölçeklendirmek veya görüntüyü Photoshop'tan farklı bir boyutta dışa aktarmaktır.
05/05
Test Erken, Test Sık, Güven Hiçbir Şey, Güven Kimse ve Özellikle Kendiniz
Anlamanız gereken şey bu sadece sürecin başlangıcı. Çalışmanızı, iş akışının hayati bir parçası olarak görmeniz gereken çok sayıda cihazda görüntülemek . Bunun bir uygulama veya mobil web projeleri için grafik öğeleri oluşturma sürecinin ilk adımı olduğunun da farkında olmanız gerekir.
Prototipleme uygulamalarını kullanmak, ağrı noktalarını ortaya çıkarmanın harika bir yoludur, ancak bu aynı varlıklar geliştirici tarafından kullanılmak üzere çıktı olmalıdır. Çoğu durumda, simgeler dahil olmak üzere varlıkların fiziksel boyutları, fiziksel olarak büyük olacak ve svg ancak png biçiminde olmayacaktır. İlk bakışta, bu biraz daha üstte görünebilir, ancak görüntülerin ölçeklendirilmesinin altın kuralını hatırlayın: ölçeklendirmeden daha aşağı ölçeklemek daha iyidir.
Alt satır, geliştiricinizle yakın çalışmak ve tasarım amacınızı göstermenin bir yolu olarak prototipleme yazılımı kullanmaktır. Sonunda, aynı varlıklar nihai ürün için hazır olmak zorunda olacak ve geliştiriciniz, sizin ihtiyaçlarınızdan daha iyi bir şekilde ele alacaktır.