本文作者:三岁教程网

Photoshop设计国外木纹风格的网页模板

三岁教程网 2022-11-07 00:00:00 64 抢沙发

效果图:


    
     Photoshop设计国外木纹风格的网页模板

1.新建一个12X12 PX的白色画布。用黑色1px大小的铅笔做出效果,然后 编辑--自定义图案。


    
     Photoshop设计国外木纹风格的网页模板

2.新建一个700x800 px的画布,填充#282828,然后新建一层,填充白色,混合模式设置为正片叠底,直线滤镜--杂色--添加杂色。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

3.用圆角矩形工具,圆角半径设置为15px,画出大小的圆角矩形。


    
     Photoshop设计国外木纹风格的网页模板

4.将木板纹理素材拉进PS里面,对圆角矩形做剪切蒙板,alt+ctrl+G,调整好大小和位置。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

5.给木板纹理添加一些图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

6.继续用圆角矩形工具创建一个小一点的圆角矩形,模式改成正片叠底,给这个图层添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

7.新建一层,调出圆角矩形1的选区,用柔焦的笔刷,前景色设置为白色,在左下角点下,笔刷稍微大一点,然后选择矩形选框工具,注意一定要切换到矩形选框工具,然后方向键向上移动,然后删除选框内的内容,最后将此图层混合模式设置为柔光


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

8.通用的方法,新建一层,调出圆角矩形1的选区,用黑色的柔焦笔刷,切换到矩形选框工具,用方向键向上移动选框,然后删除选框的内容,将此图层混合模式改成柔光。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

9.用矩形工具,前景色设置为#eeeadc,做一个矩形,大小和位置,然后给此矩形添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

10.现在开始做内容部分,用素材包里面的字体,当然你也可以用其他的,打上文字,对Email做一样的蓝色到黑色的渐变,当然也可以直接用蓝色。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

11.接下来做产品展示部分,用矩形工具,前景色设置白色,拉一个适当大小的矩形,设置图层样式,然后将产品图拖进来,对矩形做剪切蒙板。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

12.将矩形复制一层,然后旋转一定的角度。


    
     Photoshop设计国外木纹风格的网页模板

13.用Jenna Sue 字体和 Hand Drawn Arrow笔刷,将前景色设置为#929292,打上 Our New Product字样和刷上箭头,改变图层的不透明度。


    
     Photoshop设计国外木纹风格的网页模板

14.用钢笔工具,选择形状模式,勾出形状,颜色设置为#16a5da,添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

15.用Happy Phantom打上VOLUME 4字样,然后将它旋转到适合的角度,添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

16.在次图层下面,用钢笔工具勾出折角,颜色设置为#004a65。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

17.用椭圆工具,前景色设置为#cb9460,画一个正圆,然后添加图层样式,然后复制一个,位置放置在中间。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

18.用圆角矩形工具,拉一个圆角矩形,添加图层样式,然后复制一层,拉到另一个圆形上面,形成对称。


    
     Photoshop设计国外木纹风格的网页模板

19.接下来做分割线,取色,然后用1px的铅笔制作三条。


    
     Photoshop设计国外木纹风格的网页模板

20.然后用硬度为0%的橡皮擦工具,在分割线的两头进行擦除。


    
     Photoshop设计国外木纹风格的网页模板

21.前景色设置为505050,打上邮件的介绍说明文字。


    
     Photoshop设计国外木纹风格的网页模板

22.前景色设置为#16a5da,选择圆角矩形工具,圆角半径设置为5px,做一个点击按钮,用Happy Phantom字体打上Read Me字样,然后添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

23.用矩形工具,新建一个236X112 px大小的矩形,颜色设置为#1495c5,添加图层样式。


    
     Photoshop设计国外木纹风格的网页模板

24.在此图层下面新建一个黑色的矩形,旋转到一定的角度。


    
     Photoshop设计国外木纹风格的网页模板

25.执行 滤镜--模糊--高斯模糊。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

26.移动到合适的位置,不透明度设置为33%,然后复制一层,ctrl+T,右键,水平翻转,然后拉到合适的位置。


    
     Photoshop设计国外木纹风格的网页模板

27.选择矩形工具,拉一个适当的正方形,图层样式设置,拉入图片,做剪切蒙板。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

28.在正方形下面新建一个白色的长方形,不透明度设置为15%。


    
     Photoshop设计国外木纹风格的网页模板

29.然后给产品添加产品名称和价格信息,然后添加立即购买按钮。


    
     Photoshop设计国外木纹风格的网页模板


    
     Photoshop设计国外木纹风格的网页模板

30.将上诉的小产品价格标签合并到一个组,然后复制3个,摆好位置,在左下角和右下角增加一些版权信息和分享按钮。


    
     Photoshop设计国外木纹风格的网页模板

文章版权及转载声明

作者:三岁教程网本文地址:http://ssjcw.com/?id=50671发布于 2022-11-07 00:00:00
文章转载或复制请以超链接形式并注明出处三岁教程网

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,64人围观)参与讨论

还没有评论,来说两句吧...