Designing & Animating Banner for a Realtor Site
Designing & animating banner for realtor site |
|
Start by creating a new file in standard top banner size i.e. 468 x 60 (px). Fill the background with blue color. |
 |
| Open image of a man looking for something . Create a cutout and insert in the banner. Create two duplicates of this layer. Displace the three layers from each other as if the man is coming into banner from left side. |
 |
| Select one of the layers. From filter menu apply blur>>motion blur. Apply settings as shown. |
 |
| Select another duplicate layer. Apply same filter with following settings. |
 |
| Create a cloud 1 shape using custom shape tool. |
 |
 |
| Create another such shape but a little bigger in a new layer. |
 |
| Create another such shape much bigger in a new layer. This shape will serve as a place holder for the text. |
 |
| Type first line of the text over this big cloud. |
 |
| Double click the layer to open layer style window. Apply layer style with the settings shown. |
 |
 |
| Type second line of the text over this big cloud. Apply same layer style. |
 |
| Hide both text layers and in a new layer insert site logo. |
 |
| Create a thin black border over all layers |
 |
| Open animation window. For the first frame hide all layers except the more blurred man layer. |
 |
| Duplicate the frame. Hide the this blurred man layer. Unhide the lesser blurred layer. |
 |
| Keep duplicating the frames and follow along the images below to hide/unhide the layers. |
 |
 |
 |
 |
 |
 |
 |
| Set the duration of all the frames as shown in the image below. |
 |
| Press Ctrl+Alt+Shift+S to save an optimized animated GIF. |
 |
Leave a Reply