Rastgele Arkaplan Resmi Atama
Kısaca aşağıda yapacağımız küçük işlemi anlatmak istiyorum sizlere. Bu işlemde bir .php dosyasında yazılmış olan fonksiyon ile resimlerimizi bir dizin içindeyken (veya başka bir dizindeyken) kendi .css (style) dosyamız içine tanımlamış olduğumuz alan ile gösterime alıyoruz. Şimdi size gerekli olan şey Alistapart.com üzerindeki orjinal .php dosyası. Burada gördüğünüz kodları bir metin editör içine alıp “dongu.php” olarak kaydedin. Kayıt işlemini yaptıktan sonra resimlerinizin bulunduğu dizin içine atın.

Bu aşamadan sonra resimlerimizi göstereceğimiz alanın CSS tanımlamasını yapmamız gerekiyor. Bu tanımlama için şöyle bir kod yeterli olacaktır.

#dongualani
{
background:#fff url(dongu.php) no-repeat center top;
width: 800px;
height: 170px;
}

Gördüğünüz gibi stil dosyamızda “dongualani” diye bir id oluşturduk ve bu id üzerinde beyaz arkaplan rengi ve arkaplan resmi olarakta daha önce oluşturduğumuz “dongu.php” dosyasına ithafta bulunduk. Burada dikkat ettiyseniz arkaplan tanımlamasında bir resim dosyası kullanacağımıza bir .php dosyası kullandık ve .php dosyasının işlem yapmasını sağladık. Bu alanda bulunan resim genişlik ve yüksekliğinde siz değişiklikler yapabilirsiniz. Bu kodu kopyalayıp stil dosyanıza kaydediniz.

Stil dosyasını da kaydettikten sonra artık yapacağımız tek şey stil olarak tanımladığımız id sınıfına Xhtml üzerinde atıfta bulunmak. Bunu da aşağıdaki kod yardımıyla gerçekleştirebiliriz.

<div id=”dongualani”> </div>

Yukarıda yer alan kodu da rastgele arkaplan resmimizin görünmesini istediğimiz yere kopyalıyoruz. Bundan sonra dosyamızı kaydederek sonucu görebiliriz. Ben şurada bir örnek çalışma yaptım ve hem Firefox hem de Internet Explorer üzerinde test ettim. Sonuç gayet güzel…

Sorular ve Problemler
Şayet yukarıdaki işlemleri yaptınız ve sonuca ulaşamadıysanız adımları yeniden takip edin. Yukarıda bahsettiğimiz gibi dongu.php ve resim dosyalarınızın aynı dizinde olduğundan emin olun. Şayet resimleriniz ve dongu.php dosyanız farklı bir alandaysa dongu.php içinde $folder = ‘.’; alanına dizin yolunuzu yazın. Bununla birlikte #dongualani kodu içindeki dongu.php dosyasının tam yolunu yazmanız da uygulamanın çalışası için yeterli olacaktır. Ancak aynı dizin içinde dosyalarınız barınıyorsa bunu yapmanıza gerek yoktur.

Kaynaklar: A List Apart | Sonspring.com

KENDİ FIRÇALARIMIZI OLUŞTURALIM
Yazımızın giriş bölümünde belirttiğimiz gibi Fırçalar (Brushes) Photoshop uygulamalarında ve özellikte web tasarımında çokça kullandığımız araçlardır. Bizlerde kendi yapmış olduğumuz şekilleri ve simgeleri fırça haline getirerek sonraki uygulamalarımızda kullanabiliriz. Öncelikle kendi istediğiniz boyutta bir Photoshop dokümanı açın ve sevdiğiniz bir şekli yeni bir layer (katman) üzerinde çizin. Ben aşağıda örnek olması bakımından şu şekli çizdim.

