Döküman - meb uzaktan…

Transkript

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
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 şekle
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 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
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.
9
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.
10
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.
11
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.
12
Ö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.
13
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.
14
Ö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.
15
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
16
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.
17
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.
18
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.
19
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.
20
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.
21
Ö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.
22
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.
23
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.
24
Fireworks CS3 – Bölüm 3: Vektörel Araçlar
Bölüm 3
Vektörel Araçlar
25
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
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
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
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
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
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
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
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
34
Fireworks CS3 – Bölüm 4: Katmanlar ve Sayfalarla Çalışmak
Bölüm 4
Katmanlar ve Sayfalarla
Çalışmak
35
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
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
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
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
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
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 5: Metin Eklemek
Bölüm 5
Metin Eklemek
43
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
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
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
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
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
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
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
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.
• Basit şekillerden karmaşık resimler oluşturmak
• Degrade Oluşturmak
• Bir Yola Metin Eklemek
52
Ş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
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
55
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
Kesişim
İ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
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
ç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
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.
•
•
•
•
Düğme Editörü kullanmak
Yeni Düğme Oluşturmak
Düğme Metinleri
Düğmelere Link Eklemek
60
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
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,
62
Varlıklar panel grubunun içinde kenetlenmiştir. Aynı 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
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
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
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
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
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
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
Ç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.
•
•
•
•
•
Fireworks’te kullanılabilen çeşitli renk paletleri
Dışa Aktarma Sihirbazı
Dosya Boyutları
Optimize Paneli
İhraç Ayarları
72
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
(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
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
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
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
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
• 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
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
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
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
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
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
Orjinal 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
Ayarlar açılır menüsünden ayar adını seçin. Ayarlar 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.
85
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.
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 İ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.
86
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
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.
87
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.
“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 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
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ı Alt çizgi, Kare# 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
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.
91
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.
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
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.
•
•
•
•
•
Maskeleme
Metni Maske Olarak Kullanma
Metin Dilimleri
Açılır Menüler
Toplu Resim İşleme
94
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
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 Yol Anahattı’ı seçin ve ardından Dolgu ve konturu
göster seçimini yapın.
Özellikler denetçisinde maskenin dış hat ayarlarını değiştirebilirsiniz.
96
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
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
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
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 <b>
açılış etiketini ve kelimeden sonra ise </b> 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 <p> yazın ve paragraftan sonra </p>
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
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
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
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
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.
Dosya > 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.
Dosya > 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
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
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
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
Son Söz
Bu yardımcı el kitabı size Adobe Fireworks CS3’e hızlı başlangıç yapmanız
amacıyla hazırlanmıştır. Kitap içinde, Fireworks ile çalışmaya başladığınızda
karşınıza çıkacak problemleri önceden fark etmenizi sağlayacak noktalar
ayrıca vurgulanmıştır.
İyi bir tasarımcı ve arayüz geliştirimcisi olmak için önemli olan noktalardan biri
de mümkün olduğunca farklı örnekleri incelemektir. Daha farklı örnekleri
incelemek ve dünya üzerindeki Fireworks tasarımcılarının örnek makalelerine
ulaşmak için http://www.adobe.com/devnet/ adresini ziyaret edebilirsiniz.
Türkçe kaynaklar ve daha detaylı bilgi için www.medyasoft.com.tr,
www.adobe.com.tr veya www.adobeturk.com adreslerini ziyaret edebilirsiniz.
108

Döküman - meb uzaktan…

Transkript

Benzer belgeler

Başlıca Programlar

Teknik Sorunlar SSS

MS Publisher Kullanım Hatırlatmaları - İrem Sak

Uluslararası Baş vuru Sahipleri için Çevrimiçi Baş vuru Sistemi

Dreamweaver 8

Untitled

Metin Biçimlendirme Etiketleri "Programlama Dilleri" Etiketleri