Download
1 / 47
470 likes | 557 Views
网络广告设计与制作. 主讲人：涂先锋 Email ： teachertu@163.com. 第一节 平面设计与图像概述. “ 设计 ” ，即英文 “ design ” 。 “ design ” 一词来自丁文，意是 “ 上记号 ” ，在这里指发展行动计划的过程，是为一个构想做出方案、计划的意思。中文中与此意相通的词为 “ 意匠 ” ，可见设计中创意的重要性。
E N D
网络广告设计与制作 主讲人：涂先锋 Email：teachertu@163.com
“设计”，即英文“design”。“design”一词来自丁文，意是“上记号”，在这里指发展行动计划的过程，是为一个构想做出方案、计划的意思。中文中与此意相通的词为“意匠”，可见设计中创意的重要性。“设计”，即英文“design”。“design”一词来自丁文，意是“上记号”，在这里指发展行动计划的过程，是为一个构想做出方案、计划的意思。中文中与此意相通的词为“意匠”，可见设计中创意的重要性。 • 在西方，20世纪之前，通常把一些表面装饰称为设计，从事这些工作的人称为设计师。进入20世纪后，大工业生产的产品愈来愈广泛地出现，对它们的机能、结构、加工技术和总体设计等，都包括在“设计”的概念中，于是，对于“设计”便产生了“功能”与“美”的争执。设计的社会性、经济性、技术性、艺术性、心理性和生理性等要素都是很重要的。 • 因此，在现代，设计作为一个专门的概念，词义相当广泛，平面设计即其中之一，且与艺术联系相当紧密。 • 设计的基本元素包括图形、文字和色彩等。 平面设计简介
1．平衡 • 2．韵律 • 3．对比 • 4．调 一、图形和构图
二、文字 • 平面设计中常要包含文字，对这些文字进行一些变形，可以给人更鲜明的印象。
1．图示表 • 把数字资料以相应的图形形式表达出来，常用的有柱形图、饼图和折线图、散点图等。多用于比较性、揭示发展历程的内容。 • 2．表格 • 表格是一种极具说服力的表现形式，可适当采用。 • 3．流程图 • 团体组织结构、系统操作流程等，可以采用流程图来说明。 • 4．图解 • 用图片或绘形式，配以辅助说明，以增强说服力。 三、图表
前面讲到设计的构成元素无一例外地要通过某种组织编排形式出现在作品中，也就是在一个特定的平面上加入所要表达的信息，以符合视觉逻、富于美感的形式进行编排，而平面设计作品的成功与否在于每个元素的设计和编排组织的水平。前面讲到设计的构成元素无一例外地要通过某种组织编排形式出现在作品中，也就是在一个特定的平面上加入所要表达的信息，以符合视觉逻、富于美感的形式进行编排，而平面设计作品的成功与否在于每个元素的设计和编排组织的水平。 • 在编排设计元素的时候要注意可视性、易读性，应主次分明、调统一。 四、编排
一 图像种类 • 1．矢量图形 • 矢量图形是用一系列计算机指令来表示一幅图，如画点、画线、画曲线、画圆和画矩形等。这种方法实际上是用数学方法来描述一幅图，然后变成许多的数学表达式，再编程，用计算机语言来表达。例如现在流行的Flash、CorelDRAW，它就是矢量图形的种典型应用。 • 矢量图形有许多优点，例如，当需要管理每一小块图像时，矢量图法非常有效；目标图像的移动、缩小、放大、旋转、拷贝和属性的改变（如线条变宽变细、颜色的改变）也很容易做到；相同的或类似的图可以把它们当作图的构造块，并把它们存到图库中，这样不仅可以加速的生成，而且可以减小矢量图文件的大小。 图像的基本概念
2．位图图像 • 一幅复杂的彩色照片，很难用数学方法来描述，这时可以采用点阵图法表示。 • 点阵图法与矢量图法不同，它是把一幅彩色图分成许多的像素，每个像素用若干个二进制位来指定该像素的颜色、亮度和属性。因此一幅图由许多描述每个像素的数据组成，这些数据通常称为图像数据，把这些数据作为一个文件来存储，这种文件又称为图像文件。
二、像素和颜色深度 • 像素是图像的基本组成单位，它是一个有颜色的小方块，图像由许多小方块组成，以行或列的方式排列。 • 颜色深度是指存储每个像素所用的位数，它也是用来度量图像的分辨率。颜色深度决定彩色图像的每个像素可能有的颜色数，或者确定灰度图像的每个像素可能有的灰度级数。例如，一幅彩色图像的每个像素用R、G、B三个分量表示，若每个分量用8位（bit），那么一个像素共用24位表示，就说像素的深度为24，每个像素可以是224=16, 777, 216种颜色中的一种。在这个意义上，往往把像素深度说成是颜色深度。表示一个像素的位数越多，它能表达的颜色数目就越多，而它的深度就越深。目前通用的颜色深度是1位、8位、24位、32位。 • 虽然颜色深度或图像深度可以很深，但各种VGA的颜色深度却受到限制。例如，标准VGA支持4位16种颜色的彩色图像，多媒体应用中推荐至少用8位256种颜色。由于设备的限制，加上人眼分辨率的限制，一般情况下，不一定要追求特别深的颜色深度。此外，颜色深度越深，所占用的存储空间越大。相反，如果颜色深度太浅，会影响图像的质量，图像看起来让人觉得很粗糙和很不自然。
三、图像大小与分辨率 • 1．显示分辨率 • 显示分辨率是指显示屏上能够显示出的像素数目。例如，显示分辨率为640×480表示显示屏分成480行，每行显示640个像素，整个显示屏就含有307200个显像点。屏幕能够显示的像素越多，说明显示设备的分辨率越高，显示的图像质量也就越高。 • 计算机用的CRT和家用电视机用的CRT之间的主要差别是显像管玻璃面上的孔眼掩模和所涂的荧光物不同。孔眼之间的距离称为点距（dot pitch）。因此常用点距来衡量一个显示屏的分辨率，标准SVGA显示器的分辨率为0.28 mm。孔眼越小，分辨率就越高。
2．图像分辨率 • 图像分辨率是指组成一幅图像的像素密度的度量方法。对同样大小的一幅图，如果组成该图的图像像素数目越多，则说明图像的分辨率越高，看起来就越逼真。反之，图像显得越粗糙。 • 在用扫描仪扫描彩色图像时，通常要指定图像的分辨率，用每英寸多少像素（ppi，即pixel per inch）表示。如果用300ppi来扫描一幅8×10英寸的彩色图像，就得到一幅2400×3000个像素的图像。分辨率越高，像素就越多，图像的质量相对也就越高。 • 例如，一张72 ppi分辨率1×1英寸的图像（包含的像素数为72×72=5184）和一张尺寸同为1×1英寸但分辨率为300 ppi的图像（包含的像素数为300×300=90000），在同样放大200%时，可以看到分辨率为300 ppi的明显比72 ppi的清晰，如图1.2所示。
分辨率为72 ppi（左图）和300 ppi（右图）的图像示例
3．打印机分辨率 • 打印机使用dpi（即dots per inch，每英寸多少点）的单位，代表着打印机设备打印时的精细程度。例如，我们说某台打印机的分辨率为360dpi，是指在用该打印机输出图像时，在每英寸打印纸上可以打印出360个表征图像输出效果的色点。表示打印机分辨率的这个数越大，表征图像输出效果的色点就越小，输出的图像效果就越精细逼真。
4．扫描仪的分辨率 • 扫描仪的分辨率指的是扫描仪辨识影像细节的能力。我们说某台扫描仪的分辨率为600dpi，是指用扫描仪输入图像时，在1平方英寸的扫描幅面上，可采集到600×600个像素点。扫描分辨率设得越高，生成的图像的效果就越精细，生成的图像文件也越大。
三、图像的颜色模式 • 1．灰度模式 • 灰度图可以表现从黑到白的整个系列灰色色调。我们知道，位图图像记录的是每个像素的颜色值，在灰度图模式中，每个像素需要8bit的空间来记录它的颜色值，8bit的颜色值可以产生28=256级灰度（其中0表示纯白，而256为纯黑），灰度图就是用这256级灰度值来表现图片内容的。
2．RGB模式 • RGB模式通过将红、绿、蓝3种颜色的光混合起来产生颜色，这3种颜色构成了RGB颜色模型的基础，将红、绿、蓝3种颜色的光混合起来产生颜色，称为加色法。 • 在加色法中，没有光线存在时的颜色是黑色（R、G、B值都为0）；所有的光都为最大值（255）时的颜色是白色。 • RGB模式的图形，每个像素需要3×8bit的空间来记录颜色值，在屏幕上可以呈现224=16, 777, 216种颜色。在Photoshop中，RGB模式的图像是在“通道”面板中利用R、G、B三个通道来分别记录红、绿、蓝三种颜色的值。
3．CMYk模式 • CMYk(青色Cyan、品红色Magenta、黄色Yellow、黑色Black)模型表示反射光，或用于印刷油墨、照片染料等颜色。它是靠反射某些颜色的光并吸收其他颜色的光来产生颜色的，所以百分比越高，颜色就越暗。 • 这种模式是吸收白光中的某些颜色，而反射其他的色光而表现颜色的，所以也称为减色法。RGB和CMYk是互逆的，CMYk模式中红色可以描述成品红和黄的合成；RGB模式中黄可以描述成红和绿的合成等。 • 当一个模型中的两种颜色合并生成另一个模型中的一种颜色时，余下的这种颜色就称为生成的这种颜色的补色。如青和品红合成了蓝，蓝就是余下的黄色的补色。
三、图像文件格式 • BMP：位图格式，该格式最典型的应用程序就是Windows的画笔。BMP文件几乎不压缩，占用磁盘空间较大，它的颜色存储格式有1位、4位、8位及24位，该格式是当今应用比较广泛的一种格式。缺点是该格式文件比较大，所以只能应用在单机上，不受网络欢迎。 • JPEG：位图格式，是一个最有效、最基本的有损压缩格式，被极大多数的图形处理软件所支持，广泛用于Web。 • 可以用不同的压缩比例对这种文件进行压缩，其压缩技术十分先进，在视觉感受上影响不大，因此可以用最少的磁盘空间得到较好的图像质量。如果对图像质量要求不高，但又要存储大量图片，使用JPEG无疑是一个好办法。但是，如果图像要用于印刷或打印，就不要使用JPEG格式了，因为当图像放大后会存在缺陷。 • TIFF：位图格式，是Aldus在Mac初期开发的，目的是使扫描图像标准化。它是跨越Mac与PC平台最广泛的图像打印格式。TIFF格式具有图形格式复杂、存储信息多的特点。常用于印刷。3DS、3DS MAX中的大量贴图就是TIFF格式的。TIFF最大色深为32bit，可采用LZW无损压缩方案存储，大大减少了图像体积。TIFF格式最令人激动的功能是可以保存通道，这对于处理图像是非常有用的。
PSD：位图格式，Photoshop中自建的标准文件格式就是PSD格式，在该软件所支持的各种格式中，PSD格式存取速度比其他格式快很多，功能也很强大。由于Photoshop软件被越来越广泛地使用着，所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式，里面可以存放图层、通道和蒙版等信息。PSD：位图格式，Photoshop中自建的标准文件格式就是PSD格式，在该软件所支持的各种格式中，PSD格式存取速度比其他格式快很多，功能也很强大。由于Photoshop软件被越来越广泛地使用着，所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式，里面可以存放图层、通道和蒙版等信息。 • GIF：位图格式，在Internet上被广泛地应用，最多256色，可做成动态的。因为256种颜色已能满足主页图形需要，而且文件较小，适合网络环境传输和使用。 • CDR：矢量图格式，CorelDRAW专用的矢量图形格式。与其他软件、图形格式的交流不是很好，但有许多独特的性质，保存了CorelDRAW文件中的全部素材，使得CDR文件格式在很多行业中非常流行，应用非常广泛。 • AI：矢量图格式，Adobe Illustrator采用的标准矢量图形格式，用于记录不同的线条组成的图像文件，与PageMaker之间的兼容性非常好，也可兼容CorelDRAW、Flash等软件。常用于出版印刷行业，所保存的信息比WMF多。 • WMF：矢量图格式，Microsoft Windows图元文件，目前，其他操作系统尚不支持这种格式，如Unix、Linux等。WMF格式文件所占的磁盘空间比其他任何格式的图形文件都小得多，相应地也比较粗糙；在制作单黑印刷品的时候，可以使用WMF格式的图形。
PNG：矢量图格式，一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点。PNG最大色深为48bit，采用无损压缩方案存储。著名的Macromedia公司的Fireworks默认的格式就是PNG。PNG是专门为Web创造的，和GIF格式不同的是，PNG格式并不局限于256色。PNG：矢量图格式，一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点。PNG最大色深为48bit，采用无损压缩方案存储。著名的Macromedia公司的Fireworks默认的格式就是PNG。PNG是专门为Web创造的，和GIF格式不同的是，PNG格式并不局限于256色。 • PCX：PCX格式是ZSOFT公司在开发图像处理软件Paintbrush时开发的一种格式，存储格式从1位到24位，它是过压缩的格式，占用磁盘空间较少。由于该格式出现的时间较长，并且具有压缩及全彩色的能力，所以PCX格式现在仍然流行。 • SVG：一种开放标准的矢量图形语言，可设计高分辨率的Web图形页面。SVG被开发的目的是为Web提供非栅格的图像标准。 • EPS：矢量图格式，专业印刷通用格式，所以其内部色彩是用CMYK格式，在输出成EPS的过程中，一些超出CMYK色域的色彩会被转换；EPS格式能保存图案中的位图和矢量图对象。 • EPS格式在Mac和PC环境下的图形和版面设计中广泛使用，用在PostScript输出设备上打印。几乎每个绘程序及大多数页面布局程序都允许保存EPS文档。
1．标题栏 • 标题栏位于窗口顶端，显示该软件的名称及图标。右边是应用程序的最小化、最大化（向下还）和关闭按钮。 2．菜单栏
4．选项栏 • 菜单栏的下方是工具选项栏。大多数工具的选项都显示在选项栏中，选项栏与上下文相关，并且会随所选工具的不同而变化。
显示打开的图像文件，并可以在此编图像，是将来进行图片处理的主要工作区域。显示打开的图像文件，并可以在此编图像，是将来进行图片处理的主要工作区域。 5．图像窗口 图像窗口
6．调板 • 右边是各种工作面板，在其中可以对图像进行各种操作。
7．调板井 • 调板井可帮助我们在工作区域中组织调板。 8．状态栏
二、文件的操作方法 • 1.2.1 创建新图像文件 • ◆【名称】：在这里可以给图像指定文件名，默认为“未标题-*”（*依次为1、2、3）。 • ◆【预设】：指定新图像的预定义设置，可以直接从下列表中选择预定义好的参数。一般情况下选择【自定】，以根据需要进行设置。 • ◆【宽度】和【高度】：用于指定图像的宽度和高度的数值，在其后的下列表中还有“像 • 素”、“厘米”、“毫米”和“英寸”等计量单位可选择，请根据需要指定。为了方便，对 • 于进行包装等方面的设计，一般采用“毫米”为单位；对于进行软件界面的设计时，一般采 • 用“像素”为单位。 • ◆【分辨率】：指定新建图像的分辨率。分辨率的大小必须根据图像的用途来确定。例如， • 视频文件只能以72 ppi的分辨率显示，了解这一点很重要。因为即使图像的分辨率高于 • 72ppi，在视频编应用程序中显示图像时，图像品质看起来也不一定会非常好。比如用于网页 • 制作或软件的界面时，分辨率也只有一种可能，那就是72ppi（少于72ppi，清晰度降低，大 • 于72ppi，文件变大而清晰度不会有丝毫改善，所以72ppi是最合适的）；用于印刷时，尤其 • 是四色印刷（如产品的包装盒) ；而用于写真或喷绘时，150ppi就足够了。 • ◆【颜色模式】：Photoshop的颜色模式基于颜色模型，而颜色模型对于印刷中使用的图像非 • 常有用。列表中有【RGB颜色】（红色、绿色、蓝色）、【CMYK颜色】（青色、洋红、黄色、 • 黑色）；【Lab颜色】（基于CIE L*a*b*）和【灰度】可以选择。不同模式的用途不同，比如 • “RGB颜色”一般用于显示器上南允荆癈MYK颜色”则主要用于印刷。不过，由于我们的 • 设计通常都是通过显示器来观察效果的，所以新建文档时一般都选择【RGB模式】，最后可以 • 通过Photoshop很方便地转换为其他的颜色模式。 • 对于【颜色模式】后面的【8位】（8位/通道）和【16位】（16位/通道）该怎么选择呢？大 • 多数显示器都能够显示24位颜色（每个通道8位），即能够显示数百万种颜色，所以我们在这 • 里通常选择【8位】。16位/通道数据的图像提供更细微的颜色差异，但是文件大小可能是每 • 通道8位的图像两倍 • ◆【背景内容】：该项有【白色】、【背景色】和【透明】三个选项。 • 单击【高级】按钮还可以扩展【新建】窗口，扩展后可以选择【颜色配置文件】和【像素长宽比】。这两个选项如无特殊需要，一般默认即可。
3 关闭图像文件 • 关闭图像文件的方法有如下3种。 • 方法一：按快捷键Ctrl+W。 • 方法二：执行【文件】→【关闭】命令。 • 方法三：直接单击图像窗口右上角的关闭按钮。
7 布大小的设置 • 【定位】：点按某个方块以指示现有图像在新布上的位置。 • 【布扩展颜色】： • 【前景】：用当前的前景颜色填充新布； • 【背景】：用当前的背景颜色填充新布； • 【 黑色】或【灰色】：直接用白色、黑色或灰色填充新画布；
