Bir PSD teması PSD’den HTML’ye nasıl çevrilir ?

Arkadaşlar bu işi parayla yapanlar çok, bende yapabilirdim ama ben size balığı vermek yerine öğretmeyi tercih ettim. Şimdi başlayalım eğer bu yazıma kadar geldiyseniz elinizde bir tema vardır 🙂 Temamızı Photohshop aracılığıyla açıyoruz. Gerekli düzenlemelerimizi yapıyoruz. Hakkımda, iletişim kısmı felan ve temamız muhtemelen ingilizce olacağından ingilizce kısımları Türkçe yapıyoruz. Burada biraz da Photoshop bilginiz olması lazım. Şimdi işlemimiz bitti ve link vereceğimiz resimleri Slice Tools ile ayırıyoruz. Resmi ayrıntılı görüntülemek için tıklamanız yeterli.

PSD mizi parçaladıktan sonra HTML işlemine geçeceğiz ve bunun için ilk önce .html dosyası ve image klasörü lazım. Onun içinde aşağıdaki resimdeki adımı uyguluyoruz.
Tıkladıktan sonra karşımıza aşağıdaki gibi bir pencere çıkacak ve resimler soluk görünüyor sağ üstten sol alta doğru imlece basarak çekiyoruz, nedenini bilmiyorum ama herhalde resimleri seçiyor. Ne olur ne olmaz yapın gitsin. Ardından Save diyoruz.
Bu işlemden sonra Photoshop bize 1 dosya ve 1 klasör verdi. Bunları bir HTML düzenleyicisinde düzenleyip resimlere link verip FTP’den bir hosta yüklüyoruz. Ben host olarak awardspace‘i html editörü olarak TinyMCE editörünü kullandım. Buradan sonrası sizin hayalgücünüze kalmış, mesela ben arkaplan ekleyip scrollbarları sildim bir de size parça parça verdiği resimlerden biriniz silip onun yerine feedburner widgeti koydum, dediğim gibi hayalgücü. Burada HTML bilgiside önemli  CSSde var tabi ki 🙂 Ben size sadece PSD temalarını nasıl HTML’ye çevirebileceğinizi anlattım. İşte benim yaptığım tema, bunu yeni domainim olacak olan furkanozden.com için kullanacağım. Yakından görmek için resme tıklamanız yeterli.
Bir PSD teması PSD’den HTML’ye nasıl çevrilir ?

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

11 Cevaplar

  1. Zafer dedi ki:

    güzel anlatım çok teşekkürler 🙂

  2. Çok teşekkür ederim, faydalı olacak bana.

  3. Ömer Faruk dedi ki:

    Güzel bir anlatım olmuş.Teşekkürler.

  4. Ogün Sakız dedi ki:

    Teşekürler Çok GÜzel Bir Paylaşim

  5. Can Atasever dedi ki:

    Anlatım güzele benziyor, yer imlerime ekledim vakit bulunca bakayım 🙂

  6. Kart10 dedi ki:

    Güzel fakat kod biliyorsanız bunlar biraz amatör kalır 🙂

  7. Furkan ÖZDEN dedi ki:

    Evet bunda resim ve link var sadece 🙂 Bir de feedburner widgeti 🙂

  8. Muhammed Ekşi dedi ki:

    İşime yaradı sağolasın 🙂

  9. Anonymous dedi ki:

    Ne zamandır böyle bir şey arıyordum. Kısa ve net teşekkürler 🙂

Bir Cevap Yazın

Bunlar da hoşunuza gidebilir...

%d blogcu bunu beğendi: