15- Tools panelinden Colours araçlarındaki kalem simgesinin hemen yanında bulunan renk paletine giderek,Stroke Options'u seçelim.

16-Ardından karşımıza çıkan pencerede aşağıdaki şekilde görüldüğü gibi ayarlarımızı yapalım.

17- Filters/Adjust Color/Hue Saturation seçtikten sonra resimde görüldüğü gibi textimizin renk ayarlarını yapalım.

18-Bu dersin 2. adımında anlatıldığı gibi ilk Rounded Rectangle çizimi ile aynı ölçülerde bir tane daha çizelim.Ve rengimizi daha kolay çalışmak için mavi tonajlarında seçelim.

19- Bu adımda ise yeni çizdiğimiz Rounded Rectangle şeklimizi resimde görüldüğü gibi yerleştirelim.

20- Renk paletini açtığımızda alta görülen Fill Optionsu tıklayalım.Daha sonra Gradient'ı seçelim.Bu aşamada şeklimizin seçili olmasına dikkat edelim.

21-Verilen şekillerdeki gibi gradient ayarlarımızı girelim.
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115013

22-

23-Yirmikinci adımda yatay olarak gözüken çizgimizi verilen şekildeki gibi ayarlayalım.

24-Aşağıdaki şekilde layer panelinden METAL yazan kısmı seçelim. Ardından mouse ile Layer2 kısmına sürükleyelim.

25- Bu görüntüyü elde etmiş olacağız.

26-LAYER PANELİNE giderek resimdeki gibi mouse ile mouse ile seçelim.Seçili alan resimdeki gibi mavi renke olmalı.

27-Properties panelinden Blend Mode ayarımızı Screen olarak belirleyelim.

28-Ben çalışmamı bu şekilde sonuçlandırdım.

Metal efekti olarak isimlemdirilsede Metalı anımsatan bir benzerlik olup olmadığını bilmiyorum.Fakat dersin faydalı olabileceğini düşündüğümden bu dersi

Group Mask Text

1-Custom rengi #CCCCCC olan ve aşağıdaki resimde görüldüğü gibi boyutları 420/200 bir çalışma sayfası açalım.

Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115014

2-İstediğimiz bir resmi import edelim.

3- Tools Panelinden Vector araçlarına giderek Text Tool(T)'u seçelim.

4- Textimizin rengini beyaz olarak ayarlayalım.

5-Resmimizi ve Textimizi seçili hale getirelim.

6-Modify menüsünden Mask/Group as Mask'ı seçelim.

7-Çalışmamız bu şekli ile sonuçlanacaktır.

Fireworksta Link Vermek

1-Bu dersi anlatırken resimdeki butonu kullanacağım.Sizlerde istediğiniz bir texti veya resmi kullanabilirsiniz.

2-Tools panelinden Web araçlarına giderek hotspot aracı üzerinde mousei le basılı tutalım.

3- Daha sonra Rectangle Hostpot tool(j) aracını seçelim.

4-Daha sonra Rectangle Hostpot tool şeklimizi butonumuzun üzerine resimde görüldüğü gibi çizelim.

5-Dördüncü adımdaki hale getirdikten sonra çalışmamızı,properties panelimizde link isteyen bir kısım belirecektir.Bu kısmı aşağıdaki resimde verildiği gibi girelim.Unutmayalım ki linkimizin başında mutlaka http protokolü yazılı olmalıdır.

6-File menüsüne giderek export seçeneğini tıklayalım.

7-Açılan pencerede linkimizin adını verelim.Export seçenklerinden de HTML and Images'ı seçelim.

8-Çalışmamızı export ettikten sonra,yani kaydettikten sonra,kaydetmiş olduğumuz kısımda aşağıdaki resimde görüldüğü gibi,bir resim dosyası ve bir adette html dosyası olmalıdır.

9-Html dosyasına tıkladıktan sonra link verdiğimiz şekil görünecektir.Artık şeklimizin üstüne tıklayarak verdiğimiz link sayfasına ulaşabiliriz.
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115015

Resimler üzerinde Group Mask

1- File/New menüsünden 400/400 e bir çalışma alanı açalım.Custom rengimizi #CCCC99 renginde ayarlayalım.
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115016

2-İstediğimiz bir resmi import edelim.

3-Tools panelinden Vector araçlarına giderek Elipse tool(U)'u seçelim.

