Home > Design - Imagery, Banners & Landers >

How To Make A Slick Animated Mobile Banner. (26)

11-25-2013 09:32 AM #1 Mr Green (Administrator)
How To Make A Slick Animated Mobile Banner.

Ever wanted to make one of those cool animated banners, but thought only Photoshop Picassos could give birth to such a creation?

Wrong!

I've put together this tutorial to show you how simple it is to create a slick looking animated banner. And how to leverage existing animated gifs.

The example I'm going to use is this:

I whipped this up in literally 5 minutes.

Step 1: Find a rocking animated gif.

Mr Green's hidden treasure trove of animated gifs lives on this site: http://giphy.com/search/8bit/. This is one of the sites I use when promoting mobile games. Obviously if you are trying to promoting adult offers there are a million and 3 xxx gif sites out there you can hunt down.

This is another good site if you want to use loading gifs: http://all-free-download.com/free-ic...ck_120901.html

Ok back to the tutorial! This is the animated gif I found:

Step 2: DRAG THAT BAD BOY INTO PHOTOSHOP!

Make sure you have "timeline" checked in the "windows" tab.

Your view should look something like this.

Step 3: Resize HIM!!!

Now I wanted to create a 350x50px banner but the gif is about 200x200px large, so I gotta resize this gif.

Click "image" tab > image size.

Now even though this gif is 200px high. I don't mind if I cut off a bit at the top because it's just animated stars, I want to keep the rockstar as big as possible. So I just resized to 100px high, and the width automatically resized with that change.

Create the canvas size to your banner dimensions.

Click "image" > "canvas size" > Type in your banner dimensions (so in this case 350x50px) > See where it says "anchor", click the left facing arrow. Click OK.

POSITION YOUR ROCKSTAR!!!

At the moment my rockstar is jamming in the middle. He's trying to be center of attention. We can't let that happen.

Select all your layers by click on the first layer, than hold down shift and select the last layer.

Now select all your timeline frames, like so:

Now drag your rockstar to your desired location.

MAKE A CALL TO ACCCCCTIIOOON!

Click and HOLD on the square shape tool. Then go down and select the "Rounded Rectangle Tool".

You should see on the top toolbar a field called "radius". Change that to 3px.

Now drag and release a suitable sized rectangle on your canvas.

Things should look something like this:

Mr Green Gem #49495: Download these button layer styles https://www.dropbox.com/s/87h3xkw89h...erstylesv1.asl

In photoshop make sure your "styles" window is open. If not, go to "window" then select "styles".

Now go to your styles window > click top right drop down icon > load styles > then select the file you just downloaded "web20layerstyles".

Now you will see a range of kick ass layer styles to select from.

Whack some text on it.

ANIMATE THAT TEXT!!!

Click on any timeline frame. Then select the text layer. Add move it down a few pixels. Press the play button in the animation window to preview it. Make sure it the animated is set to loop "forever".

.

EXPORT THAT SHIT!!!

Click "File" > Save For Web > Pick "Gif" in the top drop down. Then Save!

Want to save it in other dimensions?

Click "File" > Save For Web > Image Size.

Boom!

Here is the PSD file: https://www.dropbox.com/s/67dk9l6htp1jkj8/stm.psd

Looking forward to seeing a new swarm of sick animated banners hit web and mobile.

Enjoy!

11-25-2013 10:36 AM #2 caurmen (Administrator)

Great tutorial!

That .gif site is a hell of a share. Bookmarking.

11-25-2013 03:53 PM #3 roger_now (Member)

Mr Green, you rock!

11-25-2013 04:25 PM #4 gettinpie (Member)

This. Is. Epic. Thanks!

11-25-2013 06:46 PM #5 itsjustbrian (Member)

I've been doing those exact steps, I guess I'm an aspiring genius like Mr Green!

Good style share though, I just added it to my photoshop for easy button making

11-25-2013 09:16 PM #6 francis (Member)

This is awesome. I never knew about the button layer styles. THANK YOU

11-25-2013 09:32 PM #7 stackman (Administrator)

Beauts! One of the easiest way to increase your CTR by a healthy amount

11-25-2013 11:06 PM #8 theoptimist (Member)

Freaking sweet share mate!

11-25-2013 11:07 PM #9 The Angry Russian (Moderator)

I remember when Mr Green taught me the buttons on PSD alone... probably saved me hundreds of hours of work over the years

11-25-2013 11:40 PM #10 sciaq (Member)

Cheers mate! That was super helpful, even the button template, always did my head in trying to do them!

11-25-2013 11:55 PM #11 maynzie (Moderator)

Very slick indeed Gmang!

11-26-2013 08:27 AM #12 Mr Green (Administrator)

Originally Posted by The Angry Russian

I remember when Mr Green taught me the buttons on PSD alone... probably saved me hundreds of hours of work over the years

Those were the days layer styles and imacros!

12-01-2013 05:10 PM #13 stackman (Administrator)

Originally Posted by sciaq

Cheers mate! That was super helpful, even the button template, always did my head in trying to do them!

I was always just photoshopping buttons from other pages online. I have a whole bookmarks section of neat buttons from different websites.

12-20-2013 03:12 PM #14 Adamw (AMC Alumnus)

This is awesome! New to mobile space and this is a great way to grab someones attention! Much appreciated..

01-19-2014 12:02 AM #15 olympus_max (Member)

I did a little more browsing about styles online, and I came across this site - http://www.brusheezy.com/styles?page=2&sort=popular. Take a look, They have a lot of cool and unique styles you can use. Can anyone say TRON!

05-16-2014 09:36 PM #16 highflyer357 (Member)

Great tips on this. Thanks!

07-25-2014 03:45 PM #17 rafael (Member)

Mr.Green I'm getting a 404 on all the images except for the rockstar! I'm in desperate need of a banner making tutorial, I waste waaaay too much time making these hehe...
Anyone up for making a video tutorial on banner making showing all the tips and tricks?

08-07-2014 02:20 AM #18 afernald (Member)

Nice resource. Bookmarked the gif site. Thanks for the help

08-09-2014 09:28 AM #19 Tomo (Member)

Awesome. But some of the traffic source disallow infinite loop of animation. Perhaps 3 loops maximum.

08-09-2014 10:20 AM #20 iAmAttila (Veteran Member)

Tomo, then you simply loop it 3 times... decisive decisive...

12-24-2014 08:05 PM #21 Mr Yaz (Member)

@ Mr Green - any chance we can get the picks (so they aren't broken here) to show up for this tutorial?

12-24-2014 08:33 PM #22 Mr Green (Administrator)

Originally Posted by Mr Yaz

@ Mr Green - any chance we can get the picks (so they aren't broken here) to show up for this tutorial?

I will hunt the files down when I get back to Netherlands. They are on my old computer I think!

12-24-2014 10:53 PM #23 tomrcp (Member)

I recently completed this PS banner design course on Tutsplus:
https://design.tutsplus.com/courses/...n-in-photoshop

It covers static banner design, animated banner design (ergo: GIFs), duplicating ads for different ad sizes, exporting and automation. The course is focused on advertising/performance marketing, thus great for us. Got it with a discount, but the $15 is still worth it IMO.

12-25-2014 07:23 AM #24 omrikos (Member)

Looks like a good one day course!
good share

What is your review on it?

12-26-2014 02:51 AM #25 William Yang (Senior Member)

that's a nice share,thanks Mr green!

12-26-2014 06:31 AM #26 moonking (Member)

dude, you are the shit! thank you!

Home > Design - Imagery, Banners & Landers >