如何用PS来设计简单的网页？

~

PS软件应用十分的广泛，修改图像，运用图层蒙版设计简单网页，文字排版，网页优化，包括导航图，网页底端的页脚，网页主题内容，特效文字的制作，动作按钮的设计等。今天和我一起来学习如何用PS来设计简单的网页这篇文章吧。

1、新建一个800X600像素的空白背景，颜色模式设置为RGB模式。RGB模式颜色是由红色，绿色，蓝色三种颜色相交构成，可以更好的显示网页中的色彩内容。

2、新建文件，点击确定，空白文件会自动显示在软件中。对于新建空白文件来说，图像的宽度和高度的大小要按照等比例进行设计，也可以不勾选重新定义新像素来实现。

3、打开一张车的图片，移动到白色背景画布中，选择圆角矩形工具，选择路径为了方便转换为选区，设置为5个像素，像素越大，圆角矩形的四个圆角就是更加的明显，然后选择渐变工具，选中系统自带的黑白渐变，修改黑白渐变的颜色，改为灰白，也可以设置前景色为灰色，背景色为白色进行渐变的填充，然后点击确定。

4、然后选择工作路径，鼠标CRL点击工作路径，设置为选区，选中线性渐变类型，然后画出渐变的颜色。渐变的方向是从上到下为白色到浅灰色的渐变效果图。

5、然后选择修改收缩2个像素，就是将选区收缩小2个像素，变小一些，然后再次从下向上渐变，然后alt快捷键复制2个，如图所示，然后找到车的一个的图标按钮，然后用磁性套索工具勾勒好，然后鼠标左键拉动到合适位置，然后选择3个图层，然后水平分布，和居中分布对齐。然后选择左对齐分布，分布均匀。分布按钮是在选择工具上方的工具栏中，有平均分布对齐等多个按钮。

6、然后再次用钢笔工具勾画另外一个车的图标，然后再用自由变换调整到合适位置，然后点击2个图层之后，进行左对齐分布。分布到形状中的最左边位置即可。

7、再次选择一个不同的车的图标设计图片，然后用钢笔工具进行勾画图标，或者为了方便，可以直接用魔棒工具来选择，选中其需要图形的一部分。

8、然后再次选中图形，形状图形，全部选中相应图层，调整水平分布和左对齐分布。当分布不均匀，可以按住鼠标左键自动进行调整。

9、所有的图标都自由变换，调整到合适位置，如图。按住crl+t来实现图形的自由变换的内容。如图

10、输入相应的文字，文字的颜色设置为黑色，将其三个文字图层，按住shift键和左右方向键进行移动调整来改变。之后将车的图片进行调整，便于观看，文字进行排版即可。

---

阳明区13066002125： 怎么用photoshop做网页 - ？
荆士马来： 1.先用Photoshop做一个网页图片;2.Ctrl+R调出标尺,在图片上绘制表格,框选出要做链接的部分;3.使用切片工具,按照绘制的表格划分切片4.以上步骤完成后,进行操作“文件”>“储存为Web和设备所用格式”,在打开的窗口中按照自己的需要为网页图片作设置,设置完成后,“储存”,保存类型“html和图片”,切片“所有切片”.5.接下来用Dreamweaver打开html文件,为其作链接及其它.6.最后保存就完了.还不清楚的话可以Hi我!

阳明区13066002125： 如何用photoshop制作网页 - ？
荆士马来： 网页背景设计好之后,使用切片工具划分,然后使用Dreamweaver制作表格,之后将图片逐个加入单元格,或作为背景,或作为图片显示.简单的就是这样啦.

