一個前端所需具備的PS能力

前端網頁設計+靜態實現案例

放一個2天半內給某公司完成的（設計 + 靜態實現）的案例吧，靜態陰影用CSS3實現的http://www.cnblogs.com/MuYunyun/p/5693615.html，我最開始設計的時候就想好要用什么實現，各個框的大小是多少（精確到1像素），以及顏色搭配等等。

還有很多素材我就不演示了，設計了好些網頁模板，如果有大家想用PS進行網頁制作，歡迎大家交流。

很多人做前端只是掌握了最基本的切圖（甚至連切圖都有不會的），就連小小改動都要麻煩設計師，這就大大浪費了時間的。

回到頂部(go to top)

練習時候做的

都是我的朋友啦（O-O）

回到頂部(go to top)

關于PS學習

現在我要分享下如何學習PS的。

1.首先我想說的是要對它有興趣（這是廢話）。能惡搞別人誰沒有興趣。。

2.不要相信說一個星期速成之類的鬼話！我是把慕課網的全部PS教程全部過了遍，而且每個素材都練過！！不會就反復看然后自己找素材練習。有時候弄一張圖就花了半天以上。沒2個月根本學不到PS的精髓，別談創新運用了（個人看法）。如果你單純只要學會切圖就當我沒說，我只是想說只學切圖會讓你覺得PS怎么這么無聊。

3.我感覺PS簡單又不簡單，有時就相差那么點色差，或者明度。

4.多看大神P的圖，找靈感，找素材。盡管我們是前端，我們要設計，后臺都要懂些，這樣子我們才能效率更高。

回到頂部(go to top)

很久以前的PS筆記

圖片名字 顯示比例 色彩模式 顏色深度

alt+t:選著圖形可以使之變形

1. 2寸照片 放在5寸紙上 2.大頭貼

裁切工具：1.斜著的路標裁切 2.使不水平景色的水平①（旋轉裁切）
② 使用尺子

移動工具：1.使兩或者多張圖片復原
△：Ctrl：移動選區 Alt：復制后移動選區

選區工具：1.鏡子手表中插入臉蛋 2.二郎神的第三只眼
△:shift 選正圓 或正方形
3.去LOGO 補破照片 去護欄等等 
①選區 移動（優點：快）
②選區 alt+c alt+v 或者 選區 alt+j點圖層（優點：不影響原圖層）

容差：越小則越嚴 越大則越松

描邊 可以做頭頂光環

填充+羽化可以①使武器、燈塔等發出炫彩的光 
②制作投影

