tft每日頭條

 > 科技

 > ps怎麼做色環圖

ps怎麼做色環圖

科技 更新时间:2025-02-06 18:25:29

大家好,我是樂佳設計:

非常抱歉,打了三天魚,篩網去了。自己覺得都不好意思,幾天沒有更新!今天同大家分享圖像的自由變換并利用此工具動手制作12色環,我之所以沒有選擇利用自由變換和變形工具,制作特别炫的跳水呀、飛翔之類的變形,而選擇色環是因為我覺得圖像的顔色調整,才是PS的核心,文章有點長,請您有耐心。

顔色應該謂之圖像的靈魂和主線,無論那種教程避不開的都是顔色,圖像顔色、圖層顔色、選區顔色、通道和路徑顔色;以及圖像、圖層和通道的混合模式;色相和飽和度調整、明度調整和黑白模式、最後說道的顔色匹配、可選顔色等等這一切,都離不開顔色,那麼今天利用自由變換工具,帶大家做一做最基本的12色環,既練習了圖像工具也對萬千變化的顔色有所了解。好了,下面開始我們今天的内容:

ps怎麼做色環圖(PS基礎教程第五講)1

圖像基礎(四)基本内容

ps怎麼做色環圖(PS基礎教程第五講)2

今天做這樣一個12色環

利用的工具:PS圖像自由變換工具,快捷鍵CTRL T(使用頻率和頻次最高的命令)

制作思路:

1】插入矢量形狀,自由變換CTRL T(調整縮放大小到合适位置);把圓360°分成12分,每次旋轉30°

2】通過圖層再次變形(CTRL SHIFT ALT T)命令複制11次,文字和度數也分别旋轉11次所得。

3】按住CTRL鍵,鼠标單擊圖層縮略圖,建立選區,使用吸管工具更改背景顔色并ALT DELE鍵填充選區。

4】按住SHIFT ALT鍵,拖放橢圓選框工具,建立中心點圓并描邊。

