Here are also a couple of links to some userbar and antipixel generators if you want those kinds of graphics and want to create them yourself (faster than waiting for someone else to do them, in some cases also cheaper ). The userbars and antipixel buttons that I do are done manually, but the generators do scaringly similar ones (and sometimes even better ).
Antipixel button generator, makes "flat" basic antipixel buttons
Antipixel button generator, has more options than the other one, does pretty similar to what I do
Userbar generator (click "Start generator" from the top left to acces the generator)
Here's the signature set made during the tutorial:
Text and creatures
And links
And banners
And enough
Other stuff here.
So they
Will push
The lower image
To the bottom.
Signature set Tutorial
I use Adobe Photoshop CS3 to make all my graphics so this tutorial is for that one as well. The process itself is quite simple so I see no reason why the steps described here wouldn't work on GIMP or Paint Shop Pro or other graphics programs with layer and brush capabilities, though you might need to use tools with different names or something. I'm not that familiar with other graphics programs.
The images are a bit too big for the thread so I've included links to the same images is you want to view them separately.
1) Preparation
(Link to picture)
I create a new document with width of 620px and height of 300px and transparent background. I color the background with #e4e4b4 which is the colour of Magistream's threads' background. The background layer won't be included in the final signature set, but I like to have it in the working phase as I can then see how the set will look like in an actual post.
I create a few guides to help me with the positioning of elements. Most of my signature sets are a standard size: side bars are 300px tall and 120px wide and top and bottom bars are 50px tall and 360px wide, so I create vertical guides at 120px and 500px (these line the side bars). I also make a second set of vertical guides at 130px and 490px. These line the top and bottom bars. As you notice, there is a 10px gap between the guides. I do this in order to make the set fit. If I just cut the image from the 120px and 500px guides, the top and bottom bars would be pushed under the side bars and wouldn't show up on the signature. I've used gaps of 5px as well, but I prefer the 10px. Then I make two horizontal guides, at 50px and 250px to finish lining the top and bottom bars. The 50px height is just my preference, I've made sets with taller as well as shorter horizontal bars.
The 620x300 set will show correctly on posts. If you want to make a set that will show correctly on PMs and signature preview as well, start with a document of 490px x 300px. The horizontal bars I have on the smaller signature sets are 240px wide, so the guides would be at 120px, 125px, 365px and 370px vertical and 50px and 250px horizontal. Of course, these are again just preferences, the sig sets can be virtually any size as long as they stay within the size limits of the signature area.
2) Putting the creatures in
(Link to picture)
I open the image of the creature I want to use, copy it and paste it onto my working document into a new layer. I position it the way I figure I want it in the set and then either place a different creature on the other side or the same one (on a new layer, again), only flipped the other way around so the creatures are mirroring each other.
I then open the image of the creature I want to use on the top and bottom bars (if I want to, sometimes I won't put a creature there) and again position the image or images the way I want (each creature on its own layer). Sometimes the positioning changes throughout the process if I feel like the creature images should be in another way, so consider the first positioning as the sketching phase.
(You might notice that my bottom guide is on a bit higher than it was on the first picture. This is due to the Amphista hatchling sprite being 53px tall so it wouldn't fit inside my 50px area, so I made the bottom area 55px tall.
3) Putting all other stuff in
(Link to picture)
Now we'll get to the real action! I create a new layer under the creature layers but on top of the background layer. I pick a couple of colours, usually by using the eydropper tool on a zoomed in picture of the creature. That way I can keep to the colour theme of the creature and the style of the signature set stays consistent on that part.
I choose a brush I feel suits the creature and the feel I want for the set and plop the brush down under the left side creature. I may then change the dimensions of the brush or rotate it or flip it to get it fit like I want it to.
4) I repeat step 3 as many times as I feel like with different colours and different brushes every time on a new layer until I'm satisfied with how the left side of the set looks like.
Here's an animation of what kind of brush layers the Amphista sig set's sides have from bottom to the top:
(Link to picture)
5) If I want the same kind of sides I duplicate all the layers made in steps 3 and 4, flip them horizontally and drag them to the right side. If I want a different kind of right side I'll repeat steps 3 and 4 until I have the right side done as well.
6) Using the same method as described in steps 3 and 4 I make the bottom or top bar, whichever I feel like doing first and then either duplicate it and flip it over or make the other one manually if I want it to be different than the other one.
7) Once I'm done with all the brush planting I take a look of the overall look of the signature set and do some final tweakings or repositionings if necessary.
(Link to picture)
8) Breaking the picture in pieces
(Link to picture)
(Link to picture)
Now I have a finished signature set, but it's all in one big picture and can't be used like that. I make the background layer invisible so the actua thread background colour can be seen as the background once the set is in use and use the crop tool to cut the pieces according to the guides I've made. I save each separate piece as its own .png document to maintain the transparency.
9) Once I have all the four pieces of the signature set I upload them to my photobucket. Since the image addresses are so long I use bit.ly to shorten the image addresses and then place the short addresses to the correct places on the text frame I have for a signature set. All done! Hooray!
The text frame:
Code: Select all
[imgleft]left side image url here[/imgleft][imgright]right side image url here[/imgright]
[center][img]top image url here[/img]
Normal signature stuff is here
[img]bottom image url here[/img][/center]