Web sayfalarını dilimleme

Dilimler, görüntüyü web sayfasında HTML tablosu veya CSS katmanları kullanılarak yeniden bir araya getirilen daha küçük görüntülere böler. Görüntüyü böldüğünüzde, sayfa gezinmesi oluşturmak için farklı URL bağlantıları atayabilir veya görüntünün her parçasını kendi en iyileştirme ayarlarını kullanarak en iyi duruma getirebilirsiniz.

Web ve Aygıtlar İçin Kaydet komutunu kullanarak, dilimlenmiş görüntüyü dışa aktarabilir ve en iyileştirebilirsiniz. Photoshop her dilimi ayrı bir dosya olarak kaydeder ve dilimlenmiş görüntüyü göstermek için gereken HTML veya CSS kodunu üretir.

Dilimlere bölünmüş Web sayfası.

Dilimlerle çalışırken şu temel noktaları aklınızda bulundurun:

Dilim oluşturmak için Dilim aracını kullanabilir veya katman tabanlı dilimler oluşturabilirsiniz.

Dilim oluşturduktan sonra, Dilim Seçimi aracını kullanarak dilimi seçebilir ve ardından bunu taşıyabilir, yeniden boyutlandırabilir veya diğer dilimlerle hizalayabilirsiniz.

Dilim seçenekleri iletişim kutusunda her dilim için dilim türü, ad ve URL gibi seçenekler ayarlayabilirsiniz.

Web ve Aygıtlar İçin Kaydet iletişim kutusunda farklı en iyileştirme ayarları kullanarak her dilimi en iyi duruma getirebilirsiniz.

Dilim türleri

Başa dön

Dilimler içerik türlerine (Tablo, Görüntü, Görüntü Yok) ve oluşturulma şekillerine (kullanıcı, katman tabanlı, otomatik) göre kategorilere ayrılır.

Dilim aracıyla oluşturulan dilimler kullanıcı dilimleri; katmandan oluşturulan dilimler ise katman tabanlı dilimler olarak adlandırılır. Yeni bir kullanıcı dilimi veya katman tabanlı dilim oluşturduğunuzda, görüntünün kalan alanlarını da içine alacak şekilde ek otomatik dilimler üretilir. Başka bir deyişle, otomatik dilimler görüntüde kullanıcı dilimleri veya katman tabanlı dilimler tarafından tanımlanmamış olan alanı doldururlar. Kullanıcı dilimlerini veya katman tabanlı dilimleri her eklediğinizde veya düzenlediğinizde otomatik dilimler yeniden üretilir. Otomatik dilimleri kullanıcı dilimlerine dönüştürebilirsiniz.

Kullanıcı dilimleri, katman tabanlı dilimler ve otomatik dilimler farklı görünür; kullanıcı dilimleri ve katman tabanlı dilimler düz çizgiyle tanımlanırken, otomatik dilimler noktalı çizgiyle tanımlanır. Buna ek olarak, kullanıcı dilimleri ve katman tabanlı dilimler farklı bir simge görüntüler. Kullanıcı dilimleriyle ve katman tabanlı dilimlerle çalışırken daha kolay görmenizi sağlayacak şekilde otomatik dilimleri göstermeyi veya gizlemeyi seçebilirsiniz.

Alt dilim, çakışan dilimler oluşturduğunuzda üretilen otomatik dilim türüdür. Alt dilimler, en iyileştirilmiş dosyayı kaydettiğinizde görüntünün nasıl bölündüğünü gösterir. Alt dilimler numaralandırılır ve bir dilim sembolü görüntüler ancak bunları alttaki dilimden ayrı olarak seçemez veya düzenleyemezsiniz. Dilimlerin yığınlama sırasını her düzenlediğinizde alt dilimler yeniden üretilir.

Dilimler, farklı yöntemler kullanılarak oluşturulur: Otomatik dilimler otomatik olarak oluşturulur.

Kullanıcı dilimleri Dilim aracıyla oluşturulur.

759

Katman tabanlı dilimler Katmanlar panelinde oluşturulur.

Web sayfasını dilimleme

Başa dön

Dilim aracını kullanarak doğrudan görüntünün üzerine dilim çizgileri çizebilir veya katmanları kullanarak grafiğinizi tasarlayabilir ve ardından katmanlar tabanında dilimler oluşturabilirsiniz.

Dilim aracıyla dilim oluşturma

1. Dilim aracını seçin. (Kırpma aracı ile bir arada gruplanmış araçlar arasında gezmek için C tuşuna basın.) Varolan dilimler belge penceresinde otomatik olarak gösterilir.

2. Seçenekler çubuğunda stil ayarını seçin:

Normal Siz sürükledikçe dilimin oranlarını belirler.

Sabit Boyut Oranı En boy oranını belirler. En boy oranı olarak tam sayı veya ondalık değer girin. Örneğin, eni boyunun iki katı olan bir dilim oluşturmak için en değerini 2 boy değerini 1 olarak girin.

Sabit Boyut Dilimin yüksekliğini ve genişliğini belirler. Piksel değerlerini tam sayı olarak girin.

