Fireworks輕松繪制banner廣告

2024-09-11 13:32:06

字體：大中小

供稿：網(wǎng)友

banner，一般翻譯為旗幟廣告、橫幅廣告等。banner是網(wǎng)站用來(lái)作為盈利或者是發(fā)布一些重要的信息的工具。banner在設(shè)計(jì)上應(yīng)該要做到制作美觀、方便點(diǎn)擊、與網(wǎng)頁(yè)協(xié)調(diào)和整體構(gòu)成合理。

　　本文中我們用fireworks來(lái)制作一個(gè)變色的banner，從中我們可以掌握符號(hào)（symbol）的使用、補(bǔ)間實(shí)例動(dòng)畫（tween instance）的制作、層(layers)和幀(frames)的基本用法，結(jié)尾進(jìn)行精彩的技巧總結(jié)。文章末尾提供原文件供大家下載參考。

　　完成效果如下：

　　banner制作具體過(guò)程

　　（1）首先我們新建一個(gè)大小為468×60的文件，并設(shè)置畫布顏色為黑色，如圖1所示。

圖1 新建一個(gè)文件

　　（2）然后我們導(dǎo)入一個(gè)要進(jìn)行變色效果的位圖文件，如圖2所示。當(dāng)然我們同樣可以使用繪圖工具繪制這個(gè)圖像，這里是為了方便講解選用外部圖像的。

圖2 導(dǎo)入位圖

　　（3）選中該幅圖像按ctrl＋shift＋d兩次，克隆圖像兩次。然后選中其中的一幅圖像，點(diǎn)擊“filters”，選擇“adjust color”>>“hue/saturation”，這時(shí)在彈出對(duì)話框中調(diào)整色調(diào)的值，如圖3所示。同樣方式調(diào)整另外一幅圖像的顏色，最終得到圖4所示的圖像效果。

圖3 調(diào)整色調(diào)

圖4 對(duì)克隆對(duì)象實(shí)行變色效果后的圖像

　　（4）選中其中的一個(gè)圖片如左邊的紫色圖片，按快捷鍵f8或者右鍵在彈出菜單中選擇convert to symbol準(zhǔn)備將圖像轉(zhuǎn)換為符號(hào)。在彈出的對(duì)話框內(nèi)為符號(hào)命名并選擇動(dòng)畫符號(hào)(animation)，如圖5所示。

圖5 將圖像轉(zhuǎn)換為符號(hào)

　　（5）點(diǎn)擊“ok”之后會(huì)彈出動(dòng)畫設(shè)置的對(duì)話框，如圖6所示。我們暫時(shí)對(duì)它不做設(shè)置。

圖6 動(dòng)畫設(shè)置對(duì)話框

　　（6）單擊“ok”，這時(shí)回到工作區(qū)中，我們?cè)诋嫴忌蠒?huì)看到帶箭頭的虛線邊框的符號(hào)，如圖7所示。使用同樣方式將另外兩幅圖像轉(zhuǎn)換為符號(hào)，并分別命名為symbol 2和symbol 3，然后將三個(gè)符號(hào)都刪除掉。

圖7 位圖轉(zhuǎn)換為動(dòng)畫符號(hào)的效果

　　（7）我們?cè)僭赽anner的左邊加些圖片并做適當(dāng)調(diào)整使banner更加生動(dòng)，如圖8所示。

圖8 在banner左邊添加圖片

　　（8）接著我們點(diǎn)擊“window”菜單，分別把“l(fā)ayers”、“frames”和“l(fā)ibrary”三個(gè)面板打開(kāi)，為了我們將來(lái)創(chuàng)建動(dòng)畫服務(wù)。在layers（層）面板中選中l(wèi)ayer 1圖層雙擊鼠標(biāo)給圖層命名為background，并選中“share across frames”復(fù)選框即共享這個(gè)圖層，如圖9所示。

圖9 命名并共享圖層