手把手教你繪制一組扁平化的天氣圖標(biāo)

作者:
分類: 教程
2016-06-07
12713


最終效果:

ps2016060639

讓我們開始學(xué)習(xí)吧!

1. 做一個(gè)彩虹圖標(biāo)

第一步

我們開始畫彩虹的最外層紅色條紋。

用橢圓工具(快捷鍵U)畫一個(gè)450 x 450 px的圓,打開屬性面板(窗口>屬性)在屬性面板中,我們可以改變圓的大小、位置、顏色等等一些其他的設(shè)置。

把圓的描邊設(shè)置為3 pt,不填充顏色,然后我們調(diào)整下描邊的顏色。 單擊描邊顏色圖標(biāo),開打顏色樣本選擇窗口,你可以在樣本中選擇一個(gè)顏色也可以點(diǎn)擊右上角的那個(gè)拾色器按鈕,打開純色面板,這樣你可以更精確的選擇顏色。

ps201606061

第二步

添加另一個(gè)彩虹內(nèi)環(huán)。 在圖層面板中選擇紅色圓形圖層,按住Control+J (command+J)復(fù)制本圖層。 按住Control+T(command+T)把圓變的小一些,使它可以嵌套在紅色圓形的內(nèi)部,在屬性面板中把描邊的顏色變?yōu)殚冱S。

ps201606062

第三步

再一次拷貝圖層(Control+J or conmand+J)添加第三個(gè)更小一些的圓,把描邊的顏色改成黃色。

ps201606063

第四步

繼續(xù)添加其他的圓,賦予他們彩虹的其他幾個(gè)顏色。 你可以加7種顏色或者更少,因?yàn)槲覀儾恍枰龅姆浅M物化也不需要太多了的細(xì)節(jié),因?yàn)槲业囊嫷膱D標(biāo)是很小的。 即使你只畫了三四個(gè)不同顏色的圓環(huán),它看上去還是像彩虹。

當(dāng)你調(diào)整到滿意的程度后,用移動(dòng)工具(V)選擇所有的圓環(huán)把他們編為一組(Control+G) 前往圖層面板,按住Control+J復(fù)制這一組或者拖拽組到到版面地步的創(chuàng)建新圖層按鈕上,這樣做也會(huì)對(duì)本組進(jìn)行復(fù)制。 這樣我們就做好的一個(gè)備份,萬一我們?cè)诶L制過程中再想給彩虹添加點(diǎn)細(xì)節(jié)就可以用它啦。

在圖層面板選擇第一組,右鍵合并組,這樣所有圓環(huán)都合并到一個(gè)柵格化的圖層中。

ps201606064

第五步

現(xiàn)在我們用矩形選框工具(M),框選彩虹圓環(huán)的下面一半后刪除。

ps201606065

第六步

讓我們?cè)诓屎绲膬啥伺獌啥湓啤?使用橢圓工具(U)在彩虹的左下角畫一個(gè)藍(lán)色的小圓。 再添加幾個(gè)的不同尺寸小圓。 按?。–ontrol+G)把組成云彩的各個(gè)元素放到一組,并(Control+J)復(fù)制一組云。 放復(fù)制后的云朵放在彩虹的另一側(cè)。

ps201606066

第七步

如果你還想加點(diǎn)什么點(diǎn)綴,可以用之前的備份圖層隨便調(diào)整到你自己喜歡為止。 我自己也決定減少彩虹的顏色,每條色帶弄厚一點(diǎn)。

ps201606067

第八步

現(xiàn)在我們創(chuàng)建圖標(biāo)的基礎(chǔ)圖層。 我們用橢圓工具(U)畫一個(gè)545 x 545 px 的圓。 在屬性面板上設(shè)置填充色為草綠色,不加描邊。

ps201606068

第九步

給我們的圖標(biāo)添加一個(gè)長(zhǎng)陰影效果。 用矩形(U)工具畫一個(gè) 350 x 350 px的綠色正方形,使用移動(dòng)工具(V)將它選擇45度。 前往圖層面板,在混合模式中選擇正片疊底,讓正方形顏色更深一些。 如果看起來顏色太深,我們就降低點(diǎn)它的透明度

ps201606069

第十步

調(diào)整矩形大小和位置,使它像下面的截圖一樣放在彩虹兩端。 在圖層面板拖拽正方形圖層到彩虹圖層的下方,也可以多按幾次快捷鍵Control+[

ps2016060610

第十一步

現(xiàn)在我們需要把露在圓外面的正方形剪掉。 用移動(dòng)工具選中圓形圖層后切換到鋼筆工具(P),在圓上單擊鼠標(biāo)右鍵,選擇建立選區(qū)。 關(guān)閉建立選區(qū)的窗口,保持默認(rèn)的設(shè)置就好。在選擇菜單中選擇反向。(選擇>反向)

現(xiàn)在我們回到圖層面板找到陰影圖層,刪除鍵刪除圓外那些我們不需要的部分。(應(yīng)該把陰影圖層?xùn)鸥窕臎]有寫,包括下文用橡皮擦出也是柵格化之后才可以的)

