Fireworks設(shè)計(jì)制作化妝品網(wǎng)站首頁(yè)
Fireworks設(shè)計(jì)制作化妝品網(wǎng)站首頁(yè)
本例向朋友介紹運(yùn)用Fireworks合成設(shè)計(jì)制作一個(gè)化妝品網(wǎng)站首頁(yè),在本例中我們將學(xué)習(xí)到Fireworks位圖工具的應(yīng)用、合理運(yùn)用素材設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)稿的方法,希望能給朋友們帶來(lái)幫助~~
本例是一個(gè)以女性化妝品為主打產(chǎn)品的企業(yè)宣傳網(wǎng)站的形象頁(yè)面效果圖設(shè)計(jì)。該公司一直致力于結(jié)合科技和自然的化妝品產(chǎn)品的研發(fā),主打自然健康的產(chǎn)品理念,因此在整體的頁(yè)面設(shè)計(jì)中以綠色為主要的風(fēng)格,同時(shí)配以女性模特、植物和蝴蝶的素材來(lái)體現(xiàn)清新、自然的感覺(jué)。如圖1.1所示。
Fireworks設(shè)計(jì)制作化妝品網(wǎng)站首頁(yè)
1.1 效果圖
素材如下
設(shè)計(jì)過(guò)程:
1.新建一個(gè)Fireworks文件。
2.在彈出的【新建文檔】對(duì)話(huà)框中設(shè)置畫(huà)布的寬度為760像素,高度為430像素,背景顏色為白色。如圖1.2所示。
圖1.2 【新建文檔】對(duì)話(huà)框
3.選擇繪圖工具欄中的【選取框】工具,在【屬性】面板中進(jìn)行相應(yīng)的設(shè)置,如圖1.3所示。
圖1.3 【選取框】工具的屬性設(shè)置
4.使用【選取框】工具在畫(huà)布的右側(cè)繪制一個(gè)矩形選區(qū),如圖1.4所示。
圖1.4 使用【選取框】工具繪制選區(qū)
5.選擇繪圖工具欄中的【漸變】工具 ,這時(shí)【屬性】面板會(huì)自動(dòng)變成漸變色的調(diào)節(jié)屬性。設(shè)置漸變的類(lèi)型為線(xiàn)性漸變,漸變顏色為白色過(guò)度到綠色。如圖1.5所示。
圖1.5 【漸變】工具的屬性設(shè)置
6.使用【漸變】工具,在畫(huà)布右側(cè)的選區(qū)中單擊鼠標(biāo)左鍵,漸變色即可填充到當(dāng)前選區(qū)中。如圖1.6所示。填充完畢,按快捷鍵【Ctrl+D】推出位圖編輯模式。
圖1.6 給選區(qū)填充漸變色
【說(shuō)明】使用【漸變】工具在選區(qū)單擊,得到的漸變色方向默認(rèn)為水平方向,如果希望得到不同方向的漸變色,可以使用【漸變】工具在選區(qū)中拖拽填充。
7.在Fireworks 8的新窗口中打開(kāi)事先準(zhǔn)備好的圖像素材“花草.jpg”,選擇繪圖工具欄中的【橢圓選取框】工具,在【屬性】面板中進(jìn)行相應(yīng)的設(shè)置,如圖1.7所示。
圖1.7 【橢圓選取框】工具的屬性設(shè)置
8.使用【橢圓選取框】工具在圖像“花草.jpg”中繪制一個(gè)正圓的選區(qū)。如圖1.8所示。
圖1.8【漸變】工具的屬性設(shè)置
9.按住鍵盤(pán)的【Shift】鍵,這時(shí)在鼠標(biāo)指針的右下角會(huì)顯示一個(gè)小【+】號(hào),表示添加選區(qū)。使用【橢圓選取框】工具在當(dāng)前選區(qū)的基礎(chǔ)上增加一個(gè)新的選區(qū)。如圖1.9所示。
圖1.9 使用【橢圓選取框】工具增加選區(qū)
10.現(xiàn)在得到的是有點(diǎn)類(lèi)似于望遠(yuǎn)鏡的兩個(gè)橢圓連接在一起的選區(qū),如果需要調(diào)整選區(qū)在圖像中的位置,在【橢圓選取框】工具選中的狀態(tài)下,直接用鼠標(biāo)移動(dòng)即可。把選擇的像素區(qū)域,復(fù)制到前面新建立的畫(huà)布中來(lái)。如圖1.10所示。
圖1.10 把選中的像素區(qū)域復(fù)制到畫(huà)布中
11. 在Fireworks 8的新窗口中打開(kāi)事先準(zhǔn)備好的圖像素材“模特.jpg”,選擇繪圖工具欄中的【多邊形套索】工具,在【屬性】面板中進(jìn)行相應(yīng)的設(shè)置,如圖1.11所示。
圖1.11 【多邊形套索】工具的屬性設(shè)置
12.使用【多邊形套索】工具,把圖像素材“模特.jpg”的人物區(qū)域選中,如圖1.12所示。在選擇的過(guò)程中,不需要完全的壓邊,因?yàn)橛杏鸹脑O(shè)置。同時(shí)如果不小心選擇錯(cuò)誤的話(huà),必須重新繪制選區(qū)。
圖1.12 使用【多邊形套索】工具選擇像素區(qū)域
13.把選中的像素區(qū)域復(fù)制到前面新建的畫(huà)布中,如圖1.13所示。
圖1.13 復(fù)制選中的像素區(qū)域到新的文檔中
14.選擇繪圖工具欄中的【橢圓選取框】工具,其屬性設(shè)置和前面一致。在畫(huà)布中繪制一個(gè)橢圓的選區(qū)。如圖1.14所示。
圖1.14 使用【橢圓選取框】工具繪制選區(qū)
15.選擇【選擇】【反選】命令(快捷鍵為【Ctrl+Shift+I】),對(duì)選區(qū)進(jìn)行反選操作,這樣選中的就是橢圓選區(qū)以外的部分。如圖1.15所示。
圖1.15 對(duì)選區(qū)進(jìn)行反選操作
11.在圖層中選擇圖像素材“模特.jpg”所在的圖層,按鍵盤(pán)的【Delete】鍵,即可刪除所選中的像素區(qū)域。根據(jù)需要,可以適當(dāng)移動(dòng)選區(qū),對(duì)圖像素材“模特.jpg”的邊緣部分進(jìn)行多次刪除,最終效果如圖1.16所示。
圖1.16 刪除選中的像素區(qū)域
17.選擇【修改】【變形】【水平翻轉(zhuǎn)】命令,改變模特素材的水平方向。并且使用【縮放】工具適當(dāng)調(diào)整圖像的尺寸,對(duì)齊到相應(yīng)的位置。
18.打開(kāi)【屬性】面板中的【亮度/對(duì)比度】濾鏡命令,適當(dāng)增加其【亮度】和【對(duì)比度】屬性,使圖像素材更清晰明亮。如圖1.17所示。
圖1.17 對(duì)圖像素材進(jìn)行色彩調(diào)整
19.使用繪圖工具欄中的【直線(xiàn)】工具,在畫(huà)布中繪制一個(gè)十字坐標(biāo),并且在【屬性】面板中設(shè)置其筆觸樣式為虛線(xiàn)。如圖1.18所示。
圖1.18 繪制十字坐標(biāo)
20.在Fireworks 8的新窗口中打開(kāi)事先準(zhǔn)備好的圖像素材“向日葵.jpg”,選擇繪圖工具欄中的【多邊形套索】工具,其屬性設(shè)置和前面一致,把向日葵選擇下來(lái),并且復(fù)制到當(dāng)前畫(huà)布中。如圖1.19所示。
圖1.19 使用【多邊形套索】工具選擇像素區(qū)域
21.首先把向日葵復(fù)制一個(gè),選中復(fù)制的向日葵圖像,在【屬性】面板的【濾鏡】菜單中選擇【模糊】【運(yùn)動(dòng)模糊】命令。
22.在彈出的【運(yùn)動(dòng)模糊】對(duì)話(huà)框中設(shè)置好相應(yīng)的屬性,效果如圖1.20所示。
圖1.20 給圖像添加【移動(dòng)模糊】濾鏡
23.在【圖層】面板中調(diào)整模糊后向日葵的排列順序,拖拽到所有對(duì)象的下方,并且同時(shí)設(shè)置其【透明度】為40。如圖1.21所示。
圖1.21 調(diào)整圖像的排列順序和透明度
24.把另外一張向日葵的圖像縮小到適當(dāng)?shù)某叽?,并且移?dòng)到十字坐標(biāo)上,如圖1.22所示。
圖1.22 縮小向日葵圖像的尺寸,并且移動(dòng)到相應(yīng)的位置
25.使用繪圖工具欄中的【選取框】工具,選中圖像中多余的像素區(qū)域,依次刪除。如圖1.23所示。
圖1.23 使用【選取框】工具,刪除圖像多余的部分
21.最后,在畫(huà)布中添加文本和網(wǎng)站標(biāo)志,整個(gè)頁(yè)面效果圖就制作完畢了。效果如圖1.1所示。