Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Adding Banner

Adding Banner


Open a new document. I've chosen 600x100 px. Set the foreground colour to #9DAA97 and the background colour to #656D61 and grab Gradient Tool (linear). Pull a nearly vertical line on your document. Go to Layer > Layer Style > Pattern Overlay and choose some black 45* scanlines with Opacity=25%.

Hit D on the keyboard and then X. Create a new layer and hit Ctrl + R to bring out the rulers. Grab Move Tool and pull the vertical ruler into the middle. Do the same with the horizontal ruler.

Grab Elliptical Marquee Tool and place the mouse on the middle of the document. Hold down Shift and Alt while you make the selection of the circle. Don't make the circle too big. Fill the selection with #FFFFFF. remove the selection (ctrl + d).

Make a new circle in the same way as the first but make it smaller. Move the selection over the first circle and hit Delete on the keyboard. Then you have a circle with hole in the middle. Grab Elliptical M. Tool again and make a little circle in the hole. Fill it with #FFFFFF. Down in Layers-Palette you set the Layer-Mode to Overlay. Duplicate the layer a couple of times and move them around on the document. You can also change the size of the circles with Edit > Free Transform (ctrl + t)

Click to enlarge
Click to enlarge

Create a new layer and grab Custom Shape Tool. Go to the shape-menu in Options Bar and choose Arrow2.

image 2

Create an arrow on the document while you hold down Shift. Right click on the arrow-layer and choose Rasterize Layer. Go to Edit > Free Transform and rotate the arrow 45 CW.

image 3

Accept the action in the right side of the Options Bar. Duplicate the arrow-layer and move the duplicated layer. I've made three arrows in different sizes.

Click to enlarge
Click to enlarge

Create a new layer. Set the foreground colour to #12405C and grab Polygonal Lasso Tool. Down in right corner we begin this step. While we use Polygonal L. Tool we hold down Shift! Start making a cool bar. It isn't easy to describe how you can make it, but look at the picture below and see how I have made it.

Click to enlarge
Click to enlarge

Go to Layer > Layer Style > Stroke

Size = 1 px
Color = #FFFFFF

Hit OK.

Set Layer-Mode to Overlay (in Layers-Palette).

You can also make a bar up in left corner if you want. In that way, you make sure that the banner will not be too empty.

Click to enlarge
Click to enlarge

Create a new layer and set the foreground colour to #FFFFFF. Go to Filter > Render > Clouds. Set Layer-Mode to Soft Light.

We are almost done but the banner is still too empty. I fixed this problem with a brush. You can use the standard brushes or download new brushes

Create a new layer and grab Brush Tool. Find the new brushes in the bottom of the brush-list. Fill the document with some brushes and set Layer-Mode to Overlay and 75%.

You are finish.

Banner Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Meye.dk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Adding Banner"

Only registered users can write comment

No comments yet...