美图秀秀
拖动LOGO到书签栏,收藏美图秀秀打开更便捷~
模板中心全部功能下载中心美图学院帮助中心供稿赚钱moneyIcon
注册/登录

如何用Photoshop在线制作banner图

最后更新时间 2022-08-16 19:33

 

image.png

 

Banner图有哪些?

其实banner也就是大家常见的广告大图,或者广告小图;Banner可以作为网站页面的横幅广告,主要用到网站页面的顶部、电商平台顶部、报纸上面部分、各种宣传大图。广告商有时会计算banner的 "浏览量",或在一段时间内下载banner图的次数。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。

为你的网站、广告或社交媒体页面设计一个banner图很困难吗?不可能!我们将告诉你如何使用Photoshop几步制作一个banner。你不需要花几个小时,学会以下这些方法,你可以很快完成制作。你也可以用空白画布DIY,在设计上打上你自己的独特标记。

 

如何用Photoshop制作banner图

 

1. 你需要多大的尺寸?

 

第一步是按照你需要的特定banner尺寸创建一个空白文件。以下是常见的尺寸。你可以用下面的说明在Photoshop中键入尺寸。


image.png

在Photoshop或类似工具中选择这些横幅尺寸之一

 

在Photoshop中,进入文件>新建

 

在弹出的窗口中,选择 "网络 "并输入尺寸为300 x 250像素。这是标准的横幅尺寸之一。点击'创建',一个新的空白图像就打开了。

 

image.png

 

2.添加产品图片

进入 "文件">"打开",打开你想在banner上展示的产品图片。可选:如果你想在banner中改变背景颜色,那么请使用具有透明背景的产品图片(png文件,不是jpg)。可以使用jpg文件,但背景会显示在banner上。下面的截图中的格子背景是Photoshop显示它是透明背景的方式。

 

 

然后进入窗口>排列>垂直平铺。这将显示图像和模板并排在一起。

 

接下来,点击移动工具(下面的绿色箭头),然后点击并拖动你的产品图片到banner上。如图所示,产品现在出现在你的banner上。一旦产品出现在横幅模板上,你就可以关闭产品图像标签。

 

image.png

在Photoshop中制作banner

 

3. 调整图像大小以适应横幅

 

要调整你的产品图像的大小,使其适合旗帜,去编辑>自由变换。这将在你的产品图像周围设置标记,你可以用它来调整图像的大小。这也让你在横幅上的任何地方移动你的产品。因此,调整大小并将其移动到你想要的位置。

 

你也可以使用顶部栏来调整大小,如下图所示。请注意,该图像已被调整为原始高度和宽度的38%,以适应我想要的位置。


image.png

调整banner图大小

 

4. 改变背景颜色

 

由于我们使用的是透明背景的产品图片,我们可以把背景的颜色改成我们想要的任何颜色。在屏幕右下方的图层面板上点击背景层(下面的图层1)。

 

然后点击屏幕左侧所示的取色器工具。这就打开了颜色工具。选择黑色或任何你喜欢的颜色。


image.png

改变背景颜色

 

5. 给背景上色

 

使用油漆桶工具,点击图像上的任何地方(确保图层1仍被选中)。这样就把背景改成了黑色。

 

image.png

image.png

给背景上色

 

6. 在横幅上添加一些文字

 

在本教程的其余部分,我将继续使用白色背景。

 

选择第2层。这是因为我们希望文字出现在横幅的顶部,所以点击最上面的层。然后选择文本工具,在你想让文本出现的横幅上点击。你会看到一个文本框被创建,你可以在那里输入你的文本。

 

image.png

在Photoshop中为banner添加文字

 

你可以通过屏幕右侧的菜单中的选项来改变字体大小和颜色等。

 

image.png

在Photoshop中改变字体设置

 

7. 在横幅上添加一个按钮

 

点击矩形工具,在图像上点击并拖动。注意,有些工具是在子菜单中。要看子菜单(如下图),点击并按住工具图标。有些工具有子菜单,有些没有。

 

通过点击四角并拖动来确定矩形的大小。

 

image.png

在Photoshop中添加一个按钮

 

现在从顶栏的 "填充 "菜单中选择一种颜色。


image.png

在Photoshop中改变按钮的颜色

 

再次点击文字工具,然后点击矩形,使文字出现在矩形上,使它看起来像一个按钮。输入一些文字,如 "立即购物 "或类似的。


image.png

在Photoshop中为按钮添加文本

 

要移动文本并定位它,再次点击移动工具,就像我们在本教程前面移动图片那样。一旦你定位好了,这里就是最后的横幅了。

 

如果你想添加你的标志,你可以打开你的标志文件,再次使用移动工具,点击并拖动标志到横幅上,按你想要的方式调整大小和位置。


image.png

在Photoshop中制作banner广告

 

8. 保存JPG文件和横幅设计模板

 

最后,进入 "文件">"另存为",从下拉菜单中选择JPG,将文件保存为JPG,以便在Adwords和广告需求中使用。然后重复该步骤,但现在保存为PSD文件。这将保存所有图层的文件,以便你以后可以回来改变图像、文字或按钮,并从中创建新的横幅。该PSD文件是你的横幅设计模板。


image.png

保存横幅文件和设计模板

 

其他banner图的尺寸

 

现在你已经创建了一个300×250的banner图,你可以继续创建其他标准尺寸的banner图,如728×90、160×600、120×600和移动尺寸。模板创建需要时间,但一旦你完成了基础工作,那么在你推出新系列时制作不同版本的banner图就会变得快速而简单。

 

Banner制作的注意事项:


1.构图清晰

参考左字右图、左图右字、左中右构图、上下构图、文字作为主体居中、不规则构图,按照这种排版方式我们就可以做出效果和内容更加丰富的Banner。


2.文字效果

选择字体就就需要采用宋体和细黑体两种形式,这样设计出来Banner整体看起来更符合网站,也更符合整体网站和谐性。


3.颜色选择

尽量选择较少的颜色,整体色调统一。如果选择颜色很复杂的物体, 尽量不要使用彩虹色、晕边等复杂的特技图形效果。我们在设计网站Banner的时候,可以采取黄黑白这三种颜色搭配的方式进行,这样做出来的效果更加颜色效果对比鲜明,而且视觉效果更加具有冲击力。

 

4.尺寸

考虑浏览者的网速,banner图不宜制作的过大。Banner 的显示尺寸非常有限,摆放太多产品,反而被淹没,视觉效果大打折扣。所以,产品图片不是越多越好,易于识别是关键。