您现在的位置: 万盛学电脑网 >> 软件知识 >> 图文处理 >> Photoshop教程 >> ps入门教程 >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

  先来看下效果图:

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

  素材包:MissYuan_教程素材.rar

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

  效果如图:

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

  用了下面两种字体:

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

 

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

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

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网

  16.在次图层下面,用钢笔工具勾出折角,颜色设置为#004a65,图层样式用第14步的

Photoshop设计国外木纹风格的网页模板,PS教程,思缘教程网
Photoshop设计国外木纹风格的网页模板,PS教程,
						<div class=