ps網(wǎng)頁布局設(shè)計實例教程(3)

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

怎么樣的風(fēng)格呢?好了,我們申請的“前端形狀相同的風(fēng)格,”你可以看到下面(的模式,我們要使用,是從舊紙上WeGraphics 模式)。

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

對于兩個小三角形,應(yīng)用以下樣式:

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

啟動子添加的口號。

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

第6步 – 信息圖表

需要合成的我們的fictionary設(shè)計工作室的創(chuàng)作過程中加入少許的信息圖表新生兒從的想法。下面你可以看到大結(jié)局的結(jié)果(明顯的,它只是一個簡單的例子,如何發(fā)展背后的一個項目,你可以描述一個創(chuàng)造性的過程)。

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

開始設(shè)計的兩個圓(按住Shift鍵畫一個完美的圓周,顏色為#3d3d3d)。設(shè)置,左側(cè)的形狀,填充為0%;合適的形狀,設(shè)置混合模式為亮光,填充為35%。添加樣式,如下所示(為圖案疊加為左側(cè)的形狀的形狀,除了它是相同的)。

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

需要注意的是左邊的圓圈中使用自定義的模式,我們可以采取的步驟2相同的技術(shù)來創(chuàng)建此模式。

使用橢圓工具(白色的小圓圈一次,然后把它復(fù)制到再次使用)和線工具(重量:3px的,顏色為#FFFFFF)設(shè)計圖在左側(cè)。集團所有創(chuàng)建的形狀和線條,重復(fù)的組,將其轉(zhuǎn)換為智能對象,然后柵格化了,F(xiàn)在,您可以將樣式添加到該層。

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

使用鋼筆工具繪制一些標簽(使用鮮艷的色彩:#d82f4c,#edcd59,4d85a2#598b3b),然后將它命名使用橫排文字工具,您可以申請一個的軟降shadwo到,標簽和文字。

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

在正確的圈等三個圓圈,設(shè)置填充為20%,添加文字(你可以申請一個軟陰影的字符串),如圖所示。

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

現(xiàn)在,我們要隱藏超出部分的“設(shè)計”與“發(fā)展”界。正如已經(jīng)看到的,我們將使用圖層蒙版。

按Ctrl +單擊在“圖層”調(diào)板中的“創(chuàng)意”圓的形狀,然后去選擇>修改>擴展的值設(shè)置為3個像素。

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

 

按Ctrl + Shift + I反選,然后將圖層蒙版的形狀命名為“設(shè)計”。

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

重復(fù)上述操作,創(chuàng)建一個新的選擇和擴大它所示。您可以使用Ctrl + Shift +點擊,當你需要添加矢量蒙版縮覽圖從兩個或兩個以上的選擇,通過點擊“設(shè)計”和“創(chuàng)意”的形狀,在這種情況下,我們創(chuàng)建了選擇。

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

按Ctrl + Shift + I反選,然后將圖層蒙版的形狀命名為“發(fā)展”。

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

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

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

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

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