第5章 使用photoshop设计网页

第5章使用photoshop设计网页，通过5.1任务描述、设计网页学习和掌握photoshop工具的特征和使用。 本任务使用photoshop的钢笔工具、路径面板、矢量图形的圆角矩形工具、使用ImageReady的动画效果等，最终效果如图5-1所示。 图5-1页面设计效果图，5.2知识，5.2.1路径1 .路径和面板是使用笔、磁笔、自由笔等工具绘制和编辑的线条和几何形状，路径中的线条不包含特定像素。 即，图像的放大不会影响路径的分辨率或平滑度，因为路径具有相同的细线。 您可以看到路径是向量，与影像无关，也不会储存在特定色版中。 用户可以使用“路径”工具绘制或编辑一系列点连接的直线，填充由这些直线组成的区域，或者在直线上绘制直线，从而将路径转换为选区，从而精确地选择图像对象。 路径线上有被称为锚点的节点，通过调节锚点的位置，可以简单地调整曲线的形状。 编辑的路径可以同时保存在图像中，也可以单独输出到扩展名为*.AI的文件，以供其他软件编辑和使用。 路径主要通过“路径”工具和“路径”面板进行操作。 路径工具包括笔、自由笔、添加锚点、删除锚点和转换点。 前两个工具用于绘制路径，其他工具用于选择和编辑路径。 其中，钢笔工具用于绘制由多个点连接的路径段，自由钢笔工具用于自由绘制曲线路径。可以使用“添加(删除)锚点”工具向现有路径添加或删除锚点。 您可以使用转换点工具将锚点从平滑曲线的转角转换为直线转角，如图5-2所示。 路径面板中会显示、和图5-2中路径工具与平滑曲线的转角点，以及直线的转角点的图示。 以蓝色显示的路径是当前路径(或活动路径)，您可以使用面板右上角的小三角按钮打开“路径”面板菜单。 工具栏包括创建新路径、删除当前路径、从选区生成工作路径、加载路径作为选区、用前景色填充路径以及用画笔绘制路径等按钮。 图5-3的“路径”面板和“路径”面板菜单2 .创建和编辑路径“路径”面板中显示的每个栏都表示封闭或打开形状的路径，由曲线或线组成，一个路径可以由多个形状组成。 (1)要创建路径，必须首先在“路径”面板中创建并命名路径。 若要建立路径，请使用路径面板选单中的新路径选项，或使用面板工具列上的建立新路径按钮。 选择菜单选项后，将显示一个新的路径对话框，您可以在其中键入路径名称或接受缺省路径名称工具按钮直接创建具有缺省路径名称的路径，例如“路径1”。 新创建的路径为空。 对于空路径，可以使用“路径”工具绘制和编辑路径。 您可以在一个影像中建立多个路径。 您也可以使用路径工具直接在影像中绘制路径，并建立名为工作路径的新路径。 如果您只在一个影像中建立一个工作路径，然后使用路径工具在影像中重新绘制路径，工作路径会保持新的锚点或子路径。 (2)绘制和编辑路径后，可以使用钢笔工具、自由钢笔工具或其他路径工具在路径中绘制和编辑路径。 示例5-1绘制苹果形状的路径。 操作步骤如下：创建新的360240图像，从“路径”面板菜单中选择“新路径”选项，创建新路径，并将该路径命名为“苹果”。 选择钢笔工具，将鼠标移动到图像窗口的中央下部，单击要创建路径的开始点，将鼠标光标移动到图像窗口的中央上部(开始点的正上方)并按住鼠标拖动，将出现方向线(有鼠标的点为方向点)。拖动鼠标使方向线保持水平，方向线保持恒定长度。 释放鼠标可获得如图5-4左图所示的曲线。图5-4创建苹果路径，将鼠标光标移动到起点并单击，形成相反的水滴形状的闭合曲线。 选择“转换点”工具，调整两个锚点的方向线，将光标移动到起点并按住鼠标拖动，同时形成方向线，水平拖动方向线，使其长度约为第二个锚点的方向线的一半。 将光标移动到开始点方向线的右方向点，一边按住鼠标左键一边向下拖动鼠标。通过同样的拖动操作，将2条方向线的其他3条变成图5图4的右图那样的图形。 选择自由笔工具，在图形上画曲线，得到图5-5所示的苹果形状的路径。 可以使用钢笔、自由钢笔和转换点工具绘制和编辑图5-5苹果形状的路径，也可以使用其他路径工具绘制和编辑路径。 简单介绍这些工具的使用方法。 添加和删除锚点工具：用于添加和删除锚点。 选择“添加锚点”工具，然后在图像窗口中的路径上单击以添加锚点。 添加锚点不会更改路径，但可以通过移动锚点或调整锚点的方向线来调整锚点与两个相邻锚点之间的曲线。选择“删除锚点”工具，然后在图像窗口中删除锚点通常会改变路径，因为它会减少锚点。 的双曲馀弦值。 转换点工具可让您变更路径的位置和形状以及锚点性质。 有两种类型的锚点：直线锚点和曲线锚点。 两种锚点用于连接直线和曲线。 直线锚点和曲线锚点可以相互转换。 图5至图6中的锚点a是曲线锚点，可以通过选择转换点工具并将光标移动到锚点a并单击将其转换为直线锚点(图5至图6 )。 相反，也可以将直线锚点转换为曲线锚点。 注意：使用点转换工具单击直线锚点时，连接锚点的直线不能是曲线。 若要使连接锚点的直线成为曲线，必须在拖动时单击鼠标(请参见图5图6的右图)。图5-6曲线锚点与直线锚点的转换，3 .路径与选取范围的转换路径与选取范围的转换。 您可以使用路径工具绘制精确的轮廓，并将绘制的路径转换为选取范围的边缘。您也可以使用选取工具选取并微调选取范围，将选取范围的边缘转换为路径。 (1)若要将路径转换为选取范围，请使用路径面板选单中的建立选取范围选取线或面板工具列上的将选取范围汇入为路径按钮，将路径转换为选取范围。 在“路径”面板中选择要转换的路径，然后从面板菜单中选择“创建选区”选项以显示“创建选区”对话框，如图5到7所示(如果图像中没有选区)。 如果影像中已经有选取范围，则对话方块的动作(actions )方块中的其馀三个会有效。 可以为“渲染”设置模糊半径和消除锯齿。 完成设置后，您可以单击“确定”(ok )按钮将选定路径转换为选区，或者选择要转换的路径，然后单击“将选区作为路径导入”(load selected path )按钮将选定路径直接转换为选区。 可以使用图5-7“创建选区”对话框、(2)将选区转换为路径面板菜单中的“创建工作路径”命令或面板工具栏中的“从选区创建工作路径”按钮将选区转换为路径。 使用选取工具建立选取范围后，请从路径面板选单中选择建立工作路径选项，显示建立工作路径对话方块并设定公差，然后按一下确定(ok )按钮，将选取范围转换为路径。 您也可以在建立选取范围后，按一下从选取范围建立工作路径按钮，将选取范围直接转换为路径。 无法打印路径中绘制的图形，因为、4 .路径填充和描边路径本身不包含像素。如果需要通过路径获得图形或可打印图像，请填充路径并绘制一条线，以将像素添加到图像中的路径轮廓。 (1)路径填充可以是颜色、部分图像或填充线路径。 如果路径未闭合(打开)，则假定洞口的两个端点之间有一条直线，并填充由该直线和路径的其他部分组成的闭合区域。 可以使用“路径”面板菜单中的“填充路径”选项或面板工具栏中的“用前景色填充路径”按钮来填充路径。 从“路径”面板菜单中选择“填充路径”选项，以显示“填充路径”对话框，从中可以设置填充内容、混合方式和渲染。 其中被填充的内容可以是前景色、背景色、图案、50%灰色、黑色、白色等，如图5-8所示，被填充的混合模式通常可设定为溶解度、软亮度、高亮度、差分度等。 此外，在图5-8的“填充路径”对话框中，路径的直线路径的直线沿路径的路径以一定粗细的线或边界绘制，使用“路径”面板菜单中的“绘制路径”选项或“路径”面板工具栏中的“用笔刷绘制路径”按钮绘制路径的直线从路径面板选单中选取笔画路径选项，显示笔画路径对话方块，然后选取笔画工具，例如笔刷、铅笔、橡皮擦、填色、模糊和加深。按一下面板工具列上的笔画路径按钮，即可显示目前的路径使用不同的直线工具会产生不同的直线路径效果。 请注意，使用笔刷工具绘制笔画时，请在笔刷面板中选取适当的笔。 5 .路径应用可以通过在Photoshop中利用路径来实现意外效果。 例如，可以使用路径填充和描边创建特殊效果图形，或者使用路径和笔刷等工具绘制特殊效果图像。 例5-2描绘了图5-9所示的青苹果。 按照例5-1的方法，制作苹果形状的路径。 将前景/背景颜色设定为黑色/白色，选择适当粗细的笔刷，然后单击“路径”面板工具栏上的“使用笔刷绘制路径”按钮绘制苹果茎。 使用“添加锚点”工具选择苹果路径，然后单击“路径”面板工具栏上的“将路径加载为选区”按钮隐藏该路径。 将前景和背景色分别设定为RGB (255，248，238 )和RGB (0，88，4 )，在工具箱中选择“渐变工具”，在渐变选项栏中选择“放射状渐变”，用鼠标从苹果的左上角拖动到右下角(图5-10 ) 图5-9蓝苹果，从图5-10苹果的左上角拖到右下角，图5-11填充图案，5.2.2ImageReadyCSImageReadyCS是独立的组件，与PhotoshopCS一起安装，具有强大的网页图像设计和动画ImageReadyCS和PhotoshopCS的接口类似，操作方法和许多命令也相同。 1.Web图像和动画(1)随着网络的发展，网页(Web )图像的应用越来越广泛。 受网络传输速度的限制，看大图像往往很慢。 为了不影响浏览网页的速度，对较大的网页图像进行切片，使用切片功能将源图像分为多个功能区域，加快下载速度。 将影像储存为网页时，每个切片都会储存为个别档案，包括切片设定、颜色面板、连结、滑鼠指向效果和动画效果。 切片在处理不同数据类型的图像时也很有用。 例如，为了支援动画，您必须以GIF格式来最佳化影像的某些区域，然后以JPEG格式来最佳化影像的其馀部分，以便分割动画。 网页中使用的图像文件格式有JPG、GIF、PNG三种。 (2)动画网页中大量使用动画，给予网页更好的交互性和视觉效果。 动画是一系列图像或帧，在一段时间内显示。 每一个影格都比前一个影格稍微有所变更，连续且快速地显示这些影格会产生移动效果。在ImageReady中，处理图层是创建动画的基础。 通过将动画中的每个像素放置在自己的图层上，可以使用“图层”面板更改一系列帧中像素的位置和外观。 例如，图5至图12中的自行车图像位于其自身的图层上，在动画中，必须重新定位每个帧中的图层。图5-12的动画图、2.ImageReadyCS的工作接口(1)构成imageready cs窗口的工作接口与PhotoshopCS类似，如图5-13所示，主菜单、工具箱、选项图5-13ImageReadyCS的界面、(2)工具箱ImageReadyCS的工具箱与PhotoshopCS的工具箱类似，如图5-14所示。 其中，下半部分功能不在PhotoshopCS中。 在、图5-14ImageReadyCS工具箱(部分)、(3)面板ImageReadyCS中也提供了浮动面板系列，如图5-13所示。 除了PhotoshopCS中常用的面板外，ImageReadyCS还提供了特定的面板，如动画面板、图像映射面板和优化面板。 在“动画”面板中，可以为动画中的帧创建、查看和设置选项。 您可以在动画面板中变更影格的缩图检视(使用较小的缩图会缩小面板所需的空间，并以特定面板宽度显示更多影格)。 显示“动画”面板。 从菜单栏中选择“窗口”“显示动画”选项，或从浮动面板中选择“动画”面板选项卡。 更改帧的缩略图视图：从“动画”面板菜单中选择“面板选项”，选择缩略图的大小，然后单击“确定”按钮。动画面板下部的按钮中有设定播放次数的按钮。 可设置“一次”、“一直有效”和“其他”(设置播放限制次数)。 选择第一帧按钮：选择第一帧图像作为当前帧。 上一帧选择按钮：选择上一帧图像作为当前帧。 动画停止按钮：停止动画的播放，播放动画时有效。 动画播放按钮：开始播放动画，在没有播放动画时有效。 选择下一帧按钮：单击以选择下一帧图像作为当前帧。 动画帧过渡按钮：创建动画时，将生成一系列过渡帧。 对于一些简单的运动和线性运动(例如，飞机在空中线性飞行的动画效果)，只需绘制飞机起点和停点两帧的图像，就可以使用此按钮打开过渡帧对话框，如图5-16所示。 设置参数和生成的帧数后，单击“确定”(ok )按钮可在两帧之间自动生成指定数量的过渡帧。 复制当前帧按钮：在“动画”面板中将当前帧复制到新帧。 删除选定帧按钮：在“动画”面板中删除当前帧。图5-16“转换”对话框、(4)图像窗口ImageReadyCS的图像窗口如图5-17所示，显示“原稿”(仅显示原稿)、“优化后的”图像)、“跨页”(显示原稿和优化后的”图像)、“4连”(原稿和3种优化效果在、图5-17的图像窗口、3 .剪切图像的网页设计中，为了提高网页的传送和阅览速度，总是将大的图像剪切成小片。 在ImageReadyCS中，剪辑图像也称为切片，常用于网页的图像设计。例5-3将图像文件“熊. psd”图像切片后保存为web文件。 操作步骤如下： (1)打开图像文件“熊. psd”，在工具箱中选择“切片选择工具”。 在菜单栏中选择“切片-复制到切片”选项，将整个图像复制到切片，然后用鼠标适当拖动切片，使切片成为整个图像。 在菜单栏中选择“切片-分割切片”选项时，将显示“分割切片”对话框，如图5-18所示。 在此范例中，将影像分割成6等分的切片，如图5-19左图所示(切片图示会显示为蓝色)。分割、图5-18分割的对话方块，(按住Shift键的同时用滑鼠按一下各分割