SFO : Street Fighter Online

Go Back   SFO : Street Fighter Online > NON-SFO Related > Banners, Avatars and Images

SFO : Similar Threads
Thread Thread Starter Forum Replies Last Post
Can someone make me a banner? Deadly_Fighter Banners, Avatars and Images 0 04-09-2010 10:34 AM
Make A Banner for Me And WP Liger Zero Banners, Avatars and Images 5 10-28-2007 10:45 AM
Can some one make me a banner midnightbakerman Banners, Avatars and Images 2 05-18-2006 03:28 PM
He me make a banner silver-ken Banners, Avatars and Images 0 10-16-2005 04:07 PM
Where do i go to make a banner with my name silver-ken Banners, Avatars and Images 23 10-13-2005 11:40 PM

Reply
 
Thread Tools Search this Thread Display Modes
Old 09-16-2011, 05:47 PM   #1
Raze-Lighter
 
Raze-Lighter's Avatar
 
Join Date: Apr 2011
Age: 23
Posts: 360
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 211
Rep Power: 2775
Raze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura about
Default How to make an AD Banner

We will be creating a standard banner size, which is 468x60. So start a new document File New, you can type in the width and height yourself, or you can select "468x60 Web Banner" from the "Preset Sizes" drop down options.

PS. If you want professional banner design, take a look at 20dollarbanners.com - they do great banner design work at affordable prices

The first thing we want to do is create a 1px border around the banner.
- So Create a New Layer and name it "Border"
- Press CTRL+A to select all. Then go to Edit Stroke. Apply the following Settings:
Width: 1px. Color: Black. Location: Center. Blending Mode: Normal. Opacity: 100%

This gives us a crisp 1px border around our banner. Now, every other layers we create through the tutorial will need to be placed beneath this border layer on the layers pallete, this is to make sure the border will always be visible.



Now, the design of the banner itself is really up to you, the important thing about this tutorial is the animation technique which I will show you later, but you can read on if you want to follow this tutorial and make a similar banner to mine.

I will be creating a banner to promote tutorialwiz.com, so i'll include its logo for branding purpose. So I open up my logo and copy and paste it into my banner, and resize it down to fit the banner. Now I use the eclipse shape tools and create a large round shape to right. This is where my promotion text will go. You will need to make it larger than the banner size so it has a nice curve in the middle.



Now I want to give it some color, so I apply some gradient to it, go to Layer Layer Style Gradient Overlay. I used the default settings, with the following colors:


I also applied some drop shadow and inner shadow using all the default settings, just change the opacity down to 20%



I used the rounded corner shape tool and created a shape underneath my logo for my tag line. Applied a gradient layer style with the following colors.


Then I applied a 2pixel white stroke to it. (Layer Layer Style Stroke)

I also added a grey to white gradient to the background layer so it doesnt look too flat.



Now theres my banner design (yes, its simple, but thats all we need really..). Now comes the fun part. Animation.

To make the tutorial simple, I will rotate only between 2 lines of text, you should then get a fairly good idea of what to do, then you can apply it to create more text rotations.