3. Dilimi oluşturmak istediğiniz alanın üzerinde sürükleyin. Dilimi kare olacak şekilde sınırlamak için Shift tuşuna basarak sürükleyin. Merkezden çizmek için, Alt (Windows) veya Option (Mac OS) tuşunu basılı tutup sürükleyin. Yeni dilimi kılavuza veya görüntüdeki başka bir dilime hizalamak için Görünüm > Yaslama Yeri seçeneğini kullanın. Bkz. Kullanıcı dilimlerini taşıma, yeniden boyutlandırma ve yaslama.

Kılavuzlardan dilim oluşturma

1. Görüntüye kılavuzlar ekleyin.

2. Dilim aracını seçin ve seçenekler çubuğunda Kılavuzlardan Gelen Dilimler'i tıklatın. Kılavuzlardan dilimler oluşturduğunuzda, varolan tüm dilimler silinir.

Katmandan dilim oluşturma

Katman tabanlı bir dilim, katmandaki tüm piksel verilerini içine alır. Katmanı taşır veya katmanın içeriğini düzenlerseniz, dilim alanı yeni pikselleri içerecek şekilde otomatik olarak ayarlanır.

Kaynak katmanda değişiklik yapıldığında katman tabanlı dilim güncelleştirilir.

Katman tabanlı dilimler kullanıcı dilimlerinden daha az esnektir; bununla birlikte, katman tabanlı bir dilimi kullanıcı dilimine dönüştürebilirsiniz ("yükseltme"). Bkz. Otomatik ve katman tabanlı dilimleri kullanıcı dilimlerine dönüştürme.

1. Katmanlar panelinde bir katman seçin.

2. Katman > Yeni Katman Tabanlı Dilim'i seçin.

Animasyon sırasında katmanı görüntünün büyük bir alanı üzerinde taşımayı planlıyorsanız, dilimin boyutları kullanışlı bir boyutu aşabileceğinden katman tabanlı dilim kullanmayın.

Otomatik ve katman tabanlı dilimleri kullanıcı dilimlerine dönüştürme

Başa dön

Katman tabanlı dilim katmanın piksel içeriğine bağlıdır, bu nedenle söz konusu dilimi kullanıcı dilimine dönüştürmediğiniz sürece bu dilimi taşıma, birleştirme, bölme, yeniden boyutlandırma ve hizalamanın tek yolu katmanı düzenlemektir.

Görüntüdeki tüm otomatik dilimler birbirine bağlıdır ve aynı en iyileştirme ayarlarını paylaşır. Otomatik dilimlerden biri için farklı en iyileştirme ayarları belirlemek istiyorsanız, bunu kullanıcı dilimine yükseltmeniz gerekir.

1. Dilim Seçimi aracını kullanarak dönüştürmek üzere bir veya birden çok dilim seçin.

2. Seçenekler çubuğunda Yükselt'i tıklatın.

Otomatik dilimi, Web ve Aygıtlar İçin Kaydet iletişim kutusunda bağlantısını keserek yükseltebilirsiniz. Bkz. Web ve Aygıtlar İçin Kaydet iletişim kutusunda dilimlerle çalışma

760

Dilimleri ve dilim seçeneklerini görüntüleme

Başa dön

Dilimleri Photoshop'ta ve Web ve Aygıtlar İçin Kaydet iletişim kutusunda görüntüleyebilirsiniz. Aşağıdaki özellikler dilimleri belirlemenize ve bunları birbirinden ayırmanıza yardımcı olabilir:

Dilim çizgileri Dilimin sınırlarını tanımlar. Düz çizgiler bunun bir kullanıcı dilimi veya katman tabanlı dilim olduğunu; noktalı çizgiler ise otomatik dilim olduğunu gösterir.

Dilim renkleri Kullanıcı dilimleriyle katman tabanlı dilimleri otomatik dilimlerden ayırır. Varsayılan olarak, kullanıcı dilimleri ve katman tabanlı dilimlerin sembolleri mavi, otomatik dilimlerin ise gridir.

Buna ek olarak, Web ve Aygıtlar İçin Kaydet iletişim kutusu seçili olmayan dilimleri soluk göstermek için renk ayarlamalarını kullanır. Bu ayarlamalar yalnızca görüntüleme amacıyla kullanılır ve son görüntünün renklerini etkilemez. Varsayılan olarak, otomatik dilimler için yapılan renk ayarlamasının miktarı, kullanıcı dilimleri için yapılanın iki katıdır.

Dilim numaraları Dilimler, görüntünün sol üst köşesinden başlayarak soldan sağa ve yukarıdan aşağıya numaralandırılır . Dilimlerin yerleşimini veya toplam sayısını değiştirirseniz, dilim numaraları yeni sırayı yansıtacak şekilde güncelleştirilir.

Dilim işaretleri Aşağıdaki işaretler veya simgeler, çeşitli durumları gösterir.

Kullanıcı diliminin Görüntü içeriği vardır.

Kullanıcı diliminin Görüntü Yok türünde içeriği vardır. Dilim katman tabanlı.

Dilim sınırlarını gösterme veya gizleme

Görünüm > Göster > Dilimler'i seçin. Dilimlerin diğer öğelerle birlikte gizlenmesi ve gösterilmesi için Ekstralar komutunu kullanın. Bkz. Ekstralar'ı gösterin ya da gizleyin.