Bölüm 9: Web İçin Dosya Hazırlamak

Bu Bölümde Neler Var?
•Web sayfasının temeli dilimler
•Bir web tasarım çalışma alanı oluşturmak
•Dilimler oluşturmak
•Html ve resimleri ihraç etmek
•Resimleri web için optimize etmek ve ipuçları

Web Sayfasının Temeli Dilimler

Dilimler , bir resimde katmanları, kılavuzları ya da hassas seçimleri temel alarak ya da Dilim aracını kullanarak tanımladığınız dikdörtgen şeklindeki alanlardır. Bir resimde dilimler tanımladığınızda, Photoshop bu dilimleri içerecek ve hizalayacak bir HTML tablosu ya da Basamaklı Stil Sayfası oluşturur. İsterseniz tabloyla ya da Basamaklı Stil Sayfasıyla birlikte dilimli resmi içeren bir HTML dosyası üretebilir ve bunu önizleyebilirsiniz.
Resimleri hipermetin linkleri eklemeniz de mümkündür. Böylece Web sitesinin ziyaretçileri resme tıklayarak bağlı bir sayfayı açabilirler. Her zaman dikdörtgen şeklinde olan dilimlerden farklı olarak resimler herhangi bir şekilde olabilir.

Bir Web Tasarım Çalışma Alanı Oluşturmak

Web siteleri için resim hazırlama konusunda lider uygulama olarak Photoshop aynı zamanda bazı temel, yerleşik HTML oluşturma araçları da içerir. Photoshop’taki önceden tanımlanmış çalışma alanlarından birini kullanarak paletlerin, araç çubuklarının ve pencerelerin varsayılan düzenini özelleştirebilir, böylece Web tasarım işleriniz için bu araçlara daha kolay ulaşma olanağını elde edebilirsiniz.
Pencere > ÇalışmaAlanı > Web Tasarım komutunu seçin. Değişikliklerin menü ve klavye kısayollarını etkileyeceğini belirten uyarı iletişim kutusunda E düğmesine tıklayın.
Ana menüde farklı menü öğelerine tıklayarak bunların seçeneklerini inceleyin ve mor renkler vurgulanmış olan seçenekleri görüntüleyin. Bunlar tipik olarak Web Tasarım modunda kullanacağınız seçeneklerdir.

Dilimler Oluşturmak

Bir resimde dikdörtgen şeklindeki bir alanı dilim olarak tanımladığınızda, Photoshop dilimi içerecek ve hizalayacak bir HTML tablosu oluşturur. Bir dilim oluşturduktan sonra dilimleri düğmelere dönüştürebilir ve bu düğmeleri Web sayfasının çalışmasını sağlayacak şekilde programlayabilirsiniz.
Resmin tamamını kapsayan bir dilim oluşturmadığınız takdirde (ki bu pek bir işe yaramaz) tek bir dilim oluşturmanız mümkün değildir. Bir resmin içinde oluşturduğunuz her yeni dilim (kullanıcı dilimi), otomatik olarak resmin kullanıcı diliminin dışında kalan alanının tamamını kaplayan başka dilimler (otomatik dilimler) oluşturur.

Dilim Sembolleri

Photoshop resim penceresindeki ve Web ve Aygıtlar İçin Kaydet iletişim kutusundaki mavi ve gri semboller (ya da etiketler), onları nasıl yorumlayacağınızı öğrenirseniz hatırlatıcı olarak işinizi kolaylaştırabilirler. Her dilim uygun sayıda etiket içerebilir. Belirtilen koşullarda aşağıdaki etiketler görünür
() Dilimin numarası. Numaralar resimde soldan sağa ve yukarıdan aşağıya sırayla gider.
() Dilimde resim içeriği var.
() Dilimde resim içeriği yok.
() Dilim katman tabanlı; yani bir katmandan oluşturulmuş.
() Dilim başka dilimlere bağlanmış (optimizasyon amacıyla).

Bir Tasarımı Dilimlemek

Web sitesinin tasarımını hazırladınız ve artık tasarımın HTML formatına dönüştürülmesini istiyorsunuz. Normal bir web projesi akışında tasarım işlemi bittikten sonra tasarım bir HTML dosyasına aktarılır ve bu HTML dosyası oluşturacağınız web sayfaları için bir şablon oluşturur. Bu dersimizde web sayfamızın navigasyonunu HTML olarak ihraç edeceğiz.

