Photoshop 網站UI設計（第2版）

《Photoshop 網站UI設計（第2版）》是2018年機械工業出版社出版的圖書，作者是張晨起 。

基本介紹

• 中文名：Photoshop 網站UI設計（第2版）
• 作者：張晨起
• 出版社： 機械工業出版社
• 出版時間：2018年1月1日
• ISBN：9787111588825

內容簡介

《Photoshop 網站UI設計（第2版）》以圖像處理與合成軟體Photoshop CC為設計工具，對主流網頁設計流程和製作技巧進行了全面、細緻的剖析。

　　《Photoshop 網站UI設計（第2版）》共10章。包括網站UI概述、Photoshop基本操作、網站頁面UI配色、網站頁面布局與版式設計、網站頁面圖像的最佳化與調整、網站基本元素設計、網站導航設計、網站廣告設計、移動端網站UI設計、計算機端網站UI設計。將實用的技術、快捷的操作方法和豐富的內容介紹給用戶，使用戶在掌握軟體功能的同時，提高網頁設計效率和從業素質。

　　《Photoshop 網站UI設計（第2版）》配套全部實例的素材、源檔案和教學視頻，可以通過掃描封底二維碼獲得。

　　《Photoshop 網站UI設計（第2版）》適合UI設計愛好者、APP界面設計從業者閱讀，也適合作為各院校相關設計專業的參考教材，是一本實用的APP界面設計操作寶典。

圖書目錄

前言

第1章網站UI概論

1.1初識網站UI

1.1.1什麼是網頁界面

1.1.2網頁界面的分類

1.1.3網頁界面的設計特點

1.2網站UI設計原則

1.2.1視覺美觀

1.2.2突出主題

1.2.3整體性

1.2.4為用戶考慮

1.2.5快速載入

1.3網頁的構成元素

1.3.1文字

1.3.2圖像

1.3.3超連結

1.3.4多媒體

1.4網頁UI中的扁平化

1.4.1圖示

1.4.2折角

1.4.3圓角

1.4.4徽章

1.4.5條紋

1.4.6標籤

1.4.7裝飾元素

1.4.8裝飾背景

1.5移動端與計算機端網頁UI區別

1.5.1界面不同

1.5.2位置不同

1.5.3操作習慣不同

1.5.4按鈕狀態不同

1.5.5信息布局不同

1.6網頁設計命名規範

1.7專家支招

1.7.1網站建設流程

1.7.2什麼是虛擬主機

1.8總結擴展

1.8.1本章小結

1.8.2舉一反三——查看手機UI界面

第2章Photoshop基本操作

2.1什麼是Photoshop

2.2Photoshop的安裝和啟動界面

實例Photoshop的安裝和啟動

2.3Photoshop的基本操作

2.3.1新建文檔

2.3.2打開檔案

2.3.3保存檔案

實例製作精美的網頁圖示

2.3.4檔案的置入和導入

2.3.5修改圖像大小

2.3.6修改畫布大小

實例調整網頁尺寸

2.4圖像的複製與貼上

2.4.1圖像的複製

實例製作精美的網頁界面

2.4.2圖像的拷貝與貼上

實例製作網頁插圖

2.4.3選擇性貼上

實例製作網頁展板

2.5圖像的裁剪

2.5.1固定尺寸裁剪

2.5.2利用輔助線裁剪

2.5.3透視裁剪

2.6圖像的變換

2.6.1移動圖像

2.6.2縮放圖像

2.6.3旋轉圖像

2.6.4變形和透視

2.6.5自由變換

實例為網頁製作廣告插圖

2.7還原與恢復操作

2.7.1還原與重做

2.7.2前進一步與後退一步

2.7.3恢復檔案

2.8專家支招

2.8.1什麼是矢量圖像和點陣圖圖像

2.8.2解析度

2.9總結擴展

2.9.1本章小結

2.9.2舉一反三——製作簡單的網頁按鈕

第3章網站頁面UI配色

3.1色彩的基礎知識

3.1.1三原色

3.1.2色彩視覺

3.1.3色彩三要素

3.1.4色彩的種類

3.1.5色系

3.2色彩在網頁視覺設計中的作用

3.2.1突出網頁主題

3.2.2劃分視覺區域

3.2.3吸引瀏覽者目光

3.2.4增強網頁藝術性

3.3色彩的聯想作用與心理效果

