Photoshop Magazin
 


Image ready cs2 ve web sitesi üzerine

01 November 2005 | Sayı: Nov 2005
 
1 2 3 4 5
 

Image  ready cs2 ve web sitesi üzerine


Günümüzde iyi hazırlanmış web sitelerinde görsellikten çok işlevsellik ön plandadır. Çünkü web sitesinden beklenen fayda, ürünün veya fikrin satılması ya da  kurumsal imajın iyileştirilmesidir” diyen bir çok meslektaşım olsa da ben bu görüşe katılmayanların yanında durmak isterim.

“Sadece iyi olduğunuz için bir fikri, ürünü ya da hizmeti satamazsınız. Web sitenizin amacı ne olursa olsun, mutlaka ilgi çeken ve amacınıza hizmet eden bir yapıda olmalıdır”

Oysa ki pek çok web sitesi, ziyaret edildiğinde firmanın adres veya telefonunu alıp, ulaşma ihtiyacı güdünüzü sonlandırırsınız. Yani ihtiyacınız web sitesi ile karşılanmama olur.  Bunun sebebi site görselinin gözünüze güzel gelmemesidir.

Oysa ki, iyi bir web sitesi firmanın pazarlama ve satış giderlerini düşürmeli ve verimliliğini yükseltmelidir. Bu da ekran başındaki ziyaretcinin karar verme ve   satın alma talebinin karşılanması ile mümkündür. Bunun en önemli unsurlarından  biri ilk buluşmada karşıya vermiş olduğunuz ilk izlenimdir. Bu izlenim ne kadar iyi olursa, sizin akılda kalma ve hatırlanma süreciniz de o kadar uzun soluklu olur.  Bu amaç doğrultusunda PHOTOSHOP ve IMAGE READY programların yogun olarak kullanılma sebebi görseliteyi  yüksek tutmak ve “ilk görüşte aşk” unsurunu hayata geçirmek olmalıdır.

İster işlevsel, ister görseli güçlü bir site yapmaya karar verelim. Hangisinin seçersek seçelim bir siteye başlamadan önce  Site Haritasını (Buton ve Link sentezini) çıkarmak ve ardında da site taslaklarımızı basitte olsa bir kağıda karalamak gerekmektedir. Basit gözüken bu iki unsur aslında sitemizi bitirinceye kadar bize yol gösterecektir.

Dilerseniz görseli tamamlanmış bir örnek site şablonu ile devam hspace=0edelim.

Görselimiz tamamlandıktan sonra yapılması gereken site şablonu içerisinde  hangi kısmın “Banner” ile hangi kısmın “Navigation Bar” (buton takımının) hangi bölümün “Değişten” olacağına karar vermektir.

Şimdi site şablonumuzun belirlemiş olduğumuz alanlara göre önce View/Rulers menüsünden sayfa cetvellerimizi aktif hale getiriyoruz. Daha sonra yatay ve dikey cetvellerin üzerine gelerek çalışmamızı rehber çizgiler (GUIDE) sürükleyerek bölümlere ayırıyoruz. Bu bölünme  işeminde mümkün olduğu kadar belirlenmiş alanları,  banner, Buton ve değişken tam bölmeye çalışıyoruz. Amacımız öncelikle çalışmamızı slice bölmek olacaktır.





hspace=0








 

hspace=0hspace=0hspace=0
[“Guide”, resimde görünen mavi çizgilerdir.  Bu çizgileri bulup, oluşturmak için imaj penceresinin üst ve  sağ tarafından yada yandaki resimde görünen cetvel (Rule) üzerine  tıklayıp mouse’u basılı tutarak çekiyoruz. Böylece “Guide” nin -mavi- çizgilerini bulup imaj üzerinde istediğimiz gibi  taşıyoruz. ]

Üst menüden Slices/create Slices From Guides bölümüne tıklayarak sayfada bulunan bütün rehber çiizgileri bıçak aracı gibi kullanıp, çalışmamızı “Slices”lara (dilimlere) bölmüş oluyoruz.

Artık herşey hazır. Şimdi yapmış olduğumuz çalışmamızı “İnternet Explorer” veya “Safari” gibi internet görüntüleyici programlarda görmenin zamanı geldi..

Tool menüsünden “Preview in Safari” butonuna tıklıyoruz.

Gerçekleştirmiş olduğumuz tasarımı dilimlere parçalayarak “Html kod” sisteminde internet ortamında görüntülemiş olduk.  Şimdi çalışmamızda bulunan buton takımı kısmını tek başına ele alarak linklerini ayarlıyalım. Bu bölüme Arayuz02.psd diyoruz.  

