Adobe Fireworks CS3 Yardımcı El Kitabı

1

İçindekiler Bölüm 1 Genel Bilgiler........................................................................................................ 3 Bölüm 2 Bitmap Düzenleme .............................................................................................. 5 Bölüm 3 Vektörel Araçlar ................................................................................................. 25 Bölüm 4 Katmanlar ve Sayfalarla Çalışmak .................................................................... 35 Bölüm 5 Metin Eklemek.................................................................................................... 43 Bölüm 6 Gelişmiş Teknikler.............................................................................................. 51 Bölüm 7 Düğmeler Oluşturmak....................................................................................... 59 Bölüm 8 Dilimler ve Aktif Bölgeler .................................................................................. 65 Bölüm 9 Optimizasyon ve İhraç Etmek ........................................................................... 71 Bölüm 10 Maskeleme ve Açılır Menüler.......................................................................... 93

2

Fireworks CS3 – Bölüm 1: Genel Bilgiler

Bölüm 1 Genel Bilgiler

3

Fireworks CS3 – Bölüm 1: Genel Bilgiler

Giriş Adobe Fireworks CS3 güçlü bir tasarım ve grafik editörüdür. Adobe Dreamweaver CS3 ise güçlü bir Web sayfası yazma ve Web sitesi oluşturma programıdır. Fireworks ve Dreamweaver birlikte kullanıldıklarında eksiksiz bir Web geliştirme çözümü sunan güçlü bir çift Web tasarımı aracı olarak karşımıza çıkar. Siz grafiklerinizi tasarlar ve optimize ederken, HTML sayfalarını oluştururken ve Web grafiklerini sayfaya yerleştirirken, söz konusu programlar iş akışınıza yardımcı olan bütünleşik özellikleri sunar.

Minimum Sistem Gereksinimleri Windows • 1,7 GHZ Intel Pentium IV veya daha hızlı bir işlemci • Windows 2000 veya Windows XP • Netscape Navigator veya Internet Explorer 6.0 veya sonraki sürümleri • 512 MB RAM (1 GB önerilir) • 2 GB kullanılabilir disk alanı • 1024 x 768 çözünürlükte milyonlarca renk önerilir

4

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Bölüm 2 Bitmap Düzenleme

5

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Adobe Fireworks CS3 hem bitmap (yani piksel tabanlı) düzenleme ortamı hem de vektörel bir çizim programıdır. Bu iki çizim yöntemi Fireworks uygulamasında birleşerek size güçlü ve çok yönlü bir araçlar kümesi sunar. Bitmap’ler, piksellerden oluşan resimlerdir. Bir tuval üzerindeki bir resimde olduğu gibi, bir hatayı kaldıramazsınız; bu hatayı silmeli veya hatayı “boyayarak” kapatmalısınız. Vektörel nesneler, matematiksel çizgilerden oluşan resimlerdir. Bu yüzden kolaylıkla taşınabilir, yeniden şekillendirilebilir ve hatta silinebilirler. Fireworks, bitmap resimlerinin görünümü ile vektör grafiklerin esnekliği, kontrol edilebilirliği ve düzenlenebilirliğini tek bir ortamda birleştirir. Nesneler üzerinde yumuşak, belli belirsiz gölgeler oluşturduktan sonra nesnenin şeklini değiştirdiğinizde, gölgenin yeni şekile göre yeniden oluşturulduğunu görürsünüz. Bir bitmap resmi düzenlemek ile vektörel bir nesne üzerinde değişiklik yapmak iki farklı işlemdir. Fireworks’teki Araçlar paneli uygun araçları seçebilmenizi kolaylaştırmak için bir vektör araçları kümesine ve bir bitmap araçları kümesine bölünmüştür. Eğer bir bitmap resmi seçiliyken vektör aracı kullanırsanız, Fireworks otomatik olarak vektör düzenleme moduna geçer. Eğer bir vektör nesnesi seçili durumdayken, bir bitmap aracı seçerseniz, tuvalde bir bitmap nesnesi varsa bitmap düzenleme moduna geçersiniz. Eğer bir bitmap nesneniz yoksa, imleç evrensel olarak kabul edilen “Hayır” sembolüne (üzerinde çapraz bir çizgi olan daire) dönüşür ve sizi uyarır; Fireworks bir vektör nesnesi üzerinde bir bitmap aracı kullanmanıza izin vermeyecektir. Geçiş öylesine rahat olur ki, aracın değiştirildiğini anlamayabilirsiniz.

Bu Bölümde Neler Öğreneceksiniz? • • • • • •

Bitmap ve Vektörel çizimler Fireworks arayüzü Kırpma aracı Sihirli Değnek aracı Kement Aracı Lastik Damgası Aracı

6

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Fireworks Araçlar Paneli Fireworks, Araçlar panelindeki simgelere tıklayarak ve aşağıdaki şekilde gösterilen kısayol tuşlarını kullanarak seçebileceğiniz çeşitli araçlara sahiptir. Eğer aracın sağ alt köşesinde küçük siyah bir dikdörtgen varsa, bu araç bir gruptaki araçlardan biridir. Diğer araçlara erişebilmek için fare tuşunu bir süre basılı tutmanız gerekir. Örneğin İşaretçi aracı (Araçlar panelinin en üstte solda) üzerinde fare tuşuna basılı tutarak bu gruptaki diğer aracı (Arkasındakini Seç aracı) görebilirsiniz. Araçlar paleti açık değilse Pencere > Araçlar seçimini yapın. İşaretçi aracının kısayol tuşu V veya 0’dır (sıfır); bu iki tuştan birine basarak gruptaki diğer araca geçebilirsiniz. İhtiyaç duyduğunuz aracı daha kolay bir şekilde bulabilmeniz amacıyla Araçlar paneli altı kısma ayrılmıştır: Seç, Bitmap, Vektör, Web, Renkler ve Görünüm.

7

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Başlangıç Sayfası Fireworks uygulamasını çalıştırdığınızda, yeni bir Fireworks dosyası oluşturmak veya mevcut bir Fireworks dosyasını açmak için seçenekler içeren bir başlangıç sayfası görüntülenir. Bu sayfada ayrıca son kullandığınız dosyalara ait bir liste de bulunur. Bu dosyaları açmak için sadece tıklamanız yeterli olacaktır. Oldukça zaman kazandırıcı olan bu özellik sayesinde, güncel bir dosyayı açmak için sabit diskinizde dolaşmanıza gerek kalmaz.

8

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Kayan ve Kenetlenmiş Palet Grupları Nesneleri ve resimleri değiştirmek için kullanılan paneller belge üzerinde “kayarak yüzer”, bu yüzden daima üstte kalırlar. Fireworks uygulamasını ilk çalıştırdığınızda, ekranın sağ tarafında bazı panellerin gruplandığını göreceksiniz. Paneli kapatmak veya açmak için açığa çıkarma üçgenine tıklamanız gerekir. Panellerin hepsi başlangıçta gruplanmamıştır. Örneğin, Pencere > Renk Örnekleri seçimini yapın. Renkler adında bir panel grubu açılır ve çalışma alanınızın üzerinde kayar durumda bulunur. Bu panelin içinde Renk Örnekleri ve Karıştırıcı panelleri vardır. Sekmesine tıklayarak istediğiniz paneli seçin. Renkler panel grubunu kenetleme alanına dahil etmek isterseniz, imleci panelin sol tarafındaki tutaç adı verilen noktalı alanın üzerine getirin. İmleç dört noktalı bir oka (Windows) veya bir ele (Macintosh) dönüşür. Bu imleci gördüğünüzde, paneli diğer panelin kenetlenme alanına sürükleyin. Fare tuşunu bıraktığınızda, panel diğer panel grubuyla kenetlenir. Bir paneli kenetlenme alanından çıkarmak için, imleci noktalı alanın üzerine getirerek daha önce gördüğünüz imleç şeklini (dört noktalı ok veya el) almasını bekleyin; ardından paneli kenetlenme alanının dışına sürükleyin. Bir paneli kendi grubundan çıkarmak için Seçenekler menüsünü kullanın. Panellerle çalışırken, bunları taşımanız ve kapatmanız gerekecek. Panelleri orijinal konumlarına getirmek için Pencere > Çalışma Alanı Mizanpajları seçimini yapın ve listelenen ekran boyutlarından birini seçin. Paneller seçtiğiniz ekran boyutuna göre konumlandırılır. Bu komut aynı zamanda monitörünüzü değiştirdiğinizde çok kullanışlıdır. Paneller yeni monitöre uyum sağlayacak şekilde taşınır.

9

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Aynı zamanda kendi panel yerleşim ayarlarınızı da kaydedebilirsiniz. Panelleri dilediğiniz gibi yerleştirin ve ardından Pencere > Çalışma Alanı Mizanpajları > Geçerliyi Kaydet seçimini yapın. Küme için bir ad yazın ve ardından Tamam düğmesine tıklayın. Komutu tekrar kullanırsanız, yeni yerleşim kümesinin listelendiğini göreceksiniz.

Özellikler Denetçisi Özellikler denetçisi çalışma alanının altında varsayılan olarak görüntülenir. Söz konusu panel, seçili nesnenin veya aracın çeşitli özelliklerini değiştirmek için denetimler içerir. Örneğin, dikdörtgen gibi bir vektör nesnesi seçili durumdayken, genişlik, yükseklik ve X ve S konumları gibi değerleri görebilir ve değiştirebilirsiniz. Ayrıca dikdörtgenin Dolgu, Dış hat ve Filtreler gibi özelliklerini de Özellikler denetçisi ile değiştirebilirsiniz. Sonraki derslerde bu denetimlerle ilgi daha fazla bilgi edineceksiniz. Özellikler denetçisi görünür durumda değilse Pencere > Özellikler seçimini yaparak açabilirsiniz. Panelin sol alt köşesindeki genişletici oka tıklayarak paneli küçültebilir veya büyütebilirsiniz.

Bitmap Nesneleri Düzenlemek Fotoğraflar veya taranmış grafikler Fireworks ile açılabilir veya program içine ithal edilebilir. Fireworks aşağıdaki bitmap dosya türlerini tanır: Photoshop dosyaları (PSD), TIFF, JPEG, GIF, BMP, PICT (Macintosh), PNG ve TGA. Bir resmi açtıktan veya ithal ettikten sonra çeşitli düzenlemeler yapabilirsiniz. Bir bitmap resmindeki pikselleri değiştirmek için, ilk olarak düzenleme yapacağınız resim alanını seçersiniz. Bir seçim yaptıktan sonra, sadece bu seçim içindeki pikselleri düzenleyebilirsiniz. Seçimin dışındaki piksellerde değişiklik yapılamaz. Bitmap resimleri bitmap modunda piksel piksel (Kurşun Kalem, Fırça veya Silgi aracıyla) veya seçimleri kullanarak düzenleyeceksiniz. Pikselleri renk değerlerine göre veya alandaki konumlarına göre seçmek için seçim araçlarını kullanın. Yaptığınız değişiklikler sadece seçim alanındaki pikselleri etkiler.

10

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Görüntü Büyütme Oranını Değiştirmek Eğer monitörünüz küçükse, resmin tamamını veya resmin etrafındaki mavi kenarlığı göremeyebilirsiniz. Fireworks’te görüntü büyütme oranını değiştirebilmek için çeşitli yöntemler vardır. Belge penceresinin sağ alt kısmında bir yüzde oranı göreceksiniz. Bu sayıya tıklayın ve görüntülenen açılır menüden bir yüzde oranı seçin. Yakınlaştırma aracını aynı zamanda Araçlar panelinin Görünüm kısmından da seçebilirsiniz. Görüntü büyütme oranını artırmak veya yakınlaştırmak için tuvale tıklayın. Görüntü büyütme oranını düşürmek veya resmi uzaklaştırmak için tıklarken Alt (PC) veya Option (Mac) tuşuna basılı tutun. Görünüm menüsü Yakınlaştır ve Uzaklaştır tuşları ile Büyütme alt menüsünü içerir. Yakınlaştırmak için kullanılan klavye kısayol tuşları Macromedia FreeHand ve Adobe Photoshop uygulamalarındakilerle aynıdır: Ctrl+ çubuğu (PC) veya Command+ (Mac). Uzaklaştırmak (Görüntü büyütme oranını düşürmek) için Ctrl+- (PC) veya Command+- (Mac).

Tuval Rengini Değiştirmek Canvas Color, belgenizin arkaplan rengidir. Bir resmi bir Web sayfasına yerleştirmek üzere ihraç ettiğinizde, resmin sayfa ile uyumlu görünmesini sağlamak için genellikle tuval rengini Web sayfasının rengiyle aynı yapmak istersiniz. Tuval rengini değiştirmek için aşağıdakilerden birini yapın: • Değiştir > Tuval > Tuval Rengi seçimini yapın. Tuval Rengi iletişim kutusunda Beyaz’ı seçin. • Özellikler denetçisinde Tuval Renk kutusuna tıklayın. Renk paletinden beyaz rengi seçin.

11

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Özellikler denetçisi seçili nesneyle ilgili bilgileri görüntüler. Eğer seçili durumda bir nesne yoksa, Özellikler denetçisinde belge hakkında bilgiler görüntülenir: tuval rengi ve tuval boyutu. Eğer bitmap resim seçiliyse İşaretçi aracına geçin ve resmin dışına tıklayarak veya Seç > Seçimi Kaldır seçimini yaparak seçimden çıkarın. Özellikler denetçisinde tuvalin veya resmin boyutunu değiştirmek için Tuval Boyutu’na veya Görüntü Boyutu’na tıklayın. Özellikler denetçisinde Tuval renk kutusuna tıklayarak açılan renk kutusundan tuval için bir renk seçin. Tuvali üzerindeki öğelerin sınırıyla boyutlandırmak için Tuvali Sığdır düğmesine tıklayın.

Kırpma Aracını Kullanmak Kırpma alanının dışındaki pikselleri bırakmak için Kırpma aracı tercihlerini değiştirebilirsiniz. Düzenle > Tercihler (Windows) veya Fireworks > Tercihler (Mac) seçimini yapın. Kırparken nesneleri silmek için seçeneği iptal edin. Araçlar panelinden Kırpma aracını seçin. İmleç kırpma aracının simgesine dönüşür. Kırpmak istediğiniz alanı çerçeveleyecek şekilde bir dikdörtgen çizin. Sürüklerken, saklamak istediğiniz alanı belirten kesik çizgili bir dikdörtgen göreceksiniz. Fare tuşunu bıraktıktan sonra bile, köşe tutamaçlarından birini ya da dikdörtgenin kenarlarından birini kaydırarak alanı değiştirebilirsiniz. Eğer kırpma alanını taşımak isterseniz, sürüklemeye dikdörtgenin içinden başlayın. Kırpma alanının içindeyken imleç dört uçlu bir ok olarak görüntülenir.

12

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Bilgi Panelini Kullanmak Bitmap resmin gri arkaplanına baktığınızda, tüm gri piksellerin benzer renklere sahip olduğunu görürsünüz. Aslında renkler çok geniş bir çeşitliliktedir. Renklerdeki farkları görebilmek için Bilgi panelini kullanabilirsiniz. Pencere > Bilgi seçimini yapın. İmleci resmin üzerinde taşıyın ve Bilgi panelindeki değerlerin değişimine dikkat edin. Bilgi paneli fare imlecinin tam altındaki pikselin renk ve konumunu görüntüler.

Sihirli Değnek Aracını Kullanmak Sihirli Değnek aracıyla, aynı veya benzer renkler içeren komşu pikselleri seçebilirsiniz. Benzerlik düzeyi, Özellikler denetçisinde ayarladığınız tolerans düzeyine bağlıdır. En düşük düzey (sıfır) sadece bir renk seçer; aracın ucuyla sadece tamamen aynı olan renk piksellerini seçebilirsiniz. En yüksek ayar (255) seçilecek renklerin en geniş aralıkta olmasını sağlar. Örneğin, eğer tolerans 50 olarak ayarlanırsa ve seçilen rengin RGB değeri R= 100, G = 100 ve B = 100 ise, 50, 50, 50 ile 150, 150, 150 aralığındaki renkler seçilecektir. Düşük bir tolerans değeri kullanırsanız (örneğin 10), araçla tıkladığınızda küçük bir alanla sınırlı pikseller seçilir. Özellikler denetçisinde Sihirli Değnek aracı için üç seçenek görüntülenir. Tolerans ve Kenar ve Canlı Seçim Çerçevesi. Özellikler denetçisinde Tolerans metin kutusuna bir değer girin veya değeri değiştirmek için sürgüyü kaydırın. Tolerans düzeyi Sihirli Değnek aracının ucuyla seçtiğiniz piksellere bitişik olan piksellerin sayısını kontrol eder. En düşük tolerans düzeyi (sıfır), sadece seçtiğiniz pikseli seçime alır. Tolerans düzeyini artırmak seçiminizdeki renklerin sayısını artırır. Seçilen alandaki farkları görebilmek için tolerans düzeyini değiştirmeyi deneyin. Kenar menüsü seçilen piksellerin kenar görüntüsünü kontrol eder.

13

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Özellikler denetçisinde Kenar menüsünden Sert, Kenar Yumuşatma veya Geçiş Yumuşatma seçimini yaparak kenarın görünümünü değiştirebilirsiniz. Yatay veya dikey olmayan bir kenardaki sert kenar seçilmesi, merdiven basamağı gibi bir görüntü oluşmasına yol açar. Bunun nedeni kare şeklindeki piksellerden eğri veya çapraz bir çizgi oluşturmaya çalışmaktır; bu da mümkün değildir. Kenar Yumuşatma etkisi, kenarlardaki ön alan ve arkaplan piksellerini karıştırarak daha yumuşak bir görünüm oluşmasını sağlar. Daha açık ve daha koyu olan pikseller gözü daha yumuşak bir kenar görecek şekilde aldatır. Geçiş Yumuşatma etkisi ise kenar rengiyle arkaplan rengi arasına bir harman uygular. Eğer Geçiş Yumuşatma seçimini yaparsanız, Geçiş Yumuşatma sürgüsünü kaydırarak harmanlamanın miktarını ayarlayın. Canlı Seçim Çerçevesi seçeneği bir seçim yapıldıktan sonra Sihirli Değnek ayarlarını değiştirebilmenizi sağlar. Seçim alanı, ayarları değiştirirken dinamik olarak güncelleştirilir. Seçiminizi yaptıktan sonra klavyenizden delete tuşuna basarak seçili alanı silebilirsiniz.

Seçimi Kaydetmek Eğer yapmış olduğunuz bir seçimi daha sonra kullanacaksanız bu durumda onu kayıp etmemek için kayıt etmek isteyebilirsiniz. Bunu için Seç > Bitmap Seçimini Kaydet seçeneğini kullanabilirsiniz.

Düzeyleri Ayarlamak Ara sıra bitmap resimlerin renk değerlerini ayarlamanız gerekebilir. Resim çok koyu ya da çok açık olabilir veya yeterince karşıtlığa (kontrast) sahip olmayabilir. Düzeyler iletişim kutusu resimdeki gölgeleri, ara tonları ve parlak noktaları ayarlamanızı sağlar.

14

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Düzeyleri ayarlamak için Filtreler > Renk Ayarla > Düzeyler seçimini yapın. Düzeyler iletişim kutusunda bir histogram (her açıklık değeri için bir pikseller parseli) görüntülenir. Histogramın altında beyaz ve siyah noktaları ve orta tonları ayarlamak için üç sürgü bulunur. Ayarlamalar yaparken resmi görebildiğinizden emin olun. Dilerseniz Düzeyler iletişim kutusunu taşıyabilirsiniz.

