Photoshop  Home Photoshop Web Layout Professional Banner
rss

Professional Banner

Author: PicoDeath More by this author


Step 1

Create a new document, about 600x100, fill the background and create a bar from left to right about a medium size, fill this will a dark black colour, see the below image if need be.

Click to enlarge
Click to enlarge

The settings i used to make this stand out are below, I only used two blending options, play around with them to see what you can do.

image 2

image 3

Step 2

Now i created a small rectangle which will be where the link is located, I added a inner shadow to make it look further back and 3D, then i drew a 1px line to the left and set it to overlay, I then duplicated the layer a few times to create a few spots for links.

Click to enlarge
Click to enlarge

Step 3

Next i created small triangles by creating a new document, this is simple starting off with a 7 pixel line then each time went in by two, this is so it has the same shape throughout, then i duplicated it and placed it in the middle of each link background, then added some text to get a feel, here's the triangle so you get the idea and the outcome.

image 5

Click to enlarge
Click to enlarge

Step 4

This is just a simple pattern created, open a small document up and create something like the below, the go to Edit > Define Pattern and save, then select the fill tool and select pattern instead of foreground(Top left of photoshop), now draw another rectangle from left to right, fill it with the new pattern and blend the top slightly so it looks like i fades into the background.

Here's the pattern and outcome.

image 7

Click to enlarge
Click to enlarge

Final Step - Text/Name

For the final step i added a made up name for this banner, TalkDesign, I first typed out 'Ta kD sign' and then created a new layer for 'L' and 'E', I then rotated them and placed them into the spaces, to get the slight shine on the text use the same settings below. After all the text was done i drew a 1px white line under the text and set the layer to overlay.

image 9

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

I hope you enjoyed the tutorial and got something useful out of this.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Professional Banner"