Photoshop İle Web Site Tasarımı ( Yapımı ) ( S. S. Farkı İle )
Photoshop İle Web Site Tasarımı ( Yapımı ) ( S. S. Farkı İle )
tarafından admin Bir Paz Kas. 02, 2008 1:13 pm
Öncelikle Photoshop programımızı açalım. 700 x 600 çalışma sayfası açacağız arka planı, web sitemizin arka planı olucak tek renk seçiyoruz ben siyah ı tercih ettim.
Şablonumuzu oluşturmaya başlamadan Tasarımda kullanılan fırça setini isterseniz indirin
Rar Şifresi : www.sensizliksokagi.org
Konuda verilen resimleri büyük boy görmek için üzerine tıklayın.
Buton oluşturma :
Butonlarımızı oluşturacağız indirdiğiniz fırça setinde 2. fırça ile bu işlemi gerçekleştirceceğiz.
Yeni bir layer açalım Ctrl + Shift + N yapıyoruz
2. sıradaki fırça ile tek baskı uyguluyoruz ( 167 ) ( Kırmızı )
Şimdi Ctrl + j yapıyoruz 2 adet buton sahibi olduk ( 2. buton 1. buton üzerinde )
Klavyede bulunan yön tuşları ile aşağıya çekeceğiz aşağı ok işareti ile indirelim(Move Tool) seçili olmalı)
Şimdi bir kez daha Crtl + j yapalım. 3 Adet butonumuz oldu aynı şekilde aşağıya çekiyoruz.
Bir buton daha yapalım Crtl + J ve aşağı ok işareti ile de aşağıya çekelim. 4 adet butonumuz oldu
Butonlar üzerine yazı yazmak :
Sıra oluşturduğumuz butonlar üzerine yazılarımızı yazmaya geldi. ( Ana Sayfa , Resimler , Videolar Vs. )
Horizontal Type Tool ( T ) yazı yazma aracımızı seçip 1. butonumuza Ana Sayfa Yazıyoruz ( Beyaz Renk )
Ardından 2. buton a Resimler
3. Botun a Videolar
4. buton a ise iletişim yazabilirsiniz.
Layer Text Birleştirme :
Şimdi karışıklığa meydan vermemek ve kolay yer değişimi için layerleri birleştireceğiz.
Aşağıda resimde görüldüğü gibi en üstteki XeptoR isimli layer' seçili iken, shift tuşuna basılı tutup en alttaki layer 1 e tıklayalım ( Backraund hariç hepsi seçili hale geldi )Ctrl + E yapalım layerlerimiz birleşsin.
Şimdi Move Tool seçili ise mause veya yön tuşları ile tüm butonları ve yazıları aynı anda hareket ettirebiliriz.
Ayrıca Ctrl + T Hepsinin aynı anda boyutlarını / Yönlerini değiştirebilirsiniz.
Banner eklemek :
Ctrl + shift + N yapıp yeni bir layer açalım setimizde birinci sırada bulunan fırçayı kullanacağız
Üst bölgeye tek baskı uygulayalım ( 394 )
Horizontal Type Tool ( T ) yazı yazma aracımızı seçip içine Site adı / Slogan / Başlık ne istiyor isek yazalım
Banner orta bölüme " tasarım yumağı" yazdım alt bar' a ise XeptoR® yazdım şimdi layerlerimizi birleştireceğiz,
Resimde görüldüğü üzere, ilk sıradaki layerimiz seçili iken shift tuşuna basılı tutup en alttaki layer 1 tıklayalım ardından Ctrl + E Yapalım layerlerimiz birleşsin. Bu işlem sonunda 3 adet layerimiz olmalı.
Tasarımımızı bitirdik sayılır set te 2 adet daha fırça bulunuyor isterseniz tasarıma eklemeler yapabilirsiniz. Yeni fırça setleri edinip extra eklemelerde yapabilirsiniz.
Şimdi önemli kısım' a geliyoruz çalışmamızı İmageReady ye taşıyacağız Ctrl + Shift + M yapıyoruz.
Çalışma sayfamız açıldığında önce resim olarak görünecek bölümleri seçeceğiz.(Keseceğiz) ( Yani web sayfamızda grafik olarak cıkmasını istediğimiz ( buton banner vs. ) belirleyeceğiz.)
Çalışmamız İmageReady e aktardı isek öncelikli olarak Slice menüsü açık değil ise açalım
Açmak için Üst sekmelerde bulunan Window > Slice yi aktif yapalım.
Şimdi araç menüsünden Slice Tool' ü seçelim (K)
Şimdi sayfamızda çıkmasını istediğimiz alanları seçelim. Aşağıda resimde ok ile gösterildiği gibi bir alanı belirledim
Az önce kapalı ise açmanızı istemişdim, Slice Menüsü bu menü ile resime link tag vs. vereceğiz.
Type : İmage ( Resim olarak görünecek yerleri belirliyoruz )
Name : Title bölümü sayfa ismi ( XeptoR )
URL : Tıklanınca gidelecek sayfa adresi ( link'i ) ( WwW.SensizlikSokagi.oRg )
Taget : _blank _self _top (Tıklanınca sayfa Aynı Pencerede Açılsın , Yeni Pencerede Açılsın Vb.) _blank
Alt Tag : Ziyaretcinin tarayıcısında solda en altta bulunan bölümde çıkacak yazı ( Sensizlik Sokağı )
Üstteki menüyü doldurduk her bir yeni alan seçiminde bu işlemi yapacağız yani diğer butonları banner vs. tek tek seçip her birine aynı yukarıdaki gibi gerekli bilgileri gireceğiz.
Aşağıda gördüğünüz gibi Ana Sayfa adlı butonu belirledim. Web sayfamda resim olarak çıkması gerekiyor.
Diğer butonları ( Resimler,videolar vs. ) belirledim aşağıdaki resimde görüldüğü gibi baner imizide belirledim.
Tasarımda belirlenmesi gereken tüm grafiklerimizi seçip gerekli bilgileri girdik. Sıra grafik olarak çıkmamasını istediğimiz alanları belirleyeceğiz.
No İmage Bölümü :
Şimdi aynı araçla ( Slice Tool ) (K) resim olarak çıkmasını istemediğimiz yerleri seçip slice menüden gerekli işlemleri yapacağız..
Sebeb ? ( Bu belirlediğimiz alanlarda sayfanızın içeriği olacak. )
Aşağıda resimde olduğu gibi resimsiz alanın bir bölümünü seçdim. Bu seçim esnasında seçim karelerimiz resimli alanlara müdehale etmemeli aksi taktirde görünmesi gereken resmimizide kesmiş oluruz.
Type : No İmage ( Belirlediğimiz alan boş olarak ileride karşınıza çıkacak bu alanda sitenizin içeriğini oluşturabileceksiniz. )
Şimdi ise başka bir alanı daha seçdim aynı işlemleri bundada tekrarlamalıyım. ( Type : No İmage ) bu işlemide her defasında tekrarlamalıyız.
Aşaıdaki resimde ise seçmem gereken kalan yerleri gösteriyor yani kücük parçacıklarda bırakmamaya özen gösterin. ( Boylelikle siteniz hızlı açılacakdır. )
Sayfamızda Görünmesi / Görünmemesi gereken tüm bölgeleri belirledik. Kayıt işlemine geçelim.
Photoshop web site kayıt yapmak :
Üst menüden File > Save Optimized As.. diyoruz ve açılan pencerede ;
Şeklinde doldurup kaytet butonuna tıklıyoruz.
Masa üstüne kayıt yaptı iseniz yada bilgisayarınızda nereye kayıt yapdı iseniz, Kayıt yerinde bir (1) adet .Html dökümanı ve bir (1) adet İmages klasörü oluşdu. .html dökğmanımıza tıklarsak wep sitemizi ilkkez görmüş olacağız.
Tasarım haricindeki bölümler beyaz olucak o yüzden siteyi kapayalım ve .html dökümanımıza sağ tuş tıklayıp düzenle diyelim yada sağ tuş > birlikte aç seçeneği, not defteri ile açalım
Aşağıda resimde görüldüğü gibi html kodlar önümüzde body bgcolor ( arka plan rengi ) bu bölümü değiştirelim
#FFFFFF ( beyaz ) bunu siyah olarak değiştirelim #000000 yapalım ( Altı adet sıfır ) Kapat diyelim, Değşiklikler kayıt edilsinmi uyarısına Evet diyelim.
Şimdi .html sayfamızı tekrar açalım.. Bu kez daha hoş görünüyor olmalı... Buradan sonrası sizin html css asp php flash vb. kodlama dil bilginize kalıyor. İyi Tasarımlar & Kodlamalar. Kolay gelsin.
Bu Döküman tamamen SensizlikSokağı ' na aittir.
--------
Edit : Buton vs. Brushes yeni link http://rapidshare.com/files/125508957/xeptor.rar.html
Şablonumuzu oluşturmaya başlamadan Tasarımda kullanılan fırça setini isterseniz indirin
Rar Şifresi : www.sensizliksokagi.org
Konuda verilen resimleri büyük boy görmek için üzerine tıklayın.
Buton oluşturma :
Butonlarımızı oluşturacağız indirdiğiniz fırça setinde 2. fırça ile bu işlemi gerçekleştirceceğiz.
Yeni bir layer açalım Ctrl + Shift + N yapıyoruz
2. sıradaki fırça ile tek baskı uyguluyoruz ( 167 ) ( Kırmızı )
Şimdi Ctrl + j yapıyoruz 2 adet buton sahibi olduk ( 2. buton 1. buton üzerinde )
Klavyede bulunan yön tuşları ile aşağıya çekeceğiz aşağı ok işareti ile indirelim(Move Tool) seçili olmalı)
Şimdi bir kez daha Crtl + j yapalım. 3 Adet butonumuz oldu aynı şekilde aşağıya çekiyoruz.
Bir buton daha yapalım Crtl + J ve aşağı ok işareti ile de aşağıya çekelim. 4 adet butonumuz oldu
Butonlar üzerine yazı yazmak :
Sıra oluşturduğumuz butonlar üzerine yazılarımızı yazmaya geldi. ( Ana Sayfa , Resimler , Videolar Vs. )
Horizontal Type Tool ( T ) yazı yazma aracımızı seçip 1. butonumuza Ana Sayfa Yazıyoruz ( Beyaz Renk )
Ardından 2. buton a Resimler
3. Botun a Videolar
4. buton a ise iletişim yazabilirsiniz.
Layer Text Birleştirme :
Şimdi karışıklığa meydan vermemek ve kolay yer değişimi için layerleri birleştireceğiz.
Aşağıda resimde görüldüğü gibi en üstteki XeptoR isimli layer' seçili iken, shift tuşuna basılı tutup en alttaki layer 1 e tıklayalım ( Backraund hariç hepsi seçili hale geldi )Ctrl + E yapalım layerlerimiz birleşsin.
Şimdi Move Tool seçili ise mause veya yön tuşları ile tüm butonları ve yazıları aynı anda hareket ettirebiliriz.
Ayrıca Ctrl + T Hepsinin aynı anda boyutlarını / Yönlerini değiştirebilirsiniz.
Banner eklemek :
Ctrl + shift + N yapıp yeni bir layer açalım setimizde birinci sırada bulunan fırçayı kullanacağız
Üst bölgeye tek baskı uygulayalım ( 394 )
Horizontal Type Tool ( T ) yazı yazma aracımızı seçip içine Site adı / Slogan / Başlık ne istiyor isek yazalım
Banner orta bölüme " tasarım yumağı" yazdım alt bar' a ise XeptoR® yazdım şimdi layerlerimizi birleştireceğiz,
Resimde görüldüğü üzere, ilk sıradaki layerimiz seçili iken shift tuşuna basılı tutup en alttaki layer 1 tıklayalım ardından Ctrl + E Yapalım layerlerimiz birleşsin. Bu işlem sonunda 3 adet layerimiz olmalı.
Tasarımımızı bitirdik sayılır set te 2 adet daha fırça bulunuyor isterseniz tasarıma eklemeler yapabilirsiniz. Yeni fırça setleri edinip extra eklemelerde yapabilirsiniz.
Şimdi önemli kısım' a geliyoruz çalışmamızı İmageReady ye taşıyacağız Ctrl + Shift + M yapıyoruz.
Çalışma sayfamız açıldığında önce resim olarak görünecek bölümleri seçeceğiz.(Keseceğiz) ( Yani web sayfamızda grafik olarak cıkmasını istediğimiz ( buton banner vs. ) belirleyeceğiz.)
Çalışmamız İmageReady e aktardı isek öncelikli olarak Slice menüsü açık değil ise açalım
Açmak için Üst sekmelerde bulunan Window > Slice yi aktif yapalım.
Şimdi araç menüsünden Slice Tool' ü seçelim (K)
Şimdi sayfamızda çıkmasını istediğimiz alanları seçelim. Aşağıda resimde ok ile gösterildiği gibi bir alanı belirledim
Az önce kapalı ise açmanızı istemişdim, Slice Menüsü bu menü ile resime link tag vs. vereceğiz.
Type : İmage ( Resim olarak görünecek yerleri belirliyoruz )
Name : Title bölümü sayfa ismi ( XeptoR )
URL : Tıklanınca gidelecek sayfa adresi ( link'i ) ( WwW.SensizlikSokagi.oRg )
Taget : _blank _self _top (Tıklanınca sayfa Aynı Pencerede Açılsın , Yeni Pencerede Açılsın Vb.) _blank
Alt Tag : Ziyaretcinin tarayıcısında solda en altta bulunan bölümde çıkacak yazı ( Sensizlik Sokağı )
Üstteki menüyü doldurduk her bir yeni alan seçiminde bu işlemi yapacağız yani diğer butonları banner vs. tek tek seçip her birine aynı yukarıdaki gibi gerekli bilgileri gireceğiz.
Aşağıda gördüğünüz gibi Ana Sayfa adlı butonu belirledim. Web sayfamda resim olarak çıkması gerekiyor.
Diğer butonları ( Resimler,videolar vs. ) belirledim aşağıdaki resimde görüldüğü gibi baner imizide belirledim.
Tasarımda belirlenmesi gereken tüm grafiklerimizi seçip gerekli bilgileri girdik. Sıra grafik olarak çıkmamasını istediğimiz alanları belirleyeceğiz.
No İmage Bölümü :
Şimdi aynı araçla ( Slice Tool ) (K) resim olarak çıkmasını istemediğimiz yerleri seçip slice menüden gerekli işlemleri yapacağız..
Sebeb ? ( Bu belirlediğimiz alanlarda sayfanızın içeriği olacak. )
Aşağıda resimde olduğu gibi resimsiz alanın bir bölümünü seçdim. Bu seçim esnasında seçim karelerimiz resimli alanlara müdehale etmemeli aksi taktirde görünmesi gereken resmimizide kesmiş oluruz.
Type : No İmage ( Belirlediğimiz alan boş olarak ileride karşınıza çıkacak bu alanda sitenizin içeriğini oluşturabileceksiniz. )
Şimdi ise başka bir alanı daha seçdim aynı işlemleri bundada tekrarlamalıyım. ( Type : No İmage ) bu işlemide her defasında tekrarlamalıyız.
Aşaıdaki resimde ise seçmem gereken kalan yerleri gösteriyor yani kücük parçacıklarda bırakmamaya özen gösterin. ( Boylelikle siteniz hızlı açılacakdır. )
Sayfamızda Görünmesi / Görünmemesi gereken tüm bölgeleri belirledik. Kayıt işlemine geçelim.
Photoshop web site kayıt yapmak :
Üst menüden File > Save Optimized As.. diyoruz ve açılan pencerede ;
Şeklinde doldurup kaytet butonuna tıklıyoruz.
Masa üstüne kayıt yaptı iseniz yada bilgisayarınızda nereye kayıt yapdı iseniz, Kayıt yerinde bir (1) adet .Html dökümanı ve bir (1) adet İmages klasörü oluşdu. .html dökğmanımıza tıklarsak wep sitemizi ilkkez görmüş olacağız.
Tasarım haricindeki bölümler beyaz olucak o yüzden siteyi kapayalım ve .html dökümanımıza sağ tuş tıklayıp düzenle diyelim yada sağ tuş > birlikte aç seçeneği, not defteri ile açalım
Aşağıda resimde görüldüğü gibi html kodlar önümüzde body bgcolor ( arka plan rengi ) bu bölümü değiştirelim
#FFFFFF ( beyaz ) bunu siyah olarak değiştirelim #000000 yapalım ( Altı adet sıfır ) Kapat diyelim, Değşiklikler kayıt edilsinmi uyarısına Evet diyelim.
Şimdi .html sayfamızı tekrar açalım.. Bu kez daha hoş görünüyor olmalı... Buradan sonrası sizin html css asp php flash vb. kodlama dil bilginize kalıyor. İyi Tasarımlar & Kodlamalar. Kolay gelsin.
Bu Döküman tamamen SensizlikSokağı ' na aittir.
--------
Edit : Buton vs. Brushes yeni link http://rapidshare.com/files/125508957/xeptor.rar.html
admin- Adminstreteur
- Mesaj Sayısı: 842
Yaş: 16
Nerden: batman
ruh hali:
Takım:
Kayıt tarihi: 12/10/08 
Bu forumun müsaadesi var:
Bu forumdaki mesajlara cevap veremezsiniz