当前位置:首页 > PS教程 > 网页设计

ps黑色风格网页模板

  • 2022-12-24 18:33:42
  • 来源/作者:互联网/佚名
  • 己被围观

在这篇网页设计教程里,你将学习制作可以用于整站的一个既优雅又专业的网页,我们将用到Photoshop软件里的一些基本的工具,比如:笔刷和图层等。

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

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

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

添加图层样式:

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

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

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

 

第十八步:在右列中添加内容右列的样式同其它两列基本一样,所以我们添加相同的标题文字,并更改合适的标题文字的图片。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

第十九步:添加联系方式的小部件选择矩形选框工具,设置半径为3px,画出合适尺寸的矩形框,运用和第二步一样的步骤在矩形框中添加相同的样式,这样可以设计出同导航栏一样的样式。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

在小部件中添加内容,设置标题文字字体为Georgia,图片从素材中选择,为在图片上添加了一个颜色叠加层(#F7E5C4),使其与网页的整体布局融合的更好。

然后用圆角矩形工具添加一个圆角选框作为email地址的输入框,填充颜色为#FFFFFF。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

到这一步,主体区域的所有内容就完成了,下边是底部区域的制作。

第二十步:添加底部区域的背景底部背景的制作方法和第二步第三步相同,你需要将此区域的高度设置的比导航区域略高,这样可以放下更多的内容。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

第二十一步:添加底部的内容下面,在底部添加一下链接。用矩形选框工具创建一个矩形选区,并填充颜色为#323232,然后将链接文字的颜色设置为#FFFFFF,添加文字。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

接下来将图层的混合模式设置为柔光,降低不透明度到63%,重复以上步骤添加需要的链接。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

最后要做的事情就是在页脚导航的上方添加社会化媒体的分享按钮,然后在页脚的右侧添加网站标志及版权的声明。(社会化分享的图标在素材中)

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

好了,所有步骤完成。

Photoshop设计黑色大气的网页模板,PS教程,16xx8.com教程网

 

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条