Kirli Kirpi Blog

Bize, sektöre ve hayata dair söylemek istediklerimiz var. Peki siz bunları dinlemek ve okumak ister misiniz?

Photoshop Web Dokümanı Oluşturma
web-dokuman-olusturma-cover

Web tasarımı ile uğraşmaya başlayan kişilerin öğrenmesi gereken ilk konu photoshop içerisinde bir web dokümanı oluşturmanın temel noktalarıdır. Bu konu web tasarımının olmazsa olmazıdır. Bu konu içerisinde yer alan başlıkları sayacak olursak, photoshopun web tasarımına uygun olarak ayarlanması, standart ölçülerde boş doküman oluşturulması, grid yapısının oluşturulmasıdır. Şimdi tüm adımları en detaylı şekilde incelemeye ve anlamaya çalışalım.

Photoshop Ayarları:

Web tasarım dokümanı oluşturmadan önce photoshopu web tasarımı için en uygun hale getirmek gerekir. Bunun için yapılması gerekenler şu şekildedir. Öncelikle Edit / Preferences / General (CTRL+K) menüsünden Photoshop ayarlar penceresini açalım.
Açılan panelde soldaki ilk seçenek general bölümünden, pixel perfect tasarım yapabilmek adına “snap vector tools and transform to pixel grid” seçeneğini aktif edelim.

web-dokumani-vector-pixel

web-dokumani-vector-pixel

Sonraki adım info panel ayarlarının yapılması olacaktır. Eğer ekranda info paneli göremiyorsanız paniğe kapılmayın açmak çok kolay. Photoshop panelleri için bakılacak nokta window menüsüdür. Window / info (F8) komutu ile info panelini açıyoruz. Web tasarımı yaparken bu panel ölçüleri ve renkleri görme açısından çok önemli olduğundan bu paneli ekranda sürekli açık olarak tutmak faydalı olacaktır.

info-panel-ozellikler

info-panel-ozellikler

Info panelin ne işe yaradığını anlamak açısından en basit şekli ile özellikleri gösteren bir pencere diyebiliriz. Yukarıda yer alan imajdaki sıralamalara göre gösterdiği değerleri şu şekilde sıralayabiliriz:

1. Alanda o anda çalışılan dokümanın Mouse üstünden geçtiği andaki renk değerlerini görürsünüz.
2. Alanda renk değerlerini başka bir renk formatında görebilirsiniz. Bu renk değerleri 10 farklı seçeneğe sahip olup her iki alanda ayarlar bölümünden düzenlenebilir istenildiği her an değiştirilebilir. Böylece rengin rgb, cmyk gibi renk değerlerini görebileceğini gibi mesela transparanlık değerlerini de görebilirsiniz.
3. Alanda mousun o andaki koordinatını dokümanın ölçü birimine göre yerini görebilirsiniz. Bunu örneğin sprite dosyası oluştururken seçimler yapmadan css kodu girebilmek için kullanabilirsiniz.
4. Alanda yapılan bir seçimin veya transform ile seçili hale getirilen nesne(ler) nin ölçüsünü görmek için kullanırız. Böylece örneğin site içerisine yerleştirilecek bir thumbnail imajın boyutunu basit bir seçimle öğrenebiliriz.
5. alanda dokümanın kendisi ile ilgili bilgileri görüntüleyebiliriz. Böylece açık dokümanın ölçüleri, açılırken verilen renk değerleri, çözünürlük bilgileri, o anda seçili olan photoshop toolu ve bir çok özelliği görüntüleyebilirsiniz.
6. alanda o anda seçili olan tool ile ilgili ipuçlarını görüntülersiniz. O tool ile ne yapılabileceği ile ilgili temel bilgiler ekranda otomatik olarak yazılır. İngilizce bile olsa basit bir anlatımdır. Rahatça anlayacağınızı tahmin ediyorum.

Buraya kadar info panelin ne kadar kullanışlı bir panel olduğunu anladığınızı düşünüyorum. Bu kadar ara verdiğimiz yeter gelelim dersimizin devamına.

Açılan panelin sağ üstündeki küçük ok işaretine tıklayarak “Panel Options…” butonuİa tıklıyoruz.

web-dokumani-info-ayar-01

web-dokumani-info-ayar-01

Info paneli özelliklerinden ilk seçenek olan “First Color Readout” ekranda 1 nolu alanı gösterir. Web tasarım ile uğraşacağımızdan RGB seçeceğiz. 2. Ekran seçimini keyfinize göre yapabilirsiniz. 3. Ve 4. Ekranlar için tek bir seçenek bulunmaktadır. “Mouse Coordinates” kısmından pixeli seçeriz. Böylece ekran için verilen koordinatlar ve nesne boyları pixel değer olarak sunulacaktır. Daha sonra gelen 5. Ekran için “Status Information” bölümünü ve 6. Bölüm için “Show Tool Hints” bölümünü ben pek kullanmıyorum. Bu sebeple ekranımda yer kaplamasınlar diye tüm seçenekleri kapatıyorum ama bu işte yeni iseniz kesinlikle deneyin.

web-dokumani-info-ayar-02

