Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

Web sitesi ile ilgilenenler yada sürekli internette gezenler muhakkak görmüşerdir böyle mükemmel şekillerde siteler vardır görüntü mükemmeldir, bazıları merak ederler araştırırlar nasıl olduğunu ne olduğu, Araştırmaya başlanıldığı zaman pekçok çeşit web tasarım yöntemi vardır. Kodlama, flash, swish, frontpage, css gibi ama bunlardan en önemlisi vede kullanışlısı şüphesiz photoshop tur. Herşey photoshop ta resim olarak yapılır ve sonra dremweaver yada herhangi bir html editörü ile düzenlenir ve kullanılır. Çoğu tasarımcı vede template (hazır web sitesi şablonu) hazırlıyanlar photoshop yöntemi kullanarak güzel şeyler hazırlarlar. Bu dersimizde de photoshop ile nasıl web sitesi hazırlanır, parçalayıcı araç nasıl kullanılır onları anlatmaya çalışıcam…

Öncelikle photoshopta, web sayfamızın olmasını istediğimiz boyutlarda bir çalışma dosyası açıyoruz ve web sitemizi tasarlıyoruz..
Çok hızlı geçtin diyeceksiniz ama burası sizin yaratıçılığınıza kalmış ben örnek olsun diye amatör şekilde bir çalışma yaptım.

Soldaki menüden “Slice Tool” (Resim Parçalama) aracımızı alıyoruz..

Mause ile seçerek parçalara ayırıyoruz. Mümkün olduğunca kullanışlu bölmeliyizki kaydettiğimiz zaman resimler ne fazla büyük nede fazla küçük olarak kaydedilsin.

Ben örnek olarak Logo bölümünü ayr kaydettim. Menü ve linkleri ayırdım birde sürekli değişmesini istediğim orta bölümü seçtim..

Ayırma işlemimiz bittikten sonra File > Save for Web & Devices.. ‘e yada “Alt + Shift + Ctrl + S” kombinasyonu ile Save for Web & Devices sekmesini açıyoruz..

Açılan pencerede resimde görülen butona tıklayıp ayırmak istediklerimize vede link vermek istediğimiz parçaların üzerine çift tıklıyoruz..

Örnek olması amacı ile ben anasayfa linkini yapıyorum.
Name: kısmına butonun ve resmin adını, URL: kısmına ise tıklandığı zaman açılıcak olan sayfanın urlsini yazıyoruz.. ve “Ok” diyerek kaydediyoruz..

Diğer resimler içinde aynı şekilde uyguluyoruz. Linklemek istemediğimiz resimlerin URL bölümünü boş bırakıyoruz..

Tekrar eski pencereye dönüyoruz. Burda pekfazla ayar yapmaya gerek yok “Save” diyip kaydediyoruz..

Dosya adı: index
Kayıt türü: HTML and Images (*.html)
kaydetmek istediğimiz yeri seçiyoruz ve “Kaydet” butonuna tıklıyoruz..

Diğer sayfaları kaydetmek için index yerini sitenizdeki menülere vede verdiiniz linkler ile uyumlu şekilde değiştirip tekrar kaydedin..

Web sitemiz artık hazır. index.html i tıklıyarak web sayfamızı görebiliriz. Üzerinde değişiklik yapmak için çeşitli proğramlar ile (Dreamweaver vb.) tasarımımızı düzenliyebiliriz…

Ben örnek teskil etmesi bakımından yaptığım siteyi tutorialci.net_ps_site_yapimi_ornek.zip adresinden bakabilirsiniz…

Web sayfasını parçalayıp kaydetmek bu kadar kolay tasasrım işlemide sizin ps bilginize vede yaratıcılığınza kalmış..

Kolay gelsin..