快速掌握Photoshop簡單用法

時間 2019-11-10

標籤快速掌握 photoshop 簡單用法简体版

原文原文鏈接

程序員快速掌握的UI設計技巧

1、概要

1.一、選擇主色調

1、Photoshop

1、概要

功能與內在很關鍵，UI與外表也重要。css

1.一、選擇主色調

1.1.一、三原色

三原色指色彩中不能再分解的三種基本顏色，咱們一般說的三原色，即紅、黃、藍。三原色能夠混合出全部的顏色，同時相加爲黑色，黑白灰屬於無色系。html

1.1.二、RGB

RGB色彩模式是工業界的一種顏色標準，是經過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來獲得各式各樣的顏色的，RGB便是表明紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的全部顏色，是目前運用最廣的顏色系統之一。前端

CSS中用24位表示顏色，如#ff00ff，#RRGGBB #Red Red Green Green Blue Blue #紅紅綠綠藍藍程序員

每一位上的數字越大，則顏色越深（#ff0000 最紅，#cc0000 紅 #330000），比重web

#ff0000 紅瀏覽器

#ffff00 黃安全

#ffffff 白前端工程師

#000000 黑工具

#cccccc 灰色 #eeeeee 淺post

總體數字越大越淺，越小越深

紅色：暖色系（女）

綠色：中性（小孩，老人）

藍色：冷色（男）

紅色——熱烈、喜慶、激情、辟邪、危險……
橙色——溫暖、事物、友好、財富、警告……
黃色——豔麗、單純、光明、溫和、活潑……
綠色——生命、安全、年輕、和平、新鮮……
青色——信任、朝氣、脫俗、真誠、清麗……
藍色——整潔、沉靜、冷峻、穩定、精確……
紫色——浪漫、幽雅、神祕、高貴、妖豔……
白色——純潔、神聖、乾淨、高壓、單調……
灰色——平凡、隨意、寬容、蒼老、冷漠……
黑色——正統、嚴肅、死亡、沉重、恐怖……

1.1.三、安全色

不一樣的平臺（Mac、PC等）有不一樣的調色板，不一樣的瀏覽器也有本身的調色板。這就意味着對於一幅圖，顯示在Mac上的Web瀏覽器中的圖像，與它在PC上相同瀏覽器中顯示的效果可能差異很大。

選擇特定的顏色時，瀏覽器會盡可能使用自己所用的調色板中最接近的顏色。若是瀏覽器中沒有所選的顏色，就會經過抖動或者混合自身的顏色來嘗試從新產生該顏色。

256色裏有40種顏色在Macintosh和Windows裏顯示的效果不同，因此能安全使用的只有216色。

http://www.bootcss.com/p/websafecolors/

■#000000 ■#000033 ■#000066 ■#000099 ■#0000CC ■#0000FF	■#003300 ■#003333 ■#003366 ■#003399 ■#0033CC ■#0033FF	■#006600 ■#006633 ■#006666 ■#006699 ■#0066CC ■#0066FF	■#009900 ■#009933 ■#009966 ■#009999 ■#0099CC ■#0099FF	■#00CC00 ■#00CC33 ■#00CC66 ■#00CC99 ■#00CCCC ■#00CCFF	■#00FF00 ■#00FF33 ■#00FF66 ■#00FF99 ■#00FFCC ■#00FFFF
■#330000 ■#330033 ■#330066 ■#330099 ■#3300CC ■#3300FF	■#333300 ■#333333 ■#333366 ■#333399 ■#3333CC ■#3333FF	■#336600 ■#336633 ■#336666 ■#336699 ■#3366CC ■#3366FF	■#339900 ■#339933 ■#339966 ■#339999 ■#3399CC ■#3399FF	■#33CC00 ■#33CC33 ■#33CC66 ■#33CC99 ■#33CCCC ■#33CCFF	■#33FF00 ■#33FF33 ■#33FF66 ■#33FF99 ■#33FFCC ■#33FFFF
■#660000 ■#660033 ■#660066 ■#660099 ■#6600CC ■#6600FF	■#663300 ■#663333 ■#663366 ■#663399 ■#6633CC ■#6633FF	■#666600 ■#666633 ■#666666 ■#666699 ■#6666CC ■#6666FF	■#669900 ■#669933 ■#669966 ■#669999 ■#6699CC ■#6699FF	■#66CC00 ■#66CC33 ■#66CC66 ■#66CC99 ■#66CCCC ■# 66CCFF	■#66FF00 ■#66FF33 ■#66FF66 ■#66FF99 ■#66FFCC ■#66FFFF
■#990000 ■#990033 ■#990066 ■#990099 ■#9900CC ■#9900FF	■#993300 ■#993333 ■#993366 ■#993399 ■#9933CC ■#9933FF	■#996600 ■#996633 ■#996666 ■#996699 ■#9966CC ■#9966FF	■#999900 ■#999933 ■#999966 ■#999999 ■#9999CC ■#9999FF	■#99CC00 ■#99CC33 ■#99CC66 ■#99CC99 ■#99CCCC ■#99CCFF	■#99FF00 ■#99FF33 ■#99FF66 ■#99FF99 ■#99FFCC ■#99FFFF
■#CC0000 ■#CC0033 ■#CC0066 ■#CC0099 ■#CC00CC ■#CC00FF	■#CC3300 ■#CC3333 ■#CC3366 ■#CC3399 ■#CC33CC ■#CC33FF	■#CC6600 ■#CC6633 ■#CC6666 ■#CC6699 ■#CC66CC ■#CC66FF	■#CC9900 ■#CC9933 ■#CC9966 ■#CC9999 ■#CC99CC ■#CC99FF	■#CCCC00 ■#CCCC33 ■#CCCC66 ■#CCCC99 ■#CCCCCC ■#CCCCFF	■#CCFF00 ■#CCFF33 ■#CCFF66 ■#CCFF99 ■#CCFFCC ■#CCFFFF
■#FF0000 ■#FF0033 ■#FF0066 ■#FF0099 ■#FF00CC ■#FF00FF	■#FF3300 ■#FF3333 ■#FF3366 ■#FF3399 ■#FF33CC ■#FF33FF	■#FF6600 ■#FF6633 ■#FF6666 ■#FF6699 ■#FF66CC ■#FF66FF	■#FF9900 ■#FF9933 ■#FF9966 ■#FF9999 ■#FF99CC ■#FF99FF	■#FFCC00 ■#FFCC33 ■#FFCC66 ■#FFCC99 ■#FFCCCC ■#FFCCFF	■#FFFF00 ■#FFFF33 ■#FFFF66 ■#FFFF99 ■#FFFFCC ■#FFFFFF

