浅谈Photoshop在农宝网美工设计中的应用

陆勋

摘 要：2015年12月16日至18日，在浙江乌镇召开的以“互联互通、共享共治——构建网络空间命运共同体”为主题的第二届互联网大会上，释放了重要信号：跨境壹号助力跨境电子商务应对喷井发展。农宝网，是江苏南通如皋开发的一个全国性农产品电子商务平台，实现农产品可以上网发布销售、买卖交易、购买支付的全新平台。作者作为此平台的美工设计者，亲历了此平台的制作，目前就设计与制作中的一些体会与感受做一些简单的介绍，希望能与业内从事电商平台开发的同行们进行交流。

关键词：Photoshop；农宝网；美工设计

1 LOGO的制作

LOGO图标是一个网站的形象标志。在当今品牌时代，一个优秀的LOGO图标，不但能点缀界面，而且还可以加深客户对该网站的印象，提高网站的知名度。Photoshop提供了矢量图绘制功能。在农宝网美工设计中，涉及到的LOGO制作主要是店铺标志。

位于农宝网店铺右上角（如图1所示）。

制作此LOGO时，首先，本人搜集一些比较有创意的店铺标志；然后用铅笔绘制草图（如图2所示）；最后在PS软件中设定图像尺寸为100像素×100像素，图像模式为RGB模式，图像分辨率为72像素/英寸，使用PS矢量图形的制作工具，如钢笔工具，制作的LOGO轮廓，并填充了R=255，G=0，B=0的红颜色。最后在混合选项里设置相关参数，得到如图1所示的完成效果。

2 图片的选择、调整与剪切

在农宝网平台店铺装修时，获取农产品图片的方法可以通过摄影或者网络素材库获得。在选择农产品图片时，详细挑选，如在挑选草莓图片时，一般地，包括种植图，开花图，结果图，成熟图，包装图等。在制作店铺条幅、产品主图、产品详情页、产品幻灯片等图片时，所挑选的图片就可以在其中体现。

以制作店铺条幅作详细说明：店铺条幅，即店铺招牌，它是店铺里第一眼被人看到的，位于农宝网店铺最上方，就如同实体店铺的招牌，店铺条幅制作在网页设计中占据着重要的地位。

（1）素材准备。在制作店铺条幅之前，首先要搜集产品素材，可以是通过村官拍摄获得的产品图片，也可以是网上素材库里的图片（包括JPEG、PSD文件等）。

（2）启动Photoshop软件，新建文件，设置相关参数，参数设置如图3所示。

（3）参数设置完成后，生成一个尺寸为1000像素×250像素的页面，制作者可以在页面上根据自己的设计思维进行制作。

在网络素材库里获得的图片文件，其图像模式有时不是RGB模式，图像分辨率也不是72像素/英寸，这就需要对图片进行调整。假设，在网络素材库里下载一张草莓图片，图像模式为CMYK模式，图像分辨率为300像素/英寸，调整方法如下：将下载的草莓图片在Photoshop软件里打开，把背景图层复制一层，在图像菜单下的模式里将CMYK颜色改为Lab颜色，再将Lab颜色改为RGB颜色；在图像菜单下，选择图像大小，勾选缩放样式、约束比例、重定图像像素，将分辨率改为72像素/英寸，像素大小还设置为原来大小。

把产品详情页传到网上时，有时会遇到图片太大，传不上去的情况。此时，要对大块图片进行切片，提高网页下载速度。使用Photoshop的切片工具切片后，存储时用“存储为Web和设备所用格式”命令，切片存储格式要求一般存为Gif或PNG格式。质量要求高的图片需要存储为JPEG格式，JPG格式可以显示更多的图片细节。产品详情页切片步骤如下：（1）在Photoshop软件里打开核桃内页

（假设尺寸为750像素×6120像素）；（2）选择工具箱中的移动工具，

