当前位置:主页 > 平面设计

最新发布

优化整体图像(01)
优化整体图像(01)

在Photoshop中,可以通过“存储为Web所用格式”对话框对图像进行优化设置,在该对话框中提供了多种命令,支持各种文件格式的图片。除了对图像整体进行优化外,还可以分别对不同区域的切片进行优化。另外,在优化的过程中,可通过预览框实时的观察图像优化后的画面效果、画面质量和颜色数量等信息。这样既保证了画面效果,又使文件达到了所需的文件体积要求。下面让我们来熟悉该对话框。(1)启动Photoshop,执行“文件”→“打开”命令,打开将要优化的图像。(2)在菜单栏执行“文件”→“存储为Web所用格式”命令,图17-1所示为该对话框。图17-1  “存储为Web所用格式”对话框图17-2中“存储为Web所用格式”命令对话框,各区域的名称和功能如下:A:该区域为对话框的“工具箱”,使用这些工具可以调整预览框的显示、选择切片,以及吸取画面颜色。B:区域中的4个选项卡,分别为“原稿”、“优化”、“双联”、“四联”,选择其中的选项卡可以更改预览区显示原图像的方式。C:单击三角按钮可弹出“预览”弹出式菜单,在该菜单中可以设置颜色显示格式,以及设置调制解调器的速度。D:该区域中的命令和参数,可以对图像的优化方式进行调整与设置,使用它们可以设置图像的画面质量、图像大小和文件格式等。

2 次浏览
优化整体图像(02)
优化整体图像(02)

我们知道网络中最常用的图像文件格式为GIF格式,GIF是一种互联网上常用的文件格式,最多拥有256种颜色,其优点有生成文件小、网络传输速度快等特点。下面主要对GIF格式的优化参数进行介绍。(1)单击“预设”下拉列表右侧的三角按钮,可以看到Photoshop已经为用户预设了多种优化方式。其中列表上端有7种关于GIF文件格式的优化设定,如图17-11所示。图17-11  “预设”下拉列表(2)我们可以选择其中一种优化方式对当前图像进行优化,然而这7种预设优化方式远远满足不了对高质量图像优化的需求,所以仍需要手动调整这些参数来优化网页图像。(3)图像文件的颜色越丰富,那么其文件体积就越大。反之,则越小。“减低颜色深度算法”下拉选项,可以通过更改图像的整体的颜色深度来优化文件体积,图17-12所示为“减低颜色深度算法”下拉列表中的9种选项。图17-12  “减低颜色深度算法”下拉列表中的选项(4)在下拉列表中选择“可感知”选项后,可以将图像中肉眼能够察看到的颜色保留下,而察看不到的颜色将被优化掉。图17-13所示为当选择“可感知”选项后其颜色表的显示状态

5 次浏览
优化整体图像(03)
优化整体图像(03)

减少图像中的颜色数量可以有效的降低图像的体积,使用“颜色表”可以精确控制GIF图像中的颜色数量。最多可以设定图像的颜色为256种,降低颜色数量的同时文件体积也会下降。除了添加和删除颜色,在“颜色表”还可以进行颜色替换或更改透明度等操作。(1)在“存储为Web所用格式”对话框中的“颜色表”选项卡中,可以看到颜色表中有许多一致的颜色,如图17-28所示。图17-28  颜色表中的颜色(2)单击颜色表中的色块后,可将该颜色选择,如果按下<Ctrl>键的同时,逐个单击色块,可以选择多个色块。如图17-29所示,选择颜色表中颜色相似的色块。提示:当色块被选择后,其周围将出现黑白相间的边框。图17-29  选择颜色(3)选择颜色后,单击颜色表中的“删除选中的颜色”按钮,可将颜色表中所选择的颜色删除,图17-30所示为将颜色表中的颜色被删除后的状态。注意:切勿将相近的颜色全部删除,应适当的保留不同色相的颜色。

4 次浏览
分别对切片进行优化
分别对切片进行优化