1.1.四、同色系原則

同色系配色：即用單一的顏色。易協調,應注意色彩深淺濃淡和花材形態的變化。

簡單、不花、有層次感

1.1.五、扁平化metro

Metro(美俏)是微軟在Windows Phone 7中正式引入的一種界面設計語言，也是Windows 8的主要界面顯示風格

1.二、選擇輔助色

顏色搭配

假定已選擇一種顏色來做爲主色調：#ff99ff

怎樣選擇輔助色：

http://www.colorhexa.com/ff99ff

http://www.color-hex.com/color/ff99ff

https://www.colorcombos.com/colors/ff99ff

http://encycolorpedia.cn/ff99ff

1.三、顏色搭配

1、Photoshop

Adobe Photoshop，簡稱「PS」，是由Adobe Systems開發和發行的圖像處理軟件，Photoshop主要處理以像素所構成的數字圖像。使用其衆多的編修與繪圖工具，能夠有效地進行圖片編輯工做。ps有不少功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

1.一、Photoshop歷史與版本

1990 橫空出世 Adobe Photoshop 1.0

photoshop理論基礎：http://www.jianshu.com/p/ed5d25cc7b9f

1.二、PhotoShop在線教程

　　前端工程師技能之photoshop巧用系列第一篇——準備篇

　　前端工程師技能之photoshop巧用系列第二篇——測量篇

　　前端工程師技能之photoshop巧用系列第三篇——切圖篇

　　前端工程師技能之photoshop巧用系列第四篇——圖片格式

　　前端工程師技能之photoshop巧用系列第五篇——雪碧圖

　　前端工程師技能之photoshop巧用系列擴展篇——自動切圖

1.三、快捷鍵

1.3.一、單獨經常使用的快捷鍵

ESC取消操做
雙擊Photoshop的背景空白處打開文件
F12 恢復爲初始圖像
選擇工具的快捷鍵
選框-M 移動-V 套索-L 魔棒-W 噴槍-J 畫筆-B 鉛筆-N 橡皮圖章-S
歷史記錄畫筆-Y 橡皮擦-E 模糊-R 減淡-O 鋼筆-P 文字-T 度量-U
漸變-G 油漆桶-K 吸管-I 抓手-H 縮放-Z
默認前景和背景色-D 切換前景和背景色-X 編輯模式切換-Q 顯示模式切換-F
另外，若是咱們按住Alt鍵後再單擊顯示的工具圖標，或者按住Shift鍵並重覆按字母快捷鍵則能夠循環選擇隱藏的工具。
得到精確光標
按Caps Lock鍵可使畫筆和磁性工具的光標顯示爲精確十字線，再按一次可恢復原狀。
按Tab鍵可切換顯示或隱藏全部的控制板(包括工具箱)，若是按Shift+Tab則工具箱不受影響，只顯示或隱藏其餘的控制板。

1.3.二、與shift一塊兒使用的快捷鍵。（shift多數表示處於某種狀態）

按Shift時可畫出正圓和方形的選區、圖形、直線。
按Shift時可畫出垂直、水平和45度的直線
按Shitf時可用鼠標垂直、水平和45度的移動對象
按Shift時可快速的移動對象
按Shift+「選區工具」可增長選區，Alt+「選區工具」可減小選區
按Shift+Alt時可畫出以某點爲中心的正圓和正方形。
Shift+「Backspace」調出填充對話框
使用繪畫工具如(如畫筆組，橡皮等)，按住Shift鍵單擊鼠標，可將兩次單擊點以直線鏈接。
若要將某一圖層上的圖像拷貝到尺寸不一樣的圖像窗口中央位置時，能夠在拖動鼠標的同時按住Shift鍵，圖像拖動到目的窗口後會自動居中。

