Photoshop’da web tasarımı:

Görsel tasarım aşamasında, Dreamweave, Frontpage (özellikle 2003 sürümü), Flash, Freehand ve benzeri programlar tercih edilebileceği gibi en yaygın kullanılan program Photoshop olmaktadır. Layer (katman) mantığı ve klasör formatındaki gruplama özelliği sayesinde her adımın değişik konumlarda rahatça önizlenebilme imkanı tercih nedenleri arasında ilk sırada gelmektedir. Bunu, eklemek istenen imajları fazladan bir program kullanımına gerek duymadan, hemen oracıkta edit edebilme rahatlığı izlemektedir. Son olarak tasarım ortaya çıktıktan ve onaylandıktan sonra, html formatın oluşturulması aşamasında, Slice (dilimleme) aracı sayesinde istenen sayıda parçaya ayrılmış ve Save For Web (web için kaydet) seçeneği ile maksimum kalitede minimum yer kaplayan imajlar elde etme olanağı gelmektedir.

• Layer (katman) Mantığı ve İşlevi:

Katmanlar, üst üste konmuş şeffaf kağıtlar olarak tanımlanabilir. Örnek olarak, bir grafikte değişik değer eğrilerinin ayrı ayrı görüntülenmesi ele alınabilir. Eğer tüm eğriler aynı kağıda çizilmiş ise tek tek görüntülemek imkansızdır. Bunun çözümü ise boş bir grafik içeren beyaz sayfa üzerine sadece eğriyi içeren asetat kağıdını eklemektir. Bir sonraki eğri için ise diğer asetat bir öncekinin yerine konur. Tümünü görmek için asetatlar üst üste konabilir. İşte katmanların bize sunduğu, bu işlemi dijital ortamda gerçekleştirebilme imkanıdır.

Görüntü1: Katmanlar gizlenmiş durumda	Görüntü2: 1. Katman seçili	Görüntü3: 2. Katman seçili	Görüntü4: Tümü görüntüleniyor

Pek çok imaj oluşturma/edit uygulaması öğelerin gruplanarak, tek seferde, boyut ve/veya konum değişikliği imkanını sunmaktadır. Ancak bu işlem sırasında her bir öğe aynı katmanda bulunduğundan, sadece biri üzerinde yapılacak değişiklik ya da silme işlemi büyük ihtimalle diğer öğeleri de etkileyecektir. Bunun yerine klasör oluşturulduğunda, her öğe ayrı bir katmanda kalabileceğinden, tek tek edit edebilme imkanı kaybedilmeksizin, tek seferde edit işlemi de sorunsuz sağlanabilecektir.

	Görüntü5: Gruptaki tek bir öğeye müdehale	Görüntü6: Tüm gruba müdehale

•  İmaj Edit Kolaylığı:

Bilindiği üzere Photoshop oldukça pratik ve etkili bir imaj oluşturma/edit programıdır. Yeniden boyutlandırma, döndürüp çevirme, kesip biçme, ışık ve renk ayarlarını değiştirme, özel efekt ekleme, saydamlık derecesini ayarlama ve gerektiğinde çok daha detaylı değişiklik/uyarlamaların yapabilmesine olanak sağlamaktadır. Ayrıca yine bilindiği üzere fotoğraf detaylarının değiştirilerek gerçek dışı sahneler yaratılabilmesi özelliği ile de meşhurdur. Örneğin fotoğrafta bulunan bir öğenin bulunduğu yerden ayrılarak farklı bir fon üzerine yerleştirilmesi ya da istenmeyen bir öğenin fotoğraftan kaldırılması mümkündür.

Görüntü7: Orijinal resim	Görüntü8: Öğe tek başına	Görüntü9: Öğe farklı fonda	Görüntü10: Yol kenarında çitler yok

Basit Bir Örnek:
Aşağıda, örnek bir konu üzerine, bir web sayfası şablonunun oluşumu yer almaktadır. Bu örneğe gözatarak katman ve klasör özelliklerinin avantajlarını görmek mümkün olacaktır.

Görüntü11: Örneğimizde kullanılmış olan görsel malzemeler

• Başlık ve Üst Bar:

Site adı aynı zamanda sayfa başlığı olacaktır. Bu durumda vurgulayıcı ve göze ilk çarpan noktada bulunmasına özen gösterilmelidir.

