Photoshop CC網站UI設計全程揭秘(第2版)/網頁設計與開發殿堂之路

作者：編者:趙中華
出版社：清華大學
ISBN：9787302526865

出版日期：2019/09/01
裝幀：平裝
頁數：246

人民幣：RMB 79.8 元售價：元

內容大鋼

    本書是一本關於網站UI設計的經典之作，以Photoshop CC為設計工具，對主流網站UI設計流程和製作技巧進行了全面、細緻的剖析。
    本書內容簡潔、通俗易懂，通過知識點與案例相結合的方式，讓讀者能夠清晰明了地理解網站UI設計的相關內容，從而達到學以致用的目的。全書共分11章，包括網站UI概述，Photoshop基本操作，選區、形狀和網站圖標，圖層與網頁中的按鈕，鋼筆、文字和網站導航，調整命令與優化圖像，設計網站中的廣告條，網站頁面的配色，網頁的版式和布局，移動端網站UI設計和商業網站綜合案例等內容。
    本書結構清晰、實例經典、技術實用，適合網站UI設計初、中級讀者，包括廣大UI設計愛好者、UI設計工作者，也可以作為高等院校UI設計課程的教材。

作者介紹

編者:趙中華

第1章  網站UI 概述
  1.1  了解網站UI
    1.1.1  什麼是網頁界面
    1.1.2  網頁界面的分類
  1.2  網站建設流程
    1.2.1  域名註冊
    1.2.2  購買虛擬主機
    1.2.3  確定網頁設計
    1.2.4  網站建設
    1.2.5  網站測試
    1.2.6  網站維護
  1.3  網頁設計的原則
    1.3.1  視覺美觀
    1.3.2  主題明確
    1.3.3  內容與形式相統一
    1.3.4  快速載入
    1.3.5  為用戶考慮
  1.4  網頁的構成元素
    1.4.1  文字
    1.4.2  圖像
    1.4.3  色彩
    1.4.4  多媒體
  1.5  網頁設計的命名規範
  1.6  移動端UI設計
    1.6.1  移動端UI設計概述
    1.6.2  移動端和PC端UI設計的區別
第2章  Photoshop基本操作
  2.1  Photoshop簡介
  2.2  Photoshop的安裝
    實例1——安裝Photoshop
  2.3  Photoshop 的文件操作
    2.3.1  新建文件
    2.3.2  打開文件
    2.3.3  保存文件
    實例2——製作簡單的網頁圖標
    2.3.4  修改圖像大小
    2.3.5  修改畫布大小
    實例3——製作藝術小網頁
  2.4  裁剪圖像
    2.4.1  裁剪固定尺寸
    2.4.2  透視裁剪
    2.4.3  裁剪獲得好的構圖
  2.5  圖像的複製和粘貼
    2.5.1  複製文檔
    實例4——製作網頁背景
    2.5.2  拷貝和粘貼
    實例5——製作網頁廣告插圖
    2.5.3  選擇性粘貼
    實例6——製作茶葉廣告
  2.6  變換圖像

    2.6.1  移動圖像
    2.6.2  縮放圖像
    2.6.3  旋轉圖像
    2.6.4  自由變換
    實例7——製作網頁廣告
  2.7  還原與恢復操作
第3章  選區、形狀和網站圖標
  3.1  網站圖標的設計準則
  3.2  網站圖標的設計流程
  3.3  規則選區創建標誌
    3.3.1  矩形選框工具
    3.3.2  橢圓選框工具
    實例8——製作簡單的Logo
    3.3.3  單行選框工具和單列選框工具
    實例9——製作簡單的音樂圖標
  3.4  填充與描邊改變圖標風格
    3.4.1  油漆桶工具
    實例10——製作絢麗彩塊圖標
    3.4.2  填充
    實例11——製作簡單的立體圖標
    3.4.3  描邊
    實例12——製作美妙的音樂圖標
  3.5  使用漸變工具增加圖標質感
    3.5.1  漸變的類型
    3.5.2  編輯類型
    實例13——製作可愛的小鳥圖標
  3.6  使用形狀工具創建圖標
    3.6.1  關於形狀工具
    3.6.2  多邊形工具
    實例14——製作質感圖標
    3.6.3  形狀的加減
    實例15——製作時尚按鈕圖標
    3.6.4  自定義形狀
  3.7  使用Color設置圖標顏色
    實例16——製作簡單鐘錶圖標
