Photoshop Magazin
 


Slices / Arayüzler Oluşturmak

01 March 2006 | Sayı: Mar 2006
 
1 2 3 4 5
 

Slices / Arayüzler Oluşturmak


Merhaba değerli okurlar. Bu sayımızda özellikle interaktif uygulamalarında sıkça karşımıza çıkan arayüz uygulamalarının tasarlanması ve buton sistemlerinin çalıştırılması konularında uygulamalar yapacağız.

hspace=0Arayüzler aslında yapılan işlerde, kodların, animasyonların veya ürün tanıtımlarının hep ilk oluşumlarıdır. Benzetmek doğru olursa bir dergi veya kitap kapağı  sayesinde okuyucusuna ulaşmakta etkin bir rol oynamaktadır. Tabi bu arayüzleri oluştururken dikkat edilmesi gereken bir kaç husus vardır. En önemlilerinden bir tanesi kullanıcıların kolaylıkla bilgiye ulaşmasını sağlamak. Karmaşık dokulardan, biryerlere gizlenmiş butonlardan kaçmak ve kullanıcıların ihtiyaçlarını karşılayabilecek sade ve etkileyici tasarımlar gerçekleştirmek. Bu arayüzleri oluşturmanın en iyi yoluda tabiki PHOTOSHOP kullanmaktır. 

Bu sayımızda işleyeceğimiz uygulamada bir “Cd Çalar” uygulaması yapıp üzerine yerleştirdiğimiz düğmelere tıklayarak etkileşim sağlamaya çalışacağız. Bu çalışmanın tasarım kısmını “PHOTOSHOP CS2” de gerçekleştirdikten sonra “İMAGEREADY CS2” programına aktarıyoruz.

Gelelim yukarıdaki örnek dokümanımızı ImageReady'de nasıl hazırladığımıza; Dokümanımıza Link vereceğimiz  alanları belirlemeye yardımcı olacak olan Slice ile rahat çalışmak için (View>Show Rulers ile cetvelimizi dokümanımız üzerinde  belirledikten sonra) ayıracağımız parçalarını tespit etmek için “Guide” ile ayrım yerlerini belirledik.

“Guide”, üst taraftaki 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 (Ruler) üzerine tıklayıp mouse'u basılı tutarak çekiyoruz. Böylece “Guide”nin -mavi- çizgilerini bulup imaj üzerinde istediğimiz gibi taşıyoruz. Guide bize imaj üzerinde ayırma yapacağımız  alanları belirlemede çok kolaylık sağlayacak.

Rehber çizgiler sayesinde yapmış olduğumuz çalışmamızı alanlara bölmüş olduk. Tabi bu bölme işleminin farklı bir yöntemi daha olan “Tool Box” kutusundan Slices (Dilimleme) aracı ile manuel kendi istediğimiz alanları belirliyebilirdik.

hspace=0 hspace=0

hspace=0

hspace=0Bu işlemi Guide’lar ile gerçekleştirmek bize daha düzenli alanlar oluşturmamıza vesile olmaktadır. Unutulmaması gereken önemli bir püf noktada oluşturduğumuz parçaların çok küçük olmamasına dikkat etmemiz gerektiği. Oluşturduğumuz rehber çizgilerini dilemler haline getirmenin zamanı geldi. Üst menüden ‘Slices/create Slices Form Guide’ seçeneğine tıklayarak aktif olarak çizmiş olduğumuz tüm alanlar otomatik olarak dilimlere ayrılacak yani Slices’lar ile bölümleyecektir. Oluşan her parçanın sol üst köşesinde ise bir rakam belirecektir.

Bu projemizde ImageReady'in Slice ve Rollover pencerelerini  birlikte kullanarak uygulamamızı yapacağız. Slice penceresinde, “Slice select Tool” ile link vereceğimiz alanı belirledikten sonra bu pencerenin link özellikleri olan URL, Target, Message, alt bölümlerini  tercihimize göre dolduracağız.



