Jump to content

IPB


* * * * * 2 votes

Kronos' Gimp Tutorial


50 replies to this topic

#1 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 22 June 2011 - 11:12 PM

Ok, I'm going to try to type up an easy tutorial to make signature images like the ones I make using Gimp, a free software available online. If it seems hard to follow tell me and I'll edit it my best to make it more understandable. Click images to increase their size. Leave any complaints/questions/comments below. Thank you :)

What you will need

Gimp: Download Gimp here. Gimp is a free program a lot alike Photoshop except costs nothing and is more user-friendly and good for beginners.

A Render: You will need to have a render (the character in your signature). The best site for downloading renders is PlanetRenders. You will need to make an account but it's fast and easy. After you have registered and logged in, search the character you want to use, click the image so that it makes a new pop-up with the image. Save that image to a spot you will remember later.

Gimp Brushes(optional): Download Gimp brushes here. These will help you with Gimp and make for better sigs but aren't required. But I do highly recommend going to that link and downloading a lot of brush sets so you will have a variety. In order to get the brushes, you will need to have an unzipping program like WinRar. Once you have extracted the files, get the Gimp brush files (should have a picture of the Gimp mascot dog on file) and save these brushes to:

Windows: My Computer > Local Disk (C:) > Program Files > GIMP > Share > Gimp > 2.0 > Brushes

OSX: Users > username > .gimp-2.4 > brushes

Save the files (NOT the entire folder you downloaded) into the appropriate spot for your OS. (Note: There are usually more than one brush file for each download, move all of them to the appropriate section)

Things you should know

CTRL+Z = Undo (this will be your best friend)

CTRL+Y = Redo

CTRL+L = Brings up layers box

CTRL+T = Brings up tool box


Step 1

After you have opened Gimp, in the upper right corner of the screen, click File > New.

I usually make my signatures 500x150 (Height: 150 // Width: 500)

Your screen should look like this:
Posted Image


Step 2

Now we need to create a new layer to place our Render in that you got earlier. On the Layer box (The box labeled "layers" click the blank page on the bottom left corner of that box. It should bring up a "New Layer" box. You can rename this layer "Render" so you don't foget later but it isn't necessary. Make sure the box "Transparency" is selected.


Step 3

We are going to open that render we got from PlanetRenders. I chose Wolverine from X-Men.

In Gimp, in the upper right corner click File > open. And select the render you saved earlier. You should have a separate screen with the Render. Your screen should look like this:
Posted Image

NOTE: If your render is branded with a persons name from planet renders, you can edit it with the eraser tool to remove the watermark/brand.


Step 4

Once you have the render open, right click it (or shift click on "OSX) and click "Copy"

Minimize that window, and go back to your original Gimp screen. On your Transparent (Render) layer, right click (or Shift click on OSX) and put your mouse over "Paste as" then select "New Brush..." name the brush the name of your character and click ok.
Posted Image


Step 5

Now we are going to select the Paint Brush tool. Remember that you don't have to use the entire Render in the sig, do what looks better. Move the Scale bar in the tool box up and down to re-size the Render. Now place it on the render layer appropriately how you want it. Here is what you should have so far, your render on the render layer (make sure you didn't place it on the "Background" layer.
Posted Image


Step 6

Now lets work on that background, it's looking a bit dull. Click the background layer in the layer box so that it is highlighted. Now we are going to click "Filters" at the top of Gimp. then Render > clouds > Plasma. Move the turbulence up and down until it looks like what you want. Personally I like to stick to 1.0 or lower, but have done some work with over 1.0 and it isn't a bad thing. After you have done that, at the top of Gimp select "Colors" then go down and select "Colorize". Move the "Hue" bar to the color you like, then move around the saturation and lightness to fine-tune the color. I usually make the color of the background similar to the primary color of my render. So, here is what my sig looks like so far, and yours should be looking similar (with different render/color etc.)
Posted Image


Step 7

Now this is where those brushes from earlier will come in handy if you decided to get them. If not, you can use the pre-installed Gimp brushes.

Create a new layer that you would like to apply the brushes to. Make sure it is below your "render" layer and above your "background" layer. You can drag the layers up and down. Personally I suggest making a new layer each time you want to apply a new brush, so it will be easy to remove them or color them separately using the "Colorize" option from earlier. Now you are going to have to allow your creative colors to fly for the rest of this step :) place the brushes so that they go along with the Sig theme you had in mind.
Here's what mine turned out like (Definitely not my best, but an example non-the-less.
Posted Image


Step 8

This is the finish up step. Now you can apply your text that will contain your name. Click the "A" (text tool) in the tool box and place the text where it looks good on your signature. You can make the font larger or smaller with the options on the cool bar, and change the font. If you want too get more fonts, go to DaFont. Add the fonts to your computers font location (For windows it is in the Control Panel).

After placing your text, at the top of Gimp click "Filters" Then "Decor > Add Border" and add a border (I make mine black usually with x=2 and y=2).

And the final, finish up step is optional. Adding "Scan lines" They are a good finishing touch. click the "Bucket Fill Tool" and select "pattern fill" below in the options. Make a layer below your render and text layer and fill it with the can lines. The "scan lines" are will be called "striped fine" and will look like a bunch of horizontal thin lines in the pattern options.



You are finished!

Here was my result after the finish up steps:
Posted Image

I hope you find this tutorial useful, I put multiple hours into making this tutorial hoping to help people. My goal is to help people who want to make their own forum signatures and to help inspire those who have never attempted anything like this to start making signatures and other things.

Remember their are many more things you can do with filters and such in Gimp. This is just to show you how to make a basic forums signature.

Hope this helps ^_^

-Kronos

#2 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 22 June 2011 - 11:18 PM

awesome tutorial [UP]

I may get GIMP, sounds like it has some different things from Photoshop and all.
Posted Image

#3 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 22 June 2011 - 11:21 PM

View PostIts_JoKer, on 22 June 2011 - 11:18 PM, said:

awesome tutorial [UP]

I may get GIMP, sounds like it has some different things from Photoshop and all.

Thank you.

I use Gimp purely for signature making. I have Photoshop as well though.

#4 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 22 June 2011 - 11:23 PM

I've put so much time into learning Photoshop haha, I don't think I'd want to have to learn GIMP as well, but GIMP isn't too different from Ps, it just has a couple things here and there that are different. I have GIMP in Linux Mint, and Ps in Win7. I never use Mint though lol.
Posted Image

#5 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 22 June 2011 - 11:26 PM

View PostIts_JoKer, on 22 June 2011 - 11:23 PM, said:

I've put so much time into learning Photoshop haha, I don't think I'd want to have to learn GIMP as well, but GIMP isn't too different from Ps, it just has a couple things here and there that are different. I have GIMP in Linux Mint, and Ps in Win7. I never use Mint though lol.

Gimp has an easier to figure out UI and is better for beginners :)

But I prefer it over PhotoShop when it comes to making sigs.

#6 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 22 June 2011 - 11:31 PM

yea, the UI in GIMP is nice, easy for beginners and layed out pretty well. The UI in Photoshop looks cleaner imo though, more "professional looking". I'll have to try out making a sig in GIMP and see how I like it.
Posted Image

#7 Tyler11223344

  • Members
  • 758 posts
  • iPhone:iPhone 3GS
  • iPad:iPad 2
  • iPod:iPod shuffle, iPod nano

Posted 23 June 2011 - 05:48 AM

I prefer photoshop as well, but my school uses linux so i use gimp there, either that or inkscape. Good tutorial too!

#8 Kurupt

    *SK* All Day!

  • Donators
  • 10,367 posts
  • iPod touch:iPod touch 4G
  • iPod:iPod shuffle, iPod nano

Posted 23 June 2011 - 06:20 AM

I like how you used brushes on your bg inseat of a bunch of c4ds
Prefer photoshop but nice tut

#9 Vonix

    Animation Overlord

  • Members
  • 10,913 posts
  • iPod touch:iPod touch 4G, iPod touch 2G
  • Mac:iMac
  • iPod:iPod nano
  • Apple TV:Apple TV 2G

Posted 23 June 2011 - 06:38 AM

I use GIMP on my mac when i dont have flash or Photoshop :)
Posted Image Posted Image

