Photoshop’ta web arayüz tasarımı nasıl yapılır ? Bu konuda eğitsel hazırlamak blogu ilk açtığım zamanlar da aklıma gelmişti. İş yoğunluğumdan dolayı eğitseli ancak şimdi hazırlayabildim umarım bu konuya meraklı arkadaşlara yeterince yardımcı olmuşumdur.

Eğitsele başlamadan önce, uygulamayı yapabilmeniz için orta düzeyde bir photoshop bilginizin olması gereklidir.

Hemen konuya girelim ilk olarak yapacağım web arayüz tasarımının taslağını kağıda çıkaralım. Ben ilk başta yapacağım çalışma hakkında karalamalar kesinlikle yapmalıyım renk kodlarını, tasarımda kullanacağım fontları, görsel efektleri taslağın hemen yanına not alırım ( uygulama esnasında bu fikirler tabii ki değişebilir. ).

Bu şekilde çalışmalara düzenli bir başlangıç yapmak her zaman iyidir o an aklınıza gelen fikirler uçmamış olur. Aynı zamanda kağıt üzerinde tasarımın iskelet haliyle bol bol oynayarak tasarımı çok daha rahat geliştirebiliriz, taslağınız çıktığında bazı web galerilerini gezmekte fayda var diye düşünüyorum, bu size yeni fikirler ve kullanım alanlarında ki stili, düzeni belirleminizde yardımcı olacaktır.

1. Çalışmanın Sonucu

1. Taslak Çalışması;

Yapacağımız tasarımın taslağını kağıt üzerinde çıkardık. Renk, font ve stil hakkında ufak notlarımızı aldık.

STEP 1

Yeni bir çalışma alanı açalım ( CTRL + N ) 1200px w ve 1414px, RGB Color. Yapacağımız tasarımın genişliği 946px olacak.

Cetvelimizi açalım ( CTRL + R ) 946 px alanını hemen belirleyelim.

STEP 2

Header tasarımına geçelim, yeni bir grup açıyoruz ( CTRL + G ), grup ismimiz HEADER. HEADER grubunda BG isimli yeni bir layer oluşturup notlarımız arasında kullanmak istediğimiz renk kodunu giriyoruz, gradient Tool ( G ) yardımı ile arka planımızı oluşturuyoruz.

Artı olarak arka planda çok daha iyi, içeriğe uygun olacağını düşündüğüm bazı figürler kullanmak istiyorum. Ben bulut seçtim kullanacağım photoshop fırçasını buradan indirebilirsiniz. BULUT isimli yeni bir layer oluşturuyoruz ve fırçamızla uygun yerleri dolduruyoruz.

STEP 3

Logomuzu hemen belirlenen alana ekliyoruz. Rectangle ” Kare “  aracı ile üst menümüzü oluşturuyoruz rengimiz #366e91 opacity değeri %61.

Header grubunun içerisinde ARAMA adında yeni bir grup oluşturuyoruz ( CTRL + G ). Rounded ” Oval ” rectangle aracı ( Radius: 3 px ) ile site içi arama kutucuğumuzu oluşturuyoruz renk kodu #317fb7

Blend Options ayarlarını açıyoruz , Inner Shadow veriyoruz değerleri .

Arama kutucuğumuzun içerisine site içi arama diye ufak bir yazı yazıyoruz. Sağ kısımdan tam 37 px boşluk alıyoruz sol kısma kadar ufak bir ayraç yapıyoruz, hemen yanına ara butonumuzu ekliyoruz, alt kısma çok arananlar bölümünü ekliyoruz ve grubumuzu kapatıyoruz.

STEP 4

Hemen menümüz ve alfabetik listemize geçiyoruz, HEADER grubunun içerisinde MENÜ adında yeni bir grup oluşturuyoruz ( CTRL + G ). Menümüzü oluşturuyoruz.

Rounded Rectangle aracımız ile çizimimizi ( Radius: 7 px ) yapıyoruz.

STEP 6

HEADER adlı grubumuzu kapatalım ve ORTA adında yeni bir grup oluşturalım ( CTRL + G )

Rectangle ” Kare ” aracı ile W: 748px – H: 258px boyutunda beyaz bir dikdörtgen çiziyoruz. Blend Options ayarlarından Inner Shadow veriyoruz değerleri.

Hemen konumuzla ilgili bir resim bulalım benim kullanacağım resim burada. Rectangle ” Kare ” aracı ile çizdiğimiz shape’in tam üstüne resmi yapıştırıyoruz. Resim katmanımıza sağ tıklayarak ” Create Clipping Mask ” diyoruz.

Tamamdır resmimiz oluşturduğumuz katmana maskelendi.

Sizde benim yaptığım gibi resimin alt kısmını aynı şekilde oluşturun.

STEP 7

Manşetimizin hemen yanına Haftanın En İyileri alanı ekleyeceğim ORTA isimli grubumuzu kapatalım ve HAFTANIN isimli yeni bir grup oluşturalım.

Rounded rectangle aracı ile ( Radius: 3 px ) W: 172px – H: 305 pxboyutunda bir çizim yapalım ( renk kodumuz #e0f2f5 ). Başlığımız 3D olacak başlığı oluşturmak için önceden hazırladığım

Web Tasarımın 3D Elementler adlı konu size yardımcı olacaktır.

İçeriği aynı şekilde dolduralım.

STEP 8

HAFTANIN adlı grubumuzu kapatalım ve REKLAMLAR adında yeni bir grup oluşturalım. Rounded rectangle aracı ile ( Radius: 3 px ) ( #e6e6e6 renk kodu ) W: 936 px – H: 108 px boyutunda

bir çizim yapalım.Blend Options ayarlarında Inner Shadows değerleri.

İçerisine aynı şekilde reklamlarımızı yerleştirelim.

STEP 9

Reklam adlı grubumuzu kapatalım ve GÜNÜN adlı yeni bir grup oluşturalım. Bu bölümde Günün Edebiyat Haberleri adlı içeriğimiz yer alacak.

Rounded Rectangle aracı ile ( Radius: 7 px  Renk Kodu: #b8d1e1) , W: 650 px – H: 27 px boyutunda bir çizim yapalım. Blend Options ayarlarından Inner Shadow değeri.

AÇIK RENK : #c3dae8 gradient isimli yeni bir layer oluşturalım ve step4 tekrarlayalım.

STEP 10

GÜNÜN adlı grubumuzu kapatalım ve REKLAM adlı grubumuzu oluşturalım Günün edebiyat haberlerinin sağ tarafına 273 x 227 px boyutunda reklam atalım.

Facebook alanımız için rectangle ” Kare ” aracımız ile W: 277 px  -  H : 55 px boyutunda bir çizim yapalım. Renk kodumuz #3b5997. Blend Options ayarlarından Inner Shadows değerlerimiz.

Bu alanlarımızı da tamamlamış olduk.

STEP 11

Alt kısımdaki içeriğimiz için lütfen STEP 7 tekrarlayalım aynı mantıkta alt içeriğimizi oluşturup tasarımı tamamlayalım.

Ve tasarımımızı tamamlamış olduk. Portal Tasarımı Nasıl Oluşturulur ? adlı okuduğunuz için teşekkür ederim. Umarım yardımcı olabilmişimdir. İsteğe bağlı olarak dilerseniz aynı konuyu birde videolu anlatım yapabilirim anlamayan arkadaşlarım için.

Tasarımın kaynak dosyası için(.PSD)  buradan. Tasarımı istediğiniz yerde kullanma hakkına sahipsiniz :) alta linkimi eklerseniz ayrıca mutlu olurum.

Beni takip ettiğiniz için teşekkürler.