1、能力目标:能力目标:(1)能够使用)能够使用photoshop软件。软件。(2)使用)使用photoshop软件完成首页效果图的切片。软件完成首页效果图的切片。(3)使用)使用photoshop软件完成首页效果图的切片导出。软件完成首页效果图的切片导出。知识目标:知识目标:(1)photoshop软件的基本工具的使用方法。软件的基本工具的使用方法。(2)photoshop软件的切片选择工具的使用方法。软件的切片选择工具的使用方法。任务一任务一 认识认识photoshop CS6photoshop CS6Photoshop简介简介Adobe Photoshop,简称“PS”,是由AdobeSys
2、tems公司开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。2003年,Adobe Photoshop 8被更名为Adobe Photoshop CS。2013年7月,Adobe公司推出了新版本的Photoshop CC,自此,Photoshop CS6作为Adobe CS系列的最后一个版本被新的CC系列取代。2013年7月,Adobe公司推出新版本photoshopPhotoshop CC(Creative Cloud)。在Photoshop CS6功能的基础上,Photoshop CC新增相机防抖动功能、C
3、ameraRAW功能改进、图像提升采样、属性面板改进、Behance集成等功能,以及Creative Cloud,即云功能。截止2016年1月Adobe PhotoshopCC2015为市场最新版本。任务一任务一 认识认识photoshop CS6photoshop CS6Photoshop使用领域使用领域(1)平面设计平面设计(2)广告摄影(3)网页制作(4)绘画(5)视觉创意视觉创意与设计(6)界面设计Photoshop功能特色功能特色从功能上看,Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。任务一任务一 认识认识photoshop CS6photoshop CS61
4、.菜单项2.选项窗口根据当前工具窗口选择的功能3.工具箱选项4.为工作区界面5.为不同工作环境的窗口配置模式选项6.属性窗口界面任务一任务一 认识认识photoshop CS6photoshop CS6任务二任务二 使用使用photoshopphotoshop设计一个首页设计一个首页1切片的作用;切片的作用在于依据网页布局及参考线将大图切割成小图,从而加快网页图片的下载速度,降低网页的整体大小。2切片工具的使用(1)依据参考线,通过拖动鼠标的方式进行图片的切割,在通过切片工具创建切片,按住“Shift”键并拖动可使切片为正方形,按住“Alt”键可使切片从中心向四周扩展。(2)如果需要切片的图片
5、布局比较简洁,也可以采用基于参考线的切片来完成图片的切割。在操作的时候首先可通过参考线在图像上定位,然后在公共栏上点击“基于参考线的切片”按钮。这样可以方便快捷地完成图片的切片。(3)执行“文件|存储为Web和设备所用格式”命令,可以完成切片的导出、在弹出的对话框中将保存类型设为“HTML和图像(*。Html)”,将切片设为“所有用户切片”,最后点击“保存”按钮即可。在“切片”选项中有三个待选项,具体的含义如下:所有切片,包括用户切片和自动切片;用户切片,是指使用切片工具拖动出来的那个区域形成的切片,通常用蓝色图标显示;自动切片,指的是基于切片动作的基础系统自动生成的切片,通常用灰色图标显示。3切片时的注意事项;各个切片的边界应尽可能多地处于同一横坐标或纵坐标上。这样便于调整每个切片的边界,也便于在Dreamweaver中编辑。在切片时,背景相同,重复出现的区域裁切成统一大小,只使用其中一张区域的图片即可。在Dreamweaver后期处理时,颜色单一的区域,可直接使用表格或者背景颜色来设置,因此在切片的过程中,这部分切片的“切片类型”可设为“无图像”。任务三任务三 首页效果图切片处理与导出首页效果图切片处理与导出