5】視圖—顯示—智能參考線,微調顔色名稱和度數名稱位置(我是演示大家有空可以通過CTRL T自由變換工具進行文字旋轉,以符合人的閱讀習慣,現在文字是倒立

五步驟的重點在于多次變形的技巧和12顔色RGB值的确認,請勿本末倒置,理清制作思路了,我們正式開始今天的分享,分兩塊進行制作(圖形制作和顔色填充),希望能對您今後的學習有所幫助。

圖形制作

1、新建文件CTRL N,文檔尺寸22*22cm\RGB格式\8通道;視圖—顯示—智能參考線,繪制中心參考線和上下左右邊界線(5cm)。

ps怎麼做色環圖(PS基礎教程第五講)3

新建文件

ps怎麼做色環圖(PS基礎教程第五講)4

視圖—顯示—智能參考線,以便捕捉和對齊

2、制作顔色箭頭和相應的12等分度數:

1】單擊工具箱自定形狀工具,選擇合适的矢量圖形(如下)縮放至合适的位置;右鍵單擊栅格化圖層;關鍵來了:單擊急活圖層CTRL T調用自由變換工具,在工具選項欄角度填入30°,必須記得移動圖形中心點到畫布中心線交點位置并回車确認!

ps怎麼做色環圖(PS基礎教程第五講)5

自由變換工具并旋轉角度30°,回車确認

一定要注意:移動中心點到畫布中心并旋轉30°以後的結果,如下圖所示。,

ps怎麼做色環圖(PS基礎教程第五講)6

30°旋轉以後的結果

需要說明:不建議使用矢量圖形,本命令原本也是針對圖像的,若矢量圖未栅格化也就是沒有轉換成普通圖層,使用下面的再次變形命令,電腦并不新建并複制圖層,隻是在原圖層複制矢量圖形。

ps怎麼做色環圖(PS基礎教程第五講)7

不調整中心點位置,旋轉效果

2】再次變形并複制:CTRL ALT SHIFT T命令,連續11次每次間隔30°,帶原始圖像共12份圓形閉環,如圖示:

ps怎麼做色環圖(PS基礎教程第五講)8

再次變形11次,得到結果如圖示

3】制作度數,單擊文字工具,我們理解垂直朝上箭頭的指向為0°進行标識,文字工具橫排文字選框到0°标識右上位置,CTRL T調整文字大小24(通常手機可辨識字體大小為24,太小看不見);同上操作調整文字中心點到畫布中心線交點位置,角度30°并回車确認。

ps怎麼做色環圖(PS基礎教程第五講)9

度數标識30°旋轉

再次變形并複制:CTRL ALT SHIFT T命令,連續11次每次間隔30°,帶原始度數文字共12份圓形閉環,如圖示:

ps怎麼做色環圖(PS基礎教程第五講)10

度數文字11次旋轉結果

這裡需要說明兩點:

  • 第一、文本框不要有多餘的空間,否則旋轉完成以後會不是圓形,文本框要貼合文字

ps怎麼做色環圖(PS基礎教程第五講)11

紅色框部分不要,選擇是以外框為标準的

  • 第二、12個度數需要手工一一進行調整沒有更好的辦法一起調整過來,順時針為0-180°;逆時針為0到-180°(如果換算成正值為負度數 360°,例如-60°=-60° 360°=300°,之所有采用負數标識是因為在PS中調整顔色的工具大部分是-180°到180°區間标示。

ps怎麼做色環圖(PS基礎教程第五講)12

12色環顔色度數分布

好了12色相的基本圖形我們就制作完了,下面開始第二部分顔色的填充。

顔色填充(可能有點長,但希望您有耐心讀完,我盡量解釋清楚)

顔色填充分為三部分:

1、PS三基色RGB:紅、綠、藍;分布在0°、120°、-120°(240°)又叫對比色,但對比色不僅僅是這三種顔色,相差120°的顔色都是互為對比色。

2、三間色:構成CMYK模式的主要顔色,因為K黑色是混合色,分别是青色、洋紅、黃色;分布在180°、-60°、60°,我們叫做互補色(同紅、綠、藍互補),但凡相差180°的顔色都為互補色,因此不安理解:

  • 紅色0°——青色180°
  • 綠色120°——洋紅-60°(300°)
  • 藍色240°——黃色60°

理解了以上的邏輯關系,在PS是拾色器中為大家提供提供四種顔色模式:HSL\RGB\Lab\CMYK,對于三基色和三間色而言,我們可以通過填充數值,精确填充,需要理解的是RGB屬于加色絕對值(0-255)而CMYK屬于減色百分(100-0%)相對值,區别在于RGB模式255值為白、0值為黑色;CMYK0%為白色、100%為黑色。

ps怎麼做色環圖(PS基礎教程第五講)13

CMYK100%值

ps怎麼做色環圖(PS基礎教程第五講)14

RGB255值

小知識:

在數字電路中0和1代表兩種對立脈沖現象,因此0和1均為狀态值,而不是啥也沒有而且不可以不填寫,因此PS中無論RGB模式還是CMYK模式0值必須寫,不能為空。

因此0-255代表256個數值,中間值為127(跨數實際是128=0-127),對于計算機的超大規模集成數字電路中隻有0和1二進制,對于8位二進制而言正好可以表示256個數值,你可以理解2的8次方,也可以理解2的4次方*2的4次方=16*16=256,是否有點繞,繞也是這個意思,說這麼多是無論色相、色階、黑白度和曲線都是0-255,您需要多少知道它的來曆,是因為8為二進制,那麼問題就來了RGB配合可以表現1600萬(256*256*256)多種不同顔色,哎,死了去了。

好了說正事吧,知道了概念,實際操作就簡單多了,對于三基色和三間色而言,可以在RGB和CMYK模式中直接填寫數字求得。

以下填充方法都相同:

  • 1】單擊激活填充圖層也可以右鍵單擊選取要填充的圖層
  • 2】CTRL 單擊圖層縮略圖載入選取
  • 3】單擊工具箱設置背景顔色,ALT DEL填充前景色,CTRL D取消選區。

我這是偷懶以後為了設計方面可以建組,圖層下方新建組命令(也可以使用SHIFT鍵,選取同一屬性的圖層,拖動到相應的組中,關閉眼睛可以減少圖層操作)

ps怎麼做色環圖(PS基礎教程第五講)15

紅色:R255G0B0

ps怎麼做色環圖(PS基礎教程第五講)16

RGB模式:藍色R0G0B255;綠色ROG255B0

三間色:青180°、洋紅-60°、黃60°

ps怎麼做色環圖(PS基礎教程第五講)17

CMYK模式:黃色C0M0Y100K0

ps怎麼做色環圖(PS基礎教程第五講)18

CMYK模式:青色C100M0Y0K0

ps怎麼做色環圖(PS基礎教程第五講)19

CMYK模式:洋紅色C0M100Y0K0

有人說了,K呢咋沒人管呢,K值可以理解明暗度100—0,K為0值時候不影響顔色變化,當K值逐漸增大,直到100%的時候,所選取的顔色變為最暗黑色,具體不作圖了,大家可以試試。

3、接下來我們說6種第三色,何為第三色呢?就是三基色和三間色兩兩中間的顔色,三基色分布為120°,三間色分布為120的中間也就是60°,第三色又在兩兩的中間那就是30°,好了六個顔色出來了,從30°開始順時針旋轉分别是:

橙色30°(紅黃之間)

黃綠色90°(黃綠之間)

水綠色150° (綠青之間)

天藍色-150° (青藍之間)

紫色-90° (藍洋紅之間)

水紅色-30°(洋紅和紅色之間)

那我們應當如何确認他們的RGB顔色呢,因為無論RGB或者CMYK模式已經沒有純色可以填寫,也就是以上的顔色是混合色,直選其中一中顔色值已經無法表達,需要同時标注兩種顔色才可以求解。

基礎理論:

  • 任意相鄰顔色相加可以得到中間色,最大度數可以放到120°也就是三原色(紅 藍=洋紅、紅 綠=黃、綠 藍=青)
  • 相鄰色,左右30°為相鄰色,左右相加也等于中間色,例如“-30°水紅 30°橙色=紅色0°

依照這樣的理解,我們來分析橙色是如何來的?

橙色=紅色 黃色

而在RGB中我們如何表示黃色呢?因為黃色=紅色 綠色(RGB模式,黃色R255 G255 B0),遞進的邏輯應該是:橙色=紅色 紅色 綠色(2*紅色 綠色)

正如我們日常油漆工配漆,但這樣配出來是兩份,我們隻要一份除以2,結果就出來了。橙色=紅色 一半的綠色,一半也就是50%,全值是255,半值就是127,因此橙色的RGB值為R255 G127(黃色減弱50%) B0,因此一下顔色的RGB值分别為:

ps怎麼做色環圖(PS基礎教程第五講)20

橙色30°:R255 G127 B0(黃色衰減)

ps怎麼做色環圖(PS基礎教程第五講)21

翠綠色150°(水綠):R0 G255 B127

ps怎麼做色環圖(PS基礎教程第五講)22

紫色-90°:R127 G0 B255(紅色衰減)

ps怎麼做色環圖(PS基礎教程第五講)23

天藍-150°(亮藍色):R0 G127 B255

ps怎麼做色環圖(PS基礎教程第五講)24

水紅色-30°:R255 G0 B127

ps怎麼做色環圖(PS基礎教程第五講)25

黃綠色90°:R127 G255 B0

為了是顔色看起來清楚,在背景圖層上方新建黑色填充圖層,接下來再次使用自由變換工具制作12顔色文字标識。

ps怎麼做色環圖(PS基礎教程第五講)26

添加黑色填充圖層,使顔色對比強烈

ps怎麼做色環圖(PS基礎教程第五講)27

文字自由變換

ps怎麼做色環圖(PS基礎教程第五講)28

SHIFT CTRL alt T11次變換

做了這麼多,最終用它幹嗎?來我們做個最簡單的的CTRL U,調用色相和飽和度命令

ps怎麼做色環圖(PS基礎教程第五講)29

圖像色相飽和度

綠色背景更換成藍色,如何做呢?綠色到藍色120°或者到紅色呢?逆時針也即是-120°,看看結果如何?

ps怎麼做色環圖(PS基礎教程第五講)30

色相調整-120°,綠色變成紅色

ps怎麼做色環圖(PS基礎教程第五講)31

好了,不知道表述大家是否能夠明白,沒辦法學識有限,請您見諒!

今天就分享到這裡,下次繼續圖像變形和透視貼圖。

本文由樂佳設計原創,請多關注或者留言。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved