《电子商务网页设计与制作》课件项目三VIP

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