3.3.1色彩的冷暖

3.3.2色彩的軟硬

3.3.3色彩的大小

3.3.4色彩的輕重

3.3.5色彩的活潑和端莊

3.3.6色彩的興奮和沉穩感

3.3.7色彩的華麗和樸素感

3.4網頁配色標準

3.4.1Web安全色

3.4.2使用Web安全色調色板

3.5色彩中的功能角色

3.5.1主色

3.5.2背景色

3.5.3輔助色

3.5.4點綴色

3.6網頁配色技巧

3.6.1配色原則

實例製作簡約網站主頁

3.6.2確定網頁主題色

3.6.3確定網頁文本配色

實例製作公司宣傳主頁

3.7網頁風格影響配色

3.7.1冷暖配色

3.7.2白色的套用

3.7.3飽和度影響配色

3.8影響配色的元素

3.8.1根據行業特徵選擇網頁配色

3.8.2根據色彩聯想選擇網頁配色

3.8.3根據客群色彩偏好選擇網頁配色

3.8.4根據生命周期選擇網頁配色

3.9專家支招

3.9.1怎樣提高對色彩的敏感度

3.9.2什麼是色立體

3.10總結擴展

3.10.1本章小結

3.10.2舉一反三——製作水族館網站主頁

第4章網站頁面布局與版式設計

4.1了解網頁布局

4.1.1網頁布局的目的

4.1.2網頁布局的操作順序

4.2計算機端常見的網頁布局方式

4.2.1“國”字形

4.2.2“T”字形

4.2.3標題正文型

4.2.4左右分割型

4.2.5上下分割型

4.2.6POP型

4.2.7封面型

實例製作完整豎屏網頁

4.2.8Flash型

4.3移動端網頁布局方式

4.3.1布局的類型

4.3.2布局的實現方式

4.3.3回響式布局

4.3.4回響式布局優缺點

4.4網頁布局方法

4.4.1網頁布局設計

4.4.2網頁布局特徵

4.4.3網頁布局原則

實例製作蛋糕店主頁——頂部

實例製作蛋糕店主頁——主體

4.5根據整體內容決定網頁布局

4.5.1左側的網頁布局

4.5.2水平居中的頁面布局

4.5.3水平和居中的頁面布局

4.5.4滿屏的網頁布局

4.6頁面分割方式

4.6.1橫向分割

4.6.2縱向分割

4.6.3複合分割

4.7運用固定區域的設定

4.8網頁布局設計的連貫性和多樣性

4.9專家支招

4.9.1網頁界面設計的設計誤區

4.9.2網頁界面設計的設計理念

4.10總結擴展

4.10.1本章小結

4.10.2舉一反三——製作簡潔網頁登入界面

第5章網站頁面圖像的最佳化與調整

5.1網站中的圖像

5.1.1網站中使用的圖片格式

5.1.2網站中的顏色模式

5.2圖章工具的使用

5.2.1仿製圖章的套用

實例去除網頁中的水印效果

5.2.2圖案圖章工具的套用

5.3修復網頁中的圖像

5.3.1污點修復畫筆工具

實例修復圖像瑕疵

5.3.2修復畫筆工具

5.3.3修補工具

5.3.4內容感知移動工具

5.3.5紅眼工具

5.4自動調整圖像色彩

5.4.1自動色調

5.4.2自動對比度

5.4.3自動顏色

5.5手動調整圖像色彩

5.5.1亮度/對比度

實例調整網頁中的圖像亮度

5.5.2色階

5.5.3曲線

實例執行“曲線”命令調整圖像

5.5.4自然飽和度

實例製作炫彩展示圖

5.5.5色相/飽和度

5.5.6陰影/高光

實例調整網頁中的逆光圖片

5.6填充和調整圖層

5.6.1純色填充圖層

5.6.2漸變填充圖層

5.6.3圖案填充圖層

5.7批處理

5.7.1動作

5.7.2自定義動作

5.8專家支招

5.8.1如何提高圖像清晰度

5.8.2如何處理掃描圖像

5.9總結擴展

5.9.1本章小結

5.9.2舉一反三——批處理圖像

第6章網站頁基本元素設計

6.1圖示概述

6.1.1什麼是圖示

6.1.2圖示在網頁中的作用

6.1.3網頁圖示套用

6.2使用形狀工具繪製圖示

6.2.1矩形工具

實例繪製時鐘圖示

