效果图
喜欢老师的文章、关注专栏
步骤1:将您的图片制作成分层文件
在Photoshop中打开产品图片。最有可能的是JPG格式。在此示例中,我们将使用在白色背景下拍摄的手表图像。
打开“ 图层”面板。默认情况下,该面板位于图像窗口的右侧,但如果看不到它,则可以通过从应用程序窗口顶部的下拉菜单中单击“ 窗口”>“图层”来访问它。
在“ 层”面板中,双击“ 背景”层。一个新图层对话框,要求您重新命名层就会出现。您可以将其保留为默认的第0层,然后单击“ 确定”。
现在,您已经解锁了背景图层,从其中删除的任何内容都是透明的。
步骤2:建立选择
从应用程序窗口左侧的工具栏中选择魔术棒工具。然后,从屏幕顶部的选项栏中单击“ 选择主题”。无论背景如何,Photoshop都会尝试从照片中选择对象。您将在选择周围看到该选择作为“蚂蚁线”。
如果选择不完美,则可以使用魔术棒工具从选择中删除更多背景,或根据选择的方式向选择中添加更多产品。
在此示例中,Photoshop并未完全从选择中删除手表的阴影,因此我们将在选项栏中选择“ 从选择中减去”图标,然后使用魔术棒工具单击阴影的一部分,直到选择仅包含手表。
创建选择项时,请确保还选择产品图像中任何有“孔”的区域,例如示例图像中表盘与腕带相接的区域。
步骤3:删除背景
选择完产品后,通过键入SHIFT CTRL I(在Mac上为SHIFT COMMAND I)或从应用程序窗口顶部的下拉菜单中选择“ 选择”>“反选”来选择反选区域。
选择反(背景)后,键入BACKSPACE(在Mac上为Delete)。您的背景现在将是透明的。在Photoshop中,透明的背景用灰色和白色的棋盘图案表示。
键入CTRL D(在Mac上为COMMAND D)以取消选择。
步骤4:以适当的网络格式保存图像
在Photoshop中创建透明背景只是第一步。您需要确保以正确的格式保存产品图片,以便产品图片在电子商务网站上以透明背景显示。
保存图像的最佳格式是PNG-24。这种格式允许多层透明,这意味着当您将图像放置在不同颜色的背景上时,图像永远不会有像素化的“光晕”。较旧的透明文件格式(例如PNG-8和GIF)会产生这种不良的光晕效果,因此,请尽可能使用PNG-24。
要将文件另存为Photoshop CC中的PNG-24,请键入SHIFT ALT CTRL W(在Mac上为SHIFT OPTION COMMAND W),或从顶部菜单中选择“ 文件”>“导出”>“导出为... ”。应用程序窗口。
注意:如果您使用的是Photoshop的旧版本,并且没有看到“ 导出为...”选项,则可以选择“ 另存为Web”,然后从右侧的“ 预设”下拉菜单中选择“ PNG-24”。对话框。
在出现的对话框中,在框右侧的“ 文件设置”下,将“ 格式”设置为“ PNG”,并确保选中了“ 透明性”框。不要选检查文件较小(8位) -此转换文件为PNG-8
在图片的左侧,您会看到为PNG文件预测的文件大小。这一点非常重要,因为较大的文件大小会使网页加载速度变慢。我个人的喜好是将Web图片保持在200 KB或更小。
在对话框的右侧,在“ 图像大小”下,您可以选择调整图像的尺寸。较小的尺寸表示较小的文件大小。但是,您不想使图像的尺寸小于希望它们出现在网站上的尺寸。这样做会产生模糊或像素化的图像。
此外,由于许多客户在显示器上查看产品,因此,将产品图片保存为比您期望的尺寸大50%至100%的大小是一种很好的做法。这将帮助它在所有设备上看起来清晰。换句话说,如果您知道您的产品最大可以显示400像素宽,那么您需要在此处将其至少显示600像素宽。
因此,是的,您需要使用一些平衡来最大化图像大小,同时最小化文件大小。为了最大程度地减少加载时间,您只能选择将特色产品图片保存较大以用于视网膜显示,并允许将大部分产品图片保存为实际尺寸。
第5步:保存文件
将图像尺寸设置为适当的尺寸后,点击全部导出。
在“保存”对话框中,选择保存网络产品图像的文件夹。最好将优化的图像文件与原始图像文件分开,以免在将图像加载到站点时造成混淆。命名图像文件,并确保其扩展名设置为.png。
,