Oca
20
2010

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 tur. Herşey 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 yöntemi kullanarak güzel şeyler hazırlarlar. Bu dersimizde de ile nasıl web sitesi hazırlanır, parçalayıcı araç nasıl kullanılır onları anlatmaya çalışıcam…

photoshop websitesi yapma 1 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

Ö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.

photoshop websitesi yapma 2 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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

photoshop websitesi yapma 3 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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..

photoshop websitesi yapma 4 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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..

photoshop websitesi yapma 5 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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..

photoshop websitesi yapma 6 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

Ö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..

photoshop websitesi yapma 7 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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

photoshop websitesi yapma 8 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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..

photoshop websitesi yapma 9 Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

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 bilginize vede yaratıcılığınza kalmış..

Kolay gelsin..

Gelen Aramalar: resimler ile web araçları hazırlamak,resimlerle web araçları hazırlama,photoshop ta web sayfası hazırlama,animasyonlar ile web aracları hazırlamak,photoshop html yapma,photoshopta web sayfası hazırlama,photoshopta web sitesi hazırlama,resimlerle web araçları hazırlamak,photoshopta web sitesi yapmak,web sitesi şablonları


Warning: Cannot modify header information - headers already sent by (output started at /home2/cenia/public_html/tutorialci.net/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:1215) in /home2/cenia/public_html/tutorialci.net/wp-content/plugins/sayfa_sayac/sayfa_sayac.php on line 491

Benzer Konular:

Yazar Hakkında:

16 Comments + Add Comment

  • photoshop ile site yapanlar için güzel calısmalar bunlar

  • bu photoshop un adı nedir lütfen söyleyin

  • Bildiğin adobe photoshop. Tüm sürümlerinde genel yapısı aynıdır. sürüm yükseldikçe azbiraz özellik ekleyip görselde iyileştirme yapıyolar ama sonuçta hepsi aynı kapıya çıkıyor. ayrıntılı bilgi için. http://www.adobe.com adresini ziyaret edebilirsin.

  • kardeş herşeyi çok güzel anlatmışsın çok teşekkürler aynen yaptım hepsini ama bunu düzenleyemiyorum FrontPage de değişiklik yapılınca böyle resimler ayrılıyor birbirinden:s bi yardımcı olursan çok ii olur valla işte kardeş bak böyle oluyor
    http://i49.tinypic.com/24gooz6.gif

  • kardeş herşeyi çok güzel anlatmışsın aynılarını yaptım ama bi sorun çıktı FrontPage de düzenleme yaptığım zaman resimler alt alta geliyor yerleri kayıyor bi yardımcı olurmusun bak böyle oluyor
    http://i49.tinypic.com/24gooz6.jpg

  • düzgün parçalayamadığındna böyle bir sorun ile karşılaşmışsın. yazı alanını bir bütün olarak ayırman gerekiyor. menü alanını da ayrı bir şekilde ayırman gerekir. orun burdan kaynaklı.

  • bişi sölicem peki bunu yaptıktan sonra nereye kaydedicez

  • c: nin içindeki system klasorune kaydetmelisin kardeş yoksa randıman alamazsın

  • MErhaba, güzel bir yöntemmiş. Fakat bu çalışmayı frontpage taşıdıktan sonra internet explorer açıldığında tam ortada olması için ne yapmak lazım?

  • süper tşkler bir çok kişinin işine yarayacaktır.
    saygılar

  • merhaba, acil bir sorum olacak aslında. photshopta sayfa düzenini hazırlayıp web sayfası olarak kaydediyorum istediğim linki de bu sayfaya eklemiş durumdayım. hazırladığım bu dosyayı maille yollayıp, kullanıcıların maillerinde bu sayfayı görmelerini istiyorum ama imaj olarak görünmüyor ne yapmayalım?

  • Teşekkürler güzel anlatılmış da bir şey sormak istiyorum. Web sitesi yaparken neden photoshop’u tercih etmeliyiz??

  • ya da etmeli miyiz?

  • güzel bi paylaşım teşeküürler

  • Frontpage yerine Kompozer de kullanabilirsiniz. Teşekkürler admin.

  • CİHANGİR siteyi ortalamak için sayfanın indexine gir ve en üste yaz ““işaretleri dahil indexin en sonunada yazacaksın sonra kaydet. sayfan ortalanmış olacak.Tabi bu dediklerim wep sitesine giriş yaptıktan sonra yapılcak.Deneme yapıyorsan yapmış olduğun dosyanın boyutlarına dikkatli bak yine aynı gözüküyorsa siteye aktarınca düzelir merak etme.

    ŞEREF Photoshopun bu kadar çok tercih edilmesinin ana sebebi alanında gerçekten kendini ıspatlamış kolay pratik (hızlı) ve geniş bir kullanım sununmasıdır. Bence alanında birinci.

Leave a comment