Şimdi çizmiş olduğumuz bu şekli en küçük boyuta getirin. Çiziminizi bir kareye sığabilecek şekilde kesin. Bu iş için Crop aracını kullanabilirsiniz. Çiziminizi kestikten sonra yukarı menüden Edit >> Define Brush bölümünü seçiyoruz. Burada karşımıza gelen küçük pencerede fırça numaramız yazıyor ve bu alanda fırçamıza kendi ismini verebiliyoruz. Bu şekilde kayıt yaptıktan sonra boş bir doküman üzerinde yeni katman oluşturup B tuşuna basarak fırçalara girip kendi oluşturduğumuz fırçayı seçebiliriz. Gördüğünüz üzere kendi fırçalarımızı yapmak gayet kolay. Tek yapmamız gereken şey kendimize özgü ve nerede kullanılacağını bileceğimiz fırçalar yaparak işlerimizi daha da kolaylaştırmak.

ŞİMDİ DE KENDİ DOLGUMUZU OLUŞTURALIM
Photoshop’ta sıkça dolgu aracını kullanıyoruz. Kullandığımız dolguların karakterleri Web 2.0 ile büyük bir değişiklik geçirdi. Eskiden dolgulara verilen önem daha azken şimdi kullanılan değişik dolgu birimleriyle bu konuda da büyük bir adım atıldığını görüyoruz. Web 2.0 konseptli tasarımlara bakarsanız farklı dolgu modellerinin farklı alanlarda kullanıldığını görebilirsiniz. Yazımızın bu bölümünde ise kısaca kendi dolgularımızı nasıl yapacağımızı göreceğiz. Bu iş için bir dolgu modeli belirleyelim ve onu uygulamaya geçelim.

Photoshop’ta birçok dolgu yöntemi vardır. Aslına bakılırsa böyle bir ayrıma gitmek tasarım ufku açısından yanlıştır ancak konuyu daha iyi anlatabilmek ve daha iyi kavrayabilmek için böyle bir ayrıma gitmede bir sakınca görmüyorum.

Dolgu yaparken ilk örneğimizde küçük bir doküman açarak “renk bazlı” bir dolgu yöntemi uygulayacağız. Photoshop’ta 12*12px boyutlarında beyaz arkaplana sahip bir doküman açın. Bu dokümanı en yüksek oranda büyütün. (%1600) Şimdi bu alanda Shift+B tuşuna basarak Pencil Brush aracını seçin. Bu araca 2px değer verin ve renk alanında A8A8A8 rengini ayarlayın. 12 piksellik dokümanımızın ilk 2 pixelini bu dolgu ile doldurun. Daha sonra renk alanında C0C0C0 renk dolgusunu seçin ve kaldığınız noktadan başlayarak yeniden alanı doldurun. Bu şekilde sıralı bir biçimde doküman sonuna kadar ilerleyin. İşleminiz bittikten sonra yine fırçalarda olduğu gibi Edit menüsünden Edit >> Define Pattern alanına gelin. Burada dolgunuza isim vererek dolguyu kullanabilirsiniz. İsterseniz dolgunuzun vermiş olduğu efekti vermek için 400*400px bir boş doküman açın ister yeni bir katman oluşturarak ister oluşturmadan G tuşuna basın. Dolgu aracından Pattern dolguları seçerek kendi yapmış olduğunuz dolguyla çalışmanızı doldurun. Dolgunuzun nasıl göründüğü ortada. Bu işlem gayet kolay ve yapması da fazla çaba gerektirmeyen bir uygulamadır.

Şimdi bir başka dolgu modeline geçelim. Bu dolgu modelinde daha çok resimlerle uğraşacağız. Resim kullanırak yapılan dolgularda dikkat edilmesi gereken nokta ise; dolgunun uygulandığı yüzeyde sürekli tekrarlayacağı için kullanılan ögelerin doğru yerleşimine özen göstermemiz gerektiği. Ancak bu durum her zaman geçerli değil, çünkü sadece tekrarlı çalışmalar yapmayacağız. Dilerseniz kısaca bu yöntemden de bahsedelim.

