Photoshop’u öğrenmek kolay, tasarımcı olmak zordur. Hazırlayacağınız uygulama ve site tasarımlarının başka bir tasarımcı tarafından kolayca anlaşılabilir olması, yazılımcının rahatlıkla kesebilecek olması ve hangi dosyanın nerede olduğunu anlamak için saatler harcamaması gerekir. Sektördeki tasarımcıların en az %90’ının önünden ayırmaması gereken bir check list hazırladık.

Dosyalar

  • Her bir sayfa tasarımı için ayrı bir .psd dosyası hazırlama, Cmd+N tuşu biraz soğusun.
  • Her yeni revize için yeni .psd iletirken yeni.psd, enyeni.psd, eeeenyeni.psd diye isimlendirmekten vazgeçip V1, V2 diye isimlendirmeye başla.
  • Tasarımında kullandığın stock görselleri, illustrator dosyalarını, ikonları masaüstünde ya da downloads klasöründe değil tasarımı yaptığın .psd ile aynı klasörde tut.
  • Çok fazla sayıda dosya varsa bu dosyaları türlerine göre ayrı klasörlere yerleştir. Elementler ayrı, stoklar ayrı klasörlerde aynı projenin klasörünün içinde bulunsun.

Layerlar

  • Layerlarına isim vermeyi her yaptığın işte alışkanlık haline getir. Layer 1, Layer 1 copy.. diye samanlıkta iğne aratma bize.
  • Tüm layerların bir grup içerisinde bulunsun. Bu grupları da ihtiyaca göre alt gruplar için kategorilendir. Tasarımdaki bir bölümün görünürlüğünü değiştirmekle harcayacağın vakitte yeniden tasarımı yapardın.
  • Eski layerları sil.  Gözünü seveyim kullanılmayacak layerın ne işi var orada?
  • Aynı layoutta elementleri kullanacaksan yalnızca birinde elemente yer vermen yeterli. Her birine ayrıca eklemene gerçekten gerek yok.
  • Layer Comps diye bir şey var. Tasarımın farklı varyasyonlarını göstermek için bir ara denemelisin. Seveceksin.

Görseller

  • Kullandığın shape’leri rasterize etme. İlla edeceğim diyorsan da en azından vektörü yine aynı klasörde bulunsun. Yazılımcı bunu nasıl kesecek diye bir düşün istersen?
  • Maskları gruplara da verebilirsin. Aynı grupta her layer için aynı maskı vermekten kolay çözümler de var.
  • Milattan önce 2400 yıllarında icad edildiğine inanılan müthiş bir buluş var. Adı cetvel. Hani şu Photoshop’ta görselleri hizalamak için kullanılan? Heh işte o snap bölümü Photoshop’a süs olsun diye koyulmadı.
  • Masklar ve Smart Objectler gerçekten çok yararlı araçlar. Hiçbir layerı rasterize etmene ya da manuel olarak rengini değiştirmene gerek yok.

Font

  • 13.3321 pt. yazı olmaz. Ya 13’tür ya 14. Büyüklük ayarını sayı girerek yapmalısın.
  • Oransız uzatılmış fontları CSS/HTML ile yazmak pek kolay değil. Fontları rasterize edip tek bir yönden büyüttüğünüzde çıkan sonuç size göre güzel dahi olsa yazılımcıyı çileden çıkarırsınız.
  • Text alanlarının altında kullanılmayan uzuuun boşluklar bırakmanız yalnızca layerlar arasında geçişi zorlaştırır. Gereken uzunlukta bırakmalısınız. Tabi yeri gelmişken text alanlarında çapraz alanlar vb. oluşturmak için pathleri kullanabileceğinizi de biliyorsunuzdur. Hatırlatmaya gerek yok.
  • Fontu, puntosu, rengi ayrı olan text alanlarında farklı textboxlar kullanmak şart. Hem yazılımcıya bir rahat nefes aldırın hem de font dosyalarına azıcık düzen katmış olun.

