PS设计网页:清爽棕色系

营廓基督教堂

营廓基督教堂

2016-03-19 02:05

下面图老师小编跟大家分享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

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

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

步骤11

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

步骤12

最终菜单的结果图:

步骤13

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

步骤14

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

步骤15

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

步骤16

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

步骤17

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

步骤18

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

步骤19

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

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

步骤20

步骤21

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

步骤22

完成最终效果图:

效果图

展开更多 50%)
分享

猜你喜欢

PS设计网页:清爽棕色系

PS PS基础 ps平面设计教程 ps去水印教程
PS设计网页:清爽棕色系

PS设计网页:底纹背景餐饮棕色系网页布局设计教程

PS PS基础 ps平面设计教程 ps去水印教程
PS设计网页:底纹背景餐饮棕色系网页布局设计教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop设计网页游戏UI的专题页棕色系网页教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计网页游戏UI的专题页棕色系网页教程

PS设计网页产品展示类蓝色系主页教程

PS PS基础 ps平面设计教程 ps去水印教程
PS设计网页产品展示类蓝色系主页教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

40款棕色系标志设计

平面设计 标志设计 UI设计 VI设计
40款棕色系标志设计

怎样设计网页

Web开发
怎样设计网页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PS企业网站设计:黑白橙三色制作教程

PS企业网站设计:黑白橙三色制作教程

PS网页设计:黑色超酷风格

PS网页设计:黑色超酷风格
下拉加载更多内容 ↓