Tasarladığımız web sayfaları ve sitelerinde çoğunlukla resim değişim efektleri (image rollover) kullanırız. Bu efekti gerek Javascript yardımıyla gerekse de Xhtml ve Css bileşimiyle rahatlıkla web sayfalarımızda uygulayabiliriz. Bahsettiğimiz özellikte fare ile resmimizin üzerine gelindiğinde yine aynı boyutta başka bir resim ile resmimizin yer değiştirdiğini görürürüz. Bu yazımızda sizlere kısaca bu işi Adobe Dreamweaver ile nasıl yapacağımızı anlatacağız. Böylelikle çok kolay ve zahmetsiz bir biçimde sayfalarımıza image rollover efekti ekleyebileceğiz. Ayrıca bu teknik ile yapmış olduğumuz işlemde geçerli (valid) bir kod elde etmiş olacağız.

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…

Başlığın çok karışık olduğunun farkındayım. Bu yazımda sizlere anlatmak istediğim şey birçok blog sitemizin kullandığı küçük soluk resimlerin fare ile üzerine gelince asıl rengini alması ve bağlantı alanı olarak kullanılması. (Örnek olarak, Sesebian ve Fikirbozan‘ın sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdığm bu makalede hem geçerli (valid) bir kod yazımı ve kolaylıkla sitemize uygulayacağımız bir örnek yapacağız. Aslına bakarsanız bu işi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanından geçemiyor. Bu yüzden hali hazırda DynamicDrive.com üzerinde kullanılan şuradaki scripti geçerli bir hale getirdim. Localde yaptığım denemelerde scriptin hem çalıştığını hem de Geçerlilik Testinden geçtiğini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamıza geçelim.

Öncelikle bu uygulamayı bir blog sitesinde kullanacaksanız header.php dosyanızı açın ve aşağıdaki kodları girin. Şayet bunu html/css bazlı bir sitede kullanacaksanız head etiketinin bitiminden önce aşağıdaki kodu yazın.

<script type=”text/javascript”>
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>

Bu kodu yazdıktan sonra resim bağlantılarımızı göstermek istediğimiz alana ise aşağıdaki kodu yazıyoruz. (Blog sitelerinde sidebar.php dosyası içine bu kodu yerleştirebilirsiniz)

• <div class=”baglantikutusu”>
  <a href=”whatever.html”><img src=”resminiz.gif” style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onmouseover=”makevisible(this,0)” onmouseout=”makevisible(this,1)” alt=”" /></a>
  </div>

Böylelikle ilgili alandaki resimleriniz soluk bir şekilde görünecek ve verdiğiniz link özelliği nedeniyle fare ile üzerine gelince asıl rengini alacak. Bu işlemi yaparken ben bağlantıyı bir div sınıfı içine aldım. Bu sınıfı siz kendinize göre de değiştirebilirsiniz. (div sınıfı içine almadığınız linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (bağlantı vereceğiniz resimlerin) aynı ebatta olması bu uygulamanın daha kolay ve daha güzel olmasını sağlar. (Tıpkı verdiğim örneklerdeki gibi)

Böylece istediğiniz kadar bağlantıyı belli bir alanda gösterebilir ve ziyaretçilerinize farklı bir görünüm sunabilirsiniz. Umarım faydalı olmuştur… (Şayet bu uygulamayı bir blog üzerinde uygulayan arkadaşlar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)

Çok önceleri web tasarımına merak saldığımızda Html kodlarıyla uğraşmaktansa Hazır Site Şablonları aramayı tercih ederdik. Bu özlemimizi birçok sitede giderir, bulduğumuz hazır şablonları kendimize uyarlayarak sitelerimizi hayata geçirirdik. Eminim birçok kişi benim gibi yapmıştır. Yoksa bu denli Şablon sitelerine rağbet olmazdı. Ancak herşey gibi Web’de gelişiyor. Web 2.0 modasını yaşadığımız şu günlerde artık “valid” şablon ihtiyacı hisseder olduk. Çünkü annemizin Html’siyle yapılan şablonlar artık “demode” olmaya başladı. Web 2.0 akımının kendini iyice hissettirdiği günümüz internetinde artık moda: “Css ve Xhtml Şablonlar”.

Bu yazımda sizlere ücretsiz Css ve Xhtml uyumlu sayfa şablonları barındıran siteleri listeleyeceğim. Sözü fazla uzatmadan listemize geçelim.

1) Open Source Web Design

Birçok geliştirci tarafından ücretsiz şablonların bulunduğu sitede 2000′den fazla tasarım bulabiliyorsunuz. Fazlaca şablon bulunması, şablonların kolay indirilebilmesi artı özelliklerinden.

2) Open Web Design

