Photoshop İle Web Sitesi Tasarımı Nasıl Yapılır?

Web tasarım elbette işin içine yazılım araçlarının da girdiği kapsamlı bir süreçtir. Ancak görsel düzenleme programları kullanarak bir sitenin görsel tasarımına dair detaylı bir şablon oluşturmak mümkündür. Bu doğrultuda yazımızda Adobe Photoshop ile web sitesi tasarımı nasıl yapılır sorusuna cevap vermeye çalışacağız. Son derece kullanışlı ve geniş bir görsel düzenleme programı olan Adobe Photoshop, web tasarım açısından da kullanmak için oldukça elverişli bir yapıya sahiptir.

Nitekim pek çok profesyonel web tasarım uzmanı geliştirme aşamasında Adobe Creative Cloud paketlerinden ve özellikle Photoshop’tan sıklıkla yararlanmaktadır. Bu anlamda gerek bütün bir site arayüzü gerekse de site elementlerini tasarlamak açısından Photoshop’un ideal bir seçim olduğunu söyleyebiliriz. Gelin şimdi Adobe Photoshop’ta web sitesi tasarımı yapmak için izleyebileceğiniz temel rotanın adım adım üzerinden geçelim. Photoshop ile web sitesi tasarımı nasıl yapılır öğrenmek için aşağıdaki adımları okuyabilirsiniz.

Photoshop ile web site tasarımı 6 adımda nasıl yapılır?

• Çalışma sayfası oluşturun.

Öncelikle tasarımınıza başlamak için ilk adımınız yeni bir çalışma sayfası oluşturmaktır.

• Izgara Sistemlerinden Yararlanmayı unutmayın.

İkinci adımınızda ızgara sistemlerini kullanarak yerleştirebileceğiniz konumları çok daha kolay belirleyebilirsiniz ve responsive bir tasarım oluşturabilirsiniz.

• Tasarımlarınızı görsel hiyerarşiye göre ayarlayın.

Pek çok tasarım uzmanı, tasarımlarını görsel hiyerarşiye göre yapmaktadır. Sizde kullanıcılarınızın deneyimlerini daha iyi hale getirebilmek ve tasarımsal bir düzen oluşturabilmek için tasarımlarınızı görsel hiyerarşiye göre düzenleyin.

• Menü çubuğu tasarlayın

Ziyaretçilerinizin içeriklerinize daha kolay erişebilmesi için ve web sitenizde kolayca gezinebilmesi için menü çubuğu tasarlayın.

• Kullanacağınız araçları önceden belirleyin.

Sayfanızın daha bütüncül bir görünüm kazanması için kullanacağınız araçları önceden planlayın.

• Vektörler kullanın.

Ve son adım olarak vektörleri kullanmayı unutmayın.

1. Yeni Bir Çalışma Sayfası Oluşturarak İşe Başlayın

Photoshop ile web sitesi tasarımı yapımına başlamak için öncelikle yeni bir çalışma sayfası oluşturmanız gerekir. CTRL/Cmd + N tuş kombinasyonuyla hızlı bir biçimde yeni bir çalışma sayfası oluşturabilirsiniz. Günümüzde internet sitelerinin büyük çoğunluğu 1024 x 1200 piksel ölçülerini kullanır. Bu oran güncel bilgisayarların ekran çözünürlükleri ve ölçeklerini göz önüne alarak öne çıkmıştır. Standart bir gezinme deneyimi için siz de bu ölçüleri kullanabilirsiniz.

2. Izgara Sistemlerinden Yararlanın

Grid ya da ızgara olarak isimlendirilen Photoshop aracı sayesinde taslağınızda yer alan ögelerin tam lokasyonunu öğrenebilirsiniz. Yukarıda da belirttiğimiz gibi web sitelerinde genel olarak 1024 x 1200 piksellik bir alan kullanılmaktadır. Ancak buna ek olarak responsive bir tasarımı da göz önünde bulundurmanız gereklidir. Bu doğrultuda farklı elementleri farklı pikseldeki genişlik ve yüksekliklere yerleştirmek ziyaretçilerinizin işini kolaylaştırır. Izgara sistemlerini kullanarak bu tür elementleri yerleştirebileceğiniz konumları çok daha kolay belirleyebilirsiniz.

3. Tasarım Sıranızı Görsel Hiyerarşiye Göre Belirleyebilirsiniz

