Ben Photoshop programını web sayfalarının arayüzlerini hazırlamak için kullanıyorum. Önceleri pek fazla ölçülere bağlı kalmıyordum, göz kararı yerleşim yapıyordum çoğu zaman. Bir çalışmada tasarımı belli ölçülerde hazırlamam gerekiyordu ve kurcalarken birazdan anlatacağım yöntemi buldum.

Bu yazıyı yazıyorum ama okurken “bunlamı uğraşıyosun sen ya” gibi şeyler söyleyen arkadaşlar olacaktır sanırım :) ama sonuçta bu benim çok önceleri deneme yamulma yöntemiyle bulduğum bir şey. Neyse ben yazmaya devam ediyorum, sizde okuduktan sonra yorumlarınızı iletirseniz sevinirim.

Photoshop programında çizdiğimiz şekilleri boyutlandırırken CTRL + T tuş kombinasyonu ile Free Transform moduna geçeriz ve istediğimiz ölçülerde çizdiğimiz şekli boyutlandırırız. Fakat programı ilk çalıştırdımığızda Free Transform moduna geçince en üstteki seçeneklerin bulunduğu alanda Genişlik (W) ve Yükseklik (H) değerleri % cinsinden tanımlanmıştır.

Bu alanlara Free Transform modundayken sadece px yazıp ESC tuşuna basarsak photoshop programını kapatana kadar o alanlarda ölçüler px olarak görünecektir. ESC tuşuna bastıktan sonra tekrar CTRL + T tuş kombinasyonuna basarsanız ölçülerin px cinsinden olduklarını göreceksiniz.

İsterseniz bu alanlara diğer ölçü birimlerinide yazarak kullanabilirsiniz. Örneğin; cm, mm gibi.

Bu işlem için benim kullandığım yöntem bu, belkide çok daha kolay bir yolu vardır. Eğer daha farklı veya daha kolay bir yöntem biliyorsanız bunları yorum kısmında bizlerle paylaşırsanız sevinirim.

IzzyMenu sitesinde ajax teknolojisinin nimetlerinden faydalanarak kolayca css menüleri hazırlayabilirsiniz. Ardından yarattığınız menülerinizi bilgisayarınıza css, html, js ve image dosyaları ile birlikte ziplenmiş olarak indirebiliyorsunuz.

Site içerisinde mevcut menü şablonlarından seçim yapabilir ve bu şablonlar üzerinde istediğiniz şekilde düzenleme yapabilir yada üye kaydınızı yaptıktan sonra kendi menülerinizi sıfırdan yaratabilirsiniz.

Sitede dikkatimi çeken bir diğer konuda; hazırlanan menünüzün tüm tarayıcılarda düzgün şekilde görüntülenebilmesi için css hack yöntemininde kullanılması ve hazırlanan dosyaların size bu şekilde sunulması.

Css ile menü hazırlamak konusunda oldukça pratik bir kaynak olan bu siteyi mutlaka ziyaret etmelisiniz.

Css ile menü hazırlamaya başka bir alternatif ise Css Menu Builder sitesi. Burada menüler yapılarına göre 3 ana grupta toplanmış; Horizontal (yatay), Vertical (dikey), Breadcrumb (ekmek kırıntısı).

Css Menu Builder`da menünüzü hazırlarken izzymenu`deki gibi bir çok ayara müdahele edebiliyor ve aynı zamanda menünün css, html kodlarını ve image dosyasınıda görebiliyor ve kodlara müdahele edebiliyorsunuz. Son olarak iki sitede hazırladığınız menünüzü tüm dosyaları ile birlikte ziplenmiş bir paket halinde indirebiliyorsunuz.

Geçen gün şu sitede gözüme çarpan bir menüdende bahsetmek istiyorum size. Mac kullanıcılarının alışık olduğu, windows kullanıcılarınında Stardock`un burdaki ücretsiz aracı ile bilgisayarlarında kullandıkları menünün web sitelerinde kullanılabilecek bir şeklini css ve jquery kullanarak hazırlamışlar. Menüyü test etmek için burayı, yüzünüzdeki şaşkınlığı gidermek içinde burayı tıklayın. Menüyü bilgisayarınıza indirmek istersenizde burayı tıklayın.

Konumuz css menüler olduğuna göre birde ufak bir Photoshop tutorial`den bahsetmek istiyorum size. Web 2.0 diye tabir edilen bu tasarım trendine uygun hoş menüleri kendinizde hazırlamak isterseniz diye.

Yukarıda gördüğünüz menünün hazırlanışı bu adreste adım adım anlatılmış. Örnekten faydalanarak ortaya güzel çalışmalar çıkartabileceğinizi düşünüyorum.