网页界面根据功能的需要建立了很多的切片,在不同的切片下可以设置不同的网页链接或网页特殊效果。建立切片后整幅网页界面也被分成了若干个小的图片。这些切片图片有些画面内容丰富,需要拥有较多的颜色信息,而有些则内容简单,这时我们就可以对内容简单的切片进行优化,使其在最大幅度上降低颜色信息,同时也降低整个网页的体积。在对切片进行优化之前,首先让我们来了解一下切片,切片是图像的一块矩形区域,可用于在Web页中创建链接、翻转和动画效果。通过将图像划分成切片,可以更好地对图像进行控制,也便于网络下载。将图片存储为网页格式时,整幅网页界面图像将根据切片的划分方法,切割为一幅幅的小的图片。如图17-34所示为具有切片的图像效果。图17-34  具有切片的图像效果在Photoshop中包含两种切片即用户切片、自动切片。使用Photoshop的“切片”工具可以直接创建的为用户切片,根据网页需要用户切片可以被移动、复制、组合、排列、对齐和分布,还可以对其单独应用优化设置。而自动切片都链接在一起并共享相同的优化设置。创建用户切片时,自动切片将填充图像中用户切片未定义的空间。根据用户切片的形状和位置,自动切片会分成很多的块面,但是在对自动切片进行优化设置时,系统将所有的自动切片视为一张图片进行优化。如图17-35所示,用每种类型的切片都显示不同的图标,用户切片显示为蓝色图标,而自切片显示为灰色图标。图17-35  用户切片和自动切片的外观区别

6 次浏览
结合通道优化图像
结合通道优化图像

在前面的操作中,我们学习如何对整幅图像以及切片图像的优化方法。通过“存储为Web所用格式”对话框还可以对选择选区内的图像进行局部优化。但在优化前必须将选区存储为Alpha通道,这样才能在“存储为Web所用格式”对话框被调用。接下来将通过一组操作,介绍怎样在“存储为Web所用格式”对话框中使用通道对图像进行局部优化的方法。(1)首先,读者可直接打开本书附带光盘\Chapter-17\“塑料按钮.jpg”文件,如图17-46所示。图17-46  打开本书附带光盘文件(2)然后在“路径”调板中选择“路径 1”,然后单击调板底部的“将路径作为选区载入”按钮,将其转换为选区,如图17-47所示。图17-47  选择路径并将其转换为选区(3)接着执行“选择”→“羽化”命令,在弹出的“羽化选区”对话框中设置参数,如图17-48所示。

4 次浏览
使用Photoshop发布简单的网页
使用Photoshop发布简单的网页

本节采用了第7章中的网页设计完成图,将该网页界面在Photoshop中继续进行编辑,通过建立切片、设置链接、优化图像、存储为Web所用的HTML格式等操作,最终完成网页的发布。图18-51所示为本实例的完成效果。图18-1  本实例完成效果在实例制作中使用“切片”工具对网页进行切片划分,然后使用“切片选择”工具选择需要链接的切片,并设置链接地址。接着在“存储为Web所用格式”对话框中对网页进行优化,最终完成网页的发布。图18-2所示为本实例的制作概览。图18-2  实例的制作概览(1)运行Photoshop,执行“文件”→“打开”命令,打开本书附带光盘\Chapter-18\“艺术中心网页.jpg”文件,如图18-3所示。图18-3  打开图像(2)在工具箱中选择“切片工具”,然后在画面中拖出一个矩形框,松开鼠标后即可得到一个用户切片,如图18-4所示。

2 次浏览
摇滚音乐网站
摇滚音乐网站

摇滚音乐通常以强烈的节拍和通俗简单的乐句为特点,充满了另类、时尚的吸引力,深受年轻人的喜爱。本实例制作的就是摇滚音乐的网页页面特效,夸张的人物造型配以均衡的文字编排,使整幅画面具有动势,表现出狂野的视觉印象。不对称式的构图方式,以避免画面呆板。如图7-2所示,为本实例的完成效果。图7-2  本实例完成效果在本实例中,通过对几幅素材图片的编辑和调整,以及相互之间的混合,形成纹理鲜明、人物形象饱满的画面效果。通过使用色调调整命令调整图像色调,使调整后的颜色与整幅画面的色调相协调,使用画笔工具添加粗糙的画笔装饰效果,使之更贴近于表达内容,最后对画面作进一步的修饰和调整,如图7-3所示,为本实例的制作流程。图7-3 本实例制作流程(1)运行Photoshop,执行“文件”→“新建”命令,打开“新建”对话框,参照图7-4所示设置对话框,新建一个“摇滚音乐网站”的空白文档。图7-4  设置“新建”对话框(2)执行“文件”→“打开”命令,打开本书附带光盘\Chapter-07\“背景.jpg”文件,使用“移动”工具,将背景图像拖动至“摇滚音乐网站”文档中并调整图像大小,使

9 次浏览
游戏网页
游戏网页

游戏网页的页面通常具有较高的注目度和吸引力,常通过画面中的某一部分的突出的、引人注目的图像,来达到醒目而且具有视觉冲击力的效果。而图像的表现力又非文字可以替代,在此将文字与图像结合起来,可以更加直观,生动的表现所要传达的信息。如图7-28所示,为本实例的完成效果。图7-28  本实例完成效果在本实例中字体图像的效果比较醒目突出,明确的表达了所要传达的内容。在绘制的过程中,使用通道与滤镜命令相结合的方法来表现图像的立体效果,然后添加图层样式效果制作出字体的光泽变化。字体下方的按钮图像的视觉效果比较厚重,制作方法同样是使用图层样式命令来制作图像的立体效果和光影变化,结合导入的素材图片,为按钮图像制作出纹理效果。如图7-29所示,为本实例的制作流程。图7-29 本实例制作流程(1)运行Photoshop,在菜单栏中执行“文件”→“新建”命令,参照图7-30所示设置“新建”对话框,创建出一个名为“游戏网页”的空白文档。图7-30  设置“新建”对话框(2)确定前景色为黑色,按下<Alt+Delete>使用前景色将背景填充。然后执行“文件”→“打开”命令,打开本书附带光盘\Chapter-07\“纹理1.jpg”文件,使用工具箱中的

5 次浏览
艺术中心网页
艺术中心网页

设计公司网页页面一般都设计的比较时上、新颖,本实例巧妙的利用了画面的构图结构,来创建一种比较有创意的画面效果。文字、图片、符号的相互作用建立起一种整体的信息,而信息的主次分类,通过秩序化、条理化构成一个整体的网页形式。如图7-63所示,为本实例的完成效果。图7-63  本实例完成效果本实例构图灵活,设计感强烈,画面中的绿色图像是绘制的主题内容,在绘制过程中绿色图像主要是通过编辑通道图像来进行绘制,然后将导入的素材图片通过编辑与绿色图像和谐的统一在一起,如图7-64所示,为本实例的制作流程。图7-64 本实例制作流程(1)启动Photoshop,执行“文件”→“新建”命令,参照图7-65所示对“新建”对话框进行设置,完毕后单击“确定”按钮,关闭对话框,创建出一个新文档。图7-65  设置“新建”对话框(2)在“图层”调板中,新建“图层 1”,使用工具箱中的“矩形选框”工具,在视图的两侧创建出如图7-66所示的选区。

4 次浏览
珠宝制造公司网页
珠宝制造公司网页

珠宝制造公司网页的页面设计比较抽象,在页面的左下角设计安排了大小不同的三颗红宝石,成为整幅画面的点题之笔。而右侧的红色图像又与之遥相呼应,整幅画面对比鲜明,视觉效果突出。在调和过程中,若要使红色的调和不排斥对比,要适当控制红色的分量。如图8-2所示,为本实例的完成效果。图8-2  本实例完成效果在本实例的制作过程中,通过编辑素材图片来制作背景图像,使背景图像达到丰富多变的视觉效果,非常具有科技感、现代感,在画面中效果最突出的就是红颜色的运用。其中左下角的红宝石图像通过设置图层样式制作出来,如图8-3所示,为本实例的制作流程。图8-3 本实例制作流程(1)启动Photoshop,执行菜单中的“文件”→“新建”命令,打开“新建”对话框,参照图8-4所示设置对话框,创建出一个空白文档。图8-4  设置“新建”对话框(2)执行“文件”→“打开”命令,打开本书附带光盘\Chapter-08\“背景1.jpg”文件,使用工具箱中的“移动”工具,将该文档中的图像拖动到创建的空白文档中,在“图层”调板中生成“图层 1

4 次浏览
共计26043条记录 上一页 1.. 1375 1376 1377 1378 1379 1380 1381 ..2605 下一页