2. 2
İç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
3. Fireworks CS3 – Bölüm 1: Genel Bilgiler
Bölüm 1
Genel Bilgiler
3
4. Fireworks CS3 – Bölüm 1: Genel Bilgiler
4
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
5. Fireworks CS3 – Bölüm 2: Bitmap Düzenleme
Bölüm 2
Bitmap Düzenleme
5
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
25. Fireworks CS3 – Bölüm 3: Vektörel Araçlar
Bölüm 3
Vektörel Araçlar
25
26. 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
27. 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
28. 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
29. Fireworks CS3 – Bölüm 3: Vektörel Araçlar
Elips Aracı
Elips aracına tıkladığınızda aşağıdaki özellikler panelinin içeriğini
göreceksiniz.
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
30. 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
31. 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
32. 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
33. 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
35. Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak
Bölüm 4
Katmanlar ve Sayfalarla
Çalışmak
35
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak
42
43. Fireworks CS3 – Bölüm 5: Metin Eklemek
Bölüm 5
Metin Eklemek
43
44. 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
45. 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
46. 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
47. 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
48. 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
49. 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
50. 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
51. Fireworks CS3 – Bölüm 6: Gelişmiş Teknikler
Bölüm 6
Gelişmiş Teknikler
51
52. 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
53. 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
54. 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
56. 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
57. 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
58. 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
59. Fireworks CS3 – Bölüm 7: Düğmeler Oluşturmak
Bölüm 7
Düğmeler Oluşturmak
59
60. 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
61. 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
62. 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
63. 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.
üğme adını Kitaplık listesinden sayfaya sürükleyin. Düğmenin bir örneği
ürüklediğiniz tüm düğmelerin içindeki yazılar birbirinin aynısı olacaktır.
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
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
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.
üğmeleri Değiştirmek
k düğmelerin kopyalarıdır. Eğer Adobe Flash’ı
üğme Düzenleyicisi açılır. Aynı zamanda Kitaplığın Önizleme bölmesindeki
D
Oluşturduğunuz düğmeler, il
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
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
64. 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
65. Fireworks CS3 – Bölüm 8: Dilimler ve Aktif Bölgeler
Bölüm 8
Dilimler ve Aktif Bölgeler
65
66. 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
67. 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
68. 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
69. 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
70. 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
71. Fireworks CS3 – Bölüm 9: Optimizasyon ve İhraç Etmek
Bölüm 9
Optimizasyon ve İhraç
Etmek
71
72. 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
73. 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
74. 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
75. 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
76. 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
77. 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