本書根據(jù)高職學(xué)生的特點,結(jié)合Photoshop CS6的基本工具和基礎(chǔ)操作,以案例教學(xué)為主線,采用圖文并茂的方式,精選若干綜合實例,對Web設(shè)計的概念和方法進行了全面的講解。
全書共11章,包括網(wǎng)頁設(shè)計的概念、Photoshop入門基礎(chǔ)、網(wǎng)頁圖片的處理、導(dǎo)航欄的設(shè)計與制作、網(wǎng)頁按鈕與圖標的設(shè)計與制作、網(wǎng)頁特效文字的設(shè)計與制作、網(wǎng)頁Banner的設(shè)計與制作、網(wǎng)頁布局設(shè)計、網(wǎng)頁布局實例解析、網(wǎng)站首頁設(shè)計與制作實例、網(wǎng)站的發(fā)布與推廣。本書內(nèi)容豐富,圖文并茂,配套資源豐富,教材、資源、課件三合一,具有較強的實用性。
本書可作為高職或中職計算機網(wǎng)絡(luò)技術(shù)專業(yè)或其他相關(guān)專業(yè)的教材,也可供廣大網(wǎng)頁設(shè)計愛好者和網(wǎng)站管理與維護人員作為參考書或培訓(xùn)教材。
“Web設(shè)計基礎(chǔ)”是計算機網(wǎng)絡(luò)技術(shù)及相關(guān)專業(yè)的一門專業(yè)課程。編寫本書的目的是幫助有志于從事Web設(shè)計開發(fā)的讀者熟悉和掌握網(wǎng)站建設(shè)的基本流程及Web頁面設(shè)計與制作的方法。
本書根據(jù)Web開發(fā)實際工作要求,將主要內(nèi)容聚焦在Web美工設(shè)計工作崗位所必需的素質(zhì)和技能上,循序漸進地從網(wǎng)頁設(shè)計的基本概念、Photoshop CS6的使用方法、頁面元素的設(shè)計與制作及網(wǎng)頁布局設(shè)計幾個方面展開講解。
本書中的實例大部分來自實際工作場景,全書分為11章,通過若干綜合實例,完整詳細地介紹了Web設(shè)計的工作流程和實施步驟,主要內(nèi)容包括網(wǎng)頁設(shè)計的概念、Photoshop入門基礎(chǔ)、網(wǎng)頁圖片的處理、導(dǎo)航欄的設(shè)計與制作、網(wǎng)頁按鈕與圖標的設(shè)計與制作、網(wǎng)頁特效文字的設(shè)計與制作、網(wǎng)頁Banner的設(shè)計與制作、網(wǎng)頁布局設(shè)計、網(wǎng)頁布局實例解析、網(wǎng)站首頁設(shè)計與制作實例、網(wǎng)站的發(fā)布與推廣。本書全面講解網(wǎng)站界面設(shè)計所涉及的內(nèi)容,敘述生動,由淺入深,通過大量實例具體說明如何將設(shè)計概念融入到實際操作中。通過學(xué)習(xí),學(xué)生不僅可以掌握網(wǎng)頁布局設(shè)計思想和最新趨勢,以及使用Photoshop CS6進行網(wǎng)頁布局設(shè)計和網(wǎng)頁元素設(shè)計制作的方法和技能,還能夠了解網(wǎng)站建設(shè)的整個工作流程。
本書由長沙民政職業(yè)技術(shù)學(xué)院付朝暉、王華兵任主編,宮蓉蓉、劉立任副主編。其中第1、8、9、10章由付朝暉編寫,第6、7、11章由宮蓉蓉編寫,第2、4章由張麗編寫,第5章由何晶編寫,第3章由陳丹編寫,全書由付朝暉統(tǒng)稿,王華兵、宮蓉蓉與劉立參與校對。本書的編寫得益于眾多同類教材的啟發(fā),并得到了長沙民政職業(yè)技術(shù)學(xué)院軟件學(xué)院鄧文達教授的精心指導(dǎo)和兄弟學(xué)校同仁們的真誠關(guān)懷,以及湖南厚溥教育科技有限公司陳棵、管仕華兩位工程師的大力協(xié)助。此外,西安電子科技大學(xué)出版社也為本書的順利出版提供了鼎力幫助和支持,在此一并表示感謝。
由于編者水平有限,編寫時間倉促,書中難免有不足之處,敬請讀者不吝賜教。
第1章 網(wǎng)頁設(shè)計的概念 1
1.1 網(wǎng)站的定位與規(guī)劃 1
1.1.1 什么是網(wǎng)站定位 1
1.1.2 網(wǎng)站定位的依據(jù) 2
1.1.3 網(wǎng)站定位的創(chuàng)意與策劃 3
1.1.4 樹立網(wǎng)站整體風(fēng)格 3
1.2 網(wǎng)頁的構(gòu)成要素 4
1.2.1 文字 4
1.2.2 圖片 5
1.2.3 交互 5
1.2.4 視頻和動畫 6
1.2.5 優(yōu)秀案例賞析 6
1.3 網(wǎng)頁配色 7
1.3.1 色彩的基本知識 8
1.3.2 色彩的搭配 9
1.4 網(wǎng)頁設(shè)計常用工具 12
1.5 課后實踐練習(xí) 14
第2章 Photoshop入門基礎(chǔ) 15
2.1 Photoshop CS6工作界面 15
2.1.1 菜單欄 15
2.1.2 工具箱 17
2.1.3 選項欄 18
2.1.4 控制面板 18
2.1.5 圖像編輯區(qū) 19
2.2 設(shè)置前景色和背景色 19
2.2.1 設(shè)置前景色 19
2.2.2 設(shè)置背景色 21
2.3 創(chuàng)建選擇區(qū)域 21
2.3.1 選框工具 21
2.3.2 套索工具 23
2.3.3 選區(qū)的布爾運算 25
2.4 基本繪圖工具 26
2.4.1 形狀工具 26
2.4.2 鋼筆工具 28
2.5 創(chuàng)建文字 29
2.5.1 文字工具選項欄 29
2.5.2 創(chuàng)建文字 31
2.6 圖層和圖層樣式 32
2.6.1 圖層的基本操作 33
2.6.2 圖層樣式 34
2.7 應(yīng)用濾鏡 37
2.7.1 濾鏡庫 37
2.7.2 “風(fēng)格化”濾鏡 38
2.7.3 “液化”濾鏡 39
2.7.4 “模糊”濾鏡 40
2.8 實戰(zhàn)——?制作藍色光束 41
2.9 課后實踐練習(xí) 48
第3章 網(wǎng)頁圖片的處理 49
3.1 幾種常見的摳圖工具 49
3.1.1 魔棒工具 49
3.1.2 鋼筆工具 51
3.1.3 通道摳圖 53
3.2 圖像的合成 57
3.2.1 合成建筑與草地圖像 57
3.2.2 合成車和草地圖像 62
3.3 圖像的輸出格式 66
3.4 快速制作Web文件 69
3.5 創(chuàng)建與編輯切片 72
3.6 課后實踐練習(xí) 77
第4章 導(dǎo)航欄的設(shè)計與制作 79
4.1 實例1:橫向?qū)Ш綑诘脑O(shè)計與制作 79
4.2 實例2:縱向?qū)Ш綑诘脑O(shè)計與制作 93
4.3 實例3:水晶導(dǎo)航欄的設(shè)計與制作 102
4.4 拓展實例:HTML + CSS構(gòu)建網(wǎng)站導(dǎo)航欄 109
4.5 課后實踐練習(xí) 113
第5章 網(wǎng)頁按鈕與圖標的設(shè)計與制作 114
5.1 水晶設(shè)計風(fēng)格與扁平設(shè)計風(fēng)格 114
5.2 實例1:制作水晶風(fēng)格按鈕 115
5.3 實例2:制作扁平風(fēng)格按鈕 118
5.4 實例3:網(wǎng)站LOGO的設(shè)計與制作 125
5.5 實例4:像素小圖標的設(shè)計與制作 129
5.6 課后實踐練習(xí) 134
第6章 網(wǎng)頁特效文字的設(shè)計與制作 135
6.1 特效文字在網(wǎng)頁中的應(yīng)用 135
6.2 實例1:玻璃特效文字 136
6.3 實例2:射線特效文字 144
6.4 實例3:石材特效文字 149
6.5 實例4:火焰特效文字 157
6.6 實例5:金屬特效文字 162
6.7 課后實踐練習(xí) 168
第7章 網(wǎng)頁Banner的設(shè)計與制作 169
7.1 實例1:學(xué)校網(wǎng)站Banner設(shè)計與制作 169
7.2 實例2:科技公司Banner制作 177
7.3 實例3:政府部門Banner制作 182
7.4 實例4:公益網(wǎng)頁Banner設(shè)計 185
7.5 實例5:動態(tài)Banner設(shè)計與制作 190
7.6 Banner設(shè)計與制作注意事項 199
7.7 課后實踐練習(xí) 200
第8章 網(wǎng)頁布局設(shè)計 201
8.1 網(wǎng)頁布局的概念 201
8.1.1 網(wǎng)頁布局的要素 201
8.1.2 網(wǎng)頁布局設(shè)計的原則 203
8.2 網(wǎng)頁布局形式 206
8.2.1 傳統(tǒng)的網(wǎng)頁版式布局設(shè)計 206
8.2.2 網(wǎng)頁設(shè)計布局的流行趨勢 214
8.3 網(wǎng)頁版面設(shè)計常用方法 216
8.4 Photoshop在網(wǎng)頁布局中的作用 218
8.4.1 用Photoshop設(shè)計網(wǎng)頁布局的優(yōu)點 218
8.4.2 用Photoshop設(shè)計網(wǎng)頁布局應(yīng)注意的幾個問題 219
8.5 網(wǎng)頁柵格系統(tǒng) 219
8.5.1 網(wǎng)頁柵格系統(tǒng)的定義 219
8.5.2 柵格系統(tǒng)的設(shè)計原理及應(yīng)用 219
8.5.3 柵格化設(shè)計的參數(shù) 222
8.6 課后實踐練習(xí) 223
第9章 網(wǎng)頁布局實例解析 225
9.1 實例1:企業(yè)類網(wǎng)站布局設(shè)計 225
9.2 實例2:學(xué)校網(wǎng)站布局設(shè)計 236
9.3 網(wǎng)頁布局注意事項 245
9.4 課后實踐練習(xí) 245
第10章 網(wǎng)站首頁設(shè)計與制作實例 247
10.1 概述 247
10.2 網(wǎng)站首頁效果圖設(shè)計與制作 249
10.3 網(wǎng)頁效果圖切圖 257
10.4 課后實踐練習(xí) 259
第11章 網(wǎng)站的發(fā)布與推廣 261
11.1 網(wǎng)站發(fā)布 261
11.2 網(wǎng)站測試 263
11.3 網(wǎng)站推廣 265
參考文獻 268