怎么使用PS制作一个网页 - 怎么用ps做网页设计

你好！

准确的说，ps是制作网页的其中一个软件之一，制作网页有专用的“网页三剑客”：PS、DW、flash。

想要做网页的话，你起码要会前两个，其中

ps在网页制作里面的作用主要就是：划分切片+图片处理。

划分切片：就是将你在ps里面做好的网页版面进行合理的划分，划分为一个个小的切片，然后用DW对这些切片进行布局。

图片处理：这个很好理解，就是对网页图片进行优化+处理，以节省空间和达到你想要的图片效果。

最终的网页文件是在DW这个软件里面完成的，单靠ps做不出来一个完整的网页。

soso问问里答案：

首先是在Photoshop中制作网页的框架。网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。

不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中。同样方法可以建立多个组，在组的下面还可以建立子组。

点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。

小提示：

★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。

从Photoshop到Dreamweaver的转换

在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。

第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号。

第2步：在工具箱右击切片工具，从弹出菜单中选择“切片选择工具”，用它可以选取、移动切片，并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。

第3步：切分出所有图片后，执行“文件→存储为Web所用格式”命令，打开存储对话框，根据需要设置好图片的格式、调色板等参数后，点击右上角“存储”按钮调出保存对话框，选择HTML网页格式，使用默认设置，选择“所有用户切片”，保存即可。

第4步：在Dreamweaver中打开刚才保存的网页，添加文字并进行各种编辑修改就可以了。怎么样，简单吧！注意：Photoshop导出的实际上就是一个大的表格，所有空白的地方也都会转换为图片填充，在DW中编辑时，直接删除这些图片再添加相应的内容即可。

小提示：

★在Photoshop中编辑好图形后，点击工具箱最下面的按钮（快捷键为Ctrl+Shift+M），可以转到ImageReady里进行编辑，在这里，切片工具的功能更为强大，输出的图形控制也更丰富。

PS只是图片处理软件 如果非要说做网页的话就是切片工具了 可以按你的构想切成你想要的网页构架 PhotoShop中图片的切片工具的使用？ 提到图片的切片工具可能你并不太熟悉但是切片在网页中是很常用的一种图片处理的技术。

你可以在网上冲浪时经常看到整个大的图片被分块显示出来的效果。其实这就是切片的一个典型的应用方面。

切片的应用主要是用来适应网上数据传输的特点，大型的图片传输时造成了网页的的时间延迟。） 我们可以用切片向导来绘制切片： 1:view/rulers 用来显示出标尺，给切片对象定位。

2：分别拖动标尺左右两边的十字可以定位两边标尺的零点位置 3:view/slice guides 启动切片向导，用来辅助切片的割分。鼠标点击标尺按住不放，拖动左右标尺完成整个图片的上下左右的切分。

当然只是用来定位，真正的分割还要用下面的工具。 4：用工具箱中的切片工具，按向导的分割线来分开图片 5：每分割一部分，都会自动的弹出对象监控板 6：在对象监控板中，你需要设置切片导出的路径连接URL，命名方法 7：设置导出的图象质量也是切片工具的优点所在。

你可以将要求显示质量不高的切片，要低色素导出，将重要的部分用高传输质量导出。这样可以极大的减小整个图片对象的大小。

8：当然你可以分割中导出，也可以最后一起导出，注意这时一定要选种含有切片对象的导出方式。 9：完成切片的输出之后，当然就是将切片依次加入到网页中了。

重新组合切片要用到网页设计工具中的表格了。 10：怎么样！显示还不错吧。

网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。

尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。

单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。

把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中。同样方法可以建立多个组，在组的下面还可以建立子组。

点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。

小提示：★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。从Photoshop到Dreamweaver的转换在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。

有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。第1步：我们最终需要的，只是Photoshop中制作的图形和框架。

选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号。

第2步：在工具箱右击切片工具，从弹出菜单中选择“切片选择工具”，用它可以选取、移动切片，并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。

如果是给个人做，怎么做都无所谓。如果是在公司里给客户做。这一步不可少，出了效果图后，要给客户看。等客户确定不再修改时再做网页，目的就在于防止客户反复修改，动布局！

另外会做网页效果图，代表你的设计能力。用dreamweaver直接做的后果是边想边做，容易把设计思路搞混了！

据我所知，这样的教程基本没有。因为做网页效果图只要基本的操作，有时从别的网页截一块下来处理一下，直接用到自己的效果图上。

一般显示器分辨率 宽：1024 高： 768 宽减去滚动条的宽度， 一般为1003-1004 不会有横拉条 高度 根据页而定

网页设计需要的PS操作技术并不是很多，只要掌握基础就行了。

但是你想要做好一个稿子就不是那么简单了。

这当中有一些天赋的因素，但是更多的是学习。

你可以从模仿别人的稿子开始，渐渐的融入自己的东西。

.cn/

这个站素材丰富而且也有酷站收藏。

要做好网页设计，一定要多看，拼命的看并且吸收里面的东西，看看高手们是怎么处理细节的，这样慢慢自然会有提高。

是否可以解决您的问题？