2000 üzerinde tasarım bulunan sitede özellikle şablon aramalarındaki iyileştirme göze çarpıyor.

3) Open Designs

Open Designs sade ve yeşil ağırlıklı tasarımıyla dikkat çekiyor. Sitede 600′e yakın tasarım bulmak mümkün.

4) Open Source Templates

Şablonlara oy verebildiğiniz hoş bir site. Genel görünümü itibariyle biraz CssRemix’i andırsa da yine de içeriği bakımından çok çok ziyaret edilen bir alan.

5) Six Shooter Media

Six Shooter Media bünyesinde oluşturulmuş olan az sayıdaki tasarımı kullanma imkanınız var. Sınırlı sayıda şablon olmasına rağmen tasarımlar görülmeye değer.

6) Free-Css-Templates

Birçok Wordpress temasının altyapısını oluşturan şablonları sitede görmek mümkün. Tasarımlar sitede Yeni Tasarımlar ve 2006 tasarımları olarak iki ana alana ayrılmış.

7) Free Css Templates

Farklı renk ve görünümlerde 216 şablonu sitede bulabilirsiniz. Alternatif birçok tasarımı görmekte mümkün.

8) Andreas Viklund

Wordpress temalarıyla tanıdığımız Andreas Viklund’un hazırlamış olduğu şablonlara yine sitesinden ulaşabiliyorsunuz. Az sayıdaki profesyonelce hazırlanmış çalışma gerçekten görülmeye değer.

9) CssFill

CssFill sitesi Michael Strand’ın yapmış olduğu Css ve Xhtml şablonları barındırıyor. Ayrıca sitede şablonlar farklı kategorilere ayrılarak ziyaretçilere sunulmuş.

10) Template World

Template World tarafından yapılmış olan ücretsiz tasarımlar farklı görünümler ve daha profesyonel şablonlar arayanlar için birebir.

11) Arcsin

Yine Wordpress temalarıyla tanıdığımız başka bir geliştirici kaynağı.

12) Solucija

Hemen hemen tüm template sitelerinde tasarımlarını görebileceğiniz bu sitede birbirinden güzel Css ve Xhtml tasarımlar da mevcut. Özellikle portal ve ticaret siteleri için şablonlar görülmeye değer.

13) i-use

İtalyan Mediando Communications’un geliştirmiş olduğu ve kullanıma sunduğu Css ve Xhtml şablonları.

14) Styleshout

Ücretli tasarımlarda sunan Styleshout sitesi aynı zamanda ücretsiz Css ve Xhtml şablonlarına da yer veriyor. Site kaliteli ve profesyonel tasarımlar barındırıyor.

15) Get Css Templates

Site sınırlı sayıda şablona yer veriyor ancak ileriki zamanlarda daha fazlasını bulabileceğimiz söyleniyor. Tasarımları ise görülmeye değer.

16) Free Css Templates

Birbirinden güzel ve kaliteli şablonlar bulabileceğiniz bu site sloganı ve içeriğiyle olduça iddialı görünüyor. Tasarımlarına göz atmakta fayda var.