Örneğimizde Eras Bold ITC (italik) yazı stili kullanılmıştır. (Font seçiminde, tercihen kurumsal font, kişisel bir site ise tasarımcının seçeceği okunaklı bir font uygun olacaktır.) Tercihe göre başlık üzerinde efekt ya da desen kullanmak şık olabilir. Örneğimizde, trafik konusundan esinlenilerek, lastik izlerini çağrıştıran bir texture (desen) kullanılmıştır.

Görüntü12: Başlıkta desen kullanımı

Site adı, hem elde edilen başlıktaki renge uygun hem de asfaltı anımsatan, gri fon rengi seçilerek vurgulanmıştır. Asfalt çağrışımını belirginleştirmek adına yol şeritleri eklenmiştir.

Trafik işaretlerinin bu alanda kullanılmasının tercih edildiği görülmektedir. Bu nedenle işaretleri içeren resim edit edilerek, işaretler uygun şekilde sıralanarak, elde edilen yeni resim buraya yerleştirilmiştir. Yazı stilinin italik durumuna da uyum sağlayan, mevcut fon renginden birkaç ton açık bir fon rengi ile sağa yatık bir sınır belirlendiği ve bu alana uzanan fazla yol şeritlerinin silindiği gözlenmektedir.

• Menü ve Sol Bar:

Ana başlıklar için, trafik lambasının kullanımı ile, menü başlıklarının çağrışımları ilişkilendirilerek (kırmızı sarı ve yeşil ışıkların herbiri karşısına uygun başlık yazılarak) yaratıcı ve sade bir menü oluşturulmuştur.

Tamamlayıcı olarak üst barda kullanılmış olan fon rengi uyumlu bir eğimle eklenerek hem şık bir görünüm elde edilmiş hem de menüyü diğer öğelerden ayırmıştır.

Sol tarafta, altta kalan alan, haber, makale, faydalı linkler ve benzeri verilerin linklerinin yayınlanabileceği bölümlerle tamamlanmıştır.

• Görsel Geliştirmeler, Son Eklemeler:

Görsel zenginliği sağlamak amacı ile belirlenen alana uygun boyutlarda düzenlenerek ve istenmeyen kısımlar kırpılarak trafik fotoğrafı kullanılmıştır. (Bu alan değişken olabilecek ve zaman zaman reklam ya da uyarıların yayınlanabileceği bir alan olarak işlevini sürdürebilecektir.) Ayrıca hareket katmak amacıyla resme gölge efekti uygulanmıştır.

Son olarak, Ana sayfa, iletişim ve diğer ek linklerin yol şeridinin altında kalan alana yerleştirildiği görülmektedir. Sayfanın en altında kullanılan bir şerit, Copyright, iletişim ya da benzeri bilgileri sunmak amacı ile eklenmiştir.

Bu örnekte her bir öğe farklı bir katmanda ve her öğe grubu tercihe göre klasörlenmiş olduğundan, ortaya çıkan tasarım, tasarımcıyı tatmin etmediyse, renkleri, boyutları, imajları değiştirmek ya da sadece yerlerini değiştirerek farklı kombinasyonlar yaratmak mümkündür.

• Web İçin Uygun İmajlar Oluşturmak:

Tasarımın web ortamına uyarlanması aşamasında, php, asp ya da html formatındaki dosyanın hazırlanmasında imaj olarak kullanılacak öğeler belirlenmiştir. Bu kısımlar küçük parçalara ayrıldığında sayfa daha kolay ve daha hızlı yüklenecektir.

Burada örneğimize dönerek bu aşamadaki gelişmeyi görsel olarak izleyebiliriz. Dilimleme aracı (Slice Tool) ile dilimlenecek imaj seçildikten sonra, paylaştır (divide slice) komutu seçilmiş ve istenen parça sayısı belirtilmiştir.

Bu işlemin ardından, parçalar düşük disk alanı kaplayacak ve dolayısıyla çok daha hızlı yüklenecek şekilde Save For Web (web için kaydet) komutu ile kaydedilmiştir.

Bu andan itibaren sayfanın tasarım aşaması sona ermiş, uygulama aşamasına hazır durumdadır.

<<diğer makaleler

© 2005 Tüm hakları saklıdır. Bu sitede yer alan bilgiler Sonar Ar-Ge Yazılım ve Elektronik Mühendislik Ltd. Şti.’ne aittir. İzinsiz olarak ve kaynak gösterilmeden kullanılması yasaktır.

Sitede yer alan bilgiler ve içerik haber vermeksizin değiştirilebilir.