You are not logged in.

Applications: [GameMaster: OPEN] | [Volunteer Testers: OPEN]


This forum will be permanently shut down on Friday 13.07.2018
Please copy or save all important information from old forum before they will be deactivated
We have moved to new board. https://forum.runesofmagic.gameforge.com/Come join us.

wolfowl77

Trainee

  • "wolfowl77" started this thread

Posts: 158

Location: Kentucky

Occupation: Hotel Desk Clerk

  • Send private message

1

Monday, June 13th 2011, 1:29am

RoM forum signature tutorial using GiMP

GiMP Forum Signature Tutorial


Required materials:

  • GiMP (available from gimp.org)
  • screenshot of your toon (it is easier if your character is in the foreground with some plain background, such as the walls of your house)
  • some imagination



Ok, first things first you're going to want to open your screenshot file using GiMP, which can be done by opening GiMP and going to File>Open then directing GiMP to your screenshot from there. I'm going to be using a screenshot of one of my guildies for this tutorial. Then what you're gonna do is create a new file for the sig by going to File>New.





A dialogue box with options will appear, for now just concentrate on the size which is limited by the forum rules to 400x120 pixels.






Which gives us this:






Now, reselect your screenshot image (you can do this by clicking on the image frame or what have you) and go to Edit>Copy Visible.






Now go back to your sig file and choose Edit>Paste as> New Layer






Selecting the move tool from the GiMP toolbox move the image around in the frame until you get your toon where you want it in frame. If the picture in the frame is too big to fit what you want in the frame you can scale it down using Layer>Scale Layer. Remember you can always cancel what you're doing or correct it using Edit>Undo <operation>.


Now, since GiMP has no filter for extracting the foreground from the image you're going to have to make a choice. If your toon is standing in front of a cool looking background and you like the image I'm going to suggest that you keep it. If you want a more stylized background there are a couple of ways to do it, I'll be showing you one of them.


Find the path selection tool in your toolbox, and what you'll be doing is creating a path around the area you want to keep. Each click of the mouse will add a new path anchor directly from where you placed the last one, so you can follow along the outline pretty easily:






Be sure to create a path all the way back to where you started from (say along the bottom of the image where the frame ends) and now you're going to create a selection from your path by going to Select>From Path.




Once that's done invert the selection by going to Select>Invert.

Now, select the eraser tool (you can scale the size up) and erase the image around your now protected toon. You should end up with something like this:





Now go to your Layers panel and hit the Create New Layer button:






You'll need to move this below your toons layer. You can make your toon invisible to make the rest of this easier by clicking on the eyeball next to the layer name. Make sure you've selected your new layer before continuing though.


Here is where your imagination comes in. Choose a brush and liberally do whatever to your new layer. Just make sure it's visually interesting. You can download custom GiMP brush sets from DeviantArt.com, I chose the same blood spatter brush that I used for my own sig. Once you've gotten what you want you're going to colorize it by selecting Color>Colorize.


Play around with the different values until you get something you like.


I ended up with this:






I felt the green went well with Aash's armor.


Making Aash visible again I have this:





Almost there but not quite. At this point you can also play around with the various filters on your background layer such as Blur or Lens Flare just look under Filter and make sure your layer is selected in the layer panel.


Because we want the toon to be identified as well as the guild he's in and whatever other information you want to include, we're going to add text. Simply choose the text tool, and select an area in the image for the text. A little dialogue box will appear where you can type in your text. Under the tool is where you can choose the font, font size, and even pick the color for your text.


I stuck with his name and guild affiliation.