17) RamblingSoul

Ramblingsoul.com kaliteli Css ve Xhtml şablonlarına yer veren bir site. Tasarımlarına kesinlikle göz atmanızı tavsiye ediyorum.

Digg‘de gezintilerimden birini yaparken bir gönderiye rastladım. Photoshopla klasör yapımını anlatan hoş bir makale ilgimi çekti. Aşağıda okuyacağınız yöntemle, kolay ve yapması fazla uzun sürmeyen bir biçimde kendi klasörlerimizi oluşturabiliriz. Lafı fazla uzatmadan hemen uygulamamıza geçelim. (Bu uygulama için Photoshop versiyonunuz önemli değil, ben 7 versiyonda bu uygulamayı yapabiliyorum)

ADIM 1
Öncelikle 400*400 px boyutunda RGB özellikli ve 72 resulation’a sahip bir doküman açın. Daha sonra aşağıdaki şekle benzer bir şekli Tool bölümünden Polygonal Lasso Tool (L) ile çizin. Shift tuşuna basılı tutarak düz çizgiler elde edebilirsiniz. Dilerseniz Photoshop’ta View >> Show >> Grid diyerek çalışma alanınızı karelere bölebilir bu sayede çiziminizi daha kolay yapabilirsiniz.


ADIM 2
Çizdiğimiz katmana (layer) şu özellikleri uygulayalım. (Adım 1′de çizmiş olduğunuz layer üzerine iki kere tıklayarak katman özelliklerini açın ve aşağıda yer alan özellikleri vererek çalışmanızın son halini elde edin.)

Gradient Overlay bölümünde renk geçişleri #FFd27A -> #FFB912 arasında olacak.

Stroke alanında ise Size: 1px - Position: Outside - Renk: #C07C33

Inner Glow bölümünde Blend Mode: Normal - Renk: #FFFFFF - Choke: 100% ve Size: 1px şeklinde ayarlayın. Bu aşamadan sonra aşağıdakine benzer bir görünüm elde etmiş olmalısınız. (Bu katmanı, katman 1 olarak adlandırın)

ADIM 3
Bu adımda ise mevcut katmanımızı Ctrl+J tuş fonksiyonuyla kopyalıyoruz. Kopyalanan katman üzerinde Ctrl+T tuş kombinasyonunu kullanarak eğip bükme işlemlerini yapacağız. Lütfen aşağıdaki şekle benzer biçimde değişiklikleri yeni layerınıza uygulayın. Yeni katmanın önce üst köşelerinden yana doğru bir miktar çekiyoruz. Daha sonra üst orta bölümden bir miktarda boyunu kısaltıyoruz. Şekilde yaptığımız işlemleri görebilirsiniz. (Bu katmanı, katman 2 olarak adlandırın)