Beyaz sürgüyü (sağdaki) yavaşça sola kaydırın. Sürgüyü kaydırırken resmin açık kısımlarına bakın. Bu kısımların sürgüyü kaydırırken daha da açıldığını göreceksiniz. Ortadaki sürgünün sağdaki sürgüyle birlikte hareket ettiğine dikkat edin. Ortadaki sürgü ara tonları ayarlar.

Kement ve Çokgen Kement Araçlarını Kullanmak Kement aracı, bir alanın etrafında serbest formlu bir seçim sınırı oluşturur. Sürüklediğiniz yerde bir seçim dış çizgisi oluşturursunuz. Fare tuşunu bıraktığınızda, seçim alanı otomatik olarak kapanır. Seçim alanını kendi kendinize kapatmak için, seçimin ilk noktasına geri dönmelisiniz. Başladığınız noktaya yaklaştığınızda, imleç küçük bir kare simgesi görüntüler. Seçimi kapatmak (yani kapalı bir bölge oluşturmak) için, kareyi gördüğünüzde fare tuşunu bırakın. Çokgen Kement aracı düz çizgi parçaları çizer. Bu araç Kement aracından farklı bir şekilde çalışır; seçimi yapmak için aracı sürüklemek yerine, ilk noktanız için tıklayın, yeni bir konuma geçin ve tekrar tıklayarak bir çizgi parçası oluşturun. Kement aracıyla olduğu gibi, başlangıç noktasına yaklaştığınızda imlecin yanında bir kare simgesi görüntülenir. Kareyi gördüğünüzde seçimi kapatmak

15

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

için tıklayın. İmleci başlangıç noktasına taşımadıysanız, seçimi kapatmak için çift tıklayabilirsiniz. Sihirli Değnek aracıyla olduğu gibi, Kement aracıyla da çizdiğiniz seçimin kenarlarını kontrol edebilirsiniz. Bu konuda bilgi için daha önceki kısımlarda bulunan “Sihirli Değnek Aracını Kullanmak” başlıklı konudaki notu okuyun. Araçlar panelinden Çokgen Kement aracını seçin, Özellikler denetçisinde Kenar ayarını Kenar Yumuşatma olarak ayarlayın ve Canli Seçim Çerçevesi onay kutusunu işaretleyin.

Bu aracı kullanırken yapmanız gereken etrafını çizmek istediğiniz tüm resmin köşe noktalarına bir kere tıklamak olacak. Böylelikle tekrar başlangıç noktasına döndüğünüzde seçimi tamamlamış olursunuz.

16

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Seçimleri Eklemek ve Çıkarmak Bir alanı seçerken Shift tuşuna basılı tutmak, alanı seçime ekler. Alt (Windows) tuşuna basılı tutmak ise seçimden çıkarır. Eğer imleç üzerinde artı işareti görmeden tıklarsanız, önceki seçiminiz, seçimden çıkarılır. Shift tuşuna basmak yeni bir seçime başlamadan mevcut seçime ekleme yapmanızı sağlar.

Yeni Bir Belge Oluşturmak Yeni bir belgeye başladığınızda, tuval boyutunu, rengini ve görüntü çözünürlüğünü ayarlamanız gerekir. Dosya > Yeni seçimini yaparak yeni, boş bir belge oluşturun. Yeni Belge iletişim kutusu açılır. Değiştir > Tuval > Tuval Boyutu seçimini yaparak, Kırpma aracıyla belgeyi kırparak ya da Değiştir > Tuval > Tuvali Kes seçimini yaparak tuval boyutunu değiştirebilirsiniz. Web grafikleri varsayılan olarak 72 ppi olarak kaydedilir. Değiştir > Tuval > Görüntü Boyutu seçimini yaparak belge çözünürlüğünü değiştirebilirsiniz. Tuval rengi belgenizin arkaplan rengidir. Tuval rengi olarak seçtiğiniz renk aynı zamanda ihraç edeceğiniz HTML sayfasının arkaplan rengidir. Eğer arkaplan rengi Saydam olarak ayarlanırsa, saydam arkaplan beyaz olarak ihraç edilecektir. Windows’ta, .png uzantısı dosya adına otomatik olarak eklenir. Macintosh’ta, Kaydet iletişim kutusunda .png uzantısı eklemek için (seçili değilse) Dosya Uzantısı Ekle’yi seçin. Bir defa seçildikten sonra bu seçenek, ileride kaydedeceğiniz dosyalar için varsayılan olarak kullanılır. Macintosh bilgisayarlar için gerekli olmasa da, özellikle dosyalarınızı Windows kullanıcılarıyla paylaşırsanız, dosyalarınıza uygun uzantılar eklemek iyi bir fikirdir.

Kopyalama ve Yapıştırma Herhangi bir resmi yada seçim araçları ile seçtiğiniz resim parçasını kopyalayıp yeni bir doküman oluşturduğunuzda Fireworks kopyaladığınız alan boyutunda yeni bir doküman oluşturur.

17

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Resmi Ölçeklemek Ölçek aracıyla resmin köşe noktalarından birini sürükleyerek küçültme işlemini yapabilirsiniz. Ayrıca bir yüzde oranıyla resmi kesin bir değerle de ölçekleyebilirsiniz. Aklınızda tutmanız gereken önemli bir nokta resmin bitmap bir resim olduğudur. Bitmap resimleri küçültebilirsiniz, ancak büyütemezsiniz. Resmin çözünürlüğü 72 ppi olup resmi büyütmek için yeterince piksel yoktur. Eğer boyutu artırırsanız, resim kalitesi düşer ve ortaya çıkan yeni resim sizi memnun etmez. Resmi İşaretçi aracıyla seçin. Resmin etrafında mavi bir seçim sınırı görünür. Araçlar panelinden Ölçek aracını seçin. Resmin etrafında ve kenarlarında tutamaçlar görünür. Ölçek aracı hem resmi ölçeklemek, hem de döndürmek için kullanılabilir. İmleci köşe tutamaçlarından birinin yakınına sürükleyin ama değdirmeyin. İmleç dairesel bir oka dönüşür. Bu simge döndürme modunda olduğunuzu belirtir. İmleci tutamaçlardan birinin üzerine getirin. İmleç çift yönlü bir oka dönüşür. Bu simge ölçekleme modunda olduğunuzu belirtir. Ölçek aracını kullanırken değiştirici tuşlara (Alt veya Option) basmak resmi merkezden boyutlandırır. Değiştirici tuşları kullanmazsanız, paketi tuvalin merkezine geri getirmeniz gerekir. Köşe tutamaçlarından birini Ölçek aracı yerine İşaretçi aracıyla sürüklemeyi seçerseniz, resmi orantılı olarak ölçeklemek için Shift tuşuna basmanız gerekir. Eğer basmazsanız resim bozulabilir. Ölçek aracıyla, sürüklerken Shift aracına basılı tutmanız gerekmez.

18

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Resminizin Boyutunu Değiştirmek Değiştir > Tuval > Görüntü Boyutu seçeneğini kullanarak resminizin boyutunu kolaylıkla değiştirebilirsiniz. Bu seçeneği seçtiğinizde karşınıza bir iletişim penceresi çıkar. Bu pencere içinden resminizin boyutunu değiştirebilirsiniz.

Orantıları koru onay kutusunu seçmek belgenin genişliği ve yüksekliği arasındaki oranı korur. Görüntüyü yeniden örnekle seçimiyle, Fireworks resme pikseller ekleyerek veya çıkararak resmi farklı boyuta yakınlaştırır.

Seçimi Kopyalamak Seçiminizin çeşitli kopyalarını yapmak için çeşitli yollar vardır. Büyük olasılıkla Düzenle menüsündeki Kopyala ve Yapıştır komutlarına aşinasınız. Bu komutları kullanabilirsiniz, fakat kopyanın yerleştirilmesi için kullanabileceğiniz daha iyi bir yöntem vardır. Bunun için kopyalamak istediğiniz resmi seçin ve sürüklemeye başlayın sürükleme işlemini bitirmeden önce Alt tuşuna basılı tutun. Böylece bir kopyanın oluştuğunu göreceksiniz. Önce farenizin sol butonunu sonra da Alt tuşunu bırakın.

19

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Lastik Damgası Aracını Kullanmak Lastik Damgası aracını kullandığınızda, bir alanın piksel kopyasını, aynı bitmap nesnesine ait başka bir alana kopyalarsınız. Bu araç daha çok fotoğrafçılarda resimleri rötuşlamak için kullanılır. Bu araç iki farklı parçadan oluşmaktadır. Bunlardan bir tanesi kaynak ikincisi ise hedef alanı. Aracın temel amacı kaynak alanındaki dokuyu alarak hedef alanının üzerine kopyalamasıdır. Ayar noktasını belirten bir artı işareti görünür. Ayar noktası kopyanızın başlangıç noktasıdır. Daireler çizmek için okuldayken kullandığınız pergeli hatırlıyor musunuz? Pergelin bir tarafında kalem, diğer tarafında ise sivri bir uç bulunurdu. Sivri ucu kağıdınızın üzerine yerleştirip, kalemi sürükleyerek bir daire çizerdiniz. Sivri uç ayar noktasıdır. Kalem ayar noktasından sabit bir uzaklığa yerleştirilir. Lastik Damgası aracını kullanmak için, ayar noktasını belirtir ve daha sonra Lastik Damgası imlecini kopyayı yerleştirmek istediğiniz konuma taşırsınız. Lastik Damgası imleci ile ayar noktası arasındaki mesafe, pergeldeki gibi sabit kalır. Lastik Damgası imlecini taşırken, ayar noktası bununla birlikte hareket eder ve uzaklık sabit kalır. Ayar noktasındaki dijital bilgiler kopyalanır ve yeni konuma boyanır.

20

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Özellikler denetçisi, Lastik Damgası aracının davranışını kontrol etmek için başka yöntemler de sağlar. İmleci, orijinal kopyalanmış alana olan ilişkiyi kaybetmeden bırakmak isterseniz Kaynak hizalanmış seçimini yapın. Bu seçenek resmin bir kısmını yeni bir konuma kopyalamak istediğiniz zaman faydalıdır. Fare tuşunu bırakıp resmin başka bir kısmına tıkladığınızda, ayar noktası ile tıkladığınız nokta arasındaki mesafe aynı kalır. Tekrar pergel örneğini düşünün. Sivri uç ve kalem arasındaki mesafeyi sabit tutarsanız, ayar noktasını seçebilir ve yeni bir konuma taşıyarak çizim yapabilirsiniz. Kopyalanan alanın birden çok kopyasını yapacaksanız, Kaynak hizalanmış’ı seçili halden çıkarın. Fare tuşunu bırakıp yeni bir konuma geçerseniz, ayar noktası orijinal konuma geri döner. Pergel örneğini tekrar kullanırsak, bir kopya oluşturduktan sonra, sivri uç ile kalem arasındaki mesafeyi azaltabilirsiniz; ancak daima çizime aynı noktadan başlarsınız. Örnek açılır menüsündeki seçenekler belgenin hangi kısmının kopyalandığını belirler. Belgenizde sadece bitmap resim varsa ayar uygulanmaz. Bitmap resimle birlikte vektör nesneler de mevcutsa, bitmap resmin üzerinde bir vektör nesnesi varsa bile, Resim seçimini yaparak sadece pikselleri kopyalayabilirsiniz. Bitmap resimle birlikte vektör nesneyi de kopyalamak isterseniz, Belge seçimini yapın.

Leke Aracını Kullanmak Leke veya Bulanıklaştırma aracını kullanarak kenarları düzeltebilirsiniz. Leke aracı bitişik piksel renklerini yayar. Bir duvar üzerinde yeni boyanmış olan iki renk olduğunu düşünün. Eğer parmağınızı bir renkten diğerine doğru sürüklerseniz, ilk boyanın rengi diğer renge karışır. Boya üzerine ne kadar sert bastırırsanız, o kadar renk diğer renge bulaşır. Leke aracı aynı işlemi pikseller üzerinde yapar. Bir rengi diğer birine bulaştırmak için tıklar ve sürüklersiniz. Resmin ince ayarını yapmak için basınç, kenar yumuşaklığı ve boyut gibi denetimler vardır. Araçlar panelinden Leke aracını seçin. Bulanıklaştırma aracına basılı tutarak bu araç grubundaki diğer araçları görüntüleyin. Bu gruptaki araçlar Bulanıklaştırma, Keskinleştir, Soldurma, Yakma ve Leke araçlarıdır. Belgenizin büyütme oranını 200% olarak ayarlayarak aracı kullanırken ayrıntıları daha belirgin bir şekilde görebilirsiniz.

21

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Leke aracını kullandıktan sonra oluşan sert kenarlara dikkat ederseniz, Bulanıklaştırma aracını kullanmak isteyebilirsiniz. Bulanıklaştırma aracı komşu pikseller arasındaki karşıtlığı azaltır. Leke aracıyla olduğu gibi, aracın boyutunu ve yumuşaklığını ayarlayabildiğiniz gibi resimdeki bulanıklığın yoğunluğunu da ayarlayabilirsiniz. Bu ayarları, Araçlar panelinden aracı seçtikten sonra Özellikler denetçisinde yapabilirsiniz. Araç özelliklerini seçtikten sonra aracı kullanmak için karışım yapmak istediğiniz renkler üzerinde farenizin sol tuşuna basarak sürükleme yapın. Bu işlem sonucunda ayarlarınıza göre renklerin birbirine karıştığını göreceksiniz.

Silgi Aracını Kullanmak Silgi aracını bitmap modunda kullanarak pikselleri silebilirsiniz. Özellikler denetçisindeki Silgi aracı seçenekleriyle şu değişiklikleri yapabilirsiniz: • Size sürgüsünü kullanarak veya bir değer girerek Silgi aracının boyutunu değiştirebilirsiniz • Kenar sürgüsünü kullanarak Silgi aracının yumuşaklığını değiştirebilirsiniz. • Aracın şekli için bir daire veya kare seçebilirsiniz. • Silgi Opaklığı sürgüsünü kullanarak aracın saydamlık değerini ayarlayabilirsiniz.

Seçim Çerçevesi Araçlarını Kullanmak Seçim Çerçevesi ve Oval Seçim Çerçevesi araçları bir resimdeki belirli şekilleri seçmenize izin verir. Aracın seçimlerin boyut ve orantılarını denetlemek için, Özellikler denetçisindeki Stil açılır menüsünü kullanın ve Normal, Sabit Oran veya Sabit Boyut seçimlerinden birini işaretleyin. Sabit Boyut için, seçimin tam genişlik ve yükseklik değerlerini yazın. Sabit Oran için, seçimin genişlik ve yükseklik oranını yazın. Ayrıca seçimin kenarlarının görünümünü de değiştirebilirsiniz. Bu konuda bilgi için daha önceki kısımlarda bulunan “Sihirli Değnek Aracını Kullanmak” başlıklı konudaki notu okuyun. Araçlar panelinden Oval Seçim Çerçevesi aracını seçin.

22

Fireworks CS3 – Bölüm 2: Bitmap Düzenleme

Geçiş Yumuşatma miktarı seçimin etrafındaki kenarın yumuşaklığını belirler. Seçimi yapmadan önce kenarı ve miktarı ayarlamak zorundasınız. Seçimi kısıtlamak için değiştirici tuşları (Option, Alt, Shift) kullandığınızda, ek tuşlara basmadan önce seçim aracını sürüklemeye başlamalısınız.

23

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

24

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Bölüm 3 Vektörel Araçlar

25

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Vektörel çizim araçları daha sonradan kolaylıkla değiştirebileceğiniz çizimler ve illustrasyonlar yapmanıza yardımcı olur. Bu araçları kullanarak yaptığınız çizimleri başka vektörel programlara da kolaylıkla taşıyabilirsiniz.

Bu Bölümde Neler Var? • • • • • •

Kılavuzlar Döndürme Ölçekleme Geçmiş Paneli İçe Yapıştırma Gruplama

26

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Cetvelleri ve Kılavuzları Görüntülemek Kılavuzlar, tuval üzerinde nesnelerin yerleşimini ayarlamak için kullanabileceğiniz çizgilerdir. Örneğin, düğmeleri hizalamak ve bir nesnenin merkez noktasını konumlandırmak için kılavuzlar yardımcı olabilir. Cetvelleri görüntülemek için Görünüm > Cetveller seçeneğini seçin. Cetvellerden kılavuz oluşturmak için yapmanız gereken yatay yada dikey cetvellerden sürükleyerek tuvalinizin içine bir kılavuz çekmektir. Cetvelleri gizlemek için komutu tekrar seçerek onay işaretini kaldırın. Örneğin Üst cetvelden bir yatay kılavuz sürükleyerek tuvalin üst ve alt kenarları arasına yerleştirin. Kılavuzu sayfa içinde size uygun bir yere sürükleyebilirsiniz. Kılavuzu eğer beyaz kanvas dışında bir yere sürüklerseniz, oluşmadığını göreceksiniz.

Kılavuzların üzerine çift tıklayarak onların yer bilgilerini kolaylıkla ayarlayabilirsiniz. Cetvelden bir kılavuz sürüklemek için, Araçlar panelinden herhangi bir araç seçili durumda olabilir. Araç imlecini cetvellerin üzerine taşıdığınızda, İşaretçi imlecine dönüşür. Bir kılavuzu seçmek veya tuval üzerinde taşımak için, İşaretçi aracına geçmeniz gerekir. Aynı şey tuval üzerinde nesneleri seçerken de geçerlidir (İşaretçi aracını kullanmanız gerekir.)

27

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Kılavuzlarınızın yerini ayarladıktan sonra onları yanlışlıkla hareket ettirmek istemiyorsanız, Görünüm > Kılavuzlar > Kılavuzları Düzenle seçimini yaparak Kılavuzlar iletişim kutusunu (Windows) veya Izgara ve Kılavuzlar iletişim kutusunu (Mac) açabilirsiniz. Burada kılavuzların rengini değiştirebilir, kılavuzları gösterebilir veya gizleyebilir, Kılavuzları Bitiştir komutunu açabilir, kapatabilir, kılavuzları kilitleyebilir ve sayfadaki kılavuzların hepsini temizleyebilirsiniz. Bu pencerede Kılavuzları Kilitle butonuna basarak kılavuzlarınızı kilitleyebilirsiniz.

Vektörel Çizim Araçları Vektörel çizim araçları ile çalışmalarınızın içine vektörel nesneler çizebilirsiniz. Bu çizimler için kullanabileceğiniz araçlar elips aracının üzerine sol fare tuşu ile uzunca bastığınızda diğer vektörel çizim araçları karşınıza çıkacaktır. Bu araçları kullanarak farklı şekilleri kolaylıkla çizebilirsiniz. Her bir aracın kendine özgü özellikleri olduğu gibi birbirleriyle ortak özellikleri de vardır. Herhangi bir nesneyi çizdiğinizde ve onu işaretlediğinizde özellikler denetçisinin içinde o çizim ile iligili detaylar gözükecektir.

28

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Elips Aracı Elips aracına göreceksiniz.

tıkladığınızda

aşağıdaki

özellikler

panelinin

içeriğini

Buradaki G genişliği, Y yüksekliği, boya kutusu logolu araç dolgu rengini, kalem logolu araç çizgi rengini göstermektedir. Başlangıç da dolgu türü olarak Düz gözükmektedir. Bu açılır menüden diğer dolgu türlerini görebilirsiniz. Aynı şekilde çizgi türü olarak da istediğiniz çizgi türlerini seçebilirsiniz. Buradan da farklı çizgi özelliklerini belirleyebilirsiniz.

