在Photoshop中为您的产品摄影图片创建透明背景可以为您的特色产品提供多种引人注目的显示选项。例如,透明背景使您能够将产品放置在动态变化颜色的背景上。在响应式设计的网站上,具有透明背景的特色产品可以根据用户的屏幕尺寸与其背景进行不同的交互。
您网站的徽标文件也应使用透明背景创建,以便您可以放置徽标无论页面的背景颜色如何,您网站上的任何位置。
使用Photoshop创建透明背景,然后将文件保存为适用于网络的适当格式,一旦您知道自己在做什么,这将非常容易正在做。广州摄影公司-艾米摄影将在下面的教程中引导您完成这个简单的过程。
如何在Photoshop中为产品图像创建透明背景
第1步:将图像制作成分层文件
在Photoshop中打开您的产品图像。最有可能的是,它将采用JPG格式。对于此示例,我们将使用在白色背景下拍摄的手表图像。
打开图层面板。默认情况下,此面板位于图像窗口的右侧,但如果看不到它,可以通过单击应用程序窗口顶部下拉菜单中的“窗口”>“图层”来访问它。
在图层面板中,双击背景图层。将出现一个新图层对话框,要求您重命名该图层。您可以将其保留为默认层0,然后单击确定。
您现在已经解锁了背景层,以及您想要的任何内容从中删除将是透明的。
了解如何使用图层在Photoshop中使用本教程了解更多
第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。
了解如何重新格式化、调整大小和优化您的网络图像了解更多
要在PhotoshopCC中将文件保存为PNG-24,请键入SHIFT+ALT+CTRL+W(在Mac上为SHIFT+OPTION+COMMAND+W)或选择文件>导出>导出为...从应用程序窗口顶部的下拉菜单中选择。
注意:如果您使用的是旧版本的Photoshop,并且没有看到“导出为...”选项,您可以选择为Web保存并从对话框右侧的预设下拉菜单中选择PNG-24。
在出现的对话框中,在文件设置下框的右侧,将格式设置为PNG,并确保透明度b牛被检查。不要选中SmallerFile(8-bit)—这会将文件转换为PNG-8
在图像的左侧,您会看到文件大小为您的PNG文件预测。请务必注意这一点,因为较大的文件会使您的网页加载速度变慢。我个人的偏好是将Web图像保持在200KB左右或更小。
在对话框右侧的“图像大小”下,您可以选择调整图像的尺寸。较小的尺寸意味着较小的文件大小。但是,您不想让图像的尺寸小于您希望它们出现在网站上的尺寸;这样做会产生模糊或像素化的图像。
此外,由于您的许多客户在视网膜显示器上查看您的产品,因此最好将产品图像保存为比实际尺寸大50%–100%的尺寸您希望它显示的大小。这将有助于它在所有设备上看起来清晰。换句话说,如果您知道您的产品将以400像素宽显示在最大的情况下,您需要在此处使其至少有600像素宽。
因此,是的,您需要在最大化图像尺寸的同时最小化您的图像尺寸方面取得一些平衡。文件大小。为最大限度地减少加载时间,您可以选择仅将特色产品图片保存为更大的视网膜显示器,并允许以实际尺寸保存大部分产品图片。
第5步:保存文件
将图像大小设置为适当的尺寸后,单击“全部导出”。
在“保存”对话框中,选择保存可用于Web的产品图像的文件夹。最好将优化后的图像文件与原始图像文件分开,以避免在将图像加载到您的站点时发生混淆。为图像文件命名并确保其扩展名设置为.png。
单击“保存”。
获取数字资产管理技巧以整理您的照片并保持理智学习更多
您现在可以将透明的产品图片放在不同的b背景并让它完美显示。
如何在Photoshop中为徽标创建透明背景
您在网站上使用的徽标应始终具有透明背景。这样,无论页面背景是什么颜色,您都可以灵活地将其显示在网站的任何位置。
但是,如果您的徽标另存为JPG,则需要删除Photoshop中的背景并将文件重新保存为PNG-24,就像我们在上面的示例中对产品图像所做的那样。如果您有幸拥有矢量文件形式的徽标(扩展名为.AI、.EPS或.PDF),您仍然需要在Photoshop中打开该文件并将其转换为PNG-24,这样它才能采用网络就绪格式。
了解如何将光栅外包到矢量转换需求了解更多信息在Photoshop中打开徽标文件使背景透明将图像另存为PNG文件
步骤1:在Photoshop中打开徽标文件
在Photoshop中,转到文件>打开并导航,直到您看到徽标文件。单击打开。
如果您打开的是.JPG(或其他光栅格式)文件,该文件将直接在Photoshop中打开。
如果您打开的是矢量格式文件,但是,您需要确保您在出现的对话框中的设置是正确的:
CropTo:issettoBoundingBoxConstrainProportionsischeckedMode:issettoRGBColor
单击确定。
第2步:使背景透明
如果您使用的是矢量文件,则可以跳过此步骤。但是,如果您使用的是JPG,则需要从图像中选择并删除背景。
就像我们在上面的步骤1中将产品图像背景设为透明时所做的那样,您将需要双击图层面板中的背景层,然后单击确定将背景转换为图层0。
选择徽标文件的背景与选择产品图像的背景略有不同,因为你的日志背景o很可能是全白的。从工具栏中选择魔术棒工具,然后单击徽标文件的白色背景。如果您需要选择多个区域,请按住SHIFT键并使用魔棒工具单击以添加到选区。
选择整个背景后,键入退格键(在Mac上为DELETE)。您现在将拥有一个透明背景,由灰色和白色棋盘图案表示。
第3步:在Photoshop中将图像另存为PNG文件
按照上面我们将产品图像设为透明的步骤4和5将您的文件导出为PNG-24。无论您以何种文件格式开始,无论您的原始文件是JPG、AI、PDF还是其他文件格式,这些步骤都是相同的。
当您导出图像时,您会注意到您的文件大小明显小于透明背景产品图像的文件大小。这是因为标志往往只有一种或两种颜色,不像现有的数千种颜色t在产品图片中。因此,您无需在保存徽标文件时缩小图像比例。保持您的尺寸与您一直使用的原始文件大小相同,然后单击保存。
您现在已经掌握了创建具有透明背景的网络就绪图像的知识,这些图像将在不减慢您的速度的情况下精美地显示网站。