ADIM 4
Bu adımda ise klasörümüzün içinde bir belge varmış izlenimi vermek için yeni bir katman oluşturacağız. Bu katmanda klasörlerimizden daha küçük bir dörtgen çizerek işe başlıyoruz. Bu dörtgeni dilerseniz Marquee Tool (M) ile dilerseniz de Rectangle Tool (U) ile çizebilirsiniz. Katman renginin beyaz olmasına (#ffffff) dikkat ediniz. (Bu katmanımızın adı da katman 3 olsun)

Çizimimizi yaptıktan sonra katmanımıza aşağıdaki özellikleri uyguluyoruz.

Gradient Overlay bölümünde Opacity: 10% renk geçişleri #000000 -> #FFFFFF - Angle: 50°

Stroke alanında ise Size: 1px - Position: Outside - Renk: #D6D6D6

Bu özellikleri verdikten sonra aşağıdakine benzer bir şekil elde etmiş olacaksınız.

ADIM 5
Klasörümüzü ve içinde görünecek olan belgeyi oluşturduktan sonra artık son rötuşlara geliyoruz. Bu bölümde son çizmiş olduğumuz beyaz dörtgen katmanı seçiliyken Ctrl+T tuş kombinasyounnu kullanıyoruz ve dörtgenimizi (shift tuşuna aynı anda basarak) biraz yukarı kaldırıyoruz. Böylelikle belge görünümü sanki klasörün içine girmiş gibi olacak. Daha sonra Katman 2′yi seçiyoruz ve burada katman özelliklerinden Opacity (görünüm) değerini %70′e getiriyoruz. Böylelikle bu katmanımız biraz daha şeffaf bir hale gelmiş olacak ve içindeki belgemiz daha görünür hale gelecek.

Katman 3′ün katman 2′nin altında olduğuna dikkat ediniz. Aksi durumda katmanlarımız arasında görünüş farkı olacaktır. Layer penceresinde hangi katmanın hangisinin altında veya üstünde kalmasını istiyorsanız fare yardımıyla o katmanı bir sonrakinin üzerine sürükleyebilirsiniz. (Bu da başka bir Photoshop ipucu oldu)

Çalışmamız burda noktalanıyor, dilerseniz farklı renklerde klasörler oluşturabilir, Katman 3′ü kendinize göre tasarlayabilirsiniz. Şayet bu şekilde bırakacaksanız Katman 3′ün üst köşesine aşağıdaki gibi bir katlanma efekti verebilirsiniz. Sadece Katman 3′ün sağ üst köşesini kesip koyu bir renge boyayıp yapıştırmanız yeterli olacaktır.

Merhabalar, uzun süredir t-infection.com’a teknik detaylı yazılar yazamıyorum. Bu eksikliğimi lütfen mazur görün, sene sonunun gelmesi ve final sınavlarının vermiş olduğu stres ile t’infection.com’la fazla ilgilenemedim. Ancak sınav döneminin bitmesine bir hafta kala aklımda olan ve unutmadan yazmayı planladığım bu yazı ile karşınızdayım. Umarım sizler için faydalı olur.

Wordpress’te hepimizin vakti zamanında çokça sorular sorduğu, üzerinde uzun süre düşündüğü “Tema Türkçeleştirme” konusundan bahsetmek istiyorum. Tema Türkçeleştirme aslında sanıldığı kadar zor bir işlem değildir. Herbirimiz şu anda mevcut İngilizce bilgimizle Tema Çevirisi yapabilir ve Türkçe Wordpress Temalarının çoğalması adına bir katkıda bulunabiliriz. Tabi her işte olduğu gibi bu işte de dikkat edilmesi gereken bazı hususlar var. Ben sizlere kısaca bu hususlardan ve nasıl bir temanın çevirisini yaptığımdan (biraz teknik detaya inerek) bahsedeceğim.

Öncelikle Wordpress Temasını çevirmek için elimizde iyi bir Metin Editörü olması gerekiyor. Bu ihtiyacımızın neden olduğu sorusuna gelince, Wordpress’te temalar her zaman ANSI koduyla kodlanarak gelir. Bu kod standardı Türkçemizdeki karakter birimlerini karşılamadığından dolayı bir metin editörü vasıtasıyla bu kodun UTF-8 yapılması gereklidir. UTF-8 birimiyle kodlanan temalarda da bazı problemler olmasına karşın Türkçe kelimeleri ve harfleri kullanabiliriz.

Birkaç Faydalı Program isimli yazımda bahsettiğim üzere ben bu tarz çeviri işlemleri için her zaman Notepad++‘ı kullanırım. Bu editörü uzun süredir kullanmam hasebiyle üzerinde çok hakim olduğum bir metin editörüdür. Notepad++ sayesinde yukarıda bahsettiğim kodlama olayını bir çırpıda halledebilirsiniz. Programı indirmek ve son sürümlerini kontrol etmek için lütfen buraya tıklayınız. (Tabi değişik alternatifleri olan bir program, özellikle Burhan kardeşimin şuradaki tavsiyesi de görülmeye değer.) Şayet bu işi halletmek için bir editör program kurmak istemiyorsanız Dreamweaver serisi programlar ile de bu bahsettiğim kodlama işlemini halledebilirsiniz. Tanıdığım birçok kişi tema çevirilerini Dreamweaver ile yapıyorlar ancak ben daha hiç Dreamweaver ile tema çevirisi denemedim. Bildiğim yoldan gitmek ve sonuca kısa zamanda ulaşmak hoşuma gidiyor sanırım. :)