Bir dolguyu veya dış hattı kaldırmak için, Özellikler denetçisinde kendi kategori menüsünden Yok seçimini yapmanız gerekir. Fireworks içinde kenarlarının uzunluğu birbirine eşit nesneler çizecekseniz Shift tuşuna basarak daire yada kare çizebilirsiniz. Ayrıca Alt tuşuna basarak da bu çizimlerinizi merkezden başlayacak şekilde çizebilirsiniz.

29

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Dikdörtgen Aracını Kullanmak Dikdörtgen aracı kare köşelere sahip dikdörtgenler çizer. Köşelerin yuvarlaklığını değiştirmek için, Özellikler denetçisinde Dikdörtgen köşe yuvarlaklığı ayarını kullanabilirsiniz. Elips aracında olduğu gibi, bir kare çizmek için Shift tuşuna, bir dikdörtgen çizmek için Alt (Windows) veya Option (Mac) tuşuna basılı tutarsınız.

Çokgen Aracını Kullanmak Çokgen aracı, 4 kenardan daha fazla yada daha az (üçgen) çizmek için kullandığınız araçtır. Çokgen aracıyla, bir üçgenden 360 kenarlı bir çokgene kadar herhangi bir eşkenar çokgen (bütün kenarları eşit uzunluğa sahip) çizebilirsiniz. Çokgen aracının, Şekil menüsündeki, Yıldız seçeneği ile 3 ile 360 arasında noktaya sahip ve bütün nokta açıları aralığında yıldızlar çizebilirsiniz.

Bir Nesneyi Döndürmek Sonraki adımda alttaki üçgeni döndürerek istikametinin yukarı doğru olmasını sağlayacaksınız. Üçgeni döndürmek için Ölçek aracını veya bir komutu kullanabilirsiniz. Bu örnekte her iki yöntemi de kullanabilirsiniz. Hangisini tercih edeceğinizi görebilmek için iki yöntemi de denemek isteyebilirsiniz. Bir nesneyi döndürmek için aşağıdakilerden birini yapabilirsiniz: • Değiştir > Dönüştür > Nümerik Dönüştürme seçeneği ile nesneleri dönüştürmek için kullanabileceğiniz bir arayüze ulaşabilirsiniz. Buradan Rotate seçeneğini seçerek kaç derece döndrümek istediğinizi ayarlayabilirsiniz. • Yada daha önce öğrendiğiniz Ölçek aracını kullanarak nesnelerinizi döndürebilirsiniz.

30

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Geçmiş Panelini Kullanmak Geçmiş paneli tuval üzerinde nesneler oluştururken her adımınızı kaydeder. Düzenle > Geri Al seçimini her yaptığınızda Geçmiş panelinde bir adım geri gidersiniz. Geçmiş paneli adımlarınızı görmenizi ve birden çok eylemi geri almanızı kolaylaştırır. Ayrıca Geçmiş panelini kullanarak bir dizi eylemi tekrarlayabilirsiniz. Geçmiş panelini Pencere > Geçmiş seçeneğini seçerek açabilirsiniz. Bu paneli açtığınızda o ana kadar yaptığınız işlemleri görebilirsiniz. Bu işlemlerden tekrar etmek istediğiniz ve ard arda olanları işaretleyip Tekrarla butonuna basarak tekrar edebilirsiniz. Eğer bu işlem sürekli yapacağınız bir işlemse o zaman adımları işaretledikten sonra aşağıdaki disket tuşuna basarak bu adımları bir komut olarak kayıt edebilirsiniz. Bu işi yaptığınızda kayıt ettiğiniz komut Komutlar menüsünden ulaşılabilir hale gelir.

İçine Yapıştır ile Maskelemek Herhangi bir çizim yada resminizi başka bir çizim ile maskelemek istiyorsanız şunları yapmalısınız. Öncelikle maskenizi çizin (Örneğin bir kalp resmi). Daha sonra maskelemek istediğiniz şekli çizin yada resmi Dosya > İçe Aktar seçeneği ile Fireworks’ün içine alın. Resmi çizdiğiniz maskenin üzerine gelecek şekilde taşıyın. Daha sonra maskelenecek resmi (Örneğin çocuğunuzun resmi) CTRL + X (Düzenle > Kes) ile kesin. Maske olan nesneyi seçin (kalp) ve Düzenle > İçine Yapıştır seçeneğini seçin. Bunu yaptığınızda çiziminiz resminizi yada başka bir çiziminizi maskeler.

Aktif Filtreler Eklemek Aktif filtreler vektör, bitmap veya metin nesnelerine uygulanan işlenmiş efektler veya filtrelerdir. Bir Aktif Filtre uygulamak orijinal nesneyi kalıcı olarak değiştirmeyip, üzerine nesne ve filtre düzenlenebilir. Orijinal nesneye bir değişiklik yaptığınızda, aktif filtreler de buna göre değişir. Örneğin, bir pah ve gölge uygulanmış bir düğme oluşturabilirsiniz. Daha sonra düğmenin rengini, boyutunu veya şeklini değiştirirseniz, filtreler yeni düğmeye tekrar uygulanır. Bir nesneye bir veya birden fazla filtre eklenebilir. Filtreler aynı zamanda geçerli belgedeki diğer nesnelerde kullanılmak üzere kaydedilebilir.

31

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Filtrelerinizi eklemek için filtre eklemek istediğiniz nesneyi seçin özelikler panelinden Filtreler alanındaki + butonuna basarak istediğiniz filtreyi ekleyin.

Nesneleri Gruplamak Bazen birden çok nesneyi tek bir birim olarak birleştirdiğinizde, çalışmanız daha kolay olur. Bu işleme gruplama denir. Nesneler gruplandığında, birlikte hareket eder ve tek bir nesne imiş gibi kontrol edilebilir. Ölçekleme ve döndürme işlemleri gruptaki nesnelere aynı anda uygulanabilir. Aynı zamanda iki grubu veya bir grup ve bir nesneyi de birleştirebilirsiniz. Buna iç içe gruplama denir. Gruplama yapmak için birden fazla nesneyi Shift tuşuna basarak ve fare ile tıklarak seçin . Daha sonra işaretlediğiniz neseler seçili iken klavyeden CTRL + G tuşlarına basın. Grubu çözmek için, gruplu nesneye tıkladıktan sonra CTRL + SHIFT + G tuşlarına basabilirsiniz.

Grafikleri İthal Etmek Adobe Fireworks grafikler oluşturmak için zengin bir araç çeşitliliği sunmaktadır, ancak yine de diğer kaynaklardan grafikler ithal etmek isteyebilirsiniz. Örneğin Macromedia FreeHand’de yaratılan bir firma logosunu veya Adobe Photoshop’ta oluşturulan taranmış bir resmi ithal etmek ve bunları Fireworks’te oluşturduğunuz düğmelerle birleştirmek isteyebilirsiniz. Fireworks şu dosya türlerini ithal edebilir: PNG; GIF; JPEG; PICT; BMP; TIFF; ASCII metin; RTF metin; Adobe Photoshop PSD; Adobe Illustrator ve Macromedia FreeHand. İthal etmek için Dosya > İçe Aktar seçeneğini kullanmalısınız.

32

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

Tuvali Kırpmak Son olarak belge boyutunu daha küçük hale getireceksiniz. Resmin boyutunu mümkün olduğu kadar küçük yapmak için resmin etrafındaki fazla beyaz alanı kırpmanız gerekmektedir. Kırpma aracını kullanabilirsiniz fakat yerleşik Kırpma özelliğini kullanmak en kolay yöntemdir. Bunun için Değiştir > Tuval > Tuvali Kes seçimini yapabilirsiniz.

33

Fireworks CS3 – Bölüm 3: Vektörel Araçlar

34

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

Bölüm 4 Katmanlar ve Sayfalarla Çalışmak

35

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

Katman özelliği, sayfanızdaki nesneleri kontrol altına almanıza ve organize etmenize yardım eden güçlü bir araçtır. Katmanlar, nesneleri oluşturabileceğiniz ve saklayabileceğiniz saydam düzlemlerdir. Katmanlarla, sayfanızdaki nesnelerin yığın sırasını kontrol edebilir; yığın sırası değişirse nesneleri hızlı bir şekilde yukarı ve aşağı taşıyabilirsiniz. Aynı zamanda katmanları kilitleyip, gizleyebilir ve karmaşık nesnelerin yönetilmesini kolaylaştırabilirsiniz. Sayfalar, Fireworks CS3 ile yeni gelen bir özelliktir. Bu özellik ile artık sayfalarınızın farklı versiyonları için ayrı ayrı PNG dosyaları tutmak yerine tüm işinizi tek bir PNG dosyası içinde yapabilirsiniz.

Bu Bölümde Neler Göreceksiniz? • Katmanlar Paneli • Katman Ekleme, Kilitleme ve Adlandırma • Katmanları Silme

36

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

Katman Panelini Kullanmak Bir katmanı, nesneler oluşturabileceğiniz ve yerleştirebileceğiniz saydam bir düzlem olarak düşünebilirsiniz. Katmanlar karmaşık ve kompozit resimler oluştururken çalışmayı kısımlara ayırmanıza imkân sağlar. Resmin farklı kısımları, farklı katmanlar üzerinde saklanabilir ve dilediğiniz katmanları açılabilir ve kapatılabilirsiniz. Böylece sadece üzerinde çalışacağınız kısmı diğer kısımlardan ayırabilirsiniz. Katmanlar vektör ve bitmap nesneler ile bunların kombinasyonlarını içerebilir. Fireworks’teki Katmanlar paneli Macromedia FreeHand ve Adobe Photoshop gibi başka grafik uygulamalarındaki katmanlar paneline benzer, fakat bazı ilave bilgiler içerir. Her katmana, bir veya birden fazla nesneyi yerleştirebilirsiniz. Aynı katman üzerine birden çok nesneyi yerleştirirseniz, her nesne katman üzerine bir nesneler yığını içindeki ayrı bir nesne olarak yerleştirilir. Yeni nesneler başlangıçta yığının en üstüne yerleştirilir. Katmanlar panelinde nesne adının sol tarafında nesnenin temsili bir resmi görüntülenir. Değiştir > Yerleştir > En Öne Getir, Değiştir > Yerleştir > Öne Getir, Değiştir > Yerleştir > Alta Gönder ve Değiştir > Yerleştir > En Alta Gönder komutlarını kullanarak nesnenin yığın sırasını değiştirebilirsiniz. Veya Katmanlar panelini kullanarak nesneyi yığın içinde yeni bir pozisyona sürükleyebilir ya da nesneyi yeni bir katmana taşıyabilirsiniz. Katmanlar çizimlerinizi, bağımsız birimler olarak düzenlenebilen farklı düzeylerde organize etmenize ve gerekirse gizlemenize imkân verir. Katmanlar panelini açmak için Pencere > Katmanlar seçimini yapın. Katmanlar paneli kapalıysa, paneli şimdi açın. Menü listesinde panel adının yanındaki onay işareti panelin açık olduğunu gösterir. Paneli ekranınızın sağ tarafındaki panel grubunda görebilirseniz, panelin üzerindeki genişletici oka tıklayarak bunu açabilir ve kapatabilirsiniz. Açık bir panelin altındaki bir panelin başlık çubuğunun üzerindeyken, imleç yukarı ve aşağı işaret eden bir ok (Windows) veya aşağı işaret eden bir ok (Mac) simgesine dönüşür. İmlecin değiştiğini gördüğünüzde, aşağı doğru sürükleyerek yukarıdaki panelin yüksekliğini artırabilir veya azaltabilirsiniz. Katmanlar eklemeye başladığınızda, Katmanlar panelinin boyutunu artırmak isteyeceksiniz. Bir panelin yüksekliğini sadece iki veya daha fazla panel açık ise artırabilir veya azaltabilirsiniz.

37

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

Katmanlar Eklemek ve Adlandırmak, yeni bir belge oluşturduğunuzda varsayılan olarak iki katman elde edersiniz: Katman 1 ve Web katmanı. Dilimlerin ve aktif bölgelerin saklandığı yer Web katmanıdır. Katman 1, başlangıçta bütün nesnelerin ve resimlerin saklandığı katmandır. Başka bir katman oluşturmazsanız, belgenizdeki tüm nesneler bu katmanda yığılacaktır. Daha karmaşık resimler için, katmanları kullanmak oluşturduğunuz farklı öğeleri organize etmek ve kontrol altına almak için iyi bir yöntemdir. Herhangi bir katmanı kilitlerseniz, bir nesneyi yanlışlıkla taşıyamaz ve silemezsiniz. Aynı zamanda bir katmanı gizleyebilir ve resmin başka bir kısmını oluştururken bu katmandaki öğelerin dikkatinizi dağıtmasını engellersiniz. Katmanlar panelinin sağ üst kısmında bulunan panel başlık çubuğundaki seçenekler menüsüne tıklayın ve açılan menüden Yeni Katman’ı seçin. Panel seçenekleri menüsü katmanları değiştirmek ve kontrol etmek için çeşitli komutlar içerir. Açık durumdaki bütün panellerde Seçenekler menü simgesini görebilirsiniz. Yeni Katman iletişim kutusuna katmanınızın ismini yazabilirsiniz. Katmanlar paletinin altındaki Yeni Katman düğmesine de tıklayabilirsiniz. Bu, Katma “n” adını taşıyan yeni bir katman oluşturur. Buradaki n harfi bir sonraki katman adının yanındaki sıra numarasıdır. Bu yöntemi kullanarak bir katman eklerseniz, katmanı adlandırmanız için bir iletişim kutusu görüntülenmez.

38

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

Bir Nesnenin Boyutunu ve Yerleşimini Ayarlamak Genellikle çizdiğiniz nesnenin boyutunu kontrol etmek veya denetlemek istersiniz. Örneğin bir dikdörtgen çizdiğinizi düşünelim. Bunu sayfaya tam olarak yerleştirmiş olabilirsiniz, fakat bunun kesin olduğunu doğrulamak istiyorsunuz. Ayrıca bunun tuvalle aynı boyutta olduğunu da doğrulamak istiyorsunuz. Dikdörtgen seçili durumdayken, Özellikler denetçisine bakın. Panelin sol kısmında dikdörtgen hakkında bilgiler (boyutu ve tuval üzerindeki pozisyonu) görüntülenir. Buradaki X ve Y değerlerine 0 girerek yerleşimi yapabilirsiniz.

Bir Katmanı Yeniden Adlandırmak Bir katmanı yeniden adlandırmak için Katmanlar panelinde isminin üzerine çift tıklayın. Açılan pencerede katmana yeniden isim verebilirsiniz. Bir katmanı kilitlemek, katman üzerindeki tüm nesneleri görmek isteyip, bunları yanlışlıkla hareket ettirmeyi veya silmeyi istemediğiniz durumlarda oldukça faydalıdır. Bir katmanı kilitlemek aynı zamanda bu katmana yeni nesneler eklenmesini de önler. Bir katmanı kilitlemek için, Katmanlar panelinde katmanın kilit imlecine tıklamanız yeterli olacaktır.

Bir Katmanı Göstermek ve Gizlemek Karmaşık bir çizim üzerinde çalışırken, sadece üzerinde çalıştığınız çizim kısımlarını görüntülemek yararlıdır. Bu şekilde, düzenlemekte olduğunuz nesneyi örten başka bir nesneyi yanlışlıkla silemez ve hareket ettiremezsiniz. Bir katmanı göstermek yada gizlemek için katmanın yanındaki göz işaretine basmalısınız.

Tek Katman Düzenlemeyi Kullanmak Tek katman düzenleme, Katmanlar panelinin seçenekler menüsünden erişilebilir. Bu seçenek sadece geçerli katmanın düzenlenebilir olmasını sağlar. Diğer katmanlardaki nesneler seçilemez. Bu katmanı kilitlemekten biraz farklıdır ve birçok katmandan oluşan karmaşık bir nesneyle çalışırken çok kullanışlı olabilir. Bir katmanı kilitlediğinizde, katmanın kilidini açana kadar bu katman üzerindeki herhangi bir nesneyi seçemez, düzenleyemez veya değiştiremezsiniz. Tek katmanlı düzenlemeyi kullanarak, sadece seçili 39

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

katmanın üzerindeki nesneleri düzenleyebilirsiniz; diğer katmanlar sanki kilitliymiş gibi davranır. Diğer katmanlardaki nesneleri seçmek için, Katmanlar panelinde katmanı seçmeniz gerekir. Katmanlar paneli seçenekleri menüsünden Tek katman düzenleme’yi seçin. Komutun yanında, seçili olduğunu belirten bir onay işareti (Windows) veya madde imi (Mac) görüntülenir. Bu seçenek değişmelidir. Seçimi kaldırmak için, Katmanlar paneli seçeneklerinden komutu tekrar seçin.

Varsayılan Renkleri Ayarlamak Fireworks’ün oluşturduğunuz son nesneye ait dolgu ve hat rengini koruduğunu ve değiştirene kadar bu ayarları kullandığını şimdiye kadar fark etmiş olabilirsiniz. Bu, özellikle birden çok nesne eklerken mükemmel bir özelliktir. Fireworks aynı zamanda bir dizi varsayılan dolgu ve hat rengine sahiptir. Varsayılan dolgu rengi beyaz, dış hat rengi ise siyahtır. Bu renkleri kendi ihtiyaçlarınıza uygun olacak şekilde kolayca değiştirebilirsiniz. Varsayılan renkleri değiştirmek için Düzenle > Tercihler (Windows) veya Fireworks > Tercihler (Mac) seçimini yapın. Tercihler iletişim kutusunun Genel sekmesinde, Kontur veya Dolgu renk kutusuna tıklayın ve buradan yeni bir varsayılan renk seçin.

Nesneleri Hizalamak Sayfanızda çeşitli nesneler oluşturduğunuzda, nesneleri birbiriyle veya tuvale göre hizalamak isteyebilirsiniz. Ayrıca nesneleri sayfa üzerine eşit olarak dağıtabilirsiniz. Hizalama için Pencere > Hizala penceresini açabilirsiniz.

Sayfalarla Çalışmak Sayfalar Fireworks CS3 ile gelmiş olan yeni bir özelliktir. Bu özellik ile artık tasarımlarınızı ayrı ayrı PNG dosyalarında saklamak yerine tek bir sayfa içinde saklıyabilirsiniz. Sayfalar ile ilgili panele ulaşmak için yapmanız gereken Pencere > Sayfalar seçeneğini seçmek. Varsayılan olarak Fireworks sizin için 1 adet sayfayı açmaktadır. Paneli açtığınızda sayfanızı göreceksiniz. Bu panelin içerik menüsünden Çoğaştılmış Sayfa seçeneği ile sayfanızın bir kopyasını çıkartabilirsiniz. Böylece oluşturulmuş olan kopya ile birinci sayfadan bağımsız olarak (boyut ve dilimler de dahil olmak üzere) ikinci bir sayfa oluşturabilirsiniz. Bu oluşturduğunuz ikinci sayfa

40

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

ile tasarımlarınızı tek bir PNG sayfası içinde tutabilirsiniz. Birden fazla sayfa ile çalışırken ihtiyacınız olmayan sayfa tasarımını yine içerik menüsünden Sayfayı Sil seçeneğini seçerek silebilirsiniz. Eğer sayfalarınızdan birinde yaptığınız tasarım sonraki sayfalarınız için temel bir tasarım niteliği taşıyorsa, o zaman temel tasarımı olan sayfanızı işaretledikten sonra içerik menüsünden bu sayfayı “Ana Sayfa Olarak Ayarla “ diye tanımlayabilir ve bu tasarımın diğer sayfalarda da aynı şekilde gözükmesini sağlayabilirsiniz. Ana Sayfa Olarak Ayarlanmış tanımlı bir sayfanın tasarımında değişiklik yaptığınızda bu tasarım diğer bağlı sayfalara da aktarılacaktır. Sayfalar paneli ile çalıştığınızda unutmayın ki PNG dosyanızın boyutu büyüyecektir.