Buton Takımı Oluşturmak

hspace=0hspace=0

Arayuz02.psd olarak kayıt ettiğimiz dökümanımızın  Slice ile ayıracağımız parçalarını tespit etmek için “Guide” ile bölümlerini belirledik.

Daha  sonra da Tool Box dan Slice Tool (Dilimleme)   aracını seçip, Guide ile ayırdığımız bölümler  arasında imajı dilimleyeceğimiz alanları seçtik.

Çalışma dosyamıza dikkat ederseniz, “Ana Sayfa”  yazısı üzerinde mavi zeminli 09 slices numralı alan denk geldiğini görebilirsiniz.

Bunun  anlamı, “Şu anda 09 nolu dilimdesiniz” demek. Bu  arada “Slice Menüsü”ne dikkat ederseniz, otomatik olarak “NAME” kısmında Arayuz02_09  ismini verdiğini görebilirsiniz. “URL” kısmına ise: “anasayfa.html”  yazısı butona basılınca gidilecek olan URL yi  gösteriyor.

hspace=0hspace=0

hspace=0hspace=0

“TARGET” kısmında linkimizin farklı bir pencerede açılmasını istiyoruz ve “_blank”i işaretliyoruz.  “ALT” bölümü ise mouse ile butonun üzerine geldiğimizde ve hiç bir işlem yapmadığımızda bize nerede olduğunumuzu bildiren bir bölüm. Bu bölümede yine “Anasayfa” yazıyoruz.  Menünün en altında bulunan “STATUS BAR MESSAGE” ise İnternet penceresinin status barında butonunuzun ismimin yazıp yazmamasını ayarlayabildiğininz bir kısım bulunuyor.

Evet şimdi sıra butonun üzerine gelindiğinde etkileşimi anlaya bilmemiz için renk değişimine geldi. Öncelikle Window penceresinden “WEB CONTENT” penceresinin sonrada “LAYER” penceresini ekrana açıyoruz.

Az önce slices penceresinde dilimlediğimiz ve isim verdiğimiz arayuz02_09 isimli image “WEB CONTENT” panelinden buluyor ve seçili hale getiriyoruz.  Ardından “create ROLLOVER STATE”   butonunna tıklayarak Arayuz02_09 layerinın altında “ROLLOVER STATES” bölümünü aktif kılıyoruz. Bu bölümle birlikte  “OVER” yeni bir layerda otomatik oluştuğu anlaşılıyor.  “OVER” üzerinde anlamında  yani mouse ile butonun üzerine girdiğimizde önermesini bize gösteriyor.  Tekrar “create ROLLOVER STATE” butonuna tıklayarak “OVER” layerının altında yeni bir layer yani “DOWN “ layerını oluşturuyoruz. “DOWN” önermesi bize tıklanıldığında ifadesini bildiriyor.

Yapmayı düşündüğümüz actions mouse ile üzerine gelindiğinde sabit, tıklandığında ise rengi degişen bir buton oluşturmak.  “DOWN” satırını seçili hale getirdikten sonra layer panelinde bulunan  “BACKROUND”  layerın dan bir tane kopyalamak olacaktır. BACKROUND layerını seçip yeni layer  simgesinin üzerine bıraktığımda yeni bir layer yani “BACKROUND COPY” layerını oluşturmuş bulunuyoruz.

Şimdi BACROUND COPY layerının “IMAGE / ADJUSTMENT / HUE SATURATION” bölümünden rengini değiştiriyoruz.

Yapılacak etki artık çok basit. “OVER” bölümündeyken “BACKROUND COPY’ layerinin gözünü kapalı  “DOWN” bölümünde ise tam tersi “BACKROUND COPY” layerinin gözünün açık hale getiriyoruz.

Böylece işlemlerimizi  bitirmiş bulunuyoruz, Photoshop da hazırlamış olduğumuz sitemizin  Navigasyon Barını (buton takımını) IMAGE READY’de link verip marifetlerini arttırmış olduk.

İşlemleri tekrarlıyarak diğer butonların linklerini de tamamlayabilir ve bütün yaptımız işlemleri test etmek ve Browser da görmek için Araç Çubuğundaki Browser  ikonuna tıklamanız yeterli. Açılan browser penceresinde dökümanınızı  çok detaylı olarak bütün özelliklerini ve HTML kodlarını görebilirsiniz.

Gelecek sayımızda kaldığımız yerden devam edeceğiz. Hoşçakalın.

hspace=0


 

 

November 2005

 


Image Ready