Can-a-Web-Developer-Also-be-a-Web-Designer

Efektler

  • Color Overlay ile renk değiştirdiyseniz layerın hangi renkte olduğunu gösterecek şekilde shape’yi isimlendirin.
  • Kendini tekrar eden background tasarlamak kolay bir iş değildir. Bir tarafı gölgeli diğer tarafı açık bir görsel hazırlarsan tekrar etmeyecektir. He bu arada background dosyaları sadece .jpg formatında olur unutma.
  • Hani bazen tek bir layera 8 farklı efekt veriyorsun ya. Front-Endci o layerdaki efektleri gördüğü anda “hadi kolaysa gel sen CSS’de bunu yaz” demek istiyor emin ol. 2 efektten fazla efekt verme bir layera.
  • Gradient çalışırken her bir renk ayrımını farkedemiyor olmamız gerekiyor. Gradientte 32 farklı şeritin olduğunu görünce insan ister istemez paint.exe’nin aslında ne kadar güzel bir program olduğunu düşünebiliyor.

Uygulamalar

  • Drop Shadow gerektiğinde hala kullanabilirsiniz. Her tasarım Flat olacak diye bir şey yok. Ancak kullandığınız aşırı derecede belli oluyorsa shadowu abartmışsınız demektir.
  • Sisteminizde yüklü olan her font web fontu değildir. Yazılımcının benzer başka bir font aramasına gerek bırakmadan typekit ile uygun çalışacak bir font ile tasarımı yapmalısınız. Google fontta olur.
  • Responsive tasarım çalışırken Bootstrap ya da Devrocket‘ten templateler üzerinde çalışmak her zaman için daha yararlı olacaktır.

Kalite

  • Eğer bir metin yazarından gelen metinler üzerinde copy-paste yapmıyorsan mutlaka imla hatalarını kontrol etmelisin. Çünkü senden sonra yazılımcı genellikle kontrol etmez.
  • Gelen wireframe’i ikinci kez kontrol etmeyi unutma. Web sitesinde müşterinin logosunu koymayı unutmak gibi hatalar pekte hata gibi algılanmazlar çoğunlukla.
  • Stock fotoğraflardaki filigranları Photoshop ile silmeye kalkma. İlla bir noktasında batırıyor ve rezil oluyorsun.
  • Damla aracı ile müşterinin logosundaki maviyi alıp kullanıyor olabilirsin. Ancak ikinci kez damla aracını kullandığında aynı maviyi elde edemeyebilirsin. Mutlaka renk koduna bakarak kullandığın renkleri doğrulamalısın.

Dışa Aktarım

  • Hazırladığın tasarımı jpg olarak kaydedeceğin zaman “Save as for Web&Devices” tuşunu kullanmalısın.
  • Dosyanı export etmeden önce boyutunu düşürmek adına sıkıştırma işlemini gerçekleştirmelisin. Web siteleri için her bir KB’ın değeri çok büyük.
  • Müşteriye tasarımın önizlemelerini .jpg olarak gönderiyorsan dosya isimlerini header.jpg, footer.jpg, content.jpg olarak hazırlamalısın. mavi_background.jpg, şirket.jpg, müşteri.jpg olarak ayarlarsan gülerler.
  • Canvas değerlerini mutlaka kullandığın görsellere göre ayarlamalısın. Canvas’ın bir kısmında geniş transparan boşluklar boşu boşuna yazılımcının işini uzatacaktır.
  • Kullandığın görsellerde pikselleşme olmaması adına yüksek DPI kullanmaktan kaçınmamalısın. Retina Display diye bir şey var.

Tasarımcı ile yazılımcı arasındaki uyumu yakalamak zordur. Ama front-end ve kreatif ekiplerin birlikte çalışabilmesi sonucu harika işlerin ortaya çıkacağı da kesindir.