Universal Bloggers
I will show you how to really make an animated gif banner for a site in Photoshop cs5 on my own without problems.
Click here : Website Designing Services UAE
You can apply such a banner anywhere, whether by placing it for advertising on a third-party site, or, say, as a teaser on teaser networks. The application is always one – to attract the attention of visitors so that they go to your page. We will create a standard banner with dimensions of 468 × 60 pixels. An example of how to make an advertising banner I laid out in this article.So, let’s start creating a new document File -> New. You can not adhere to the standards and choose any size for length and height, or you can choose the size from the drop-down list of Photoshop presets.
If you want to order a professional design for your banner, you can use the services of the site [urlspan] http://www.dollarbanners.com/ [/ urlspan] For a reasonable price, they will fulfill any of your ideas. The only negative, you must know English well in order to correspond with them, or go to fl.ru and select an artist there. The first thing that we need to do with you is to set a 1 pixel stroke around the banner with you.
Create a new layer, call it “Frame”
Press CTRL + A to select everything. Then go to Edit -> Stroke. We apply the following settings:
- Length: 1 pixel, color: black, Location: center, blendingmode: normal, Opacity: 100%
- This gives us a clear single-pixel border around our banner. Now all subsequent layers will overlap, but the most important layer will always remain visible. Which we did.
Pixel stroke
We move on. We will create our animated gif banner for tutorial website . com . Going to it you will see many lessons in Photoshop. The image will be based on the logo on the right. Now we need to use the ellipse shape tools tool (simply Oval and give it a black color), it will be on the right. Our advertising text will be placed in this area. It must be made large, approximately half the total size of the banner itself.
Oval filled
Now we need to set the color gradient of this oval area. Go to the menu section Layer (Layers) -> Layer Style -> Gradient Fill. I use the default settings of the following colors:
Choose a gradient
I also apply a small inner shadow. Just change the opacity to 20%
Add shadow
Next we create another rounded area, which will be located under our logo. Apply a gradient fill of the following colors:
Fill another gradient
Stroke in a 2px oval area. In the same place where the logo is, I make the background fill with a light gray color so that it does not look so flat.
Fill Banner Background
And now we proceed to the most interesting part of the design of our banner – animation. So that you have an idea, two blocks with text will be placed in our main area, that is, they will flash alternately, first one, then the other, this will be the banner animation. Using the Text tool, create any arbitrary text that fits within the boundaries of our area.
Making a banner animation gif
Now hide this layer with text and add a second layer, using another text, adding it to where the first one was.
Working with layers
Selecting the second layer with text, we get the following:
Creating an animated banner
Now we are fully ready for the animation, switch to Image Ready mode by clicking on the appropriate button.
In image Ready, you will see the following palette of layers for animation, as shown below:
Getting started at Image Ready
Click on the “New Frame” icon (or a new frame), thereby duplicating the selected layer. Starting with the 2 selected layer, select the layer with visible text from the layer palette and move it to pixels (click the up arrow twice).
Create layers for animation
If you look at the first frame and the second frame, you will notice their slight difference from each other. Now duplicate the last frame, and then use the down arrow and move the text layer about 10 pixels and set the opacity of the layer to 70%
HR animation
Duplicate the last frame again by moving the text layer down by 15 pixels and set the layer opacity to 40%
Move the text layer
Now we are working with the second text area. Hide the previous text area and move on to another layer, making it visible. We move it as well as the previous one, i.e. by 10 pixels and make the opacity at 40%
Move another text layer 10 pixels
Clone the last frame. Move the layer this layer with the text up to about 15 pixels up and set the opacity to 70%
Clone the last frame again.
- Now we move the text layer about 10 pixels higher and set the opacity of the animated gif banner to 100%
- Move the text layer 10 pixels higher.
- Clone the frame.
- Now move the text area 2 pixels lower.
- And now you need to repeat everything, starting from step 8, lowering this layer, and raise the other layer again.
- If you did everything right, then you should get about 14 frames.
- At the bottom of each frame you will see “0 sec.” This is the delay time between frames.
- Set a delay of 0.05 or 0.1 on all of these frames, depending on how fast you want the banner to work.
- To set the value to 0.05, click on the arrow next to 0 seconds and select “Other”, then enter the desired number.
Delay between frames
At the bottom of the animation palette, there is a control panel with a set of buttons, in order to view the result of your work, you need to press the play key>
Quick frame change animated banner
As you can see, the text scrolls very fast, so fast that it just cannot be read. So you need to set the delay value to 2 seconds, then your result will be something like this.
2 second delay between frames
If the lesson seemed difficult for you, then below I attach the source with a banner.
[sociallocker id = “3259 ″]Download Source
[/ sociallocker]That’s all. In this tutorial, I wanted to show how, using a simple example, it’s technically possible to make an animated gif banner for a website in Photoshop, and you’ll design your own design and style yourself.
For more information visit our website Digital Marketing Services in UAE