Konuyu dağıtmadan devam edelim. Notepad++ programımızı başarıyla kurduktan sonra herhangi bir Wordpress Temasını bu dosya ile açalım. Öncelik olması ve sonucu çabuk görmemiz açısından ben fSpring temasını ve bu temanın index.php dosyasını tercih ettim. Index.php dosyasını programda açtıktan sonra hiçbir çeviri yapmadan yukarıdaki menüden DÜZENLE >> UTF-8′de KODLA seçeneğini tıklıyoruz. Böylelikle bahsettiğim kodlama işlemi hallolmuş oluyor. Artık tema çevirimizi yaparken rahatlıkla Türkçe karakterleri kullanabiliriz. Hemen aynı index.php dosyasının 16. satırında yer alan “Read more” yazısını silerek “Devam veya yazının devamını okuyun” şeklinde bir çevirme yapıyoruz. Bunu yaptıktan sonra hemen dosyayı kaydedip şayet bilgisayarınızda kurulu bir sunucu varsa hemen denemesini yapabilirsiniz. Yoksa da kendi hostunuza bu dosyayı atarak değişikliği görebilirsiniz.

Gördüğünüz üzere tema çevirisi yapmak bu kadar kolay. Yazımın başında bahsettiğim gibi fazla detaylı olmayan bir İngilizce bilgisiyle sevdiğiniz bir temayı kolaylıkla çevirebilir ve bunu sitenizde yayınlayabilirsiniz. Bu sayede temanızın istediğiniz bölümlerine kendi istediğiniz kodları da ekleyebilir ve Türkçe karakter kullanma sıkıntısı olmadan sayfalarınızda dilediğiniz kadar alan oluşturabilirsiniz.

ÇEVİRİ YAPTIM AMA TEMAM BOZULDU!
Evet sıklıkla karşılaşacağınız sinir bozucu durumlardan birisi de budur. Temanın bir yerini düzelttiğiniz ve önizleme aldığınız zaman temanın yapısının bozulmuş olduğunu görürsünüz. Bunun birçok sebebi olabilir ancak karşılaşabileceğiniz en büyük sebep o temanın Utf-8 karakter kodlamasında oluşabilecek bir problem veya yaptığınız çevirinin uzunluğu olabilir. Birçok tema çevirisinde ortada hiçbir sebep yokken sadece karakter kodlaması ile tema yapılarının bozulabildiğini gördüm. Bu durumun üstesinden gelebilmek için mevzu bahis temaların karakter kodlamasıyla hiç oynamadan ASCII karakter kodlarını kullanarak Türkçe karakterleri eklemeniz bir çözüm yolu olabilir. Yani Türkçemizde çok kullanılan, Ç, İ, Ş, Ü, Ö, Ğ gibi karakterlerin Ascii kodlarını bularak temanıza ekleyebilirsiniz. Bu yol çok zahmetli ve emek isteyen bir yoldur. Çünkü kullanmak istediğiniz her Türkçe karakterde bu kodu yazarak sayfanıza eklemek zorundasınız.

