1. We have moved to a new forum system. All your posts and data should have transferred over. Welcome, to the new Serebii Forums. Details here
    Dismiss Notice
  2. Be sure to join the discussion on our discord at: Discord.gg/serebii
    Dismiss Notice
  3. If you're still waiting for the e-mail, be sure to check your junk/spam e-mail folders
    Dismiss Notice

Banner Tutorial thread

Discussion in 'Digital Media' started by Nagashi, Jun 11, 2006.

  1. Nagashi

    Nagashi Master Coordinator

    Tutorial//Vine Spiderman Sig - Good for newbies. ^^

    This is my first tutorial... ever. You need Adobe Photoshop for this, and any queries or comments please post, since I need to make sure I explained everything properly. ^^ And although it's not great, I like the outcome:

    If you use it, posting your outcome would be greatly appreciated, and feedback would be awesome - I need to know how to improve.

    This is just a short one to show how to load brushes, since some people were having problems:

    Other outcomes:

    New Tut

    Last edited: Apr 8, 2007
  2. Waterlight

    Waterlight Oceanic Legend

    Nice. I've only had a quick scan through and it seems clear on how to do it - when I have more time tommorow night, I'll try it out. Your end result rocks, the background and text fit the stock really well.
  3. Nagashi

    Nagashi Master Coordinator

    Thanks Waterlight, I appreciate the comment - please post it here when you've used the tutorial. =o

    Any other comments?
  4. Sasuke.

    Sasuke. Well-Known Member


    Woah it's my eyeball. Tata!
  5. katiekitten

    katiekitten The Compromise

    Blast. :( No gradient tool on mine. Ah well, I'll improvise...

    Meep. ^.^;; Came out a little odd... If you really want to see the atrocity, then here is a linkie. XD

    That was a very good tutorial, P/Arts! *hugs* Thanks!
  6. Waterlight

    Waterlight Oceanic Legend

    Here's my first result:

    I think I overdid it slightly, and the colours I chose for the gradient blended with the stock too much, but I like it. I'm gonna try once more, though.

    EDIT - Second:
    Last edited: Jun 12, 2006
  7. Nagashi

    Nagashi Master Coordinator

    o.o Awesome, this got stickified! I'm honoured. =D And great sig Sasuke - I love the concept - and you too Sai, 'specially considering it's your what - tenth? And Katie, love the colour scheme. =o

    I'm gonna be editing outcomes onto the beggining post so people can see what they do by the way - if anyone doesn't wish for theres to be on there for any reason, just let me know and I'll remove it.
    Last edited: Jun 12, 2006
  8. Ejunknown

    Ejunknown be creative

    *jaw drop* This is a superb tutorial, I've seen it before but never tried. I now have, and I love the effects. Thank you! <333


    Edit: XD I edited that one too enter into the banner contest. This is the result. :D


    Edit: And again... XDDD

    Last edited: Jun 13, 2006
  9. katiekitten

    katiekitten The Compromise

    I tried again. ^.^;; XD



    I really need to get some better grunge brushes... XD
    Last edited: Jun 14, 2006
  10. Esperante

    Esperante XJ220

    My results.

    Nice job.
  11. Hoenir

    Hoenir overdog

    Tutorial::A Mixed Sig

    Step 1: Lay Down a Little Grunge
    Start with a small image, I use 400x170. Then dump the background black, create a new layer and brush a little bit of grunge on. I use a brush set from 22pixels flock called Sneaky_GFX_Dragoneye. I only used two brushes. Drop the opacity of that layer down to 40% or so.


    Step 2: Some Soft Abstract
    Create a new layer and brush a little bit more with a set of abstract brushes. I used Jashin's brushes set 10, which is downloadable from deviantart.com. Drop the opacity down to 50% or so.


    Step 3: Bash It Up
    There is a set of brushes called Bash's set 12, downloadable from deviantart.com. They are very unique brushes, and can cause an incredible effect if used in the right place. I find that bash's brushes look best around the edges, but feel free to experiment. Create a new layer and brush some on. Set the blending mode of that layer to "Soft Light"


    Step 4: Add Some Stuff to the Emptiness
    Sometimes, when you do this there is some leftover black space. That is not good. You need to fill that stuff up. I used jashin's dirty abstract brushes for that. Downloadable from deviantart.com. Drop the opacity of this layer down to 50% or so.


    Step 5: Fractalize It
    Using some fractal brushes (I used orsonsfractals, from deviantart.com) brush some more. Drop the opacity of this layer down to 70% or so.


    Step 6: Fractalize It-AGAIN!
    Using some more fractal brushes, brush some more. Don't drop the opacity on this layer.


    Step 7: Darken
    Merge the layer into one layer by pressing cntrl+shift+e. Then go to enhance>adjust brightness and contrast>brightness and contrast. Set the brightness to -40 and the contrast to +40.


    Step 8: Techit
    Using some tech brushes create a little platform. Then duplicate the layer. Go to edit>stroke>1px black brush on that layer. Drop the opacity of the non stroked layer to 50% or so. Then set the stroked layer to "darken."


    Step 9: Color!
    Create a new layer underneath the tech layers. Using a 65 px soft brush start to add the colors that you want. After you have that, go to filter>noise>median and set the amount to 45 pixels or so. Then go to filter>blur>gaussian blur and set the amount to 50 pixels or so. Now, got to enhance>adjust color>hue and saturation and drag the saturation slider down to -65 or so. Then set the layer to "color."


    Step 10: Render it Awesome
    Put your render in, resize it, and place it in a location you like. Drag it underneath the color layer. Then, take the lassoo tool and set the feather to 40 pixels. Now select part of the render. Cut it, and paste it onto a new layer. Use the nudge tool to put it right on top of where it was before you cut it. THat way it will be part of the normal color, and part of the background color.


    Step 11: Text!
    Add some text on top of that platform that you made with the tech brushes. Bam! You're done!

    *Remember the thirds rule. Divide the banner into imaginary thirds. The render should go on the dividing line between the middle and one of the outer thirds usually. There are exceptions, like the image in my sig. The render would interfere with the text, so I had to stick it lower and farther to the right.

    *Bright colors are not good. Try to stay with very low saturation colors, or else it'll look crappeh, k?

    *Borders. Yes, I didn't mention borders, but they're usually a good idea. Stick with a 1 pixel black brush, k. It'll probably look the best. If you want to look fancy, then you'll want to do a 2 pixel colored brush, then a 1 pixel black brush on top of it (see sig for an example.)

    *Text. There are a number of styles you can do text. My favorite is a black outline, on top of a layer with colored text, then set the colored layer to linear light. Nice effect. (See the tut text for an example.)

    *Fonts. People all have their preferred styles for fonts, but commonly used are pixel fonts. A few recommendations are Silkscreen, pixeldust, sevenet7, Visitor TT2 (BRK), and aerial.

    *Gradients. Another way to color things is through gradients. On a new layer, you can use two gradients, in my sig I used yellow and blue, and put them in a style that looked good on this banner.

    *Coloring from the start. If you don't plan on brushing a lot and having some black space, which is cool, then you might want to brush in color from the start. It's very hard, IMO to get a good effect, but sometimes it looks better then my coloring method.
    Here's a banner I made with coloring from the start

    *Tech stuff is totally optional. I just think it looks c00l.


    a huge brush set is here


    download it. it also has tons of fonts. yes, it CS only, but download it on any other version and some of the brush sets will work. not all of them, unfortunately, but some of them.

    also, here are some links to good brush sets


    Tech brushes
    http://genuine-atramentous.deviantart.com/ - get the Tech Set .1659.
    http://www.greycobra.com/downloads/view/13/ - download 'em

    FireHead Hank
    Last edited: Jun 18, 2006
  12. katiekitten

    katiekitten The Compromise


    *goes to try it out* XD

    Edit:...Is this for Photoshop? *has paint shop pro*
  13. Hoenir

    Hoenir overdog

    yeh, 's for photoshop
  14. Guraena

    Guraena Well-Known Member


    Great tut. :0 Mine came out a little clonky (I don't know why I use that word) but I like it.
  15. Hoenir

    Hoenir overdog

    added some notes about some other shtuff
  16. katiekitten

    katiekitten The Compromise

    I like the new banner! =D

    ...I'll try to do this, but it might be a little different... XD
  17. Hoenir

    Hoenir overdog

    awesome! post your result when you're done and I'll put it in! You're awesome for looking at my tutorial and posting btw XD.
  18. Hoenir

    Hoenir overdog

    lol mods sticky this
  19. Mega Trickster

    Mega Trickster Blargagh blargh

    Very nice tut! Maybe when I get Photoshop I can use this! THANK YOU! *bows down*
    What's the name of the font in the final result of the tut? I'm curious =3

    Oh maybe there can be a tut thread instead of individual tut stickies like what they did in the Fan Sprites section!
  20. Kimori

    Kimori Feel my soul

    That is awesome!! I'll have to go try it out on my Photoshop 6.0!

Share This Page