ps企业网站模板（PS做网页模板应该怎么做）
本文目录
- PS做网页模板应该怎么做
- 怎么用ps做网站
- 用PS做网站的模板尺寸都有哪些宽度一般设为多少呢banner有什么要求么 导航条等等
- 用Photoshop设计漂亮的网页页脚模板
- 如何用Photoshop制作网页模板
PS做网页模板应该怎么做
做到和页面一致，图片大小，像素尺寸一致，不要做完了在DREAMWEAVER中调节，会影响图片效果。字体是独立的，方便切图。
怎么用ps做网站
赞同 crgkorg 这个朋友的观点，ps一般只是设计网站模板，用ps做好模板后，切图(即写成DIV+css样式)，然后嵌套到你写的后台程序代码中，调试代码，基本上就是这个步骤。你可以找个写代码的，合作。你做前台美工，他做后台程序。
用PS做网站的模板尺寸都有哪些宽度一般设为多少呢banner有什么要求么 导航条等等
一般最宽1480px宽，中间的是1024px宽，但是最好主要内容就放在1000px宽以内，其他的宽度使用背景延展，这样小的屏幕也可以在一屏内看到主要内容。高度需要按照内容的多少和网站的格式选择。一般不要少于一屏，比如768px.
用Photoshop设计漂亮的网页页脚模板
本文介绍一篇制作网页页脚的PS教程，这个页脚的设计很有层次感，同时用网格空格背景纹理修饰，是一个十分漂亮的网页页脚。
自从Web2.0冲击互联网以来，页脚就变得比以前任何时候都显得重要了，出现了许多非常漂亮的页脚设计。在这个教程中，我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。
页脚
这就是我们将要创建的页脚。点击下面的截图查看原图。
第1步
和液体感的页首和页脚一样，渐变通常是web2.0设计风格的标志。在这个教程中我们将使用到一组模拟3D材质的渐变文件包。你可以从excellent Deziner Folio得到这个文件包。点击这里下载渐变文件包。
第2步
在Photoshop中创建新文档。我自己创建了一个大的文件，1440像素X900像素大小(以适应我的17英寸显示屏的笔记本)。当然，实际上你的页脚不应该这么大，虽然它可以很好的模拟出当你的浏览器窗口被拖拽后的情况。
选择一个背景颜色，在我的这个例子中，背景色是一个简单的从#b0b0b0到#e1e1e1的渐变色。按住Shift键，创建一个垂直的从上到下的渐变。
第3步
你将要创建什么样的布局在网页设计中是非常重要的。也就是在流式布局(可以自适应浏览器大小的布局)和固定宽度布局(在web2.0风格的网站中固定宽度布局经常会是居中的)之中作出选择。我们的这个页脚将会是一个固定宽度布局的页脚，大小为760像素X420像素。这个尺寸会保证即使在800像素X600像素大小的屏幕上，也叫也会正确的显示出来。
如下所示使用网格来你的网站的大小。注意如果你想创建一个适合于1024像素x768像素屏幕大小的布局，那么将你的网格定义在955像素X600像素的区域。
第4步
虽然我们的页脚是固定宽度，我们仍然希望页脚能够填满整个页面。为了实现这个目的，我们会用到我在Photoshop中制作的仿金属材质的图案。点击这里下载此图案。在Photoshop中打开这个图片，选择定义图案，为图案命名。
现在创建一个新的文档，1440像素宽，86像素高，选择填充命令，选择我们刚才创建的图案。全选(Ctrl+A)，然后将图片剪切、粘贴到我们的第一个文档的底端，我们将会得到如下的结果。
第5步
现在是时候使用第1步中那漂亮的渐变文件包了。创建一个新的图层，使用矩形选区工具(M)创建一个100%文档宽度的，21像素高的选区。选择渐变工具(G),然后选择一个漂亮的渐变，我选择的是”Black 5-Gloss”，现在按住Shift键在矩形选区内画一条垂直的线，创建这个渐变。
将创建好的形状移动到第4步中创建的形状的上方。你应当得到和下图显示的图片类似的结果。
第6步
现在我们给第5步创建的图层添加上阴影效果。
第7步
将前景色设置为#545557，背景色设置为#1e211f。在第4步创建的图层下创建一个新的图层。使用选区工具选取第4步图层的内容。选择渐变工具，选择第一个渐变(前景和背景色的结合)，按住shift键，在选区上画出一个垂直的渐变。现在选择第4步的图层，将图层混合模式更改为正片叠底。
第8步
在所有图层上方创建一个新的图层，在参考线中间画一个颜色为#dfdfdf的圆角矩形。在图层上右击，点击混合选项，给矩形创建一个投影效果。然后在效果图层上右击，选择创建图层，这样会将投影效果分离为一个单独的图层。
现在你已经有了矩形图层和阴影图层，移动并且改变阴影的大小直到得到如下图的效果。你可以按下Ctrl+T来调出变换工具，然后右击，选择透视，向内拖拽顶部的两个手柄。也可以将阴影向下方移动，使用柔软画笔的橡皮擦工具将上方边缘的阴影擦掉。
第9步
最后添加文字、版权信息和你的logo完成设计。
第10步
为了在html文件中使用页脚，只需将文字移除(文字将会在html中添加)，如下图所示剪切背景图片，然后将其粘贴到一个新的文件中。就像在Photoshop中那样，这个图案将会在CSS文件中使用背景图片属性来实现。这就是为什么我们要将图片剪切到这么小，为的是以小的文件得到更好的效果。
要剪切页脚只需要在参考线内选择图片的内容，然后将其剪切并粘贴到一个新的文件中。
选择存储存储为网页和设备命令来保存这两张图片。然后选择JPG格式和合适的品质。JPG格式和PNG格式都是存储图片的很好的格式，他们可以保存很多的颜色。GIF格式最好用于颜色简单的图片。这种不同的用法是由于不同的算法得来的。
最终的页脚
如何用Photoshop制作网页模板
网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再。 不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称(如：“网页顶部”)，确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中(见图1)。同样方法可以建立多个组，在组的下面还可以建立子组。 点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。 小提示： ★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。 从Photoshop到Dreamweaver的转换 在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的修改。 第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具(快捷键为K)，把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号(见图2)。 第2步：在工具箱右击切片工具，从弹出菜单中选择“切片选择工具”，用它可以选取、移动切片，并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。
本文相关文章：
2026年10月8日 09:30
2026年10月6日 18:40
2026年9月24日 09:40
广告设计模板网站（信息流广告落地页怎么做有没有什么网站或者模板推荐）
2026年9月23日 15:00
2026年9月8日 05:20
2026年8月23日 14:40
网店运营基础知识（淘宝电商运营基础知识是哪些，怎么做好电商运营）
2026年8月21日 11:20
2026年8月20日 05:40
创建网站目录结构时要注意哪些问题（创建网络目录时我们应该怎么做）
2026年8月16日 08:20
2026年8月9日 12:10
更多文章：
2026年10月15日 04:50
2026年10月15日 04:40
2026年10月15日 03:40
2026年10月15日 02:30
2026年10月15日 01:40
2026年10月15日 01:30
2026年10月15日 01:20
2026年10月14日 23:40
2026年10月14日 22:20
2026年10月14日 18:40
