作者：李彦广,焦元奇
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Photoshop 淘宝店面设计从入门到精通试读：
前言
淘宝网店的兴旺和竞争的日益激烈，使淘宝网店的设计变得愈发重要，设计的好坏甚至直接影响到销售业绩，因此我们带来这本侧重讲解淘宝网店如何设计得好的图书。
在信息技术飞速发展的今天，为什么市面上拥有如此众多的软件应用类教程和书籍，而我们初入职场的大学生、设计爱好者依然抱怨自己精心设计的视觉作品不能很好地得到领导的认可和客户的喜欢。为此，笔者及团队在执笔构思本书之前曾多次调研了在校学生、往届毕业生、设计师和Photoshop设计爱好者，调查结果主要体现为以下3点。（1）软件说明书式的“庞大”教程让大家在学习过程中更多地了解了软件的使用，而无法真正接触到平面广告设计中基于市场需求的思维技巧和广告创意要求的核心诉求。（2）读者虽然会通过多种途径接触各类设计教程，但很多时候，参考教程所设计的作品并不符合客户的需要，而花费大量时间设计的华丽的视觉效果也无法获得领导的赞许。（3）传统教育中的“说教式”教程编写方式无法实现“以设计需求为中心”，也无法让自己的设计思维得到真正的拓展。
基于以上3点，我们以提高职业技能为主旨，对本书内容进行了设计。
本书内容特点
不只是软件操作
在基本技能结构搭建的基础上，我们将行业发展、消费心理、设计技巧、思维技巧、创意技巧、知识点活用和案例分享等内容进行了梳理，更强调网店营销设计思路、设计方法与技巧的归纳与总结，力求做到让大家能够解决实际问题。
以设计为主线的学习模式
以设计为主线，采用分享的方式，全流程讲解淘宝网店的配色、文字和版面设计，针对性地讲解店招、促销广告、LOGO、文案、海报、导航和商品详情页等的设计思路、方法与经验，力求将核心知识点进行提炼和总结，将它们在实际应用中的前因后果、应用拓展等“干货”拿来与大家分享。
注重职业技能培训
重点知识点提炼、实战演练和综合案例的详尽分析，保障了所学软件功能和设计知识的可操作性，提升读者的实际工作水平，适合相关的院校专业课和培训班作为职业技能培训教材。
配套资源
附赠重点章节的多媒体语音教学视频，详细讲解核心知识点和主要案例的设计制作过程。还收录所有案例的素材文件和结果文件，可提高读者的学习效率。资源文件体系清晰，内容完备，便于读者将书稿与实际操作相结合，提高学习效率。
资源下载及其使用说明
本书正文中所述的配套资源文件已作为学习资料提供下载，扫描右侧二维码即可获得文件下载方式。如果大家在阅读或使用过程中遇到任何与本书相关的技术问题或者需要什么帮助，请发邮件至szys@ptpress.com.cn，我们会尽力为大家解答。
感谢您选择本书。现在呈现在您面前的是本书的第一版，由于我们能力有限，书中难免存在不足之处，欢迎大家批评指正，也欢迎大家在使用本书过程中提出新的见解。我们也会不断地修订本书，在更新版本中也可能会出现您提供的精彩内容。此外，为了便于大家交流，分享设计的快乐，我们为大家建立了QQ交流群（群号：369590871）。欢迎各位朋友前来做客，共同交流、共同分享，只要您的见解能满足更多求知者的需要，帮助求知者提升自我的工作能力，我们都将不胜感激和欢迎！第01章PhotoShop CC设计淘宝店面的4项基本常识
在目前互联网及移动互联网快速发展的时代，网络购物在悄悄地改变着人们的购物和消费方式，所以，市场对淘宝店面设计人才、淘宝美工设计人才的需求也在不断高涨。Photoshop CC的出现，使得我们进入了“创意云”时代，而作为即将开始步入职场的新任设计师，学习淘宝店面设计也是为了在实战中获得实现自我价值的机会。在本章中，作者将与大家一起分享Photoshop CC设计网页的4项基本常识。1.1 设计师必知的Photoshop CC软件7项新功能
Photoshop CC的面世意味着Adobe提倡的“创意云”时代的到来，Photoshop软件在互联网时代的用途也因此更加广泛。在本节中，作者将与大家分享Photoshop CC在淘宝店面设计方面新添加的7项实用新功能。1.1.1 无损缩放让大图、小图都清晰
通常，当我们使用Photoshop软件对素材图像进行放大时，总会影响图像的品质，而现在Photoshop CC新增的图像无损缩放功能帮助我们很好地弥补了这一遗憾。但要注意，无损缩放是相对的，因此，尽可能地提高素材图像的品质才能保证最终的设计效果和质量。
位置 图像→图像大小。
作用 可以运用这一功能制作网站首页轮播广告中经常用到的图像效果，从而展现网站更为精美的视觉效果。
应用技巧分享
步骤1 打开一幅素材图像（如图1.1所示），执行“图像→图像大小”命令，然后在弹出的对话框中设置重新取样为“保留细节（扩大）”，即可更改图像的尺寸为我们所需要的数值，如图1.2 所示。图1.1图1.2
步骤2 通过调整“减少杂色”还可以有效降低放大图像过程中所产生的杂点干扰。
步骤3 以前我们在使用Photoshop软件修编图像时，只能通过按Ctrl+T组合键缩放图像来实现，而且反复缩放图像会损失图像的像素。
步骤4 图像运算结束后，我们发现图像的尺寸发生了变化。选择裁切工具，将我们需要的部分裁切出来，如图1.3所示。图1.3
图像处理完成以后，自然需要将图像进行锐化处理。新的智能锐化滤镜让我们可以更加自如地提高图像清晰度，同时最大限度地减少其他因素的影响。在实际应用时，我们可以控制参数的数量、半径，降低噪声，以及选择模糊类型。
位置 滤镜→锐化→智能锐化。
应用技巧分享
步骤1 打开需要进行锐化操作的图像。除了以前我们常用的3个可控参数以外，我们还可以控制锐化效果在阴影和高光中的应用 程度，如图1.4所示。图1.4
步骤2 在输出最终设计稿时，经常会由于我们没有对图像进行锐化操作而出现效果模糊的情况，因此我们一定要注意对图像进行最后的锐化操作之后再输出保存。实际应用效果对比如图1.5、图1.6所示。图1.5图1.61.1.2 消除抖动，让宝贝更靓丽
清除拍摄抖动对照片的影响是大家对Photoshop CC期待已久的功能。该功能允许设计师自动降低由于拍摄抖动引起的图像模糊。Photoshop系统会自动分析抖动模糊区，选择最适合的图像防抖算法，确定模糊的性质，对整个图像进行适当的更正。
位置 滤镜→锐化→防抖。
应用技巧分享
步骤1 素材分析。打开一幅需要矫正抖动的素材图像，如图1.7所示。如果照片抖动得太厉害，作者认为就不能再为了炫耀技术而强行运用该功能进行矫正了。图1.7
步骤2 使用该功能可将抖动图像的清晰度最大化并同时将杂色和光晕最小化。此外，系统还允许我们对多个区域进行微调，以取得外观自然的高品质结果，如图1.8所示。图1.8
步骤3 单击“高级”选项，可清晰地观察到消除抖动的细节。关于“模糊描摹设置”中的4个重要控制参数的作用，大家可将光标放置于标签文字之上，帮助说明文字就会自动显示，如图1.9所示。图1.9
步骤4 效果对比十分明显。如图1.10、图1.11所示。图1.10图1.111.1.3 圆角矩形及CSS复制
圆角矩形工具最大的变化在于我们使用圆角矩形工具绘制一个形状后，在“属性”面板中可以自由更改所有的圆角弧度，也可以单独调整每个边角。
位置 工具箱→圆角矩形工具。
应用技巧分享
步骤1 选择圆角矩形工具，绘制出图1.12所示的圆角矩形。打开“属性”面板，对其进行如下的调节，如图1.13所示。图1.12图1.13
步骤2 为形状添加特定的图层样式。执行“图层→图层样式” 命令，在弹出的对话框中为圆角矩形添加渐变叠加样式和投影样式，如图1.14、图1.15所示。图1.14图1.15
步骤3 通过美化圆角矩形的外观（包括但不限于渐变叠加和投影），我们获得了满意的效果。正如Adobe描述的创意云（Creative Cloud）那样，现在我们可以轻松地将此创意效果应用到网页设计之中。我们只需在圆角矩形的图层缩略图上单击鼠标右键，选择“复制CSS样式”命令，然后将其粘贴在网页设计CSS代码编辑器的窗口中即可实现效果的跨平台移植。
步骤4 如果我们想首先预览一下生成的CSS代码，可按住Ctrl键不松开，然后用鼠标右键单击这个图层，即可看到CSS代码，如图1.16所示。图1.16
现在我们学习网页设计还担心不会编写CSS样式代码吗？放心大胆地学习Photoshop CC（Creative Cloud）吧，创意云会有许多意想不到的效果。如果您还有点担心，下面作者再与大家分享一个网页设计中的“干货”：插件CSS3Ps。
CSS3Ps是一款基于云的免费Photoshop插件，可以将Photoshop图层特效转为CSS3代码。可以对图层的一些特效（如阴影、发光、圆角、渐变等）进行CSS3.0的完整代码输出。
插件下载地址：http://css3ps.com/Download/。
提示大家，如果Photoshop软件已经开启，那么在安装该插件之前需要暂时先将Photoshop软件关闭。
应用技巧分享
步骤1 执行“开始→所有程序→Adobe Extension Manager CC”命令在“Adobe Extension Manager”中单击“获取”按钮，接下来就会对插件进行安装。插件安装完成后如图1.17、图1.18所示。图1.17图1.18
步骤2 这样我们就可以在Photoshop中选择需要转换为CSS样式代码的图层，实现相应的操作了。可以在Adobe Photoshop菜单项“窗口→扩展”中查看到相关的插件信息。
步骤3 现在我们就可以使用该插件了。当然，前提是我们要先设计好自己喜欢的图形效果。选择我们需要输出CSS3.0样式的图层，如图1.19所示。图1.19
步骤4 接下来，执行“文件→脚本→浏览……”命令，然后在弹出的对话框中选择“CSS3Ps.jsx”，如图1.20、图1.21所示。图1.20图1.21
然后即可在浏览器中看到所转换的CSS样式代码及效果了。此时，直接将该代码文件保存，等后期需要使用时，直接将该代码复制到样式文件中就可以了，如图1.22所示。这样将节省我们很多编写代码的时间和精力。最明显的优点是，我们再也不用为“不认识代码”而发愁了！让我们为这个小插件点个赞吧！图1.221.1.4 形状和路径的应用更简单
使用Photoshop CC提供的多种形状和路径选择，我们在进行广告设计时可以同时选取多个路径、形状和矢量蒙版，而不需按多次鼠标即可完成更多任务。即使在拥有多条路径的多图层文件中，也可以使用新的滤镜模式，直接在画布上锁定路径（及任何图层），如图1.23、图1.24所示。图1.23图1.24
此外，在Photoshop CC中虚线的绘制也变得十分便利，我们只需在“实时形状属性”面板中直接选择需要的虚线类型，然后就可进行绘制，如图1.25、图1.26所示。图1.25图1.261.1.5 智能移除，让页面宝贝更突出
智能移除工具Camera Raw的工作原理与我们熟悉的修复画笔工具的功能类似。我们只需要在素材图像上基于需要移除的对象绘制一个选区，然后拖曳修复控制点（绿点）至适合的区域，便可实现智能移除和更换。
智能移除工具主要包括两种修复类型，即修复和仿制模式：前者的采样区域是纹理、光照和阴影；后者适用于图像采样面积。我们可以设置画笔的大小和不透明度级别来影响移除杂质的强度。
位置 滤镜→Camera Raw滤镜。
应用技巧分享
步骤1 如图1.27所示，在拍摄宝贝的照片时，不小心出现了一个多余的钱包一角。所以在设计页面的推广效果时，首先要移除这部分多余的内容。图1.27
步骤2 打开Camera Raw滤镜，单击“污点去除”命令按钮，然后通过调整笔触的大小、选区的羽化强度及移除对象的不透明度参数（如图1.28所示），即可快速实现多余杂质的移除。图1.281.1.6 径向滤波器，让宝贝尽显魅力
Camera Raw径向过滤工具，允许我们创建椭圆以选定区域而进行图片的局部调整。这为淘宝店面设计师将宝贝转变为版面的视觉焦点提供了便利。当然也可以给宝贝添加多个径向过滤器效果，并且为每个区域应用不同的调整。
位置 滤镜→Camera Raw滤镜。
应用技巧分享
步骤1 设计师希望将产品置身于特定的环境之中，以此增加产品的实际体验度。如图1.29所示，如果我们希望销售的是实木木桌，我
试读结束[说明：试读内容隐藏了图片]