• 思缘论坛首页
  • 论坛搜索
  • 设计软件,PS下载
  • 平面设计
  • 精品套图素材
  • 高端国外素材
  • 缘分币充值
 16 12
发新话题
打印

[PS设计] Photoshop设计一个简洁灰色系的网页模板

Photoshop设计一个简洁灰色系的网页模板

今天我将教给大家简洁风格的网页效果图在photoshop中是如何绘制的。我想这个网站可能更适合一些产品介绍网站blog,慈善网站,绿色的自然保护网站等等。在这篇教程中,我们会用到一些矢量图标,可以自行在网上搜索。
出自:苏打苏塔 设计量贩铺



最终效果图

好了,让我们开始吧。打开photoshop创建一个新文档,尺寸是1020px X 1240px,背景颜色设置为 #e6e9d4。



用矩形工具,创建一个形状,颜色 #bbc19c。我的形状尺寸是 1020px X 327px



好了,添加一个图层蒙版(保证你的图层是被选中状态)。



然后确定你选择中了蒙版。



选择渐变工具,保持默认颜色(黑色为前景色,白色为背景色),你可以简单的点击工具栏上面的小图标快速设置。



按照下图拖拽你的鼠标。



好了,我的效果是这个样子的。



Step 1 – 创建logo和头部导航

选择矩形工具,在文件顶部画出一个小的形状。



设置图层样式如下:





我的效果:



在右边的部分,用文字工具,创建导航文字。我一般用的是字体Helvetica 。



接下来,用直线工具,创建一些导航上面的分割线。设置宽度为1px,在文字中间画一些小的形状。





然后按照下图进行图层样式设置:





我的效果:



好了,接下来创建logo。用矩形工具,创建一个类似的矩形,填充颜色 #9cc1a2



按照下图参数设置图层样式。



然后,在文件 Complete Designer Set 中,我选择了一些矢量的装饰图案,在Illustrator中打开他们,选择一个然后拖拽到 Photoshop中,装饰在绿色形状的上面。用作衬托logo。





好了,选择中这一矢量图层,降低它的透明度到30%。



好了,导航和logo基本上完成了。我用文字工具添加了一些引证,在文字导航的下面。

Step 2 – 创建主导航

选择矩形工具,创建一个形状,如下图。我的尺寸是937px x 63px



设置图层样式如下:





添加一些文字,最终效果如下:



现在,看起来主导航有一些单调,我添加了一些图标。你可以从 Complete Designer Set中下载它们。在 Illustrator中打开,然后选择合适的图标拖拽到 Photoshop就可以了。现在我的效果图是这样子的:



好了,现在看上去还不错。

Step 3 – 创建头部

选择矩形工具,创建如下形状,我的尺寸设置是937px X 278px,颜色填充#cdd5a1



设置图层样式:







好了,然后添加一些虚拟的文字(不是真实的项目么)。我用的是字体 Helvetica script ,14px 大小。然后栅格化文字。



点击滤镜>模糊>动感模糊。



设置角度为0和距离为70px。然后添加更多的文字。



好了,现在的效果是这个样子的:



然后我们选择一张漂亮的图片,来装饰我们的头部区域。保证图片图层在我们刚刚创建的图层上面。好了,你看到的就是下面的效果。



右键点击图片图层,选择创建剪切蒙版。



点击图层>图层蒙版>隐藏所有(保证你选择的图层是图片图层)。



选择渐变工具,确定是默认颜色设置(前景白色,背景黑色),按照下图的标记拖拽你的渐变。



我的效果:



好了,添加一些阴影。我用的是椭圆工具,在头部下面创建一个细长的形状。



保持这个形状被选定,我把这个图层命名为阴影。点击滤镜>模糊>高斯模糊。



5.5半径



好了,我们头部基本上也完成了。



Step 4 – 创建主要内容部分

按照下图,添加一些文字。采用的是三栏布局。



选择矩形工具,创建一个形状。这就是我们的主要内容区域。我的尺寸是935px X 504px。



设置图层样式如下:





我的效果



然后在上面和下面添加一些阴影,用椭圆工具和高斯模糊就可以完成了。添加一些分割线。

现在的效果:



好了,添加更多的矢量图标和文字。这是现在的效果。



好了,主要内容部分也完成了

Step 5 – 创建底部内容

底部内容就很容易完成了。放上logo和一些文字就可以了。

最终的效果图



最终效果图

教程中需要的素材请访问:优秀的PS素材和图片素材

TOP



效果不错

本帖最近评分记录
  • Double_One 缘分币 +4 鼓励一下~加油咯. 2010-3-1 23:38

TOP

引用:
原帖由 不雨亦潇潇 于 2010-3-1 16:05 发表
交作业,效果不错
[localimg=321,300]1[/localimg]
麻烦斑竹把这个给删掉吧,不小心给重复发了,谢谢

TOP

那个树很漂亮 很喜欢

TOP

交个作业

附件

web副本.jpg (120.82 KB)

2010-3-4 10:46

web副本.jpg


本帖最近评分记录
  • Double_One 缘分币 +3 鼓励一下~加油咯. 2010-3-4 22:30

TOP

来交作业了。

附件

简洁灰色网页副本.jpg (208.62 KB)

2010-7-7 08:50

简洁灰色网页副本.jpg


本帖最近评分记录
  • 幸福来过 缘分币 +3 鼓励一下~加油咯. 2010-7-7 11:13
-无恃其不来,恃吾有以待也,
无恃其不攻,恃吾有所不攻。

TOP

作业:

附件

未标题-1.jpg (299.77 KB)

2010-7-26 19:47

未标题-1.jpg


本帖最近评分记录
  • 玄宝贝 缘分币 +3 鼓励一下~加油咯. 2010-7-26 22:00

TOP

交作业咯

附件

华晨.jpg (177.74 KB)

2011-10-14 13:11

华晨.jpg


本帖最近评分记录
  • 玄宝贝 缘分币 +2 鼓励一下~加油咯. 2011-10-14 23:02

TOP

交作业咯。。。

附件

清语网页01.jpg (236.26 KB)

2011-10-17 14:18

清语网页01.jpg


本帖最近评分记录
  • 玄宝贝 缘分币 +2 鼓励一下~加油咯. 2011-10-19 09:26

TOP

以前写过一段时间的WEB编码,看后这篇文章收益非常大,不管文章内容是否一句盖过的地方都详细自己全手动做了,收获非常大,谢谢楼主!

附件

47.设计一个简洁灰色系的网页模板.jpg (278.82 KB)

2013-5-1 01:05

47.设计一个简洁灰色系的网页模板.jpg


本帖最近评分记录
  • 蝴蝶君 缘分币 +3 鼓励一下~加油咯. 2013-5-1 08:54

TOP

 16 12
发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com