Pek çok web tasarım uzmanı tasarım sürecini görsel hiyerarşiye sadık bir biçimde planlamaktadır. Bu doğrultuda ziyaretçilerin bir web sitesinde karşılaşacağı ilk elementler sayfanın üst kısmında yer alır. Tasarım sürecine de bu bölgeden başlayarak daha sonra alt kısımlara geçebilirsiniz. Yeni bir katman oluşturarak çalışma sayfanızın üst kısmında çalışmaya başlayabilirsiniz. Bir web sitesinin üst bölümünde genellikle sitenin logosu ve görsel ögeleri yer almaktadır. Siz de aynı rotayı izleyebilirsiniz. Bunun için şu adımları takip etmeniz yeterlidir:

• Rectangular Marquee Tool, web sitesi tasarımında en çok ihtiyaç duyacağınız tasarım araçlarından biridir. Bu aracı kullanarak belli bir alanı işaretleyebilir ve bu kısımda çalışabilirsiniz.
• 100 x 230 piksel büyüklüğünde bir alan belirleyerek sitenizin üst kısmını tasarlamaya başlayabilirsiniz.
• İşletmenin logosu gibi farklı görseller elinizde mevcutsa bu alana sürükleyerek logoyu siteye yerleştirebilirsiniz. Benzer şekilde diğer görseller ya da harekete geçirici sloganlar için de bu bölgeyi kullanabilirsiniz.

4. Kullanıcı Deneyimini Geliştirmek İçin Menü Çubuğu Tasarlayın

Eğer ilk kez bir web sitesi tasarımı yapıyorsanız bir web sitesinin genel görüntüsünü hayal etmeye çalışın. Ya da aklınızdakine benzer bir web sitesini inceleyerek de işe başlayabilirsiniz. Web sitelerinde kullanıcıların işini en kolaylaştıran elementlerden biri menü çubuğudur. Burada “Ana Sayfa”, “Menü”, “Kategoriler” ve buna başlıklar yer alır. Bu başlıklara tıklayarak ziyaretçiler o sayfada yer alan içeriklere kolay bir biçimde ulaşabilir. Menü çubuğu oluşturmak için şu adımları takip edebilirsiniz:

• Yine ihtiyaç duyacağınız araç Rectangular Marquee Tool olacak. Bu aracı seçerek üst bölgenizle eşit genişlikte bir menü çubuğu tasarlayabilirsiniz.
• Rectangular Marquee Tool kullanarak 100 x 250 piksellik bir menü çubuğu alanı oluşturabilirsiniz. Genellikle internet sitelerindeki standart ölçünün bu olduğunu söylemek mümkündür.
• Daha sonra Layer Style sekmesinden Bevel & Emboss seçeneğini seçerek menü biçimlendirmesine geçebilirsiniz.

5. Kullanacağınız Tüm Araçları Önceden Belirlemeye Çalışın

Bir web sitesi sayfasının bütüncül bir görünüm sunması son derece önemlidir. Bunu sağlamanın en kolay yollarından biri de tercih edeceğiniz renk paleti, yazı tipi ve buna benzer elementleri önceden belirlemektir. Bu elementleri yandaki araç çubuğunda açık tutarak çalışmayı sürdürmeniz görsel bütünlük açısından ciddi oranda katkı sağlayacaktır. Ayrıca farklı web sitelerini inceleyerek bu tür elementlerin genel standartları hakkında da fikir sahibi olabilirsiniz.

6. Vektörler, Şekiller ve Akıllı Objeler Kullanın

Çalışma alanınızda yeni katmanlar oluşturmak için Photoshop’ta yer alan hazır geometrik şekillerden yararlanabilirsiniz. Photoshop’taki geometrik şekiller vektörel tabanlı bir işleyişe sahiptir. Bu da web tasarım çalışmalarınız için önemli ölçüde avantaj sağlar. Çünkü vektör çizimler farklı ölçeklendirmeler söz konusu olduğunda çözünürlük kaybı yaşamaz. Bu nedenle daha sonra düzenleme yapmanız gerektiğinde görüntü kalitenizde bozulma olmadan bu değişiklikleri yapabilirsiniz.

Benzer bir biçimde harici bir görsel dosyası kullanırken de raster grafikler yerine akıllı objeleri tercih etmelisiniz. Örneğin Adobe Illustrator’de tasarladığınız bir logoyu akıllı obje olarak dışa aktararak Photosop çalışmanıza taşıyabilirsiniz. Böylelikle görselin kalitesine dair herhangi bir endişe taşımaksızın çalışmanıza devam edebilirsiniz. Aksi takdirde yeniden ölçeklendirme yaptığınızda logonuzun görüntü kalitesinde düşme olduğunu kolaylıkla görebilirsiniz.

Web tasarım hakkında daha fazla bilgi edinmek isterseniz Web Tasarım SEO İlişkisi bloğumuzu ziyaret edebilirsiniz.