Jump to content

Recommended Posts

Posted

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 :)

Posted

I have most of those programmes... It just happens that I don't know how to make this specific type of image...These all seem to have a similar style...

Posted

Well, on that firefox one, I see a blue background with a orange to white gradient with a stripy pattern and the firefox logo. Have any clues now? :P

Posted

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!

Posted

Yes, and that tutorial looks crap in production...

As a professional image editor, i seriously need to work on this sector of editing...

Posted
As a professional image editor

You are a professional image editor and yet you need to ask how to make them :/

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...