《Photoshop網頁設計與配色從新手到高手》以網頁平面設計及配色訓練為目的,培養讀者用Photoshop制作網頁的專業技能。《Photoshop網頁設計與配色從新手到高手》從初步的理論認識和設計知識的角度逐步把讀者引導到網頁配色的知識海洋之中,通過Photoshop的相關制作工具的學習,以及多個網頁元素、字體設計、網頁配色與頁面版式設計和合成,了解每個設計知識的難點,教會讀者在不同的環境、不同的場合設計中運用不同的配色原理,為今后的設計創作打下良好的基礎。另外,《Photoshop網頁設計與配色從新手到高手》贈送PPT課件、所有實例的視頻教學、案例素材以及海量學習資源等。 《Photoshop網頁設計與配色從新手到高手》適合網頁設計師、專業UI設計師,以及從事平面設計、廣告設計的人員學習參考,還可作為各類計算機培訓學校、大中專院校的教學輔導用書。
讀者對象
《Photoshop網頁設計與配色從新手到高手》適合網頁設計師、專業UI設計師,以及從事平面設計、廣告設計的人員學習參考,還可作為各類計算機培訓學校、大中專院校的教學輔導用書。
本書特色
★★以網頁平面設計及色彩配色訓練為目的,培養讀者豐富的感性知識和理性的專業知識。
★★通過圖片培養讀者的實際操作能力,將理論與實際相結合,注重讀者的思維、方法、技能的多向性及創造性思維的培養,獲得知識和能力的同步發展。
★★從初步的理論認識和設計知識的角度逐步把讀者引導到色彩設計配色的知識海洋之中。
★★贈送所有實例的視頻教學、案例素材和最終效果文件,《多色配色寶典》和《協調色配色寶典》電子書,以及海量設計資源(包括畫筆庫、形象庫、漸變庫、樣式庫、動作庫等)
前言
網頁設計與配色是視覺表達的一門重要的學科。色彩搭配結合了心理學和設計美學,對于網頁美工來講應該設計在先,制作在后。《Photoshop網頁設計與配色從新手到高手》結合色彩搭配理論進行網頁設計,對于廣大平面設計師起到一定的引導作用。隨著視覺品位及硬件技術的進步,網頁配色設計作為一門交叉性的學科,在現代設計中顯示了它驚人的力量。在人們的生存空間中,現代色彩設計已深入每個角落。網頁設計不僅僅體現在網頁的色彩搭配,還觸及各行各業,如城市規劃、視覺傳達設計、交通系統設計、工業設計、環境藝術設計、會展設計、建筑設計、景觀設計、公共藝術設計、舞美設計、家具設計、動畫設計等在網頁中的視覺展示。色彩在人的視覺中最敏感,它常常被稱為設計的第一視覺語言符號。不同的色彩能觸動人類不同的情感及聯想。
在設計基礎等基礎課程的教學中,我們不僅要培養學生良好的色彩感覺,并且還要求學生掌握理性配色知識,不停地去研究和揭示配色現象,不斷地開發配色表現的可能性,不斷地總結其規律,揭示配色表現的奧秘,極大限度地發揮設計色彩的表現力,將配色知識靈活運用于設計創作之中,這將是一個循序漸進、自然融合的過程。網頁平面設計中色彩之間的組合搭配具有一定的復雜性。《Photoshop網頁設計與配色從新手到高手》通過講述配色的形成、要素、規律等知識,著重講解色彩配色的實際運用規律,并且,在圖例的選取上特別考慮了平面構成設計課程的專業特點,針對剛進入設計類專業的學生,以提高其素質和能力的目的,使其初步掌握色彩的基本理論,從而學會欣賞及運用色彩,以打好扎實基礎,并培養實踐能力。
《Photoshop網頁設計與配色從新手到高手》以網頁平面設計及色彩配色訓練為目的,培養讀者豐富的感性知識和理性的專業知識。《Photoshop網頁設計與配色從新手到高手》中的百余幅圖片均是作者從世界優秀網頁作品中精選出來的。通過《Photoshop網頁設計與配色從新手到高手》的學習,培養引導讀者通過圖片的瀏覽去了解色彩配色的主要內容,強化對視覺心理的分析能力,把握處理設計圖形與色彩心理表現之間關系的能力,發揮讀者的視覺審美能力和藝術鑒賞能力。《Photoshop網頁設計與配色從新手到高手》旨在通過圖片培養讀者的實際操作能力,將理論與實際相結合,注重讀者的思維、方法、技能的多向性及創造性思維的培養,獲得知識和能力同步發展。《Photoshop網頁設計與配色從新手到高手》從初步的理論認識和設計知識的角度逐步把讀者引導到色彩設計配色的知識海洋之中。如果想了解相關的網頁色彩設計配色知識,也可以從書中的文字內容,了解每個色彩設計知識的難點。《Photoshop網頁設計與配色從新手到高手》將教會讀者在不同的環境、不同的場合設計中運用不同的配色原理,為今后的設計創作帶來一些借鑒及參考。
《Photoshop網頁設計與配色從新手到高手》贈送所有實例的視頻教學、案例素材和最終效果文件,《多色配色寶典》和《協調色配色寶典》電子書,以及海量設計資源(包括畫筆庫、形象庫、漸變庫、樣式庫、動作庫等),讀者掃描下方二維碼填寫相關基本信息后即可獲取相關資源。
《Photoshop網頁設計與配色從新手到高手》不僅內容豐富精彩,而且極富學習性。《Photoshop網頁設計與配色從新手到高手》適合網頁設計師、專業UI設計師,以及從事平面設計、廣告設計的人員學習參考。
《Photoshop網頁設計與配色從新手到高手》由沈陽化工大學工業與藝術設計系張帆(負責編寫1~4章)、陳英杰(負責編寫5~7章)和劉洋(負責編寫8~10章)老師編寫。
作者
2022年12月
張帆
沈陽化工大學,工業與藝術設計專業。曾教授課程《工藝美術史》、《工業設計史》、《中外美術鑒賞》、《中外建筑史》等。在藝術理論方面有有十分豐富的教學經驗。曾發表論文十余篇,參與撰寫著作6本。
陳英杰
沈陽化工大學工業與藝術設計系,環境設計專業。曾教授課程《計算機輔助設計CAD》、《計算機輔助設計3ds Max》、《博物館展陳空間設計》等,在室內設計方面有教學、工程實踐經驗。發表科研論文20余篇,中文核心論文2篇,獲授國家專利10余項。主持省級課題1項。出版著作7本。
劉洋
沈陽化工大學工業與藝術設計系,產品設計專業。曾教授課程《機電產品設計》《產品設計程序與方法》《汽車造型設計》等。 近年來發表科研論文 20 余篇,國家外觀專利 30 余項,出版過本科教材兩部,主編過《 Cinema 4D 完全實戰技術手冊》專著一部。 主持、參與省級、市級科研項目多項,多次指導學生在省級、部級專業設計競賽中獲得獎項。
目錄
第1章 網頁界面設計概述
1.1 了解網頁界面設計
1.2 了解網站頁面布局
1.2.1 網站頁面布局的目的
1.2.2 網站頁面布局的原則
1.3 根據整體內容位置決定的網頁視覺布局
1.3.1 PC網頁界面布局分類
1.3.2 手機網頁界面布局分類
1.4 如何制作出優秀的網頁界面
1.5 網頁設計師如何自我提升
1.5.1 形狀/輪廓
1.5.2 美術基礎
1.5.3 色彩識別
1.5.4 引導視覺
1.6 如何設計出更加友好的界面
1.7 網頁設計的基本要素
第2章 網頁界面設計基礎
2.1 了解網站設計
2.1.1 什么是網站設計
2.1.2 網站設計特點
2.2 網站設計構成元素
2.2.1 文字
2.2.2 圖形符號
2.2.3 圖像
2.2.4 多媒體
2.3 網站設計原則
2.3.1 視覺美觀
2.3.2 主題明確
2.3.3 內容與形式統一
2.3.4 有機的整體
2.3.5 PC網頁界面與手機界面的不同
2.4 網頁界面設計的原則
2.5 網頁界面設計師如何展示自身價值
2.6 網頁界面設計的流程
第3章 網頁界面設計的色彩理論
3.1 色彩意象
3.2 色彩的重要性
3.2.1 色彩的物理效應
3.2.2 色彩的心理反應
3.3 色彩的屬性
3.3.1 色彩的分類
3.3.2 色相
3.3.3 明度
3.3.4 飽和度
3.3.5 色調
3.4 色彩的搭配原則
3.4.1 色相配色
3.4.2 色調配色
3.4.3 明度配色
使用Kuler配色?3.5
3.6 找到完美的色彩搭配
3.7 色彩在UI設計中的作用
3.8 制作配色卡
第4章 Photoshop制作網頁編輯操作工具
4.1 Photoshop的工作界面
4.1.1 了解工作界面
4.1.2 了解工具箱
4.1.3 了解選項欄
4.1.4 了解狀態欄
4.1.5 了解面板
4.2 Photoshop的路徑與矢量圖形
4.2.1 了解繪圖模式
4.2.2 了解路徑與錨點的特征
4.2.3 熟悉路徑面板
4.3 實例:用畫筆描邊路徑
4.4 實例:創建曲線路徑并轉換為選區
4.5 編輯路徑
4.5.1 選擇與移動錨點、路徑段和路徑
4.5.2 添加或刪除錨點
4.5.3 改變錨點類型
4.5.4 方向線與方向點的用途
4.5.5 路徑的變換操作
4.5.6 對齊與分布路徑
4.6 繪制路徑
4.6.1 實例:繪制轉角曲線
4.6.2 鋼筆工具的選項欄
4.6.3 實例:創建自定義形狀
4.6.4 繪制基本形狀
4.6.5 使用鋼筆工具繪制中轉換折點
4.6.6 路徑快速轉換成選區的方法
第5章 網頁界面的平面圖標制作
5.1 Home圖標制作
5.2 日歷圖標制作
5.3 錄音機圖標制作
5.4 文件夾圖標制作
5.5 徽章圖形
5.6 秒表圖形
第6章 網頁界面設計的字效表現
6.1 星星字體
6.2 炫酷藍色金屬字體
6.3 立體巖石材質字體制作
第7章 網頁元素設計技巧
7.1 登錄界面
7.2 設置界面開關
7.3 通知列表界面
7.4 日歷界面
第8章 網頁版式設計經典案例:色系
8.1 黃色系列頁面設計
8.1.1 黃色色彩搭配的象征意義
8.1.2 黃色頁面設計案例校服品牌
8.2 綠色系列頁面設計
8.2.1 綠色色彩搭配的象征意義
8.2.2 綠色頁面設計案例多彩時尚
8.3 紅色系列頁面設計
8.3.1 紅色色彩搭配的象征意義
8.3.2 紅色頁面設計案例順滑絲巾
8.4 藍色系列頁面設計
8.4.1 藍色色彩搭配的象征意義
8.4.2 藍色頁面設計案例家電主頁
8.5 紫色系列頁面設計
8.5.1 紫色色彩搭配的象征意義
8.5.2 紫色頁面設計案例電茶壺廣告頁面
8.6 灰色系列頁面設計
8.6.1 灰色色彩搭配技巧
8.6.2 灰色頁面設計案例旅行頁面
8.7 黑色系列頁面設計
8.7.1 黑色色彩搭配技巧
8.7.2 黑色頁面設計案例旅行頁面
第9章 網頁配色設計經典案例:行業
9.1 慶典網頁配色設計
9.2 服飾網頁配色設計
9.3 箱包網頁配色設計
9.4 珠寶網頁配色設計
9.5 調味品網頁配色設計
9.6 活動網頁配色設計
9.7 玩具網頁配色設計
9.8 婚紗網頁配色設計
第10章 H5手機網頁整體設計
10.1 安卓手機整體頁面設計
10.2 蘋果手機整體頁面設計
10.3 微軟手機整體頁面設計
10.4 極簡風格頁面設計