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

2016-03-19 01:53 33 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享PS设计网页:底纹背景餐饮棕色系网页布局设计教程吧。

【 tulaoshi.com - PS 】

最终效果

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

 

 

这个网页最大的特色在于,底部使用了桌布的图案,感觉有点居家的气氛。再搭配上简洁的布局,好似一个家的感觉。

 

1。新建一个大小为:1200*1400px的文档,并填充背影色:#fbe0b1.
再执行滤镜杂色添加杂色,设置数据如下图:

photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程
2.创建自定义图案
按ctrl+N新建一个大小为:80*80px的文档.
再次新建一个图层,命名:horizontal.选择"矩形选区工具"绘制一个大小为80*40,并填充:#b52a51.设置不透明度为:20%.

新建一个图层命名:vertical,使用"矩形工具"在左边绘制一个40*80的图形,并填充:#b52a51.设置不透明度为:30%.

新建一个组,把这两个图层放入进去,并命名:pattern.并设不透明度:30%.

关闭白色图层的"睛眼",编辑自定义图案.

photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程
3.填充自定义图案
新建一个图层命名:patten;并填充白色,更改填充:0%。双击这个图层,在弹出的"图层样式"窗口中选择"图案叠加"选择我们上一步自定义的图案,

photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程
4.顶部导航的制作
新建一个组"top bar".
新建一个图层命名:top bar.选择"矩形选区"工具,绘制一个1200*15并填充#a95858,位置如图如示.双击这个图层,给这个图层添加一个"阴影"效果,其阴影:#473e2f.     

新建一个图层命名:1px line.选取"线条(U)"工具,绘制一个1px的线条,并填充:#8b4747.把位置放在紧靠矩形的下面.

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

按ctrl+J复制线条图层,选择"移动(V)"工具,位移到上一个线条的上面.并更改其颜色:#ca7373. 

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

5.新建一个组"logo",打开一张食物的图片,并命名此图层为"ice cream icon" .
使用"文字工具" 设其颜色:#8d1c39.打上"标志文字".双击此图层在弹出的"图层样式"设置(阴影,浮雕,渐变)的数据如下图: 

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

6.新建一个组"social".
新建一个图层:"social bg"使用"圆角矩形工具"绘制一个260*70大小的形状,并填充:#a95858.位置放在右边,双击此图层给其"图层样式" ,数据如图如示.(描边的颜色:#a95858)  
打开所要的图标,位置如图如示:

photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程
7.建立主内容的背景
新建一个新的图层:content bg.选择"圆角矩形"设其圆角为6px,制作一个980*1080大小的矩形.双击此图层给其添加一个"外发光".

photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程
8.导航条
新建一个组:navigation,拖动此组放置组"content bg"下面.
新建一个图层:navigation bar.选择"圆角矩形"绘制938*70大小的形状,填充:#a95858.双击此图层,添加图层样式(描边颜色:#9c5151).

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

9.选择"文字工具",打出链接的文字,填充颜色:#ece2e4.添加"阴影样式"阴影颜色为:#803a3a.

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

10.搜索导航条
新建一个组:search bar.
新建一个图层:search bar选择"直角矩形"绘制一个200*26大小,填充:#f4f0e2.再给这个矩形添加1px的描边,颜色:#925050.
使用"文字工具"打上这几个字"Type and hit enter to search",文字颜色:#917a7a.

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

11.产品展示栏

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

新建一个组:image slider,把它放在"content bg"图层上面.
新建一个图层:image_holder,选择"矩形工具"绘制一个300*300大小的矩形,并填充:#d6c8af.双击图层给其添加一个"内阴影"的样式.(阴影颜色:#f1eadf;描边颜色:#d6cdbc).

ctrl+J复制这个图层,然后选择"移动工具",按ctrl+T自由变换20px大小的距离.

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

12.打开一张食物的图片,使用"移动工具"移动到文档中,为了使图片放置在"展示栏"的相框中,我们使用了"矢量蒙版".具体的操作步骤如下:
右击"食物图片"的图层,选择"矢量蒙版".(也要以按住ALT键不放,光标移动到两个图层之间的缝隙点击一下)

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

13.创建两个切换的按扭
新建一个组:right arrow.
新建一个图层:circle,选择"矢图老师量圆形(U)",按住shift键不放,绘制一个60*60大小的正圆,填充:白色.其位置放在"产品展示栏"的右侧.并给这个图层添加一个"外发光"的图层样式.

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

14.新建一个图层,按住键盘上的ctrl键,选择此图层和"circle" 图层,右击菜单中选择"合并图层".(做此步骤是为了下面切割圆时,左边的外发光不会出现),这时候选择"矩形选区"切掉左边的半圆,如下图所示.
 photoshop设计网页:底纹背景餐饮棕色系网页布局设计教程

 

12下一页

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

延伸阅读
PS新手设计网页:简单大方易上手 图老师提供 最终效果 一个好的设计大多来源于在纸上的构思.所以我们要养成在一张纸上构图.你可以用铅笔,来自由的构造一个粗略的布局. 规画出一个线框也有助于我们了解一个网站的层次结构,并可以深入的了解最佳设计的位置. 1.在PS中新建一个文件,设置如图.在设置网站的尺寸时,看下主流的显示器是多...
提示:效果很漂亮,布骤也很细腻,一步一步的操作。 先看下效果吧! 素材----右键另存为     第1步:创建一个新文件(按Ctrl + N   )大小为1200px,750px 。然后背景颜色选择渐变工具( G   )从#792700到#000000从顶部向底部的文件。 第2步:创建一个新层,选择画笔工具(B组),选择一...
标签: Web开发
气泡对话框在网页中经常用于说明提示等功能,可以形象生动的现实一些需要用户注意的文字与内容,本文介绍仅用CSS来实现这种简单的网页效果。 气泡状文本框,是一种很生动的网页设计手段。 它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix,还用它显示碟片的详细信息。 ===================...
这是一篇photoshop制作网页背景插图的教程,将为大家介绍制作一个数码相机网页背景风格的方法,教程中主要是使用一些花草和相机的素材进行合成,而且步骤并不复杂,希望大家喜欢。 1、 首先在photoshop新建一个图片,大小设置为760*770,如图所示。 2、 执行“文件—打开”打开素材图片,导入到photoshop中的。 ...
标签: Web开发
网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。下面,我们就有关网页布局谈论一下。 网页布局类型 网页布局大致可...

经验教程

265

收藏

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