Photoshop şablonlarınızı CSS tasarıma dönüştürün

Web siteniz için Photoshop' ta bir şablon oluşturdunuz. Bunu CSS Tasarıma dönüştürmek istiyorsunuz. 30 saniyede bunu yapabilirsiniz. Evet yanlış duymadınız. Photoshop'un yan programı olan Imageready kullanarak bunu yapmanız mümkün.

Tekrar merhaba arkadaşlar, uzun bir süreden sonra ses getirecek bir ders ile karşınızdayım.

Bu derste webmaster arkadaşların çok işine yarayacak, zamandan tasarruf edecekleri harika bir yöntemi anlatacağım.

Günümüz web tasarım programlama dillerinde bildiğiniz gibi artık CSS moda, HTML ile tablolar ise demode olmuş durumda. Magazin programcılarının deyimiyle "CSS IN, HTML OUT" :)

Öncelikle "Neden CSS ?" sorusuna yanıt vererek kafanızdaki bazı soru işaretlerini kaldıralım. Standart olarak web tasarım şablonları HTML' de tablolarla oluşturulurdu ve halen oluşturmaya devam edenlerde mevcut. Hatta abartılarak iç içe tabloları defalarca kullandığımız zamanlar da olmuştur mutlaka. Bunun sonucunda gereksiz kodlar ile birlikte HTML sayfamız kabarıp şişer ve yüksek boyutlara gelirdi. Bu dönemlerde CSS sadece font rengi, font büyüklükleri gibi basit işler için kullanılırdı.

Günümüz şartlarında WEB 2.0 teknolojisi ile birlikte CSS Tasarımlar çoğumuzun dikkatini çekmiştir. Artık CSS basit şeyler için değil, tüm tasarım için kullanılmaya başlandı. Bu sayede daha hafif şablonlar oluşturarak hem sayfaların hızlı açılmasını sağlar hem de sitenin band genişliğinden tasarruf edersiniz. Blog sitelerine (Örnek: Wordpress) göz atacak olursanız CSS kullanılmamış bir siteye göre hız farkını hissedeceksiniz.

Daha fazla uzatmadan konuya giriyorum. Web siteniz için Photoshop' ta bir şablon oluşturdunuz. Bunu CSS Tasarıma dönüştürmek istiyorsunuz. 30 saniyede bunu yapabilirsiniz. Evet yanlış duymadınız. Photoshop'un yan programı olan Imageready kullanarak bunu yapmanız mümkün. Şimdi nasıl oluyor adım adım izleyin ve sizde uygulamaya başlayın.


1- Dosyanızı Photoshop ile açın






2- "File" menüsünden "Edit with Imageready" tıklayın






3- "Slice" özelliğini kullanarak şablonu dilimleyin. (Kabaca anlatacak olursak; şablonu istediğiniz parçalara ayırın. Örneğin header (üst bölge), ana bölge ve footer (alt bölge))






4- Şablonu parçalara böldüğünüzde şekilde görüldüğü gibi mavi kareli numaralar belirecektir






5- "File" menüsünden "Output Setting" altından "Slices" diyoruz






6- Çıkan pencereden "Generate CSS" seçili hale getiriyoruz ve başka bir işlem yapmadan "OK" diyoruz






7- "File" menüsü altından "Save Optimized As" diyerek gelen pencereden "HTML and Images" seçeneğini seçerek dosyaları istediğimiz bir yere kaydediyoruz.






8- Kaydedilen HTML dosyasını çalıştırıp kaynak kodlarını görüntülediğimizde bütün işlemlerin "<table>" ile değil <div id=...."> şeklinde halledildiğini farkedeceksiniz.







Umarım bu ders bir nebzede olsa web tasarımı yaparken zamanınızı hızlandırmaya yararlı olacaktır.

Herkese başarılar dilerim.
  • Etiketler;
