DaRknEsS
16-07-08, 09:19 AM
Web banner - Photoshop Tutorial
http://www.slicktutorials.com/ps/banner/banner.gif (http://www.slicktutorials.com/banner)
Make a standard sized 468x60 banner. Many of the banners out there look like crap, so I'm here to teach you how to make a nice looking one.
Today, class, we will be completing an easy task with the pen tool, custom shapes, and layer styles.
Create a document with dimensions 468px width and 60px height. Fill your first layer with white, then give it a gradient overlay layer style with the following colors. Drag the color stop on the right (the bright red color) to the middle as shown:
http://www.slicktutorials.com/ps/banner/1.jpg
Now you should have this:
http://www.slicktutorials.com/ps/banner/1.gif
Using the custom shape tool, select the "Arrow 2" shape
http://www.slicktutorials.com/ps/banner/2.jpg
Make an arrow by clicking in the top left corner then holding shift and dragging down and to the right until you have a shape like below:
http://www.slicktutorials.com/ps/banner/3.gif
Give the arrow a color overlay layer style using a medium red (I used #b21219), and a 1px outside stroke using a darker red (I used #a62908). Set the opacity for this layer to 50%.
http://www.slicktutorials.com/ps/banner/arrow.gif
Duplicate your arrow layer, then with your new arrow, using the move tool (press V to use the move tool) hold shift and press the right arrow key once to move the new arrow over 10 pixels. The two arrows should now overlap, giving you this look:
http://www.slicktutorials.com/ps/banner/4.gif
Select both arrow layers (by 'ctrl+click' ing each one in the Layers window). Now go to 'Layer > Merge Layers' This will combine your two arrows in to one layer.
http://www.slicktutorials.com/ps/banner/4.gif
Select the new combined arrow layer (click it in the Layers window), then duplicate it (go to 'Layer > Duplicate Layer'). Now use the move tool again and once again hold shift, this time press the right arrow 6 times to move it 60 pixels.
http://www.slicktutorials.com/ps/banner/5.gif
Repeat this process 2 more times, so you have 4 arrows. Now select all of your arrow layers and merge them.
http://www.slicktutorials.com/ps/banner/6.gif
Duplicate your merged arrow layer, flip it horizontally (with the layer selected, go to 'Edit > Transform > Flip Horizontal'), then move it over to line up with the right edge of your image.
http://www.slicktutorials.com/ps/banner/7.gif
Using the pen tool, draw a new layer as shown. Start by clicking number 1, then click each number until you get to number 6, then click number 1 again to complete your shape. The arrow layers should help you figure out where to click for number 2 and 5.
http://www.slicktutorials.com/ps/banner/8.gif
Now give your new shape a gradient overlay as shown.
http://www.slicktutorials.com/ps/banner/shapegrad.jpg
To get this:
http://www.slicktutorials.com/ps/banner/9.gif
Now select your arrow layers and move them on top of everything (select both arrow layers in the Layers window, then grab and drag them above all other layers).
http://www.slicktutorials.com/ps/banner/10.gif
Add some text to the center of your image. I used 48pt Impact as the font. Try to come up with something a little more creative than "click!"
http://www.slicktutorials.com/ps/banner/11.gif
Give your text a 2px outside stroke with a dark red color (mine is #b21219) and a gradient overlay from light yellow (#faf88e) to white. And you're done. Now go put your banner up everywhere and watch the traffic roll in! Check back for a tutorial on how to animate this banner to make it more eye catching.
http://www.slicktutorials.com/ps/banner/12.gif
http://www.slicktutorials.com/ps/banner/banner.gif (http://www.slicktutorials.com/banner)
Make a standard sized 468x60 banner. Many of the banners out there look like crap, so I'm here to teach you how to make a nice looking one.
Today, class, we will be completing an easy task with the pen tool, custom shapes, and layer styles.
Create a document with dimensions 468px width and 60px height. Fill your first layer with white, then give it a gradient overlay layer style with the following colors. Drag the color stop on the right (the bright red color) to the middle as shown:
http://www.slicktutorials.com/ps/banner/1.jpg
Now you should have this:
http://www.slicktutorials.com/ps/banner/1.gif
Using the custom shape tool, select the "Arrow 2" shape
http://www.slicktutorials.com/ps/banner/2.jpg
Make an arrow by clicking in the top left corner then holding shift and dragging down and to the right until you have a shape like below:
http://www.slicktutorials.com/ps/banner/3.gif
Give the arrow a color overlay layer style using a medium red (I used #b21219), and a 1px outside stroke using a darker red (I used #a62908). Set the opacity for this layer to 50%.
http://www.slicktutorials.com/ps/banner/arrow.gif
Duplicate your arrow layer, then with your new arrow, using the move tool (press V to use the move tool) hold shift and press the right arrow key once to move the new arrow over 10 pixels. The two arrows should now overlap, giving you this look:
http://www.slicktutorials.com/ps/banner/4.gif
Select both arrow layers (by 'ctrl+click' ing each one in the Layers window). Now go to 'Layer > Merge Layers' This will combine your two arrows in to one layer.
http://www.slicktutorials.com/ps/banner/4.gif
Select the new combined arrow layer (click it in the Layers window), then duplicate it (go to 'Layer > Duplicate Layer'). Now use the move tool again and once again hold shift, this time press the right arrow 6 times to move it 60 pixels.
http://www.slicktutorials.com/ps/banner/5.gif
Repeat this process 2 more times, so you have 4 arrows. Now select all of your arrow layers and merge them.
http://www.slicktutorials.com/ps/banner/6.gif
Duplicate your merged arrow layer, flip it horizontally (with the layer selected, go to 'Edit > Transform > Flip Horizontal'), then move it over to line up with the right edge of your image.
http://www.slicktutorials.com/ps/banner/7.gif
Using the pen tool, draw a new layer as shown. Start by clicking number 1, then click each number until you get to number 6, then click number 1 again to complete your shape. The arrow layers should help you figure out where to click for number 2 and 5.
http://www.slicktutorials.com/ps/banner/8.gif
Now give your new shape a gradient overlay as shown.
http://www.slicktutorials.com/ps/banner/shapegrad.jpg
To get this:
http://www.slicktutorials.com/ps/banner/9.gif
Now select your arrow layers and move them on top of everything (select both arrow layers in the Layers window, then grab and drag them above all other layers).
http://www.slicktutorials.com/ps/banner/10.gif
Add some text to the center of your image. I used 48pt Impact as the font. Try to come up with something a little more creative than "click!"
http://www.slicktutorials.com/ps/banner/11.gif
Give your text a 2px outside stroke with a dark red color (mine is #b21219) and a gradient overlay from light yellow (#faf88e) to white. And you're done. Now go put your banner up everywhere and watch the traffic roll in! Check back for a tutorial on how to animate this banner to make it more eye catching.
http://www.slicktutorials.com/ps/banner/12.gif