如何用PS制作网页首页的效果图？

ps和fireworks可以用来做效果图。用这些工具做效果图的时候，只要注意柱子的布局和颜色的协调就可以了。用ps做网页效果图时常用的效果不多。你只需要掌握几种常用工具的用法:选择、剪切、着色、渐变、蒙版、剪切等。

新手可以在网上找一些比较好的模板，试着按照自己的想法修改。掌握了它们之后，他们就可以完全自己构思设计了！

Ps如何制作网页？

1

新建一个空白文件，打开“素材/网页素材1.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层 1”。使用“自由变换”调整大小。

2

使用 “矩形工具”将网页布局划分、颜色白色RGB为（255.255.255）、设置图层混合模式：投影

3

将形状图形载入选区。创建一个新图层“图层2”，使用 “渐变工具”颜色RGB为（178.178.178）（255.255.255）填充渐变效果

4

使用“移动工具”将导航条图片移至当前画布中，得到“图层 3”。使用“自由变换”调整大小

5

制作内容，打开“素材/网页素材3.jpg、网页素材4.jpg、网页素材5.jpg、网页素材6.jpg、网页素材7.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层 4”、“图层 5”、“图层 6”、“图层 7”、“图层 8”。使用“自由变换”调整大小。

6

使用 “横排文字工具”字体大小为14点、中文字体（幼圆）、颜色RGB为（143.86.46）输入每部电影的名称，效果如图所示。

7

打开“素材/网页素材8.jpg、网页素材9.jpg、网页素材10.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层 9”、“图层 10” “图层11”，使用“自由变换”调整大小。

8

使用 “横排文字工具”字体大小为18点、中文字体（黑体）、颜色RGB为（143.86.46）输入每部电影简介。效果如图所示。

9

打开“素材/网页素材11.jpg”文件，使用“移动工具”将表格图片移至当前画布中，得到“图层 12”，使用“自由变换”调整大小。效果如图所示。

10

使用 “横排文字工具”字体大小为18点、中文字体（宋体）、颜色RGB为（143.86.46）输入数字制作选择菜单。打开“素材/第9章/网页素材12.jpg、网页素材13.jpg”文件，使用“移动工具”将按钮图片移至当前画布中，得到“图层 13”、“图层 14”，删除不需要的背景，使用“自由变换”调整大小。

11

绘制矩形选区，单击按钮创建“图层15”，使用 “渐变工具”填充颜色RGB为（255.255.255）到透明的渐变效果。选择 “横排文字工具”字体大小为16点、西文字体（Verdana）、颜色RGB为（255.255.255）输入字体。

12

打开“素材/网页素材14.jpg”文件，使用“移动工具”将标志图片移至当前画布中，得到“图层 16”，使用“自由变换”调整大小。

13

使用 “横排文字工具”字体大小为40点、西文字体（Lithos Pro）、颜色RGB为（188.202.112）和（143.86.46）输入标题文字。

PS图页设计步骤？

1、打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择 “1024 x 768”，模式设计为“RGB颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。

2、新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。

3、在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768。

4、然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。

5、在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。

6、然后拖放图片到图层“主体元素”上，位置如图所示。

7、然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。

8、对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。

9、选择“切片”工具，然后对内容进行切分。切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。

ps怎么存网页格式？

步骤1、启动安装好的ps软件

步骤2、打开一张图片

步骤3、找到顶部的文件-储存为Web所用格式

步骤4、在弹出的对话框里面设置输出的参数，然后点储存

步骤5、弹出储存对话框

步骤6、在里面设置要保存的位置，文件名，最重要的是将格式修改成HTML和图像格式，然后点击保存

步骤7、然后在弹出的对话框里面点击确定，完成

总结：

1.启动ps软件，打开需要一张图片

2.点击文件-储存为Web所用格式

3.设置输出图片参数，点储存

4.设置储存位置，文件名，将格式修改成HTML和图像格式，然后点击保存

5.点击确定，完成

如何将网页导入PS内？

如果是网页文字，直接选中然后右击复制。

如果不让复制的话，你可以把整个网页下载下来，选择文件–另存为—保存类型是网页 htm，html。就可以下载下来了。

然后选择里面的文字，再打开ps，选择文字工具T，右击粘贴复制即可。

怎样快速制作一个图片展示的网页？

现在我们经常会在产品标签上加上二维码，让人扫描二维码后就可以看到一个简单的图片网页，可以了解更多产品的详细信息。那么这个网页要怎么制作呢？下面我们来看一个非常简单的方法。

1、将网页需要展示的图片在Photoshop里面排版好；

2、将排版好的页面进行切片，并将文件保存为web所用格式文件（切片可以有两个作用，一是防止因为图片太大，在网速一般的情况下很久都加载不出来，这样别人可能会认为网页有问题就关掉了；另一个是不同图片需要添加跳转链接的话会很方便）。

3、这样文件就保存为了一个HTML文件和一个images文件夹，可以看到我们刚排版的图片已经被切成一张张的图片保存在images文件夹中了。

4、接下来打开Dreamweaver，新建站点，填写站点信息，选择本地根文件夹（刚才保存文件的文件夹）和默认图像文件夹（刚保存的文件里面的images文件夹）；新建好之后就可以看到软件页面右边栏中有了刚刚新建的站点了，展开可以看到站点内的文件。

5、预览网页效果。点击工具栏上的小地球（快捷键F12），可以在浏览器中对网页效果进行预览。这时如果你没有保存页面，会弹出保存提示框，点保存就可以预览了。