“Web Content” penceresinde ise Slice penceresindeki link özelliklerine  göre mouse üzerine gelince imajın alacağı görüntüyü düzenleyeceğiz. Slice seçimlerinin hepsini,   “Rectangle İmage Map Tool” aracı ile gerçekleştirecegiz. Bu araç  bize oluşturmuş olduğumuz resim üzerinde yeni bölümler ve etkiler vermemize yardımcı olacak. 
 hspace=0hspace=0
Butonlardan başlamanın zamanı geldi. Link butonumuzu belirliyor ve üzerine    “Rectangle İmage Map Tool” aracımız ile yeni bir alan çiziyoruz. Belirlemiş olduğumuz alan butonun etki alanıdır. Etki alanını istediğimiz şekillerde çizmemizde mümkündür. (Kare, daire vs.)  Daha sonra “Web Content” penceresine gidelim ve mouse hareketleri için gerekli olan seçimimizi yapmak için alt tarafta bulunan ikonların en solunda bulunan simgeye “create Layer – based rolover” butonuna tıklıyoruz ve “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 hspace=0girdiğ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 “Butonlar” layerından bir tane kopyalamak olacaktır. Butonlar layerını seçip yeni layer simgesinin üzerine bıraktığımızda yeni bir layer yani “BUTONLAR COPY” layerını oluşturmuş bulunuyoruz.


hspace=0

Kopyasını oluşturduğumuz layer’ın rengini değiştirmeye geldi sıra. Üst menüden “İmage/Adjustment/Hue Saturation” menüsünü aktif yapıyoruz. Karşımıza çıkan diyalog penceresinde Hue değerleri objemizin renginin değişmesini, Saturation değerleri oluşan renk tonlarının matlık değerlerine, Lightness değerleri ise rengimizin ışık değerleriyle oynamamıza vesile olacaktır. Artık butonumuzu istediğimiz renk tonlarına rahatlıkla çevirebiliriz.

Böylece bir buton üzerine işlemimizi bitirmiş bulunuyoruz. Bu işlemi tekrarlayarak teker teker tüm butonların üzerine aynı sekilde uyguluyoruz. Böylece butonların renk degişimlerini bitirmiş oluyoruz.

Butonların üzerine gelindiğinde renkleri değişecek ve müzik setimizin sol üst köşesinde bulunan yuvarlak alanın içinde de buton hangi bölümü izah ediyorsa, o bölümle ilgili metinlerde bu dairenin içerisinde belirmesi gerekiyor. Daha önceden hazırlamış olduğumuz isim layerlarının gözleri kapalı durumda şu anda. “Web Content” panelimiz açıkken ve butonların “over ve down” etkilerini ayarlamışken yapılması gerekin bir şey daha kalıyor. “Down” satırında iken “ANASAYFA” yazı layerini aktif hale getiriyoruz. Son olarak CD çıkar butonunu oluşturmaya geldi. Yeni butonumuzun üzerine  “Rectangle image map tool” aracı ile alan belirliyoruz. “Web Content” penceresini aktif yapıp butonlarda kullandığımız “Over” ve “Down” satırlarını oluşturuyoruz. Farklılık olarak sadece bu sefer butonların renklerini değiştirmek yerine Layer panelinde yeni bir katman oluşturacak ve oluşan katmanımızın üzerine disc alanımızın genişliği kadar bir alan oluşturup siyah renk ile dolduracağız. Böylece cd çıkar butonuna basıldığında cd kapağımız açılmış gibi gözükecek.

Projemizi bitirmiş bulunuyoruz. Photoshop'ta hazırlamış olduğumuz arayüzümüzü IMAGE READY’de link verip marifetlerini arttırmış olduk. İşlemleri tekrarlayarak 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 dokümanınızın çok detaylı olarak bütün özelliklerini ve HTML kodlarını görebilirsiniz. Hepinize kolay gelsin.

hspace=0

 

March 2006

 


Image Ready