當前位置:首頁>ps實例教程>ps網頁設計>網頁圖片>教程內容

ps網頁內容框陰影(2)

來源:未知 作者:飛魚的聲納 學習:7520人次

三、新建一個圖層,命名為”shadow-right”,選擇矩形工具(U),畫一個寬200像素,高50像素的矩形,顏色為黑色(#000000)。在圖層面板中同時選擇”box”圖層和”shadow-right”圖層,然后選擇移動工具,使用工具屬性欄中的”底部對齊(align bottom edges)”和”右側對其(align right edges)”按鍵,將陰影圖層放置于內容盒圖層的右下角。如下圖所示:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

然后在圖層面板中選擇”shadow-right”圖層的矢量蒙版縮略圖,如下圖:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

選擇直接選擇工具,在”shadow-right”圖層的右下角單擊,這時圖層的錨點會顯示出來,在右下角的錨點上單擊,使用鍵盤上的方向鍵,讓其向下移動7個像素,然后框選右上角和右下角的錨點,同樣使用方向鍵讓矩形的右側邊緣向左側移動3個像素,F在選擇移動工具將”shadows-right”圖層拖動到”box”圖層的下方。效果如下圖:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

四、現在在圖層面板中右鍵單擊”shadow-right”圖層,選擇”轉換為智能物件(Convert to Smart Object)”命令,將圖層轉換為智能物件,然后在菜單欄上選擇”濾鏡(Filter)>模糊(blur)>高斯模糊(Gaussian Blur)”,參數如下圖:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

之后給此圖層添加蒙版,如下圖:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

然后選擇漸變工具(G),按住shift鍵,給”shadow-right”圖層應用一個從黑色(#000000)到透明的水平漸變,之后將圖層的不透明度調整到30%。這樣就完成了內容盒右側陰影的設計,最終效果如下圖:

Photoshop中創(chuàng)建內容盒陰影效果,PS教程,16xx8.com教程網

同理,你可以按照上面的方法做出左邊的陰影效果。

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
橫財神2018-04-18 02:36
非常好
短信來了就不看2017-05-28 10:55
學習了,好東東
雒冰冰72017-05-28 05:44
大哥跟嫂子吵架,雙方都找來人,看陣勢要干仗。 開打前,我哥發(fā)話:“別動你嫂子,其他人使勁打! 嫂子也發(fā)話了:“別打我老公,其他人隨便打。” 其他人。。。

關注大神微博加入>>

網友求助,請回答!