Lesson to make a banner in Photoshop. How to create an animated banner
In this transcription we will talk about how to make a banner in Photoshop with simple animation for Yandex.Direct.
Yandex.Direct recently began accepting banners, and I assume that you want your banner to have animation to attract the attention of visitors to various sites. We will (opens in a new window) and transcribe together to make an animated banner in Photoshop, with a button that changes.
What is needed to make an animated banner in Photoshop?
Let's start with the limits
What restrictions do we have?
We have moderation requirements, and there are size requirements. We can upload the following sizes (240x400, 300x250, 300x500, 300x600, 336x280, 640x100, 640x200, 640x960, 728x90, 960x640, 970x250) , and our banner should weigh up to 120 KB. That is, if we do a lot of animation on a large banner, then most likely it will not fit the weight, this is understandable.
Where to add ready-made banners?
Let's talk right away about where to add these image ads. When you create an advertising campaign, it has a checkbox for changing the ad type.
If you select Graphic, then you can add an image (upload it from your computer, for example), and a link to the site is added. You'll likely add a number of ads here, meaning you'll add multiple banners for one type of targeting. This is due to the fact that there are many different sites in YAN, and depending on their design, they add advertising blocks of different sizes to display ads. I think this is also understandable.
So, we decided to create a banner. What do we need for this?
We need graphics
One of the principles of creating a good banner is maintaining continuity. That is: the text, the style that is on the landing page must be partially transferred to our banner. So that the user, when he clicks on the banner, gets the impression that he has gone where he wanted.
In my case, I took this large image, took a photo of Nick and drew a button in the same style as on the landing page. So is the text, in the same style as on the landing page. The font may be different, but the idea is the same.
Graphic editor for creating a banner
Next we need an editor. I draw banners in Adobe Photoshop CC 2015. In your case, there may be a different graphic editor, I’m just comfortable with it, so I’ll show Adobe Photoshop as an example.
Drawing a banner in Adobe Photoshop CC 2015
Next, you create a new document, I recommend starting with a large size. This is due to the fact that when you draw the first large banner, and it completely suits you or your customer, then you can simply drag and drop all the elements that you put here onto another document.
For example, I need Nick. I select this layer and simply drag it into a new document, and now I have Nick in the new document. Here in Adobe Photoshop, I can press Ctrl+T or Command+T and I have access to the Transform tool. And here I can change the sizes, it's very convenient. Therefore, I recommend that you definitely start drawing banners at a large size.
Banner layers in Photoshop
So, we have Adobe Photoshop, we have graphics, we created a document (in my case it’s 960x640), I added a background here - it’s just a white canvas. This was done so that my next layer would not attract attention - it has a degree of transparency (I set the fill to 80%), since the photo is of quite high quality and clear, and therefore if I leave the fill at 100%, it will attract too much attention. The next element I added here was Nick. You see, it was cut out of some studio photography. All this can be combined.
Another point is that in Adobe Photoshop, the upper layers overlap the lower layers. That is, if the layer with Nick was below the layer with the photo of the mosque, then it would be blocked by the Kul Sharif mosque. That's why he's up here.
One of Yandex.Direct’s requirements is that the banner must contain the organization’s logo or OGRN. I immediately added both so that the same banner could be used, for example, in myTarget. I also added “6+” here, this is also a requirement from Yandex.Direct that event banners have an age mark.
A button that will move
Well, the button itself. I drew it, it consists of a shape that is drawn using the Rounded Rectangle tool, shortcut U. I drew it in the same color as on the site. And then I wrote the text “buy a ticket” in red, just like on the website.
I also have a shadow effect on the rectangle (by the way, other elements of this banner also have it - the text). Let's move over here and see what this shadow is. I double-clicked on the layer and went to Layer Styles. And here there is a Shadow parameter. Blending mode Normal, opacity 100%, angle 90 degrees and offset 0. Because this shadow is applied, an airy effect appears, as if the object is closer to the viewer.
How to make an animation of our button in Photoshop
Now we have all the objects.
What do you need to do to create a simple animation?
Open the Timeline window
To do this, select the Window menu and check the Timeline box. Now, if I take it off now, I won’t be able to create frame animation. Now I'll turn it on and you'll see that I have two frames. I'll delete the second one, and I have one frame.
If I save it like this, then no change occurs for me. Also here I immediately set the delay to 1 second. The fact is that these are Yandex.Direct requirements.
If we animate an object with text, then this text must have time to be read. One second is enough to read the text.
Create a new frame
In order to create the next frame, you must click the New Frame button. And we can simply remove the button on this frame and make it invisible. That is, on one frame we have a button, but on the second we don’t. And if I press play, then our animation is already created.
More complex GIF button animation
But let's create a slightly more complex animation. And for this I will make a duplicate of this button on the second frame. The Button group contains the text layer and the background rectangle itself. To do this, I will select the Button group, right-click, select Duplicate group, agree, and I have a new Copy Button group.
Notice I'm on the second frame and hiding the previous button.
Let's go to the browser now and I'll tell you what effect I want to achieve. Here in front of you is the banner we should get.
And you see that in the first frame there is an airy effect, and in the second it seems that the button is pressed.
How to achieve the effect on a banner that the button is pressed?
I go to Adobe Photoshop, and go to the layer styles of the rectangle-underlay group Copy button (double-click on the layer). And instead of Shadow, I put Inner Shadow and go to settings: blending mode Normal, opacity 100%. Next, I make an offset so that it is noticeable. 7 pixels is enough. And you can also change the angle - let's make it 140 degrees so that the shadow is on the side.
Now we have the air button on the first frame, and pressed on the second.
But you must admit, she is missing something.
To do this, you need to go to the layer with the text in the button, select the move tool, and press the Down arrow on the keyboard. So I move the text down by clicking twice. And right two more times.
You can add one more pixel. We now have two frames that are constantly spinning. We can check how this all works by clicking the Play button.
Save a gif banner with animation
To save, you need to select File - Save for Web - and a window appears. For animation to work, we need to select the GIF format. If we choose JPEG or PNG format, then our animation will not work and there will only be the first frame. We select GIF, we can select repeat options (continuously or once - I recommend checking it), and we can see here how the animation works.
Everything would be fine, but in this case you see that our GIF is large. This is due to the fact that the size of the banner is large, because of this the weight of our object is very large. In this case, I recommend saving it as a JPEG, and in quality 50, then its weight will be 104 KB. And the limit, let me remind you, is 120 KB, that is, we are included.
But due to the fact that we did a good job in the large banner, we can now transfer these objects to smaller banners, and there we can safely save them as GIFs. You can see this when you work. As a result, when we save it, we can already load this banner into our advertising campaign.
How to make a frame for a banner?
I would also like to point out that this background has a stroke. It is not very noticeable here, since the color is black, but in the browser you can see that there is a purple outline. It needs to be done; a frame is also one of the requirements of Yandex.Direct.
How to make it?
To do this, go to Photoshop, select the layer with the background image, and if you are working in a different size, you need to select a frame (Crop tool) and crop it to the size of the document.
Banners are small, so your background object will likely be larger than your banner. Therefore, it will need to be cut exactly to that size.
After you crop, double-click on the layer styles and use the Stroke blending option, select Position Inside, select the color you need, you can paste its number here digitally, and select the size.
I think more than 3 pixels makes no sense. Great, save it. And now you get a ready-made banner that you can use.
Be sure to save the sources in PSD format
You also save this document in PSD format so that you can make changes in layers in the future. Suddenly the event moves by an hour, and to change all this, you need the source. I think you understand the logic too. Great.
Here's how to make a banner (you read the transcription). If you liked it, be sure to like it and subscribe to mine, because there are many more interesting videos waiting for you. Denis Gerasimov was with you, bye-bye!
Hello, dear friends! My blog: - “”, is always open for you! In previous articles I talked about how, and how later on the blog. Today I want to tell you about how to make a banner in photoshop .
Banners made in Photoshop have more pros than cons.
1. Light weight
2.Easy to install
3. Displayed on all types of devices
4. Easy to do
5. The site does not load
6. The banner can be updated frequently
The only downside is that it is not as “live” as flash, you can feel the difference between a movie and a picture. But this is the only drawback, and it can be partially eliminated using a GIF image.
Before you start creating banners, you need to do some preparatory work. Select the necessary pictures and buttons. Decide what type of banner it will be: still or animated. Make a sketch of the future banner on paper to clearly understand what you want to get as the final result.
Collect all prepared pictures into a separate folder created on your desktop. After creating the banner, it can be easily removed, and you will not forget to do this, since it will be visible. So, the pictures are prepared, and we get started!
Creating static JPEG banners in Photoshop.
Open Photoshop, create a new document: “File” - “Create”. In the window that opens, enter the name, specify the width in pixels, and height in pixels. You will find out the width by measuring your sidebar. A banner located across the entire width of the sidebar looks beautiful. Specify the height based on the height of the prepared image, plus 50 or 60 pixels - space for the button.
Document resolution – specify 72 pixels, this is the most optimal resolution for the Internet. With a higher resolution the picture will be heavy, with a lower resolution it will be of poor quality. Select the background color taking into account the background color of the picture.
How to find out what height a picture is? To do this, open your image in Photoshop, click “image” - “image size”. In the window that opens, change the width of the image to the width of the sidebar. Make sure that the size is indicated in pixels; if there are other values, enter pixels.
The height will automatically change, remember it or write it down. Click "ok".
Drag the picture onto the created document by holding it with the left mouse button and pressing the ALT button on the keyboard. In the left panel of Photoshop, select the “move” tool. The first one from the top. And using the arrows on the keyboard we place it on the banner.
Double-click on the screen to open the folder with the prepared pictures and select the button. We drag it onto the banner and install it in the right place. You can give the button a shadow effect. Double-click on the layer with the button, in the window that opens, select “shadow” and configure the necessary parameters.
That's it, the banner is ready! Merge all layers: - “Merge visible”. Next “file” – “Save for Web...”. Select the JPEG saving format. Select a folder to save. Click “save”.
Creating an animated GIF banner in Photoshop.
Creating an animated banner differs from a static one, only in that you need to create several different layers that will change, creating the animation of the picture. First, you must decide what will flash in your banner. You can change the main part of the banner. That is, one picture will be replaced by another. You can make the button blink or the label on the button change.
Whatever you decide to animate, the principle of creation is the same. Therefore, I decided to show you how to make a blinking button and a changing inscription. First, as in the first case, we create a new document and drag all the necessary pictures onto it. Please note that all images are obtained on a separate layer.
This is what allows us to make the picture move.
To create the animation I have in mind, you will need a button without a label. I will paint it in different colors. I’ll make the layer with the button active (I’ll click on it once). Next, “image” - “correction” - “hue - saturation”.
In the window that opens, check the box for tinting. And moving the top slider, I select a color that matches my picture. Then I left-click on the layer and select “create a duplicate layer.” A layer with exactly the same button appears. Again I go to “image” - “correction” - “hue - saturation”.
I check the box - tinting. I choose the same color, but with a different shade. Now I have two layers with a button, different shades.
It's time for the text. In the left panel, select the “text” tool. I adjust the size and font. I am writing one word.
For example, I decided to make an inscription: “Get it for free.” You can write “Learn more.” I write the word “Get”, according to the size of the button. I click once on the text layer. I select the “move” tool. I set the inscription strictly in the center of the button.
I take the “Text” tool again. I create a duplicate of the text layer, select the text, and replace it with the word “Free”. In this case, the word will be where it is needed, you can move it a little to the right or left, not forgetting to use the move tool.
All we have to do is color the text somehow. Double click on the text layer. In the window that opens, set up a shadow, select a gradient, and make a stroke.
You choose everything depending on the color of your banner, image and buttons. Everything should fit harmoniously.
Having selected the necessary effects, click “ok”. Next, right-click on the layer with the selected effects, and in the window click “copy layer style.” Click on the layer with the text without effects, and click “paste layer style”. Now both layers have the same effects. The banner has been created, let's start the animation.
Banner animation in Photoshop.
To do this, open the “window” tab on the top panel, and in the drop-down list select “time scale” and at the bottom of the scale – “create frame animation”. The name may be different in different versions of Photoshop. For example, in the top five you need to select “animation” in the window. The idea is that you are looking for everything related to frame animation. If you have any difficulties, ask questions in the comments.
Now you need to close the eyes of all layers that should remain invisible. For example: - we have two buttons, which means we close the visibility of one. We have two words in one place - one word is temporarily disabled.
Below on the scale we have already created the first frame. Select the time to display the frame. Don't worry, if you don't like it, you can change it at any time. Click on the leaf from below, and we have created the following frame.
To make it different from the first one, I decided to change the button. That is, I opened the layer with the button that was closed, and closed the button that was visible. I take the next shot. It's time to change not only the button, but also the word.
I close the word that was visible, open the eye on the previously closed layer, and also change the eyes on the buttons. And we create the last, fourth frame. We only change the buttons. We check the box to play the animation - “continuously” and start checking the animation. If everything is done correctly, the buttons will blink twice as often as the words change.
The banner is ready. We save it for the Web, in Gif format.
In order for you to understand how everything needs to be done, I recorded the process of creating banners on a video clip. Please do not judge strictly, since this is my first video lesson. I tried not to rush so that you could see the process of creating a banner in Photoshop.
The video is without words, but with explanations. I recorded it at night when everyone was asleep, so I couldn’t speak. But you can listen to pleasant musical accompaniment. Enjoy watching!
When you make your own banner for the first time, the process of creating banners in Photoshop will no longer seem difficult to you. And animation is easy to do, the main thing is not to get confused in the layers and carefully change the eyes.
Using the same principle, you can make a changing picture. Try making a banner yourself and you will understand that it is not difficult. If you encounter any difficulties in creating banners, please contact me, I will be happy to help. Or you can order the production of a banner, and I will make it for you from start to finish.
We upload the created banner to the library, open it in a separate tab, copy the image address, and save it. We paste it into the code, and put the code in the widget.
Code for inserting a banner into the widget:
Now it's time to say goodbye, I told you about how to make a static and animated banner in Photoshop. If something doesn’t work out for you, write in the comments. And don’t forget to click on the social network buttons, it’s not difficult for you, but the author is pleased!
PS. Read articles on how to install, make, beautiful or. Don't rush to leave the blog, you will find a lot of interesting information.
Batalova Irina
I welcome you to the pages of my blog. Today’s article will talk about banners, or, to be more precise, about their creation using Photoshop. First of all, today's lesson is aimed at those who would like to make money on. I will write about making money this way a little later in my new case. Now I can say that this is a very profitable and relatively simple craft. Making a banner like the one in our lesson costs 500 rubles or more.
Banners today are an important component of Internet marketing. Today it is difficult to imagine what the Internet would look like without them. Almost anyone who has one uses them. But in order to create a banner for a website, you need to either shell out money or use meager online services in which there is no freedom of action.
But there is a third option - creating a banner in Photoshop. I think this method is the best. And that's why:
- Free;
- Complete freedom of action;
- Quick results;
- Lots of free educational materials;
- Templates can always be quickly edited.
However, first you need to master this method. You don't have to be some kind of artist or creative person. Look at my banners in the sidebar on the right - I made them all myself. And in the video tutorial below, I will show the main techniques that I have used and continue to use:
As a result, you should be able to create an advertising banner like this:
What do you think? Did it turn out okay?
Using my instructions, you can easily create an advertising banner for your website yourself. I hope after watching you will be convinced of this.
Additional materials
In the video, I promised to share with you PSD templates of all the banners that I have ever made. I will keep my promise, but a little later. .
And, at the end of the article, I would like to announce a small promotion: As soon as the article gets 50 comments, even if it’s a year later, I will record another video instruction on the same topic, but with a different example. This way you will learn about even more tricks and goodies, which will make you a more sought-after and highly paid freelancer.
Basically, that's all I wanted to write about. I will be very glad if this video really helps someone.
Best regards, Sergey Ivanisov.
Remember, the mind is your best muscle
Hi all. In this article I will show you how you can make a GIF banner using Photoshop. In general, I'm used to making banners and animations in . Naturally, Photoshop cannot compare with this package in terms of animation functionality. But you can still make quite simple and interesting banners in Photoshop, because in its new versions, starting with CS5, as far as I know, it became possible to create animations of transparency, scaling, perspective, etc. Let's look at the process of creating a GIF banner in Photoshop using the example of the work located in the title of the article.
Let's create a new document of size 600 to 200px. Background - #589fff
First, let's assemble the banner in a static form. Let’s place our main character – the fish – on the layer, where you can get free resources for your work, I wrote in the article “”:
Using the " Free figure» place a callout with the dialog on the layer.
Let me remind you that you can edit a shape (vector object) using the tool "Selecting a node."
That's what I did - I deleted unnecessary elements in the layer with the first shape and added 3 more Ellipses to make it look like this cloud of dialogue is coming from the fish's mouth. The following happened.
Now let's place the text on the layers of the document, in the order in which it will appear. Since our text will appear one after another, it is natural that in the static version the layers will overlap each other. I'll show all the layers with the last text layer disabled.
And please note that our text layers must be cropped to the size of the layer with the dialog cloud shape, so that it serves as a frame, due to which the text will no longer be visible.
So, all our layers are ready. Arranged in the order of their appearance (bottom to top). We can start animation.
Select an item Window – Timeline. In the panel that appears, select the button Create a timeline for the video. As a result, a timeline will be created, with all our layers, which we can already move and animate.
Since we have a Background layer with a lock, it will not be displayed on the timeline, it will always be present unchanged. If you want to animate the background, then unlock its layer by double-clicking the left mouse button.
Each layer in the timeline has attributes for animation. They can be seen if you expand the list to the left of the layer name. We can change the position, opacity, style.
Also, if you right-click on the layer name itself on the timeline track, a list of additional animation actions will open.
You can activate the creation of keyframes for a specific track with a layer by clicking on the clock icon next to the name of the animation attribute.
A yellow diamond (keyframe icon) will appear where the time marker is located on the timeline. For example, at the beginning. You can change the value of an object attribute, such as position, and its value will be saved for that keyframe. Then, to set a new value and a new keyframe, you need to move the time pointer to the new location. Click the diamond icon next to the attribute name (a new key frame icon will appear on the timeline) and set a new attribute value. For example, move an object to a new location.
Now let's try to apply the acquired knowledge. Our fish should appear from left to right and its transparency should change from 0 to 100%. This is what the time scale will look like in this case.
After the fish has appeared, a dialogue cloud will appear in parts. First the ellipses, then the figure itself. We can move the tracks of each layer on the timeline, so we will distribute their positions so that they appear at the desired time interval and set the animation to the parameter Opacity for each layer.
For the figure we apply the same steps.
Now let's create an animation for the text using the same algorithm. Only the text will have a parameter not Position, but Perspective, and we will be able not only to change the position, but also change the scale from smaller to larger, when the text begins to move. To do this, use the standard object transformation tool ( Ctrl +T). Since initially the layers with text are cropped according to the shape of the figure, they will be visible only within its boundaries. I also changed the style of the second text. Added a gradient in the layer blending options.
Now let's align all the edges of the tracks at the end. To do this, you need to pull the right edge of each track and adjust everything to the same time. So that all objects do not suddenly disappear. For each track, you can set the opacity to 0. Play what happened. You can press the key space.
Although Photoshop is not created for any complex animation (and this is reasonable), but with the help of these simple steps you can achieve a decent result when creating a GIF banner. Especially if you feel more comfortable in Photoshop than when working in Flash.
(Visited 2,407 times, 4 visits today)
Attracting the attention of visitors. The more colorful and interesting it is, the higher its effectiveness. Most often, those who carry out commercial activities need to place banners.
Of course, talented graphic designers who are capable of creating an amazing project are being sought out to create it. However, after reading some recommendations on how to make a banner in Photoshop, you can learn how to create your own interesting projects yourself. It is possible that later, when you hone your skills, your banners will be of interest to many.
Photoshop has a huge number of functions and capabilities, including creating banners
Those who have already had experience creating banners in Adobe Photoshop CS6 can list several of their advantages. In particular, they are quite easy to install and take up very little space, which is so important when there is a shortage of free space on the site. It is also quite easy to update and display on all devices.
The process and rules for creating static banners
In order to create a banner, the user must first prepare for this. Preparation consists of creating a preliminary sketch depicted on a blank sheet of paper in order to have an idea in advance of what the author or customer wants to see in the end. After this, you should select suitable pictures and place them all in a separate folder.
When the preparatory stage is completed, you can begin the main part, which involves creating the banner itself. Initially, Photoshop opens and a new document is created.
At this stage it is important to indicate the desired dimensions in pixels. The width can be arbitrary, but experienced designers recommend setting the width equal to the width of the sidebar. The height is calculated by calculating the height of the applied image and adding an additional 60 pixels to accommodate the button.
The resolution of a new document is also set by the user himself, but it is important to take into account some rules. In particular, it is recommended to use a resolution of 72 pixels, since if this indicator is increased, the finished banner will be too heavy for the site, and if decreased, there will be a loss of quality. The background of the banner is matched to that of the main image.
The prepared image should be moved to the created new document, after which, using the arrows, it is placed in the desired place, which was previously determined on the sketch. Next, a button is moved onto this document, which can be decorated a little, accompanied by an additional shadow. To do this, you just need to double-click on it, and then enter the appropriate parameters for setting the shadow.
After this, the banner is considered ready, all that remains is to connect all the layers used, and then save the finished result in jpeg format, but be sure to select the “Save for Web” option.
Creating Animated Variants
An animated banner can more effectively attract the attention of site visitors. The graphic designer must decide for himself what should be animated. It could be a button, or it could be a picture. Animation is achieved by creating several layers that begin to change in a certain sequence, creating the illusion of movement.
The process and rules for creating animated banners
Having set out to create an animated banner, you should first learn how to create static versions in order to get your hands on well, and after that, having studied the recommendations on how to make a banner in Photoshop cs6, begin to implement your plans.
Initially, the user must create a simple static banner, successfully placing the main image, button and creating inscriptions on it. To make a button animated, you should make several layers with such a button, but different in some way.
If you want the button to change color, you should click on the layer with the button, making it active, then go to “Image”, then “Correction”, and then find the item “Background color saturation”. By clicking on it, a window opens in which tinting is selected, allowing the user to select the desired shade by moving the slider.
When the first layer is completed, a new layer should be created. To do this, go to the “Layers” panel and find the “Create a duplicate layer” item. In a new layer, you should again do the same actions with the button, only when choosing a color you should choose the same color, but with a different shade.
After selecting the desired effects, you just have to agree by clicking “Ok”. Next, you need to right-click on the layer with these effects, select “Copy Layer Style”, then click on the layer without effects and select the “Paste Layer Style” option. As a result of such actions, both layers are created, accompanied by effects.
Now all that remains is to set the banner in motion - in fact, to make it animated. To do this, open the “Create frame animation” option.
Since at this moment two layers with different buttons are open in Photoshop, it is important to leave the first layer active and turn off the second layer. This will be considered the first frame. The user should select the optimal time for its display, which can later be adjusted if desired.
Finally, all that remains is to check “Play constantly” and save it for the Web, but in gif format.
So, having read the instructions on how to create a banner in Photoshop, you can begin the practical implementation of your plans and see from your own experience that there is nothing difficult in creating static and animated banners. Once the creation of simple animated options has been brought to automaticity, you can try your hand at creating more complex projects, where not only the color of the button will change at the same time, but also the picture, inscription, etc.
