Everybody knows what a banner is, right? Ok, for those of you who are “fresh-and-clean” I’ll give some definitions. According to Wiki, a banner is
a flag or other piece of cloth bearing a symbol, logo, slogan or other message. Banner-making is an ancient craft. So take it seriously, you’re dealing with some ancient craft here! Jokes aside. I’m gonna teach you
how to make a Web banner. So don’t worry about getting scissors and paints!
Today, the importance of web banners is very huge and the main purpose of a banner is advertising. Banners bring [the advertiser] potential clients, thus – money. You won’t find a website without a single banner. So, the better the banner – the more people’s attention – the more [maybe] sells [of what you're offering]. It is the same for banner printing – you need the best quality and design to attract attention, but today we’ll talk about web banners.
There are 3 basic rules for a better banner that I follow:
1. it should be simple and stylish;
2. it should fit the surrounding atmosphere [page design];
3. it should not stand out too much.
So, without further dues, let’s get to the lesson. Here, I will cover some basic
Photoshop tools and their usage. It’s gonna be a
very detailed
tutorial, so that beginners know what I was doing and how. The banner that you will make yourself is the one I did recently for MakeUseOf.com (200×200):
Open Photoshop and create a new document: File -> New… (or use hotkey combination Ctrl+N):
Make sure you have the right width and height. Remember, we are creating a 200×200 banner. Keep resolution at 72 pixels/inch it is the most commonly used resolution for web images. And make sure the Color Mode is RGB Color.
Now you have a new document with a single layer Background:
Now let’s paint the background into black.
Tip: when you are about to use black or white colors it is always handy to press “D” on your keyboard to set foreground and background colors to default (black and white, respectively) and “X” if you need to switch them:
Switch colors by pressing “X” key and press Ctrl+Backspace. Now you should have a black background.
Let’s add background text.
Use the text tool from Tools (or press “T”):
With Text tool active, choose Arial
font, size – 8, color – white and set other parameters as shown in the figure below:
Now click somewhere on your workspace and type MAKEUSEOF in caps with a space after the word. Then select the text with the space in the end and press Ctrl+C to copy it:
After that, paste it (Ctrl+V) several times until you fill the horizontal line (paste a couple extra times even if it goes out of the banner limits:
Ok, now we need to fill the whole workspace with the word MAKEUSEOF. For that, copy the whole line; press Enter to go to the next line and paste. You will see that now we have two absolutely parallel lines of text. That won’t look cool.
To fix it, delete some of the first characters of the second line (almost half of the first word):
Now copy the whole text (both lines) and paste until you fill the whole workspace:
At this point, we need to rotate our background text a bit in counter-clockwise direction. To do that, press Ctrl+T to activate Free Transform mode. And rotate it until you come up with something like this:
Press Enter or double click on the selection to confirm changes. You see the black spaces that we don’t need are now visible. We must get rid of them. Easy. Use the same technique as we did previously to fill in. Until you have the whole workspace filled with text:
Apply changes (double click or hit the-smaller-Enter of your keyboard).
Alright, now let’s add some effects to our background text.
Right-click on the text layer (it must be labeled now as MAKEUSEOF) and hit Blending Options:
In the Blending Options window click on Gradient Overlay:
Now we will change the Gradient section. Click on the gradient (circled below):
This popup window will come up:
We will add two colors (blue-ish – #436ca4 and black – #000000) to the default gradient here (in green circles):
Green circle shows the Color Midpoint (drag it to the left/right and see how it works). The red section shows where to change the color and location.
Press all necessary OKs and now we have the right gradient. Let’s move on to the main text.
Now we will use Text tool again and since the new text layer will be created above the background text it is better to make it invisible for now (click on the “eye” on the left of the layer):
Ok. Create a new layer for the text:
Select Text tool, set as below (I used Poplar Std font, if you don’t have it, I guess the Impact will do):
Type “MAKEUSEOF” (all caps) and apply blue, black and red colors as below and make the background text visible by clicking the “eye” again:
Now let’s pimp it up a little. Go to Blending Options of the new layer and set as below:
Drop Shadow:
Pattern Overlay:
Stroke:
Click Ok and this is what you should have:
Now it’s time to add reflection.
Make a copy of the MAKEUSEOF layer (Ctrl+J) and now you should have a clone layer:
Press Ctrl+T to enter Free Transform mode and press Flip Vertical:
Apply changes by clicking Enter and this is what you have:
Select Move Tool (“V”) from Tools and move the flipped layer down so that its top is a few millimeters lower than the main text:
Rasterize the flipped layer so that we can treat it like a picture (it won’t be an editable text anymore). To rasterize, right-click on the layer and press Rasterize Type:
Now we need to make some changes to the layer effects. Remove the Drop Shadow effect (click on the eye on the left of the Drop Shadow property):
Here comes the tricky part. The effects that we have on the flipped layer are editable now and they will change as we edit the layer itself and we don’t want that. To keep it as it is now, let’s use the trick I always use.
Select the original MAKEUSEOF layer by clicking on it and create a new layer. Select the new empty layer, hold Shift and click on our flipped layer. Now we have two selected layers:
Note: it is important to select the lower layer first, since if you select the one above then the resulted merged layer will inherit all layer effects.
Press Ctrl+E to merge them:
As you see, now you have one layer instead of two and there is no FX on it (in red circle).
Set Opacity of the layer to 50%:
Select Eraser tool (“E”):
Choose Soft Round Brush (65 pixels) from the drop-down window (click on the arrow in the green circle):
Delete a bit more than a half of the flipped layer:
Now you can take a little break
Are you back? Ok. Let’s add glossy effect.
Hold Ctrl and click on the MAKEUSEOF layer:
Now, select Elliptical Marquee Tool (“M”) from Tools and choose Intersect with selection (just above the workspace):
Create a new layer and with the Elliptical Marquee Tool make an intersected selection as below:
Set your colors to default (“D”) and press Ctrl+Backspace to fill the selection with white:
Deselect by clicking Ctrl+D. Set Opacity to 50%:
Ok, done with the glossy effect!
Now let’s add some text.
Create a new layer and type DOWNLOAD FREE GUIDES BY with the following text settings (I used Copperplate Gothic Light as font; set 10 for text size of DOWNLOAD and 12 for the rest):
Align the text as shown below:
Alright, we’re almost done.
Now we need to add the guides’ picture which you can download
here.
Paste it into the workspace and place it below the main text:
DONE!
Now some tips on saving the banner.
Since we have a static banner (not animated), let’s save it in png format (JPEG will make us a bigger filesize at the same quality).
Go to File-> Save for Web & Devices (Ctrl+Alt+Shift+S) and select PNG-8 (PNG-24 is better for images with a transparent background) and keep other settings as they are by default:
Click Save, give it a nice name and it’s ready for use!
I hope you found this tutorial helpful. It cost me lots of sweat to prepare it! Ohhh…
Keep checking, more tutorials are on the way.
http://www.truekolor.net/how-to-make-a-nice-banner-in-photoshop/
