How to make a signature banner

Discussion in 'GBAtemp Reviews & Guides' started by BurningDesire, Sep 3, 2015.

  1. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,962
    5,811
    Jan 27, 2015
    United States
    Behind a screen reading news
    Hi. I don't know if this is the right place but I was wonder how to make a signature banner for my signature. Thanks for your time!
     
  2. CheatFreak47

    CheatFreak47 Complex Donut

    Member
    1,381
    964
    Oct 11, 2011
    United States
    Michigan, USA
    Depends on what you want from your banner. If you'd like- I could make you one and post a step by step with screenshots in gimp.
     
  3. BurningDesire
    OP

    BurningDesire GBAtemp Psycho!

    Member
    4,962
    5,811
    Jan 27, 2015
    United States
    Behind a screen reading news
    Oh could you? That be great! If you can send me a pm
     
  4. SomeGamer

    SomeGamer GBAtemp Guru

    Member
    5,755
    2,712
    Dec 19, 2014
    Hungary
    Please do it in this thread! I want to know it, too!
     
    BurningDesire likes this.
  5. CheatFreak47

    CheatFreak47 Complex Donut

    Member
    1,381
    964
    Oct 11, 2011
    United States
    Michigan, USA
    Alright, here, I made a new signature myself in gimp to show that with even a little effort, you can make some cool stuff.
    In my case, I decided to make a simple signature that is a composition image, i.e. multiple images that appear as only one image, each that link to their own separate thing, but still look pretty seamless.

    First I used an awesome program called ShareX to capture an image of the gradient the forum uses in the dark style.
    [​IMG]

    Then I did the same thing for my existing signature because I wanted to use it as a base.
    [​IMG]

    Then I brought both into gimp, and used the select tool to cut a bit of the forum gradient.
    [​IMG]
    And I also brought in the image of my existing signature.
    [​IMG]
    Next, I did some simple editing with tools like the Magic Wand for threshold selecting based on composition of the image and color- and made the non-icon parts transparent.
    [​IMG]
    Then, I took copied the gradient, and pasted it in, sent it to a new layer by right clicking it, and then dragged behind the existing image in the layer stack, like this.
    [​IMG]
    After this, I went to Image->Canvas Size and changed the image to be 100x32, since I wanted a very small form factor for my signature. And I also went and used the scale tool to make that layer smaller- since it's a wide layer and not a tall layer- I scaled it to height. - so it fit in my desired size for the signature, and lastly used the move tool to shift the main icons over a few pixels- making sure there was an even number of pixels on each side of the icons at the edge.
    [​IMG]
    After that I did "Layer to Image Size" on the gradient layer- so things would work a little more cleanly.
    Then I took the pencil too- sent the size to 1, and used a single pixel brush to make a little boarder on the edge of the screen. You use shift to create very nice straight lines fairly easily this way.
    [​IMG]
    At this point I was feeling satisfied with the image itself- so I decided it was time to break the image apart into sections- so each part could be it's own button, so I merged the icon layer down with the gradient layer and then began splitting each part into it's own image. I did this with the Square Select tool, cutting the piece of the image out, and then going to File->Create->From Clipboard.

    Because we'll be turning this into a composition image that appears to be a single image in post, it's important that you only select the part of the image you need to snip- with no extra space on any edges to the left or the right.
    [​IMG]
    [​IMG]

    After that I went to each image and exported them as a PNG to a folder, and uploaded each of them to my favorite image host. I used ShareX to upload these to a custom host I use called teknik.io, (ShareX supports any host you want as long as the upload/retrieval is friendly to it.) But realistically you can use any host you want- as long as it provide direct image access, and your images aren't at risk of deletion. (For example, Imgur)

    So I was left with these.
    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    Now here is where things get complicated, really, you need to learn a bit of BBCode to do stuff like this, realistically- so you'll need to click the BBCode Editor button in your signature page to do this. The main tags you'll need to use are IMG, URL, EMAIL and alignment stuff like CENTER, RIGHT, and LEFT.

    For this part we'll need to get URLs for each image to link to, in my case, social media outlets and such, since I need to display code- I'll be writing in code tags to show what I did.

    First you'll want to pick your alignment, I'm going with center, since that's what I like the most. A lot of making a signature is preference, so use your own creative flare here whenever you'd like, don't be afraid to experiment with code.
    Code:
    [CENTER][/CENTER]
    which doesn't produce anything when parsed because there's no content, obviously.

    Now you'll want to insert your URLs and/or EMAILs
    Note that because of the way BBCode works, line breaks and spaces are parsed literally, unlike HTML, for example, so do not try to organize your code using breaks or spaces- a single line in post must be a single line in BBCode. Your code will have to be messy but the product will be pretty, I swear.
    Code:
    [CENTER][URL='http://twitter.com/cheatfreak47'][/URL][URL='http://www.youtube.com/user/CheatFreak47'][/URL][URL='http://www.twitch.tv/cheatfreak47'][/URL][URL='http://steamcommunity.com/id/cheatfreak47/'][/URL][EMAIL='cheatfreak47@gmail.com'][/EMAIL][/CENTER]
    Which- again- because there is no content- it parses literally as nothing.

    Now that we have this, we can add the images that the URLs are bound to- these go nested inside the URL code tags, like this.
    Code:
    [URL='http://twitter.com/cheatfreak47'][IMG]https://u.teknik.io/L6tEq8.png[/IMG][/URL]
    which parses like this.
    So if you put it all together, like this:
    Code:
    [CENTER][URL='http://www.twitter.com/cheatfreak47'][IMG]https://u.teknik.io/L6tEq8.png[/IMG][/URL][URL='http://www.youtube.com/user/CheatFreak47'][IMG]https://u.teknik.io/0X5OEp.png[/IMG][/URL][URL='http://www.twitch.tv/cheatfreak47'][IMG]https://u.teknik.io/5eFeSu.png[/IMG][/URL][URL='http://steamcommunity.com/id/cheatfreak47/'][IMG]https://u.teknik.io/hPDHZo.png[/IMG][/URL][EMAIL='cheatfreak47@gmail.com'][IMG]https://u.teknik.io/2BGaOo.png[/IMG][/EMAIL][/CENTER]
    You get this.
    And there you have it- an aesthetically pleasing signature that's not all that intrusive- but definitely effective.
    @Red3agle I'm still interested in doing something for ya- I'll probably make another post in this sort of style while I make it- once you have some ideas for what you want, feel free to send em back in that PM.
     
    Last edited by CheatFreak47, Oct 20, 2015 - Reason: don't quote this- it's too long, also fixed some bbcode stuff, added in quote blocks for the parsed images for thread prettiness, etc.
    CatmanFan, Xygrid, Ammako and 2 others like this.
  6. Vexiant
    This message by Vexiant has been removed from public view by Veho, Dec 23, 2015.
    Dec 23, 2015
  7. DaniloLemes

    DaniloLemes Newbie

    Newcomer
    9
    2
    Oct 4, 2012
    Nice! Thanks for sharing this
     
  8. VPokemon

    VPokemon Member

    Newcomer
    12
    0
    Jan 8, 2017
    United States
    Thanks for sharing this information
     
  9. AlexAlmighty

    AlexAlmighty Member

    Newcomer
    16
    5
    Jan 11, 2017
    United States
    United States
    Is GIMP freeware?
     
  10. Lilith Valentine

    Lilith Valentine GBATemp's Wolfdog™ Cuddle lesbian derp

    Member
    20,069
    21,173
    Sep 13, 2009
    Antarctica
    Between insane and insecure
    Gimp is indeed Freeware. Though really don't need to bump a thread.
    Still here's a link to GIMP
    https://www.gimp.org/
     
  11. DinohScene

    DinohScene Capture the Dino

    Member
    GBAtemp Patron
    DinohScene is a Patron of GBAtemp and is helping us stay independent!

    Our Patreon
    16,042
    12,555
    Oct 11, 2011
    Antarctica
    В небо
    GIMP is freeware yes.
     
  12. AlexAlmighty

    AlexAlmighty Member

    Newcomer
    16
    5
    Jan 11, 2017
    United States
    United States
    Didn't notice I was bumping because of VPokemon, sorry.
    And thanks!
     
  13. RareKirby

    RareKirby GBAtemp Regular

    Member
    271
    50
    Mar 1, 2011
    United States