下面是范文网小编收集的ps网页设计教程3篇 PS网页设计制作教程，供大家赏析。
ps网页设计教程1
使用 PHOTOSHOP设计网站
教学项目及主要内容
焦雅玲
本课程选择了使用PS设计网站典型的６个项目，总学时共计６4学时。具体教学项目如下：
项目一 网页元素之LOGO 的设计
学时：6
１－１
LOGO的基本常识、常见表现形式以及设计原则
１－２ 子项目１：临摹GEARHEAD公司LOGO １－３ 子项目２：临摹宝马公司LOGO １－４ 优秀LOGO赏析 １－5 考核及总结：设计自主网站的LOGO
项目二 网页元素之导航栏的设计
学时：8 ２－１ 导航栏的基本常识、常见表现形式以及设计原则 ２－２
子项目１：临摹工业化网站导航栏 ２－３ 子项目２：临摹异形导航 ２－４ 优秀导航栏赏析 ２－5 考核及总结：设计自主网站的导航
项目三 网页元素之BANNER的设计
学时：10 ３－１ BANNER的常识、表现形式以及设计原则 ３－２
子项目１：临摹动态广告--北大青鸟广告 ３－３ 用PHOTOSHOP制作动画的原理 ３－４
子项目２：临摹动态广告--我的博客 ３－５ 优秀BANNER动画赏析
３－６ 子项目3：临摹静态广告--网页设计师大赛 ３－7
子项目4：临摹静态广告--动漫学院
３－8 考核及总结：设计网站内所需的各种宣传广告
项目四 UI界面设计
学时：8 ４－１ UI的基本常识及设计原则 ４－２
子项目1：CRM系统登录界面 ４－３ 优秀UI赏析
４－４
子项目2：CRM系统界面
４－５
考核及总结：为自己的网站加入UI界面
项目五 项目实战—网站前台界面设计
学时：24 ５－１ 子项目1：银行网站首页--需求描述 ５－２
子项目1：银行网站首页—案例分析 ５－３ 子项目1：银行网站首页--推荐步骤
５－４ 考核及总结：完成自主网站的首页及子页设计
项目六 裁切网页效果图
学时：8 ６－１ 切片的基本原理及相关知识 ６－２
子项目１：七维空间 ６－３ 子项目２：九洲商务网 ６－４ 子项目3：城市健康网
６－５ 考核及总结：将自主网站切片
ps网页设计教程2
制作一个好的网页，需要的内容也是非常多，其中有按钮、横幅、图标及其它素材等。制作的时候先规划好大致的框架，然后由上至下慢慢细化各部分的内容，注意好整体搭配。最终效果如下：
1、在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构.从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构。
2、构造了结构之后我们继续.打开16栏式的PSD模板文件.打开 “图像>画布大小”.把画布的宽度设置为 1200px 高度设置为 1700px.把背景色设置为 #ffffff既白色。
3、用长方形工具在顶部画一个宽100%高大概80px的长方形.用颜色： #dddddd填充它。
4、在长方形那层上面创建一个新层.按住CRTL键鼠标点击长方形层.长方形就被选中了，然后把目标移至刚建下。通过这个技巧你画出了一个微妙的照亮效果。你现在可以把这两层联合起来了。的新层上.选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几
5、建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形。
角度为-90,缩放为100%。
6、在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形.设置其由 #d2d2d0到 #ffffff的渐变色、现在我们如第五步那样添加照亮效果。这个技巧我们将很频繁地使用，因此下次用到的时候我只提示是第五步的效果。
在当前层之上简历一个新层。Ctrl+鼠标点击这个大的长方形。选择 600px的软笔刷, 设置颜色为白色，如图所示对选区的边缘点击多下。
8、创建一个新层画一个400px高的长方形。这是用作我们网页页头的。给它设置一个线性渐变，由颜色 #2787b7 to #258fcd。以下展示颜色的微妙变化。
9、在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果。阴影参数: 正底叠加, 透明度: 65%, 方向:-90, 距离: 1px，宽度: 6px。之后再建一个新层，在灰蓝色线下面画一条1px的白线。通过这种方式，我们就可以创建一个轮廓鲜明的边缘。可以说在你的设计中，你可以把这个技巧用于其他色块。
10、创建一个新层,在画布顶端用”长方形”工具化一个50px高的长方形,就如图所示，这个长方形是用作导航的。
11、为其添加阴影效果.参数如图所示。
12、开始话导航啦.使用”圆角工具”，设置半径为5px,画一个圆角长方形，用颜色 #f6a836 填充它, 之后给他添加以下效果: 内阴影-颜色: #ffffff, 混合模式:正底叠加, 透明度: 60%, 角度: 120*, 距离: 7px, 大小: 6px； 内发光 – 混合模式: 正常, 颜色: #ffffff, 大小: 4px.其他参数默认设置； 描边 – 大小: 1px, 位置: 内部, 颜色: #ce7e01。
13、Ctrl+鼠标点击层产生如图选区.选择：选择->修改>收缩然后在弹出框中输入1px，确定。
14、在上面再建一层, 把混合模式设置成叠加，然后好像第五步那样加照亮效果，不过这次用的是小笔刷。然后就是增加导航文字了。我用 Arial 字体作为导航的连接字体, 所有效果设置为 “无”。
15、现在我们开始创建搜索框, 圆角长方形，半径5px,在如第四步所示的网格的右边、顶端灰色背景网格纹中间创建一个用于搜索的色块.为它增加以下样式: 内阴影 – 颜色: #000000,混合模式: 正片叠加, 透明度: 9%, 角度: 90*,距离: 0px, 大小: 6px； 描边 – 大小: 1px, 位置:内部, 颜色: #dfdfdf。
16、给它添加”search”的文本和一个亮底暗色的”GO”按钮.如下图所示。
17、到目前为止已经创建了很多层了，为了条例清楚，我们建立一个叫”search”的层文件夹.把所有于搜索相关的层一并拖到这个层文件夹里面去.迟点，我们都会这样处理，可以让我们的创作更合理。
18、新建一个新层，然后就像画”搜索框”一样在这层上面画一个”Sign Up”按钮（字长刚好为背景长的一半）.把这个组合放在搜索框下方条纹竖直方向中间。
19、再一次如第五步那样创建亮光效果。
20、使用更小的软笔刷.这次的笔触大小为45px。
21、加了logo和网站描述之后，我们的网页就如上所示。
22、现在我们回到层结构那里提早做一些工作。创建一个空的层文件夹并命名为”top_bar”。移动所有的图层到这个文件夹里面（包括logo,条纹,搜索框,注册按钮，导航和背景）。
23、创建另外一个空层文件夹并命名为”header”。这里用于放置头部图层。如上图所示。
24、头部看起来有的平淡，因此我们可以再任意位置加相同的亮光效果。选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为“叠加”。
25、选一个大点的600px软笔刷，颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。
26、在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片，我用了我自己另外做的两个网页模板图片，缩放其中一个然后把他放在比较大的那个的下方。
复制这两层，用自由变换工具按住shift键等比例缩放一下，用长方形工具在上层的图片下端外部画一个选区，到选择->修改->羽化，填入30px或者大点羽化一下选框。（这里原教程说得不大清楚，我实现的方法是这样的：羽化之后选择反选，然后选取画笔工具，选白色，再在图片的左边角和右下角点击数下，然后用长方形选框和delete键修整边缘）。
27、为了让两个图片更加突出，可以新建一层，设置该层模式为叠加，重复第四步的效果添加的操作。
28、条纹之后，头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。
29、最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作，这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形（注意要画路径图），现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径，单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了，但是还是比较简陋。
30、如图创建了一个比较好的角。
31、选择直线工具，设置大小为1px。
32、按住shift键画灰色的分割线。
33、为每个切换标题添加小图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点于高亮状态。我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题
后裁切选区（按住alt画选区即可把不要的选区去掉）最终使选中的范围只有第一个按钮。
34、为了使激活的按钮更加明显，我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中
35、如上图所示即为所要达到的选区。
36、用一个更小的软笔刷，画出一个白色背景。
37、增加一个阴影：在切换菜单的后面如上图所示画一个深灰色的长方形。
38、点击图层区底部的小图标给该层增加一个蒙版。
39、把前景色设置为黑色，选一个大的软笔刷，在蒙版层上面点击（如图所示，蒙板上面出了白色之外的颜色会遮挡图层）使部分黑色去掉。结果，我们创建了一个比较好看的阴影效果。
现在我们就得到一条比较时尚好看的线了。40、最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变
41、现在切换菜单就像这样。
42、现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像（有好看的标题和一些文字内容）。因此我现在画一个白色有1像素灰色边框的长方形，再给它加上细微的阴影效果。先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计，从而创造一个多彩的效果
43、复制这一层并用变形工具稍微旋转。重复这个操作几次。
44、把你选好的图片导进来，放在白色长方形上面。不用担心图片会溢出，我们会修整它。选中最上层的长方形按选择->修改->收缩，输入5px,确认，然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围
45、这就是你现在图层的状态。
46、不要忘记整理图层，这里新建图层夹把图层归类。
47、增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。
48、再组织一下图层。
色的大概高220像素的长方形。设置其有1像素的灰色边。
49、我认为这一个部分要比较大的，因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡
50、然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。
51、最后写上文本就可以了。
52、终于要做页脚啦。画一个400像素高的、深黑色的长方形。
53、如第四步一样给它加亮光效果。
理。
54、下来，如图所示，在区域上方画一个10像素高的长方形，并且通过在顶端和底部各多加两条线增强细节
55、创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形，移动并变形使其40像素高。把这样：图像->画布大小设置即可。放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可
56、再次强化细节。给页脚的导航区顶端加一条白色边，这样有比较好的边框效果。
57、给页脚增加内容，你可以依据网格合理安置它们。
58、然后就是把页脚相关的图层整合起来。
最终效果：
ps网页设计教程3
网页设计教程
一、创建名为Test1的站点，并在其中按如下要求设计简单网页，如图所示。
要求：
①设置网页标题为自己的学号，网页背景为；
②插入一个3行3列的表格，表格边框宽度为1；
③第一行合并单元格，插入动画；
④第二行第一列标题的格式为蓝色、楷体、24Px、居中，正文缩进两个汉字、大小为18Px、左对齐；中间插入一个图片，其宽度为260、高度320；第三列是一个表单，其中姓名和密码的字符宽度和最多字符数为12；
⑤第三行的字体大小为18px；“友情链接”链接到 开始创建文档(Ctrl+N);高和宽均为1200 像素.使背景图层可编辑 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层(如果图层面板未激活,按下F7触发).另外一种方法, 你可以在背景层上击右键,选择 “背景图层”.一旦双击之后, 将会弹出对话框默认如下显示).输入你背景图层的名字按下确定;之后我们可以自由的编辑背景层.创建背景层 现在我们的背景层可以编辑了,双击图层缩略图增加渐变图层样式;根据下图设置样式参数.创建新图层(Ctrl+Shift+N)命名为 “header background“.选择矩形选区工具(M)在画布顶端绘制矩形选区;选区大概150px高,宽度与画布相同.使用任意颜色填充选区(Alt+Backspace)增加图层样式.6 建立新层(Ctrl+Shift+N)标志为 “navigation background“.重复4 – 5步, 只是这次的选区只有50px高, 宽度仍然与画布一致,并且一定要放置在上面选区的下方.填充选区(Alt+Backspace),任意颜色均可,并且增加一对图层样式,(颜色渐变以及描边选项).你看到的应该是这样.创建顶部 建立新层(Ctrl+Shift+N)标志位”header“,选择矩形选区工作,在菜单栏调整宽度为850px 高度为150px.将选区置于画布中央, 确保选区的底部在”navigation background”图层的描边之上.填充选区(Alt+Backspace)选择任意颜色, 然后增添以下样式.增加顶部文字 使用横排文字工具添加网站的标题和口号.设置参照下图.效果看起来应该是这样的.创建导航栏 创建新图层(Ctrl+Shift+N)命名为 “navigation“.使用矩形选区工具(M),设置固定大小: 850px 宽 和 50px 高.在顶部下面新建选区, 填充任意颜色.现在,为你的 “navigation”层增加3种样式.看起来应该是这样的.使用横排文字工具(T)在你的导航栏上面增加导航链接.增添导航经过按钮
16选择圆角矩形工具(U)设置半径为10px.画出一个小矩形大小为80px x 50px.使用矩形工具(M)在刚才圆角矩形的上半部分再画一个矩形.填充同样的颜色.19在图层面板右击选择新建的图层并且复制.将新复制的图层180度旋转,编辑> 变换 > 旋转 180.最后, 使用移动工具将两个新建的图形紧挨在一起并且处于同一水平线上.o使用矩形选区工具切除不想要的部分.在新建的图层下半部份新建一个选区, 按下 Del键清除.使用移动工具(V)和方向键对齐两个图形, 确保它们不是直接重叠.按照下图所示, Ctrl + 点击图层面板中的缩略图载入较小图形的选区.切换到较大图层按下del键清除不想要的部分.重复上述步骤,你将看到以下图形.改变链接经过样式
23当你的链接经过按钮一旦完成你可以删除副本, 然后重命名为”nav hover“.现在开始,为它增加一组图层样式.将 “nav hover”层移至 navigation 文字图层下方.将文字的颜色改为白色(#FFFFFF).在你”nav hover” 按钮图层的下方, 新建一个图层(Ctrl+Shift+N)命名为 “nav hover extra“.在本层上, 使用椭圆选区工具新建一个小圆,颜色设置为#切除椭圆被导航栏挡住的下半部分,调整到合适位置之后再复制一份.看起来应该是这样的.创建内容区域 建立新图层(Ctrl + Shift + N)命名为 “content area“.使用矩形选区工具, 新建选区宽度为850px , 与我们平时的框框一样,高度可以根据你的内容增加.填充任意颜色并且调整样式.拖移”content area(内容区域)”图层到”navigation(导航)” 层下方然后使用移动工具(V)调整内容区域,是它与导航栏相交的部分像凹凸不平的线.创建搜索框 新建图层(Ctrl+Shift+N)命名为 “search field“在导航区域的右边新建矩形选区.选择 编辑 >填充(Shift+F5)填充白色(#FFFFFF), 增加描边样式.31 使用横排文字工作在搜索区域插入文字.32 紧挨着搜索区域的地方,使用矩形选区工具(M)新建另外矩形.33 填充任意颜色并且为图层加入渐变叠加和描边两种图层样式;根据下面图片设置.看起来应该是这样的.创建特色区域
建立新层(Ctrl+Shift+N)命名为”featured area“,使用圆角矩形工具新建矩形,圆角半径为 使用多边形工具(L)创建锐利的箭头指向左上部分.为箭头填充同样的颜色.36 现在为你的特色区域图层增加一对图层样式(渐变叠加和描边).填充特色区域内容
建立新层(Ctrl+Shift+N)命名为 “featured border” 使用矩形选区工具(U), 在特色区域里面新建矩形.38 按Ctrl键点击区域缩略图载入选区, 然后点击”旋转> 修改 > 收缩”.收缩区域威10px, 然后按下 载入你想要的图片(我使用一些花的图片), 打开ps, 复制图片到你的剪切板(Ctrl + C).确保我们上一步创建的选区仍然处于激活状态,点编辑 >粘贴入(Shift+Ctrl+V).图片就会粘贴到选区里面.40 在图片右侧增加虚拟的标题和文字.创建内容区域的三维绸带
使用和导航经过按钮类似的方法创建左边部分, 区别在于这次重叠区域更加长,并且是水平调整(如果需要请重新跳回阅读).42 在绸带的结尾部分(右手边),使自定义形状工作(L)创建三角形 然后按下del键删除不需要部分.最后, 增添图层样式和虚拟文字.43 复制三维绸带,点击图层选择编辑 >变换> 水平翻转.使用移动工具调整(V)到右边;他们将作为侧边栏的标题部分
在每个标题下面增加文字或者一两张图片.创建页脚
再次创建鼠标经过按钮(或者, 你可以简单复制上面已经做过的).46 根据下图颜色列表更改渐变样式.47 合并并且旋转该层,通过 编辑> 变换 > 逆时针旋转90°.移动到图层左边.48 复制该图形通过编辑>变换>水平翻转.移动到图层另外一边.49 将两个图形合并到同一个层(Ctrl+E), 放大其中任一个图形(Z), 类似下图创建选区,选择编辑> 自由变形(Ctrl+T).50 选择中间的锚点拖拉到画布的另外一边.看起来应该类似这样.51 最后,使用横向文字工具写入你页脚的信息.
ps网页设计教程3篇 PS网页设计制作教程相关文章：
★ 国际网页Web设计流程3篇(网页设计web前端网站设计)
★ 实用的网页设计的实习报告3篇 网页设计实训报告的内容怎么写
★ 网页设计教程ASP入门教程静态网页和动态网页[模版]3篇(ASP动态网页设计)