《网页设计ps模板.doc》由会员分享，可在线阅读，更多相关《网页设计ps模板.doc（5页珍藏版）》请在金锄头文库上搜索。
1、网页设计ps模板篇一：PS制作网页效果图漂亮的绿色首页模板Photoshop详解制作漂亮的绿色首页模板在这篇教程中，你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧，像是如何制作3D丝带，或者是如何设置看上去很专业的渐变色。这是教程的第一部分。最终效果图看一看我们最终的效果图吧，看上去还不错:在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px 830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图标尺（Ctrl + R）可以显示标尺。3 在画布的四个边，分别拖拽四条标尺线
2、。在这四条线中间，我们将绘制我们的页面。创建页面背景4 选择圆角矩形工具 , 设置圆角半径为 10px， 设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为 “bg“.5 好了，现在，我们将扩大我们的画布。首先，缩小我们的画布视图，然后点击图像画布尺寸，然后根据下面的截图设置参数。6 再一次选择 图像画布尺寸 ， 然后根据下面的截图设置参数。7 在图层面板中点击背景图层，设置前景色为 #6C821C，用油漆桶填充背景。8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具 ，从画布头部开始向下拖拽出一个从白色到黑色的渐变。 10
3、设置该图层渲染模式为颜色加深 ,然后设置图层图层透明度为 10%.篇二：PS制作网页模板先整理好需要做的内容至一个文件夹中。打开photoshop新建一个空白面板。选择矩形工具绘製一个980*auto的图形。结果如下：使用选择工具点击边缘节点。在菜单栏下方可看见图片的宽与高。点击背景图层，再按下shift键点击新建的图层。按下选择快捷键V，在菜单栏下方会出现对齐选项。选择居中对齐。从标尺区域按下鼠标向右拖动会形成一根辅助线。拖至矩形边缘自动吸附即可。篇三：如何用photoshop输出html网页如何用photoshop输出html网页20XX-11-03 14:52在修改好相应的文字与图象之后
4、，我们就将PSD文件输出HTML文件。首先得先对PSD文件做切片，有两种方法：使用工具栏上的“切片工具”，然后在图象上划出一块一块的区域。使用基于参考线的切片，按ctrl+R调出标尺栏。把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。接下来就可以输出了:依次选择菜单栏上的“文件”“存储为Web所用格式”“存储”。接下来就会弹出一个“将优化结果存储为”的窗口，如图在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所
5、以选择“HTML和图象”，再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。如果我们需要输出“div+css的网页”我们还可以这么做：在“设置”处的下拉列框，选择“其他”就会弹出一个“输出设置”的窗口在第2个下拉列框处选择“切片”选择“生成CSS”单击“好”“保存”就可以输出一个目前流行的“div+css”的HTML网页。其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：1.打开fireworks将图片切割导出为html。2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。3.先在ps中完成切图后，在文本xx器中看着效果图一步步的制作。以上是大多被采用的方法，但都不好：第一种方法最为不好，这样的代码根本不具维护性和可读性。第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。正确的做法是：1.拿到psd后，先不要做别的，直接在文本xx器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。2.写完之后在各个浏览器运行之后确保大体定位都没有问题。
