在網頁效果圖的設計階段，應按照繪制結構草圖，在Fireworks中繪制輔助線、繪制結構底圖、添加內容、對效果圖進行切片、對切片進行優化、輸出切片刀Dreamweaver的順序來依次進行。下面將會介紹網頁效果圖設計中各個流程的作用。
在圖像軟件中設計網頁效果圖，總體可以分為7個步驟：（1）、創建畫布，添加輔助線來布局；（2）、繪制結構底圖；（3）、添加內容，包括圖像和文字；（4）、切片；（5）、優化；（6）、導出；（7）、布局。
1、創建輔助線
在具體設計前，應當考慮到網頁的布局形式，可以根據策劃階段確定下來的網頁布局草圖，在Fireworks的畫布中添加輔助線，這樣做的目的是為了明確頁面布局形式和面積。
需要注意的是，對于布局結構比較復雜的頁面，輔助線不是一次就能夠全部創建好的，而是一部分內容創建一部分否則輔助線過多會使頁面混亂。
2、繪制結構底圖
根據創建好的輔助線，使用Fireworks的工具或者是矩形選取框工具，把網頁效果圖中帶有底色的“矩形塊”依次繪制出來，形成一個整體的布局效果。
這里的“矩形塊‘只是一個統稱，可以使任意的形狀。除了得到形狀以外，還可以直接對這些”矩形塊“配色，或添加紋理、濾鏡，從而在整體上對頁面的配色方案進行控制。
3、添加內容
結構底圖繪制完畢后，就可以開始在網頁效果圖中添加實際的內容了，包括文字和圖像，從而完成終的效果圖方案。
添加圖像的時候，如何選擇合適的圖像素材，如何對圖像素材進行處理是非常重要的，可以說網頁中圖像設計的好壞，直接影響到整體的頁面效果。
4、切片
效果圖制作完畢后，首先需要進行切片。把網頁比喻成一幅圖，而切片工具就像是剪刀，使用切片工具可以把一張大圖像裁剪成很多小圖像。這樣做目的之一是為了加快下載速度。因為IE瀏覽器是多線程的，同一時間可以下載3幅圖像。
切片的另外一個目的，也是主要的目的是為了布局的需要。很多人不知道該如何對效果圖進行切片，這是因為對布局技術不了解。同一個網頁效果圖，按不同的方式布局就會得到不同的切片，并沒有說哪一個才是”標準”的，所以要想靈活運用切片，必須熟悉流行的布局技術。
