PS网页设计与制作

在本教程中，你将学会如何在photoshop中制作一个漂亮的干净的网页效果图。

出自: 翻译:苏打苏塔设计量贩铺最终效果图看一看我们最终的效果图吧，看上去还不错:>在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px ×830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺(Ctrl + R)可以显示标尺。

3 在画布的四个边，分别拖拽四条标尺线。

在这四条线中间，我们将绘制我们的页面创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。

设置这个图层名字为“bg“.5 好了，现在，我们将扩大我们的画布。

首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。

10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态，点击图层>图层蒙版>显示全部。

12 在工具栏中选择渐变工具(G) ，从你的画布底部向上拖拽一个从黑色到透明的渐变。

可以根据下面的截图进行拖。

13 右键单击图层“gradient”,在弹出的菜单中，设定转换为智能元件。

14 点击滤镜>杂点>添加杂点。

根据下图设置参数。

15 新建一个图层，用画笔工具(B)，选择白色的软笔刷，直径为300px,在你的画布顶端，画一条白线。

16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面，新建图层。

Photoshop网页设计案例教学网页框图Photoshop网页设计案例教学详细操作步骤：一、创建文件及布局参考线1、创建文件，大小990x1200像素，RGB模式，白色背景，如图所示：2、设置布局参考线：（1）横向5对参考线，分别为140/150、470/480、740/750、1010/1020像素；（2）纵向2对参考线，分别为325/335、660/670像素；3、将文件存储为“01创建文件及布局参考线.psd”。

效果如文件“01创建文件及布局参考线.psd”所示。

二、创建布局块之一（LeadStory）1、设置矩形选区框样式为“固定大小”，大小为660x320像素；2、在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”；3、在“背景”图层上新建图层，命名为“LeadStory”；4、选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位；5、将选区填充为灰色；6、将文件存储为“02创建布局块之一LeadStory.psd”。

效果如文件“02创建布局块之一LeadStory.psd”所示。

三、创建布局块之二（Story1-4）1、保持矩形选区框样式为“固定大小”，大小为325x260像素；2、在图层“LeadStory”上建立一个图层，命名为“Story1”；3、选中图层“Story1”，用矩形选区框工具建立一个选区，将选区移动到位；4、将选区填充为灰色；5、用同样方法建立相同大小的图层Story2、Story3、Story4；6、将文件存储为“03创建布局块之二Story1-4.psd”。

效果如文件“03创建布局块之二Story1-4.psd”所示。

四、创建布局块之三（FeatureStory）1、保持矩形选区框样式为“固定大小”，大小为320x260像素；2、在图层“Story4”上建立一个图层，命名为“FeatureStory”；3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位；4、将选区填充为灰色；5、将文件存储为“04创建布局块之三FeatureStory.psd”。

ps网页设计知识点PS网页设计是指使用Adobe Photoshop软件进行网页设计的技术和技巧。

它涉及到网页设计的各个方面，如布局设计、图像处理、色彩搭配、文字排版等。

在进行PS网页设计时，掌握一些关键的知识点可以帮助设计师更好地进行设计和实现自己的创意。

一、布局设计在PS网页设计中，布局设计是非常重要的一步。

一个好的布局能够让网页看起来简洁明了，同时体现出设计师的创意和个性。

在进行布局设计时，需要注意以下几个要点：1. 网页的整体结构：包括导航栏、页眉、页脚等。

2. 内容的排列方式：可以采用栅格布局或自由布局。

栅格布局可以使得网页看起来更为整齐和规整；自由布局则能够更好地展现创意。

3. 空白与边距的运用：适当的留白和合理的边距能够有效地提升网页的可读性和美观度。

二、图像处理图像是网页设计中的重要元素之一，良好的图像处理能够提升整个设计的质量和吸引力。

以下是一些图像处理的技巧：1. 图片的优化：使用PS软件可以对图片进行优化，包括压缩、调整尺寸和保存格式等。

优化后的图片要保证在保持清晰度的同时，尽量减小文件大小，以提高加载速度和用户体验。

2. 色彩和对比度的调整：通过调整颜色、饱和度和对比度等参数，可以改变图像的效果，使其更符合设计的整体风格和要求。

3. 制作图标和按钮：PS软件提供了强大的图形绘制功能，可以用于制作网页中的各种图标和按钮。

通过巧妙的设计和绘制，可以使这些元素更加突出和美观。

三、色彩搭配色彩搭配是网页设计中的关键要素之一，合理的色彩搭配能够提升网页的整体效果和吸引力。

以下是一些关于色彩搭配的技巧：1. 色彩选择：根据网页的主题和目的，选择相应的色彩。

可以使用配色工具来辅助选择，确保色彩的搭配和谐统一。

2. 色彩搭配原则：可以运用色彩的对比、互补、类似和分层等原则来进行色彩的搭配。

通过巧妙地运用这些原则，可以使网页的色彩更加丰富和有吸引力。

3. 颜色的运用：在设计中，可以运用不同的颜色来突出某些元素，比如按钮、链接或标题等。

块也可实现透明度的调整。

：钢笔工具属于矢量绘图工具，使用该工具可以直接绘制直线路径和曲线路径。

单击工具箱中的钢笔工具所示。

所谓路径，就是用一系列点连接起来的线段或曲线，可以沿着线段或曲线进行
描边或填充。

路径组成的线条或图形称为贝塞尔曲线，该曲线是由3个点组合定义
而成的，一个点在曲线上，另两个点在控制手柄上，拖动这3个点即可改变曲度和
知识提示
图９－５９　“钢笔工具”属性栏 图９－６０　贝塞尔曲线
◎ 个按钮分别用于创建形状图层、创建工作路径、创建填充区域。

在绘制路径时一般都单击选择路径按钮。

◎ 按钮：和删除锚点单击工具箱中的钢笔工具，在属性工具栏单击“路径”按钮。

在图像窗口中需要绘制直线的位置单击鼠标，创建直线路径的第将鼠标光标移到路径的起点，此时鼠标光标将变成形状，单击鼠标即可创建一条封闭的路预览画笔设置画笔笔设置画笔大小、硬度、图９－５８　画笔面板设置。

课程作业2（图层的应用）：通过以下指导步骤，学会如何在photoshop中制作网页效果图。

最终效果图在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px × 830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺（Ctrl + R）可以显示标尺。

3 在画布的四个边，分别拖拽四条标尺线。

在这四条线中间，我们将绘制我们的页面。

创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。

设置这个图层名字为“bg“.5 好了，现在，我们将扩大我们的画布。

首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。

8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。

10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态，点击图层>图层蒙版>显示全部。

12 在工具栏中选择渐变工具(G) ，从你的画布底部向上拖拽一个从黑色到透明的渐变。

可以根据下面的截图进行拖拽。

13 右键单击图层“gradient” ,在弹出的菜单中，设定转换为智能元件。

14 点击滤镜>杂点>添加杂点。

根据下图设置参数。

15 新建一个图层，用画笔工具(B)，选择白色的软笔刷，直径为300px,在你的画布顶端，画一条白线。

16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面，新建图层。