Jump to content

Fancy forum sig bars?


softdel

Recommended Posts

I'm sorry I have to ask this..but I'm itching to learn how to do it...

How do you make those fantastic little forum signature banners? Here are some examples:

FirefoxUserBar.jpg

hak_5.gif

I will be extremely grateful if anyone can provide me with Photoshop/ Fireworks tutorials, source files, fonts or anything else...

Thanks again :)

Link to comment
Share on other sites

After some obsessive googling I managed to turn this up...I might give it a go :)

Here is a tutorial from further in this thread, thought it might be easier to put it here as well...

1) Create a new document with a white background, 350 wide by 19 high.

2) Find a piece of art or logo you want to use for the image bar, google image search is ideal for this. Once you have a suitable piece of art save it to a convenient location, i use the desktop. As the bars are very small the artwork doesnt have to be particuarly high res.

3) Create a new layer on your bar image.

4) Create another layer and choice a foreground colour that complements your artwork or just something that looks cool, choose white as your background colour (the same as the background colour of the new document you created). Then go to the gradient tool and drag out a foreground to background gradient so you get at least half of the bar filled with colour and the fade to white starts around half way along the bar (see my bars)

5) Load the artwork you found and saved in step 2.

6) Drag the artwork into the bar image, if its a logo that can be scaled down to fit within height the boundries of the bar and still be recognisable i do this (as with the apple one above) but if not i tend to use the artwork bigger and maybe rotate it to give a more abstract view but make it still recognisable as with the ferrari f1 bar. Generally just position it where it looks good to the left of the bar but make it so people can see what its supposed to be.

7) Create a new layer and use the text too with the "small fonts" font at size 8 points to enter your text. Drag this text almost to the right of the bar but keep it verticaly central. Go into the layer styles and then go to "stroke", change the colour from its default red to black and then change the size from 3 to 1 point. Remember to use all cap otherwise the font will be unreadable.

8) Create another new layer and using the marque tool select the top half of the bar for its entire length. Then fill the selection with white. In the layers palette change to opacity of that filled layer to somewhere between 10 and 15%, i generally use 10% on darker colours and 15% on lighter colours as it takes more to show up.

9) Create yet another new layer and go to select menu and select all, then go to the edit menu and then "stroke" do a 1 point black stroke "inside" the image. Finally i save it using save for web as a jpeg with maximum as the quality setting, it doesnt make a great deal of difference to the file size if you use a lower setting but you get distortion on the text so its best to save using maximum quality. for a different look try changing the colour of the document and gradient etc.

10) Sit back and wonder at the beauty of your new bar! assuming ive written this tutorial correctly of course!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...