PS在网页设计中的应用.doc

PS网页设计教程
为网页准备图片，PS是一个灵活的、富有创造力的软件， 这个教程，是为了紧接下一步将内容放到网页上或设计有效的网页界面。
将谈及使用“存储为WEB所用格式”优化网页图片的原则，学习如何制作动画，如何为网页设计一张合成图，其中包括如何为图像翻转和导航设计图片。如何以及为什么要切割图片，自动从你的图片中制作网站的功能，演示PS和三剑客结合使用。
在本次课中，要为你们演示一些你可以在PS中为网页制作的东西，一是为网页优化图片和照片。如何使用“存储为WEB所用格式”窗口，将作品优化为JPEG图片、GIF图片以及PNG图片，准备好放到网页上。所有关于切割的知识，如何将一张小图片导入PS，然后使用多样的模板，将它转化成一个重复的网页背景，如何制作一个全屏的背景，以及如何根据显示器的分辨率也就是你的观众可能会使用的分辨率查阅你的网站，重置它的尺寸。如何为网站准备好透明图片。由透明像素包围的图片。使得那些透明图片与网页背景平滑的融合在一起。在PS中，并不能使图标动作按钮运作。但可在PS中为按钮制作图片。如何使用PS的图层复合功能制作图片按钮的一个完整的导航条，如何使用一个特殊的PS脚本从图层复合中导入多个按钮图片。那个是一个LYNDA所应用的脚本，可以免费使用。如何使用PS的自定义图形工具，从照片中制作出矢量导航图标。学习为网页准备照片的工作流程。从原始照片开始、重置照片尺寸，为网站锐化照片。如何使用逐帧动画以及自动补间动画制作GIF动画。学习一些刺激的自动功能，包括网上图库。它能够自动从你的图片中制作一个完整的网站的，还包括zoomify功能，它以让你导出较大的图片，如全景图，然后在网上以较高分辨率展示它们。如何使用PS中的变理和数据集在网页标语上自动制作多样的变化。如何整合PS的网页操作和三剑客。
有配套练习文件。按章节整理了练习文件。一共有14个
PS新界面：左边是工具栏、右边是相关颜色图层等面板 工具栏点击不放会弹出更多的工具，想选择其中一个工具，直接将鼠标移到弹出菜单中对应工具的上面，然后松手，现在那工具就是激活的了，它的选项就会出现在工具选项栏上，比如裁剪工具里就有切片工具和切片选取工具，CS6中有了一些新功能，临时在工具之间切换的能力，弹簧调节工具功能，方式是这样的，每一个工具都有一个快捷键，例如移动工具的快捷键是V，如果按住V，并保持住，那么我就可以暂时切换到移动工具，那样我就可以点击并拖动文件中一个选中的图层，然后，当我松开V键，那么就会自动切换回我使用移动工具之前所选中的工具，在这种情况下是切换回切片选取工具，
在苹果电脑中，顶部是快速切换栏，如果是PC，快速切换栏中的所有选项都会出现在屏幕中的菜单栏中。快速切换栏是为了让你快速找到那些你经常用到的功能，这里有一个菜单，可能让你
放大（相关工具栏）、缩小、抓手，旋转视图。
多个文件排列窗口，不同布局，同时查看多个文件
屏幕模式，3种不同的屏幕模式
全屏模式，为客户展示你的设计的一个很好的方法，返回常规视窗时，可以直接按F键。
在PS中中一个新的界面功能便是
如果你想要给一个网页设计添加不同的图片，或想要比较多张图片以找出最合适的一张用于这个设计，在PS中，多个文件的运作方式和单个文件运作不同，当在你PS中打开多个文件的时候，会以横排列表出现，除了点击外，还可以使用快捷键来打开它们：ctrl+tab往一个方向，shift+ctrl+tab又是另一个方向。
同时查看多个文件:整理文件（窗口－排列）
同时比较两张图片：同一比例同时查看图片中的某个人物（窗口－排列－匹配缩放、匹配位置，或者全部匹配），可以非常方便的对比图片。
在排列中还可以随时移动图片，非常方便图片的组合。在单一窗口中也可直接拖动图片到另一个标签中。新的标签文件使得追踪所有打开的图片变得前所未有的简单。这样比拖动窗口进行浮动好得多。
标签文件的使用，使得在CS中进行网页设计时操作更顺心。
PS面板中包含了很多当你进行网页设计的时候用到的面板，一般来说很少需要一直用到所有的面板。因此建议自定义面板布局。可以将那些最常用到的控制整理到触手可及的地方，而不要多余的面板占用宝贵的屏幕空间。
默认面板是按分组整理的，而如果你点击分组中的任意一个面板标签，展开和收拢面板。
收拢会成为一组标签，可点击需要使用的一个。收拢面板后，如果还需要更多的操作空间，还可以再往右边拖动，就可以将列表缩小成只剩下图标。
可以通过面板菜单关闭面板操作。通过窗口可以重新打关闭的窗口，可以关闭整个选项组。在面板条上空白处右单击，可以选择最小化或者展开面板。面板之间的组合可以通过拖动来实现。
比如把图层、历史记录和图层复合放在一起，图层复合通常是跟图层面板结合使用的。把图层复合面板放在图层、历史记录的下面。就组合成一个新的面板，可以拖动到处移动。可以点击右上角的复位基本功能恢复所有的面板设置。
并没有一个永久不变的供网页设计的面板，当你准备网页图片的时候，需要执行各种不同的任务。并没有一个能够永久适用于网页工作的配置。一天制作文本、一天切割图片等等，根据工作需要来设置不同的面板组。
PS的快捷键：很多工具很多菜单项可以通过快捷键来激活，能否使用快捷键调用常用命令是衡量使用PS是否熟练的标准。自定义在网页设计工作 中，工具栏中的所有工具都有快捷键。所以与其点击工具来激活它，不如直接按快捷键，想知道工具的快捷键，只需要使用将光标盘旋到工具上在即可，比如裁剪工具，按C，然后按住shift，再按C，就激活了切片工具。再次按C，就激活了切片选择工具。
右边的面板菜单中也有很多快捷键，从面板菜单中可以看到很多的命令之后都带有快捷键。比如新建图层：shift+ctrl+n，顶部的菜单栏上也有很多的快捷键，比如网页设计中经常使用的命令“另存为网页”，你可以看到它的快捷键是非常复杂的，得同时按4个键。Alt+shift+ctrl+s，比较难记也比较难用，需要自定义快捷键，容易使用和记忆。比如图层里有一个网页设计中经常使用的“新建基于图层的切片”。原来是没有快捷键的，现在有了，但不方便，编辑－键盘快捷键，在窗口中选择图层－新建基于图层的切片，在窗口中可以选择“面板菜单”、“应用程序菜单”和“工具”。在改变之前还是新建一个自定义键盘快捷键的文件，这样可以随时恢复默认的快捷键，可以给网页设计自定义另一套快捷键而又保留原来的快捷键。然后再来简化和设置快捷键：“另存为网页”－改为ctrl和逗号，直接按你想要的快捷键。给没有快捷键的添加快捷键“新建基于图层的切片”，设为F5，那么F5原来用于别的命令就失效了。
新建网页设计的工作区：8视频
复制PS行为方式
颜色管理方法的设置：1、如何使浏览器上看上去图片与PS一致，先配置好PS颜色设置，编辑－颜色设置，只需要从其中一个菜单进行一个设置即可，选择北美常规用途2，这是网页设计使用的选项，超过“北美web/internet”。一旦选择了此项，就自动设置了面板里的其他选项，主要是RGB空间，已经自动设置为SRGB了，SRGB是网页工作的最佳选择，当你在PS中操作图片的时候，RGB工作空间决定了该图片中的颜色特征，因为它是与标准的PC显示器中的颜色特征最为相似的工作空间，也主是你的观众查看你的图片通常会使用的显示器，当你制作将要在网页上展示的图片时，SRGB是你想要使用的RGB色彩空间，即便相较于用于打印工作的色彩空间，例如ADOBE RGB或Prophote，SRGB所包含的色彩范围非常局限。
制作网页所感兴趣的唯一一种工作空间就是RGB工作空间，所以可以直接跳过CMYK等，查看色彩管理方案，下面的RGB管理方案设置为“保留嵌入的配置文件”。如果刚好在PS中打开了一张附带有一个不 于SRGB，如ADOBE RGB，那么PS将会尊重那个非SRGB色彩配置文件，不会尝试改变它。
网页设计的颜色管理工作流程第一步：
假如打开了一张为网站所准备的图片，而它并不是SRGB工作空间的，而是标记为一个非SRGB的色彩配置文件，将图片转化成SRGB使它能够与我的工作空间匹配，打开图片在左下角查看，文档配置文件，有2种方法转化：一是在PS编辑图片时进行转化，编辑－转换为配置文件
另一种方法就是当你在“另存为网页时”，在你编辑或调整图片，将它处理成你想要的样子，已经将它优化成一个网页格式之后。文件—存储为WEB所用格式，对话框中有大量设置以后详解。勾选“转化为SRGB”，假设已将剩下的所有控制设置为我想要的了，保存－另存为一个另外的文件名。不勾选再保存一次。打开两张图片比较，与原有的PSD文件比较，勾选是最近似的。
网页安全色的概念在90年代是非常重要的，用户只有8位显卡，256色，网页安全色216色，比如3.01，左边不是安全色，右边用安全色看差别太大，现在基本不用，除非用户需要。其实是一个包含216色的特殊调色板。
PS有很多工具从笔刷工具到文本工具，了解你可以使用多种方式选择，将在PS中应用的颜色，其中包括拾色器，工具栏底部的前景和背景色，点击前景色打开拾色器，HSB选择颜色，RGB－特定颜色值。16进制颜色值。在拾色器中，还可将它设置为只显示网页安全色。
网页安全色——视频11
使用拾色器——视频12
滴管工具——视频13，可以使用它选择屏幕中的任意位置的颜色，包括屏幕以外的（需要激活应用程序框架），这个功能可以选择在屏幕上打开网页上的颜色。
针对选择多层图层可以有很多选项，比如当前图层、当前和下方图层、所有图层等等。
色板面板——视频14，
自定义色板集——存储你从一个现有的网页，那样你便可以在你自己的网页设计中使用该网站的配色方案作为一个着手点。视频15
重新上色——视频16 快捷键 图层各项锁定
统一网页设计上色——视频17 PS有一个功能，能够复制在PS中打开的任意图片中的任意颜色的16进制，可以粘贴到网页制作程序当中
另存为网页——视频18
优化JPG——视频19
添加图片版权信息——视频20
优化GIF——视频21
优化GIF输出——视频22
两种PNG格式的优化——视频23
网页背景图的制作——视频24
PS编写网页代码——视频25
对称背景的设计——视频26
重复背景制作——视频27
填满观众浏览器的全屏背景且不会出现重复——视频28
透明图片处理——视频29
边缘柔和的透明图片——视频30
透明GIF图片放置图案背景上——视频31
透明GIF投影与图案背景的设置——视频32
给网页图片添加透明区域——视频33
最适合优化照片的JPG如何添加透明区域——视频34
导航图片的制作——视频35
图层样式制作一个简单的按钮——视频36
智能对象制作一致的导航按钮——视频37
使用图标制作导航栏——视频38
胶体按钮制作——视频39
创建网页新页——视频40
创建故事板（线框图，草似内容区域）——视频41
给故事板添加内容技巧——视频42
为网页照片制作工作流程——视频43
在网页中保持照片尺寸——视频44
锐化网页照片——视频45
网页切片——视频46
用户和自动切片的使用——视频47
基于图层的切片——视频48
给切片添加信息——视频49
保存整个网页合成图的切片——视频50
翻转的制作——视频51
图层复合的使用——视频52
优化翻转图片——视频53
保存每一种翻转状态——视频54
使用脚本导入翻转图片——视频55
利用图层改变翻转状态——视频56
给网站、博客添加动画的方法——视频57
补间动画制作——视频58
两种属性的补间动画的设置——视频59
优化GIF动画——视频60
制作照片幻灯片——视频61
图片处理器的使用——视频62
自动化网页功能的使用——视频63
高分辨率照片的使用——视频64
变量和数据组功能的使用——视频65
多个变量制作的使用——视频66
PS与DW智能对象技术结合使用——视频67
PS与DW配合使用的另一种方法——视频68
PS+FW导出HTML——视频69
PS导入FLASH――视频72