ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程(2)

來(lái)源:優(yōu)設(shè) 作者:情非得已 學(xué)習(xí):12521人次

我們要使用縮放,鋼筆工具,橢圓工具,圓角矩形工具繪制一個(gè)賣萌,簡(jiǎn)單的機(jī)器人。這里不多描述如何繪制這個(gè)機(jī)器人了,看圖吧。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

把繪制成功的機(jī)器人群組,ctrl+鼠標(biāo)點(diǎn)擊云層的縮略圖,再選中機(jī)器人的t添加一個(gè)圖層蒙版,目的是把他藏到云后面,蒙版的方式上面介紹過(guò),重溫下吧。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

現(xiàn)在我們就來(lái)畫(huà)鳥(niǎo)和徽章。我們使用鋼筆工具,畫(huà)筆工具和橫排文字工具。如何,有詳細(xì)的繪制過(guò)程。

用自己的方式繪制出來(lái)也可以哦。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

第4步 – 第一個(gè)分欄繪制

首先,創(chuàng)建一個(gè)區(qū)域框,我們將添加團(tuán)隊(duì)成員的信息。使用矩形工具繪制一個(gè)480×425白色矩形,上下添加兩個(gè)灰線(這里可以使用剪切蒙版,不會(huì)的同學(xué)把尺寸對(duì)齊就好了),并添加一段文字 圖中字體為Delicious。為文字和白色矩形添加圖層樣式如圖

混合模式為正片疊底,透明度4%黑色,取消全局光角度42°,距離3px,大小0px。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

接著來(lái),在輔助線的幫助下,添加照片和資料,自己找圖占位吧。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

下面是每個(gè)字體的樣式,尺寸,顏色

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

還記得上面我們繪制過(guò)相同的箭頭了么。同樣的方式,再繪制一個(gè)。用矩形工具,然后再輔助線的幫助下,創(chuàng)建一個(gè)矩形的形狀圖層arrow,添加錨點(diǎn)工具和直接選擇工具。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

為他添加陰影。復(fù)制這個(gè)圖層得到arrow副本,這里你可以隱藏圖層arrow,設(shè)置顏色為#000,不透明度為5%。ctrl+t然后右鍵選擇變形徑,稍作調(diào)整,得到以下圖形。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

好了,現(xiàn)在顯示剛才隱藏的圖層arrow,并提到副本那層上面。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

使用橫排文字工具來(lái)創(chuàng)建一個(gè)“——–”字符串,你可以柵欄化和變形得到下面的效果,還添加了柔軟的陰影。(憑感覺(jué)吧)

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

最后添加文本(有點(diǎn)小投影哦)。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

現(xiàn)在創(chuàng)建三個(gè)街區(qū),該工作室提供的服務(wù)的描述。在本節(jié)中,我們使用真棒圖標(biāo)集,創(chuàng)造了由灰粉阿巴斯為WeGraphics,WAPP卷。2和WAPP卷。

記。涸谶@種情況下,導(dǎo)游是真正有用的,以填補(bǔ)圖標(biāo)和文字部分。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

 

添加三個(gè)“點(diǎn)”(一個(gè)不錯(cuò)的陰影),提高1px的白色陰影的文字,如下圖所示。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

我們創(chuàng)建也是一個(gè)不錯(cuò)的菜單,只需在下面的白框,它應(yīng)該是在這一點(diǎn)上,清楚如何實(shí)現(xiàn)這個(gè)菜單。我們?cè)黾恿艘粍傄蝗醿?nèi)陰影“箭頭”。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

第5步 – 中間帶

中間的元素,我們的設(shè)計(jì)是一個(gè)內(nèi)容豐富的信息圖表中引入的一大功能區(qū),其中包含一個(gè)口號(hào)。為了實(shí)現(xiàn)這一功能區(qū),我們將創(chuàng)建5個(gè)自定義形狀使用鋼筆工具,像往常一樣,(我再次提醒的是,如果你是一個(gè)初學(xué)者,你可以閱讀入門(mén):Photoshop的鋼筆工具,以了解更多有關(guān)如何使用這工具)。一起來(lái)看看究竟是什么樣的形狀,我們需要繪制(注:主要形狀和#798ea4為較深的形狀),我們將使用#497287。

Photoshop設(shè)計(jì)簡(jiǎn)潔大方的網(wǎng)頁(yè)界面,PS教程,16xx8.com教程網(wǎng)

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!