1.3.三、與ctral一塊兒使用的快捷鍵。（ctrl多數表示執行某個命令）

自由控制大小
Ctrl+ 0（零）滿屏顯示圖像
Ctrl+「+」放大圖像
Ctrl+「-」縮小圖像
Ctrl+「N」或Ctrl+「雙擊」新建文件
Ctrl+「S」保存
Ctrl+ Shift+「S」另存爲…
Ctrl+「O」打開文件
Ctrl+「W」關閉文件
Ctrl+「Q」退出程序
Ctrl+「C」複製
Ctrl+「X」剪切
Ctrl+「V」粘帖
Ctrl+Shift+「C」合併複製（複製多層內容）
Ctrl+Shift+「V」粘帖入選區內
Ctrl+「L」色階設置
Ctrl+「M」色彩曲線設置
Ctrl+「B」色彩平衡設置
Ctrl+「I」色彩反相
Ctrl+「U」色相/飽和度設置
Ctrl+「J」把圖層或圖層中選重的部分複製一個新層
Ctrl+Shift+「N」新建圖層
Ctrl+「E」向下合併圖層
Ctrl+ Shift+「E」全並全部可見圖層
Ctrl+「G」建立剪切蒙板層
Ctrl+「A」全選
Ctrl+「D」取消選擇
Ctrl+ Shift+「I」反選
Ctrl+ Shift+「B」自動顏色
Ctrl+ Shift+「L」自動色階
Ctrl+ Shift+Alt+「L」自動對比度
Ctrl+「Z」取消上一步的操做
Ctrl+ Alt+「Z」取消多步操做
Ctrl+ Shift+「Z」向前返回
Ctrl+Alt+「D」羽化….
Ctrl+「T」自由變換選區對象（選擇菜單欄中的「變換選區」只對選區起做用，）在使用「編輯」→「自由變換」(Ctrl+T)命令時，按住Ctrl鍵並拖動某一控制點能夠進行自由變形調整；按住Alt鍵並拖動某一控制點能夠進行對稱變形調整；按住Shift鍵並拖動某一控制點能夠進行按比例縮放的調整；按住Shift+Ctrl鍵並拖動某一控制點能夠進行透視效果的調整；按Alt+Ctrl鍵並拖動某一控制點能夠進行斜切調整；按Enter鍵應用變換；按Esc鍵取消*做。
Ctrl+「P」打印
Ctrl+「[」往下移動圖層
Ctrl+「]」往上移動圖層
Ctrl+Shift+「[」置底層
Ctrl+Shift+「]」置頂層
Ctrl+「F」重複執行上一次濾鏡操做
Ctrl+「Del」（Backspace）用背景色填充圖層或選區，Alt+Del （Backspace）用前景色填充圖層和選區。
Ctrl+「H」顯示隱藏選區邊框,輔助線、網格
Ctrl+「R」顯示和隱藏標尺
Ctrl+「;」顯示和隱藏參考線
Ctrl+「」」顯示和隱藏網格
Ctrl+「Y」校驗顏色
不是在選取工具下，按Ctrl+鼠標也可自由的移動輔助線
Ctrl+ 單擊（在圖層、通道、路徑面板中單擊）可載入相應的選區。
Ctrl+ 選區或「移動工具」移動選區對象
Ctrl+Alt+選區或「Alt+移動工具」複製各選區對象
在使用「路徑、選區」工具時按着Ctrl可移動對象
在執行直接選取工具或路徑選取工具操做時按Ctrl可實現二者之間的切換。
在鋼筆工具操做時按Ctrl，可切換到「直接選取工具」對路徑中的各控制點進行調整、Alt可切換到「轉換點工具」
在文字工具操做時按Ctrl, 可對文字進行縮放、旋轉等調整

1.3.四、與alt一塊兒做用的快捷鍵。（alt多數表示動做之間的操做切換）

Alt+橡皮工具。在圖象上塗抹能夠恢復擦除的部分。
Alt+「顏色選取工具」背景取色
執行鋼筆工具操做時按Alt可變換成「轉換點工具」，按Ctrl可變換成「直接選取工具」
Alt+菜單命令，可展開相應的菜單。
在編輯文字時，當光標在字母之間按Alt+「方向鍵」可調整字母之間的間距。
在執行套索工具操做時按Alt可實現「套索工具與多邊形套索工具」、「磁性套索工具羽多邊形套索工具」等之間的切換。
Alt+ 移動工具，可複製選區對象
Alt+ 上方向鍵能夠複製多個對象。（造成立體效果圖像）在選取工具下
Alt+ 雙擊Layers面板上的眼睛圖標隱藏或顯示除此圖層外的其它圖層內容。
按Alt時在兩個圖層中間單擊可把上層作爲下一層的剪切層。
將對話框內的設定恢復爲默認，先按住Alt鍵後，Cancel鍵會變成Reset鍵，再單擊Reset鍵便可。
在Layers、Channels、Paths調色板上，按Alt單擊這些調色板底部的工具圖標時，對於有對話框