第4章  圖層與網頁中的按鈕
  4.1  按鈕的設計要點
  4.2  按鈕的應用格式
  4.3  使用圖案增加按鈕的質感
    實例17——製作水晶開關按鈕
  4.4  圖層的基本操作
    4.4.1  新建圖層
    4.4.2  複製圖層
    4.4.3  調整圖層順序
    實例18——製作Twitter按鈕
    4.4.4  使用不透明度和填充
    實例19——製作簡潔購買按鈕
  4.5  使用圖層樣式
    4.5.1  調整圖層樣式
    4.5.2  使用「投影」製作陰影效果

    4.5.3  使用「描邊」為按鈕添加輪廓
    實例20——製作簡單可愛的按鈕
    4.5.4  使用「斜面和浮雕」製作立體效果
    實例21——製作數據統計按鈕
    4.5.5  使用「內陰影」增加層次
    實例22——製作圓形立體按鈕
    4.5.6  使用「內發光」和「外發光」製作發光效果
    實例23——製作逼真的皮革按鈕
  4.6  使用畫筆工具細化按鈕
    4.6.1  使用畫筆工具
    實例24——製作蘋果應用商店按鈕
    4.6.2  設置畫筆預設
  4.7  圖像的變換操作
    4.7.1  圖像的翻轉
    實例25——製作音量開關按鈕
    4.7.2  透視和扭曲
    4.7.3  變形
第5章  鋼筆、文字和網站導航
  5.1  導航和菜單的作用
  5.2  導航的設計標準
  5.3  網頁設計的輔助操作
    5.3.1  使用標尺
    5.3.2  創建精確的參考線
    實例26——製作簡潔導航菜單
  5.4  修改選區
    5.4.1  羽化選區
    5.4.2  擴展/收縮選區
  5.5  加深和減淡修飾
    5.5.1  加深工具
    5.5.2  減淡工具
    實例27——製作創意音樂網站菜單
  5.6  使用鋼筆工具繪製精確的形狀
    5.6.1  使用鋼筆工具
    實例28——製作復古導航條
    5.6.2  路徑與選區的轉換
    5.6.3  使用畫筆描邊路徑
    實例29——製作帥氣遊戲網站導航
  5.7  使用文字工具
    5.7.1  輸入文字
    5.7.2  設置文字
    實例30——製作時尚導航菜單
  5.8  快速對齊對象
    5.8.1  對齊對象
    5.8.2  分佈對象
    實例31——製作漂亮的圖片式導航
第6章  調整命令與優化圖像
  6.1  網站中的圖像簡介
  6.2  網站使用的圖片格式
  6.3  網站中的圖像模式
  6.4  使用圖章工具為圖標添加效果

    6.4.1  使用仿製圖章工具去除圖像中的水印
    實例32——去除圖像中的瑕疵
    6.4.2  使用圖案圖章工具製作網站背景
  6.5  修復網頁中的圖像
    6.5.1  使用污點修復畫筆工具
    實例33——去除臉部的裝飾
    6.5.2  使用修復畫筆工具
    6.5.3  使用內容感知移動工具
  6.6  自動調整圖像顏色
    6.6.1  自動色調增強圖像清晰度
    6.6.2  自動對比度增強圖像對比度
    6.6.3  自動顏色校正圖像顏色
  6.7  自定義調整圖像色彩
    6.7.1  使用「曲線」調整命令
    實例34——使網頁更加鮮艷
    6.7.2  使用色階提高圖像清晰度
    6.7.3  使用「亮度/ 對比度」調整圖像
    實例35——使圖像更清晰
    6.7.4  使用「色相/ 飽和度」調整圖像
    6.7.5  使用「自然飽和度」調整圖像
    實例36——製作酷炫圖片
    6.7.6  使用「陰影/ 高光」命令修正圖像的逆光
    實例37——修正逆光的圖片
  6.8  使用填充和調整圖層
    6.8.1  純色填充圖層
    6.8.2  漸變填充圖層
    6.8.3  圖案填充圖層
    實例38——製作炫彩網頁
    6.8.4  調整面板
    實例39——製作黑白色圖像
  6.9  銳化提高圖像清晰度
  6.10  處理掃描圖像
  6.11  批處理圖像
    6.11.1  使用動作面板
    6.11.2  自定義動作
    實例40——批處理圖像
第7章  設計網站中的廣告條
  7.1  網站廣告條的類型
  7.2  廣告條的常見尺寸
  7.3  如何設計好的廣告條
  7.4  完美摳圖合成廣告條
    7.4.1  磁性套索工具摳圖
    實例41——製作果盤廣告條
    7.4.2  快速選擇工具
    實例42——製作美食廣告條
    7.4.3  使用魔棒工具
    7.4.4  使用鋼筆工具
    實例43——製作薯條廣告
    7.4.5  快速蒙版選擇圖像
    實例44——製作服裝廣告條

    7.4.6  「選擇並遮罩」選項精確選區
    實例45——製作精美女裝廣告
    7.4.7  焦點區域
  7.5  使用修邊
    7.5.1  移除白邊和黑邊
    7.5.2  去邊實現更好的合成效果
    實例46——製作時尚服裝廣告條
  7.6  使用畫筆工具繪圖
    實例47——製作禮物宣傳廣告條
  7.7  使用蒙版合成圖像
    7.7.1  圖層蒙版替換圖層局部
    7.7.2  圖層蒙版融合圖像
    實例48——製作快餐店廣告條
    7.7.3  使用剪貼蒙版
    實例49——製作畫廊展覽小廣告