41

Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak

42

Fireworks CS3 – Bölüm 5: Metin Eklemek

Bölüm 5 Metin Eklemek

43

Fireworks CS3 – Bölüm 5: Metin Eklemek

Fireworks, Web grafikleri ve etkileşimli resimler oluşturmak için güçlü bir grafik programıdır. Resimleriniz ne kadar yaratıcı ve bilgilendirici olursa olsun, yine de, düğmeleriniz için etiketler, reklam başlıkları için metin oluşturmak isteyeceksiniz. Fireworks resimlerinize metin sağlamak ve biçimlendirmek için birçok özellik sunar. Bir Fireworks belgesinde orijinal PNG dosya türünde kaydedilen bir belge her zaman düzenlenebilir. Ancak resmi bir GIF veya JPEG olarak ihraç ettikten sonra, metin bitmap resmin bir parçası olur ve değiştirilemez. Bu yüzden, metnin değiştirilme durumunu göz önünde bulundurarak, orijinal Fireworks dosyasını (PNG dosya) ihraç edilen resimlerle beraber saklamanız gerekir.

Bu Bölümde Neler Göreceksiniz? • Metin Ekleme • Metin Düzenleyici

44

Fireworks CS3 – Bölüm 5: Metin Eklemek

Metin Eklemek Belgenize Metin aracını kullanarak metin ekleyebilirsiniz. Bu araç diğer grafik programlarındaki metin araçlarına benzer. Aracı seçtiğinizde, Özellikler denetçisi tüm metin biçimlendirme denetimlerini görüntüler. Metni yazmadan önce ya da sayfaya yerleştirdikten sonra biçimlendirme değişiklikleri yapabilirsiniz. Araçlar panelinden Metin aracını seçin. İmleç I-işaretçisine dönüşür. Bu, metin düzenleme modunda olduğunuzu gösterir. Metnin başlamasını istediğiniz yere tıklayın veya istediğiniz boyutta bir metin kutusu çizmek üzere tıklayın ve sürükleyin. Text aracıyla tıklayıp sürüklerseniz, metin kutusunu dilediğiniz boyutta çizebilirsiniz. Metin kutusunun sağ üst kısmında içi boş bir kare görüntülenir. Tuval üzerine Metin aracıyla tıklarsanız, metin kutusu girilen metne bağlı olarak genişler. Metin kutusunun sağ üst köşesinde boş bir daire tutamacı görüntülenir. Bir metin kutusu türünde diğerine geçmek için daireye veya kareye çift tıklamayın. Yazarken metin kutusunu yeniden boyutlandırmak için, imleci sağ alt tutamacın üzerine getirin. İmleç bir ok simgesine dönüşür. Ok imleciyle tutamacı sürükleyerek metin kutusunu yeniden boyutlandırabilirsiniz. İmleci metin kutusu içine getirin; yeniden I işaretçisine dönüşür ve yazmaya devam edebilirsiniz. Otomatik boyutlandırılan bir metin kutusunun boyutunu değiştirmek, bunu sabit genişlikli bir metin kutusuna dönüştürür.

Yatay ölçekleme adı verilen tekniği kullanarak metni değiştirebilirsiniz. Bu, yüksekliği değiştirmeden metnin genişliğini değiştirerek, metne sanki bir lastik bant üzerinde uzatılmış görünümü verir. Uzatma işlemini aşırıya kaçırmayın; metnin biçimini orijinal tasarıma bağlı kalmadan elektronik olarak değiştiriyorsunuz. Değerler yüzde olarak ifade edilir. Yüzde 100’ün altındaki değerler metni kısaltır; Yüzde 100’ün üstündeki değerler metni genişletir. Karakter aralığı sürgüsünü kaydırarak harfler arasındaki aralığı ayarlayın. Sıralı karakter aralığı, seçili harflerin arasındaki aralığın miktarını kontrol eder. Negatif değerler aralığı azaltır; pozitif değerler ise aralığı artırır. Metnin tamamını veya bazı kısımlarını seçerek bu biçimlendirmeyi uygulayabilirsiniz.

45

Fireworks CS3 – Bölüm 5: Metin Eklemek

Bu biçimlendirme kontrolü daha küçük boyutlu metinlerin ekranda daha kolay okunabilmesini sağlayabilir. Karakter boşluğu iki karakter arasındaki aralık miktarıdır. Karakter boşluğu sürgüsü bu biçimlendirmeyi kontrol eder. Eğer I-imleci iki harf arasındaysa karakter aralığı uygularsınız; eğer iki veya daha fazla harf seçiliyse, Sıralı karakter aralığı uygularsınız. Sıralı karakter aralığında olduğu gibi, negatif değerler aralığı azaltır; pozitif değerler ise aralığı artırır. Metniniz iki veya daha fazla satır içerirse, satırlar arasındaki boşluğu (Leading) ayarlamanız gerekebilir. Satır aralığı terimi, kurşun çubukların daktilo satırlarının arasına yerleştirildiği elle dizgi yapılan günlerden kalan bir terimdir. Çubuğun boyutu yazı satırlarının arasındaki boşluğu ayarlardı. Yüzde 100’den küçük değerler satır aralığını azaltır; yüzde 100’den büyük değerler ise satır aralığını artırır. Satır aralığı varsayılan olarak yüzde değeriyle ayarlanır. Fakat dilerseniz bunun yerine bir piksel değeri kullanabilirsiniz. Satır Aralığı Birimleri açılır menüsündeki seçimi Pixels olarak değiştirin ve ardından Satır Aralığı sürgüsünü ayarlayın. Gerekirse Kenar Yumuşatma ayarını değiştirerek, metnin daha kolay okunabilmesini sağlayın.

Metnin etrafındaki yumuşak kenarlara dikkat edin. Bu yumuşaklık Kenar Yumuşatma denetimleriyle oluşur. Kenar Yumuşatma nesnelerin etrafındaki kenarları bulanıklaştırarak, ekranda daha yumuşak görünmesini sağlar. Büyük boyutlu metinlerde, yumuşaklık metnin görünümünü iyileştirir. Daha küçük metinlerde ise, Kenar Yumuşatma bazen karakterlerin birlikte bulanıklaşmasını sağlar. Metnin düzgünleştirilmesini Özellikler denetçisindeki Kenar Yumuşatma düzeyi açılır menüsünden denetleyebilirsiniz. Burada bulunan seçenekleriniz Kenar Yumuşatma Yok, Net Kenar Yumuşatma, Güçlü Kenar Yumuşatma ve Düzgün Kenar Yumuşatma’dır. En iyi seçimi belirlemek için bütün ayarları deneyin. Aynı zamanda Sistem Kenar Yumuşatma veya Özel Kenar Yumuşatma seçimini de yapabilirsiniz. Sistem Kenar Yumuşatma, Windows XP veya Macintosh OSX tarafından sağlanan 46

Fireworks CS3 – Bölüm 5: Metin Eklemek

metin düzgünleştirme yöntemini kullanır. Eğer Özel Kenar Yumuşatma seçimini yaparsanız, aşağıdaki düzgünleştirme denetimlerini ayarlayabilirsiniz:

Metni Hizalamak ve Girintilemek Metnin hizalamasını metin kutusu ile göreli olarak değiştirebilirsiniz. Hizalamayı değiştirmek için Özellikler denetçisindeki hizalama düğmelerinden birine tıklayın. Metni ayarlanan bir boşluğa sığdırmak için, hizalamayı metni uzatacak şekilde ayarlayabilirsiniz.

Bir paragrafın ilk satırını girintilemek (içeriden başlatmak) için, Paragraf Girintisi metin kutusuna girinti miktarını yazın. Metin yönelimini de değiştirebilirsiniz.Varsayılan metin yönü soldan sağadır.

47

Fireworks CS3 – Bölüm 5: Metin Eklemek

Metin İthal Etmek Metni doğrudan Fireworks içinde yazabilir veya başka bir uygulamada oluşturulan ve RTF (Rich Text Format - Zengin Metin Biçimi) ya da ASCII (salt metin) biçiminde kaydedilen metni ithal edebilirsiniz. Fireworks’teki metni ihraç ettiğinizde grafiğe dönüştürüldüğünü ve grafik biçimindeki metnin HTML sayfasına daha uzun sürede yüklendiğini hatırlayın. Yine de, bazen metni grafik olarak kullanmak isteyebilirsiniz. Örneğin düğme etiketleri, logonun bir bölümü grafik metin biçimindedir. Kullanıcıların sistemlerinde sizin kullandığınız yazı tiplerinin bulunmaması metnin yanlış görüntülenmesine neden olabilir. Bunu önlemek için de metni grafiğe dönüştürmek isteyebilirsiniz. Dışarıdan metin ithal etmek için Dosya > İçe Aktar seçimini yapın ve açılan pencereden ithal etmek istediğiniz metin dosyasını (.TXT uzantılı dosyalar) seçin.

Metin Düzenleyiciyi Kullanmak Bu bölümde gördüğünüz gibi, Metin aracıyla tuvale yazı ekleyebilir, eklenen metni düzenleyebilir ve biçimlendirebilirsiniz. Eğer yazılar küçükse, ekranda yazıları görmek bazen zor olabilir. Görüntü büyütme oranını artırabilir veya Metin Düzenleyici’yi kullanabilirsiniz. Metin Düzenleyici, adından da anlaşılacağı gibi, sayfa üzerine yazı yazabileceğiniz, metin düzenlemesi ve biçimlendirme yapabileceğiniz ayrı bir penceredir. Öncelikle, Metin aracını kullanarak sayfanıza metin eklemeniz gerekir. Metin sayfaya eklendikten sonra, Metin Düzenleyici’ye erişebilirsiniz. Metin Düzenleyici’yi açmak için imleciniz aracıyla, metninizi seçin ve Metin > Düzenleyici seçimini yapın.

48

Fireworks CS3 – Bölüm 5: Metin Eklemek

Metin Düzenleyici penceresi metniniz için birçok biçimlendirme denetimi içerir. Bir kelime işlemci uygulamasında olduğu gibi, biçim değişiklikleri yapmak için önce metni seçmeniz gerekir. Biçimlendirilen metnin Metin Düzenleyici penceresinde görüntülenmesini isterseniz, Fontu Göster ve Boyut ve Rengi Göster seçeneklerini işaretleyin. Yazdığınız metnin belge penceresinde sürekli olarak güncellenmesini isterseniz, Otomatik Harf Aralığı onay kutusunu işaretleyin. Eğer bu onay kutusunu işaretlemezseniz, belge penceresini güncellemek için Uygula düğmesine tıklayabilirsiniz. Metin Düzenleyici penceresi açıkken de sayfa üzerindeki metin bloğunu konumlandırabilirsiniz. İmleci Metin Düzenleyici penceresinin dışına taşıdığınızda, El aracına geçecektir.

Çizgi Aracı Çizgi aracı sayfalarınızın içinde düz çizgiler çizmenizi sağlayan bir araçtır. Bu aracı kullanarak değişik görünümlü çizgiler oluşturmak için özellikler penceresinden çizgi türünü değiştirmelisiniz.

Alt Seçim Aracını Kullanmak Çizgiyi ne kadar uzun çizdiniz? Çizginin ay adlarından oluşan metin bloğuyla aynı uzunlukta olmasını istediğinizi düşünelim. Bu uzunluğu doğru olarak elde edebilmek için çizgiyi silebilir ve tekrar çizebilirsiniz. Bununla beraber, mevcut çizginin boyunu da düzenleyebilirsiniz. Çizgiyi (veya herhangi bir nesneyi) İşaretçi aracıyla seçtiğinizde, yol üzerinde bağlantı noktaları görüntülenir (Yol, iki veya daha fazla birbirine bağlı noktadır; çizdiğiniz çizginin iki bağlı noktası vardır). İşaretçi aracıyla çizgiyi taşıyabilirsiniz, ancak noktaları seçemezsiniz. Noktaları seçmek için Alt Seçim aracını kullanmanız gerekir. 49

Fireworks CS3 – Bölüm 5: Metin Eklemek

Araçlar panelinden Alt Seçim aracını seçin. Alt Seçim aracı bir gruptaki nesneleri veya bir yoldaki noktaları seçmek için kullanılır. İşaretçi aracından Alt Seçim aracına geçmek yerine, Alt (Windows) veya Option (Mac) tuşlarına basarak bir yol üzerindeki bir noktayı veya bir grup içindeki bir nesneyi seçebilirsiniz.

Nitelik Yapıştırmayı Kullanmak Fireworks, en son seçilen nesnenin dış hat ve dolgusunu korur. Yani, eğer bir çizgi çizer ve dış hat rengini değiştirirseniz, daha sonra çizdiğiniz çizgi, en son çizdiğiniz çizgiyle aynı görünür. Dikdörtgen aracına geçerseniz, çizeceğiniz dikdörtgenin dış hat özellikleri önceki çizgi ile aynı olur. Yeni nesnelerin, önceki ile aynı görünüme sahip olmasını istediğinizde, bir nesnenin niteliklerini alabilme özelliği çok kullanışlıdır. Sayfa üzerinde aynı görünmesini istediğiniz nesneler varsa, Nitelikleri Yapıştır komutunu kullanarak nesneler arasında dış hat, dolgu ve efekt özelliklerini kopyalayabilirsiniz. Herhangi bir nesnenin niteliklerini kopyalamak için, nesneyi seçin ve Düzenle > Kopyala seçeneğini seçin. Daha sonra, nitelikleri yapıştırmak istediğiniz nesneyi seçin ve Düzenle > Nitelikleri Yapıştır seçeneği ile nesnenin niteliklerini yeni nesnenin üzerine yapıştırın.

Ok Başları Eklemek Bir çizgiye ok başları eklemek size pek kullanışlı gelmeyebilir. Ama ok başlarına ihtiyaç duyduğunuzda bu özelliğin işinize yaradığını göreceksiniz. Bir çizginin başında ya da sonunda görünecek şekilde çeşitli ok başları kullanma seçenekleriniz mevcut. İsterseniz her iki uçta da farklı ok başları kullanabilirsiniz. Bir çizgiye bir ok başı eklediğinizde, çizgi ve okbaşları artık bir grupmuşcasına davranır. Bu nedenle okbaşlarını eklemeden önce çizginin boyu, kalınlığı ve yerleşimi konusunda nihai kararınızı vermiş olduğunuzdan emin olmalısınız. Ok başlığı eklemek için Komutlar > Yaratıcı > Ok Uçları Ekle seçimini yapın. Açılan pencereden çizginize ok başlığı ekleyebilirsiniz. Başlangıç ve bitiş noktaları için ayrı ayrı ok başlıkları seçebilirsiniz.

50

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Bölüm 6 Gelişmiş Teknikler

51

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Daha önceki bölümlerde görmüş olduğunuz çizim araçlarıyla daha gelişkin çizimler yapabilirsiniz. Bunun için Fireworks içinde yer alan gelişmiş birleştirme araçlarını öğreneceksiniz.

Bu Bölümde Neler Var? • Basit şekillerden karmaşık resimler oluşturmak • Degrade Oluşturmak • Bir Yola Metin Eklemek

52

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Şekilleri Birleştirmek Fireworks’ün güçlü özelliklerinden biri de oldukça zor olabilen veya elle gerçekleştirmesi mümkün olmayan yol çizim işlemlerini otomatikleştirmek için kullandığı bir dizi yol komutudur. Değiştir > Yolları Birleştir menüsündeki komutlar, elle çizilmesini neredeyse olanaksız olan şekiller oluşturmanıza yardım eder. Bu komutlar, çizim yeteneklerinize aldırmadan size zaman kazandıracaktır.

Topla Birleştirme seçeneği ile iki farklı çizim nesnesini tek bir nesne olarak birleştirebilir ve sonucunda daha farklı bir şekil oluşturabilirsiniz. Bunun için kullanacağınız kısayol Değiştir > Yolları Birleştir > Topla olacaktır. Bu seçeneği kullanarak bir gitar gövdesini iki adet daire ve bir adet dikdörtgeni oluşturup daha sonra birleştirerek çizebilirsiniz.

Zımbala Zımbala komutu ile birden fazla nesneyi en üstteki alttakileri kesecek şekilde düzenleyebilirsiniz. Bunun için en iyi örnek iki daire çizerek bir hilal resmi oluştrumaktır. Bir hilal oluşturmak için biri büyük diğeri daha küçük olan iki daireyi üst üste çizin. Burada önemli olan küçük olan dairenin büyük olanın üzerinde olmasıdır.

Küçük Daire

Büyük Daire

53

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Daha sonra her iki daireyi de seçip Değiştir > Yolları Birleştir > Zımbala seçeneğini seçin. Bu durumda en üstteki dairenin dolgu yada çizgi rengi önemli değildir. Çünkü bu dairenin tek görevi alttaki daireyi kesmek olacak.

Bir Degrade Eklemek Fireworks içinde kullandığımız bir dolgu türü de degrade dolgudur. Degrade dolgular bir renkten diğer bir renge geçiş için kullanılırlar. Örneğin Zımbala ile yaptığınız bir CD çiziminin içini degrade ile doldurabilirsiniz. Degrade dolgu seçeneğini özellikler denetçisinin içindeki dolgu türü alanına tıklayarak açabilirsiniz. Böylece bir nesnenin dolgusunu bir renkten diğerine geçen bir renk dolgusu olarak ayaralayabilirsiniz. Renk dolgunuzu degrade olarak ayarladığınızda bir renkten diğerine geçiş sağlamış olursunuz. Bu geçiş ile ilgili renkler değiştirmek için dolgu rengi kutucuğuna tıklamalı ve renkleri seçmelisiniz. Fireworks içinde hazır renk numuneleri vardır. Açılır presets kutusundan bu numuneleri seçebilirsiniz.

Degrade bir renk eklediğinizde, bu renk dağılımının türünü de ayarlayabilirsiniz. Bu tür konik, dairesel yada doğrusal olabilir. Bu 3 seçenek dışında başka seçenekler de bulunmaktadır. Herhangi bir degrade eklediğinizde eklenmiş şeklin üzerinde degrade türüne göre çeşitli işaretler çıkar. Bu işaretlerden daire olanı size degradenin merkezini diğeri ise yönünü gösterir. Bu tutamaçları hareket ettirerek rengin dağılım yönünü değiştirebilirsiniz. Tutamaçların üzerine çift tıklayarak eski hallerine geri döndürebilirsiniz.

54

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

