Web için tasarım yapmak

Photoshop'la süper bir site tasarladınız ve bunu çalışan bir web sitesine dönüşürmek istiyorsunuz. Bu durumda hemen dreamweaver'ı açmadan önce sayfamızı düzgünce dilimleyip minik imagelara dönüştürmemiz ve daha sonrada bu imageları web için kaydetmemiz gerekmektedir iyide bunları nasıl yapacağız yada bunlar ne demek dediğinizi duyar gibiyim ayrıca ne gerek var diyenleride duyar gibiyim şöyle jpeg olarak kaydeder sonrada yayınlarım o zaman sayfanızın açılması çok uzun sürer ayrıca web sayfanızdaki tüm yazılarda birer resim dosyasına dönüşeceğinden arama motorları tarafından okunamazlar yani siteniz asla google'da birinci sayfada yada ikinci sayfada hatta 10. sayfada bile listelenmez yada daha sonra sitenizi daha sonradan güncelemek isterseniz bunu yapmak oldukça zahmetli olacaktır.

Şimdi tüm bunları bildiğimize göre web tasarımlarımızı dilimleyip uygun bir biçimde nasıl kaydedebiliriz bir bakalım.

Resolution: 72
Color Mode:RGB

Öncelikle tasarıma başlamadan önce dikkat etmemiz gereken bir kaç ufak ayrıntıdan bahsedeceğim photoshop'ta döküman açarken açtığımız dökümanın 72 dpi ve RGB olması gerekmekte eğer 72 dpi'dan daha yüksek boyutta olursa sayfamız açılırken resimlerimizin yüklenmesi uzun süreceğinden sayfa açılma süresi gerektiğinden daha uzun sürer o zaman neden 72 yapıyoruz daha düşük yapalım diye düşünmeyin çünkü ekranların dpiları 72 daha yüksek yaparsak amaçsız olur daha düşük yaparsak kalitesiz gözükür bu nedenle 71 yada 73 değil 72 dpi yapmalıyız. Renk formatımızıda RGB olarak seçmeliyiz yine ekranların renk formatı RGB olduğundan. Dikkat etmemiz gereken bir diğer ayrıntıda sayfamısın boyutu en çok kullanılan en küçük ekran boyutunu baz almalıyız oda 1024'e 768 bu durumda açmamız gereken dökümanın boyutu bu YANLIŞ 

1024'e 769 bir ekranımızın tamamı oysa tarayıcıların Explorer, safari, firefox vb siteyi tam ekran göstermezler adres çubuğu, kaydırma çubuğu kendi menuleride ekranımıda yer kaplar yani bize kalan boyut hiç bir zaman 1024'e 768 olmaz benim genelde tercih ettiğim ekran boyutu 950 ye 700 olur sayfanın uzunluğunun fazla olması genelde sorun yaratmazken eninde bir taşma olması pek hoş gözükmez

Sayfa yana uzadığında alt bölümde kaydırma çubuğu çıkar

Son olarak psd dökümanımızı isimlendiriken kesinlikle türkçe karakter kullanmayalım çünkü dilimlediğimizde küçük imagelarımızın isimleri dökümanımızınadı_01.jpeg  gibi isimlendirilir ve bu isim tamamen yanlıştır doğrusunun dokumanadi_01.jpeg olası gerekmektedir. 

Not: Türkçe karakterler ş,ğ,ü,ç,ö,ı,İ  

Evet sonunda dökümanımızı açtık şimdi tasarımızı yapabiliriz tasarımı yaparken kullanılılık kurallarına, renk uyumlarına dikkat etmeliyiz.

Bütün bu konulara dikkat ederek tasarımımızı hazırladıktan sonra şimdi sıra geldi bu tasarımı dilimlemeye 

Photoshopt kullanıp da web tasarımla uğraşmayan kullanıcıların nerdeyse hiç kullanmadıkları bir araç vardır esasında web tasarımı yaparken hayat kurtarıcı bir araçtır. Bu kahraman aracımızın adı slice tool yani dilimleme aracı 

Peki nasıl kullanıcağız bu aracı dikdörtgen bir seçim aracını nasıl kullanıyorsak öyle sadece dörtgen alanlar seçebileceğimizi unutmamalıyız slicelamak istediğimiz bölümleri seçeceğiz ve o bölümlerde mavi çizgiler çıkacak 

Slicelanmış alanlar resimde görüldüğü gibi mavi ince çizgilerle belirtilir sol üst kısımlarında ise slice numaraları yer almaktdır. Dreamweaver'da görsel hiç bir öğe oluşturamayacağımız için (en ufak bir degrade geçiş bile) düz renk alanları ve yazılar haricinde her şeyi mutlaka dilimlemek zorundayız. Dilimleme işlemi sırasında dikkat etmemiz gerekenler yanyana dizilecek olan sliceların boylarının eşit olması, alt alta dizilecek slicelarında genişliklerinin eşit olmasıdır.

Sliceların arasında boşluk kalmaması gereken yerler olduğu gibi özellikle seçmediğimiz alanlarda bulunabilir. Bu alanlar genelde düz renklerin bulunduğu alanlar ki bu alanları sadece dreamweaver'da arka plan renklerini belirleyerek oluşturabiliriz. Ancak yanyana dizmek istediğimiz bir kaç slice arasında boşluk olup olmadığını anlamanın en kolay yolu sayıları kontrol etmektir. Eğer sayılar 1, 2 , 3 ,  5 gibi gidiyorsa ve bu görseller ardarda dizilmesi gereken menu alanı gibi bir alansa arada çok küçükte olasa bir alanı atladığımız anlamına gelir bu durumda 3 ve 5. sliceların arasına zoom yaparsak gri bir 4. slice buluruz. Slice tool ile eskiden çizilmiş bir slice'ı seçemeyiz ancak tool bardan slice tool un üzerine uzun süre basılı tutarsak slice select tool çıkar ve seçmek istediğimiz slicelanmış bir alanda slice select tool ile br yere tıklayıp slice'ı seçili hale getirebiliriz. 3. veya 5. slice'ı diğer slice'a doğru ittirdiğimizde iki slice birbirine yapışır ve aradaki 4. slice kaybolur daha doğrusu 5. slice'ın adı 4. slice olur ve sorun ortadan kaldırılır. 

Slicelanmış bir dökümanı indirmek için tıklayınız.

Sliceladığımız dökümanı web'e uygun bir biçimde kaydetmek en az slicelama işlemi kadar önemlidir. 

Bu işlem sırasında yapmanız gerekenleri bir sonraki yazımda anlatacağım.