ps大家都很熟悉，这是一款功能强大的图片处理软件。这款软件包含众多的编修与绘图工具，可以便捷地进行图片编辑，今天我们不讲图片，专门和大家讨论用ps怎么设计网页的问题。
网络的普及是促使更多人需要掌握Photoshop，因为在网页设计制作时Photoshop是必不可少的网页图像处理软件。
一、用ps制作网页页脚
1、和液体感的页首和页脚一样，渐变通常是web2.0设计风格的标志。在这个教程中我们将使用到一组模拟3D材质的渐变文件包。你可以从excellent Deziner Folio得到这个文件包。点击这里下载渐变文件包。
2、在Photoshop中创建新文档。我自己创建了一个大的文件，1440像素X900像素大小(以适应我的17英寸显示屏的笔记本)。当然，实际上你的页脚不应该这么大，虽然它可以很好的模拟出当你的浏览器窗口被拖拽后的情况。选择一个背景颜色，在我的这个例子中，背景色是一个简单的从#b0b0b0到#e1e1e1的渐变色。按住Shift键，创建一个垂直的从上到下的渐变。
3、你将要创建什么样的布局在网页设计中是非常重要的。也就是在流式布局(可以自适应浏览器大小的布局)和固定宽度布局(在web2.0风格的网站中固定宽度布局经常会是居中的)之中作出选择。我们的这个页脚将会是一个固定宽度布局的页脚，大小为760像素X420像素。这个尺寸会保证即使在800像素X600像素大小的屏幕上，也叫也会正确的显示出来。
4、虽然我们的页脚是固定宽度，我们仍然希望页脚能够填满整个页面。为了实现这个目的，我们会用到我在Photoshop中制作的仿金属材质的图案。点击这里下载此图案。在Photoshop中打开这个图片，选择编辑>定义图案，为图案命名。
（图片来自网络）
5、现在是时候使用第1步中那漂亮的渐变文件包了。创建一个新的图层，使用矩形选区工具(M)创建一个100%文档宽度的，21像素高的选区。选择渐变工具(G),然后选择一个漂亮的渐变，我选择的是”Black 5-Gloss”，现在按住Shift键在矩形选区内画一条垂直的线，创建这个渐变。
6、现在我们给第5步创建的图层添加上阴影效果。
7、将前景色设置为#545557，背景色设置为#1e211f。在第4步创建的图层下创建一个新的图层。使用选区工具选取第4步图层的内容。选择渐变工具，选择第一个渐变(前景和背景色的结合)，按住shift键，在选区上画出一个垂直的渐变。现在选择第4步的图层，将图层混合模式更改为正片叠底。
8、在所有图层上方创建一个新的图层，在参考线中间画一个颜色为#dfdfdf的圆角矩形。在图层上右击，点击混合选项，给矩形创建一个投影效果。然后在效果图层上右击，选择创建图层，这样会将投影效果分离为一个单独的图层。
9、最后添加文字、版权信息和你的logo完成设计。
二、用ps设计网页版的会员登录页面
1、新建一个空白文档，不需要特别大，修改背景色为浅色系，然后进行填充。
2、使用画笔进行涂抹，然后使用高斯模糊使其看起来更自然。
3、接下来增加填充框，并且设定图层的描边等样式。
4、以此类推设置三个填充框，并且注明会员登陆。
5、最后，设置登录的特殊颜色，为各个地方标注上默认提示即可。
6、可以改进或者需要注意的是，登录的按钮设置上可以使用渐变色。
（图片来自网络）
三、用ps设计网页效果图
1、首先打开PS软件,新建一个画布，设置尺寸是宽度1920像素,高度要根据需求设置,暂时设置为6000像素(注意单位要是像素)。
2、网页图分为三部分: Head (头部)、Body (banner+内容)、foot(结尾) , Head包含logo、公司名称、导肌-、网站 页，丁代们个业文化联系我们)、联系电话、二维码等内容; Body部分包含banner图、详情内容介绍; foot(结尾)指的是最下面的索引部分
3、在作图的时候,要做好分组(ctrl+G )，,编辑好名称(双击图层文字即可编辑)，从上到下完成,便于及时修改。
4、整体页面颜色步调一致。在作图时整个颜色不宜太多,一般不超过3个颜色,颜色差别也不宜太大，整体给人的感觉舒服、美观。
5、参照线辅助。参考线作图比较常用,便于辅助图片文字对齐,达到整体的协调。
6、做好切图。切图有两种方式,上次已经分享过不做赘述。切图是为了图片切成一张张小图,便于导出。
7、页面存储。页面做好后点击新建-存储为web所用格式-存储-格式(选择HEML和图像) ,这样打开的图形就是切图的内容及网页的图,便于用户查看。
8、查看代码。一个网页图查看代码只需要打开网页图右键点击"审查元素"就可以看到后台的代码组了。
关于用ps怎么设计网页，小编用三个不同的实例做了简单的介绍和说明，希望能对初学者有一定帮助。小编一直觉得ps是一款强大且复杂的工具软件，多练多上手操作才能尽快掌握。
在微信中搜索faceui