4-Resmimizin üzerine aşağıdaki resimde görüldüğü gibi Elipse Tool(U) şeklimizi çizelim.Yanlız bu şekli çizerken daha iyi bir sonuç almak için ,Shift tuşuna basılı tutalım.

5-Resmimiz ve Elips şeklimiz aynı anda seçili konumda iken Modify menüsünden Mask/Group as Mask'ı seçelim.

6-Çalışmamız yukardaki adımlar uygulandıktan sonra bu konumda olacaktır.

7-Filters/Shadow and Glow/Inner Glow u seçelim.Inner Glow değerlerini resimde verildiği gibi yapalım.Renk değerimiz burda #0000CC rengidir.

8-Properties paneline giderek,Filters Shadow and Glow/Drop Shadow seçeneğini uygulayalım.Drop Shadow değerlerini resimde verildiği gibi yapalım.

9-Yine Filters sekmesine tıklayarak, Shadow and Glow/Glow seçeneğine tıklayalım.Glow ayarlarımızı hemen yanda verilen resimdeki gibi yapalım.Glow renk değerimizi de #CCCCCC olarak ayarlayalım.

10- Çalışmamız bu şekli ile sonlanmış olacaktır.

Fireworksta LOGO Tasarımı

1- İlk önce 400/400 boyutlarında transparan bir çalışma alanı açalım.

2-Tools panelinden Vector araçlarına giderek Elipse tool(U)'u seçelim.

3-Aşağıdaki şekildeki gibi 367/144 boyutlarında iki adet Elips çizelim.

4-Beyaz olan Elips şeklimizi aşağıdaki resimde olduğu gibi siyah renkteki Elips şeklin üstüne bırakalım.

5-İki Elips şeklimiz seçili halde iken ,Modify menüsüne giderek,Combine Paths/Punch'ı seçelim.

6-Bir önceki adımdan sonra çalışmamız bu şeklini alacaktır.Bu adımdan sonra ekranda görüğümüz be şekli CTRL+C ile çoğaltıyoruz.

7-Ardından Modiify menüsüne giderek,Transform/Rotate 180 seçeneğine tıklayalım.

8-Şeklimizi çoğladıktan sonraki çalışmamızın şekli ekranda görüldüğü gibidir.

9-"WT" adında bir text oluşturalım.Textimizin renk değerini #333333 olarak girelim.Ardından properties panelinde resimde görüldüğü gibi "B" ve "I" sekmelerine tıklayarak,yazımızı kalın(bold) ve italik yapalım.

10-Textimiz seçili konumda iken ,Tools paneline giderekSelect araçlarından Scale tool(Q)'u seçelim.Bu işlem ile, ekranda da gözüktüğü gibi, kare noktalardan mouse ile textimiz üzerinde büyültme yapabiliriz.

11-Yine Tools paneline giderek,Vector araçlarından Rectangle Tool(U)'u seçelim.Ardından aşağıdaki resimde görüldüğü gibi beyaz renkte kare şekillerimizi çizelim.

12-Textimizi, mouse ile bu adımda çizmiş olduğumuz şeklimizin üzerinden aynı sayfa içinde , farklı bir yere taşıyalım.

13-Bu adımda aşağıda verilen resimde görüldüğü gibi mouse ile (texti kısmı hariç )seçili hale getirelim.Ve ardından beşinci adımda anlatıldığı gibi
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115017
Punch efektini uygulayalım.Bu efekti beyaz alanlarımızın bulunduğu kısım yok olana kadar devam ettirelim.

14-Punchlama işlemimiz bittikten sonra çalışmamız aşağıdaki gibi gözükecektir.

15-Textimizi tekrar bu boşluklara uyacak şekilde yerleştirelim.

16-Textimizin bulunduğu kısıma mouse ile çift tıklayarak, "T" harfinin seçili olmasını sağlayalım.Daha sonra da #CC0000rengini ayarlayalım , "T" harfi için.Aynı rengi üst kısımdaki punchlanmış Elips şeklimiz içinde ayarlayalım.

17-LOGOmuzun alt kısmına yerleştirmek için,buna benzer bir text oluşturacağız.

Yeşil kısım için #669900 renk değerini ayarlayalım ve font büyüklüğünü 40 olarak belirleyelim.

Hemen ardından textimiz seçili halde iken,Properties panelindeki Filters seçenklerinden,Bevel and Emboss/Inner Bevel'ı seçelim.Inner Bevel ayarlarımızı aşağıdaki şekildeki gibi yapalım.

18-Ben çalışmamı bu şekilde sonuçlandırdım.

Fireworksta Banner Tasarımı

1- Tools Panelinden Vector araçlarına giderek,Elipse Tool(U) aracını seçelim.Aşağıda görüldüğü gibi 900/170 bir Elips Şekli çizelim.Ve bu elips şeklimiizn renk ayarını #CC9966 değerinde girelim.



Aynı zamanda yukarıdaki şekilde görüldüğü gibi çalışmamızda hizalama yapmak için.View menüsünden Grid alt menülerinden Show grid 'i seçelim.



2- Elips şeklimiz seçili iken Renk Paletinde bukunan Fill Options sekmesini seçelim.Sonrada Gradient ve Linear seçimlerini yapalım.



3- Tools Panelinden Colors araçlarına giderek,Gradient Toolsu seçelim.Elips şeklimizin üstünde verilen şekilde görüldüğü gibi yatay bir gradient renk çubuğu oluşacaktır.





4-Bu yatay gradient renk çubuğunu aşağıda verien şekilde görüldüğü gibi mouse ile dik olarak ayarlıyalım.



5- Filtes menüsünden Adjust Color seçtikten sonra.Hue and Saturation'u seçelim.
Aşağıdaki şekilde gibi renk ayarlarımızı girelim.



6-Yine Filters menüsüne gidelim ve Adjust Color alt menülerinden Curves'ı seçelim.Bu renk ayarımızda yine resimlerde verildiği gibi girelim.





7- Elips şeklimiz bu aşamada aşağıda görüldüğü gibi olacaktır.



8-Tools panelinden vector araçlarına giderek Rectangle Tools(U)'U seçelim.Daha sonrada şekilde görüldüğü gibi hizalama yapalım.



9-Her iki şeklimiz seçili konumda iekn Modify menüsünden Combine Paths alt menülerinden Punchı seçelim.Çalışmamız bu işlemden sonra verilen şekildeki gibi bir biçim alacaktır.



10-Daire içine alınmış beyaz noktalı yerlerden mouse ile aşağıya doğru sürükleme yapalım.

11-Mouse ile şeklimiz belirten yerden itibaren uzattıktan sonra şeklimiz bu biçimde yer alacaktır.



12-Tools panelinden Vector araçlarına giderek,Rectangle Tools aracını seçelim.Aşağıda verilen şekilde görüldüğü gibi (mavi alan) şeklimizi çizelim.
Bu şeklin renk değerinide #0033FF olarak ayarlıyalım.



13-Mavi şeklimiz seçili iken renk paletine giderek,Fills Options sekmesini tıklayalım.Ardından Gradient'ı ve hemen altındaki menüden linear'ı seçelim.Daha sonrada Tools panelindeki Colors araçlarından Gradient Tools'u seçelim.Şeklimizin üzerinde oluşacak olan yatay şekildeki Gradient renk çubuğunu aşağıdaki şekildeki gibi dik olarak ayarlıyalım.






14-Tools panelinden Vector araçlarına giderek,Recrangle Tools(U) seçimini yapalım.Sonra da verilen şekilde olduğu gibi ve rahat çalışabilmemiz için siyah bir Rectangle şekli çizelim.




15- Siyah renkteki Rectangle şeklimiz seçili iken Properties Panelinden Filters sekmesine tıklayalım.Burdan da Bevel and Emboss alt menülerinden Raised Emboss'u seçelim.Verilen şekildeki gibide Raised Emboss efekti ayarlarımızı yapalım.


Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115019

Bu adımı uyguladıktan sonra aşağıda verilen şekilde olduğu gibi siyah şeklimiz artık saydam bir hal alacaktır.



16-Tools panelinden Vector araçlarına gidelim.Bu kısımdan Rectangle Tools(U) aracını seçerek,100/33 siyah bir Rectangle şekli çizelim.



Properties Paneline giderek aşağıdaki şekildeki gibi ayarlarımız yapalım.Bu kısımda renk değerimizi #CCCCCC olarak girelim.



Siyah şeklimiz seçili iken renk paletine giderek,Fiil options sekmesini seçelim.Burdan da solid seçeneğini Gradient olarak değiştirelim.Hemen altındaki linear seçeneğini olduğu gibi bırakalım.Tüm bunlardan sonra verilen şekildeki gibi renk değerlerimizi girelim.





Properites panelinden Filters sekmesine giderek Adjust Color alt menülerinden Curves' ı seçelim.Ardından da verilen şekildeki gibi renk tonunu ayarlıyalım.



Buton çalışmamız bu aşamada aşağıdaki gibi bir şekilde gözükecektir.



Fontumuz büyüklüğünün 15 değerinde ayarlıyalım.Fontumuz için #CCCCCC renk değerini kullanalım.



Yine fontumuz seçili konumda iken Filters/Adjust Color/Curves seçimini yapalım.
Aşağıda görüldüğü gibi de Curves renk ayarını yapalım.



17- Diğer butonlarıda oluşturduktan sonra aşağıda verielen şekildeki gibi butonlarımızı hizalı bir şekilde yerleştirelim.Ayrıca link vermek isterseniz bu sitede bulunan Fireworksta Link Vermak
adlı dersi inceleyebilirsiniz.

18-Şekilde görüldüğü gibi textimizin renk ayarını , font büyüklüğünü ve font türünü ayarlıyalım.Renk değerimizi #CCCCCC olarak seçelim.





Fontumuz seçili iken Filters/Adjust Color/Hue and Saturation seçimini yaparak verilen şekildeki gibi renk ayarlarımızı yapalım.



Yine Fontumuz seçili konumda iken Filters/Shadow and Glow seçimini yaparak verilen şekildeki gibi Drop Shadow efekti ayarlarımızı yapalım.



Tools panelinden Colors araçlarına giderek fontumuzun kenar çizgisinin siyah renkte olmasını sağlıyalım.
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115020



19-Fontumuz bir üst adımdakileri yapmamızla birlikte aşağıda görüldüğü gibi bir şekil alacaktır.



20-Aşağıda görüldüğü bir slogan oluşturalım.Ve bu slogan textimizin renk değerini #006666 olarak ayarlıyalım.



Yine bu textimiz için aşağıda verilen şekildeki gibi properties panelindeki ayarları yapalım.



Filters/Shadow and Glow/ Drop Shadow seçimini yapalım.Daha sonrada Drop Shadow efekti ayarlarımızı şekildeki gibi girelim.



Filters/Shadow and Glow/Inner Glow seçimini yapalım.Inner Glow efekti ayarlarını şekildeki gibi ayarlıyalım.



21-Bir üstteki adımı tamamladığımızda slogan textimiz verieln şekildeki bir görünüm alacaktır.



Ben çalışmamı bu şekilde bitirdim.



Not:Bu dersin anlatımı boyunca bazı şekillerde boyutland

Fireworksta resimleri slice etmek

1- Önelikle File/Import seçimini kullanarak bir resim çağıralım.Bu resmin banner vb gibi web sayfalarında kullanılacak olan resimler olmasına dikkat edelim.Ben bu çalışmayı anlatırken bir banner resmi kullanacağım.



2- Tools Panelindeki Web araçlarına giderek,Slice tool(K) aracını seçelim.



3-Verilen şekilde görüldüğü gibi ,Slice took(K) aracını seçtikten sonra,banner resmimizin üzerine kare bir şekil çizelim.
Kaynak: ReformTürk http://www.reformturk.com/resimli-program-anlatimlari/56444-macromedia-fireworks-giris-%5Bresimli-anlatim%5D-4.html#post115021



4-Bu şeklin yanına aynı yöntem ile kare biçiminde bir Slice tool(K) şekli daha çizelim.



5-Kalan kısma yine kare biçiminde bir Scale tool şekli çizelim.



6-Şimdide Scale tool (K) şekilerine sağ tıklayarak Slice ettiğimiz kısımları Export edelim.



Diğer Slice edilen kısımlar içinde aynı Export etme işini tek tek uygulayalım.

7- Slice edilmiş üç resmimizde ekranda görüldüğü gibi üç ayrı resim dosyası olrak kaydedilmiş bulunmaktadır.



8-Resimlerimizi bazen bu şekilde bölüp HTML kodlarımıza entegre edersek,web sayfalarımız browser tarafından daha hızlı okunacaktır.



NOT: KONULARIN HEPSİ ALINTIDIR.HAZIRLAYAN ARKADAŞLARA TEŞEKKÜR EDİYORUM