Photoshop ile Web Sitesi Tasarımı Nasıl Yapılır?

Merhabalar, ben Yunus Emre Yalçın. Dijital pazarlama ve SEO alanlarında hizmet veren Semroot ajansında yönetici olarak çalışıyorum. Web sitesi tasarımı ve yazılım alanlarında da uzun yıllar boyunca pek çok projede yer aldım. Web tasarımının dijital pazarlama araçlarının sağlayacağı dönüşüm oranına ve arama motoru optimizasyonuna doğrudan katkıda bulunabileceğini fark edildiğinde, pek çok marka ajanslardan bu konuda da destek almaya başladı.

Web tasarımın yükselen yıldız olması ile farklı programlar da web tasarım yapılmasına olanak tanıyan bazı eklentiler geliştirmeye başladı. Bugünkü içerikte sizlerle birlikte Photoshop isimli program kullanılarak nasıl web sitesi tasarımı gerçekleştirilebileceğinden söz edeceğiz. Amatör olarak web sitesi tasarımı gerçekleştirmek isteyenler ya da markasının aldığı tasarım hizmetlerini denetleyebilmek adına konu hakkında bilgi sahibi olmak isteyenler, içerikten yararlanacaktır.

Photoshop ile Web Sitesi Tasarımı Nasıl Yapılır

Photoshop ile Web Sitesi Tasarlama Adımları Nelerdir?

Photoshop programı ile temel bir web sitesi tasarımı gerçekleştirebilmeniz için öncelikle Photoshop programını kullanmayı bilmeniz gerekmektedir. Uygulamayı kullanmayı öğrendikten ve biraz da pratik yaptıktan sonra amatör bir web sitesi dizaynı yapmanız mümkün hale gelmektedir. Şimdi adım adım Photoshop ile web sitesi tasarımı yapma sürecini inceleyelim:

Photoshop ile Web Sitesi Tasarlama Adımları Nelerdir

  • Öncelikle boş bir Photoshop çalışma sayfası açabilirsiniz. Bu çalışma sayfasında arka planınızın beyaz kalmasına özen gösterin. Bu sayede çalışmalarınızı çok daha kolay şekilde gerçekleştirebileceksiniz. Sayfa boyutunuzun standart düzende (Genişlik: 1024px Yükseklik: 1200px) olması size yarar sağlayacaktır.
  • Web sitenizin tasarımına, web sitenizin üst kısmından başlamayı ve sırayla aşağı doğru inmeyi tercih edin. Öncelikle web sitenizin logosunu ve üst kısmını yapabilirsiniz.
  • Üst kısmı yapabilmek için yeni bir katman oluşturmanız gerekmektedir. Bunun için CTRL-N yapmanız gerekir. Eğer bilgisayarınızda bu şekilde Layers seçeneği görünmüyor ise, ‘’Pencere’’ kısmından bu seçeneği bulabilirsiniz.
  • Araç paneli üzerinden işlemlerinize devam etmeniz gerekmektedir. İyi bir web sitesi tasarımı için şimdi Rectangular Marquee Tool (M)’u kullanma zamanı. Araç menüsünden Rectangular Marquee Tool (M) seçtikten sonra Fixed Size oluşturarak genişliği 100 px, yüksekliği ise 230 px olarak belirleyebilirsiniz. Sizler için belirlediğim bu değerler, bir web sitesi dizaynında kullanılan standart değerlerdir.
  • Daha sonra bir seçim alanı oluşturmanız gerekmektedir. Bu seçim alanını mavi bir halde taranmış olarak göreceksiniz.

photoshop ile web sitesi tasarımı

  • Oluşturduğunuz üst kısmın sağ ve sol bölgelerine ambleminizi yapıştırabilir ya da bu kısımda olmasını hayal ettiğiniz slogan ya da diğer görselleri buraya taşıyabilirsiniz.
  • Web sitenizin akışını hayal edin. Üst kısımdan sonra gelmeniz gereken nokta ‘’Menü’’ ya da ‘’Kategoriler’’ olacaktır. Bunun için yeniden katman oluşturmanız gerekir.
  • Rectangular Marquee Tool (M) aracı bu aşamada yine kullanılacaktır. Oluşturduğunuz üst bölge ile eşit büyüklükte bir menü çubuğu oluşturabilmek için, yine 100 px genişlik ve 250 px yükseklik tercih etmenizi tavsiye edebilirim.
  • Bu bölgenin renklerini kendi web sitesi temanızı nasıl hayal ettiğinize göre belirleyebilirsiniz.
  • Şimdi, oluşturduğunuz alanı Menü haline gelecek şekilde biçimlendirmeniz gerekiyor. Bunun için izlemeniz gereken yol, Layer > Layer Style > Bevel & Emboss olacaktır. Bu kısma geldiğinizde biçimlendirmeyi başlatacaksınız.

Sonuç

Yukarıda anlattığım on adım, Photoshop ile web sitesi tasarımı yapmanın her aşamasında çeşitli varyasyonlarla tekrarlanabilir. Web sitenizin yukarıda sıraladığım iki kısmını tamamladıktan sonra, içeriklerin bulunacağı kısmı tasarlamanız gerekir. Daha sonra sabit sayfada yer alacak olan iletişim gibi kısımların da aynı şekilde tasarlanması mümkündür. Photoshop programını profesyonel bir şekilde öğrenmek, bu süreçte size fayda sağlayacaktır.

Hemen Bir Web Tasarımı Teklifi Alın

Teklif Al  
Etiketler

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir