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 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..
Gelen Aramalar: resimler ile web araçları hazırlamak,resimlerle web araçları hazırlama,photoshop ta web sayfası hazırlama,photoshopta web sayfası hazırlama,photoshop html yapma,animasyonlar ile web aracları hazırlamak,resimlerle web araçları hazırlamak,photoshopta web sitesi hazırlama,photoshopta web sitesi yapmak,web sitesi şablonları
16 Comments + Add Comment
Leave a comment
Son Okunanlar
- Sebze Tava Yapımı - 2 kez okundu
- Stradivarius Ayakkabı Çizme Babet ve Topuklu Modelleri 2010 Yapımı - 2 kez okundu
- 18 cilt probleminin cevapları Yapımı - 2 kez okundu
- Doğal İkon Jessica Alba Yapımı - 2 kez okundu
- Levi’s İlkbahar Yaz 2010 Yapımı - 2 kez okundu
Kategoriler
- Asp & Aspx
- Bakliyat Yemekleri
- Bayram Yemekleri
- Bebek Yemekleri
- Bilgisayar
- Cep Telefonu
- Çocuklar İçin
- Çorbalar
- Deniz Ürünleri
- Diyet Yemekleri
- Dosya Paylaşım Siteleri
- Et Yemekleri
- Faydalı Bigiler
- Genel
- Grafik & Tasarım
- Hamur İşleri
- html & html & dhtml
- İçecekler
- Kapak Fotoğrafları
- Kekler
- Kolay Tarifler
- Kompostolar
- Kurabiyeler
- Makarnalar
- Matrak & İlginç
- Mezeler
- Motorlu Araçlar
- MySql
- Oyunlar
- Pastalar
- Photoshop
- PHP
- Pilavlar
- Pratik Yemekler
- Programlama
- Püf Noktalar
- Reçel ve Marmelatlar
- Salatalar
- Sanal Tuning
- Sebze Yemekleri
- Spor
- Sunucular
- Sütlü Tatlılar
- Tatlılar
- Tavuk Yemekleri
- Teknoloji & İnternet
- Turşular
- Vitaminler
- Web tabanlı uygulamalar
- Webmaster
- Yaşam
- Yemek Tarifleri
- Yemekler
- Yeni Yıl Yemekleri
- Yenilikler & Duyurular
- Yöresel Yemekler
- Zeytinyağlılar
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.