显示界面中的标尺，用移动工具拉出参考线，将产品详情页划分成均匀小片；（3）划分完成后，选择工具箱中的切片工具，点击界面中的基于参考线的切片；（4）选择文件菜单下的“存储为Web和设备所用格式（D）”命令，设置相关参数，点击存储，完成产品详情页的切片。

3 网店主题色彩的搭配

一般来讲，一个网页上只采用一个色系，通过调节色系中颜色的深浅来达到整体的网页风格。但是，如果把平面设计中的整体设计思想搬到网站设计上来，可以达到很好的平面设计效果。如纯色的色块结合淡色线条的设计：用色块对网页进行间隔，用线条把网页中的相关内容连接起来可以增强网页的层次感，颜色的合理搭配，网页就令人赏心悦目了。

4 店商PS制作的特点

4.1 图像模式不同

图像模式指图像所在的工作颜色空间。在制作产品图片时，图像模式设置为RGB模式，而不是CMYK模式。所有的网络图像在开始时都在RGB模式中被开发出来，RGB图像适合于在计算机显示器上观看，计算机在显示器上的再现颜色是通过红、绿、蓝光来实现的。RGB颜色空间是用色光三原色来描述物体颜色特征的。在图像处理软件的色彩管理系统中，RGB颜色模式是数字照相机、扫描仪、显示器所使用的颜色系统，是一个与设备相关的颜色空间。也就是说，它们产生的颜色是与具体使用的设备有关的，不同设备可能使用不同的RGB三原色，混合出的效果也不会完全相同。

在RGB模式下工作，具有节省内存，提高性能的优点；此外，在RGB模式中具有更大的设备独立性，因为RGB色彩空间并不依赖于显示器或油墨。不管使用的是显示器、计算机，还是输出设备，对图像进行的校正都被保留。

图像的编辑往往要经过许多细微的过程，比如可能要将几幅图像中的内容拼合在一起，并且由于各组成部分的原色调不可能一样，需要对它们进行调整，也可能要使各部分以某种方式合成，并进行过滤器处理等。

用Photoshop软件进行图片制作时，使用RGB色彩模式作为其图像处理的首选模式，其图像拥有更多调整工具与操作指令，从而更便于彩色图像的处理与编辑。而与之相对，采用CMYK色彩模式的图像则有许多调整功能不能实现。因此，RGB色彩模式更有利于图像的调整与处理。

4.2 图像分辨率不同

图像分辨率指单位长度内包含的像素数，将决定存储为图像文件时的数据量，常以每英寸像素数ppi表示。像素是可在屏幕显示的最小元素，像素与屏幕无关。在美工设计中，图像分辨率以ppi来度量，它和图像的宽、高尺寸一起决定了图像文件的大小及图像质量。

在农宝网店铺装修时，所制作的图像用于屏幕上显示，显示屏无论多大，都是以分辨率为前提的，其分辨率只需满足典型的显示器分辨率（72ppi或96ppi）即可。图像分辨率设置的越高，图像文件越大，显示速度就会越慢。与印前制作的图像则不同，印前制作一般设置为300像素/英寸。

ppi值作为对显示器像素密度的表示单位，在图像处理软件中普遍采用72ppi作为默认值，因为1pt=1/72inch，这是点（Point）这个单位的定义，在逻辑上用一个点对应一个像素，是最自然不过的事情了。

5 结束语

文章主要结合现实电商平台，讲述了Adobe Photoshop软件在网页设计制作中的应用。主要讲述了软件的部分功能，主题色彩的搭配，以及软件制作特点。作者作此文，主要想和印刷行业印前制作人员以及电子商务行业美工设计人员交流心得体会，以达到共同学习的目的。欢迎读者提出意见和建议。

参考文献

[1]丁瑜.Photoshop在网页美工设计中的应用研究[J].管理视窗 商业文化，2015，8.

[2]周颖梅，姜中敏.平面设计在网页中的应用[J].福建电脑，2006，4.