55

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Bir Yol Boyunca Metin Ekelemek Zaman zaman yazılarınızın bir çizim üzerinde dizilmesini isteyebilirsiniz. Örneğin dairesel bir çizim etrafına yazı yazmak yada eğik bir çizgi üzerinde görünen yazı gibi. Bu durumda yapmanız gereken, metni bir hattın etrafına sarmaktır. Bunu yapmak için, bir şekil çizin (Örneğin, bir daire) daha sonra, metin aracını kullarak bir yazı yazın. Yazmış olduğunuz yazıyı ve çizmiş olduğunuz daireyi seçin. Daha sonra Metin > Yola Ekle seçeneğini seçerek metni çizginin etrafına sarabilirsiniz. Bu seçenek ile birleştirmiş olduğunuz metin tamamen düzenlenebilir durumdadır. Metnin üzerine çift tıklarsanız içeriğini değiştirebileceğinizi görebilirsiniz. Bu yazı ve şekli tekrar birbirinden ayıtmak isterseniz Metin > Yoldan Ayır seçeneğini seçebilirsiniz. Metne bir kere tıkladığınızda metin ile ilgili görsel öğeleri değiştirebileceğiniz özellikler paneli açılacaktır. Bu panel ile metninizin karakterini değiştirebilir yada metnin hat üzerinde duruş yerini değiştirebilirsiniz. Bu metnin özellikleri ile ilgili daha fazla değişiklik ve özellik için Metin > Yönlendirme seçeneğini seçebilirsiniz.

Diğer Komutlar Intersect İki şekil çizin. Son çizdiğiniz şekli ilk şeklin üzerine yerleştirin. Örneğin, dikey bir dikdörtgenin üzerine bir daire çizin. Her iki şekli de seçin ve Değiştir > Yolları Birleştir > Kesiştir seçimini yapın. Her iki nesnenin kesiştiği yol alanı tek bir yola dönüşür ve çakışmayan alanlar çıkarılır.

56

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

Kırp Kırp komutunun göz önünde canlandırılması biraz daha zordur. Dikdörtgen, Poligon veya Elips araçlarıyla iki veya daha fazla şekil çizin. Şekli kırpmak için kullanmak istediğiniz nesneyi, bütün nesnelerin üstüne konumlandırın. Shift tuşuna basılı tutup, İşaretçi aracıyla bütün nesnelere tıklayarak nesneleri seçin. Değiştir > Yolları Birleştir > Kırp seçimini yapın. Alttaki yol en üst yolun şekliyle değiştirilir ve en üstteki yolun altındaki alan kaldırılır. Sonuçta, üstteki yolun konumuna ve biçimine göre basit bir yol şekli veya bileşik bir yol ortaya çıkar. Kırp komutu Zımbala komutunun tersidir. Zımbala komutu en üstteki nesnenin içindeki alanı çıkarırken, Kırp üstteki bu nesnenin dışındaki alanı çıkarır.

Metni Yollara Dönüştürmek Metin aracını kullanarak, düzenlenebilir metin oluşturursunuz. Yani, metnin biçimini, boyutunu veya rengini değiştirebilmenin yanı sıra, metnin kendisini de değiştirebilirsiniz. Metin üzerinde, sanki bir grafik öğesiymiş gibi çalışmanız gereken durumlar olabilir. Bunu yapmak için, metni bir yola dönüştürürsünüz. Metni yollara dönüştürmek, metnin ana hatlarını bir grafik nesneye dönüştürür; metin artık metin olarak düzenlenemez. Ancak, dönüşümden sonra, yolu taşıyarak veya yeniden biçimlendirerek metin şeklinin görünümünü değiştirebilirsiniz. Metin aracını seçin ve sayfaya bir metin girin. Örneğin, Smooth Jazz yazın. Bir yazı tipi ve punto boyutu seçin. Yazı tipini bilgisayarınızda bulunan ve az kullanılan bir yazı ailesinden seçin ve 64 punto gibi büyük bir boyut kullanın. Metin > Yollara Dönüştür seçimini yapın. Metin bir grafiğe dönüştürülür. Ekrandaki metnin görünümü değişmez, fakat dört tane köşe tutamacı görünmesi gerekir. Dönüştürülen karakterlerin hepsi gruplanmıştır. Karakterlerle ayrı ayrı

57

Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler

çalışmak isterseniz, Değiştir > Grubu Çöz seçimini yaparak grubu çözün. Metin üzerinde tek bir bileşik yol gibi çalışmak isterseniz, Değiştir > Yolları Birleştir > Birleştir seçimini yapın.

Dönüşümler Uygulamak Fireworks, bir nesneyi veya nesneler grubunu ya da bir piksel seçim alanını ölçeklemek, döndürmek, çarpıtmak ve eğmek için çeşitli komutlar sağlar. Bu eylemlere dönüşüm adı verilir. Araçlar panelindeki dönüşüm araçlarını kullanabilir veya Değiştir > Dönüştür seçimini yapıp, alt menüden bir seçeneği uygulayabilirsiniz. Bir araç veya Dönüşüm menüsü öğesi seçtiğinizde, seçili nesnede dönüşüm tutamaçları görüntülenir. Herhangi bir dönüşüm tutamacını sürükleyerek nesneyi düzenleyebilirsiniz. Dönüşümler Uygulamak için Metin grafiğinizi seçin ve Eğriltme aracını seçin ya da Değiştir > Dönüştür > Eğriltme seçimini yapın. Bir nesneye Eğriltme uygulamak bunu yatay veya dikey ekseni ya da her iki eksen boyunca eğer. Bir nesneyi dönüşüm tutamaçlarından birini sürükleyerek veya içeri ya da dışarı doğru sürükleyerek eğebilirsiniz. İmleci tutamaçlardan birinin üzerine yerleştirin. Nesnenin açılarını veya kenar uzunluklarını değiştirmek için tutamacı sürükleyin. Eğme işlemini orantılı olarak yapmak için Shift tuşuna basılı tutun. Dönüşümü uygulamak için nesneye çift tıklayın veya Enter (Windows) veya Return (Mac) tuşuna basın.

Metin nesnesi halen seçili durumdayken, Distort aracını seçin veya Değiştir > Dönüştür > Deformasyon seçimini yapın. Deformasyon aracı nesnenin orantılarını değiştirmenizi sağlar. Bunu yapmak için herhangi bir dönüşüm tutamacını sürüklemeniz gerekir. Eğriltme aracından farklı olarak, her tutamacı ayrı ayrı kontrol edebilirsiniz. Metinlerinizin hala düzenlenebilir olduğuna dikkat edin.

58

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

Bölüm 7 Düğmeler Oluşturmak

59

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

Web sitenizi tasarlarken, sayfalarınıza ilgi uyandırmak ve etkileşim eklemek için düğmeler oluşturmak isteyebilirsiniz. Yaptığınız düğmeler, bağlantı adını içeren basit dikdörtgenler ya da basıldığında renk, parlama gibi özellikleri değişen ya da basılı durumdaki mekanik bir düğmenin görünümü alan 3 boyutlu düğmeler olabilir. Fireworks CS3’ de, çeşitli düğmeleri, bunların çalışmasını sağlayan JavaScript ve HTML ile birlikte oluşturabilirsiniz. Basit düğmeler oluşturabilir ve Düğme Düzenleyicisi’ni kullanabilirsiniz; ve hatta kendi düğmelerinizi oluşturabilir ve tekrar kullanmak üzere kaydedebilirsiniz. Rollover, kullanıcı imleci üzerine getirdiğinde veya tıkladığında görünümü değişen bir resimdir. Düğmelerin dört genel durumu vardır. Ancak dilerseniz bu durumlardan sadece iki veya üç tanesini kullanmayı seçebilirsiniz. Her durum kullanıcının düğme ile olan etkileşimini yansıtır. Bu etkileşimler şunlardır: kullanıcının imleci resmin üzerine getirmesi, kullanıcının imleci resimden uzağa taşıması, kullanıcının resme tıklaması ve kullanıcının fare imlecini tıklanan bir düğme üzerinde hareket ettirmesi. Önce, resmin farklı görünümlerini oluşturursunuz; daha sonra Fireworks, rollover’ın tarayıcıda çalışmasını sağlayan HTML ve JavaScript’i oluşturur. Fireworks, kareleri kullanarak rollover’ın farklı durumlarına ait ayrı resimleri saklar. Yukarı durumu 1. karede, Üzerinde durumu 2. karede, Aşağı durumu 3. karede ve Aşağıdayken Üzerinde durumu 4. karede bulunur.

Bu Bölümde Neler Var? • • • •

Düğme Editörü kullanmak Yeni Düğme Oluşturmak Düğme Metinleri Düğmelere Link Eklemek

60

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

Düğme Düzenleyicisi’ni Kullanmak Düğme Düzenleyicisi sizin bir düğmenin tüm durumlarını oluşturmanızı ve her şeyin çalışması için linkler ve HTML eklemenizi sağlar. Çoğunlukla bu düzenleyiciyi kullanmak isteyeceksiniz, ancak dilerseniz düğmeleri elle de oluşturabilirsiniz. Düğme Düzenleyicisi’ni kullandığınızda, düğme kütüphaneye eklenir. Bu şekilde aynı türde diğer düğmeleri eklemek kolay bir işlemdir. Sadece kütüphanedeki yeni düğmeyi tuval üzerine sürüklersiniz. Çoğu kez düğmeleriniz için basit rollover’lar oluşturursunuz. Basit bir rollover, kullanıcı imleci düğmenin üzerine getirdiğinde yeni bir resme geçer ve ardından kullanıcı imleci resmin dışına kaydırdığında eski durumuna geri döner. Basit bir rollover sadece iki grafiğe gerek duyar; bu nedenle yüklenmesi hızlı olur. Düğme Düzenleyiciyi açmak için Düzenle > Ekle > Yeni Düğme seçinini yapın. Düğme Düzenleyici düğmenizi tasarladığınız ayrı bir penceredir. Bütün araçlar ve paneller aynı standart belge penceresindeki gibi kullanılabilir. Eğer Fireworks belge pencereniz Windows’ta ekranı kaplıyorsa, Düğme Düzenleyici de ekranı kaplayacak şekilde açılacaktır. Düğme Düzenleyici penceresinde bir dikdörtgen çizin. Dikdörtgenin genişliğini 130 piksel ve yüksekliğini 30 piksel olarak ayarlayın. Dolgu rengini siyah, dış hat rengini Yok olarak değiştirin. Düzenleyicinin üzerindeki beş sekmeye dikkat edin. Yukarı sekmesi düğmenin normal durumunu oluşturduğunuz yerdir. Normal durum düğmenin sayfada ilk göründüğü zaman aldığı görünüştür. Metin aracını kullanarak düğmeye bir başlık ekleyin. Metin bloğunu dikdörtgenin merkezine yerleştirin. Metin rengini beyaz olarak değiştirin ve ortaya hizalayın. Dilediğiniz bir yazı tipi ve boyut seçin (örneği Verdana, 12 punto) ve metnin diğer kenarında biraz boşluk bırakın. Metin bloğunu hizalayın ve dikdörtgenin sol ve sağ kenarları arasında ortalanmasını sağlayın. Metin bloğunu alt kenara yakın bir yere taşıyın. Sayfadaki diğer düğmeler için, tamamlanmış düğmeyi kopyalayarak, metin etiketini değiştirebilirsiniz.

61

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

Rollover resmi oluşturmak üzere Üzerinde sekmesine tıklayın. Yukarıda Grafiğini Kopyala düğmesine tıklayarak yeni oluşturduğunuz orijinal düğmeyi (dikdörtgen ve metin) kopyalayın. Dikdörtgeni seçin ve rengini değiştirin. Yukarı penceresinde oluşturduğunuz resim, kopyalanarak Üzerinde penceresinde doğru konuma yapıştırılmıştır. Normal olarak, rollover resmi orijinal resme dayanır. Muhtemelen sadece yazının rengi veya düğme gölgesi değişir. Kullanıcı düğmeye tıkladığı zaman görüntülenecek olan resmi oluşturmak üzere Aşağı sekmesini seçin. Yukarıda Grafiğini Kopyala seçimini yaparak resmin önceki durumunun bir kopyasını oluşturun. Bitti düğmesine tıklayın ve düzenleyiciden çıkın. Düğme Editör’ün den çıktığınızda, belge penceresine geri dönersiniz. Düğme tuvalin ortasına yerleştirilir, ancak bunu dilediğiniz yere taşıyabilirsiniz. Bu noktaya kadar, sayfada statik resimler oluşturdunuz. Oluşturduğunuz düğme biraz JavaScript kodu içerir. Bu kod kullanıcı imleci düğmenin üzerine getirdiğinde Yukarı durumundan Üzerinde durumuna ve kullanıcı düğmeye tıkladığında Aşağı durumuna geçmesini sağlar. Fireworks sizin için bütün işlemleri yapmış ve kodu dilimin içine eklemiştir. Dilim Web Katmanı üzerine yerleştirilmiştir ve daima en üsttedir. Eğer dilim kılavuzları görünmüyorsa, Görünüm > Dilim Kılavuzları seçimini yaparak bunları görüntüleyin. Dilim görünmüyorsa, Araçlar panelindeki Dilim Aracı düğmesine tıklayarak görüntüleyin. Dilimler ve dilim kılavuzları diğer düğmeleri ilk düğmeye göre sayfaya yerleştirmek için çok faydalıdır, fakat dikkatinizi dağıtabilirler. Sayfanızı tasarlarken bunları kimi zaman görüntüleyecek, kimi zaman gizleyeceksiniz. Düğme Düzenleyicisi düğmenizi “Düğme” adlı bir sembol olarak kütüphaneye eklemiştir. Semboller, birden çok nesneye ait kopyaları kontrol etmek istediğinizde kullandığınız nesneler veya nesne gruplarıdır. Sembol kopyalarına yansılar da denir. Genelde, farklı metinler içeren görünüşleri aynı düğmeler oluşturmak istiyebilirsiniz. Düğmenizi kütüphanede görüntülemek için Pencere > Kitaplık seçimini yapın. Kitaplık paneli, Varlıklar panel grubunun içinde kenetlenmiştir. Aynı

62

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

zamanda, Varlıklar panel grubundaki açığa çıkarma üçgenine ve ardından Kitaplık sekmesine tıklayabilirsiniz. Kitaplıkda, önizleme bölmesinde, yeni oluşturduğunuz düğmeyi görürsünüz. Kitaplık listesinde ise düğme adını (bu örnekte Düğme) görebilirsiniz. Bu uygulama için listede sadece bir düğme bulunmaktadır, fakat bazen adlandırmak isteyebileceğiniz birçok düğmeye sahip olabilirsiniz. Düğme adını Kitaplık listesinden sayfaya sürükleyin. Düğmenin bir örneği sayfaya yerleştirilir. Düğmenin bir örneğini ilk düğmenin sağına getirin. Sayfaya bir kopya yerleştirmek için düğme adını ya da önizleme bölmesindeki düğme resmini sürükleyebilirsiniz. Sürüklediğiniz tüm düğmelerin içindeki yazılar birbirinin aynısı olacaktır. Yapmanız gereken bu düğmelerden her birinin üzerine tıklamak ve özellikler panelinde Metin alanındaki metni düzeltmenizdir. Bunu yaptığınızda bu düğme örneğinin metni otomatik olarak değişecektir. Böylece her düğme için ayrı bir düğme yapmaktan kurtulmuş olursunuz ve düğmenin orjinal halini değiştirdiğinizde tüm örnekler de değişmiş olur.

Düğmeleri Değiştirmek Oluşturduğunuz düğmeler, ilk düğmelerin kopyalarıdır. Eğer Adobe Flash’ı kullanıyorsanız, büyük olasılıkla sembolleri ve çalışma prensiplerini bilirsiniz. Prensip, Fireworks uygulamasında da hemen hemen aynıdır. Sembollerin avantajı düğmelerin görünüşünü değiştirmeyi kolaylaştırmalarıdır. Örneğin, düğmeleri bir Web sayfasına yerleştirdiğinizde renklerini beğenmediğinizi düşünün. Eğer ayrı düğmelere sahip olsaydınız, her düğmeyi ayrı ayrı değiştirmeniz gerekirdi. Düğmeleriniz aynı sembolün örnekleri olduğu için, sadece orijinal sembolü değiştirmeniz gerekir. Her örnek otomatik olarak değiştirilecektir. Bu, zaman kazandırıcı bir özelliktir. Düğme Düzenleyicisi açılır. Aynı zamanda Kitaplığın Önizleme bölmesindeki düğme simgesine veya düğme resmine çift tıklayabilirsiniz. Kitaplık listesinde düğme adı yerine, düğme simgesine tıklarsanız, Düğme Düzenleyicisi yerine

63

Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak

Sembol Özellikleri iletişim kutusu açılır. Daha sonra Düğme Düzenleyicisi’ni açmak için Düzenle düğmesine tıklayabilirsiniz.

