• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Photoshop设计国外木纹风格的网页模板

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了等相关知识,希望对您有所帮助

邮件营销在现在的互联网中运用的非常广泛,很多电子商务公司都会对自己的用户进行定期的邮件传送,传送最新的产品信息等,好的邮件设计能大大的把转化率提高,让跟多的用户点击查看产品。邮件的设计有很多,接下来我们来做一个稍微特别一点的。

先来看下效果图:

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

素材包: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教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

19.接下来做分割线,分割线的制作方法有很多,你可以看我的效果图,取色,然后用1px的铅笔制作如图的三条。

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

21.前景色设置为505050,打上“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis dui non odio lacinia adipiscing. Donec at dolor ac justo dignissim feugiat quis ut lectus. Donec lacinia imperdiet est, sit amet bibendum eros malesuada et. Donec faucibus congue nibh et imperdiet. ”这段话,也是邮件的介绍说明文字

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

26.移动到合适的位置,不透明度设置为33%,然后复制一层,ctrl+T,右键,水平翻转,然后拉到合适的位置,最后效果如图,让人感觉有立体感

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

29.然后给产品添加产品名称和价格信息,然后添加立即购买按钮,Product Name和$10.99是用Happy Phantom字体,下面的那行小字“ Integer ut purus elit. Maecenas diam tortor, tempor ut gravida eget, eleifend laoreet ligula.”和“Buy Now”此部分字体为Arial,是系统自带的。

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

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

Photoshop设计国外木纹风格的网页模板,PS教程,站长图库

 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2022-04-29解决php Composer出现SSL报错问题
  • 2022-04-29Discuz论坛游客无法查看文章中的图片怎么办?
  • 2022-04-29CDR制作冰块立体字
  • 2022-04-29PHP解密支付宝小程序的加密数据、手机号的示例代码
  • 2022-04-29Illustrator创建立体风格的黑胶唱机图标
  • 2022-04-29四种PHP生成唯一订单号的方法
  • 2022-04-29Vue中如何根据主题获取不同的资源切换图片
  • 2022-04-29Photoshop设计漂亮的坦克游戏界面
  • 2022-04-29你可能要纠正这5个PHP编码小陋习!
  • 2022-04-29Mac搭建php的开发环境(图文详解)

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • Discuz不使用插件实现简单的打赏功能
    • 玩转PHP之快速生成二维码
    • 看看使用uni-app如何编写一个五子棋小游戏
    • 浅析AntdV Upload组件customRequest怎么自定义上传方法
    • 一起聊聊JavaScript函数式编程
    • PHP中$_SESSION获取不到值怎么办
    • 趣味讲解Node.js中的回调函数(附示例)
    • 优化Laravel数据库查询的18个技巧
    • Photoshop技巧教程:解读13条PS高级使用技巧
    • 全平台通用评论神器一键自动填写昵称、邮箱和网址

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有