Bir tasarım dilimlenirken ilk adım kafanızda dilimleri nasıl oluşturacağınızı planlamaktır. Bu adımı tamamladıktan sonra tasarımı dilimlemi işleminiz daha kısa sürecektir. Dilimlemedeki temel noktamız öncelikle kullanıcıların tıklayabileceği yerleri belirlemektir. Bu anasayfamıza linki olucak logomuz , yada navigasyon için hazırlamış olduğumuz menü olabilir. Bu dilimlemeleri yaptıktan sonra Photoshop bizim dilimlemediğimiz alanları otomatik olarak kendisi dilimleyecektir.
Yukarıdaki örneği inceleyelim. Bu örnekte dilimlememiz gereken ilk yer logo olucaktır.

1.Araçlar panelinden Dilim aracını() alın. Bu araç ile tasarımlarımızı dilimleyebiliriz. ElmaAğacı ve Bilgi Paylaşım Portalı’nı kapsayacak şekilde bir alan oluşturup farenizi bırakın.

2.Tasarım üzerinde 5 tane dörtgen alan oluştu. Unutmayın dilimler sadece dikdörtgen ve kare şeklinde olabilirler. Bunlardan mavi renkli icon (3 nolu dilim) kullanıcı tarafından oluşturulmuş bir dilimdir. Diğer 1,2,4,5 nolu dilimler PhotoShop tarafından oluşturuldular.
3.Yukarıdaki resimde kırmızı alan sitemizin navigasyon menüsüdür. Buradaki Anasayfa, Dersler, Makaleler, Animasyonlar ve İletişim alanları buton görevinde olup kullanıcıların başka sayfalara gitmesini sağlayacaktır. Bu kırmızı alanı kapsayacak şekilde bir dilim oluşturun.

Şimdi son oluşturduğumuz dilimi ek parçalara bölmek istiyoruz. Bu işlem için öncelikle bu dilimi Dilim Seçimi Aracı() ile seçmemiz gerekmektedir. Araç kutusunda Dilim aracının altında gizli durumda bulunan Dilim Seçimi Aracını () seçin.
4.Dilim Seçimi Aracı ile son dilimlenen alan üzerine tıklayıp bu dilimi seçiyor ve daha sonra araç özellikleri paletinden divide seçeneğine tıklıyoruz. Bu özellik ile dilimleri belli aralıklara yada eşit aralıklarla yatay ve dikey olarak küçük dilimlere rahatça bölebilirsiniz.

Menüde 5 tane eleman olduğu için “Dikey Olarak Nelere Böl” seçeneğini seçip aşağıdaki gibi ayarları yapıyoruz.

5.Dikkat ederseniz oluşturulmuş dilimler eşit aralıklı olarak yaratıldılar. Ancak bu bazı düğmelerimiz için elverlisli olmadı. Dilim Seçimi aracı seçili iken 6,7,8,9,10 nolu dilimlerin kenarlarından sürükleyerek istediğiniz dilimleri şıkıştırıp genişletebiliriz.

Katmanları Temel Alarak Dilimler Oluşturmak

Dilim aracını kullanmak yerine katmanları temel alarak da dilimler oluşturabilirsiniz. Dilimler için katmanları kullanmanın avantajı, Photoshop’un dilimi katmanın boyutlarını temel alarak oluşturması ve bunun tüm piksel verilerini dahil etmesidir. Katmanı düzenlediğinizde, taşıdığınızda ya da buna bir katman efekti uyguladığınızda, katman tabanlı dilim yeni pikselleri kapsayacak şekilde ayarlanacaktır.
1.Elmanın bulunduğu katmanı katman paletinden seçiyoruz ve Katman > Yeni Katman Temelli Dilim komutunu çalıştıralım.
2.Bu işlem sonrasında katman temelli bir dilim oluşturduk.

Oluşturulan Dilimlere Linklerin Atanması

Tasarımlarda dilimlerin oluşturulmasından sonra bunlarun kullanıcılar ile etkileşimi sağlamak için linklerinin atanması gerekmektedir. Bir dilim’e link atanması ile aslında o dilime bir düğme görevi atamaktayız. Oluşturduğumuz mavi numaraları dilimlere şimdi linkleri atıyalım.
1.Araç kutusunda Dilim aracının altında gizli durumda bulunan Dilim Seçimi aracını seçin.
2.Link atamak istediğiniz dilim üzerine iki kez tıklayıp dilim seçeneklerini açın. Bu pencerede Ad kısmına diliminiz için anlamlı bir isim. URL kısmına hedef web sayfasının adresi, Hedef kısmına hedefe gidilirken hangi pencerede gidileceğini ( _blank = yeni pencere, _self = kendi üstünde) belirtiniz. Bu işlemi link vermek istediğiniz tüm dilimler için gerçekleştiriniz.

Dilim Oluşturma Ve İpuçları

