Fireworksta Küp Çizimi

1- Öncelikle File menüsünden New'u seçelim.Custom renginide #CCCC99 olarak girelim.Sayfa boyutlarımızı da 400 / 400 olarak girelim.




2- View menüsünden Grid / Edit Grid alt menüsüne giderek ekranda görüldüğü gibi ayarlarımızı yapalım.



3- Yine View menüsüne giderek, Grid / Show grid alt menüsünü seçelim.




4- Tools panelinden Vector araçlarına giderek,Rounded Rectangle'ı seçelim.




5- Bu seçimi yaptıktan sonra,144 / 144 iki adet Rectangle şekillerimizi çizelim.Ardından da ekrandaki gibi hizalayalım.



6- Properties paneline giderek,her iki Rectangle şekli seçli iken,Transparan ayarını ekranda olduğu gibi "76" değerine düşürelim.
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114983



7- Tools panelinden Vector araçlarına giderek,Line tool seçeneğini tıklayalım.



8- Bu seçimi yaptıktan sonra Properties panelinden ekranda görülen ayarları yapalım.




9- Line tool'u seçtikten sonra bu iki Rectangle şekilleri arasında ekranda görüldüğü gibi çizgilerimizi oluşturalım.Fakat bu çizim esmasında shif tuşu mutlaka basılı olmalıdır.Aksi takdirde çizgilerimiz istediğimiz noktaya gidilme esnasında bize istediğimiz sonucu vermez.Line tool seçildikten sonra,mavi Rectangle'ın üst kısmındaki noktaya mouse ile sol tıklanır ve diğer şekle doğru(ekrandaki gibi)çizilme işlemi gerçekleştirilir.Çizmeye başlamadan önce mouse ile sol tıklanır ve yine bitiş noktasına gelince mouse ile sol tıklanır.Böylece ekrandaki gibi çizgilerimiz tek tek oluşur.



10- Artık isterseniz Rectangle şekillerimizi bir kenara atabiliriz.Ben bu tercihi yaptım.

Fireworks Çalışmalarını HTML Olarak Kaydetmek

1- Bu çalışmayı anlatırken ekranda görünen kendi oluşturduğum tasarımı kullanacağım.
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114984



2- Çalışma sayfamızın hemen üst kısmında (ok simgesişeklinde)yer alan ,alana gidip,Quick Export' u seçelim.



3- Bu sekmeye tıkladıktan sonra Dreamweaver menüsüne tıklayın ve buradan da açılan menülerden Copy HTML to Clipboard menüsünü seçelim.



4- Karşımıza çıkan Export penceresinden ekranda görüldüğü gibi ayarlarımızı yapalım.


Shot at 2007-08-20

5-



6- Ve klasörümüzde görüldüğü gibi bir adet jpg dosyamız ve bir adette html dosyamız belirmiş, bulunmaktadır.Html dosyamıza tıklayarak sayfamızı açabiliriz.

Fireworks Gif Animasyon - 1

1- Öncelikle ekranda görüldüğü gibi ayarlarımızı girerek bir çalışma sayfası oluşturalım.



2- Oluşturduğumuz çalışma sayfası içine bir resim Import edelim.



3-Resmimiz seçili iken Modify menüsünden Animation menüsüne giderek,Animation Selection alt menüsünü seçelim.



4- Bu seçimi yaptıktan sonra ekrandaki gibi değerlerimizi girelim.



5- Şimdide çağırdığımız resmi seçelim.Resmimiz silinse dahi Animation Selection seçimimiz ile ortaya çıkan frame' ler ekranımızın sağ kısmında hala belitgin halde bulunacaktır.



6- Her frame seçeneğine tıklayarak beş ayrı resim import edelim.Her frame içinde resimlerimizin ve çalışma sayfamızın ölçülerinin aynı olmasına dikkat edelim.Seçilen bir frame mavi bir renk alır.

7- Beş ayrı frame içinde resimlerimizi import ettikten sonra.Her frame' in sağında bir rakam göreceğiz.Bu rakam ilk uygulamada genellikle sabit olarak yedi değerindedir.Yedi rakamını gördüğümüz yere çift tıklayalım ve elli değerini girelim.
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114985



