Please click here for reprintReprint guidelines.
We sent you an issue ofA large wave of brand e-commerce Gif poster material to attack! Designers, please”. So this is how to make a Gif poster.
01 | SALE!
Pink and green switch each other, give a person with visual impact
Poster Making analysis
First of all, let’s analyze this poster. It has two main colors, pink and light green. As the background changes, so does the color of the words and wireframes on the poster.
In addition, the English font combined with the background of the solid leaf, also makes the overall poster a lot of vitality. The banana leaf in the picture is the most commonly used as a decorative leaf, searched in English as banana leaf.
Let’s take a look at the process.
Canvas size / 900 x 900px
Resolution / 72px
Pink value / #edc1b6
First create a canvas and create a background layer with the color # edC1b6 and fill it with paint bucket.
Next, we drag the palm-leaf material onto the drawing board. The banana leaf layer can be converted to a “Smart Object” (right click on the layer and select Settings) so that no matter how we scale it, it will not affect the quality of the original image.
Then rotate the leaf horizontally (select the Banana leaf layer, then CMD+T, right click to bring up Settings) and drag it to the lower right corner to create symmetrical banana leaves.
Font/Arial Black
Size / 94 px
Color / # d7a28a
Create a new layer, create a white rectangle base, enter the promotional font, select a darker color for the font than the background, and draw a rectangle with the same color as the font.
Now we have a basic static poster.
Background value / #d4ecdc
Font color value / #60a977
Next, hide the pink related layer and do the same for the light green base and font.
Now we need to animate the Gif. Select the top menu-Window-Timeline, bring up the timeline Settings, and click Create Frame by frame Animation.
Click the triangle arrow under frame 1 in the timeline to set the time. Here we choose 0.5. This means that the image will be displayed for 0.5 seconds.
Select the icon in front of the trash can and we will get a copy of the first frame and then modify it on the second frame.
Note that with frame 2 selected, in the layer on the right, we hide the pink related layer and show the light green related layer. Then two frames of the poster are ready.
Remember to check that the following playback mode should be selected “forever” so that the two frames can be played in a loop.
And you have a simple, good-looking poster!
02 | WHAT’S NEW
Use the overlapping layers to create the effect of neon lights
Poster Making analysis
The elements in this poster are very simple, but the effect is also very good, using the overlapping of font layers, to make a sense of changing neon lights, Easy & Strong.
Reklame Script Medium
Font 2 / Formata Outline
First of all, we typed the font. What’s used a font close to handwriting, and NEW used a hollow frame line font.
In the frame line font, use the Circle Tool to draw small dots along the frame line as decoration.
Next, let’s copy the NEW font for this line and convert it to an image layer so that we can use the magic wand to select the hollow in the middle.
Next, create a new blank layer, name it Shadow, and fill it with the color #51fad3.
Delete the line line layer of the font box, leaving only the Shadow layer.
In the first frame, we hide the “Shadow” color layer.
And then go to the second frame and let it show again. But let’s move the Shadow layer so that it’s out of place with the font layer.
Don’t forget to check whether each frame is set to 0.5s and whether it is playing in a loop.
Ok, that’s the second poster!
03 | NEW COLLECTION
Use shadow to increase the three-dimensional sense of the poster
Poster Making analysis
In fact, the design of this poster is very simple, mainly by using shadows to create a visual difference, so that the poster becomes more three-dimensional.
Let’s take a look at how it’s made.
Canvas size / 900 x 900px
Background color / #fde2ff
Wireframe color / # 4157FF
Let’s create a canvas and fill it with #fde2ff. Use the Rectangle Tool (U) to draw the shape. Set the color of the wireframe to # 4157FF and fill it with white.
Font/ITC Avant Garde Gothic
Font color / #4157ff
Enter the promotional font and select the same blue color as the wireframe.
Add some small elements to the margins of the wireframe, as shown in the figure.
Let’s duplicate the layer of the box line and choose blue as well as white.
Once again, open the Timeline tool and in the first frame we hide the shadow layer, in the second frame we show it and move the position of the entire layer up and right a little bit.
Finally, the dynamic stereoscopic effect comes out!
Watermelon Design Institute
Internet startup | | UI design development resources | tutorial
Please do not reprint without permission, please get authorization from the author of the private letter
© uirush.net