web-dokumani-info-ayar-02

Sonuçta ayarlarımızı yapınca kaydetmek için tek yapmamız gereken “OK” butonuna tıklamaktır. Photoshop web tasarım ayarları böylece bitmiş oluyor.

Yeni Doküman Ayarları

Photoshop içerisinde “File / New…” (CTRL+N) diyerek yeni bir doküman oluşturma panelini çağırıyoruz.

web-dokumani-olculer

web-dokumani-olculer

Açılan pencerede eğer responsive tasarım yapmıyor isek, ki yeni başlayanlar için uçmadan önce yürüme prensibi gereği yapılması önerilmez, 960px genişliğinde bir doküman oluşturuyoruz. Bunun sebebi yaygın olarak kullanılan ekran çözünürlüğünün 1024x768px olmasındandır. Bu çözünürlük için en iyi genişlik değerinin 960px olduğu kabul görmektedir. Benim kişisel fikrim yaygın olan çözünürlüğün 1280px oluşu yönündedir ve bu konuda pek çok kişi ile oturup detaylıca tartıştım, ama kafa bulandırmamak adına genel kanıya uygun bir anlatım yapmayı tercih ediyorum. Yükseklik değerinin bir önemi yoktur. Yükseklik değeri ancak ekranda sağ tarafta scrool çıkmasını istemiyorsanız önemlidir. Bu değerle ilgili bir sürü değer verilir ama scrool çıkmadan ana sayfa bitsin demek bence biraz hamallık işidir. Birkaç denemede çözebilirsiniz. Ayrıca yükseklik değeri tıpkı genişlik değeri gibi hiçbir standartı olmayan bir değerdir. Resolation olarak 72 pixel/inch değerini giriyoruz. Burada yer alan diğer değerleri açıklamayacağım. Çünkü çok fazla teknik anlatım ister ve bu yazımızın konusu değil. Talep gelir ise o konuda da bir yazı hazırlayabilirim. İşimiz bittiğinde “OK” butonuna tıklayarak boş dokümanımızı açıyoruz.

Grid Ayarları:

Bu konu web tasarımın en can alıcı konusudur. İyi bir web tasarımcısı html ve css konusunda kesinlikle bilgili olmak zorundadır. Ben çizdim kim nasıl kodlarsa kodlasın demek işine saygısızlıktır. Gerek grafik tasarım olsun, gerek web tasarım olsun, nesnelerin neye göre hizalanacağını belirleyen kişi Guide yani kılavuz çizgilerin nasıl oluşturulması gerektiğini bilmek durumundadır. Bunun için size çok basit ve bedava bir tool önereceğim. GuideGuide eklentisini en güncel sürümünü kendi web sayfasından indirebilirsiniz. Sitede eklentini sisteme kurulumu anlatılmakta ama tek yapmanız gereken Photoshopu kapatıp eklentiye çift tıklamak olduğunu söyleyebilirim. Bu eklenti seçilen alanda veya seçim yapılmaz ise tüm dokümanda istenilen sayıda ve aralıkta, aralıkları belli olacak şekilde yatay veya dikey guide oluşturulmasını sağlayan muhteşem bir eklentidir.

guideguide-plugin

guideguide-plugin

Kullanımı çok basittir, birkaç deneme ile ve iconların üstünde mouse’u beklettiğinizde gelen açıklamaları okuyarak rahatça kullanmaya başlayabilirsiniz. Panel açık değilse Window / Extensions / GuideGuide seçeneğinden paneli açabilirsiniz.

Web sitelerinde genelde içerikler 2 sütun, 3 sütun ve 4 sütun olarak yerleştirilir. Bu durumda ilkokul matematiği bilgilerimizi gözümüzün önüne getirerek (Benim yaş gurubuma girmeyenler ilköğretim bilgilerini de değerlendirebilir) OKEK (Ortak katların en küçüğü) uyguladığımızda 12 sonucuna ulaşabilirler. En çok kullanılan sütun yapısı 12 ve 16 diyebiliriz. Ama özgün ve farklı içerik kullanırken bu yapı bozulabilir. Bunu bozmak ustalık işidir. İlk başlarda sadık kalmak daha mantıklıdır. 12li ve 16lı kullanım için Guideguide ayarlarını paylaştım. Deneyerek ne demek istediğimi anlayabilirsiniz.

guideguide-degerler

guideguide-degerler

Şimdi elinizde web tasarımı yapmak için boş bir doküman bulunmakta. Hadi o boşlukları hayal gücünüzle doldurmaya başlayın.

Not 1: Kılavuz çizgileri rule panelinden elle manuel çizmek için CTRL+R ile ekranda cetveli açık hale getirin.
Not 2: Ekranda çok fazla kılavuz çizgi oluştu tek tek bunları nasıl silerim diye düşünmeyin. Sıkıldığınız anda View / Clear Guide ile tüm çizgileri silebilirsiniz.
Not3: Guideleri silmek değil ekrandan gizlemek için CTRL+H kombinasyonunu kullanın

Başka bir yazıda görüşmek üzere sağlıcakla kalın.

Paylaşmak istediklerinizi bize gönderin