Abdullah Tekin
PHP, Ajax ve JQuery'e son derece hakim bir programcı olarak bazı firma ve kuruluşlara aşağıdaki konular dahilinde freelance olarak hizmet veriyor: - Daima web standartlarını, SEO (Arama Motoru Optimizasyonu) ve güvenlik önlemlerini içeren projeler gerçekleştirmek, - Tasarımı yapılmış web sitelerini kusursuz bir şekilde web'e uyarlamak, - Özgün ve kodları kendisi tarafından yazılabilen PHP+Jquery+Ajax destekli modüller hazırlamak - Web stratejileri oluşturulması, - Web dahilinde sistemler kurmak, - Kontrol panelleri hazırlamak, - Hızlı, kullanılabilir, erişilir ve güvenliği üst düzeyde olabilecek web siteleri alt yapısını oluşturmak. İçerik Yönetim Sistemi (CMS), Haber Sistemi, E-Ticaret ve Okul Yönetim projelerini içine alan PHP konusundaki birikimlerini burada Sanalkurs.net üyelerine aktarıyor ve aynı zamanda Sanalkurs'un yazılım altyapısını şu an en üst düzeye taşımak için gece gündüz kodlarla boğuşuyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Çok güzel bir konuya temas etmişsin kardeşim, sağol.
müthiş bir ders çok teşekkürler,işimizi gerçekten kolaylaştıracak....
gerçekten güzel bi konuymuş emeğinize sağlık.:kirp:
güsel konu gerçekten. bunu CSS de kendi başıma hazırlamak bir ölümdü benim için. Bu verdiğin çok iyi oldu. çok teşekkürler. :kirp:
üstadım mükemmel bişey bu yahuu:hayret:
templatelerde böyle oluyor genelde...bilgilerinizin için teşekkürler...
Bu kadar gerekli bir derse değindiğin için gerçekten çok teşekkür ederim...
Herkese merhaba. Ben bu işlemi yaptım ancak oluşturduğum hml adresine tıklayınca şablonumu göremiyorum. Resimler kırık gözüküyor. Daha doğrusu resimler hiç gözükmüyor. Nerede yanlış yapıyorum anlamadım. Adımları aynen uyguladım. Yardımcı olursanız çok sevinirim. Şimdiden teşekkür ederim. Saygılar
:agla: output option seçenkelerinde generate css diye birşey yok aceba neden? BEnim en çok bilemme gerekn konu bu css ye dönüştürme acil bir cvp lütfen....
oley yaptım çok sağolun En çok aradığım konuydu bu ellerinize sağlık Allah razı olsun :D:D:D
Mükemmel bişeymiş bunlar CSS'e yeni geçtim, photoshop'a da.... Harika bunlar'da & bu sitede... bea! Tebrikler & Teşekkürler
Geçengün Photoshop da Tasarımım vardı nasıl Div lere böleceğimi web sitesi Formatına getireceğimi düşünmüştüm. Uğraştım ama Kabataslak Resim olarak kaydettim. Öğrendimki olay buymuş Teşekkürler. Baya faydalı bir dersti.
bu herhalde photoshop cs2 için deil daha yüksekler için keşke bunları söleseydiniz tam süper olurdu...
Tühhh bee fotoshop 8 sanırım bu bende 7 var
çok uzun zamandır öğrenmek istediğim bi konu hocam ellerinize sağlıkk bravoo
Bunu yıllar önce düşünmüştüm aslında demek ki çözümü varmış. Biraz boru reklamındaki Necati ye benzedi ama (ya bunu biz bacanakla düşünmüştük :D ) Yalnız css nin de dezavantaşları yok değil çünkü her browser kafasına göre yorumluyor.Bu yüzden tasarım yaparken ince detaylara benim gibi çok takılmamnızı öneririm.
harika ne zamandir boyle birsey ariyordum.elinize beyninize ve klavye ile mousenize saglik
bu kodu header yerlesmiyorki vbulletinde karde s
eyvallah cok güsel bi ders olmuş
Hocam süpersin bea...:gul:
çok teşekkür ederim :gul:
emegin ve paylasimin icin cok tesekkürler.....:gul:
cs3 de olmuyor sanırım :(
cs3 de output settings nerde acaba..
Merhaba, bu alıntı+ tr çeviri icin tesekkurler. Arkadaşlar bu ders adobe cs2 icin gecerlidir (daha alt surumleri bende olmadıgı icin onceki versiyonlar ile ilgili acıklama yapamayacagım) Ust versiyonlarda baktıgım kadarıyla output options yok ve diger menulerdede slice out put seceneklerinde css opsiyonu goremedim. Bulan arkadas varsa burda yazarsa cok iyi olur.
Ders güzel fakat kulanış açısndan sakıncalı css cıktısı absolite, top , left vs gibi özellikleri kullanmış bu bize farklı çözünürlüklerde farklı sorunlar yaratır. Yani tüm browser ve çözünürlüklere hitab edemezsiniz
yha cs4 te bu özellik yok acaba biLen var mı nerde nasıl çalışıyor
çok sağ ol dostum.........
böyle bişeyin olduğunu yeni gördüm harika bişey çok çok teşekkür ederim
Abicim Allah razı olsun.Çok güzel bir şey bu, öğrendiğimiz çok iyi oldu. Ama, PS CS5 te yapamadım dediklerini sanırım menüler değişik beceremedim.Bilen arkadaşlar yardımcı olurlarsa çok sevinirim. Teşekkür Ederim...
İbretlik paylaşım..

Yukarı Git