ps2016060611

第十二步

現(xiàn)在我們用橡皮工具(E)擦掉圖標(biāo)上沒有用的陰影。

把圖標(biāo)的底色和陰影的顏色都調(diào)的淺一點(diǎn)。 我們的扁平化彩虹圖標(biāo)這就做好了! 下面我們移步下一個(gè)圖標(biāo)。

ps2016060612

2. 畫一個(gè)暖春的太陽圖標(biāo)

第一步

這一次我們要做一個(gè)太陽的圖標(biāo)。 畫一個(gè) 260 x 260 px黃色的圓作為太陽的主體。

ps2016060613

第二步

現(xiàn)在我們加一些散射的陽光。 切換到多邊形工具(U),在控制面板頂部將多邊形邊數(shù)設(shè)置為3條 將橙色的三角形放置到太陽的頂部。 同時(shí)選擇圓形和三角形,在控制面板頂部選擇水平居中對(duì)其,確保兩個(gè)形狀完美居中對(duì)齊。

我們用參考線來標(biāo)注下太陽的正中心。按住Control+R(command+R)調(diào)出標(biāo)尺工具,下拉水平參考線到畫板上。 同樣的方法來拉垂直的參考線,讓他們相交。

現(xiàn)在讓我們來給太陽加更多的光束。

選中三角形按住Alt+Control+T(Alt+Command+T)自由變換 在三角形的中心找到它的軸心點(diǎn),把軸心點(diǎn)拖拽到黃色太陽的中心。(參考線焦點(diǎn)) 你會(huì)在圖層面板看到三角形圖層已經(jīng)被自動(dòng)復(fù)制了一個(gè)(如果不是通過按Alt-Control-T來自由變換,圖層是不會(huì)被自動(dòng)復(fù)制的)。 按住Shift不放將三角形旋轉(zhuǎn)45度后回車確定。

現(xiàn)在按下Shift+Control+Alt+T(Shift+Command+Alt+T)再復(fù)制6個(gè)圖層環(huán)繞著太陽。

太棒了! 太陽光已經(jīng)完成。

ps2016060614

第三步

我們不使用參考線了,在視圖>清除參考線來關(guān)閉它們。

ps2016060615

第四步

拷貝上個(gè)圖標(biāo)的背景圖層并填充成天藍(lán)色。 在太陽下方加一個(gè)半透明的陰影。

ps2016060616

第五步

用橡皮擦擦掉黃色太陽周圍的陰影(原文又沒有說要柵格化啊,要柵格化了才能用橡皮擦擦掉啊。)。 我們可以利用橢圓形工具(M)建立選區(qū) 選擇> 變換選區(qū)修改選區(qū),使選區(qū)囊括太陽與陽光之間的空襲。

確定后,到圖層面板選擇陰影圖層。 刪除太陽周圍這部分的陰影

ps2016060617

完成了! 我們的太陽圖標(biāo)做好了! 我們來進(jìn)行下一步。

ps2016060618

3. 畫一個(gè)陰雨天的圖標(biāo)

第一步

使用橢圓工具(U)畫一個(gè)200 x 200 px藍(lán)色正圓。 在左右兩側(cè)加些小圓,使云彩看著萌一點(diǎn)。

ps2016060619

第二步

選擇所有的圓,然后圖層菜單>合并形狀。 前往圖層面板,鼠標(biāo)右鍵單擊合并好的云圖層,將圖層?xùn)鸥窕苑奖阄覀冎蟮奶幚怼?/span>

現(xiàn)在我們用矩形選框工具,把云彩圖層的下半部分刪除掉,使云的底部變平坦。

ps2016060620

第三步

現(xiàn)在我們開始畫雨滴的形狀。 使用橢圓型工具(U)畫一個(gè)35 x 35 px藍(lán)色的圓,使用編輯節(jié)點(diǎn)工具(你可以在鋼筆工具(P)的下拉菜單中找到它)選擇圓頂部的錨點(diǎn)。 單擊一下,圓角會(huì)變成尖角。 最后向上拖拽這個(gè)點(diǎn),是它們看起來更像雨滴的形狀。

ps2016060621

第四步

按住Control+J(Command+J )多復(fù)制一些雨滴,把他們散布在云彩底部,看起來像在下雨一樣。

ps2016060622

第五步

加一個(gè)黃色的圓作為圖標(biāo)的背景同時(shí)添加一個(gè)長(zhǎng)陰影。 我們的陰雨圖標(biāo)就這樣做好了! 現(xiàn)在我們就剩下最后一個(gè)圖標(biāo)啦!

ps2016060623

4. 做一個(gè)雨傘圖標(biāo)

第一步

