網(wǎng)頁草圖設計實例

網(wǎng)頁草圖設計實例

ID:14272145

大小:1.06 MB

頁數(shù):7頁

時間:2018-07-27

網(wǎng)頁草圖設計實例_第1頁
網(wǎng)頁草圖設計實例_第2頁
網(wǎng)頁草圖設計實例_第3頁
網(wǎng)頁草圖設計實例_第4頁
網(wǎng)頁草圖設計實例_第5頁
資源描述:

《網(wǎng)頁草圖設計實例》由會員上傳分享,免費在線閱讀,更多相關內容在行業(yè)資料-天天文庫。

1、網(wǎng)頁草圖設計實例繪制草圖是為了能夠得到整體的頁面結構,制作者通過網(wǎng)頁草圖與客戶進行溝通,從而確定網(wǎng)站外觀、功能和一些特效,知道客戶這樣能減滿意為止,這樣能減少麻煩。同時如果在設計頁面階段還沒有完全確定整個網(wǎng)站的功能,那么在以后的開發(fā)過程中會浪費很長時間去修改,并且從頁面設計到網(wǎng)頁制作這個過程是不可逆的過程。同時草圖文件還可以作為Dreamweaver中的跟蹤圖像,使用軟件設計草圖,效果如圖所示。制作網(wǎng)站首頁草圖的具體操作步驟。(1)執(zhí)行“文件”

2、“新建”命令,新建文檔。(圖像大小:960×900像素)(2)打開“sky.jpg”、“建筑.jpg”文件。

3、(3)工具箱中選擇“移動工具”,將“sky.jpg”文件拖到新建“網(wǎng)頁草圖”文件上,圖層重命名為“天空”。將“建筑.jpg”文件拖到新建“網(wǎng)頁草圖”文件上,圖層重命名為“建筑”。(4)當前層為“建筑”圖層,按【Ctrl+T】組合鍵調整圖像大小,按【Enter】確定。(5)為“建筑”圖層添加圖層蒙版。(6)工具箱中設置“前景色/背景色”為默認的“黑色/白色”(#000000/#ffffff)。工具箱中選擇“漸變工具”,選擇“前景色到背景色的漸變”,在“建筑”圖層蒙版上從左到右拖動鼠標填充。(7)工具箱中選擇“畫筆工具”,前景色黑色#000000,畫筆直徑

4、70px,硬度0%,在“建筑”圖層蒙板上涂抹對圖像遮罩,效果如圖所示。(8)打開“人物.gif”文檔,執(zhí)行“圖像”

5、“模式”

6、“RGB顏色”命令,將圖像轉換成RGB顏色模式。(9)工具箱中選擇“移動工具”,把“人物.gif”圖像拖動到“網(wǎng)頁草圖”文件上,該圖層重命名為“人物”。(10)打開images文件夾中的“l(fā)ogo.gif”文件。執(zhí)行“圖像”

7、“模式”

8、“RGB顏色”命令。(11)工具箱中選擇“移動工具”,把“l(fā)ogo.gif”圖像拖動復制到“網(wǎng)頁草圖”文件上,該圖層重命名為“Logo”。(12)工具箱中選擇“文字工具”,輸入文字,效果如圖所示。

9、(13)圖層面板上,新建“組1”,重命名為“top”,并將除背景層以外的圖層拖動到“top”組中,如圖所示。(14)圖層面板上,新建“組1”,重命名為“導航欄”。在“導航欄”組中新建“圖層1”重命名為“導航欄背景”,工具箱中選擇“矩形選框工具”,在“導航欄背景”圖層上創(chuàng)建矩形選區(qū)。(15)前景色設置為#f45209,按【Alt+Del】組合鍵填充前景色。按【Ctrl+D】組合鍵取消選區(qū)。(16)設置前景色為白色#ffffff,工具箱中選擇“文字工具”,輸入文字,效果如圖所示?!?/p>

10、”與文字之間有一個空格。17)圖層面板上,新建“組1”,重命名為“主體”,

11、新建“圖層1”重命名為“主體右”,執(zhí)行“視圖”

12、“標尺”命令,顯示出標尺線,并拖出標尺輔助線。工具箱中選擇“矩形選框工具”,選項卡欄設置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū)與標尺重合。(18)設置前景色為#4bb2f5,按【Alt+Del】組合鍵填充前景色,按【Ctrl+D】組合鍵取消選區(qū),效果如圖所示。(19)工具箱中選擇“矩形選框工具”。選項卡欄設置如圖所示。在“主體右”圖層上單擊創(chuàng)建矩形選區(qū),如圖所示。(20)執(zhí)行“編輯”

13、“描邊”命令,單擊【確定】按鈕。效果如圖所示。(21)圖層面板上,新建兩個圖層,分別重命名為“主體右中”、“主體右下

14、”,同理繪制其它兩個主體部分,文字的背景選區(qū)的大小為200px×27px,描邊選區(qū)的大小分別為200px×157px、200px×194px,效果如圖所示。(22)工具箱中選擇“文字工具”,輸入文字。(23)圖層面板上,新建兩個圖層,分別重命名為“主體左上”、“主體左下”。繪制左側兩個主體部分,文字的背景選區(qū)的大200px×27px,描邊的選區(qū)的大小分別為200px×251px,200px×190px,效果如圖所示。(24)打開“l(fā)anmu.gif”、“xian3.gif”文件。執(zhí)行“圖像”

15、“模式”

16、“RGB模式”命令。(25)圖層面板上,新建“組1

17、”,重命名為“主體中”。工具箱中選擇“移動工具”,將“l(fā)anmu.gif”文件拖動到“網(wǎng)頁草圖”文件中,圖層重命名為“欄目”。將“xian3.gif”文件拖動到“網(wǎng)頁草圖”文件中,圖層重命名為“線3”。“線3”和“欄目”圖層都位于“主體中”組中。(26)按【Ctrl+T】組合鍵,豎直方向上調整“線3”的大小,按【Enter】確定。(27)工具箱中選擇“移動工具”,按【Alt】鍵拖動鼠標復制“線3”圖像,并移動到“欄目”圖像右邊,如圖所示。(28)工具箱中選擇“移動工具”,按【Alt】鍵拖動鼠標復制“線3”圖像。執(zhí)行“編輯”

18、“變換”

19、“旋轉90度(順時

20、針)”命令,并移動圖像到合適位置,按【Ctrl+T】組合鍵。水平方向上調整該圖像,按【Ente

當前文檔最多預覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當前文檔最多預覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學公式或PPT動畫的文件,查看預覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權歸屬用戶,天天文庫負責整理代發(fā)布。如果您對本文檔版權有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內容,確認文檔內容符合您的需求后進行下載,若出現(xiàn)內容與標題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。