- Use the type tool, and create your first text (one that will appear in the first frame.



- Now hide the text layer . then use the text tool again, and type your 2nd line of text, in the same place as your first text.

Now you should have the following in your layers pallete:



and the banner look like this:


Now we are ready to animate it, lets switch to Image Ready. In photoshop, just click the "Switch to Imageready" button.

In imageready, you should see a pallete at the bottom that looks like this



Now click on the "New Frame" icon (indicated above), this will duplicate the selected frame and append it to the animation.

Now with the 2nd frame selected, select the visible text layer from your layers pallete and shift it up by 2 pixel (press UP arrow twice).



If you take a look at your first frame, and 2nd frame, they are slightly different.

Now duplicate the last frame, then use the DOWN arrow, and move the text layer down by about 10 px, and set the layer's opacity to 70%



Now duplicate the last frame, move the text layer down by about 15px, and set the layers opacity to 40%



Duplicate the LAST frame.

Now hide the current visible text layer, and make the other text layer visible, move the text layer down to about the same position as the other text layer was, and set its opacity to 40%



Then Duplicate the last frame.

Now use the UP arrow / or your mouse, and move this text layer UP by about 15px and set its opacity to 70%



Then duplicate the last frame.

Now move the text layer UP by about 10 px and set its opacity to 100%



Then duplicate the last frame.

Now move the text layer DOWN by about 2px.



Now repeat from STEP 8 above to make this layer go down and the other text layer go UP again.

If you done everything correctly, you should have around 14 frames.

At the bottom of each frames, you will see "0 sec.", this is the time delay between each frame.

We want to set ALL of these to "0.05" OR "0.1", any, depends on how fast you want it. Experiment .

To set this to 0.05, click on the down arrow next to "0 sec", and choose "Other", then enter 0.05


*

At the bottom of the animation pallete, there is a control panel, with some buttons like one found on your DVD player, click > to play the animation.



As you can see here, the texts are cycling so fast we cant even read it. But there is 2 frames that we want it to stop at, and the animation will make it look like its sliding in and out.

Select Frame #1 and set it's delay to 2 seconds. Now find the other frame where the other text is in the position to read, (mine is at frame #8), and also set that to 2 seconds.

Now, look at your animation



I just want to point out that this tutorial was to show you how to create animated banner, the designs and style, you should come up with your own (better than mine of course). Remember NOT to over do it as animation can chew up alot of KB as you create more frames and more movements.

I hope this tutorial worked.
Raze-Lighter is offline   Reply With Quote
Old 09-16-2011, 06:56 PM   #2
donkios
VIP
 
donkios's Avatar
 
Join Date: Oct 2005
Location: Charlotte. NC
Age: 23
Posts: 2,792
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 170
Rep Power: 5027
donkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura about
Default Re: How to make an AD Banner

At least credit the person you copied this from.
__________________


--------------------------------------------------------

donkios is offline   Reply With Quote
Old 09-16-2011, 07:16 PM   #3
LuXv
 
LuXv's Avatar
 
Join Date: Jan 2008
Location: ATL + LA
Posts: 6,470
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 765
Rep Power: 4903
LuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really nice
Visit LuXv's Twitter
Default Re: How to make an AD Banner

-_- No Images? & LOL @ Donkios.
__________________


LuXv is offline   Reply With Quote
Old 09-16-2011, 09:05 PM   #4
Raze-Lighter
 
Raze-Lighter's Avatar
 
Join Date: Apr 2011
Age: 23
Posts: 360
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 211
Rep Power: 2775
Raze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura aboutRaze-Lighter has a spectacular aura about
Default Again

Lol I figure someone would say that, ok I guess I will if you insist.

I got this from a good friend who said, "This tutorial can help GFX artists, post it on SFO." Anyways, expected me to lie right?

Anyways, anything else.

My brother doesn't come on this account.

This is his brother TheKingOfRyu..

Goodbye.
Raze-Lighter is offline   Reply With Quote
Old 09-16-2011, 09:11 PM   #5
donkios
VIP
 
donkios's Avatar
 
Join Date: Oct 2005
Location: Charlotte. NC
Age: 23
Posts: 2,792
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 170
Rep Power: 5027
donkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura aboutdonkios has a spectacular aura about
Default Re: How to make an AD Banner

http://www.tutorialwiz.com/animated_banner

That's all you had to do
__________________


--------------------------------------------------------

donkios is offline   Reply With Quote
Old 09-17-2011, 07:14 AM   #6
LuXv
 
LuXv's Avatar
 
Join Date: Jan 2008
Location: ATL + LA
Posts: 6,470
Tournaments Joined: 0
Tournaments Won: 0
Post Thanks / Like
Chats: 765
Rep Power: 4903
LuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really niceLuXv is just really nice
Visit LuXv's Twitter
Default Re: How to make an AD Banner

Quote:
Originally Posted by (~Wind_Ryu~) View Post
Lol I figure someone would say that, ok I guess I will if you insist.

I got this from a good friend who said, "This tutorial can help GFX artists, post it on SFO." Anyways, expected me to lie right?

Anyways, anything else.

My brother doesn't come on this account.

This is his brother TheKingOfRyu..

Goodbye.
like TF said make separate accounts or this one will be disabled.
__________________


LuXv is offline   Reply With Quote
Reply
Forum Jump



Bookmarks

Tags
banner, make

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -5. The time now is 09:45 PM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

Navbar with Avatar by Kolbi