PS设计网页:清爽棕色系

2016-03-19 02:05 15 1 收藏

下面图老师小编跟大家分享PS设计网页:清爽棕色系,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - PS 】

有问题者可以进论坛讨论:http://www.poluoluo.net

最终页面效果图如下:

效果图

 一、新建文档:宽1200px,高1500px,背景层以颜色(#e9e3c9)填充。创建网页头部(head) 1、新建图层,选中矩形选择框工具(M),在画布头部添加矩形,宽1200px,高度大约100px,并设置如下图层样式 “渐变叠加”

步骤1

“描边”

步骤2

头部将会是这样子:

步骤3

2、在头部添加网站的标题,广告语和logo和一点公司简介。大概布局是这样的:

步骤4

对于标题Design.Studio,应用了如下样式: “阴影”

步骤5

“渐变叠加”

步骤6

“描边”

步骤7

至于logo,选择圆角矩形工具,半径为20pxtuLaoShi.com,可填充任何颜色,然后设置图层样式。 “渐变叠加”

步骤8

“描边”

步骤9

二、创建导航菜单 像上述的第1步那样,创建一个短点的矩形,复制标题图层的图层样式,禁用”阴影”。结果如下图:

步骤10

接下来,添加菜单文字,其中一个菜单文字颜色为白色。(想知道为什么,就往下看)

步骤11

在菜单左右创建两个1px的直线,如下图所示:

步骤12

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

最终菜单的结果图:

步骤13

在白色菜单文字下方新建图层,使用矩形选择框工具(M)选中白色菜单,以颜色(#9bcd00)填充,并设置透明度为20%。结果如下图:

步骤14

用相同方法创建二级菜单导航条。

步骤15

  三、创建主题图标 接下来,在导航菜单下添加3个突出的网站主题。

步骤16

用创建logo的方法添加3个logo,主题图标从photoshop中自带的图形库中选择,并添加文字说明和分隔线。

步骤17

  四、创建网站主要内容 再一次使用矩形选择框工具(M),创建一大的盒子,以#a9a282填充,描边使用颜色(#7c6c4b)。

步骤18

在这个大盒子里将要创建4个小盒子,包含了主题的主要内容和主题尾部内容。

步骤19

像blog的主题一样,格式化这几个盒子。

步骤20

步骤21

  最后,添加网页底部 与头部相呼应,复制标题,logo,添加copyright信息。

步骤22

完成最终效果图:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

效果图

来源:http://www.tulaoshi.com/n/20160319/1901100.html

延伸阅读
有问题论坛讨论 先看效果图 第一步 — 下载960网格模板 我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前,先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的,一个是按12栏分布一个按16栏. 更详细...
本教程用到了渐变,自定义形状等,并不是很复杂,细心按步骤操作,应没什么难度. 最终效果图: 首先,新建一个800× 800px的画布,用渐变工具拉出垂直渐变,颜色系数在图内给出。 www.Tulaoshi.com 画布将成为这样(水印效果为小Y翻译时加上,作者原图无): 新建图层,用圆角矩形工具在中间拉出一个矩形,填充任意颜色,在图层面板里...
提示:效果很漂亮,布骤也很细腻,一步一步的操作。 先看下效果吧! 素材----右键另存为     第1步:创建一个新文件(按Ctrl + N   )大小为1200px,750px 。然后背景颜色选择渐变工具( G   )从#792700到#000000从顶部向底部的文件。 第2步:创建一个新层,选择画笔工具(B组),选择一...
标签: 眼妆 妆容
棕色眼妆画法图解 选择粉色眼影搭配棕色眼影,这样的搭配适合春夏日常画哦,不用担心画重手。 棕色眼妆第一步 选择一把大号的眼影刷沾取肉粉色眼影,扫在上眼皮上作为眼部打底。接着用小号眼影刷沾取棕色眼影,小范围扫在眼尾。 棕色眼妆第二步 接着用中号眼影刷沾取橘粉色眼影叠加在刚刚画的棕色眼影外缘,接着用大号...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这样写...

经验教程

641

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部