您当前位置:图趣网(Tuquu) >> 网页设计教程 >> ps教程 >> 浏览设计教程

PS技巧:利用Photoshop制作专业网页设计模板(3)

的缩略图的描述在图层缩略图图中按住Ctrl点击缩略图图层,激活缩略图选区,新建图层并填充颜色为#000000,然后运用矩形选框工具选取新建图层顶部部分按delete删除;

PS教程:PS制作专业优雅的网页设计模板
图24

  改变图层的不透明度为75%,最后选咋横排文字工具在此图层上方添加对图片的描述文字;

PS教程:PS制作专业优雅的网页设计模板
图25

  第十三步:在特色区域的下方添加一个分隔区域特色区域的最后一步是在其下方添加一个横排的分隔区,方法同第二步和第三步,然后给该图层添加内阴影。

PS教程:PS制作专业优雅的网页设计模板
图26

PS教程:PS制作专业优雅的网页设计模板
图27

 

第十四步:给网页主体区域添加背景颜色你可能已经猜到了,主体区域是如图那样设计为三列,选择矩形选框工具在下方空白区域新建一个合适尺寸的矩形选区,填充颜色为#FBF5EA.

PS教程:PS制作专业优雅的网页设计模板
图28

  第十五步:添加列标题对于列的标题,我们需要从素材中选择可以代表列内容的标识符,并放在左列中。设置字体为Georgia,字体颜色为#323232,下一步使用钢笔工具在列标题下方添加一个边界,样式如图所示:

PS教程:PS制作专业优雅的网页设计模板
图29

  设置前景颜色为#323232,然后选择一个合适的笔刷并设置直径为3px,新建图层,利用笔刷描边路径。设置图层样式如下:

PS教程:PS制作专业优雅的网页设计模板
图30

PS教程:PS制作专业优雅的网页设计模板
图31

PS教程:PS制作专业优雅的网页设计模板
图32

  复制此图层并向下移动图层4px或5px,设置不透明度为24%左右。

PS教程:PS制作专业优雅的网页设计模板
图33

  第十六步:在左列中添加内容标题文字设置为#323232,主体文字颜色设置为#2A2A2A。(其它颜色也可以)。使用同步骤8一样的方法添加“Read More”按钮。中间行文字颜色设置为#484848。

PS教程:PS制作专业优雅的网页设计模板
图34

  第十七步:添加中间列的内容在中间列,创建同左列相同的标题文字,但必须更改文字旁边的标识符号(可以从素材中查找合适的图片)

  选择圆角矩形工具,设置半径为3px前景色为#FFFFFF,制作一个圆角的内容边框,并添加一些文字及描述。

PS教程:PS制作专业优雅的网页设计模板
图35

  添加图层样式:

PS教程:PS制作专业优雅的网页设计模板PS教程:
图36

PS教程:PS制作专业优雅的网页设计模板
图37

 

添加图片匹配内容框中的描述,完成。

PS教程:PS制作专业优雅的网页设计模板
图38

  第十八步:在右列中添加内容右列的样式同其它两列基本

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/ps1284.html
PS技巧简单制作虚线效果
photoshop设计精美登录注册页面
图趣网微信
建议反馈
×