Çalışmanın Psd sini indirmek için TIKLA
Merhaba arkadaşlar bu dersimde Photoshop ta güzel siteler oluşturmayı anlatacağım
Evet başlayalım.
-------------------------------
Not: Deneme Tasarım yukarıda linklenmiştir..İndirip üzerinde çalışabilirsiniz.
Ben elinizde hazır bir photoshop tasarım olduğunu farzederek başlıyorum.
Resim 1 de görndüğü gibi tasarımımızda slicelerimizi çiziyoruz.
Yani parçalara ayırıyoruz.Mesela gördüğünüz gibi Menüleri çizmişim tek tek... Onları Sol menüden sliceyi alıp çizdikten sonra çizdiğimiz sliceye sağ tıklayıp "Edit Slice Options" a tıklıyoruz
ve karşımıza gelen ekranda resmi ne olarak kaydedeceğini ve ona
tıklayınca gideceği adresi yazıyoruz.Bu işlem bütün menülerde
yapılır. Fakat linki heryere ermemize gerek yok
istediğiniz yere verebilirsiniz...(Resim 1)
Slicelerimizi çizdikten sonra "File" memüsüne tıklayıp "Save For Web" Sekmesi tıklanır. (Resim 2)
"Save For Web" Sekmesi' ni tıkladıktan sonra açılan ekranda genel bi ayar yapmıyoruz ve
"Save" Butonuna basıyoruz.(Resim 3)
"Save" Butonu Tıklandıktan Sonra karşımıza gelen kayıt ekranında
kaydedeceğimiz yolu belirtiyoruz.Alt bölümden "Html and Images"i seçim kayıt ediyoruz (Resim 4)
Kaydettiğimiz dizine geliyoruz ve sıra geldi html olarak yaptığımız bu tasarımı Herhangi bir
Web Tasarım Editöründe açıyoruz.(Dreamweaver & Frontpage vs.vs...)..(Resim5)
Ve .html yaptığımız bu sayfayı herhangi bir web tasarım editöründe açtık. (Ben Share Point Kullandım)
Ve sonunda bir html sayfamız oldu
(Resim 6)
Bu sayfamıza Web Tasarım Editöründe Neler Yapabiliriz ?
* Css ile görüntüye zenginlik katabilirsiniz.
* Arka plana renkler ekleme yazılar yazma vs vs
Ve daha çok işlemler yapabilirsiniz.
Resimlerin üzerine yazı yazmak için size div kullanma yöntemini öneririm.
Bilmeyen arkadaşlar için mantığı şu
<DIV STYLE="background-image:url('images/resiminadi.gif'); width: resimin genişiliğipx; height:resimin yüksekliğipx">
</div>
Evet bu div in içine yazılacak yazılar sayfanın düzeninii bozmadan çıkacaktır
Takıldığınız yerlerde Peme ile yardım isteyebilirsiniz mutlaka yardım ederim.
Not : Html zenginleştirmek için webtasarimrehberi.com adresini öneririm.