#10 Tyler11223344

  • Members
  • 758 posts
  • iPhone:iPhone 3GS
  • iPad:iPad 2
  • iPod:iPod shuffle, iPod nano

Posted 23 June 2011 - 06:44 AM

Haha vonix, like your avatar!

#11 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 07:26 AM

View PostTyler11223344, on 23 June 2011 - 05:48 AM, said:

I prefer photoshop as well, but my school uses linux so i use gimp there, either that or inkscape. Good tutorial too!



View PostKurupt, on 23 June 2011 - 06:20 AM, said:

I like how you used brushes on your bg inseat of a bunch of c4dsPrefer photoshop but nice tut

Thanks guys :)

#12 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 07:32 AM

View PostKurupt, on 23 June 2011 - 06:20 AM, said:

I like how you used brushes on your bg inseat of a bunch of c4ds
Prefer photoshop but nice tut

BTW I've never used a c4d

#13 SoNyDiGiTaL

    Graphic Designer

  • Members
  • 3,423 posts
  • iPod touch:iPod touch 4G, iPod touch 2G
  • iPod:iPod classic

Posted 23 June 2011 - 09:40 AM

pretty cool :)

Posted Image



#14 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 01:38 PM

View PostSoNyDiGiTaL, on 23 June 2011 - 09:40 AM, said:

pretty cool :)

Thank you.

#15 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 23 June 2011 - 02:44 PM

what would be a good size for an avatar?
Posted Image

#16 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 02:53 PM

I do 200x140 as that's the max size allowed by iHMi :)

#17 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 23 June 2011 - 03:08 PM

aiight, I saw that the profile pic is only 150x150 :( so I'll make one 150x140 to fit both
Posted Image

#18 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 03:12 PM

View PostIts_JoKer, on 23 June 2011 - 03:08 PM, said:

aiight, I saw that the profile pic is only 150x150 :( so I'll make one 150x140 to fit both

lol yeah, I have a random profile pic from the internet. It only shows that on profile comments, friends, and blogs anyway.

#19 Its_JoKer

    http://youtube.com/zachrauchid

  • Members
  • 7,858 posts
  • iPod touch:iPod touch 4G, iPod touch 2G

Posted 23 June 2011 - 03:13 PM

I like mine to be the same everywhere, anyways I finished it, tried to add a border but Photoshop doesn't do that (or I haven't figured that out yet lol)
Posted Image

#20 Kronos

    Elite

  • Members
  • 9,090 posts
  • iPod touch:iPod touch 4G

Posted 23 June 2011 - 03:41 PM

Posted Image

Posted Image

;)