做投影,教你用ps做最近十分流行的長陰影(5)
前言:
長陰影是目前最為流行的一種設(shè)計(jì)趨勢,在Dribbble、Behance等各大設(shè)計(jì)社區(qū)幾乎無處不在,它看起來像是對“扁平化”風(fēng)格的一種強(qiáng)化,特別是在設(shè)計(jì)圖標(biāo)或簡單的海報(bào)的時(shí)候會用上。
網(wǎng)絡(luò)上自然有很多可以自動生成長陰影工具,但是工具只能作為一種媒介,真正學(xué)會長陰影,并靈活運(yùn)用始終要從實(shí)踐開始入手。
此外,我們會在本次教程中會使用AI軟件進(jìn)行繪制,AI軟件與PS軟件有很多的不同,AI是一個(gè)以創(chuàng)建矢量圖為主的繪圖軟件,特別適合做出扁平風(fēng)的圖片。
我們今天將要繪制一系列寶石,并為它們配上時(shí)尚又帶感的長陰影。在本教程中,我只演示一粒鉆石的步驟做法,其他寶石可以由大家自由發(fā)揮。效果圖如下:
一、繪制鉆石
在我眼中,繪畫是一件非常有趣的事,它在還原我們生活的基礎(chǔ)上又添加上我們對世界的想象(如果你足夠有想象力的話)。因此,請想象一下你曾經(jīng)見過的鉆石的樣子。它是什么形狀?它是光芒萬丈還是星星點(diǎn)點(diǎn)?它是什么顏色?
問了自己這幾個(gè)問題之后,你再打開AI軟件,繪制出你心中所想的鉆石的樣子。但請記住,扁平化的創(chuàng)作首先是去掉高光、陰影,因此你的色彩搭配是很關(guān)鍵。另外,你的圖形要精準(zhǔn)得當(dāng),這才能表現(xiàn)出物件本身的特點(diǎn)。
在AI新建一個(gè)文檔,尺寸為W:600px;H:600px,顏色模式為RGB。使用參考線先進(jìn)行圖形的簡單的布局。
接下來,開始繪制鉆石,從底部開始繪制。用幾何作圖的好處在于能精確的控制圖形。比如三角形、四邊形、圓形,這些軟件自帶的圖形都能讓你非常精準(zhǔn)地穩(wěn)定畫面。出現(xiàn)瑕疵的幾率很小。這時(shí),我們需要繪制一個(gè)三角形,只需要選擇多邊形繪圖,在“邊數(shù)”里填上“3”。
調(diào)整好三角形的顏色和位置如下:
繼續(xù)在原來三角形基礎(chǔ)上添加另外一個(gè)三角形,再在鉆石的頭部上方增加一個(gè)四邊形。
使用“直接選擇工具”,對四邊形上方兩端點(diǎn)進(jìn)行移動,都分別往中間移動80px?梢岳?yún)⒖季。
這里要提醒大家的是,在操作這一步驟之前請確保參考線處于“鎖定”的狀態(tài),否則,當(dāng)你對端點(diǎn)進(jìn)行移動時(shí)參考線也會跟著一起滑動。請?jiān)?ldquo;視圖”菜單下“參考線”一欄中“鎖定參考線”。
繼續(xù)在四邊形上方畫上兩個(gè)三角形。
將頭部兩個(gè)三角形的不透明度分別降低為30%、20%。因?yàn)檫@三個(gè)圖形的排列位置分別是從下至上,所以在下方的透明度越低,這樣才能讓越在上的圖形色彩更“淺”。
接著,調(diào)整好圖形內(nèi)部各圖形的色彩,確保能看清它們彼此的輪廓。
然后再將上下三角形每條路徑對齊,讓整個(gè)鉆石的切面更完美。最終調(diào)整后的效果如下:
接著將所有圖形編組,編組后調(diào)整整個(gè)鉆石的大小外形,這里,我將它稍微“壓扁”。然后跟著也可以適當(dāng)調(diào)整上下參考線的位置。這里的參考線的位置對我而言是記錄尺寸的作用,因?yàn)榻酉聛砦視^續(xù)做幾個(gè)同樣的寶石圖形,因此我要讓它們都保持同樣的大小比例。
二、添加背景
下面,我要為這個(gè)鉆石添加背景,畫一個(gè)正圓,直徑為整個(gè)畫板的寬度。讓它排列在鉆石圖形的底層。并將為這個(gè)背景添加一個(gè)漸變,漸變模式為120度的線性漸變。這一漸變是為接下的長陰影做準(zhǔn)備。
三、制作長陰影
這時(shí),畫一個(gè)長方形。將長方形旋轉(zhuǎn)至這樣一個(gè)角度。以剛剛從鉆石的右側(cè)延伸出來為基準(zhǔn),調(diào)整好長方形的大小和角度。
這時(shí),通過“ctrl+[”將這個(gè)長方形置于鉆石的底部同時(shí)又在圓形背景的上方。然后同時(shí)選中圓形背景和長方形,使用“形狀生成工具”,在按住“alt”鍵的同時(shí)單擊圓形背景外的不需要的長方形的部分。處理后的效果如下:
為長方形添加漸變,漸變模式為-45度,漸變顏色從藍(lán)色到白色過度。
漸變設(shè)置好后將長方形的圖層混合模式改為“正片疊底”。這時(shí),長陰影就做好了。
四、繼續(xù)美化
這時(shí),還可以繼續(xù)往這個(gè)鉆石增加一些裝飾,例如“閃光”。
這類圖片很適合作為icon或logo使用。當(dāng)然,海報(bào)的設(shè)計(jì)中也許也能見到它的出現(xiàn)。
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 設(shè)計(jì)知識,新手詳情頁制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 圓角教程,教你制作網(wǎng)頁常用的圓角矩形邊角
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
推薦教程
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop制作網(wǎng)站導(dǎo)航圖
- banner教程,用ps制作960*90的廣告圖片
- Photoshop制作網(wǎng)頁搜索條
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 陰影效果,教你制作各類陰影教程
- 用ps制作豎列導(dǎo)航
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