1.飽和度高，明度中間，刺激大；飽和度中間,明度高,刺激小
2.色相飽和度改變的是它的下面一個圖層
3.飽和度越高色彩越亮，飽和度最低變成灰色
4.明度越最高越靠近白色，越低越靠近黑色
//混合模式
正片疊底:白色消失,其他顏色加深.黑色看不出變化
同原色疊低:協調融合美
重復正片疊底：正片疊底，畫面更清晰
／／變傾斜
ctrl＋t －> ctrl 鼠標拖拽上邊屆中心的點
減去選區:alt
10 banner
15摳圖
10海報
背景為灰色怎么處理
調節色階
內容區（主頁banner）
天貓 990 方正
淘寶 950
文字框寬1000之內
京東:漢儀字體
聚美:冬青 數字,英文:nobel
比例，破型， 減弱
海報尺寸：1920*500-600
畫筆工具，按住alt 快速切換吸管工具
把字體嵌入到圖片上,使圖片鏤空:
在需要鏤空的形狀上面添加蒙版,將想要的字體加載成為選取,關掉小眼睛.回到蒙版上,填充黑色
全景網 視覺中國 500像素 可下載圖片
千庫 png psd格式
黃蜂 電商淘寶
攝圖網,花錢下載
通道的黑白灰,黑色表示有油墨(有顏色),白色表示沒有油墨(沒有顏色)
選區以內的在新建蒙版的時候自動填充白色,之外的填充黑色,刪除
填充只影響當前圖層,不影響效果; 不透明度,影響圖層和效果.
ctrl +altshift+t
濾色：既能看見本圖層的圖片，也能看見下一層的圖片
宋體也叫襯線體:有裝飾
黑體也叫非襯線體:簡潔,無裝飾
曲與直:圓潤-剛健
松散與嚴謹:隨性(識別性低,適合小孩子)-莊嚴(適合閱讀)
簡與繁:古典-現代
chen via
粗細對比:同一字型,字體大小一致
字型對比:襯線體與非襯線體(宋體-黑體)
疏密對比:大標題:密集,輔助信息:稀松
蘭亭，冬青，思遠：有細體
ctrl＋t 調出字符
去色:ctrl + shift + u
返選:ctrl + i
A4 厘米：21*28.5,豎向 打印->分辨:300 顏色:cmyk 小字：8-10號
ctrl ＋ 回車，結束文字工具
Arial:相當于中文中的微軟雅黑：后面有字體樣式
Book:古羅馬字體,襯線體
Times:羅馬體,宋體,襯線體
在移動工具上,ctrl + 拖拽,框選
所有小字用”微軟雅黑細體,或思源體正常”
alt + 上下箭頭調上下字間距 ; alt + 左右箭頭調左右字間距
詳情頁
淘寶，京東 寬：750
天貓：790
聚美 寬：790
手機端 寬:640px
調整邊緣：ctrl ＋ alt ＋ r
京東拿大圖的方法
右鍵－>新標簽頁打開圖片->地址欄的n5改為n12
天貓
右鍵－>新標簽頁打開圖片->地址欄的6060改為800800
淘寶
店招：1920120px
導航：192030px 字號：18-20
寬：950
輪播圖banner：1920（900）＊550-650
優惠券在輪播圖下
天貓：990
淘寶－20；天貓－10 代碼：height:973
<div>:height:-20
聚美：字體：冬青
本單詳情：寬790px 高不限，
手機端：優惠券：152*152（四個小塊的）
海報：608px
蓋印：ctrl ＋ alt ＋ shift ＋ e
中性灰：808080
=========================================================
1.＝＝＝＝＝＝＝＝＝＝
網站界面設計規范
頁眉/banner(廣告區)/內容區/頁腳
運營或文案（提供文案信息，廣告區banner的文案）－> 產品經理（網頁原型圖）－>網頁設計師（界面視覺設計）－>前端開發
常用尺寸:19201080 1366768 1440900 1024768
頁眉+banner 盡量720以內 不要超過800
搜索+導航+瀏覽器高度<200
搜索:30
導航:100
字號:正文中文14(英文16),最小12
主導航:20 24
按鈕:18 20 24?
UI設計
字體:Mac-ios:蘋方常規 蘋方中黑 蘋方系列
Windows-Android:黑體 宋體 微軟雅黑 思源黑體
網站設計主要尺寸:1440900 19201080
常用設計尺寸集合:
常見企業類網站:1176 1170
電商購物類網站:1224 1220
新聞行業門戶類:980
游戲娛樂:1600
圖片大小：根據網格定寬，根據信息內容定高
icon最小: 20*20
字體大小
標題文字:+4 +6 20 22 24
內文:-4 -2 20
最小樓層高度:56 ->56+8 … （有色?（比無色大），無色）
網站設計基準尺寸:設計區/畫布大小
2.＝＝＝＝＝＝＝＝＝＝
視覺設計規范
網頁的網格系統:6列/12列(常用)/24/列
網格系統/柵格好處
視覺:畫面整齊
適配上:大型電商網站更容易,好控制
網站視覺布局規范：
先整體后局部（以用戶的使用習慣為主）
布局中的最重要概念是“盒子模型”
包含東西：盒子
不包含東西：內容
頁眉設計
寬度：滿屏
高度：200以內
設計的內容：品牌logo，主導航（100左右），副導航（30左右）以及聯系方式，搜索，輔助功能性導航鏈接
導航功能：明顯 明確 便捷 易用
全局導航：也叫主導航
局部導航：副導航（下拉菜單，或在一邊）
實用性導航：標識鏈接，搜索引擎，網站地圖 （類似書籍目錄）
頁腳：
頁眉與頁腳的區別：
1.頁眉承載了整個網站的主要功能
制作時更突出
放置重要鏈接
2.頁腳放置輔助信息
導航表現形式：
1.菜單 2.鏈接文本 3.按鈕 4.面包屑 5.標簽 6.圖片 7.圖標
導航設計形式上的3個要點：采用標準控件；重視導航、選項、內容的默認狀態；用戶切換功能的狀態
頁腳的設計
高度：無要求
內容：法律條款聲名、版權信息、企業名稱以及聯系方式、搜索以及關聯性的頁腳導航和輔助信息。
內容：從上到下，左到右
網頁板式（形式）：
1.一欄版，沒有分隔，不受限制，尤其是智能手機和平板更適合。目前應用最多的
2.兩欄版，在內容區域的旁邊分割出輔助區域（導航，廣告...）增加實用性
3.三欄版，內容的左右個增加一個輔助區域，適合在電腦和平板橫向放，不能在職能手機上使用
3.＝＝＝＝＝＝＝＝＝＝
網站的流程
1.低保真(黑白圖)->2.視覺規范->3.競品分析(優勢,劣勢) 分析報告->4.效果圖(最終視覺稿)
第一步和四步設計師主要做的
電商類網站:大型(淘寶天貓京東)130-300個頁面(普通:70-90)
企業類網站:20-左右個頁面
房產(有交互):70-90
UI:視覺 界面
UE:交互 交互邏輯和體驗感
GUI:視覺+體驗感會AE(做動效)
banner構成:1.背景 2.主體 3.文字 4.裝飾(簡單無裝飾)
背景根據產品文案來選擇；根據產品擴展思路，找出適合產品的元素，根據所學的美學知識進行搭配。
banner分為兩類:
1.元素整合流
2.光影寫實流
4.＝＝＝＝＝＝＝＝＝＝
字體的分類：
（1）男性字體：粗曠，硬朗，強勁有力，拐角分明，力量感。（非襯線黑體中的粗體）
運動類、男性的日用品、競技類、搖滾、體育用品、營銷活動、
金屬......
（2）女性字體：正方中倩簡體、方正正纖黑簡體、張海山銳線體簡、蘭亭黑－簡（帶襯線）
愛情、女性雜志類、
（3）孩童：方正準圓簡體、造字工房悅黑GOVI、華康海報體W12(?P)、圓體－簡
趣味游戲、嬰幼兒產品、游樂園、文具
（4）中性：干凈、簡介、中性美、精致、平靜
冬青黑體簡體、方正蘭亭黑_GBK、微軟雅黑、方正正黑簡體（大部分非襯線體，相對細，看著清晰，辨識度高）
介紹功能的、app、說明書、企業網站頁面、科技、手機、電腦、性別屬性不強、并不需要強烈的情感特征
5.＝＝＝＝＝＝＝＝＝＝＝＝＝＝
（1）網格搭配模式
導航－>文字疊加的banner－>網格（2至4列不帶圖標的圖片）－>主題區域－>頁腳
?（2）單頁設計
導航－>以圖片為主的主圖區（沒banner）－>頁腳（留白多）
?（3）經典的f式布局
靠右常為側邊欄，展示相關的鏈接－>頁腳
（4）自定義柵格（常用于個人網站）
導航－>柵格（呈現大量視覺內容，以圖片為主）->頁腳
（5）極簡分層（蘋果多）
導航->輪播圖banner->主題區域->頁腳
（6）瀑布流布局（可以沒頁腳）
輕量級頁頭->多欄瀑布流展示->
（7）單頁分塊布局
一塊一塊的全部是一樣的
5.配色====================
主色 輔色 裝點色
主色：移動端和網站 用在結構＋裝飾上 運營logo的顏色為主色 為了統一產品的傳播性 banner構成( 背景 文字 主體 裝飾)
主要的三對互補色:紅綠,藍橙,黃紫
6.網站制作流程===================
(1).產品經理給框架圖(競品分析)->視覺規范->框架調整->最終視覺稿
標注：文字的大小、顏色、各種間距、圖片的尺寸
跟程序的對接：一份標注、一份切圖
7.透視＝＝＝＝＝＝＝＝＝＝＝＝
近大遠小；近實遠虛
8.做網站時,當信息較多時用文字而不是用圖片,一行最多放6個
9.網站的設計風格============================
設計覺風格（內在氣質）
視覺元素（外在形象）
（氣質決定形象，形象塑造氣質）
界面的風格由界面的元素展現出來
扁平風，擬物風，極簡風（大量留白，蘋果官網），雜志風（柵格布局，更注重排版）
單頁網站（長度很短只有一頁，就會分也），單屏滾動（側邊切換，也是一屏），超大背景（一張大圖疊字）
（以上兩排位現在比較常用的風格）
文字藝術，像素風格，視頻背景，3d圖形，繪畫風格
網站并不是只有一種風格，更多的事兩到三種混搭
10網站界面色彩=＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
紅綠，藍橙，黃紫（反差色）
色彩搭配分類：同源色，反差色（對比色，互補色），百搭色（黑白灰）
?（紅＋黑［高貴］ 黃（亮黃）＋黑［時尚］）很好看
同源色
反差色
百搭色
綠色：中性色，平靜溫和，安全信賴，豐富活力，自然生命。
深綠：沉穩，與財富聲望有關
嫩綠：生機生命
================== APP ====================
ios主流級型分辨率：1136640 （5s，5） 1334750（6s，6）［常用重要］ 2208*1242（plus）
安卓的單位名稱：dp距離的單位；sp字號
iOS的單位名稱：pt磅
APP柵格規范：
Android界面的最小間距是8dp（16px），而規范的圖像資源尺寸為16dp，24dp，32dp，48dp的序列均可被8整除，采用8dp為柵格
布局規范的目的：更符合程序、不同機型適配過程，信息還原的更好,畫面不失真。
手機端菜單欄文字：最小18px（常用20px），英文20px
圖標icon：最小40px＊40px；菜單欄下最小icon48px＊48px
安卓與ios最大的區別，安卓有物理控件（返回），ios沒有
iOS常用扁平化，安卓常用微立體
一級導航“菜單欄”：有5種形式
1.標簽式導航（ios常用模式）,直觀了解當前位置，快速切換，直觀了解當前頁面的功能
2.抽屜式導航（安卓常用），一般是隱藏的，可以放很多東西，但是切換很不方便
3.下拉式導航：頂部或底部彈出頁面（手機通知）
4.點聚式導航：點擊左下按鈕打開，再次點擊收起
5.桌面式導航：可擴展性好
二級導航：3種
1.tab式導航：圖片2-4，文字5-7 可用下拉箭頭，圖片頁面跳轉，文字切換效果
2.列表式導航：設置里居多，通欄帶圖標
3.左右幻燈片式導航：需要添加動畫來增添樂趣
常用標題字號：20，28，24
最小觸控范圍：88px，7mm
大間隔，隔功能：40常用
小間隔，隔相同功能中的信息：小功能：24，大功能：40
數字最小18px，漢字最小20px；
安卓
導航上一排文字：36px（標題）、34px（返回），兩?（三）排文字28px
內文：34（標題），28
iOS中圖標最小2px，下線（長的）1px，下劃線4px
圖標：沒點擊2px；點擊3px，
面是正，線是負
分欄（斑馬線）：分功能，最好不超過三欄
分割線：分內容
最小圖標：40*40；
圖標與圖標距離：24px、或一個圖標的距離
圖標與文字距離：16＋（返回按鈕與文字）
欄高一定大于88px＋（因為點擊大小最小為88）
＝＝＝＝＝＝＝＝＝＝＝＝切圖＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
命名規范：模范類別功能狀態.png
舉個例子：Nav_button_search_nor.png
導航按鈕搜索默認
注意：用下劃線，用英文，無空格
iOS
項目名稱V3.2
Picture resources（切片資源）
images(icon文件和切圖文件夾) 東西少都放在images里，文件夾@2（a_icon a區），@3
Common resource(共用資源（導航、標簽）)
Common home（公司首頁）
Common home（聯系人）
啟動頁/閃屏:簡潔明了 logo、廣告語、文字、圖片
圖片為主，logo在圖片下方
logo為主，最下方可放 版權信息（下方98以內，不帶logo的，帶 logo的放在98以外）
使用應用logo可口號作為元素，傳遞品牌信息
使用情境化的啟動頁，引起情感上的共鳴
感情故事類，畫面具有一定暗示性，溫婉的表達出情感
節日氛圍類
廣告類
引導頁
3-5頁
功能介紹類、使用說明類、情懷類、問題解決類
前置性引導，過程中引導
通訊類：情感類（圖片渲染）
功能性產品：功能介紹
痛點渲染
角色榜樣類比
人類短時間能記憶的不超過9個，一般2-7容易記住，可通過斷句將長的文案變成短的，可通過“打標點，留空格，斷行”
字體設計
斷－舍－離
斷筆：橫斷、豎斷、斜斷
筆刷：
.abr筆刷 .tpl工具
畫筆－>工具->載入
＝＝＝＝＝＝＝＝＝＝＝＝網站專題＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
品牌頭圖－>優惠券->產品列表
頭圖：主視覺、logo、導航、banner
優惠：活動優惠券、兌換碼
產品：主推產品、爆款產品、產品列表
關聯：銷售情景演繹、企業介紹
專題頁規范：
電商平臺常用尺寸1200或1224，為了方便使用12列網格，建議采用1224（京東）
網站專題分類：
專屬活動專題、產品展示專題、活動＋產品專題
AE
design:預合成(AE畫布)
文件夾:圖片png,原圖
位置:P
縮放:S
透明:T
旋轉:R
錨點:A
緩動:F9(FN+F9)動畫曲線
顯示關鍵幀:U
渲染：ctrl+com+m
前一幀:J
后一幀:K
mask遮罩:
文件－>整理文件－>收集文件－>全部
導入ps文件：
二維碼大小：
草料生成器：容錯7 格式：svg
最低：2121
最高 177177
碼眼／定位
[圖片上傳中...(WechatIMG132.jpeg-a4a57f-1514291711291-0)]
黑色＝1 白色＝0
黑白二維碼制作：
1.草料二維碼生成器 https://cli.im/
容錯7%，大小隨意->其他格式SVG->下載
2.aI打開.取消編組，將最外層邊框刪除
選中剩下的二維碼->菜單欄的“變換”->寬高1450px1450px
改變畫板大小，降低透明度，鎖定
3.打開對齊智能對象，新建圖層，建20px20px的圓形，對齊第一個方塊
4.選中圓形->右鍵變換->移動
ctrl+d進行重復上一步，直到第一行結束
選中第一行編組，再次選擇移動
ctrl+d重復上一步
5.新建圖層畫出碼眼的位置，產出碼眼位置的原二維碼圖層
6.將圓形圖層改為紅色。
新建空白圖層“圖層4”->選中原二維碼圖層ctrl+c->回到新建的圖層4 ctrl+shift+v原位粘貼->將不透明度調為100%純黑色
7.選中紅色圖層ctrl+c復制->回到新建的圖層4 ctrl+shift+v原位粘貼；選中所有紅色圓點ctrl+8建立符合路徑
8.（！6.7步的操作順序有可能不同，保證紅色的圓點在頂層即可）
選中整個圖層的內容->右鍵->建立剪切蒙版
9.將紅色圖層的顏色調為白色，調整圖層順序，放在圖層4下面
10.這是可在網上找一張黑白的圖片，在這兩個圖層下面新建一個圖層5，將找到的圖片放到圖層5上即可；
AE:
幀融合：
運動模糊：
調整圖層：
調整圖層只影響它下面的圖層
將調整層放大后的效果
3D圖層：
