第五章 电子商务网站图像处理技术

电子商务网站图像处理技术不学习PhotoshopCS就无法独立建设电子商务网站,我们没有必要全面学习，我们应该站在应用的角度上学习，即可胜任电子商务网站制作的全部需要。第5章第一节PhotoshopCS使用速成第二节网页常用图像处理第三节网站版面制作实例第五章电子商务网站图像处理技术一、PhotoshopCS工作环境进入AdobePhotoshopCS、系统后会出现如图

在【欢迎屏幕】窗口中单击按钮，将【欢迎屏幕】窗口关闭，此时所显示的是PhotoshopCS软件的工作界面

PhotoshopCS软件的工作界面主要包括

菜单栏属性栏工作区控制调板状态栏工具箱标题栏二、PhotoshopCS图像文件的处理1．图像文件的创建

2．图像的打开与保存【文件】→【新建】命令Ctrl+N图像文件的打开执行菜单栏中的【文件】→【打开】命令Ctrl+O图像文件的保存执行菜单栏中的【文件】→【存储】命令Ctrl+S三、PhotoshopCS图层的应用123476859【图层】调板图层的概述

图层的功能及效果

图层的分类图层创建及删除

调节图层顺序

图层的编辑

创建图层组

创建剪贴蒙版10对齐和分布图层

应用提醒：1.网站版面设计使用的分辨率为72像素/英寸。2.网站版面设计色彩模式为RGB、网站版面设计中以像素为单位。3.新建图层Ctrl+Alt+Shift+N不出现对话框，在图层调板中自动生成透明图层。

本节所介绍的PhotoshopCS是做版面设计不可缺少的；要快速的制作网站那你就必需熟练的运用以下的快捷键；1．新建图层【Ctrl】+【Alt】+【Shift】+【N】

2.矩形选区描边

【Alt】+【E】+【S】

3.重新选择

4.反向选择

5.通过拷贝建立一个图层6.盖印可见图层

7.调整当前图层的透明度小键盘的

8.自动调整色阶

【Ctrl】+【Shift】+【D】【Ctrl】+【Shift】+【I】【Ctrl】+【J】

【Ctrl】+【Alt】+【Shift】+【E】

【0】至【9】

【Ctrl】+【Shift】+【L】

案例：

PhotoshopCS精细制作网站的导航条制作步骤：①新建立文件500px×50px、分辨率72ppi，制作480px×530px的一个选区；②执行“选择”→“修改”→“平滑”，设置半径为2px。③创建一个新图层，填充选择为任何颜色；在如图所示的“应用图层样式”设置渐变颜色为“#313332”到“#46474a”、描边颜色为“#676767”；④选择“导航”上部的“选取”，新建一个图层，从上到下用白色到透明进行渐变填充。图层模式改为线性减淡，不透明度35%，效果如图所示；⑤新建图层。使用单行选框工具在上部选择1px区域填充为白色，改变图层混合模式为柔光，不透明度为60%；⑥下面添加一个按钮。创建一个130px×524px选区，然后“选择”→“修改”→“平滑”，设置半径为2px。方法同上③～⑤步，效果如图5.23所示；⑦添加字符。字体为宋体，字号12点，白色；⑧在文字中间添加分隔线。创建新层，使用单列选框工具选择区域，填充颜色为“#1a1b1c”；向右移动选区1px再次填充为“#5d5f60”；再向右移动1px填充为“#232526”。用20px柔笔刷擦除上下的部分，图层不透明度设置为50%，效果如图所示。【训练内容】制作5种不同风格的网站导航条【训练目的】（1）熟悉软件的操作。（2）了解网站导航条的制作过程和网站内容。【训练要求】（1）用文字说明制作的网站类型，录入网站导航的链接文字。（2）统一尺寸：800px×530px。（3）文字说明制作感言。第一节PhotoshopCS使用速成第二节网页常用图像处理第三节网站版面制作实例第五章电子商务网站图像处理技术

PhotoshopCS功能强大、工具众多，初次学习，如入云山雾海，但网站页面制作中常用的功能并不多，也非常容易学习。本节将以案例导航的方式将网站设计常用的图像处理一网打尽，并将对网页制作常用的图像处理技术，以案例的方式进行全面讲解。一、头部常用图像处理实例二、“导航”常用图像处理实例三、栏目常用图像处理实例四、网站背景图像处理实例五、链接常用图像处理实例将所选文本的文字大小减小2点像素：“Ctrl+Shift+<”。将所选文本的文字大小增大2点像素：“Ctrl+Shift+>”。将所选文本的文字大小减小10点像素：“Ctrl+Alt+Shift+<”。将所选文本的文字大小增大10点像素：“Ctrl+Alt+Shift+>”。将行距减小2点像素：“Alt+↓”。将行距增大2点像素：“Alt+↑”。将基线位移减小2点像素：“Shift+Alt+↓”。将基线位移增加2点像素：“Shift+Alt+↑”。“Google”标志的制作网站图像制作实例【训练内容】制作5个不同风格的栏目和5个热链接按钮【训练目的】（1）了解网站的整体构成。（2）熟练运用Photoshop各种工具。【训练要