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.
Görüntü ve simgeleriniz cihazlara eklenmeden önce montaj noktaları haline gelen yeni bir yazılım - Prototipleme uygulamaları sınıfı var ve bunları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/05Adobe 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. Resim Photoshop'ta açıldığında, Resim> Görüntü Boyutu'nu seçin Görüntünün boyutlarını ve çözünürlüğünü kontrol etmek iç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ışmayacak.
Görüntü Boyutu iletişim kutusunun içinde, Çözünürlüğü 100 ppi'ye düşürün. 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. Tamam'a tıklayın Değişikliği kabul etmek ve Görüntü Boyutu iletişim kutusunu kapatmak için
Aşağıda okumaya devam et
02/05Adobe 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> Farklı Dışa Aktar" ı seçin. Dışa Aktar iletişim kutusunu açmak iç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 sunulacak. 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.
- Son ek: Bu seçim bedeninizi gösterecektir ancak 2x olarak gösterilecek veya boyut seçilecektir. Bu son ek görüntü adına eklenecektir.
- + İş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 tenekesi: Bunu tıklayın ve seçim diziden kaldırılır.
- Dosya Ayarları Biçimi seçin - jpg, png, gif veya svg - resme 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.
- Tuvalin boyutu: Görüntü tuvalinin fiziksel boyutlarını değiştirebilirsiniz.
- Meta veri: 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.
Aşağıda okumaya devam et
03/05Kroki 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 resmi 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/05Gö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.
Aşağıda okumaya devam et
05/05Test 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.