Dilimleme konusundaki yeteneklerinizi geliştirmek için aşağıdaki yöntemleri kendi kendinize deneyiniz.
• Görüntü Yok dilimleri oluşturabilir, sonra da bunlara metin ya da HTML kaynak kodu ekleyebilirsiniz. No Image dilimlerinde arka plan rengi bulunabilir ve bunlar HTML dosyasının bir parçası olarak kaydedilir. Metin için No Image dilimlerini kullanmanın en büyük avantajı, metnin herhangi bir HTML editöründe düzenlenebilmesidir. Bu da sizi metni düzenlemek için Photoshop’a geri dönme zorunluluğundan kurtarır. Bununla birlikte, metin dilim için çok büyük hale gelirse HTML tablosundan taşar ve istenmeyen boşluklara neden olur.
• Tasarım çalışmanızda özel kılavuzlar kullanırsanız, Dilim aracı seçenekler çubuğunda bulunan Kılavuzlardan Gelen Dilimler düğmesini kullanarak resmin tamamını anında dilimlere bölebilirsiniz. Ama bu tekniği kullanırken dikkatli olmalısınız, çünkü bunu kullandığınızda daha önce oluşturduğunuz tüm dilimler ve bu dilimlerle ilgili tüm seçenekler yok olur. Ayrıca, bu teknik yalnızca kullanıcı dilimleri oluşturur; bu kadar çok kullanıcı dilimine ihtiyacınız olmayabilir.
• Aynı boyutlarda, eşit aralıklı ve hizalı dilimler oluşturmak istiyorsanız, alanın tümünü tam olarak kapsayan tek bir kullanıcı dilimi oluşturmayı deneyin. Sonra Dilim Seçimi araç seçenekleri çubuğundaki Böl düğmesini kullanarak orijinal dilimi gereken sayıda düşey ya da yatay satıra bölün.
• Katman tabanlı bir dilimle katmanı arasındaki bağlantıyı koparmak istiyorsanız bunu bir kullanıcı dilimine dönüştürebilirsiniz. Bunun için Dilim Seçimi aracıyla dilime çift tıklamanız ve ilgili seçenekleri ayarlamanız yeterlidir.

HTML Ve Resimleri İhraç Etmek

Tıpkı son kesme işleminden önce tahta parçasına çentik atan bir marangoz gibi, son dilimlerinizi oluşturmaya, linklerinizi tanımlamaya ve dosyanızı dilimlerinizin tümünü tek bir birim olarak görüntüleyecek bir HTML sayfası oluşturacak şekilde ihraç etmeye hazırsınız.
Web sayfalarının hızlı bir şekilde açılabilmesi için Web grafiklerinin boyutlarının mümkün olduğunca küçük tutulması önemlidir. Photoshop, her dilimi resim kalitesinden ödün vermeden ne kadar küçük bir boyutta ihraç etmeniz gerektiğini belirlemenize yardımcı olan yerleşik araçlar içerir. Pratik bir kural olarak; fotografik, sürekli tonlu resimler için JPEG sıkıştırması, diğer alanlar içinde GIF sıkıştırması kullanılır.

1.Dosya > Web ve Aygıtlar İçin Kaydet komutunu seçin.
2.Web ve Aygıtlar İçin Kaydet iletişim kutusunda, en üst kısımda 2 Kat sekmesini seçin.
3.İletişim kutusunda Dilim Seçimi aracını () seçin, sıkıştırma yöntemini belirlemek istediğiniz dilimi işaretleyin ve ayarlarını sağ taraftaki pencereden yapın.

4.Aynı anda bir çok dilim seçebilir ve bunlar için toplu halde sıkıştırılma yöntemini belirleyebilirsiniz. 2 Kat seçeneğinin yardımı ile resmin sıkıştırımadan önceki görünümünü yukarıdaki pencereden, sıkıştırılma sonrasındaki görünümünü aşağıdaki pencereden takip ediniz. Amacımız orjinal görüntüyü çıktı görüntüsü üzerinde yakalamaya çalışmak ve dosya boyutlarını mümküm olduğunca küçültmek.
5.Ayrıca bu pencere sayesinde orjinal dosya büyüklüğümüz ile çıktı büyüklüğümüzü kıyaslayabilir ve hangi oranda başarılı olduğumuzu anlayabiliriz.

6.Kaydet düğmesine tıklayın ve çıktınız için gerekli ayarları yapın. Çıktı alırken “Tüm Dilimler” ve “HTML ve Görüntüler” seçeneklerinin seçili olması gerekmektedir. Bu şeçeneklerin seçili olduğunu kontrol ediniz ve işlemi tamamlayınız.