圖像的變形：①把海報放到路邊（透視）
②把人臉映到葫蘆里（葫蘆娃）（變形）
③阿拉丁神燈（變形）
④把鐘表映到橘子中 （扭曲）
⑤把圖片映到茶杯上(變形）
shift+ctrl+alt+t:復制并重復上一次的移動 ①做扇子
②正方形里放正方形
擴大選取：連續（相當于魔術棒連續）
選取相似：不連續（相當于魔術棒不連續）

不透明度越高越實，
不透明度越低越虛。

ctrl+n:復制原來的選區到新定義的圖紙（參考日光改月照）

圖層保存：可以用“圖案保存”

漸變工具：①彩虹橋 彩虹（線性漸變 徑向漸變）
②光線渲染（徑向漸變）
③制作光盤（直角漸變）
④水晶球（徑向漸變+線性漸變）
⑤彩虹戒指（ctrl+up然后alt+up）（線性漸變）

直方圖：①曝光不足 ②曝光過度 ③反差不足（色調均化） ④反差過度
（具體情況選具體方法）

色階：黑場白場同時往里壓增加對比度，輸出色階同時往里壓降低對比度。
灰場（照相機里面的“白平衡”）
①黑白照片上色
②云朵變色

曲線：斜率越高對比度越高，斜率越低對比度越低
①進行各部位的美容（頭發、眼睛、皮膚、嘴、衣服）
②修改云的顏色

ctrl+j = ctrl+c然后ctrl+v

匹配顏色；①面若“桃”色

進階教程

RGB（色光混合）越加越亮
CMYK（顏料混合）越減越暗
C（青）M（品）Y（黃）K（黑色）顏色模式

紅黃綠青藍紫
紅+綠 黃
紅+藍 紫
藍+綠 青
紅+綠+藍 白
黃+青+紫 黑

移動工具：（對齊 分布的功能）
①快速作張信紙（ctrl減去某個圖層）

裁剪工具：shift+o:變換輔助線

人臉美白（污點修復畫筆工具，修復畫筆工具）
修復畫筆工具：alt取樣

紅眼工具（使紅眼變黑）

鉛筆工具：可以作出像素字（1像素 shift）

仿制圖章工具和修復畫筆類似

歷史記錄藝術畫筆工具：馬賽克作用

鋼筆工具：ctrl選擇， alt調整
（錨點兩側都調整） （錨點一側調整）
路徑選擇工具：移動選擇路徑
直接選擇工具：alt復制并移動

路徑實例（制作表盤）

shift+ctrl+alt+e:合并可見圖層為一個新圖層

蒙版：shift：停用蒙版（換臉術）
alt：查看蒙版

PS高級教學

（范冰冰素材）：1.左腮偏大 2.嘴唇顏色不夠鮮艷 3.黑眼圈 4.勁紋

步驟1：液化（解決左腮）
步驟2：模糊工具（處理黑眼圈、處理下嘴角，勁紋）
步驟3：加深工具（處理眉毛、圖顯雙眼皮睫毛）
步驟4：減淡工具（鼻梁處高光部位涂抹，增強立體感）
步驟5：曲線（增強對比度）畫筆（涂口紅）涂抹工具

ps之臉型篇：女的可以少一些，但是男生的臉一定要有棱角。

普通照片變為卡通動漫效果：
1.液化：凍結區蒙版（保護區域不受變形影響），膨脹工具（放大眼睛）
2.添加純色調整圖層（白色，50%不透明）（圖片比較暗的時候用）
3.新建圖層，鋼筆工具畫出眉毛，路徑填充
4.鋼筆工具勾出側臉輪廓
5.描邊路徑 畫筆工具（硬圓3px）
6.特殊模糊
7.模糊工具（清楚特殊模糊塊狀痕跡）
8.畫筆工具（涂抹原來的眉毛），加大畫面對比度
作品：媽媽、吸血鬼

高反差保留磨皮：
1.通道-創建藍副本（藍的對比度最明顯）
2.濾鏡-高反差保留 
3.圖像-計算（2、3次）
4.ctrl：選擇高光 反選
5.圖層面板-新建曲線圖層（處理到這里算結束，后文細節處理）
6.shift+ctrl+alt+e - 復制圖層兩次 - 
一個副本進行表面模糊處理（處理鼻子上的汗水），
另一個副本進行高反差保留（提取皮膚紋理，還原上步模糊的一些線條）-線性光

內容識別比例：保護人物或者自己設計的某些部分不受影響
①不變的人和酒
②長高的美女

中性灰磨皮：（這種磨皮能使皮膚保留真實感）（1到5個小時）
1.新建圖層
2.編輯-填充50%中性灰(模式為柔光)
3.觀察組{
新建純色調整圖層，顏色為黑色（模式為顏色）
復制黑色調整圖層，（模式為疊加）
}
b、選擇直徑在7像素以下的柔角畫筆，畫筆不透明度設置為：5%，流量為：50%，放大畫布至500%。
　　c、設置前景色為白色，以單個像素為單位輕擦中灰層中較暗淡部位，使其與周邊過渡均勻。設置前景色為黑色，以單個像素為單位輕擦中灰色層中較明亮部位，同樣使其與周邊過渡均勻。
　　d、增大畫筆，配合黑白前景色輕擦明暗過渡區域，使明暗之間平緩過渡。
　　e、縮小畫筆，配合黑白前景色輕擦眼黑與眼白，并用白色畫筆擦亮眼神光

人物上寫字：
一：打開要處理的素材，然后Ctrl + L 打開色階調整人物的明暗度
二：然后菜單—-濾鏡—–素描—-便條紙
三、確定之后，Ctrl+Alt+2 把人物高光提出來部分，按Ctrl+Shift+i 反選一下，再按Ctrl+J 創建一層圖層出來
四：大字、小字
五：漸變
六；然后在圖層2白×××層上面新建一個空白圖層，按Ctrl點擊圖層1 載入選區，然后給這個新圖層拉一個漸變，漸變色用，我們剛剛給人物用的那個顏色。完成之后再—-濾鏡—-模糊—高斯模糊

寫輪眼：B6414F 疊加

制作公司印章：結合圓形路徑打字（參考金吉島蛋糕印章）
學到ctrl+Enter:將路徑轉換為選區；
（自來水廠）仿真 想想看用了什么技術？

制作個人印章：篆刻藝術

常用快捷鍵
ctrl+shift+N:新建一個圖層；
ctrl+G：編組
ctrl+alt+2:選擇高光
alt+蒙版：加個黑蒙版
crtl+h:隱藏/顯示快捷鍵

回到頂部(go to top)

 總結

如果找不到素材練習的話，我可以提供些練習過的素材。代碼擼累了P張圖，其實是很好的放松方式，而且P圖能讓心變得很安靜。送給在前端路上的你我。