Bahsettiğim karakter durumları nedeniyle her zaman temanızın bir sayfasının çevirisini bitirdikten sonra tarayıcınızda kontrol edin. Size şunu önerebilirim ki her zaman çevirilerinizi “İNTERNET EXPLORER İLE KONTROL EDİN”. Unutmayın ki hala internette büyük bir çoğunluk İE kullanıyor ve bu çoğunluk sitenizi ziyaret eden çoğunluğa doğru orantılı oluyor. Birde ikinci bir sebep olarak Firefox tarayıcının hiçbir problem çıkarmadan Türkçeleştirdiğiniz temaları göstermesi ve yaptığnız şeyin dosdoğru sonucunu vermesidir. Firefox tarayıcıyı sevmemin nedenlerinden birisi de bu sanırım. Yapılan işin sonucunu doğru ve zamanında size vermesi. İnternet Explorer’da ise W3C uyum sorunları ve tema yapısının bozulması gibi durumlara da şimdiden hazırlıklı olmanızı tavsiye ediyorum.

Bu durumun da önüne geçebilmek için kendi bilgisayarınızda WampServer, PhpTriad, EasyPHP gibi local sunucular kurarak Php ve Mysql ortamını (gerek Windows gerekse de Linux türevi bilgisayarlar üzerinde) bilgisayarınızda çalıştırabilmenizdir. Böylelikle tema çevirisi sırasında yaşanacak sorunları dosyaları hostunuza atmadan görebilirsiniz.

ÇEVİRİMİ YAPTIM, ŞİMDİ BU TEMAYA FARKLI BİR İSİM VEREBİLİR MİYİM?
Elbette yaptığınız tema çevirisine farklı bir isim verebilirsiniz. Bunu yapmak için öncelikle temanızın bulunduğu klasör ismini değiştirin. Daha sonra temanızın style.css dosyasını açarak kodlama başlamadan en üstte yer alan tema ismi ve geliştirici isimleri gibi alanları değiştirin. Bu alanlardaki değişiklik Wordpress Yönetim panelinde Görünüm sekmesinde temanın tanımlayıcı bilgilerini size gösterecektir. Dilerseniz ve şayet varsa tema klasörünüzdeki screenshot.png isimli resim dosyasını (bu dosya temanızın önizleme resmini gösterir ve temanızı Görünüm alanında tanımanıza yardımcı olur) kendi istediğiniz resimle değiştirebilirsiniz. Bunu yapabilmek için aynı isimli ve aynı boyutlu (600*450px) bir resmi tema klasörünüze koymanız yeterli olacaktır.

Çevirisini yaptığım temalarda her zaman tema adının sonuna “-tr” uzantısı koyuyorum. Tema isimlerini böyle vererek insanların bu temanın Türkçe olduğunu anlayabileceğini düşünüyorum.

TEMANIN COPYRIGHT BİLGİLERİ?
Temaların genellikle footer.php içinde yer alan geliştirici ve kodlayıcı bilgilerini silmek kişilerin vicdanına kalmış bir durumdur. Bu durum için benim bir yargıya varmam doğru olmaz, ancak yapmış olduğum tema çevirilerini gördüyseniz, her zaman geliştirici ismini ve sayfasını olduğu gibi bırakır sonuna kendi sitemin ismini ve linkini yazarım. Bu hiyerarşiye uymak her zaman hoşuma gider. Çünkü temayı yapan kişi zaten büyük bir emek sonucu o temayı ortaya çıkarıyor ve gelişmesini izlemek için internet üzerinde kendi isminin ve temasının geçtiği yerleri görmek istiyor. Bu hakka saygı duymak adına ben tema geliştiricilerinin adını ve copyright bilgilerini hiçbir zaman silmem. Fakat siz bu konuda istediğiniz gibi davranabilirsiniz. Şayet yaptığınız site kişisel ve ticari olmayan bir siteyse bu tarz copyright bilgilerinin çok önemli olmadığını düşünüyorum.