第8章  網站頁面的配色
  8.1  色彩基礎知識
    8.1.1  光和色的三原色
    8.1.2  色彩的類型
    8.1.3  色彩的構成要素
    8.1.4  色彩的混合
    8.1.5  色彩的分類
    8.1.6  不同的色系
  8.2  色彩的視覺心理感受
    8.2.1  色彩的輕重
    8.2.2  色彩的冷暖
    8.2.3  色彩的軟硬
    8.2.4  色彩的大小
    8.2.5  色彩的活潑和莊重感
    8.2.6  色彩的興奮和沉重感
    8.2.7  色彩的華麗和樸實感
  8.3  網頁配色標準
    8.3.1  Web安全顏色
    8.3.2  使用Web安全色調色板
  8.4  網頁配色技巧
    8.4.1  色彩搭配的原則
    8.4.2  確定網頁主題色
    8.4.3  正確選擇文字的顏色
  8.5  網頁風格與配色
    8.5.1  暖色調配色
    8.5.2  冷色調配色
    8.5.3  穩定、安靜風格的配色
    8.5.4  發揮白色效果的配色
    8.5.5  高彩度的配色
  8.6  影響網站配色的因素
    8.6.1  根據行業特徵選擇網頁配色
    8.6.2  根據生命周期選擇網頁配色
    8.6.3  根據色彩聯想選擇網頁配色
    8.6.4  根據受眾色彩偏好選擇網頁配色
第9章  網頁的版式和布局

  9.1  常見的網頁布局方式
    9.1.1  「國」字型
    9.1.2  拐角型
    9.1.3  標題正文型
    9.1.4  左右框架型
    9.1.5  上下框架型
    9.1.6  封面型
    9.1.7  動畫型
    9.1.8  變化型
  9.2  文字在網頁中的作用
    9.2.1  明確性
    9.2.2  易讀性
    9.2.3  美觀性
  9.3  網頁文字的設計原則
    9.3.1  可讀性
    9.3.2  藝術化
  9.4  網頁文字的排版設計
    9.4.1  文字排版規則
    9.4.2  文字排版的常用手法
  9.5  根據內容決定布局方式
    9.5.1  左側的頁面布局
    9.5.2  水平居中的頁面布局
    9.5.3  水平和垂直居中的頁面布局
    9.5.4  滿屏的頁面布局
  9.6  頁面分割方式
    9.6.1  橫向分割
    9.6.2  縱向分割
    9.6.3  縱向橫向複合分割
    9.6.4  運用固定區域
  9.7  頁面布局的連貫性和多樣性
    9.7.1  連貫性
    9.7.2  多樣性
第10章  移動端網站UI 設計
  10.1  移動端UI 設計基本概念
    10.1.1  關於手機
    10.1.2  移動端界面設計原則
    10.1.3  移動端UI 設計流程
  10.2  常見的手機系統
    10.2.1  蘋果系統(iOS)
    10.2.2  安卓系統(Android)
  10.3  iOS 系統界面設計
    10.3.1  iOS App 設計概述
    10.3.2  iOS 系統界面設計規範
    實例50——繪製iOS App界面的頂部和底部
    10.3.3  iOS 圖標設計
    實例51——繪製iOS App界面的主體
  10.4  Android 系統界面設計
    10.4.1  Android App UI概述
    實例52——繪製Android個性主界面
    10.4.2  Android App界面設計原則

    10.4.3  Android App界面設計風格
    10.4.4  控制項設計
    實例53——繪製Android選項卡的頂部
    10.4.5  Android 圖標設計
    實例54——繪製Android選項卡的主體
  10.5  移動端與PC端網頁UI的區別
    10.5.1  界面不同
    10.5.2  位置不同
    10.5.3  操作習慣不同
    10.5.4  按鈕狀態不同
    10.5.5  信息布局不同
第11章  商業網站綜合案例
  11.1  製作兒童類網站
    11.1.1  行業分類
    11.1.2  色彩分析
    11.1.3  版式分析
    實例55——兒童類網站的背景和導航
    實例56——兒童類網站的主體和Logo
    實例57——兒童類網站的切圖
  11.2  製作手機購物網站
    11.2.1  行業分類
    11.2.2  色彩分析
    實例58——手機購物網站的商品展示頁
    實例59——手機購物網站的切圖

同類熱銷排行榜

最近瀏覽的商品

Photoshop CC網站UI設計全程揭秘(第2版)/網頁設計與開發殿堂之路