Düğmelere Bir Ad Vermek ve Bir Bağlantı Eklemek Düğmeleriniz güzel görünebilir, fakat önemli bir öğe eksiktir. Bununla birlikte, bir düğmenin temel amacı, sitenizin başka bir sayfasına bağlantı yapmak üzere bir yöntem sağlamaktır. Fireworks’te düğmelerinize linkler ekleyebilirsiniz. Dilerseniz bunları daha sonra Macromedia Dreamweaver’da ekleyebilirsiniz. Fireworks’te bir düğmeye bağlantı eklemek için, düğmeyi seçin ve ardından Özellikler denetçisindeki Bağ metin kutusuna bağlantıyı yazın. Düğme metin kutusuna düğmeniz için bir ad girin. Düğme için girdiğiniz ad, sayfayı ihraç ettiğinizde resme atanan addır. Düğmenin ismini soldaki kutudan ayarlayabilirsiniz. Düğmelere bağlantı vermek istersenizse Bağ kutusunu kullanarak bağlantılarınızı verebilirsiniz. Bağ kutusu içinde başka bir siteye giden bağlar verecekseniz adresini tam olarak yazmalısınız (örneğin: http://www.adobe.com). Alt kutusu içine de bağın alternatif metnini yazabilirsiniz.

64

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

Bölüm 8 Dilimler ve Aktif Bölgeler

65

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

Dilimler ve aktif bölgeler Fireworks içinde yaptığınız çalışmalarınızı bir web sayfası olarak dışarı almak için kullanabileceğiniz önemli araçlardan bir tanesidir. Bu araç sayesinde dilimlerinizi dışarı ayrı ayrı resimler olarak alabilirsiniz.

66

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

Bir Resim Haritası Oluşturmak Tanım olarak, ihraç edilen tüm grafikleriniz dikdörtgenseldir. Bir grafiğe bir bağlantı eklediğinizde, bağlantının şekli de dikdörtgensel olur. Grafiğin bir kısmını saydam yapabilir ya da arkaplan rengini, Web sayfasının arkaplan rengiyle aynı yaparak farklı bir şekil izlenimi verebilirsiniz. Ancak hâlâ bir dikdörtgene sahip olacaksınız. Eğer bir şeklin bağlantı alanını dikdörtgen yapmak istemezseniz veya bir resim üzerinde çeşitli bağlantılar oluşturmak isterseniz, bir resim haritası kullanmak zorundasınız. Örneğin, bir dünya haritasına sahip olduğunuzu ve her ülke için bir bağlantı oluşturmak istediğinizi düşünün. Ülkelerin birçoğu düzensiz şekillere sahip olup, hiçbiri düzgün bir şekilde yan yana sıralanmaz. Her ülkenin farklı şekillerini ayırmanız ve ardından her şekle farklı bir link atamanız gerekir. resim haritası bu işi yapar. Bir resim haritası üzerindeki bağlantı alanları Fireworks’te aktif bölgeler olarak anılır. Bir grafikteki aktif bölge alanı şu üç şekilden biri olabilir: dikdörtgen, daire veya çokgen. Aktif bölge, sayfanızı HTML olarak ihraç ettiğinizde bir resim haritası’na dönüştürülen alandır. Her ne kadar Macromedia Dreamweaver gibi bir HTML düzenleyicide resim haritaları oluşturmak kolay bir işlem olsa da, Macromedia Fireworks de aynı işlemi gerçekleştirebilir. Fireworks’te karmaşık aktif bölgeler oluşturmak çok daha kolaydır çünkü bir vektör nesnenin şekli çok kenarlı bir aktif bölge oluşturmak üzere kullanılabilir. Sonuçtaki HTML dosyası Web sayfanıza yapıştırılabilir veya Dreamweaver projenize eklenebilir. Aktif bölgeler eklemek için yapmanız gereken Fireworks içinde, aktif bölgeler aracını kullanmaktır. Bu araç Araçlar panelinin en altında yer alan araçtır. Bu araç ile dikdörtgensel, dairesel ve çokgensel alanlar çizebilirsiniz. Bu çizmiş olduğunuz alanlar Fireworks dosyasının içinde etkileşim etkleyebileceğiniz alanlardır. Aktif alan olarak belirlediğiniz alanlar bir resim haritası oluştururlar. Bu haritalar resmi gerçekten bölmez ancak resmin belli bir bölgesini işaretlerler.

Web Katmanıyla Çalışmak Aktif bölgeler ve dilimler (bu derste daha sonra açıklanacaktır) Katmanlar panelindeki Web Katmanı üzerinde saklanır. Web Katmanı varsayılan olarak en üst katmandır ve taşınamaz. Resimlerinizle çalışırken aşağıdaki nesneleri düzenlemek için aktif bölgeleri veya dilimleri gizlemek istemeyebilirsiniz. Araçlar panelinde Dilimleri ve Sıcak Nokataları Göster/Gizle düğmesine 67

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

tıklayabilir veya Katmanlar panelini kullanabilirsiniz. Araçlar panelini kullanırsanız, tüm aktif bölgeler, dilimler ve dilim kılavuzları gizlenir. Katmanlar panelini kullanırsanız, dilimleri ve aktif bölgeleri ayrı ayrı gizleyebilirsiniz. Bir resmi dilimlemek yada oluşturmakta olduğunuz ana sayfa çalışmasında nihai amacınız sayfayı HTML olarak ihraç etmek olacaktır. Sayfanız geçerli durumda dört düğmeden ve çeşitli grafik öğelerinden (logo, biraz metin, bir resim v.s) oluşmaktadır. Sayfayı şimdi ihraç etseydiniz, düğmelerle birlikte çeşitli büyük resimler elde ederdiniz. Bunun ne anlama geldiğini görmek için, ana sayfanıza bakın. Düğmeler üzerindeki dilimleri görmezseniz, Araçlar panelindeki Dilimleri ve Sıcak Noktaları Göster düğmesine tıklayın. Düğmeleriniz için dilim kılavuzlarını göremezseniz, Görünüm > Dilim Kılavuzları seçimini yapın. Kırmızı kılavuzlar sayfayı ihraç ettiğiniz zaman dilimlenecek veya kesilecek olan alanları belirtir. Bir cetvel ve bıçak kullanarak tuvali kırmızı çizgilerden kestiğinizi hayal edin. Sonuçtaki parçalar, sayfayı ihraç ettiğiniz zaman elde edeceğiniz resimler olacaktır. Bazı resimler büyüktür ve yüklenmesi uzun süre alabilir. Yapmak istediğiniz şey sayfanızı mantıklı olarak bölen daha küçük dilimler oluşturmaktır. Tuvali böldüğünüz zaman, sadece resmi küçük parçalara bölmeyip, aynı zamanda oluşturulacak olan HTML tablosunu da tanımlarsınız. HTML tablosu, içine metin ve grafikler yerleştirebileceğiniz satırlar ve sütunlardır. Tablolar sayfanızın görünümünü kontrol etmek için kullandığınız yöntemdir. Tablodaki satırlar ve sütunlar istediğiniz yükseklik ve genişlikte olabilir. Ayrıca sayfadaki diğer sütun ve satırların üzerine yayılan sütunlar ve satırlara sahip olabilirsiniz. Bir resmi dilimlemenin çeşitli avantajları vardır. Örneğin, bir grafiğin bir kısmını sık sık güncelleyecekseniz, dilimleme kullanırken grafiğin sadece bu parçasını güncellemeniz yeterli olacaktır. Ayrıca, her dilim daha iyi genel sonuçlar alabilmek için ayrı ayrı optimize edilebilir: Resmin bir kısmı için ihraç ederken JPEG en iyi seçimken, başka bir kısmı için en iyi seçim GIF olabilir. Dilimlemek aynı zamanda sayfaya bir etkileşim ekleme yöntemidir. Düğmelerinizin üzerindeki dilimler, Düğme Düzenleyicisini kullandığınızda sizin için otomatik olarak eklenmiştir. Rollover’ları elle eklemiş olabilirsiniz. Ancak Düğme Düzenleyicisi kullanarak bunları oluşturmak çok kolaydır. Bununla beraber, ayrık rollover’lar ve açılır menüler gibi başka etkileşimli öğeler de ekleyebilirsiniz.

68

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

Bir Dilim Eklemek Bir dilimi sayfaya çeşitli yollarla ekleyebilirsiniz. Dilim aracını kullanarak dilimi çizebilirsiniz, ya da bir nesneyi seçebilir ve seçili nesnenin boyut ve yerleşimini temel alarak Fireworks’ün bir dilim oluşturmasını sağlayabilirsiniz. Dilim eklemek için birden fazla seçeneğiniz bulunmaktadır. Bunlar: • Dilim aracını alın ve dilimlemek istediğiniz alanın üzerine dikdörtgen çizin • Herhangi bir nesneyi seçin ve sağ butona basarak Dikdörtgen Dilim Ekle seçeneğini seçin.

Bir Davranış Eklemek Herhangi bir dilimi işaretlediğinizde ortasında bir davranış tutamacı bulunur. Bu davranış tutamacını başka bir dilim üzerine sürüklediğinizde, tutmacın olduğu dilimin üzerine gelindiğinde hedefteki dilimin içinde başka bir karedeki resmin gözükmesini sağlayabilirsiniz. Eğer bu hedef işaretini dilimin kendi üzerine sürüklerseniz o zaman bu dilimin üzerine fare imleci geldiğinde değişmesini sağlarsınız (Rollover Resim). Bu sürükleme işlemini yaptığınızda size hangi Kare içindeki içeriğin gözükmesini istediğiniz sorulacaktır. Yeni kare ekleme işlemi aşağıda anlatılmıştır.

Bunun için öncelikle çalışmanıza yeni bir kare eklemelisiniz. Bunu yapmak için Kare panelini açın. Daha önce başka kare eklemediyseniz burada Kare 1 göreceksiniz. Bu durumda Pencerenin altındaki butona tıklayarak yeni bir kare ekleyebilirsiniz.

69

Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler

Açılan iletişim kutusunda en sona ekle seçeneğini seçin. Bu o anki aktif olan birinci karenin sonrasına yeni bir kare ekleyecektir. Kareler penceresinde yeni eklediğiniz kareye tıklayın. Bu adını değiştirmediyseniz Kare 2 olacaktır. Bu kareye tıkladığınızda sayfanızın içindeki tüm içeriklerin kaybolduğunu göreceksiniz. Sadece sayfanıza ait dilimler gözükecektir. Eğer dilimler gözükmüyorsa dilimlerin görünümünü açın. Eğer daha önceden sayfanıza butonlar eklemişseniz zaten en azından 4 adet kareniz olacaktır. O zaman bu karelerden ikincisini seçip içeriğinizi buraya ekleyebilirsiniz. İkinci kareyi seçtikten sonra yapmanız gereken bu kare içinde hedefdeki dilimimizin bulunuduğu alana gözükmesini istediğiniz resmi koymaktır. Eğer dışarıdan bir resim kullanacaksanız o zaman Dosya > İçe Aktar seçeneğini seçerek resimlerinizi dışarıdan ithal edebilirsiniz.

70

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Bölüm 9 Optimizasyon ve İhraç Etmek

71

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Çalışmanızı tamamladıktan sonra, bunu ihraç etmeniz gerekir. Resmi ister Web üzerinde veya ister çoklu ortam (multimedya) sunumlarında kullanın, Fireworks mümkün olan en küçük dosya boyutunda en kaliteli resimleri oluşturmak için çeşitli yöntemler sunar. Fireworks şu dosya türlerini ihraç eder: GIF, JPEG, PNG, TIFF, BMP, PSD, Illustrator 7 ve WBMP. WBMP (Kablosuz Bitmap), mobil cihazlar için optimize edilen grafik dosya biçimidir. Resimlerinizi ihraç etmek aslında iki adımlık bir işlemdir. Önce, Optimize panelinde resminiz için optimize etme parametrelerini ayarlarsınız; ardından resmi optimizasyon ayarlarınıza göre kaydederek ihraç edersiniz. Fireworks uygulamasının özgün dosya biçimi PNG’dir. Her ne kadar bir Web sayfasında optimize edilmiş bir PNG dosyası olarak kullanmak mümkün olsa da, bu her zaman en iyi seçenek değildir. Her zaman orijinal Fireworks PNG dosyalarının bir kopyasını, ihraç edilen dosyalarla birlikte saklamanız gerekir. Fireworks PNG dosya türü düzenlenebilir metni, efektleri ve vektör nesneleri korur, böylece kolaylıkla değişiklik yapabilirsiniz. Bir resimde değişiklik yapmanız gerekirse, Fireworks PNG dosyasını değiştirin ve ardından Web sayfasına yerleştireceğiniz grafiği elde etmek için bunu yeniden ihraç edin.

Bu Bölümde Neler Var? • • • • •

Fireworks’te kullanılabilen çeşitli renk paletleri Dışa Aktarma Sihirbazı Dosya Boyutları Optimize Paneli İhraç Ayarları

72

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Dışa Aktarma Sihirbazını Kullanmak Dışa Aktarma Sihirbazı dosyalarınızı ihraç etmek için hızlı bir yol sunar. Sihirbaz çeşitli sorular sorar ve ardından dosya türleri ve optimizasyon ayarları önerir. Aynı zamanda Dışa Aktarma Sihirbazı için bir dosya boyutu ayarlayarak optimizasyon için bir hedef olarak kullanabilirsiniz. Soru iletişim kutularının sonunda, optimizasyon önerileri içeren Görüntü Önizleme iletişim kutusu açılır. Reklam başlıkları (banner’lar) Web’in her tarafına yayılmıştır. Bir Web sitesinde bir reklam alanı satın alırsanız, size reklam için bir genişlik ve yükseklikle birlikte bir dosya boyutu verilir. Dışa Aktarma Sihirbazı ilanlarınızı optimize etmek için mükemmel bir araçtır; sadece maksimum boyutunu girersiniz ve sihirbaz gerisini yapacaktır. Dışa Aktarma işlemi için çalışmanızı açın. Dosya > Dışa Aktarma Sihirbazını seçin. İletişim kutusundaki Hedef dışa aktarma dosya boyutu seçeneğini işaretleyin, metin kutusuna 15 yazın ve ardından Devam düğmesine tıklayın.

Dışa Aktarma Sihirbazı’nda Hedef dışa aktarma dosya boyutu’nu seçerseniz, Fireworks, JPEG dosyalarının kalitesini ayarlayarak, JPEG dosyaları için yumuşatma ayarını değiştirerek, GIF dosyalarındaki renk sayısını değiştirerek ve GIF dosyaları için renk taklidi ayarlarını değiştirerek dosyayı optimize etmeye çalışır. Bu özellik bilhassa ticari Web sitelerinde reklam başlıkları 73

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

(banner’lar) için maksimum dosya boyutunu aşmayan resimler ve hareketli GIF dosyaları oluşturmak istediğinizde önemlidir. Hedefi seçin iletişim kutusunda (Dışa Aktarma Sihirbazı olarak da adlandırılır), Web’i seçin ve ardından Devam düğmesine tıklayın.

Hedef seçiminiz dosyayı ihraç etmek için gereken dosya boyutunu belirler. Web’i veya Dreamweaver’ı seçerseniz, bir GIF veya JPEG resmi oluşturulur. Bir görünütü düzenleme uygulaması veya bir masaüstü yayıncılık uygulaması seçmek, TIFF resmi ile sonuçlanır. Birkaç saniye sonra Analiz Sonuçları ekranı Fireworks’ün önerilerini görüntüler.

Çıkış düğmesine tıklayarak Görüntü İzleme penceresine geçin.

74

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Sağ üst kısımdaki önizleme, resmi bir GIF dosyası olarak, sağ alt kısımdaki önizleme ise resmi bir JPEG dosyası olarak görüntüler. Burada Fireworks’ün seçtiği ayarları kullanabilir veya kendi ayarlamalarınızı yapabilirsiniz. Sağ üst önizlemeye ve ardından sağ alt önizlemeye tıklayarak sihirbazın sizin için seçtiği ayarları görüntüleyin. Her önizleme ihraç formatını, renk sayısı, dosya boyutunu ve resmin yüklenmesi için gereken yaklaşık süreyi görüntüler. Yükleme süresi 56-Kbps download hızını esas alır. Hız seçeneği değiştirilemez.

Kullanmak istediğiniz önizlemeye tıklayın ve ardından resmi ihraç etmek için Dışa Aktar düğmesine tıklayın. Dışa aktarılan dosya türünü seçerken, önizleme penceresindeki dosya kalitesi ile birlikte dosya boyutunu dikkate almanız gerekir. Bu uygulamada GIF ve JPEG resimlerin her ikisi de aynı görünmektedir. Resmin diğer kısımlarını da görmek için, önizleme içinde sürükleyin. Önizleme içinde sürüklerseniz, imleç el şeklindeki imlece dönüşür.

75

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Eğer sadece resim olarak dışarı almak istiyorsanız, Dışa Aktar açılır menüsünde, Sadece Görüntüler seçimini yapın. Aktif ise Dilimler seçeneğini Yok olarak değiştirin ve Projeler klasörüne konumlanın. Dosyayı kaydetmek için Kaydet düğmesine tıklayın.

Resmin Dosya Türünü Seçmek Dışa Aktarma Sihirbazı reklam başlıklarının (banner) analizi işlemini sizin için yapar, fakat normal olarak resim optimizasyonu ve dışa aktarma ayarlarının kontrolünü kendiniz yapmak istersiniz. Doğru resim türünü seçmek optimizasyon süreci için çok önemlidir. Web grafikleri için en popüler dosya türleri GIF ve JPEG’dir. GIF resimleri g ’dir. genellikle iki renkli ve düz renkli resimler için kullanılır. GIF resimleri saydam alanlar içerebilir ve animasyon dosyaları için kullanılabilir. GIF resimlerinin dezavantajı bunların 256 renkle

76

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

kısıtlanmış olmasıdır. JPEG dosya türü genellikle fotoğraf türündeki resimler veya degradeli ve çok renkli resimler için kullanılır. JPEG dosyaları saydam olamaz veya animasyonlarda kullanılamaz. Dosyayı veya dilimleri ihraç etmek için biçimlendirme seçeneklerini ayarlamak üzere En İyileştir panelini kullanırsınız. En İyileştir sürecini daha iyi kontrol edebilmek için, her dilimin optimizasyonunu ayarlamak isteyeceksiniz.

Fireworks İçinden İhraç Etmek Pencere > En İyileştir seçimini yaparak En İyileştir panelini açın. Dışa Aktar Dosya Formatı açılır menüsünden GIF’i seçin. Eğer panel, panel grubuna kenetlenmişse, açmak için açığa çıkarma üçgenine de tıklayabilirsiniz.

Dışa Aktarılan dosyanın türü için GIF seçerseniz, aktarım için renk paletini seçmeniz gerekir. GIF dosyaları en çok 256 renk içerebilir (genellikle, sadece 216 renk; diğer 40 renk işletim sistemi ve tarayıcı tarafından kullanılır).

77

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Dizine Alınmış Palet açılır menüsünden Bağdaşlık’ı seçin. Renkler açılır menüsünde renk sayısını 256 olarak değiştirin. Renk paleti, resimde kullanılan renkler grubudur. Fireworks sizin kullanmanız için on önceden ayarlanmış palet içerir.

Aşağıdaki liste varsayılan paletleri açıklamaktadır: • Bağdaşlık: Resimdeki çoğunluk renkleri içeren özel bir palet oluşturur. Bu renklerin Web uyumlu olup olmadıkları önemli değildir. • Web Bağdaşlık: Web 216 paleti ve Bağdaşlık paleti arasında bir köprü oluşturur. En yakın Web uyumlu renge yakın yedi renklik bir tolerans aralığında bulunan renkler. • Web 216: Hem Windows hem de Macintosh bilgisayarlarda benzer bir görünüme sahip olan 216 renklik bir palet görüntüler. Bazen Web uyumlu veya tarayıcı uyumlu olarak da başvurulur, çünkü farklı platformlarda ve farklı tarayıcılarda en benzer sonuçları üretir. Resimdeki her renk en yakın Web uyumlu renkle değiştirilir. • Tam: Resim 256 veya daha az renk içerdiğinde renkleri olduğu gibi kapsar. Eğer resim 256 renkten fazla renk içeriyorsa, Web Bağdaşlık paleti varsayılan olarak kullanılır. • Macintosh: Macintosh sistem renkleri tarafından tanımlanan 256 renk içerir. • Windows: Windows sistem renkleri tarafından tanımlanan 256 renk içerir. • Gri tonlama: 256 (veya daha az) gri tonlu renk içerir. Bu paleti kullanmak resminizi gri tonluya dönüştürür. • Siyah-Beyaz: Sadece siyah ve beyaz renkten oluşan iki renkli bir palet görüntüler. 78

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

• Birörnek: RGB piksel değerlerine dayanan matematiksel bir palet görüntüler. • Özel: Kullanıcıya Fireworks veya Adobe Photoshop uygulamasında kaydedilen başka bir paleti ithal etme seçeneği verir.

4-Up Önizleme Düğmesini Kullanmak Fireworks sizin belgenizdeki resimleri ihraç etmeden önce önizlemenizi sağlar. Sayfayı oluştururken ihraç etme ayarlarını belirleyebilir ve sonuçları önizleyebilirsiniz. Aynı zamanda farklı ayarları görmek için belgeyi iki veya dört önizleme alanına bölebilirsiniz. Fireworks aynı zamanda her önizleme için yaklaşık yükleme sürelerini ve dosya boyutunu görüntüler. Belge penceresinin üzerindeki 4-Up düğmesine tıklayın. 2-Up düğmesi belgeyi iki önizlemeye ayırır; 4-Up düğmesi belgeyi dört önizlemeye ayırır. 2Up ve 4-Up modlarında, sol üst önizleme orijinal resmi görüntüler ve düzenlenebilir. Diğer alanlar sadece önizlemelerdir. 2 -Up ve 4-Up önizleme modlarında, orijinal resmi (veya orijinal olmayan resmi) önizleme alanlarından herhangi birinde görüntüleyebilirsiniz. Önizleme alanının altındaki açılır menüden Original’ı seçin.

79

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Seçilen önizlemenin etrafında siyah bir kenarlık (Macintosh OS X için gri) görüntülenir. Seçilen önizleme En İyileştir panelinde yaptığınız herhangi bir değişikliği yansıtır. Dışa Aktar Önizleme penceresindeyken, imleci panel içine sürüklediğinizde el simgesine dönüşmüştür. Önizleme alanında, resmi önizleme içinde taşımak için Araçlar panelinden El aracını seçmeniz gerekir. El aracına otomatik olarak geçmek için sürüklerken Boşluk tuşuna da basabilirsiniz. Bu kısayol aynı zamanda belge penceresinde düzenleme yaparken de çalışır. En İyileştir panelinde, Dizine Alınmış Paleti, Web 216 olarak değiştirin ve Renkler açılır menüsünde renk paletinin renk sayısını 32 olarak ayarlayın. Daha küçük bir sayı seçmek dosya boyutunu azaltır. Sağ üst panele bakın ve dosya boyutunu ve renk sayısını kıyaslayın. Resminize bağlı olarak, dosya boyutu önemli ölçüde azaltılmış olabilir. Bu sayfada, belirgin bir değişiklik görmeniz gerekir. Önizleme penceresi çevresinde El aracını kullanarak veya sürüklerken Boşluk tuşuna basarak resmi görüntüleyin ve resmin taneselliğine bakın. Aynı zamanda renk sayısını azalttıktan sonra resmin kalitesine bakın. Resimdeki gerçek renk sayısından daha küçük bir sayı seçerseniz, bazı renkler kaybolur. Kaybolan renklerden oluşan pikseller paletteki en yakın renge dönüştürülür. En İyileştir panelindeki Renk Taklidi sürgüsünü sıfır değerine kaydırarak Renk Taklidi miktarını azaltın. Renk Taklidi İşlemi, geçerli palette bulunmayan renkleri taklit etme işlemidir. Renk Taklidi uygulanan bir resim genellikle karlı veya tanecikli görünür; ancak Renk Taklidi İşlemi, degradeye benzer renk geçişleri tarafından oluşturulan şerit görüntüsünü düzgünleştirmek için faydalı olabilir. Sayı ne kadar büyükse o kadar fazla renk taklidi işlemi gerçekleşir ve dosya boyutu artar.

80

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Renk taklidi işlemini kaldırdıktan sonra dosya boyutuna tekrar bakın. Dosya boyutunda açık bir fark vardır, fakat resmin kalitesi bozulmuştur ve kabul edilemez.

Dört önizlemeyi inceleyerek, optimizasyon ayarlarında yaptığınız değişikliklerin sonuçlarını görebilirsiniz. Ayarlardan memnun kaldığınızda, kullanmak istediğiniz önizleme içine tıklayarak bunu seçin.

81

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Mevcut Optimizasyon Ön Ayarlarını Kullanmak Resimlerinizin dosya türünü hızlı bir şekilde ayarlamak için kullanacağınız birçok ön ayar bulunmaktadır. Bu ön ayarlardan birini seçtikten sonra, bunları daima değiştirebilir ve resimleri düzenleyebilirsiniz.

Ön ayarlar En İyileştir panelindeki Kaydedilmiş Ayarlar açılır menüsünde listelenir. Eğer bir dilim seçili durumdaysa, Özellikler denetçisinde optimizasyon ayarlarından birini seçebileceğiniz Dilim Dışa Aktarma Ayarları açılır menüsü görüntülenir.

JPEG Resimlerini Dışa Aktarmak GIF seçeneği 8 bit’lik veya en çok 256 renkli resimleri dışa aktarır ve çizgisel, düz renkli resimlerle iyi çalışır. Fotoğraflar veya geçişmeler ya da milyonlarca renk içeren çalışmaları, JPEG türünde dışa aktarabilirsiniz. JPEG kayıplı bir sıkıştırma yöntemine sahiptir. Yani resminize bakar ve sıkıştırma algoritmasının bir parçası olarak bazı bilgileri siler. Oluşturduğunuz ana sayfada bazı düğmeler, biraz metin, logo ve ayrık rollover resimleri bulunmaktadır. Son uygulamada ayarladığınız GIF denetimleri, ayrık rollover’lardaki resimler hariç sayfanın bütün alanları için geçerli olacaktır. Bu resimler için, JPEG sıkıştırma yöntemini kullanmanız gerekir. Rollover’lar 82

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

oluşturmak için kullandığınız alanın tam üzerinde zaten bir dilim bulunmaktadır. Basitçe dilimi seçebilir ve sadece bu dilimin En İyileştir ayarlarını değiştirebilirsiniz. Çalıştığınız resmin üzerindeki dilimi seçin. En İyileştir panelindeki Kaydedilmiş Ayarlar açılır menüsünden JPEG – Daha İyi Kalite’yi seçin. Resmi önizlemek için 4-Up düğmesine tıklayın. El aracını kullanarak istediğiniz alanı görüntü alanına getirin. Bir JPEG resmindeki sıkıştırma düzeyini artırarak, kaliteyi azaltırsınız. Bu resimde, kalite yüzde 80 olarak ayarlanmıştır. Sağ üst önizlemedeki resmi seçin ve ardından En İyileştir panelindeki Kalite sürgüsünü yüzde 60 değerine kaydırın. Resmi, diğer önizleme pencerelerindeki resimlerle kıyaslayın. Daha yumuşak görünmesine rağmen, halen kabul edilebilir bir resimdir. Dosya boyutu biraz daha azdır. Sağ alt önizlemedeki resmi seçin ve En İyileştir panelindeki Kalite sürgüsünü yüzde 35 değerine kaydırın. Bu ayarda, resimdeki yapay sıkıştırma olguları (piksel bloklarının göründüğü alanlar) görüntülenir. Dosya boyutu kazançları, kalite kaybını karşılamaz.

83

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Sol alt önizlemedeki resmi seçin. Format biçimini JPEG olarak değiştirin, Kalite sürgüsünü yüzde 50 değerine getirin ve Düzgünleştirme açılır menüsündeki düzgünleştirme düzeyini 1 olarak değiştirin. JPEG formatındaki sıkıştırma planı bazen resimdeki pürüzlü ve tıknaz alanları bırakır. Düzgünleştirme, bu pürüzlü kenarları, dikkat çekmesini önleyecek şekilde bulanıklaştırır. Düzgünleştirme ile dosya boyutu biraz azaltılır.

Dışa aktar ayarlarını yaptıktan sonra, bunları gelecekteki dışa aktarma işlemleri veya toplu işleme için kaydedebilirsiniz. En İyileştir panelindeki bütün ayarlar kaydedilir. Sağ üst önizlemeyi seçin. Bu önizlemede kullanılan en iyileştir ayarlarını kaydetmek istiyorsunuz. Bu ayarlar, ihraç ederken veya ayarları ya da dosyayı kaydederken kullanılır. En iyileştir paneli seçenekler menüsünden Ayarları Kaydet seçimini yapın. Hazır Ayar Adı metin kutusunda ayarlarınız için bir ad girin. Tamam düğmesine tıklayın. Kaydedilen ayar adları şimdi En İyileştir panelindeki Ayarlar açılır listesinde görünür. Bu ayar topluluğu, silinene kadar kullanılabilir. Bu ayarları diğer resimlerde kullanmak için, En İyileştir panelindeki Aayarlar açılır menüsünden ayar adını seçin.

84

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Original düğmesine tıklayarak belge penceresine geri dönün ve dosyanızı kaydedin. Aynı optimizasyon seçeneklerini bütün resimlerinizde kullanabilirsiniz. Kaydedilen ayarları kullanmak için, Optimize panelindeki Settings açılır menüsünden ayar adını seçin. Settings açılır menüsünden ayar adını seçin.

Tarayıcıda Önizlemek Belge penceresindeki Önizleme düğmesi, sayfanızı görüntülemek için iyi bir yöntem sağlar. Ayrıca sayfanın dilediğiniz gibi olduğundan emin olmak için ihraç etmeden önce bir tarayıcıda önizleyebilirsiniz. Dosya > Tarayıcıda Önizleme seçimini yapın. Eğer birincil tarayıcı ayarlanmışsa, alt menüde listelenecektir. O zaman tarayıcıyı alt menüden seçebilirsiniz.

85

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Eğer listede bir tarayıcı göremezseniz, alt menüden Ana Tarayıcıyı Ayarla seçimini yapın. Tarayıcıyı Bul iletişim kutusunda, ana tarayıcı olarak kullanmak istediğiniz tarayıcı uygulamasının konumuna gidin. Tarayıcıyı seçin ve ardından Aç düğmesine tıklayın.

Tarayıcınızı ayarladıktan sonra, 1. adımı tekrarlayın. İkinci bir tarayıcı ayarlamak isterseniz, 2. adımı tekrarlayın ve alt menüden Set İkinci Tarayıcıyı Ayarla seçimini yapın. Sayfanız tarayıcıda açılır.

HTML Olarak İhraç Etmek Şimdi belgenizi ihraç etmeye ve sayfanızı düğmeler ve rollover’larla görüntüleyen HTML sayfasını oluşturmaya hazırsınız. Fireworks bütün işi yapar; sizin sadece dosyalarınızın kaydedileceği konumu ayarlamanız gerekir. Dosya > Dışa Aktar seçimini yapın. Dışa aktar açılır menüsünde, HTML and Images seçimini yapın. HTML açılır menüsünden dışa aktar HTML File seçimini yapın. Bu sayfa için, sadece HTML kodlu rollover resimleri istemeyip; aynı zamanda sayfanın da HTML olarak dışa aktarılmasını istiyorsunuz. Aynı zamanda 86

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

dosyalarınızı dışa aktarmak için sitenizin yerel klasörünü seçtiğinizden emin olmanız da gerekmektedir. Bu klasör, diğer dosyalarınıza giden bağların (eğer varsa) çalışması için çok önemlidir.

Dilimler açılır menüsünden Dilimleri Dışa Aktar seçimini yapın. Dilim (her düğmenin üzerindeki yeşil yarı saydam alan), Fireworks’ün düğmeleri nasıl oluşturacağını (keseceğini) belirler. Dilimleri dışa aktarmazsanız, sayfa bir resim olarak ihraç edilir. Dilim aynı zamanda rollover’lar için JavaScript kodu da sağlar; eğer dilimler dışa aktarılmazsa, rollover’larınız çalışmayacaktır. Dilimsiz alanlar için bir grafik oluşturmak için “Dilimleri olmayan alanları dahil et” seçimini yapın. Bu seçeneği seçmezseniz, HTML tablosunda boş hücreler oluşturursunuz.

87

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

“Görüntüleri alt klasörlere koy” onay kutusunu işaretleyin. Genellikle resimleri HTML dosyalarından ayırmak istersiniz. Dosya bakımı ve organizasyonu için böyle yapmanız önerilir. Fireworks varsayılan olarak Görüntüler adında bir alt klasör oluşturur. Görüntüleri alt klasörlere koy, seçimini yaptığınızda, Gözat düğmesinin yanında varsayılan dosya adı olan Görüntüleri görürsünüz. Eğer resimlerinizi Görüntüler klasörü dışında bir klasöre saklamak isterseniz, Gözat düğmesine tıklayın ve klasörün yerini belirleyin. Fireworks’ten dışa aktardığınız dosyaların Dreamweaver’da bir site olarak tanımlanmış (veya tanımlanacak) olan bir klasöre (veya alt klasöre) kaydedilmesi gerekir. Bazı klasör adları ve dosya adları bu kitapta okunabilirlik açısından BÜYÜK harfle yazılmıştır. Bazı Web sunucuları dosya adları için BÜYÜK harf kullanımını desteklemez. Resimleri ve HTML sayfalarını hazırlarken, dosya adları için küçük harfler kullanmanız önerilir. Böylelikle dosya adlarının herhangi bir sunucuda destekleneceğinden emin olabilirsiniz. Fireworks’ün sizin için oluşturduğu klasör adındaki harflerin tümü küçük harflidir. Fireworks’ün HTML oluştururken kullandığı HTML seçeneklerini tanımlamak için Seçenekler düğmesine tıklayın. Fireworks’ün HTML dosyasını nasıl oluşturduğunu tanımlamak için çeşitli seçenekleri ayarlamanız gerekir. Bu seçenekler HTML Ayarı iletişim kutusunda tanımlanır. Bu iletişim kutusuna şimdi yaptığınız gibi Dışa Aktar iletişim kutusundan ulaşabilir veya Dosya > HTML Ayarı seçimini yapabilirsiniz. HTML Ayarı iletişim kutusunun Genel sekmesinde, Fireworks’ün oluşturduğu HTML stilini ve dosya uzantısını seçebilirsiniz. Genel sekmesi seçiliyken, HTML Ayarı açılır menüsünden Dreamweaver HTML seçimini yapın. Uzantı olarak .htm’i seçin. Bir Macintosh kullanıyorsanız, Dosya Yaratıcı açılır menüsünden Dreamweaver seçimini yapın.

88

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Fireworks uygulamasının HTML oluştururken kullandığı yöntem, açılır menüden seçtiğiniz HTML stiline bağlıdır. Fireworks uygulaması, Dreamweaver, FrontPage, GoLive ve genel özellikleri olan bir stili destekler. Uzantı açılır menüsünden, çeşitli yaygın uzantılardan birini kullanabilirsiniz. Eğer sizin gerek duyduğunuz uzantı listede bulunmazsa, metin kutusuna yazabilirsiniz. “HTML yorumlarını dahil et” onay kutusu Fireworks’ün açıklamaları HTML kodlarına ekleyip eklemeyeceğini belirler. Açıklamalar, kodu bir HTML editörüne yapıştırıyorsanız, bunları nereye kopyalamanız gerektiğini gösterir. Eğer HTML’e aşinaysanız, açıklamalara gerek duymayabilirsiniz, bu yüzden bu seçeneği seçimden çıkararak Fireworks’ün ürettiği kodları azaltın. “Küçük harfli dosya adı” seçeneği Fireworks’ün dosyaları ihraç ederken küçük harfli dosya adları oluşturmasını zorlar. Web sunucularının birçoğu BÜYÜK/ küçük harfe duyarlı olduğundan, dosya adlarının hepsi için küçük harfler kullanmak iyi bir fikirdir. Bu şekilde, hiçbir karışıklık olmaz ve adlandırma kuralınız tutarlı olur. Macintosh işletim sistemindeki Dosya Yaratıcı seçeneği, dosyaya çift tıkladığınızda Finder’dan Dreamweaver’ı açmanızı sağlar. Tablo sekmesini seçin. Tablo sekmesi Fireworks’ün oluşturduğu tabloda aralıkları değiştirmenize imkân verir. Bu genelde varsayılan ayarları kullanacaksınız.

89

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Sayfanızda dilimler varsa, Fireworks HTML dosyasını oluşturduğunda bir HTML tablosu yaratır. “Aralıklarla Birlikte” açılır menüsünde, 1 Pikselli Saydam Boşluk Ekleyici (varsayılan), İç İçe Tablolar - Boşluk Ekleyicisiz, Tek Tablo – Boşluk Ekleyicisiz seçeneklerinden birini seçebilirsiniz. 1-Pikselli Saydam Boşluk Ekleyici– Boşluk Ekleyicisiz seçeneğini seçerseniz, Fireworks saydam bir GIF resmi ekler. İç İçe Tablolar seçeneğini seçerseniz, Fireworks sayfayı kopyalamak için iç içe tablolar oluşturur. Bu, karmaşık kodlar oluşturur, ancak oldukça doğrudur. Tek Tablo seçeneğini seçerseniz, asgari miktarda kod kullanılır, fakat sayfa bütün tarayıcılarda düzgün olarak görüntülenmeyebilir. Tabloda boş hücreler bulunuyorsa, hücreleri doldurmak için Fireworks’ün kullandığı Yok, Boşluk Ekleyici Görüntü veya Kesmesiz Boşluk yöntemini ayarlayabilirsiniz. Bu yöntemleri İçindekiler açılır menüsünden seçersiniz. Yok seçimini yapmanız önerilmez, çünkü tarayıcılar hücreler boş olduğunda tabloyu düzgün olarak yorumlayamayabilirler. Boşluk Ekleyici Görüntü (varsayılan) seçimini yapmak hücreye boş bir GIF resmi ekler. Fireworks, spacer.gif adında küçük bir resim oluşturur ve bu resmi oluşturduğu bütün tablolarda kullanır. Kesmesiz Boşluk seçimini yapmak hücreye bir boşluk kodu ( ) ekler. Belgeye Özgü sekmesini seçin. İlk sıradaki dilim ayarlarını doc.name, Altçizgi, satır/sütun... olarak ve çerçeve ayarlarını Underscore, Frame# olarak düzenleyin. Belgeye Özgü sekmesinde rollover’lardaki resimler için dosya adlandırma planını özelleştirebilirsiniz. Açılır menülerden seçim yaparken, sonuçta oluşturulacak olan dosya adı görüntülenir. İletişim kutusunda sonuç dosyasının adı home_page_c2_f2.gif olarak görünür.

90

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Bütün belgenin dışa aktarıldığından emin olmak için “Dilim nesneleri olmayan alanları dahil et” seçimini yapın. Bu seçenek seçilmezse, belgenizi önizleme penceresinde izlediğinizde dilimsiz alanlar görüntülenmez ve bunlar dışa aktarılmaz. Bu iletişim kutusuna, tablodaki her resme uygulanan alternatif bir resim açıklaması girebilirsiniz. Rollover dosyaları adlandırmak için çeşitli seçenekler vardır. Ayrıca Kareler açılır menüsünden Rollover’ı seçerek de dosya adının sonuna _f2 yerine _over ekleyebilirdiniz. Aynı ayarları yapmak için bu iletişim kutusunu sık sık kullanıyorsanız, geçerli ayarlarınızı korumak için “Varsayılanları Ayarla” düğmesine tıklayabilirsiniz. HTML Ayarı iletişim kutusunu kapatmak için Tamam düğmesine tıklayın ve ardından dilimlerinizi dışa aktarmak ve HTML sayfasını oluşturmak için Kaydet düğmesine tıklayın. Fireworks, En İyileştir panelindeki iyileştirme ayarlarını kullanarak resimlerinizi dışa aktarır ve bir HTML dosyası oluşturur. Sonuçları kontrol etmek için HTML dosyasını tarayıcınızda açın. Düğmelerin ve bağların çalışması gerekir. Çalışmazsa, dosyaları Lesson08 klasörüne dışa aktardığınızdan emin olun.

Hızla Dışa Aktarma Düğmesini Kullanmak Belge penceresinin sağ üst kısmında bulunan Hızla Dışa Aktarma düğmesi dosyalarınızı Dreamweaver, Macromedia Flash, FreeHand, ve Director gibi diğer Macromedia uygulamalarının yanı sıra Adobe Photoshop, Adobe Illustrator ve Adobe GoLive gibi uygulamaları dışa aktarmak için bir kısayol menüsüdür. 91

Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek

Hızla Dışa Aktarma düğmesini aynı zamanda tarayıcınızı veya diğer Macromedia uygulamasını çalıştırmak için de kullanabilirsiniz.

92

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Bölüm 10 Maskeleme ve Açılır Menüler

93

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Web sayfaları tasarlarken en çok işinize yaracak özelliklerden bir tanesi olan açılır menü oluşturma işlemi için Firewoks’ü kolaylıkla kullanabilirsiniz. Bu açılır menüler hazırlanırken Fireworks javascript kodlarını sizin için oluşturacaktır.

Bu Bölümde Neler Var? • • • • •

Maskeleme Metni Maske Olarak Kullanma Metin Dilimleri Açılır Menüler Toplu Resim İşleme

94

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Bir Resmi Maskelemek Maskeleme, bir nesnenin şeklini ve dolgusunu kullanarak başka bir nesneyi kontrol etme işlemidir. Bir maske, vektör veya bitmap resim olabilir. Daha önceki bölümlerde, İçine Yapıştır komutununun kullanımını görmüştünüz. Başka bir maskeleme biçimi nesnenin sadece dış çevresini değil, dolgusunu kullanır. Ortası delinmiş bir parça siyah çizim kağıdını düşünün. Çizim kağıdını bir resmin üzerine yerleştirin. Resmi kağıdın arkasında hareket ettirirken, sadece resmin bir parçası deliğin altında görüntülenir. Çizim kağıdı bir maske işlevi yapmaktadır. Kesici alanın şekli ve boyutu resmin hangi kısmının görünür olacağını belirler. Deliğin rengi resmin görünürlüğünü denetler. Çizim kağıdı örneğinde, kesilen alan beyazdır ve bu yüzden resmin bütün renkleri görüntülenir. Eğer resmin üzerine bir parça buzlu cam yerleştirirseniz, resim daha az görünecektir. Bunun nedeni buzlu camın bazı renkleri süzmesidir. Eğer maskenin rengi beyazsa, maskenin altındaki bütün resim renklerini görürsünüz. Eğer maske rengi siyahsa, resmin tamamı gizlenir. Gri tonları resmi değişen miktarlarını görüntüler. Resimlerinizi maskelemek için yapmanız gereken öncelikle resmi içe aktarmanızdır. Bunun için Dosya > İçe Aktar seçeneğini kullanarak dosyanızı içe aktarın. Daha sonra bu resmin üzerine ondan daha küçük bir diktörtgen çizin. Bu Çizeceğiniz şekil daire yada başka bir şekil de olabilir.

Resmi, dikdörtgenden biraz daha büyük olacak şekilde ölçekleyin. Resmi çok küçük yaparsanız, tekrar büyütmeyin. Bunun yerine Düzenle > Geri Al seçimini yaparak ölçekleme değişikliklerini geri alın ve tekrar deneyin. Bir bitmap resmini küçültebildiğinizi, ancak eğer büyütürseniz görüntü kalitesinin azalacağını hatırlayın.

95

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Resmi merkezden boyutlandırmak için, sürüklerken Ölçek veya İşaretçi aracıyla Alt (Windows) veya Option (Mac) ile Shift tuşlarına basılı tutun. İşaretçi aracıyla dikdörtgeni ve resmi seçin. Ardından Değiştir > Maske > Maske Olarak Grupla seçimini yaparak maske olarak gruplayın. Resim dikdörtgenin içine yerleştirilir. Maske Olarak Grupla komutu bir vektör nesnenin dış çizgisini kullanarak, maskelenen vektör nesneyi kırpan bir vektör maskesi oluşturur. Maskelenen resmi seçin. Resmin ortasında bir yıldız (taşıma tutamacı) görüntülenir. Taşıma tutamacını sürükleyerek, resmi maske içinde hareket ettirebilirsiniz. (Resmi maske içinde hareket ettiriyorsunuz, nesnenin kendisini değil. Resim nesnesini hareket ettirmek için, nesnenin başka bir kısmını sürükleyin.) Dikdörtgeni bir maske yaptıktan sonra, dış hattı yok olmuştur. Katmanlar panelinde maske simgesine tıklayın. Maske simgesini seçtiğinizde, simgenin etrafında yeşil, bir kenarlık görüntülenir. Özellikler denetçisi, maske için seçenekleri görüntüler.

Özellikler denetçisinde Path outline’ı seçin ve ardından Show fill and stroke seçimini yapın.

Özellikler denetçisinde maskenin dış hat ayarlarını değiştirebilirsiniz.

96

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Katmanlar Panelini Kullanarak Maskelemek Bir maske oluşturmanın başka bir yolu da Katmanlar panelini kullanmaktır. Katmanlar panelini kullanmak, bir resme beyaz bir bitmap maske eklemenin hızlı bir yöntemidir. Daha sonra bitmap araçlarından herhangi birini kullanarak maske üzerinde “boyama” yaparak görünüşünü özelleştirebilirsiniz. Bunu yapmak için resminizi içe aktarın. Resmin olduğu katmanı seçtikten sonra Katmanlar panelinin altındaki Maske Ekle butonuna basın.

Araçlar panelinden Fırça aracını seçin. Araçlar panelinde Varsayılan Kontor/Dolgu Renklerini Ayarla düğmesine tıklayın. Varsayılan dış hat rengi siyah, dolgu rengi ise beyaz olarak ayarlanmıştır. Özellikler denetçisi, Fırça aracının ayarlarını görüntüler. Bu adımı tamamlarken farklı dış hatlar ve fırça boyutlarıyla denemeler yapabilirsiniz. Örneğin, Doğal Olmayan kategorisinden Ağdalı Uzaylı Boyası’nı seçerek ilginç bir efekt elde edebilirsiniz.

97

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Resmin dış kenarı boyunca çizin. Aslında maske üzerinde boyama yaptığınızı hatırlayın. Maske üzerine siyah renkle boyama yaparken, resmin bu kısmını gizlersiniz. (Eğer siyah fırça darbelerini görürseniz, maske üzerine değil, resim üzerine boyama yapıyorsunuz demektir. Fırça darbelerini geri alın ve ardından Katmalar panelindeki maske temsili resmine tıklayın.) Eğer resmi fazla gizlerseniz, dış hat rengini beyazla değiştirebilir ve resmi açığa çıkarmak için gizli alanın üzerinde boyama yapabilirsiniz. Maske üzerinde boyama yaparken, maskelenen resmin görünürlüğünü değiştirirsiniz. Beyazla boyamak maskelenen resmin tamamen görünmesini sağlar. Siyahla boyama yapmak maskelenen alanı görünmez yapar. Maske üzerine gri tonlarıyla boyamak, maskelenen alanı kısmen görünür yapar. Gri tonu ne kadar açık olursa, resmin o kadar fazla kısmını görürsünüz; gölge ne kadar koyu olursa, resmin o kadar az kısmını görürsünüz.

Maske üzerine boyama yaparken X tuşuna basarak fırça darbesi ve dolgu renklerini hızlıca değiştirebilirsiniz. Bu tuş, Araçlar panelindeki Kontur/Dolgu Renklerini Takas Et düğmesinin kısayoludur. İstediğiniz görünümü elde ettiğinizde, Ölçek aracını kullanarak resmi yeniden boyutlandırın.

Metni Bir Maske Olarak Kullanmak Metni bir maske olarak kullanmak, ilginç bir efekt oluşturur. Bu sayfa için buna gerek duymayacaksınız, fakat nasıl çalıştığını görmek için bu teknikle denemeler yapmak isteyebilirsiniz. Bunun için öncelikle bir resmi içe aktarmanız gereklidir. Daha sonra maske olarak kullanacağınız metni yazmalısınız. Metin aracını seçin ve ŞEKER yazın. Yazı tipini Arial Black olarak değiştirin. Rengi beyaz yapın ve boyutu resmi kaplayacak kadar büyük ayarlayın.

98

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Metni seçin ve Düzenle > Kes seçimini yaparak kesin ve resmi seçin. Ardından Düzenle > Maske Olarak Yapıştır seçimini yapıp bir maske olarak yapıştırın. Böylece yazmış olduğunuz yazı bir maske olarak resminizi kaplayacaktır. Unutmayın, yazmış olduğunuz yazının üzerine çift tıklayarak onu her zaman düzenleyebilirsiniz.

Bir Metin Dilimi Oluşturmak Metni, sayfa için içe aktarma yapabilir ve bunu ana sayfadaki metin gibi biçimlendirebilirsiniz. Ancak, bu sayfa daha fazla metin içerir ve bunu bir grafik olmasını istemezsiniz; Fireworks’teki metnin tamamının, sayfayı dışa aktarmak istediğinizde bir grafik resme dönüştüğünü hatırlayın. Bu yüzden, bunun yerine metin olarak dışa aktarılacak bir metin dilimi oluşturmalısınız. Metin olarak dışa aktarmak istediğiniz dilimi seçin ve ardından Özellikler denetçisinde Tür açılır menüsünden HTML seçimini yapın. Düzenle düğmesine tıklayın.

HTML dilimi diğer dilimlerden daha koyu bir gri renge sahiptir. Dilimin rengini, dilim seçiliyken Özellikler denetçisinde Color açılır penceresinden yeni bir renk seçerek değiştirebilirsiniz. Düzenle butonuna basarak bu dilim içindeki metni HTML metin editöründe açabilirsiniz.

99

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Bu pencerede görünen metin, sayfayı dışa aktardığınızda HTML metnine dönüştürülecektir. Bu metin iki paragraftan oluşmaktadır. Bunu olduğu gibi bırakırsanız, sayfayı dışa aktardığınızda bu iki paragraf, bir paragrafta birleştirilecektir. HTML bütün paragrafların veya biçimlendirmek istediğiniz bütün metinlerin etrafında etiketlere (tag) gerek duyar. Örneğin, bir kelimenin tarayıcıda kalın görünmesini isterseniz, kelimeden önce kalın metin için açılış etiketini ve kelimeden sonra ise kapanış etiketini eklemelisiniz. Etiketleri Fireworks’te girebildiğiniz gibi, Dreamweaver uygulamasını da kullanabilirsiniz. HTML ile aşina olmasanız bile, paragraf etiketlerini kolayca ekleyebilirsiniz. Her paragraftan önce yazın ve paragraftan sonra yazın. Ardından Tamam düğmesine tıklayın.

Bir Açılır Menü Eklemek Açılır menüler son zamanlarda Web sayfalarında çok yaygınlaştı. Web sayfasında bulunan bir açılır menü sayfadaki bir düğmenin veya resmin altında gizlenen bir gezinti aracıdır. Menüler başlangıçta gizlendiği için, küçük bir alana birçok bağlantıyı sıkıştırabilirsiniz. Ayrıca alt menüleri de kapsayarak, bunları daha gelişmiş hale getirebilirsiniz. Açılır menüler oluşturmak için JavaScript kodu yazmak sıkıcı olabilir. Fireworks bu işlemi iletişim kutusuna adları yazmak kadar kolay bir işlem haline getirmiştir. Yeni bir açılır menü eklemek için bir dilime ihtiyacınız var. Eğer sayfanızda daha önceden bir buton varsa yada bir buton için bir dilim çizdiyseniz o zaman açılır menünüzü bu dilimler üzerine ekleyebilirsiniz. Açılır menü eklemek için yapmanız gereken dilim üzerinde sağ fare butonuna tıklamak ve açılan menüden Açılır Menü Ekle seçimini yapmaktır. Açılır Menü Düzenleyicisi’ne menü içeriğini (metin, bağ ve hedef) girersiniz.

100

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Açılır menü editöründe İçerik sekmesinde açılan menüdeki görünecek menü elemanlarını yazarsınız. Bu alana bu liste elemanlarını yazarken onlara tıklandığında gidilecek bağı Bağ alanına, ve yeni pencerede açılacaklarsa da Hedef alanına gerekli bilgiyi yazabilirsiniz. Hedef ayarı sayfada çerçeveler bulunursa veya bağlantılı sayfayı yeni bir tarayıcı penceresinde açmak isterseniz kullanılır. Enter veya Return tuşuna tekrar basarak yeni bir satır ekleyebilirsiniz. Yazı ve bağlantılarda değişiklik yapmanız gerekirse, ekleme çubuğunu görüntülemek için metne çift tıklayın ve ardından değişikliklerinizi yapın. Açılır Menü Düzenleyicisi, aynen Excel benzeri bir elektronik hesaplama tablosu programı gibi çalışır. Sonraki sütuna geçmek için Tab tuşuna basarsınız. Son sütuna geldiğinizde, Tab tuşuna tekrar basarak yeni bir satır ekleyin.

101

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Eğer eklemiş olduğunuz bir liste nesnesi bir diğerinin alt menüsü olacaksa o zaman yukarıdan aşağı o sırayla eklemelisiniz. Örneğin Tatlılar, Sütlü Tatlılar, Hamur İşleri, Tuzlular, Kuru Pastalar, Poğaçalar gibi seçenekleriniz olduğunu varsayalım. O zaman buradaki sıralamaları aşağıdaki gibi olmalıdır. Tatlılar Sütlü Tatlılar Hamur İşleri Tuzlular Kuru Pastalar Poğaçalar Bu menü örneğinde Tatlılar seçeneğinin üzerine gelindiğinde Sütlü Tatlılar ve Hamur İşleri alt menüsü açılması isteniyor. Bu durumda Sütlü Tatlılar menü elemanını seçtikten sonra Açılır menü editöründe en sağda bulunan Girinti seçeneğine bir kere tıklamalısınız. Aynı işlemi Hamur İşleri menü elemanı içinde tekrarlamalısınız. İçerik alanı ile işiniz bittiğinde Görünüm sekmesine tıklayabilirsiniz. Bu sekmede açılır menünüzün genel olarak nasıl görüneceğini belirlersiniz. Bu görünüm ayarlarına menü nesnelerinin karakter boyutları, font türleri vb. ayarlar dahildir. Yukarıda Durumu seçeneği ile menü nesnelerinin normal görünümlerini, Üzerinde Durumu seçeneği ile de üzerine fare imleci geldiğindeki görünümlerini ayarlayabilirsiniz.

102

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Gelişmiş sekmesi ise açılır menünüzün içindeki görünüm ve boşluk ayarlarını yapabileceğiniz seçenekler içermektedir.

İleri düğmesine tıklayın. Bu alanda, menü ve alt menü konumlarını seçebilirsiniz.

103

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Bir Açılır Menüyü Düzenlemek Açılır menünüzü tamamladıktan sonra, bunu işlem yaparken görmek isteyebilirsiniz. Açılır menü Fireworks önizleme penceresinde görünmez. Açılır menüyü görmek için tarayıcıda önizlemeniz gerekir. Dosyayı önizlemeden önce, Fireworks’ün dosyanızı nasıl dışa aktaracağını belirlemek için bazı ayarlamalar yapmanız gerekmektedir. Dosyayı önizlerken bile, Fireworks geçici resimleri ve gerekli HTML’i oluşturur. File > HTML Ayarları seçimini yapın. Bu iletişim kutusundaki ayarları daha önce görmüştünüz. Bu dosya için, Belgeye Özgü sekmesindeki ayarları denetlemeniz gerekmektedir. Belgeye Özgü sekmesine tıklayın. “Dilim nesneleri olmayan alanları dahil et “ seçeneğini işaretleyin. Bu, üzerine dilimler çizilmemiş olsa bile bütün nesnelerin ihraç edilmesini sağlar.

Eğer HTML için dosya biçimini göremezseniz, resmi önizlediğinizde aynı resmin tekrarlanan desenlerini görebilirsiniz. Dilimler için bir adlandırma biçiminin seçilmesi, her dilimin ayrı bir adı sahip olmasını sağlar. File > Tarayıcıda Önizleme seçimini yaparak tarayıcıda önizleyin. Açılır menülerinizi ve alt menüleri tarayıcıda denetleyin. İmleci düğme üzerine getirdiğinizde, açılır menü görüntülenir. Dosyayı dışa aktarana kadar, bağlar çalışmayacaktır. Eğer açılır menünüzde öğelerde değişiklik yapmak veya listeye yeni öğeler eklemek isterseniz, düğme üzerindeki dilimi seçin ve ardından açılır menüdeki mavi dikdörtgenlerin içine çift tıklayın. Dilimleri görmezseniz, Araçlar 104

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

panelindeki “Dilimleri ve Sıcak Noktaları Göster” düğmesine tıklayın. Değişikliklerinizi yapabileceğiniz Açılır Menü Düzenleyici iletişim kutusu açılır.

Toplu İşlemler Büyük projelerde, aynı şekilde dışa aktarmanız gereken çok sayıda resim olabilir. Çok sayıda dosya üzerinde aynı seçenekleri gerçekleştirmek için toplu işlemeyi kullanabilirsiniz. Örneğin, katalog içindeki her bir öğenin resimlerini görüntülemek istediğinizi farzedin. Tüm resimleri taradınız ve boyutlandırıp renklerini düzelttiniz. Şimdi dosyaları optimize ederek JPEG biçiminde dışa aktarmak istiyorsunuz. Ayrıca, dizin sayfası için resimlerin küçük görünümlerini oluşturmak istiyorsunuz. Bu Fireworks’de kolayca yapılabilir. Dosya > Toplu İşleme seçimini yapın. Toplu İşleme iletişim kutusu açılır. Seçeneklerden toplu olarak işleyeceğiniz resimlerinizin bulunduğu klasörü seçin.

Bu klasördeki tüm dosyaları işlemek için Tümünü Ekle düğmesine tıklayın. İleri düğmesine tıklayın. İkinci bir Toplu İşleme iletişim kutusu görüntülenir. Bu ikinci pencerede temel birçok işleme özelliğini bulabilirsiniz. Bu özellikler ile resimlerinizi toplu olarak kolaylıkla işleyebilirsiniz.

105

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

Resimlerinizi ölçekleme seçenekleri şunlardır: • • Değişmeyen dosyaları dışa aktarmak için Ölçek Yok seçimini yapın. • Resimleri kesin bir genişlik ve yükseklik vererek ölçeklemek için Boyuta Ölçekle’yi seçin ve bir genişlik ve yükseklik değeri girin. • Resimleri belirtilen bir genişlik ve yükseklik içine sığacak şekilde orantılı olarak ölçeklemek için Sığacak Biçimde Ölçekleme Alanı seçimini yapın ve Maks. Genişlik ve Maks. Yükseklik piksel değerlerini girin. • Resimleri orantılı olarak ölçeklemek için Yüzdeye Ölçekle seçimini yapın.

Komut seçeneklerini açmak için artı işaretine tıklayın. Toplu İşleme sütununda, Dışa Aktar’ı seçin; ardından Ekle’ye tıklayın. Ayarlar açılır menüsünden JPEGDaha İyi Kalite seçimini yapın. Dışa Aktar alanında, önceden tanımlanmış dışa aktarma seçeneklerini ya da kendi ayarlarınızı kullanabilirsiniz. Dışa aktarma ayarlarını özelleştirmek isterseniz Düzenle’ye tıklayarak Görüntü Önizleme penceresini açın. Listeye başka toplu işleme seçenekleri eklemeye devam edebilirsiniz. Seçenekleri listelenen sırada çalıştıracak olan bir toplu işleme fonksiyonu oluşturmaktasınız. Sıralama çok önemlidir. Örneğin, resimleri dışa aktarmadan önce ölçeklemek isteyeceksiniz. Yeni seçenekler ekleyerek sıralamayı

106

Fireworks CS3 – Bölüm 10: Maskeleme ve Açılır Menüler

değiştirmek isterseniz, taşımak istediğiniz seçeneği seçin ve ardından yukarı ve aşağı ok düğmeleri ile listedeki pozisyonunu değiştirin. İleri düğmesine tıklayın. Dosyalar Kaydediliyor alanında, Özel Konum seçimini yapın, Aç’a tıklayın, Toplu İşleme klasörü altındaki images klasörünü açın ve Seç’e tıklayın. Yedeklemeler’i seçmeyin. Bu adımda, dışa aktarılan dosyaların kaydedileceği klasörü seçiyorsunuz. Dosyaların yedeklerinizi oluşturmanıza gerek duymuyorsunuz. Yedek oluşturmak istemezseniz, “Varolan Yedeklemenin Üzerine Yaz” seçimini yaparak dosyaların sadece bir kopyasını kaydedebilir veya “Artımlı Yedeklemeler” seçimini yaparak proses her çalıştırıldığında dosya adının sonuna bir numara ekleyerek kopyalarını saklayabilirsiniz.

Tüm dosyaları işlemek için Toplu İşleme düğmesine tıklayın. Komut tamamlandığında Tamam’a tıklayın. Toplu işleme fonksiyonu çalıştırıldığında dosyaların kısa bir süre açıldığını göreceksiniz. Toplu işlem tamamlandığında, işlemin normal olarak tamamlandığını belirten bir mesaj görüntülenir.

107