TEMANIN BAZI BÖLÜMLERİNİ DEĞİŞTİRSEM?
Şayet yapmak istediğiniz şey Wordpress Türkiye topraklarına Türkçe bir tema katmak ise temanın Türkçeleştirme dışında hiçbiryerinde değişikliğe gitmeyin. Bu sayede insanlar o temanın Türkçesini kullanmanın zevkine varsınlar. Ancak bu temayı kendiniz için geliştiriyor ve kendi sitenizde kullanıp dağıtımını yapmayacaksanız o zaman temanın gerek index, style, page, footer dosyaları gerekse de resim dosyaları üzerinde istediğiniz değişikliği yapabilirsiniz. Bu temalarının çoğunun GPL lisansıyla dağıtıldığını ve ticari olmayan her türlü değişime açık olduğunu belirtmemde fayda var.

Umarım sizler için yararlı bir makale olmuştur. Her ne kadar soru cevap şeklinde bir sunum gibi de olsa düşündüklerimi ve yapmak istediğim şeyi yazmak adına beni mutlu etti. Bir başka yazıda görüşmek dileğiyle…

Malumunuz, Photoshop ile birçok şeyi yapabiliyoruz. Bu “birçok şey” içinde Photoshop’un kullanımının yaygın olduğu en büyük alanlardan birisi de web tasarımı. Web ikonlar, web şablonları, web bannerları gibi birçok uygulamayı rahatlıkla photoshop üzerinde yapabiliyoruz. Hemen hemen tüm tasarım projelerimin başlangıcında öncelikle Photoshop ile çalışıyorum. Bunu yapmamın nedeni sitenin genel arayüzünü Photoshop ile tasarlayarak webe aktarmak. Bu yazımda sizlere Photoshopta yaptığımız bir çalışmanın nasıl web şablonu olarak kaydedileceğinden ve bununla ilgili tekniklerden bahsedeceğim.

Öncelikle Photoshop üzerinde uygulamamızı yapacağımız bir çalışmamızın olması gerekiyor. Ben aşağıda gördüğünüz çalışmayı yaptım ve bunu örnek olarak kullandım. Sizde buna benzer bir çalışmayı basit işlemlerle oluşturabilirsiniz. Çalışmanın uzun uzadıya nasıl yapıldığını anlatmayacağım. Bunu biraz da sizlere bırakıyorum. Çünkü asıl anlatmak istediğim nokta Photoshop ile oluşturulan böyle bir sayfanın nasıl “kesileceği” ve “webe aktarılacağı”. (Zaten ileride Photoshop ile bir web arayüzü tasarlamakla ilgili bir makale yazmayı düşünüyorum)

Çalışmamızı Photoshop üzerinde açıyoruz ve bundan sonra yavaş yavaş kesme işlemine başlayacağız. Bu kesme işleminden kastımız oluşturduğumuz PSD dosyasını Photoshop’un Slice aracını kullanarak belli parçalara ayırmak bu parçalara isim vermek ve bu işlemi yaptıktan sonra “web için kaydetmek”. Benim yapmış olduğum çalışmada izlediğim mantık yazı alanları için büyük parçalar kesmek ve her link içinse ayrı ayrı kesim alanları oluşturmak.

Şimdi bunu nasıl yaptığımıza sıra geldi. Çalışmamızı açtıktan sonra Photoshop’ta Araçlar menüsünden Slice Tool’u seçiyoruz. (K) Bıçak şeklindeki ikonumuzla çalışmamızı kesmek istediğimiz yerlerden kesmeye başlıyoruz. Bunu yaparken mümkün olduğunca mantıklı bölümleme yapıyoruz. Çünkü daha sonra bu çalışma webe aktarıldığında bu alanlar üzerinde değişiklikler yapacağız. Aşağıda yaptığım kesme alanlarına ufak notlar ekledim bu alandan yararlanarak nasıl bir kesim yaptığımı görebilirsiniz.

