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图层上面，新建图层。

PS网页设计与制作（主页）一、教材分析设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。

本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。

二、学情分析认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。

知识技能水平：在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS 的相关知识与技能，有一定的基础。

本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。

学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。

三、教学目标（一）、知识与技能1.了解主页大小，掌握设置主页大小的方法。

2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。

3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。

（二）、过程与方法1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。

2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高的理解与认识。

PS学生对．（三）、情感态度与价值观在信息技术课堂上勇于探索实践，只怕不动。

提倡学生多观察、多动手实践，不怕失败，通过作品展示自己。

四、教学重点主页大小设定、标题和图片的大小及位置、导航栏制作五、教学难点主页中各对象的大小及位置六、教学方法任务驱动、分层教学、同伴互助七、教学准备、学案极域多媒体网络教室、Photoshop cs5 八、教学过程教学教学活动学生活动设计意图阶段展示同个年龄段同观看放映1.展示范例，吸引学生的注意力，学的作品，可以吸调动学习的积极性聆听老师引学生的注意力，也更贴近学生的生活，引起更多的共创观察素材文件设情鸣，尽快进入学习境并进入创设情境氛围。

第9章综合案例制作课题第一节按钮制作课时教学内容1、掌握Photoshop制作按钮的方法2、了解网站首页的组成内容教学目标掌握Photoshop制作按钮的方法；了解网站首页的组成内容教学重点网站首页的组成内容教学难点掌握Photoshop制作按钮的方法教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：网站首页是一个网站的门面，要想设计出一个优秀的网站，就必须让它能引人入胜，能吸引每一个来访者的注意力，引起人们的好奇心。

优秀的首页是一个好的网站必须具备的要素。

在网页制作过程中，Photoshop 软件起到了重要的作用。

本章课程将学习网页的总要组成内容的制作方法。

提出疑问：老师现在有个问题,请一位同学来回答：网站首页包含了那些元素？由同学做答，老师补充并引入新课题：总要组成内容：按钮、GIF动画、网页LOGO、网页导航、网站首页排版等。

接下来看本节课案例效果图：二、新课教学（讲解法、提问法、示范法、练习法）1、新建文件，使用“圆角矩形”工具在工具属性栏中设置参数，固定大小值为（W:20,H:6）、半径为30像素。

绘制圆角矩形。

观察学生反映(对导入是否产生兴趣),并随着教师的讲解，引导出本节课要学习的内容。

此部分主要由老师来讲解，同时学生也配合着老师回答一些常见问题学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论2、制作圆角矩形选区，创建一个新图层。

点击“图层1”，确定它为当前图层，点击鼠标左键绘制固定大小的圆角矩形路径，按<Ctrl+Enter>键，将路径转为选区，如图所示。

3、填充颜色，打开工具箱中“拾色器”对话框，设置前景色淡蓝色RGB为（149.197.217）。

将圆角矩形填充为淡蓝色，得到如图所示的效果。

4、为圆角矩形添加立体效果单击图层面板中的【添加图层样式】按钮。

分别设置斜面和浮雕、内发光、光泽、渐变叠加、外发光、投影，如图所示。