PS网页设计中切片使用教程
1使用切片
【切片工具】通常是在设计Web页中用来分割页面的工具，就像在Dreamweaver中绘制表格一样，在ps中我们同样可以使用【切片工具】直接在图像上绘制切片线条，或使用图层来设计图形并创建基于图层的切片。
ps中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分，并对每个部分应用不同的压缩和交互设置。【存储为Web和设备所用格式】对话框可让我们在存储为一些网页兼容的格式之前，预览不同的优化设置并调整颜色调板、透明度和品质设置。当然对图像切割的最大好处就是提高图像的下载速度，减轻网络的负担。另外，分多块下载的图像，在视觉上，也会给观众以“进行中..”的感觉，在心理上给人以下载速度快的错觉。
虽然在网络上很多图片都进行了切割，但在正常显示状态下，我们完全不能直接看出哪些图片被切割过，而哪些是完整的。因此，切片无疑是一种巧妙的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过，可以在网页中的文本区域往图片区域拖曳，如果图片分小块变暗变蓝，则该图片是被切割过的，如图1所示。
图1
切片使用HTML表格或CSS层将图像划分为若干较小的图像，这些图像可在网页上重新组合成完整的图像。通过划分图像，我们可以指定不同的URL链接以创建页面导航，或使用其自身的优化设置对图像的每个部分进行压缩。而在ps中，提供了“切片工具”和“切片选择工具”两种实现切割图像的工具，如图2所示。
图2
对于我们设计的网页版面，用户可以考虑手动进行切割，以区别出文本或图像区域。而对于普通用来展示的图像，完全可以进行均匀的简单切割，这样会更加快速和高效。当选择了“切片工具”后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，如图3所示。
图3
在弹出的“划分切片”对话框中，设置“水平划分为”和“垂直划分为”两项的纵向切片和横向切片的数量分别为“3”和“6”。可以看到图像上已经出现了切片的预览，如图4所示。
图4
除了之前所描述的切片优势外，切片最重要的是区分出网页中哪些是图像区域，而哪些是文本区域，并创建图文并茂的网站界面。使用“切片工具”的方法和使用选区类似，拖曳出希望切片的区域即可，如图5所示。
图5
除对于有些切片，本身就位于一个独立的图层，那么就更容易创建切片。首先选择该图层，然后执行菜单“”“”如图6所示。
图6
可以使用【存储为Web和设备所用格式】命令来导出和优化切片图像。ps将每个切片存储为单独的文件并生成显示切片图像所需的HTML或CSS代码。
在处理切片时，我们要记住以下几个基本要点：
可以通过使用切片工具或创建基于图层的切片来创建切片。
创建切片后，可以使用切片选择工具选择该切片，然后对它进行移动和调整大小，或将它与其它切片对齐。
可以在【切片选项】对话框中为每个切片设置选项，如内容类型、名称和URL。
可以使用【存储为Web和设备所用格式】对话框中的各种优化设置对每个切片进行优化。
可以在ps和【存储为Web和设备所用格式】对话框中查看切片。下列特性有助于识别并区分切片：
切片线条定义切片的边界。实线指明切片是用户切片或基于图层的切片；而虚线指明切片是自动切片。
切片颜色将用户切片和基于图层的切片与自动切片区分开来。默认情况下，用户切片和基于图层的切片带蓝色标记，而自动切片带灰色标记。
此外，【存储为Web和设备所用格式】对话框还使用颜色调整使未选中的切片变暗。这些调整只是出于显示目的，不会影响最终图像的颜色。默认情况下，对自动切片的颜色调整量是用户切片的两倍。
切片编号切片从图像的左上角开始，从左到右、从上而下进行编号。如果更改切片的排列或切片总数，切片编号将更新以反映新的顺序。
2 创建切片
2.1使用切片工具创建切片
选择切片工具。绘制的任何切片都将自动出现在文档窗口中。
选取选项栏中的样式设置，如图7所示：
图7
正常在我们拖动的同时来确定切片比例。如图8所示：
图8
固定长宽比设置高宽比。输入整数或小数作为长宽比。例如，若要创建一个宽度是高度两倍的切片，请输入宽度6和高度3。如图9所示：
图9
固定大小指定切片的高度和宽度。输入整数像素值。如图10所示。
图10
在要创建切片的区域上拖动。按住【Shift】键并拖动可将切片限制为正方形。
按住【Alt】键拖动可从中心绘制。
2.2 基于参考线创建切片
向图像中添加参考线。选择切片工具，然后在选项栏中单击【基于参考线的切片】。如图11和12所示：
图11
图12
2.3 基于图层的切片
基于图层的切片与图层的像素内容相关联，因此移动切片、组合切片、划分切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层，如图13所示。除非我们将该切片转换为用户切片。
图13
将自动切片和基于图层的切片转换为用户切片:
图像中的所有自动切片都链接在一起并共享相同的优化设置。如果要为自动切片设置不同的优化设置，则必须将其提升为用户切片。
使用切片选择工具，选择一个或多个要转换的切片。
单击选项栏中的【提升】。
3 切片选择工具
【切片选择工具】是在我们使用【切片工具】创建切片后，用来更精确的调整和划分切片用的，我们可以选择某个部分的切片，利用控制句柄来调整它的大小，也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。我们可以利用键盘中的【K】键来直接选择【切片工具】或【切片选择工具】。
选择切片通过使用切片选择工具对图片进行单击选择，按住【shift】键可选择多个切片。
移动切片选择切片后，按住鼠标左键不放进行移动，如图14所示：
图14
调整切片大小对切片大小调整方法有两种，一种通过切片的控制点进行自由调整，另一种通过双击切片，在选项对话框中进行调整。如图15所示：
图15
复制切片选择要复制的图片，按住【Alt】键进行移动。
组合切片选择要组合的切片，点击鼠标右键，选择【组合切片】选项。
更改切片的堆栈顺序选择切片，通过选项栏中的堆叠顺序选项进行更改。如图16所示。
图16 A.置为顶层B.前移一层C.后移一层D.置为底层
对齐切片选择切片，通过选项栏的对齐选项按钮进行对齐。如图17所示。
图17
A.顶对齐
B.垂直居中对齐
C.底对齐
D.左对齐
E.水平居中对齐
F.右对齐
分布切片选择切片，通过选项栏中分布按钮进行分布。如图18所示。
图18
A.按顶分布
B.垂直居中分布
C.按底分布
D.按左分布
E.水平居中分布
F.按右分布
删除切片选择【视图】—【清除切片】进行删除。如想删除某一个切片，可单击鼠标右键选择【删除】。
锁定切片选择【视图】—【锁定切片】。
注意事项：
切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图文并茂的网站界面；
切片前,先要仔细对设计进行分析,考虑要因设计制宜；
切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片；
切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。
1、输出背景
观察背景：
如果是单一颜色的,则不需要切片,网页制作的时候设置背景RGB即可；
如果是有规律的图片,那么按最小单位切一条几个像素的切片,单独优化输出,制作时不是插入图片而是作为背景图片可以横向平铺达到设计效果。
(为什么不是全部切片完了再输出呢,因为,背景图片上一般还会叠加其他的图片,如LOGO,就要输出透明背景的前景图片;有时切片会有重叠现象,所以采用分别输出的方法能达到比较好的效果。)
2、前景图片
(包括网站标识,特殊字体的标题,导航,中英文切换的文字连接,特殊的小图标，特殊的边角)
观察背景上的网站标识：
如果直接插入切片输出会连带背景图案一起输出,那样以后制作也面的时候可能标识部分的图和背景对接不好产生错位.切片的时候隐藏背景单独优化输出.
如果一张网页里面有重复用到的一张图,只需要切一个一次就可以了.
3、线
如果是直角的单色的边框,可以表格边框设置,就不需要切片
如果是不规则角(圆角,图案),可以单单切下框的角,然后观察剩余的线:按照如切片背景图案的方法进行切片.
4、切片命名
切片单独输出,可以按照其用途重新命名,如背景可以为MAIN_BG.GIF,网站标识为LOGO.GIF等,切记不要用中文命名,那样在制作的时候插入图片的图片名可能就是一大串乱码.
5切片保存
首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的方便.
FW切片导出时设置为"只要切片输出",如果按照"HTML和图像"输出会有很多的废代码,所以手动设置布局比较理想.
Photoshop中各个工具的使用方法： Photoshop的界面有菜单栏，工具选项栏，工具箱，图像窗口，浮动调板及状态栏等组成。 （1）菜单栏包括文件，编辑，图像，图层，选择，滤镜，分析，3D，视图，窗口，帮助等内容。 （2）工具选项栏位于菜单栏的下方，主要来显示工具箱中各个工具的属性，同时可以通过改变工具选项栏中的参数，来调整工具的属性。 （3）工具箱位于图像窗口的左侧。主要用来显示图像处理所需的各个工具。（4）图像窗口是主要的绘图及其图像处理区域。 （5）状态栏分为四部分：图像显示比例，文件大小，浮动菜单按钮及工具提示栏。 一．在photoshop中如何新建一个文件？ 在photoshop中新建一个文件有三种方法： ①单击菜单栏中的“文件”——“新建”出现“新建文件对话框”，在这里我们可以根据自己的需要来“预设图像大小（包括宽度，高度），图像的分辨率，颜色模式，背景内容（注意：photoshop中的透明背景是用棋盘格的形式来表示的。）”等； ②按住“CTRL+N”，出现“新建文件对话框”，即可进行如上设置； 二．在photoshop中打开已经存在的图像文件的方法： ①“文件”——“打开”——“框选要打开的若干文件”——“打开”，这样就可以同时打开多个文件； ②“文件”——“打开”——“按住CTRL键然后单击间隔需要打开的文件”——“打开”这样就打开了若干不连续的图像文件； ③在程序背景上双击，可在“打开”对话框下选择要打开的文件； ④“文件”——“浏览”——“选择文件”——“打开”。 三．Photoshop中的一些名词： 分辨率：是指单位面积图像内包含的像素数目，又分为图像分辨率，打印机分辨率和显示器分辨率。 图层：就好比一张透明的纸，可以在这张透明的纸上画画，没画的部位将保持透
在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。 下面先预览一下本教程的最终效果： 教程开始： 第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可; 第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;
然后设置图层的混合模式为叠加，不透明度设为23%; 第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。样式如图所示： 第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。 为了使活动链接显示的更突出，在其后便添加一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图： 给矩形背景图层添加内阴影和描边效果，具体设置参数如图：
第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。 然后你需要下载
广西交通职业技术学院信息工程系作品设计报告书 题目：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动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息
网页设计与制作构思 姓名：刘海梅 学号：20080514106 专业：08级电子商务 首先是网页的整体布局：因为是网页的自我介绍，所以采用了最简单的格式来布局。网页的左边用的是文字的介绍，右边就是自己的图片，将文字和图片结合起来能更形象的展现自己。 其次，网页整体是体现一个人的风格和思想，展现一个人的想法。而我想要突出的是一种希望，一种追求，一种宁静的生活，在漫无边际的黑夜，有着几颗明亮的星星，天空显得很宁静，但是当黑夜过后，黎明回来到，也就是一种希望，所以我选择的是黑色的背景颜色，然后添加了满天星星的小程序。 然后是自我介绍，自我介绍采取的是渐进的方式，跟着读者的眼球一点一点的往下播放，这个也是我自己根据一些小程序改编的。在自我介绍小面有一首谜底，因为自己喜欢和别人交流，所以是谜底的最后一句话添加了邮件地址，访问者可以点击“想知道答案”然后发
送邮件给我和我交流。网页的开头我设定了时间日期，时间会根据系统自己来调节。右边是我自己的照片，照片我用photoshop进行了色彩的调整，使其和网页的背景相符合。照片上面是一句“梦想随心飞”的动态图案，这句话是体现我的思想，就是有梦想是很好，但是心要向着梦想的方向努力，才能实现自己的梦想。在照片的下面插入了一个表格，分成3行，分别讲了有关于爱情、星座、神话的一些小故事，这些我添加了想左滚动的代码，使文字有序的向左滚动，并调整了滚动的次数、滚动速度等等，加入这些小故事也体现了我的个人爱好，在平时的生活中自己喜欢收集一些小故事，所以拿出来和大家一起分享，也体现对美好事物的追求。自己的照片也是一个超链接，链接到我的另一个网页“梦幻世界”，讲的是一个很唯美的小故事。在主页网站的下面有几张图片，这是为了使网页看起来不那么沉闷，可以说是为了美化网页添加上去的。这几张图片都是我精心挑选的，其中有动态有静态的图片，动态图片“很不错哦，支持一下”是希望大家喜欢我的网页，同时也是对自己的鼓励，希望自己努力！ 最后，在网页底部图片的上面添加了超链接“返回”，这是为了能很快的返回寝室的主页。我的个人介绍网页大体就是这样根据自己的思路而一步一步来展现的，其中的文字、图片都是经过自己的思考和挑选的，这样才能体现出我自己的想要表达的思想和自己喜欢的一些事物。
第一部分应知考试题库 2.1.2网页制作基础 1．填空题 （1）网页一般分为（）网页和（）网页。 （2）HTML是（）的缩写，意思为（）。（3）网页主要由（）、（）、（）、超链接等基本元素构成。（4）常用的制作网页的专门工具有（）和（）。 （5）如果属性面板被隐藏了，可以通过执行（）菜单下的“属性”命令来打开。2．选择题 （1）下面文件属于静态网页的是______。 （2）属于网页制作工具的是______。 A.photoshop B.flash C.dreamweaver D.cuteFTP （3）用于调整编辑窗口中被选中元素的属性的面板是_____ A.插入面板 B.属性面板 C.设计面板 D.文件面板 （4）在网页中经常用的两种图像格式是_______。 A.bmp和jpg B.gif和bmp C.png和bmp D.gif和jpg （5）下列说法正确的是_____。 A.动态网页使用应用程序解释器但不使用后台数据库 B.动态网页不使用应用程序解释器但使用后台数据库 C.动态网页不使用应用程序解释器也不使用后台数据库 D.动态网页使用应用程序解释器也使用后台数据库 2.1.3网站的创建与管理 1．选择题 （1）如果正在编辑的文件没有存盘，系统在文件名上加上____符号提示用户。 A.! B. C.# D.* （2）在“资源面板”中没有列出的资源是______。 A.文本 B.图像 C.颜色 D.脚本 （3）保存网页文档的快捷键是__________。 A.Ctrl+A B.Ctrl+S C.Ctrl+W D.Ctrl+N （4）下列哪一种视图不属于“文件面板”中视图列表中的视图类型 A.本地视图 B.地图视图 C.远程视图 D.大纲视图 （5）定义站点时，存放网页的默认文件夹为__________。 A.C盘根目录 B.D盘根目录 C.我的文档 D.没有默认文件夹，必须由用户指定 2.1.4页面的整体控制 1．选择题 （1）打开页面属性对话框，使用_______功能键。 A.Ctrl+K B.Ctrl+J C.Ctrl+M D. Ctrl + F （2）下面的颜色中，____表示黄色。 A.#FFFF00 B.#FFOOFF C.#00FFFF D.#00FF00 （3）当网页既设置了背景图像又设置了背景色，那么_____。 A.以背景图像为主 B.以背景色为主
PS网页设计与制作
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop 设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。 二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理
解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通
过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点 主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案 八、教学过程
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用， 一、课程的说明： 通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。 二、课程内容与基本要求： 该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：
三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法
(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 网页制作基础知识 网页的基本构成元素 网页制作常用软件和技术 第二章 Dreamweaver CS6轻松入门（2学时）
实验二 Photoshop工具箱的使用 一、实验目的 1、掌握裁剪工具、切片工具的使用 2、掌握污点修复画笔工具、修复工具、修补工具及红眼工具的使用 二、实验内容 1、使用素材“1.jpg”、“2.jpg”和“3.jpg”，完成如下图所示的处理效果： 2、利用切片工具对素材“喜羊羊.jpg”进行分割，要求：水平切片:3，垂直切片:4,并将划分后的图像单独保存。 3、利用修补工具处理素材“eye.jpg”，将眼底皱纹去除。 4、利用红眼工具处理素材“boy.jpg” 5、利用相关工具将素材“蓝天白云.jpg”中的小树从图像中抹去。 6、练习画笔工具的使用 (1)以“熊猫.jpg”为素材，设置如下图所示的效果
(2)以“杯子.jpg”为素材，绘制如下图所示的效果： (3)以“赵雅芝.jpg”为素材，制作如下图所示的效果:
提示：图中轻纱效果的制作步骤： 1)新建一背景色为白色的photoshop文档; 2)使用自由路径工具，绘制一路径; 3)切换到“路径”面板，单击下方的“用画笔描边路径”按钮，然后删除 工作路径; 4)切换到“图层”面板，隐藏最下面的图层，选择最上方的图层，执行“编辑| 定义画笔预设”命令 5)执行“窗口|画笔”命令，首先选择“画笔预设”，找到刚才定义的画笔，然后选择“画笔笔尖形状“，勾选”平滑“选项，最后设置直径、间距分别为122px,1%; 6)打开素材“赵雅芝.jpg“,设置合适的前景色，使用画笔制作如上图所示的轻纱效果 7、利用“图像|调整|替换颜色”命令将素材“衣服.jpg”处理成如下图所示的效果: 8、利用颜色替换工具完成下列操作: (1)将素材“boy.jpg”中的红眼去掉，效果如下图所示： (2)将素材“pp.jpg”处理如下图所示的美瞳效果:
龙源期刊网 https://www.doczj.com/doc/be8633050.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切片工具怎么用_工具大全 2018-01-16 关于切片：可以使用切片将源图像分成许多的功能区域。将图像存为 Web 页时，每个切片作为一个独立的文件存储，文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。可以使用切片加快下载速度。以下是PINCAI 小编整理的关于切片工具的相关内容，欢迎阅读和参考! ps切片工具怎么用_工具大全 PhotoShop中：切片工具是该软件自带的一个平面图片制作工具，用于切割图片，制作网页分页。 切片工具：将一个完整的网页切割许多小片，以便上传。是将我们设计的网页设计稿切成一片一片的，或一个表格一个表格的，这样我们可以对每一张进行单独的优化，以便于网络上的下载。可以做成网格的，然后可以用dreamweaver来进行细致的处理。利用切片工具可以快速的进行网页的制作。分成切片工具与切片选择工具. 扩展阅读：化学实验切片 化学实验中，切片工具是显微制片技术中所要用到的工具合称。 1.切片工具 (1)切片刀：一般使用普通的有柄剃刀，这种刀使用时间较长，每次用前在磨刀上磨至锋利即可。若没有剃刀，也可用刀片代替，市售刀片有单面合双面两种，以单面刀片为好，特别是切较硬的材料。 (2)培养皿：用于盛片，切片前先装适量清水(对较坚硬的材料)或30%乙醇(对较柔软或含黏液、菊糖等的材料)，乙醇浓度也可更高，但不易超过50%，否则易引起细胞收缩。 (3)毛笔：用于取片，小楷和中楷毛笔均可。 (4)切片板：木板或玻板，压切法用之。 (5)夹持物：夹持物应是坚固而易切的材料，常用的有莴苣、萝卜、土豆等，用于夹持柔软的材料，如叶、花瓣及细小的须根，接骨木髓、通草等，适用的范围同前。通草遇水即软，故不能与水接触，可将其保存在酒精中作切片，对于在酒精中保存的材料，用通草作夹持物甚好;软木或杉木，用于较硬的材料如果实、种子类，用前需软化。
[章节名称]：网页设计入门基础 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及 技术 2.了解网页的基本构成及最简单的html代码 3.了解网页设计的流程 [重点] 了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码 [难点] 掌握最基本的网页的构成及最简单的网页html代码 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：结合PPT课件的内容，讲解网络和网页的基本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。 环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的html 代码。 环节三：了解网页设计的流程 主要有以下几个步骤： 一. 网站规划 二. 素材资源收集
三. 选择开发工具 四. 站点建立与规划 五. 分模块进行网页设计 六. 网页源代码测试与特效添加 七. 申请域名与空间 八. 网页源代码上传 九. 定期的维护 环节四：对本节课的内容进行复习，让学生练习html的代码。并进行疑难解答
[章节名称]：html基础与应用1 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。 [重点] Html语言设置网页的背景音乐，图片，字体 [难点] Html语言设置网页的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。 环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体1. 设置背景颜色
2. 背景图片 3. 背景音乐 背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部《Photoshop图像处理》教学大纲 一、课程概述 课程名称（中文）：Photoshop图像处理 （英文）：Photoshop image processing 课程编号：14371020 课程学分：2 课程总学时：32 课程性质：（专业选修课） 二、课程内容简介（300字以内） 《Photoshop图形图像处理》是计算机各专业的一门专业课程，Photoshop是Adobe 公司推出的图像处理软件，是世界上第一流的图形设计与制作工具。Photoshop的功能十分强大，主要用于图形的修改与设计，应用于制作广告，封面等，在许多领域都被广泛使用。《Photoshop图形图像处理》这门课程将了解PhotoShop软件的组成、功能和相关知识；掌握各种绘画、滤镜工具；掌握各种选择加工方法；掌握层、通道、蒙版等图像复合技术。通过本课程的学习，使学生掌握Photoshop的使用方法，掌握应用Photoshop进行图像处理的使用技巧，学生学习这门课程后，将具有自己处理和加工图片的基本能力。 三、教学目标与要求 1.本课程要求具备计算机基础理论，素描和色彩知识； 2.坚持理论与艺术设计实践相结合，做到内容丰富新颖，体系结构合理，概念清楚，逻辑性强，文字流畅，深入浅出，通俗易懂，可读性，可操作性强，生动活泼； 3.把握平面设计教学的特点，坚持以实践带动软件理论的教学，努力消除教学中的僵化思想，挖掘学生的潜质，真正的做到理论与实践相结合； 4.本课程的教学采用多媒体教学，及时上机操作，并结合具体的设计课题或实例进行教学，解决设计制作中遇到的实际问题，以实践带动理论的教学。 四、教学内容与学时安排 第一章：Photoshop的基础知识（2学时） 1. 教学目的与要求：理解图像类型、图像格式等概念；掌握色彩知识、色彩模式、图像分辨率和图像尺寸等基本知识；掌握Photoshop的安装、运行；熟悉平面设计软件的工作界面；掌握文件的存取方法；掌握工具箱和控制面板的使用。 2. 教学重点与难点：图像类型、图像格式等概念；色彩知识、色彩模式、图像分辨率和图像尺寸等基本知识。 教学内容： 1.图像类型、图像格式等概念 2.色彩知识、色彩模式、图像分辨率和图像尺寸等基本知识 3.Photoshop的安装、运行 4.平面设计软件的工作界面 5.文件的存取方法 6.工具箱和控制面板的使用
如何将一张图片分割保存为HTML(PS中切片的使用) 先做一个简单的说明为什么选择Photoshop软件而没有选择Firework软件。Friework Dreamweaver Flash号称网页制作三剑客，Friework与Dreamwaver 整合得更为紧密，在这里只所以选择photoshop只是因为我的偏好，况且我对firework软件使用的次数很少，不太喜欢他提供的层面板。 在这里我们使用的PS的版本是CS3 以前的版本与此相差无几，但注意不能使用迷你安装版，必须是完整安装。 再说一下我们为什么要使用切片：1 使用切片是最直白的网页布局方法。不要再想如何去设计表格，也不要想什么DIV，你首先要想的是你的网页要做成什么样子？把你所想的画出来就行了!! 2 使用切片可以有效地减小页面文件的大小，提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快，还是把一个图片分成若干个小图同时下载快呢？ 如何切片： 一打开你设计好的PS图，选择切片工具 二按网页的结构和图片的特点进行切片 切片的大小上下位置可以通过切片选项来进行调整 三选择文件菜单另存为WEB格式命令，保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)
四使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑，删除不必须的图片和进行内容的填充。 切片原则和常见问题： 一切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。 二对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来 三在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色能使用图案的也尽可能使用图案平铺来形成背景 四在DW中进行编辑时，删除图片时出面表格错位如何办？ 删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。 五在DW中如何自定义表格的长宽？ 使用表格长宽一样的图片做为单元格的背景。 六如何在图片上输入文字？ 把图片设置成背景。 文章交流学习“百谷网”技术部提供技术支持https://www.doczj.com/doc/be8633050.html,
你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手?说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。今天我可以这么做了，而且我将教你怎么做这样的设计!从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦! 正文 先看效果图(点击可放大)
第一步--- 下载960网格模板 我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载
这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程. 第二步—构造你想象的结构
在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构. 第三步 构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开“图像>画布大小” . 把画布的宽度设置为1200px 高度设置为1700px .把背景色设置为#ffffff既白色. 第四步
PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点
主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 1.展示范例，吸引学生的注意力，调动学习的积极性 2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？ 3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。观看放映 聆听老师 观察素材文件 并进入创设情境 思考并发表自己的看法
动态网站设计与制作 随着网络日益深入社会生活，以电子商务网站作为对外的展示窗口，进行内外信息交流，已成为大众的迫切需要。网站信息管理系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的数据库。而对于后者则要求应用程序功能完备,易使用等特点。使用MACROMEDIA公司的Dreamweaver MX制作页面，用ASP语言做连接数据库的程序，使用Access制作系统的数据库，做一个具有留言版、登入页面等信息网站。 【关键词】Dreamweaver 应用、信息管理系统、ASP(Active Sever Pages) 前言 近年来，网络技术得到迅速的发展，这就为信息资源的共享提供了技术上的可能.作为信息密集型的地理信息系统(GIS)上升到网络平台可谓适逢其时.但从目前的应用情况来看，除了国外极少的公司拥有网络版的GIS之外，在国内还处于试验研制的阶段.因此，尽快地研制出我国自主版权的网络GIS的原型和产品，并在技术手段上达到国际先进水平，是摆在我们面前的一项迫切的任务。 人类社会已开始进入信息社会，信息逐渐渗透到人们工作、生活、娱乐、商业、制造业、军事等各个领域，办公自动化、电子商务、网上购物、远程医疗、家庭上网、电子博物馆等概念逐渐变为现实，这一切都是依赖于计算机技术、通信技术、网络技术、信息技术的飞速发展，依赖于这些新技术在人们生活中的广泛应用。 1.系统开发所用工具的简介 1.1开发环境 Windows 98/2000/XP 操作系统的PC 1.2开发工具 DreamweaverMX、Frontpage2003以及图象处理工具Fireworks MX和Photoshop8.0。 Dreamweaver是当前最流行的网页设计软件，Dreamweaver不仅是一个专业的可视化网页创建编辑器，而且它还是一个出色的网站维护工具。用户可以通过
PS教程：Photoshop打造流光3D文字特效【PConline 教程】今天的PS教程运用了Photoshop中的3D渲染功能，对这方面还不太了解的童鞋可以借此机会好好学习一下咯。 图00 步骤1：文本创建 首先我们打开Adobe Photoshop CC创建995x670px的画布创建字体Hello Zcool字体为“Vivaldi” 目前，我们的文本应该类似于下面的屏幕截图。
图01 接下来我们将文本转曲“右键–转换为形状” 图02 现在，我们可以变形文本。弯曲修饰将明显弯曲文本，这将使它更有趣。
____________________________________________________________________________________________ “自由变换–变形” 图03 步骤2：材质灯光设置和渲染 现在是时候开始构建我们的3D场景了，所以创建3D图层 图04
____________________________________________________________________________________________ 图05 现在我们需要开始在我们的背景。为此创建一个新层在你的文本。下一个填补它与黑色和画在它与白色当我做了下面的屏幕截图。
____________________________________________________________________________________________ 图06 现在只需要设置半径为250px的高斯模糊，并填充颜色。 此时我们将设置“Hello Zcool”材质球。一旦你这样做了设置材质和所有的设置如我下面做的。 选择Mod的5个项的材质会看截屏下的内容。到在属性面板调整材质 图08 现在我们需要回到我们的属性栏。设置漫反射等颜色值
Photoshop快捷键综合 一、工具箱(多种工具共用一个快捷键的可同时按【Shift】选取) 矩形、椭圆选框工具【M】 移动工具【V】 套索、多边形套索、磁性套索【L】 魔棒工具【W】 裁剪工具【C】 切片工具、切片选择工具【K】 喷枪工具【J】 画笔工具、铅笔工具【B】 像皮图章、图案图章【S】 历史画笔工具、艺术历史画笔【Y】 像皮擦、背景擦除、魔术像皮擦【E】 渐变工具、油漆桶工具【G】 模糊、锐化、涂抹工具【R】 减淡、加深、海棉工具【O】 路径选择工具、直接选取工具【A】 文字工具【T】 钢笔、自由钢笔【P】 矩形、圆边矩形、椭圆、多边形、直线【U】 写字板、声音注释【N】 吸管、颜色取样器、度量工具【I】 抓手工具【H】 缩放工具【Z】 默认前景色和背景色【D】 切换前景色和背景色【X】 切换标准模式和快速蒙板模式【Q】 标准屏幕模式、带有菜单栏的全屏模式、全屏模式【F】 跳到ImageReady3.0中【Ctrl】+【Shift】+【M】 临时使用移动工具【Ctrl】 临时使用吸色工具【Alt】 临时使用抓手工具【空格】 快速输入工具选项(当前工具选项面板中至少有一个可调节数字) 【0】至【9】 循环选择画笔【[】或【]】 建立新渐变(在”渐变编辑器”中) 【Ctrl】+【N】 二、文件操作 新建图形文件【Ctrl】+【N】 打开已有的图像【Ctrl】+【O】 打开为... 【Ctrl】+【Alt】+【O】 关闭当前图像【Ctrl】+【W】 保存当前图像【Ctrl】+【S】 另存为... 【Ctrl】+【Shift】+【S】 存储为网页用图形【Ctrl】+【Alt】+【Shift】+【S】 页面设置【Ctrl】+【Shift】+【P】 打印预览【Ctrl】+【Alt】+【P】 打印【Ctrl】+【P】 退出Photoshop 【Ctrl】+【Q】 三、编辑操作 还原/重做前一步操作【Ctrl】+【Z】 一步一步向前还原【Ctrl】+【Alt】+【Z】
《网页设计与制作》期末考试试题 一、单项选择题(本大题共30小题，每小题2分，共60分) 1、目前在Internet上应用最为广泛的服务是 ( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是 ( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成，其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时，应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、 BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时，代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是 ( )。 A、