PS设计网页:清爽棕色系

2016-03-19 02:05 9 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

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

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

步骤10

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

步骤11

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

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

步骤12

最终菜单的结果图:

步骤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

完成最终效果图:

效果图

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

延伸阅读
标签: Web开发
在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓功夫在诗外,网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计...
有问题论坛讨论 先看效果图 第一步 — 下载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组),选择一...
David Everly 给出了在Photoshop设计网页过程中,一些有用的建议。 01 使用网格系统 网格系统能够在网页设计的时候少了很多头痛。试试这些免费的资源吧,比如Cameron McEfee’s GuideGuide Photoshop extension 或者 Grid System Generator ,会让你使用网格的时候更方便和准确。 02 都摆上来 实现成功的网页设计和时间管理,有...

经验教程

57

收藏

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