Photoshop CS5网页设计
目录
00课程介绍 (2)
01创建文档 (2)
02缩放与抓手工具 (3)
03使用图形工具构画简单的图形 (4)
04利用渐变工具创建渐变效果 (11)
05文字工具的使用 (17)
06工作区 (21)
07理解图层 (24)
08图层样式1 (27)
09图层样式2 (30)
10画笔工具 (36)
11使用图片素材 (44)
12图层蒙版与剪贴蒙版 (47)
13创建镜像效果 (52)
14图层的融合 (58)
15创建页面之间阴影分隔线 (62)
16设计网站的菜单背景（两个图层的合并） (65)
17设计漂亮的按钮 (70)
18理解图片格式 (78)
19使用切片工具分割设计好的网站页面 (81)
00课程介绍
Photoshop
是目前被广泛使用的图形处理软件，在这个课程里我们会从最简单的创建文档开始，然后在
了解常用的工具去勾画简单的图形，为文字添加效果，为图形添加样式，帮助不同的图片融合在一起，介绍一些流行的网页设计效果，最后将用photoshop去设计一个漂亮的网页。01创建文档
首先打开photoshop css5用ctrl+n或者点击左上角的文件下的“新建”按钮创建一个文档，
弹出一个对话框。在名称中输入“演示网页”，在预设中选中“web”。大小设为1280*1680 像素，其他设置不变。如下图所示：
这样就得到一个空白的文档，photoshop提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。
第一个任务是更改背景色。选中拾色器，选中颜色，如下图所示：
选中图层，然后按组合键alt+backspace键，即可将选中的颜色铺在创建空白文档上。如下图所示
02缩放与抓手工具
在设计网页时，常常需要放大显示页面来调整一些细节，并且需要查看页面的不同位置，也会要缩小页面来查看一下网页设计的全局，这里就要用到缩放和抓手工具。
缩放工具可以改变设计页面预览的比例。可以在工具栏看到缩放工具，选中之后可以看到一个放大镜样的图标，点击鼠标左键后就可以放大设计页面显示比例。
如果想缩小页面显示比例，可以点击左上角的了。可以按住alt键，然后
滚动鼠标的滑轮，在放大和缩小之间来回的切换。
性栏中的“实际像素”或者“适合屏幕”按钮，就可以看到页面的实际尺寸，或
者用快捷键ctrl+0。如下图所示：
广西交通职业技术学院信息工程系作品设计报告书 题目：PS网页设计 班级 学号 姓名 指导教师 2010 年6 月
目录 一、设计目标 (3) 1.1内容 (3) 1.2功能 (3) 1.3实现方式 (3) 二、设计指导思想 (3) 2.1技术背景 (3) 2.1.1网页设计 (4) 2.1.2图形编辑 (4) 2.1.3平面设计 (4) 2.1.4主流软件 (4) 2.2开发环境 (5) 三、设计内容及制作步骤 (5) 3.1页面展示 (5) 3.1.1成品展示 (5) 3.2.2参考作品 (6) 3.2制作构思 (7) 3.2.1板式 (7) 3.3.2颜色 (7) 3.3制作流程 (7) 3.3.1背景 (7) 3.3.2LOGO (8) 3.3.3导航条 (9) 3.3.4板块 (9) 3.3.5板块内容 (10) 3.3.6板块文字美化 (11) 3.3.7页尾 (11) 四、设计制作进度表 (11) 五、作品提交清单及运行环境要求 (12) 5.1文件清单 (12) 5.2运行环境要求 (12) 六、相关问题及结束语 (12) 6.1相关问题 (12) 6.2结束语 (12) 6.3感悟 (13) 七、参考资料 (13)
一、设计目标 1.1内容 通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上应按一个正规网站来设计。 1.2功能 对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。 另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。 本网站的建设主要是建成一个集在线阅读、书籍下载、文化新闻等功能于一体的商业化网站。 1.3实现方式 运用PS相关功能，设计出一个静态的页面，然后通过HTML输出，得到一个基本的网页文件。 二、设计指导思想 2.1技术背景 对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet 的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息
PS网页设计与制作
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop 设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。 二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理
解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通
过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点 主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案 八、教学过程
龙源期刊网 https://www.doczj.com/doc/7517595022.html, Photoshop在网页设计中的作用 作者：王潇潇 来源：《当代旅游（下旬）》2017年第08期 摘要：近年来，photoshop软件作为一种功能强大的图像处理软件，广泛应用于网页制作中，通过应用photoshop可以使网页背景与前景之间配合紧密，实现网页底纹无缝连接，从而使图像传输效率提高。随着我国信息化进程的不断推进，在网络发展过程中网页制作发挥着重要作用，本文就对photoshop在网页设计中的作用进行探讨和介绍。 关键词：photoshop；网页设计；作用 Photoshop是当前社会各界公认的具有完善功能的性能稳定的一款平面图像处理软件，具有误差小、效果好、精确度高等诸多特点，在具有丰富的图像信息网络系统中承担着重要作用，并在图像处理、广告设计、美术设计等多个领域中均得到应用，在网页设计中也取得了良好的应用效果[1]。网页设计是整体设计，在设计过程中需要确保图像和网页设计主旨保持统一，并和网页背景、其他各项元素等都要紧密配合。 一、Photoshop在网页设计中的应用 （一）新建图像文件 在新建的图像文件中，宽度和高度主要是根据网站页面大小进行设计，通常和浏览器分辨率相对应，常用分辨率为1280*800的像素，图像的宽度与高度可以设为1260*780，颜色模式采用红绿蓝，即RGB。在photoshop中通过RGB的颜色变化啦表现出光影效果，在经过处理后使图像作品可以和现实更加贴近，从而给人带来一种良好的视觉效果，使人产生心灵的共鸣。 （二）采用photoshop进行页面布局设计 网站的设计中其设计方法多样，根据不同的功能，不同的主题进行设计。用户在对网页浏览时，网页上部和左上部是用户最先浏览的位置，然后依次往下阅读，并呈F形，因此在页面布局的设计中，网站热点、头条、导航栏、站名和站标等重要元素需要集中在关键区域中，而主题表现主要是通过造型设计体现出来的，而造型设计的巧妙不仅会给用户带来良好的视觉享受，也能表现出网站的主题，从而突出网站功能[2]。在采用photoshop来对网页进行设计时，需要突出设计感，并通过别致的造型和强有力的元素体现出网站主题，photoshop因图像处理功能强大，在个人网站和企业网站設计中发挥着重要的作用。在页面布局中可以先采用线条在页面中画T字，将画面分割为三个部分，最上面设计广告条、网站名称和标志，左侧为导航栏、右侧将最大空间留给网站内容；其次建立多个图层，并将网站内容分别放在不同图层中，进行绘制和处理，而采用photoshop的渲染功能和图像整合功能就可以完成。
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点
主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 1.展示范例，吸引学生的注意力，调动学习的积极性 2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？ 3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。观看放映 聆听老师 观察素材文件 并进入创设情境 思考并发表自己的看法
浅谈Photoshop在网页布局设计中的意义与方法
摘要 当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验，对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。本文针对这个现象，对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述，特别是对Photoshop的切片功能和操作方法做了详细的说明，这对于初学网页设计的人员来说更具有指导意义。 关键词：网页设计Photoshop 布局 现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 网页布局设计的软件很多，如Dream weaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视
了Photoshop 在网页规划布局中的作用。初学者知道Photoshop 是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。 一、Photoshop 在网页布局设计中的作用
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡ Ｂ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格 一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K
Photoshop CS5网页设计 目录 00课程介绍 (2) 01创建文档 (2) 02缩放与抓手工具 (3) 03使用图形工具构画简单的图形 (4) 04利用渐变工具创建渐变效果 (11) 05文字工具的使用 (17) 06工作区 (21) 07理解图层 (24) 08图层样式1 (27) 09图层样式2 (30) 10画笔工具 (36) 11使用图片素材 (44) 12图层蒙版与剪贴蒙版 (47) 13创建镜像效果 (52) 14图层的融合 (58) 15创建页面之间阴影分隔线 (62) 16设计网站的菜单背景（两个图层的合并） (65) 17设计漂亮的按钮 (70)
18理解图片格式 (78) 19使用切片工具分割设计好的网站页面 (81) 00课程介绍 Photoshop 是目前被广泛使用的图形处理软件，在这个课程里我们会从最简单的创建文档开始，然后在
了解常用的工具去勾画简单的图形，为文字添加效果，为图形添加样式，帮助不同的图片融合在一起，介绍一些流行的网页设计效果，最后将用photoshop去设计一个漂亮的网页。01创建文档 首先打开photoshop css5用ctrl+n或者点击左上角的文件下的“新建”按钮创建一个文档， 弹出一个对话框。在名称中输入“演示网页”，在预设中选中“web”。大小设为1280*1680 像素，其他设置不变。如下图所示： 这样就得到一个空白的文档，photoshop提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。 第一个任务是更改背景色。选中拾色器，选中颜色，如下图所示：
Ps网页设计要点 文档尺寸 一般网页尺寸设在宽度1000~1008左右（一般宽屏显示器）或708~900（非宽）高度根据内容定；分辨率设为72px； 字体 尽量使用宋体或黑体，否则会出现网页字体不兼容，在设计时正文内容字体样式选【无】，标题字体样式选【锐利】，要经常按【Ctrl】+【1】在100%的浏览模式下看字体是否正常；如有特殊字体需切成图片处理；正文字体大小设置在12px或14px；标题字体大小可以设置为14px或18px 参考线 要经常设置参考线精确各板块之间的位置能确保在dreamwave中精确排版；也方便切图； 配色 尽量将颜色控制在1~3种，过多会显得杂、乱、脏，背景颜色和文档颜色要统一协调； 布局 可以参考各种网站，参考他们的布局，根据他们的布局来修改成自己的布局；保存 如为切片图片尽量使图片大小减小保持在50k以下；图片尺寸能小的尽量小，大图读取慢影响网页速度；一般按【Ctrl】+【Shift】+【Alt】+【S】保存为gif格式的
Dreamwave中DIV+CSS要点 CSS样式中书写习惯要好 写CSS样式时要有自己的良好的书写习惯，如本人写样式分以下布局：1.页面整体布局；2.页面板块布局；3.页面中各种图片样式；4.页面文字样式；这样分割可以方便以各种参数的修改；写样式时不能用纯数字命名，否则样式不成功；优先度 样式中id的样式比class先执行；页面中直接写的样式最先执行； 基础样式 一般CSS样式开始要对整个页面的样式定位一下，现在很多也定位过复杂，我们可以进行快捷方便的定无需像某些网页开头繁琐的写样式，可以写成如下格式： *｛margin:0; padding:0; list-style:none} (所有外边距为0；内边距为0；列表样式无；） Body{font-size:12px;} （全局字体大小为12px） A{color:#000; text-decoration:none: cursor:pointer;} （超链接字体颜色；字体下划线：无；鼠标放上去为手的形状；） A:hover{color:#f00;}（超链接鼠标经过颜色） Img{border:none} （图片边框：无） .clear{clear:both} （可以认为是另换一行或隔行用；） Div水平居中 可以先设置div宽度如：
样式： .index{width:1000px; margin:auto} float的使用 如果在同一行要有好几个板块可以用float浮动过去；如：ps网页设计教程 设计网页的方法很多，常见的有直接编写代码方法，利用可视化软件设计(例如DreamWeaver)法，利用中间软件实现格式转换法(例如Word生成HTML代码)，还有就是PS设计网页法。综合各种设计方法的优缺点，可以得出利用PS 设计网页通常可以达到意想不到的效果，这不只是取决于他可以随意布局图片，更得意于其专业的图像处理能力。下面小编就给大家展示一下PS设计网页的独特之处。 工具/原料 Adobo PhotoShop IE浏览器 方法/步骤 1 打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择“1024 x 768”，模式设计为“RGB 颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。 2 新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”
效果。 3 在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。 4 在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上，位置如图所示。 5 然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。 6 对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。 7
ps网页设计页面设置 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片，FLASH格式 图文混排各频道不同 15K 弹出窗口 400*300(尽量用gif) 40K BANNER 468*60(尽量用gif) 18K 悬停按钮 80*80(必须用gif) 7K 流媒体 300*200 30K 播放时间小于5秒60帧(1秒/12帧) （可做不规则形状但尺寸不能超过300*200） 网页中的广告尺寸 1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*60 4.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*60 7.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*60
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”。 效果如文件“04创建布局块之三FeatureStory.psd”所示。 五、创建布局块之四（Ads） 1、保持矩形选区框样式为“固定大小”，大小为320x590像素； 2、在图层“FeatureStory”上建立一个图层，命名为“Ads”； 3、选中图层“Ads”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“05创建布局块之四Ads.psd”。 效果如文件“05创建布局块之四Ads.psd”所示。 六、创建布局块之五（Footer） 1、保持矩形选区框样式为“固定大小”，大小为990x100像素； 2、在图层“Ads”上建立一个图层，命名为“Footer”； 3、选中图层“Footers”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“06创建布局块之五Footer.psd”。 效果如文件“06创建布局块之五Footer.psd”所示。 七、建立广告区域布局参考线 1、清除参考线； 2、设置广告区域布局参考线： （1）横向4对参考线，分别为440、582、725、868像素； （2）纵向2对参考线，分别为690、840像素； 3、将文件存储为“07建立广告区域布局参考线.psd”。 效果如文件“07建立广告区域布局参考线.psd”所示。 八、创建广告区域布局块（Ad1-Ad8） 1、保持矩形选区框样式为“固定大小”，大小为125x125像素；
PS网页设计中切片使用教程 1使用切片 【切片工具】通常是在设计Web页中用来分割页面的工具，就像在Dreamweaver中绘制表格一样，在ps中我们同样可以使用【切片工具】直接在图像上绘制切片线条，或使用图层来设计图形并创建基于图层的切片。 ps中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分，并对每个部分应用不同的压缩和交互设置。【存储为Web和设备所用格式】对话框可让我们在存储为一些网页兼容的格式之前，预览不同的优化设置并调整颜色调板、透明度和品质设置。当然对图像切割的最大好处就是提高图像的下载速度，减轻网络的负担。另外，分多块下载的图像，在视觉上，也会给观众以“进行中..”的感觉，在心理上给人以下载速度快的错觉。 虽然在网络上很多图片都进行了切割，但在正常显示状态下，我们完全不能直接看出哪些图片被切割过，而哪些是完整的。因此，切片无疑是一种巧妙的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过，可以在网页中的文本区域往图片区域拖曳，如果图片分小块变暗变蓝，则该图片是被切割过的，如图1所示。
图1 切片使用HTML表格或CSS层将图像划分为若干较小的图像，这些图像可在网页上重新组合成完整的图像。通过划分图像，我们可以指定不同的URL链接以创建页面导航，或使用其自身的优化设置对图像的每个部分进行压缩。而在ps中，提供了“切片工具”和“切片选择工具”两种实现切割图像的工具，如图2所示。 图2 对于我们设计的网页版面，用户可以考虑手动进行切割，以区别出文本或图像区域。而对于普通用来展示的图像，完全可以进行均匀的简单切割，这样会更加快速和高效。当选择了“切片工具”后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，如图3所示。
PS网页设计注意事项 1.页面宽度和高度 网页宽度尺寸：现在用户电脑分辨率以1024*768分辨率较为普遍，页面宽度一般上控制在960px-1003px，如果超过1003px，浏览器将会出现左右滚动条，不够美观。有老师疑问，分辨率分明是1024怎么走出1003就出现滚动条了呢？是以IE浏览器为准，IE浏览器显示的范围只有1003px，剩下的21像素刚刚好是IE上下滚动条的宽度。 网页高度尺寸：一般设计首页效果图高度有限制，（高度具体根据首页内容而定），网站内页，高度不做限制，注意设计高度要随着页面内容拉伸，保证页面的左右是一个整体。 2.页面布局 网站首页页面布局，可以分为左、中、下结构。注意：每个部位的距离，要根据一定的规律去做排版，注意利用版心线，网格等控制网页部位的比例。3.栏目布局明确一个网站有很多的页面和主题、链接，这就需要注意其流畅的导向性。要做到使页面合理流畅、环环相扣、可信安全，这几点是一个优秀网站的精神所在，也是吸引力的来源。强调要
注意要网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。 4网页留白 注意控制留白之间的距离，如上、中、下之间的距离，左、中、右之间的距离，甚至网页上每个模块与模块之间的距离，模块内容距离边界的距离，文字与文字之间的行高等，要保持距离。 5页面内容翔实 网络是虚拟的，而网站往往体现的是现实世界中的一个实体，如学校或个人。如何把这些实体的元素通过虚拟的网络空间来展现出来，并且引起浏览者的注意呢？只有那些极富特色、内容翔实、浏览顺畅、效果独特的网页才能使人驻足观看，及使用、功能和服务容于网站之中，从而达到网站的特定目的。 6.网页中的文字（特殊字体慎用） 要避免你所选择的字体在访问者的计算机上不能显示，特殊字体要慎用！一般中文网正文文字大小多为12px，门户网站的正文多为14px。英文文字大小多为9px，标题文字多为14-16px加粗。