一、photoshop在网页制作的作用
1、首先，做网页设计为什么要使用photoshop，photoshop是一个图形图像处理软件，而且是可视化的操作，可以让设计师更方便的进行操作。那有人会说Firworks可以设计网页吗，答案肯定是有的，因为Firworks也是图形图像软件，只是根据个人的操作习惯了，另外一般Firworks给人的印象是一个只会做GIF动画的软件，可能是对软件的偏见吧，现在绝大部分做网页设计都使用PS。从软件的角度来说，PS的功能会比FIR要强大许多！
2、从软件的界面的设计，到软件的实用性，以及特效的制作上，都有着不可超越的特性，而且photoshop还在不断的升级过程中，现在最高的版本是CS6，它不仅仅可以实现网页设计的制作以及平面设计效果图的制作，还可以制作GIF动画以及3D效果图！
3、做为做网页设计的平台，photoshop起着至关重要的作用，做网页设计，首先必须要有一个自己足够熟悉的平台，而且在操作上要有效率，后期做网页设计，效率是一个非常值得关注的问题。
二、在Photoshop中如何制作网页
1、首先是在Photoshop中制作网页的框架。网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。
2、不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中。同样方法可以建立多个组，在组的下面还可以建立子组。
3、点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。
4、★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。
5、从Photoshop到Dreamweaver的转换
6、在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。
7、第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号。
8、第2步：在工具箱右击切片工具，从弹出菜单中选择“切片选择工具”，用它可以选取、移动切片，并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。
9、第3步：切分出所有图片后，执行“文件→存储为Web所用格式”命令，打开存储对话框，根据需要设置好图片的格式、调色板等参数后，点击右上角“存储”按钮调出保存对话框，选择HTML网页格式，使用默认设置，选择“所有用户切片”，保存即可。
10、第4步：在Dreamweaver中打开刚才保存的网页，添加文字并进行各种编辑修改就可以了。怎么样，简单吧！注意：Photoshop导出的实际上就是一个大的表格，所有空白的地方也都会转换为图片填充，在DW中编辑时，直接删除这些图片再添加相应的内容即可。
11、★在Photoshop中编辑好图形后，点击工具箱最下面的按钮（快捷键为Ctrl+Shift+M），可以转到ImageReady里进行编辑，在这里，切片工具的功能更为强大，输出的图形控制也更丰富。
三、如何在Photoshop中设计网页的网格
1、第一种方法使用GuideGuide卡梅伦McEfee建立垂直列。这Photoshop插件被认为是处于测试阶段，但是从我与它的经验的一切工作得很好，甚至有谈GuideGuide 2的发布，其中将包括更多的功能。GuideGuide页面上可以找到安装说明。还有一个使用它的视频教程是由罗素布朗一起在Adobe。
2、确定利润率列和排水沟宽度，数量。然后点击“创建指南”。
3、如果你设计样稿的画布宽，做快速的数学运算，使保证金长度要限制你的960像素的网格允许。例如，如果在画布是1200像素宽，然后左，右边缘将每个120像素。
4、例如12列设置为120像素的20万像素的排水沟和利润率。
5、您还可以设置基线网格这样，但你最终很多导游。一个更好的选择可能是方法上的一个有特色的的迈克贵金属的方法及工艺视频...
6、这里是一个步骤的简要介绍设立一个可扩展的基线网格。
7、建立网格的基准值，然后创建您的图案模板。基线网格是由领先的正文中（或行高）。例如，如果您的设计的主体副本是在13点Helvetica，在18分的领先，那么你将成立一个18像素的基线网格。
8、创建一个Photoshop文件，该文件是您的基线网格的高度，填补了底部的像素，并留下其余的像素透明。在这种情况下，画布的尺寸将1个像素宽和18像素高。
9、“全选”，然后保存为一个新的模式。您可以通过编辑→定义图案...
10、转到调整图层→模式，并选择新创建的网格图案。
11、列和基线网格1的方法的一个例子。
12、你会得到一个可选的基线网格，您可以使用独立的垂直的柱网。基线网格，可以创建视觉上的混乱，当在顶部的设计样稿奠定。使用这种方法，它可以只在需要时进行切换。
13、如果你喜欢使用您的网格指南，这是更好的解决方案。
14、您可以隐藏和显示网格通过一个简单的快捷方式。
15、使用垂直参考线来标记文档中的其他元素，可很难，因为你可能会混淆他们与电网。
16、方法2相比，网格你的选择是不具体或全面（如设置的横向模块的高度）。
17、数学网格线的确定，不一定会配合像素网格。这意味着你的导游，可以在某些情况下，下降不均，并最终被定位实际像素的中间。
18、这种方法需要两个独立的进程相比只是一种方法，即将来创建一个垂直和基线网格，。
19、模块化网格模式是所有功能于一身的的网格解决方案。该工具创建一个垂直的柱状网格和基线网格所有作为一个模式。采用模块化的网格模式有两种方法：
20、除了对Photoshop的应用程序面板，这也适用于烟花，GIMP和微软Expression设计。请注意，您必须有最新的软件（Adobe CS5或等值的其他应用程序之一中）和本小组的互联网连接工作。话虽这么说，如果您已经创建了一个模式，并将其保存在资料库中，然后你就可以访问它，而无需任何其他。
21、浏览器，Firefox，Safari和Opera。Web应用程序使您可以创建一个网格模式和所有格式的浏览器直接下载。
22、无论你选择，随便挑一个模块的宽度，排水沟宽度和基线数量，以及模块化的网格模式，没有休息。您也可以指定一个水平模块的高度。
关于photoshop网页设计到此分享完毕，希望能帮助到您。