Gördüğünüz gibi ileride kullanacağım alanlarda kesim işlemlerimi uyguladım ve kesim alanlarımı tamamladım. Kestiğim noktaların herbirine Photoshop otomatik olarak numaralar veriyorlar. Shift+K tuş kombinasyonunu kullanarak kestiğim alanların üzerine 2 kere tıklayarak kestiğim alanlara kendi istediğim isimleri verebilirim. Şimdi çalışmam bu haldeyken File >> Save for Web veya Alt+Shift+Ctrl+S tuş kombinasyonunu kullanarak çalışmayı web için kaydediyoruz.

Açılan pencerede uyguladığımız kesme işlemini detaylı olarak görebiliyoruz. Bu haldeyken Save diyerek açılan pencerede istersek yeni bir klasör açıyoruz istersekte bilgisayarımızda belli bir alana çalışmamızı isim vererek kaydediyoruz. Ben yaptığım çalışmada index.html ismini vererek bir klasör içine çalışmamı kaydettim. Bu kayıt işlemi bittikten sonra isim verdiğiniz dosya .html uzantılı bir dosya olacak ve aynı dizinde bir images klasörüne rastlaycaksınız. Bu dosyayı tarayıcınızda açtığınızda oluşturmuş olduğunuz PSD dosyasının web biçiminde kaydedildiğini göreceksiniz. Webe aktarma işlemi bittikten sonra dosyamız üzerinde değişkilikler yaparak sayfamızı değiştirebiliriz.

DEĞİŞİK TEKNİKLER
Yukarıda anlattığım kesme işlemi yerine yine Photoshop’un kesme işlemini kullanarak web sayfalarımızı farklı şekilde Photoshop yardımıyla oluşturabiliriz. Örneğin yaptığımız PSD dosyasını yine aynı biçimde Slice aracıyla kesebilir ve kestiğimiz alanları tek tek resim olarak kaydedip bu resimleri daha sonra Dreamweaver gibi görsel editörlerde kullanabiliriz.

Bununla birlikte sürekli yaptığım bir teknikte yaptığım çalışmayı yine aynı biçimde keserek Photoshop açıkken Xhtml ve Css kodlarıyla sayfa kodlamamı yapıp resimleri kullanmamdır. Photoshop’taki çalışmama bağlı kalarak kodlamayı bu şekilde yaparım ve referans aldığım sayfaya en yakın tasarımı yapmaya uğraşırım.

Bunun gibi değişik teknikler kullanılarak Photoshop’ta web uygulamalarımızı rahatlıkla yapabiliriz. Umarım faydalı olabilmişimdir.

Birkaç forum sitesinde ve çokça da Wordpress.org forumlarında kullanıcıların sürekli “Cssremix benzeri Wordpress temalarını” nasıl oluşturabileceklerine dair sorular görüyordum. Aslına bakılırsa çokta ilgimi çekmiyordu çünkü benim herhangi bir galeri görünümlü Wordpress temasıyla veya bu yöndeki bir blog temasıyla işim olmuyordu. Ancak son hazırladığım projede haliyle böyle bir temaya ihtiyaç duydum. (Bu projenin detaylarından ilerideki günlerde bahsedeceğim) Böylelikle aramaya koyuldum. Bu tarz bir temanın nasıl oluşturulabileceği ve yayınlanacağı ilgimi çekmeye başladı birden. Bir forum yazısında kullanıcının basit bir iki Css kodu yazdığını ve işlemi böyle yapabileceğini söylediğini gördüğümde kafamın üstünde “lambalar” yanmaya başladı. Tabi ya! Css ve Xhtml ile bu iş halledilebilir. Çünkü zaten Loop özelliği temada hali hazırda devrede olan birşey. Onun haricinde fazladan bir döngü oluşturmaya gerek yok! Bu işi local bilgisayarda denedim ve çokta zahmetli bir süreç geçirmeden istediğime ulaştım. Bilginin paylaştıkça çoğaldığını düşünen bir insan olarak teknik detayları ve kod açıklamalarıyla birlikte şimdi biraz yaptığımız işi anlatalım.
Gönderinin Devamını Okuyun…