6.2.2多邊形工具

6.2.3形狀的路徑操作

實例製作常用網頁小圖示

6.2.4自定義形狀工具

實例繪製天氣圖示

6.3按鈕概述

6.3.1網頁中按鈕的常見類型

6.3.2網頁中按鈕的特點

6.3.3按鈕的設計要點

實例繪製質感網頁圖示

6.4圖層樣式的套用

6.4.1添加圖層樣式的方法

6.4.2斜面和浮雕

實例繪製網頁下載圖示

6.4.3描邊

6.4.4內陰影和投影

6.4.5內發光和外發光

6.4.6光澤

6.4.7顏色疊加、漸變疊加和圖案疊加

實例製作手遊開始按鈕

6.5LOGO概述

6.5.1LOGO作用

6.5.2LOGO特性

6.5.3網站LOGO表現形式

實例繪製影視網站LOGO

6.6專家支招

6.6.1圖示的檔案格式是什麼

6.6.2LOGO的設計流程是什麼

6.7總結擴展

6.7.1本章小結

6.7.2舉一反三——簡約網頁按鈕

第7章網站導航設計

7.1網站導航概述

7.2網站導航的作用

7.3網站導航的設計標準

7.4網站導航形式

7.4.1標籤形式

7.4.2按鈕形式

7.4.3彈出選單形式

7.4.4無框線形式

7.4.5Flash形式

7.4.6多導航系統形式

實例繪製漢堡包網站導航條

7.5網站導航位置

7.5.1頂部導航

7.5.2底部導航

7.5.3左側導航

實例繪製網站左側導航

7.5.4右側導航

7.5.5中心導航

7.6網站設計的輔助操作

7.6.1標尺的使用

7.6.2創建精確參考線

實例繪製精緻導航條

7.7專家支招

7.7.1導航條的設計原則是什麼

7.7.2互動式導航的優勢和劣勢

7.8總結擴展

7.8.1本章小結

7.8.2舉一反三——製作遊戲網站導航欄

第8章網站廣告設計

8.1網頁廣告條概述

8.1.1計算機端網頁廣告種類

8.1.2移動端網頁廣告種類

8.1.3廣告條常見尺寸

8.1.4網站廣告特點

實例招聘網站廣告條製作

8.2使用摳圖工具合成廣告條

8.2.1磁性套索工具

實例製作萬聖節廣告

8.2.2快速選擇工具

8.2.3魔棒工具

8.2.4鋼筆工具

8.2.5快速蒙版工具

8.2.6調整邊緣和精確選區

8.3修邊

8.3.1移除白邊和黑邊

8.3.2“去邊”命令

8.4畫筆工具

8.5圖層蒙版

8.5.1使用圖層蒙版替換局部圖像

8.5.2使用圖層蒙版融合圖像

8.5.3使用剪貼蒙版

8.6專家支招

8.6.1如何設計好廣告條

8.6.2網站廣告的表現形式有哪些

8.7總結擴展

8.7.1本章小結

8.7.2舉一反三——製作面膜網站廣告條

第9章移動端網站UI設計

9.1移動端城市App界面

9.1.1界面分析

9.1.2色彩分析

實例移動端城市App——廣告條

實例移動端城市App——主體

實例移動端城市App——底部

9.2移動端企業網站界面

9.2.1界面分析

9.2.2色彩分析

實例移動端企業網站界面——廣告條

實例移動端企業網站界面——主體

9.3專家支招

9.3.1回響式設計是否適合於專題設計

9.3.2先做計算機端頁面還是手機端頁面

9.4總結擴展

9.4.1本章小結

9.4.2舉一反三——移動端網頁宣傳窗

第10章計算機端網站UI設計

10.1計算機端視頻類網站界面

10.1.1界面分析

10.1.2色彩分析

實例計算機端設計類網站界面——頂部

實例計算機端設計類網站界面——主體

實例計算機端設計類網站界面——底部

10.2計算機端帥氣遊戲網站

10.2.1界面分析

10.2.2色彩分析

實例計算機端帥氣遊戲網站——頂部

實例計算機端帥氣遊戲網站——底部

10.3專家支招

10.3.1設計網頁之前需要做什麼

10.3.2網頁設計的發展趨勢是什麼

10.4總結擴展

10.4.1本章小結

10.4.2舉一反三——製作電腦端網頁宣傳欄