阳明区13066002125： 怎么用ps做网页设计 - ？
荆士马来： 根据楼主的提问可以把问题分成2块理解 第一层怎么用PS软件设计网页 这个的话,一般你看上好看的网站之后保存为图片格式 导入到PS软件,调整好网页的大小,针对性的地方进行修改便可.第二层的理解是你不知道怎么把把设计好的网页导出为WEB所有格式.简单的图片格式的保存为网页格式的话 第一、在PS里面设计好网页 第二、利用切片工具把网页切成一块一块,要想提高页面访问速度的话就切片切的小一点 第三、保存为WEB所有格式 (图片及HTML) 这样的话你直接打开HTML的话 就形成了页面访问的网页了.

阳明区13066002125： 如何用PS制作网页???简单的 . - ？
荆士马来： PS做的是效果图而已,两个参数我告诉你1、网页的宽度你可以设置960px,这个是现在比较流行,宽屏显示器多现在,2、分辨率72px 就是这样,其它的自己发挥吧

阳明区13066002125： 怎么使用PS制作一个网页 - ？
荆士马来： 你好!准确的说,ps是制作网页的其中一个软件之一,制作网页有专用的“网页三剑客”:PS、DW、flash.想要做网页的话,你起码要会前两个,其中 ps在网页制作里面的作用主要就是:划分切片+图片处理.划分切片:就是将你在ps里面做好的网页版面进行合理的划分,划分为一个个小的切片,然后用DW对这些切片进行布局.图片处理:这个很好理解,就是对网页图片进行优化+处理,以节省空间和达到你想要的图片效果.最终的网页文件是在DW这个软件里面完成的,单靠ps做不出来一个完整的网页.

阳明区13066002125： 如何用Photoshop制作网页模板 - ？
荆士马来： 网页中的元素有很多,像Banner条、文本框、文字、版权、Logo、广告等.尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑. 不过图层一多,就显得很凌乱,可建立多个图层组来进行管理.单击图层面板右上角的小三角...

阳明区13066002125： ps怎么做网页 - ？
荆士马来： 我这样说,你应该能理解,你把你喜欢的网页截屏,然后打开PS,粘贴进去,用PS的各种工具修改为你喜欢的样式,然后用切片工具切成一块一块的,比如导航栏、菜单栏、滚动横幅等等如此,完了用dreamwaver或者其他网页制作工具,写点简单的代码把这些切片一块一块的连接起来,这样就完成了一个简单的静态页面,如果你学会了这一步,那么恭喜你你已经入门了!接下来就可以进一步学习网页制作的其他内容,一般从HTML+CSS+JAVASCRIPT学起,配合你的PS技术做网页前端比较容易入手!

阳明区13066002125： 怎样用Photoshop软件设计网站?？
荆士马来： PS只是图片处理软件,但你可以用它来设计网站,就好象画图一样,但要做网站,还是要用Dreamware. 在PS里设计好网站的效果图,尽量画漂亮点,然后将图切片,切片也要有技巧的哦,不然做出的网站容易变形.切好片就导出为HTML网页,用Dreamware打开这个网页,将里面的图片该作背景的作背景,留白的地方把图片删除了,节省资源,加上一些其他的东东,如:文字,超连接,动画这些,保存就可以了.

阳明区13066002125： 如何用photoshop制作网站页面 - ？
荆士马来： 1.先做图,这个需要很好的PS功底才行 2.切图,要知道网页结构才能切图 3.生成网页,PS本身能另存为网页 4.优化网页,需要使用DW软件来优化修改去掉多余的空白区域,背景优化. 5.制作成模板,如果要应用到相应的CMS中需要加入CSS代码和标签代码调用. 6.上线测试浏览器兼容性看是否错位,经过不停的修改后达到满意效果.做网页不容易,做网站更不容易,做个好网站是难上加难,如果是爱好学习一下也罢,如果想用在商业上最好专业人员来做,你只付钱就行了.

阳明区13066002125： 如何用photoshop进行网页设计 - ？
荆士马来： 你是想要在原来的设计下面加上一块空白,那可以选择“图象”-“画布大小”,在弹出的对话框中,先设置定位,如果在下面加长就点击向上的键头,这样就会在原图的下方加入空白,现在再输入设定高度数字就OK了!