Creating a border is pretty simple. Choose Select>All and then Select>Border and choose your border size in pixels (I wouldn't go past five though). You can then brush in whatever color you choose. For a nice effect you can create a stripe down the center. Simply create a new border by Select>All and Select>Border and choose a border of 3 pixels. Colorize your selection (like you did with the background). Then do it again only select a border of 2 pixels and brush your color back in. Voila, a nice one pixel stripe right down the center of your border :D


Now choose File>Save As, choose a file name and add .jpeg to the end of the name. This tells GiMP to save the file as a JPEG which will flatten the image (remove the layers) and save it in a format usable by the forums. Also be sure to choose the location for the file to be saved so you know where to look for it.

I ended up with this:





Now go to the RoM forums, log in, and go to User CP>Edit Signature and near the bottom there is a space where you can upload your new sig by browsing to it's location on your pc and hitting the upload button. Add any additional text you want (only one pic is allowed per sig though) and then hit save.


Enjoy your new sig!

2

Monday, June 13th 2011, 7:27am

Thank you for taking the time to post this. I am working on my custom sig now.

GarySandstorm

Professional

Posts: 656

Location: Cape Town: South Africa

Occupation: Engineering Technician

  • Send private message

3

Monday, June 13th 2011, 1:56pm

Nice Tut Al :D going to try this app sometime, My main problem with using photoshop is i can never get the sig to look the way its made before resizing to fit the 400x120 or 23kb max requirement for this site :(

Hopefully i can get gimp to give me the look i want :)

wolfowl77

Trainee

  • "wolfowl77" started this thread

Posts: 158

Location: Kentucky

Occupation: Hotel Desk Clerk

  • Send private message

4

Monday, June 13th 2011, 5:16pm

Quoted from "GarySandstorm;428368"

Nice Tut Al :D going to try this app sometime, My main problem with using photoshop is i can never get the sig to look the way its made before resizing to fit the 400x120 or 23kb max requirement for this site :(

Hopefully i can get gimp to give me the look i want :)


Sounds like you just need to work on your workflow. Photoshop has plenty of options for optimizing. I suggest you do the same thing I did here, create a file with the 400x120 dimensions and drop your pic in as a new layer.

Protip: It's easier and works better when an image is scaled down not up. Start with the best resolution on the original image you're changing regardless of the final resolution.

If anyone has any questions feel free to ask, I'll answer as best as I can.

Posts: 779

Location: USA

Occupation: Student

  • Send private message

5

Monday, June 13th 2011, 11:23pm

Dl for cool fonts: http://www.dafont.com/
:]

Nice tutorial Al.

Peryl

Intermediate

Posts: 313

Location: Elsewhere

  • Send private message

6

Tuesday, June 14th 2011, 5:36pm

Quoted from "GarySandstorm;428368"

My main problem with using photoshop is i can never get the sig to look the way its made before resizing to fit the 400x120 or 23kb max requirement for this site
For your white text, try adding a drop shadow to it so that the text stands out.

As for the size restrictions, the 23kb size is the harder one to meet. You can either resize the image to something a little smaller, or try converting it to a palleted image (index color). For the later, let the software optimize the pallet as much as possible, and also try different error diffusion settings.

Another thing to try would be to use a different image file format. A PNG file "might" give better results than Jpeg, and is needed if you want some transparent areas (for an example pic, see my sig image).

Quoted from "CharlieBananas;428536"

Dl for cool fonts: http://www.dafont.com/
Careful what you download from there (or other such free font sites). Some are for personal use only, while others have other restrictions, and others are completely free (in usage terms that is).

When browsing fonts on DaFont, you will see the type of license indicated on the right (also at the top of the page when viewing a particular font). If no license is given, it can be considered free though check inside the font's zip file for any extra license text.

Though it should be fine to use those fonts for creating your own signature images, you would need to install the font in order to use it and then it become too easy to use it elsewhere (such as a PDF or other such thing).

Just wanted to give a heads-up on that.
2013... The year from hell....

wolfowl77

Trainee

  • "wolfowl77" started this thread

Posts: 158

Location: Kentucky

Occupation: Hotel Desk Clerk

  • Send private message

7

Sunday, June 19th 2011, 4:47am

Nice catch on the font thing Peryl.

We don't want to go stepping on someone's toe, legally speaking. There used to be a font site called pizzaguy or something out of Denmark, but it's been so long I can't remember the name :(

wolfowl77

Trainee

  • "wolfowl77" started this thread

Posts: 158

Location: Kentucky

Occupation: Hotel Desk Clerk

  • Send private message

8

Wednesday, June 29th 2011, 2:10am

I'm gonna go an extra step here and provide some backgrounds for sigs using screens of the rom loading screens and wallpapers.
















9

Thursday, June 30th 2011, 1:39pm

lol i was thinking about taking some of the loading screen pics for a sig
Toon: Kithrong Class: R77/S72
Toon: Realkiller Class: Wd77/W70
Server: Osha Guild: Condemned