Yakın zamanda öğrendiğim psd tasarımını webde yayınlamayı sizlerede resimli anlatmak istedim.sonuçta nasıl bir dersi anlayıp arkadaşınıza anlatırken konu daha iyi kafanızda oturursa bende pekiştirmek için böyle bir işe girdim.bazı psd tasarımlarÖncelikle öylesine bir psd tasarımı hazırladım(berbat bişey biliyorum hatta tasarım sayılmaz neyse).

psd html çevirme
psd html çevirme

Tasarımımızın web ortamında yayınlanmasını sağlıycaz.Tasarımımız üzerinde dilimler oluşturarak tıklanabilir alanlar oluşturabiliriz.Resimdeki ana sayfa,hakkımızda… yazılara tıklanabilir alanlara dönüştürebiliriz.

psd html çevirme
psd html çevirme

* Dilim aracımızı seçerek öncelikle yazılar olmak üzere yazı,çizgi ve resimleri dilimlere ayırıyoruz.Dilimler oluşunca dilimlerin bazılarında yanında mavi bazılarının yanında gri simgeler oluşucak mavi olanlar bizim ayırdığımız dilimler gri olanlar ise photoshopun bizim dilimlerimizi daha iyi ayırmak ve göstermek için kendi oluşturduğu dilimlerdir.Resimleri dilimlerken parça parça dilimlemek web sitenizin açılışında kullanıcıya kolaylık sağlar çünkü resimler kullanıcının bilgisayarına daha hızlı şekilde yüklenir.

psd html çevirme
psd html çevirme

* Şimdi dilimlere linkleri verelim.dilim aracını açtığınız yerde “dilim aracı seçici”” aracını seçin.Aracı seçtikten sonra linki vermek istediğiniz dilime çift tıklayın.Karşınıza çıkan pencerede
1.Ad: yazan yere özel isim verebilirsiniz.
2.url:yazan yere linkin adresi
3.hedef: yazan yere _blank yazarsanız tıklayınca adres farklı tarayıcıda çıkar,_self yazarsanız aynı pencere içinde adres açılır._blank resimlerde daha çok tercih edilir.
4.Mesaj metni:kişi tarayıcıda linkin üzerine geldiğinde tarayıcının sol alt köçesinde durum çubunda çıkacak yazıdır.
5.Alt etiketi: arama motorlarının sitenizi daha iyi indexleyebilmesi ve sitenizin daha üst sıralara çıkarmak için kullanılır.Tıklanan adresin açıklayıcı özelliği yazmanız tavsiye edilir.

psd html çevirme
psd html çevirme

* Bundan sonra dilimlere ayırdığımız ve linklerini atadığımız tasarım dosyasının web içinde kaydedicez.dosya-web ve aygıtlar için kaydet-en iyileştirilmiş alana gelin.renk sayısının 265 dan az olduğu grafiklerde gif olarak resimlerin ise 256 dan fazla olduğu düşünülürse bunlarında jpg olarak kaydetmek gerekir.Kaydetmek istediğiniz grafik yada resmin üzerine gelip sağdan sadece kaydetmek istediğiniz uzantıyı seçin.işlemleriniz bittikten sonra kaydede tıklayıp hangi dosyanın altında kaydedeceğinizi seçip index.html olarak kaydediyoruz. Kaydederken kayıt türünü”html ve görüntüler” olarak kaydediyoruz.Kaydettikten sonra uyarı mesajı gelir bunada tamam diyoruz.
* Sayfamızın tarayıcıda nasıl göründüğünü merak ediyorsanız kaydettiğiniz yerdeki index.html açmanız yeterli.İşte basit olarak böyle buradan sonra web sitenizin dosyalarını ftp programlarları ile cpanele atmanız gerekiyor.Umarım yeni arkadaşlar ve meraklıları için yararlı olmuşturyazılarımdan bazıları:en ucuz domain ve domain fiyatlarının listesiapple (1976-2010) hayat öyküsü ve yaptıklarısoyu tükenmekte olan on teknolojigamescom’daki ilginç bilgisayar tasarımlarıpes 2011 gameplay videosu çıktıseo teknikleri ve ipuçlarıblog