Nasıl Piksel simge tasarlanır?

Sağda solda, minik piksel simgeler görüp imreniyoruz. Bazılarını alıp projelerimizde kullandığımız da oluyor. Şurası kesin: Gerçekten güzel görünüyorlar! Peki vektör çizimlerin o ışıltılı dünyasından uzaklaşıp, piksel piksel çizim yapmayı hiç düşündünüz mü? Buyrun nasıl piksel simge tasarlanacağını öğrenelim:

1. Yeni bir dosya açın
Photoshop’ta, 14 x 14 pixel büyüklüğünde, transparan zeminli yeni bir dosya açın.

2. Şeklin dışını çizin
1 pixel kalınlığında Pencil tool’u seçin ve rengi gri yapın. Sayfa ikonunun dışını çizmeye başlayın. Düz bir çizgi çizmek için önce başlama noktasına basın, shift tuşuna basılı tutun ve bitim noktasına tıklayın.

İpucu: Pixel’leri silmek istediğinizde, Eraser tool’un Pencil modunu ve 1 pixel kalınlığını kullanın.

3. Zemin gradient’i
Magic Wand aleti ile içte kalan boş alanı seçin. Yeni bir layer açın. Ön plan rengini açık gri, arka plan rengini de beyaz yapın. Gradient tool’u kullanarak, sol üst koşeye basın ve sağ alt köşeye sürükleyin.

4. Işıklı ve gölgeli kısım
Yeni bir layer açın. Tepe ve sol sınırın iç tarafına beyaz ve 1 pixel kalınlığında bir şerit çekin. Böylece ışıklı kısmı elde edersiniz. Kıvrımın altına ve sağ ve alt sınırın iç tarafına da gri renkli bir şerit çekerek gölgeli kısmı oluşturun.

5. Bütün layerları bir grupta toplayın
Layers penceresinde, bütün layerları seçin ve Cmd+G ile gruplayıp bir klasörde toplamış olun.

6. Bir tane de kalem çizin
Yine şekle, dışını çizerek başlayın. İçini, ister gradientle, ister kalemle (ışıklı kısım olacak şekilde) doldurun. Bu layerları da gruplayıp bir klasörde toplayın.

İpucu: Eğer, icon setinin baştan başa, uyumlu renklere sahip olmasını istiyorsanız. Önceden kullandığınız renkleri bir kenara not edin.

7. Farklı farklı kullanın
İşte size, aynı grupları farklı farklı kullanarak elde ettiğim koleksiyon. Siz de böyle yapabilirsiniz.

8. Web için export edin
Bütün seti oluşturduktan sonra, bir onu, bir onu kullanmak suretiyle (7. maddede anlattığım gibi) ikonlarınızı, Cmd+Alt+Shift+S ile birer birer save edin (bu web için kaydetmedir).

Bu anlattıklarımı uygulayamayacak kadar tembel misiniz? O zaman, Web Designer Wall’un bedava mini ikon setini indirebilirsiniz.

Bu yazı Web Designer Wall’da yayınlanan How to Design Mini Icons yazısından tercüme edilmiştir.