首先從畫一個(gè)430 x 430 px 青綠色的圓來開始我們的雨傘繪制工作。 在圖層面板柵格化此圖層,利用矩形選框工具(M)刪除圓的下半部分。

ps2016060624

第二步

使用橢圓工具(U)在青綠色半圓的底部畫一排圓。 調(diào)整這組圓的大小,使它們和傘面更匹配。 最后選中這幾個(gè)圓 ,圖層>合并形狀把它們變成一個(gè)圖形。

ps2016060625

第三步

切換到鋼筆工具(P),右鍵在圓(這幾個(gè)小圓)上建立選區(qū)。 在圖層面板選擇青綠色的圖層,刪除選區(qū)內(nèi)的部分,傘的底部部分就做好了。

現(xiàn)在我們不在需要橘黃色的小圓了,把它們刪掉就好了。

ps2016060626

第四步

現(xiàn)在我們繪制一個(gè)帶曲形手把的木質(zhì)傘柄。 使用圓角矩形工具(U)畫一個(gè)4pt 橘黃色的描邊,無填充顏色。像下圖展示的一樣。

在圖層面板點(diǎn)擊右鍵柵格化圖層,以便之后的編輯。

ps2016060627

第五步

使用矩形選區(qū)工具(M)刪除掉手杖上曲形部分,在青綠色傘面上只露一點(diǎn)傘尖。 選擇并刪除曲形的左半邊,這樣手杖就成型了。

保持手杖圖層是選中狀態(tài),按住Shift+Control+[,把手杖圖層調(diào)整到青綠色傘面圖形的下層。

ps2016060628

第六步

再添加一個(gè)粉色圓形背景圖層和一個(gè)扁平陰影,雨傘圖標(biāo)就好了。

ps2016060629

很棒! 到此我們的扁平化四月天氣圖標(biāo)就完成了。

然而,本教程還沒有結(jié)束哦。 你也可以到此為止了如果你喜歡干凈簡(jiǎn)約的圖標(biāo)。 如果你還想添加一些細(xì)節(jié)和紋理,我們就繼續(xù)看看如何利用Adobe Photoshop的一些藝術(shù)畫筆來調(diào)整圖標(biāo)。

ps2016060630

5. 用銹跡筆刷來添加一些紋理

第一步

我們就從太陽圖標(biāo)開始吧 來到圖層面板,選中黃色圓形太陽。 按住Alt同時(shí)單擊創(chuàng)建新圖層 在彈出窗口中,勾選使用前一圖層創(chuàng)建剪貼蒙版。

這樣我們的新圖層和選中的太陽圖層就綁定在一起了(在圖層面板你會(huì)看到新圖層旁邊有個(gè)向下的小箭頭)。 它的作用是你畫的東西只會(huì)在太陽涵蓋的范圍內(nèi)展現(xiàn)。

ps2016060631

第二步

現(xiàn)在我們用另一個(gè)很棒的筆刷來創(chuàng)建一個(gè)銹跡斑斑的效果。 你可以選擇一個(gè)你最喜歡的或者一些默認(rèn)的Adobe Photoshop筆刷。

選擇畫筆工具(B)右鍵打開筆刷列表(或者直接窗口>畫筆) 點(diǎn)擊彈出窗口右上角的下拉菜單圖標(biāo),在菜單列表的底部選擇M 畫筆。 追加畫筆到現(xiàn)有列表或者直接替換它們。

ps2016060632

第三步

在列表中找到干畫筆 1 #2 然后選擇這個(gè)畫筆。 如果因?yàn)榘姹驹蚰愕念A(yù)設(shè)畫筆中沒有這個(gè)畫筆,你可以在默認(rèn)設(shè)置中嘗試一些其他的畫筆,比如干介質(zhì)畫筆或者其他一些可以看似小銹跡的畫筆。

ps2016060633

第四步

在顏色面板選擇淺黃色,在太陽圖層上層的剪貼蒙板圖層,加一些柔和的銹跡紋理。 選用深黃色在太陽主體的底部稍微加一些陰影。

將所有陽光合并到一個(gè)圖形中,同樣也給它們加一層剪貼蒙板。

ps2016060634

第五步

我們移步到彩虹圖層,給他加上同樣的紋理。 給弧形的彩虹圖層和兩個(gè)云分別加剪貼蒙板圖層,同時(shí)給它們加上同樣的藝術(shù)畫筆效果。

ps2016060635

第六步

同樣的做法,利用畫筆給每一個(gè)圖標(biāo)都加上這樣銹跡斑斑的紋理。

ps2016060636

第七步

建立一個(gè)新圖層作為背景圖層,在每一個(gè)圖標(biāo)下方畫一些淺黃色的紋理。

ps2016060637

太棒了! 我們四月份的天氣圖標(biāo)完成啦!

你可以延展利用這些技術(shù)來創(chuàng)造更多的圖標(biāo),或者做一組不同主題的圖標(biāo)。

祝你好運(yùn)!

ps2016060638

0
3
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)