8- Resmimizi kaydetmeden önce Optimize kısmından Animated GIF formatını seçili hale getirelim.



9- Çalışmamız bu şekli ile sonuçlandırılmış olmalıdır.

Fireworks Rollover Button

1- Öncelike ekranda görüldüğü Edit menüsünden Insert seçeneğine tıklayalım ve New Button alt menüsüne gidelim.

Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114986


2- Fireworks ekranımızda aşağıda görüldüğü gibi bir pencere açılacaktır.



3- Bu pencerede Up sekmesi seçili iken #006699 renk değerini girerek ekrandaki gibi bir Rectangle şekli çizelim.Bu şeklin üzerinede beyaz renkte bir "button" adlı bir yazı oluşturalım.Ardından da textimixe bir link verelim.Bunu textimiz seçili iken Edit / Insert /Rectangular Slice ile yapabiliriz.



4- Over sekmesine tıklayalım.Sayfamız ilk önce boş gözükecektir.Copy Graphic butonuna tıklarsak butonumuz belirecektir.



5- Over sekmesinde iken textimizi seçili hale getirerek #CCCCCC renk değerini girelim.



6- Şimdide Down sekmesine tıklayalım.Yine görüldüğü gibi sayfa boş gözükecektir.Copy Graphic sekmesine tıklayalım tekrardan.Ardından butonumuz tekrar gözükecektir.Bu sekmede iken textimiz seçili haldei iken renk değerimizi #CCCC99 olrak değiştirelim.



7- Over While Down sekmesini seçtiğimizde yine sayfamızın boş olduğunu göreceğiz.Aynı işlemi tekrarlayarak Copy Graphic butonuna tıklayalım.Şimdi butonumuz tekrardan gözükecektir.Yine textimizin rengini değiştirmek için textimizi seçili hale getirelim ve ardından da #00CC66 renk değerini girelim.



8-Active Area sekmesine tıklayalım.Ve bu pencerende de done butonu seçelim.



9- Rollover buton çalışmamızı bir önceki adımda anlatıldığı gibi done butonuna basarak bitirdiğimiz zaman,karşımıza böyle bir pencere çıkacaktır.Bu aşamaya kadar geldiğimizde artık çalışmamızı kaydedebiliriz.



10- Resim formatımızı jpg olarak ayarlıyalım.Ve File / Export menüsüne giderek ekrandaki gibi ayarlarımızı yapalım.Kaydettikten sonra butonumuzun işlevini rolloverbutton.html dosyası içinde görebiliriz.

Fireworks Magic Wand Tool (W) kullanımı

1- öncelikle bir resim import edelim.Resmimizin biraz sade bir resim olmasına dikkat edelim.Ben ekranda görünen resmi kullanacağım.



2- Tools paneline gidelim ve ardından Bitmap araçalarından Magic Wand Tool (W) aracını seçelim.



3- Şimdide Magic Wand Tool ile resmimizdeki beyaz alana tıklayalım.Ekrandaki gibi seçili alan üzerinde kesik kesik çizgiler oluşmuş olmalıdır.




4- Bu adımda Select Menüsüne giderek Select Inverse 'yi seçelim.



5- Resmimiz bu konumda iken sağ tıklayarak Edit menüsünden cut sekmesini tıklayalım.Ekranda görüldüğü gibi beyaz alanımız trasnparan hale gelmiş olacaktır.


Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114987

6- Resmimiz üzerindeki kesik çizgilerin kaybolmasını sağlamak için ESC tuşuna basalım.Çalışmamız bu konumda iken üzerine sağ tıklayalım ve Edit menüsünden copy sekmesine tıklayalım.




7- Şimdide kopyaladığımız çalışmamızı CTRL + N ile açtığımız yeni sayfanın içene CTRL + V ile yapıştıralım.Ardından da arka plan rengini #CCCCCC değerini girerek ayarlıyalım.



8- Şimdide resmimiz seçili iken Filters / Shadow and Glow / Inner Glow efektini seçelim.Ve ekranda görülen Inner Glow ayarlarını girelim.



9-Ve çlışmamız bu şekli ile yer almış olacaktır.

WEB 2.0 TEXT EFEKTİ

1- Birinci adımda File/New menuüsünden 400/200 yeni bir çalışma sayfası açalım.