Şimdi Photoshop’ta 100*100px ve beyaz arkaplana sahip bir doküman açalım. Bu doküman üzerinde bir dolgu oluşturmak için ben Shape alanından bir şekli tercih ettim. Siz de kendi belirlediğiniz küçük bir şekil veya resmi doküman üzerinde kullanabilirsiniz. Resim ögemizi seçtikten sonra bu ögeyi sayfa üzerine belli aralıklarla diziyoruz. Burada sizi yönlendirmek istemiyorum çünkü bu sizin dolgunuz olacak. Ben aşağıda gördüğünüz şekilde dolgumu yaptım ve bunu Edit >> Define Pattern alanından MyPattern adını vererek kaydettim. Dolgumu yaparken dolgunun kendini tekrarlayacağını düşünerek yerleşimi dokümanın ortasına göre yaptım ve daha sonra bunu dolgu olarak başka bir alanda deneyerek sonucu gördüm.

Sadece bu yöntemle sizlerde kendinize farklı dolgu örnekleri hazırlayabilirsiniz. Yukarıda az çok belirtmeye çalıştığım gibi resim bazlı ve farklı dolgu modelleri sayfamızın görünümüne daha fazla renk katacaktır. Özellikle kararlı ve tasarımın gidişini olumlu yönde etkileyecek dolgular Web 2.0 konseptine çok uygun tasarım klişeleri arasında sayılmaktadır.

Umarım bu kısa makale sizlere kendi dolgu ve fırçalarızı hazırlamak için yararlı olur.

Bu işe başlamadan önce aynı boyutta 2 adet farklı resminiz olması gerekiyor. Ben küçük boyutlarda 2 adet resmi bu iş için tasarladım ve jpg formatında kaydettim. Bu resimleri bir klasöre attıktan sonra Adobe (daha doğrusu hala bizdeki formatıyla Macromedia) Dreamweaver’ı açıyoruz. Yeni bir HTML dosya açtıktan sonra yapacağımız işlem gayet kolay. Dreamweaver’ın yukarıda yer alan ana menüsünden Common bölümünde Image alanına geliyoruz, bu alanda yer alan Rollover Image bölümüne tıklıyoruz. Açılan pencerede bizden iki adet resim belirlememiz istenecektir. Bu alanda hemen birinci (üst) alana önce görünecek olan resmimizi belirtiyoruz. Ben iki resmimi klasör içine koydum ve resim1.jpg ve resim2.jpg olarak isimler verdim. Dolayısıyla hemen resim1.jpg dosyamı seçiyorum. Aşağıda yer alan bölümde ise resim2.jpg dosyamı seçereki açılan pencereye OK diyerek kapatıyorum. Artık rollover image efektim hazır. Hemen çalışmamızı kaydederek sonucu görebilir veya kısayol F12′ye basarak bir tarayıcı penceresinde sonucu görebiliriz.

Kaydettiğiniz sayfada rollover efektinin gayet güzel işlediğini göreceksiniz. Bu işlemi yapan bir dizi Js kodunu Dreamweaver sitenizin kaynak kodlarına (HEAD alanına) ekliyor. Daha sonra BODY etiketinde eklemiş olduğunuz resimler onload parametresi yardımıyla öncelikli olarak yükleniyor. Resim değişim özelliğinin görünmesi içinse a etiketinin onmouseover ve onmouseout parametreleri kullanılarak Javascript kodlarına atıfta bulunuluyor ve resim değişim efektimiz gösteriliyor. Bu özellikte resmin hem link olarak bağlanması hem de istenilen yerde kullanılabilmesi büyük bir avantaj. Böylelikle biraz Photoshop ve biraz da Dreamweaver bilgisi ile kendi istediğimiz tarzda Navigasyon menüler yapabilir ve bunları sitemizde kullanabiliriz. Ancak yazımızın başlarında belirttiğim gibi resimlerin aynı boyutta olması gerekli. Bununla birlikte yaptığımız çalışmanın geçerli bir uygulama olması için img etiketine alt=”" kodunun kesinlikle eklenmesi gerekiyor. Dreamweaver’da yeni bir HTML doküman açarken dosya tipininde Xhtml olmasına dikkat ediniz. Bu sayede programın ürettiği kodlar Xhtml ile uyumlu kodlar olacaktır.

Örnek çalışmam için lütfen buraya tıklayınız…