Photoshop’ta web sayfasını dışa aktarma

       Photoshop ile hazırlanan web taslağı nasıl dışa aktarılır ? Web sitesinde Anasayfa , Hakkımızda , ürünler , fotogaleri , iletişim olarak 5 sayfamız bulunmakta . Her bir sayfayı html sayfası olarak dışa aktaralım.Ayrı katmanlarda ayrı sayfa içerikleri var . Psd dosyasını aşağıdaki linkten indirilebiliriz .

                  anasayfa                                   hakkımızda

            ürünler                                                              fotogaleri

                 iletişim

PSD DOSYASINI İNDİR

 

1- Araç kutusundan dilim aracını tıklayalım.

 

Dilim aracıyla anasayfa butonunu seçelim.

3- Dilim aracı aktifken , daha önceden seçtiğimiz anasayfa butonu üzerinde sağ tıklayalım.Aşağıdaki açılan menüden “dilim seçeneklerini düzenle” tıklayalım.

4- Gelen “Dilim Seçenekleri” penceresinde URL bölümüne , butonumuza tıkladığımızda gidilecek adresi yazarız.Anasayfa butonu olduğu için index.html yazdık.

5- 1 ,2 ,3 ve 4 . maddelerdeki işlemleri diğer butonlara(Hakkımızda , ürünler , fotogaleri , iletişim ) da yaptık.Gideceği URL isimleri aşağıdaki gibi yaptık.

BUTON BUTON URL
hakkımızda hakkimizda.html
Ürünler urunler.html
fotogaleri fotogaleri.html
iletişim iletisim.html

6- Masaüstünde ” psdler ” klasörü oluşturduk.

7- Anasayfayı “anasayfa.psd” olarak bu klasörün içine “Farklı Kaydet” ile kaydettik.

8- 7. maddede yaptıklarımızı diğer sayfalar (Hakkımızda , ürünler , fotogaleri , iletişim ) için de yaptık.Hepsi “psdler” klasörüne “Farklı Kaydet” ile kayıt edildi.

9- anasayfa.psd’yi açalım . Dosya menüsünden “Web için kaydet ” seçelim.

 


10- Gelen pencerede resimdeki kırmızı alanda görüldüğü gibi PNG 24 ‘ ü seçelim . Ve “kaydet” butonuna tıklayalım.

 

11- Gelen pencerede “index.html” yazalım. Format bölümünde “HTML ve Görüntüler” seçili olmasına dikkat edelim.

12- 9 ,10 ve 11 . maddelerdeki işlemleri diğer sayfalara (Hakkımızda , ürünler , fotogaleri , iletişim ) da yaptık.Diğer sayfaları da aşağıdaki isimlerde dışa aktardık.

SAYFA URL
hakkımızda hakkimizda.html
Ürünler urunler.html
fotogaleri fotogaleri.html
iletişim iletisim.html

NOT : 9 ,10 ve 11 . maddelerdeki işlemleri yaparke aşağıdaki pencereyi “Değiştir” butonuna tıklayarak geçeriz.

Paylaş:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir