《网站logo ps》由会员分享，可在线阅读，更多相关《网站logo ps（39页珍藏版）》请在金锄头文库上搜索。
1、9.1 网站LOGO,学习任务,网站LOGO主要是互联网上各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。对于一个网站来说，LOGO是网站的名片，也是网站的灵魂所在，即所谓的“点睛”之处。,知识要点,使用【渐变工具】填充选区，使用【图层样式】设置网站LOGO的初步效果，利用图层混合模式制作高光部分。,9.1 网站LOGO,知识解析,LOGO的定义： LOGO顾名思义就是站点的标志图案，LOGO最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站LOGO的设计过程中一般有以下三种思路： （1）直接以网站网址作为LOGO。 （2）根据网站提供的产品/服务特
2、点展开LOGO设计。 （3）以传递网站运营商的经营理念为特色。,9.1 网站LOGO,知识解析,LOGO的制作工具和方法: 目前没有专门制作LOGO的软件，其实也并不需要这样的一种软件。我们平时所使用的图像处理软件或者还加上动画制作软件（如果你要做一个动画的LOGO的话）都可以很好地胜任这份工作，如Fireworks、Photoshop、Easy GIF Animator等。现在的LOGO主要以图片为主，尤其是GIF图片为主，有少量的是Flash动画。,9.1 网站LOGO,自主练习,请仿照制作以下任意一款网站LOGO。,9.1 网站LOGO,小结,1. LOGO的定义、制作工具和方法 2.【
3、渐变填充】、【图层样式】 3. 图层混合模式,作业,复习本课内容，完成课后练习相关内容。,9.1 网站LOGO,9.2 水晶按钮,学习任务,水晶按钮被广泛应用于网页制作中，水晶的特点是透明、晶莹，光照下有明显的反光，也有比较明显的折射，在本例中我们要制作出水晶的精致和质感。,知识要点,利用【工具栏】中的椭圆选框工具，绘制按钮形状，利用渐变填充工具和减淡工具制作水晶透明、晶莹的质感。,9.2 水晶按钮,知识解析,关于等高线： 我们能看到物体是因为光的反射，表面凹凸不平的物体，因为各部分反射的光线强度不一样，让我们感觉到物体表面的凹凸程度。使用等高线可以模拟这一现象，等高线的高度决定映射颜色（既外
4、部条件中设置的颜色）的亮度，等高线的形状对应映射颜色的分布位置，不同颜色亮度的分布最终造成视觉上的立体感。因此，利用等高线可以模拟物体特有的材质，物体哪里该凹，哪里该凸可以由等高线来控制。在使用图层样式的时候合理设置等高线可以获取不同的显示效果。,9.2 水晶按钮,自主练习,绘制嵌入图案的水晶按钮,9.2 水晶按钮,小结,1.【渐变填充】 2.【加深工具】 3.【钢笔工具】 4.【图层样式】,作业,复习本课内容，完成课后练习相关内容。,9.2 水晶按钮,学习任务,导航栏是网页的主要组成元素。本例制作的导航栏具有金属银的色泽和质感，中间嵌入水晶按钮，给人清新时尚之感。,9.3 金属质感的导航栏,
5、知识要点,主要使用渐变填充工具制作金属银的色泽和质感，利用圆角矩形工具绘制按钮形状，最后借助图层面板中的图层样式功能制作按钮的水晶效果。,9.3 金属质感的导航栏,知识解析,1.保存图层样式 在图层样式对话框中单击【新建样式】按钮，在打开的对话框中输入样式名称，例如my。 2.应用已有的图层样式 在【图层面板】激活准备实施图层样式的图层，在【样式面板】单击刚保存的my样式。可以看到图像窗口中该图层被赋予了图层样式。我们还可以利用系统提供的多种样式制作不同的按钮效果。,9.3 金属质感的导航栏,知识解析,3.追加图层样式 Photoshop默认状态下，在【样式面板】中只有20种图层样式，我们可以
6、单击【样式面板】右侧的按钮，在弹出的下拉菜单中单击需要追加的按钮样式。在弹出的对话框中单击【追加】按钮。,9.3 金属质感的导航栏,自主练习,利用【样式面板】中的已有样式，尝试制作各种按钮效果。,9.3 金属质感的导航栏,小结与作业,【渐变填充】,【样式面板】,作业,复习本课内容，完成课后练习相关内容。,9.3 金属质感的导航栏,9.4 睡意阑珊的小猪,学习任务,本例是一幅GIF动画，动态显示了一头粉红色小猪的可爱睡相。,知识要点,使用Photoshop CS3的钢笔工具绘制小猪外形，在【动画面板】中实现小猪肚子起伏的动态效果。,9.4 睡意阑珊的小猪,知识解析,GIF动画： GIF动画原理就
7、是将一幅幅差别细微的静态图片不停地轮流显示，就好像在放映电影胶片一样。一般是在Photoshop中做好GIF动画中的每一幅单帧画面，然后再用Gif动画将这些静止的画面连在一起，设定好帧与帧之间的时间间隔。制作Gif动画的软件除了Photoshop外Ulead Gif Animator也是一款相当不错的软件。,9.4 睡意阑珊的小猪,自主练习,9.4 睡意阑珊的小猪,小结,1GIF动画的原理 2Photoshop动画的界面和使用,作业,复习本课内容，完成课后练习相关内容。,9.4 睡意阑珊的小猪,学习任务,9.5 光影划过动画效果,本例是一款Banner，使用光影划过文字表面产生动画效果，吸引用
8、户对于广告信息的关注。,知识要点,使用Photoshop 书写文字，并制作椭圆光影，使光影成为文字的剪贴蒙版，最后在【动画面板】中实现光影划过文字表面的动画效果。,9.5 光影划过动画效果,知识解析,Banner（网幅图像广告）：以GIF、JPG、SWF等格式建立的图像文件，定位在网页中，大多用来表现网络广告内容，同时还可使用Java等语言使其产生交互性，用Shockwave等插件工具增强表现力。在网络营销术语中，Banner是一种网络广告形式。Banner R广告一般是放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注，从而获得网络营销的效果。,9.5 光影划过动画
9、效果,自主练习 练习一、制作文字渐隐渐现的GIF动画,9.5 光影划过动画效果,小结,1. 【动画面板】 2. 帧动画过渡 3. Banner广告,作业,复习本课内容，完成课后练习相关内容。,9.5 光影划过动画效果,学习任务,背景透明的图片被广泛的应用于网页制作和多媒体产品开发中，本例的蝴蝶边缘呈现半透明的外发光状态。,9.6 制作背景透明的图片,知识要点,将蝴蝶从背景中扣出，利用羽化和模糊命令蝴蝶边缘呈现半透明的外发光状态，使用画笔绘制闪烁的星光，设置背景层透明，最后将文件保存为PNG或GIF格式文件。,9.6 制作背景透明的图片,知识解析,1. PNG格式 流式网络图形格式PNG（Por
10、table Network Graphic Format）是20世纪90年代中期开始开发的图像文件存储格式，其目的是希望替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性，这使得PNG图像具有许多GIF和JPG没有的优点。,9.6 制作背景透明的图片,知识解析,2. 载入画笔,9.6 制作背景透明的图片,自主练习,练习一、制作背景透明的图片 根据自己喜好，制作一幅背景透明的PNG格式的图片，在Flash和FrontPage中利用多张图片叠加，验证透明情况。 练习二、载入画笔 从网络上收集自己需要的笔刷，并安装到Photoshop环境中，试用各种笔刷进行创意设计。,9.6 制
11、作背景透明的图片,小结,1. PNG格式的概念和应用。 2. 载入画笔。,作业,复习本课内容，完成课后练习相关内容。,9.6 制作背景透明的图片,学习任务,我们这里所说的切片（Slice）就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减低图像的大小，减少网页的下载时间，并且能创造交互的效果，还能将图像的一些区域用html来代替。,9.7 网页切片,知识要点,首先设计网页背景，再使用切片工具分割画面，最后存储为Web所有格式。打开第9章第7节的素材，浏览切片后的存储结果。,9.7 网页切片,知识解析
12、,在目前互联网带宽还受到条件限制的情况下，运用切片来减少网页下载时间而又不影响图片的效果。除了减少下载时间之外，切片也还有其他一些优点： （1）优化图像：完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。例如，如果需要以Gif格式优化图像的某一区域以便支持动画，而图像的其余部分以Jpg格式优化更好时，就可以使用切片隔离动画。 （2）创建链接：使用且片制作网页，可以在网页制作软件中对不同的切片制作不同的链接，而不需要在大的图片上创建热区。,9.7 网页切片,知识解析,网页色彩搭配： 制作页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，是明度，纯度还是色相。,9.7 网页切片,自主练习,利用附带CD中的素材图片“素材.jpg”,利用切片的方法进行切片并保存为Web所用格式。,9.7 网页切片,小结,作业,复习本课内容，完成课后练习相关内容。,1.【切片工具】 2. 输出格式,9.7 网页切片,
