- Joined
- Jan 27, 2015
- Messages
- 4,999
- Trophies
- 1
- Location
- Behind a screen reading news
- XP
- 4,885
- Country
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!
Review How to make a signature banner
- Thread starter BurningDesire
- Start date
- Views 14,058
- Replies 11
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.
- Joined
- Jan 27, 2015
- Messages
- 4,999
- Trophies
- 1
- Location
- Behind a screen reading news
- XP
- 4,885
- Country
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.
Then I did the same thing for my existing signature because I wanted to use it as a base.
Then I brought both into gimp, and used the select tool to cut a bit of the forum gradient.
And I also brought in the image of my existing signature.
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.
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.
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.
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.
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.
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.
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.
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.
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.
which parses like this.
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.
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.
Then I did the same thing for my existing signature because I wanted to use it as a base.
Then I brought both into gimp, and used the select tool to cut a bit of the forum gradient.
And I also brought in the image of my existing signature.
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.
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.
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.
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.
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.
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.
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]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='[email protected]'][/EMAIL][/CENTER]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]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='[email protected]'][IMG]https://u.teknik.io/2BGaOo.png[/IMG][/EMAIL][/CENTER]
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,
, 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.
Gimp is indeed Freeware. Though really don't need to bump a thread.
Still here's a link to GIMP
https://www.gimp.org/
I don't get any of this. Someone make me one. I want this on it http://img15.deviantart.net/5042/i/2017/056/e/8/shokora_by_rarekirbystarball2-db0etn3.png
Similar threads
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@
RedColoredStars:
There is an actual trailer with footage too. lol. Going to watch it tonight. Grabbed it from... a place. -
-
@
SylverReZ:
@Psionic Roshambo, JonTron's back yet again until he disappears into the void for another 6 or so months.+1 -
-
-