2- Fareyi Tools Çubuğuna götürerek Text Tool seçimini yapalım.
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114988



3- Ben text olarak "HTMLTURK" ifadesini kullanıcağım. Siz istediğiniz bir texti yazabilirsiniz.


4- Textimizi mouse ile seçili hale getirdikten sonra, özellikler panelinden font türünü ve font büyüklüğünü, aşağıdaki resimde olduğu gibi ayarlıyalım.



5- Tools panelinden renk paletine gidelim ve renk paletine mouse ile bir kez tıklayalım.



6- karşımıza çıkan pencereden Fill Options butonuna tıklayalım ve solid seçeneğini Gradient olarak değiştirelim. Seçimi yaptıktan sonra enter tuşuna basın.



7- Şimdi tekrar renk paletine giderek resimdeki gibi renk kodlarını girelim.




8- Özellikler paneline giderek Filter/Shadow and Glow/Inner Shadow seçimini yapalım.



9- Inner Shadow ayarlarımızı resimdeki gibi girelim.






10- Filters/Shadow and Glow/Glow menüsünü seçtikten sonra çıkan penceredeki ayarlarımızı resimdeki gibi yapalım.



11- Filters/Shadow and Glow/Drop Shadow ,




İşte final!

Ağaç Efekti ve Crop Tool kullanımı.1-İlk adımda Ctrl+N ile aşağıdaki resimde ki gibi ölçüler vererek,yeni bir sayfa açalım.Ben Custom'dan arka plan rengimi #333333 olarak veriyorum.

2-Tools Panelinden Rectangle tool(u)'u seçelim.Ve bu araç ile istediğimiz büyüklükte bir kare veya dikdörgen bir alan çizleim.

3-Bu adımda çizdiğimiz şeklinin renk değerini #996600 olarak belirleyelim.

4-Şeklimiz seçili iken Properties Panelinden Filters/Noise/Add Noise'i seçerek resimde görülen değerleri verelim.

5-Yine resmimiz seçili iken Properties Panelinden Filters/Blur/Motion Blur'u seçerek,resimde görülen değerleri verelim.

Crop Tool kullnımı için ise;
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114989
İlk önce Tools Panelinden Select/Crop Tool'u seçerek,resimde görüldüğü gibi mouse ile kare bir alan seçelim.Bu alan seçili iken entera basalım veya mouse'u çift tıklayalım.

Sonuç olarak seçili resmimiz aşağıda görülmektedir.

Ağaç Efekti ve Crop Tool kullanımı.1-İlk adımda Ctrl+N ile aşağıdaki resimde ki gibi ölçüler vererek,yeni bir sayfa açalım.Ben Custom'dan arka plan rengimi #333333 olarak veriyorum.

2-Tools Panelinden Rectangle tool(u)'u seçelim.Ve bu araç ile istediğimiz büyüklükte bir kare veya dikdörgen bir alan çizleim.

3-Bu adımda çizdiğimiz şeklinin renk değerini #996600 olarak belirleyelim.

4-Şeklimiz seçili iken Properties Panelinden Filters/Noise/Add Noise'i seçerek resimde görülen değerleri verelim.
Kaynak: ReformTürk http://www.reformturk.com/showthread.php?p=114990

5-Yine resmimiz seçili iken Properties Panelinden Filters/Blur/Motion Blur'u seçerek,resimde görülen değerleri verelim.

Crop Tool kullnımı için ise;
İlk önce Tools Panelinden Select/Crop Tool'u seçerek,resimde görüldüğü gibi mouse ile kare bir alan seçelim.Bu alan seçili iken entera basalım veya mouse'u çift tıklayalım.

Sonuç olarak seçili resmimiz aşağıda görülmektedir.

Fireworksla uzun süredir ilgilenmedik ama benim derslerle benden başka herkes ilgilenip kendi dersi gibi yasyınlamış

Edge Frame Efekti

1-İlk önce istediğimiz bir resmi import edelim.Ben aşağıdaki bu sardunya resmini kullanacağım.


2-Filters/Alien Skin Splat LE/Edges seçelim.


3-Karşımıza çıkan penceredeki ayarları aşağıdaki gibi uygulayalım.


4-Son olarak resmimiz bu halini alacaktır.