General Pictures Guidlines & Tutorials

[Takmadeus]

Hello.... as you may have read in the title, I will take advantage of the situation and I will teach you how to use the key features of the GIMP in a simple, yet didactic exercise.... or this I will make a simple sig, with step by step instructions and screenshots.....

PS: I would do a PS tutuorial, but I don't know how to use it, it is kinda hard to get, it is very expensive and there are already lots of tutorials for it, plus I haven't found any good tutorial of GIMP which is easy to understand, simple and effective

For this course you will need the following:

The GNU Image Manipulation Program

Tons of nice looking fonts

Some images to make it look good

that's it!.... once you get all of these, you can officially start the course (it will begin tomorrow), so stay tuned for updates. If you are using photoshop, well, many of the tools have the same function, so it may be similar, yet, consider that there are some differences in the way things are done from one program to the other (else I would be able to use photoshop as well )

[Takmadeus]

Well... let's get started...

first of all, we need to get familiarized with the GUI (that's the thing most users complain about), so, we have...

1. Tools window

2. Tool Options window

3. Layers, channels and paths window

Their names are self explanatory , but for the third one we may explain some things:

the tools window has the main tools, but not all of them.... for more advanced stuff (like coloring and the like), you may access them by right clicking in the workspace

The tool options window changes for EVERY tools you use... it is convenient to keep it open, as it will allow you to fine tune the parameters for what you want to do, and it is always good for you to customize your graphics

I will talk about layers, but not channels and paths until later..... and another thing... ALWAYS keep these 3 windows open.... never close them, as they are th ones you'll work most with.

and advanced thing: think of layers as a pack of transparencies..... if you write in a transparency in the back, it will be "covered" by the frontmost ones..... you may have as many layers as you want, but you at least should have one (the bottom one)..... my sugestion is: always keep the bottom one transparent, it wil save you a lot of trouble later , I'll explain you in the next part

[Takmadeus]

Okay, enough with the intro.... we better create an image soon enough, don't you think?

1. We begin with the typical file>new

2.then add the properties (filesize, if you want it in grayscale or RGB, and the color of the bottom layer..... as I told you, choose it to be transparent)

3. See the workspace?.... this is where you'll make your new sig

[Takmadeus]

Okay...., so what's the most important thing when making a cool sig?..... no, it is not the font, but you are close.... no, neither is the background r the pattern..... Yes! it is the images you'll use to give it a theme..... from experience, I have seen that many promising sigs have been wasted by a bad image...... so this time I took charge of it and decided to search some good images in google..... the topic?... well, Legend of Dragoon is my favorite RPG of all times.... so I guess I'll give it a shot

So after many coffees, lotsa cigarrettes and quite some time, I came up with the following candidates:

1. Rose.. I like her, dark, beautiful and cool

2. Dart.... this is a great pic of him, plus is quite clean, and it will be easier to get rid of that white background, to suit it to our needs...

3. Lavitz... this is my favorite guy..... but it will be kind of hard to use him since the background has too much details

4. Another great pic this time is albert.... it is as hard to clean as the previous one... *sigh*

I guess that's all for the moment, but it is a great variety of pics.... for a didactic expreience, I guess I'll pick the easiest one available... yep, Dart....

[Takmadeus]

Adding layers:

1. You now will put an use to that layer box..... just load that image you just picked in the GIMP...

2.right click in the bottom layer and choose "New Layer"

3. then make it a transparent layer....

4 and 5. move it to the bottom by highlighting it and clicking the down button

[Takmadeus]

Opps! didn't that last step work?..... well... it is because GIMP won't allow you to get rid of the bottom layer as long as it is treated like the bottom layer.....for it to work you must make it transparent, and it will treat it as a normal layer, so...

1. highlight the bottom layer

2. right click it and select "add alpha channel"

3. Now move it up with the up button!

Now it works

[Takmadeus]

Cleaning an image


We won't do any more layering for now, as this is just one a component image (an image that will be manipulated, pasted and and then manipulated again in the final work).... we will proceed to clean it, IMO, the most annoying and tiresome part of doing a sig

1. choose the top layer (the one with the actual image)

2. Choose the magic wand (aka Master cleaner )

now, this tool is one of the best to select regions of an image, and will simplify the selection in places that are hard to select, just remember, it is almost useless im parts with small details (sparks, or areas with too much colors and small portions of them), it will suit us well, as almost the only color we will have to get rid of is white (hence why i picked this image )

3. select the white color, or the areas you want to remove

4. right click and Edit>Clean... or just press Ctrl+K (personally I prefer this last method, as sometimes you have to do a really fast job, and clicking slows you down )

5. in the end, you'll see that now the picture is cleaned and its completely transparent. Yeah, those grey blocks in the background mean that it is transparent

TIP: when you need to finish quickly, use the rectangle selection tool to select big areas of the image, just be careful to not to take down any part of the image you want to preserve

TIP#2: when you see that the rectangle selection tool is too risky, and the magic wand is taking you nowhere, then it is time for you to use the lasso tools.... just zoom in, and selext those tough areas by drawing a selection that suits your needs

[Takmadeus]

Hmmm I ussually don't recommend masking in these kind of cleninfg process....
there is a better method which I already mentioned in the tips, just use the rectangular selection for big areas, that'll save you a lot of time.... then you must end up with a somewhat cleaner image... then it is time to use the lasso tool, and you just zoom the image and start cleaning it little by litte..... it is a tedious and slow process, but trust me, it will give you a lot of control.

when you end up with a quite clean image but unfortunately it has this annoying rebroder which is hard to take out with either tool, then just select the clean part, the right click and then Selection>Grow, then you choose how many pixels you want the selection to grow. That must make the selection bigger, while keeping the border..... and then you clean it

it sounds complicated, but it is an easy trick... I'll explain it better in the next class

[Takmadeus]

Okay... here's another chapter on cleaning

1. using the rectangular selection, take apart a big chunk of the image and clean it

2. after cleaning it, see how it changes.... see how much work would you have saved if we would have used a more complicated image?

3. there's still a tough place... look at that annoying reborder.... if we left it that way, the final product would look quite ugly, and we don't want that.... but using the lasso, or the magic wand is too hard in here

4, 5, 6. Use the magic wand, select the clean part (not the reborder), right click and Selection>grow.....

7, 8 just add the properties (this is a very delicate process, so be carefull to not to take a big part of the image ... once done, you'll instantly see how much did the selection grew

9. after cleaning it, you see a perfect border.... easy huh?.... you may notice that some small part of the image was lost, but don't worry, it isn't too significant

I hope that clears it enough

[Takmadeus]

Well... there's another thing... rather more complicated... but still works, plus gives you a lot of freedom to customize your selections

1. Normal selection: same as MS paint, once you select som other place, the current selection will dissapear

2. add to selection: when you select some area, it will become part of the selection

3. substract from selection: when you do some selection inside of the current selection, it will be unselected

4. intersect with current selection if you do a selection, and it touches or crosses the current selection, the resultant will be the common reas between selections

substract from selection may be of help in your case

[Xian]

BTW, there is a nice shortcut to adjust the wand threshold:

While the wand tool is selected, press and hold the left button on the area you want to select. Then while still holding the left button, move the mouse left and right to adjust the threshold.

Also, for situations where the wand doesn't work, the bezier (aka path) selection tool is an excellent choice. Much better than the lasso IMHO. It allows you to build complex selections step by step. It is also a great way to create objects as well, a very versitile tool.

[Ramsus K]

Another nice way to work with selections is using channels. This allows you to edit the selection as though it were a grayscale raster layer using the paint tools. Channels also provide a nice method for saving selections if you don't like paths.

Anyway, the most useful way of using channels is to make minor edits to a current selection. Here's how:

• Select something using any selection tool or bezier paths.
• Click the toggle quickmask button in the lower-left hand corner of the image window, right above the status bar and between the scroll bars (see below).
• This will convert the current selection to a temporary channel with red overlay at 50% opacity. You can edit the channel now using paint tools (white = selected, black = unselected).The red overlay represents what isn't selected.
• Click the button again to toggle it back to a selection.

[Xian]

Was pretty bored, so I put together a little tutorial on paths in case anyone
was interested ...

First thing to do is select the path tool (circled in the first shot), then create a rough outline by selecting several points (nodes) around the area you want to select. Don't worry too much about detail at this point, you can make alterations as needed.

Once you have your basic outline, select a node you'd like to adjust by clicking on it. Be sure you are also in "edit" mode by double-clicking the path selection tool to bring up the tool options dialog. Each node has a pair of handles you can use to manipulate the paths connected to it (as seen in the third shot). Drag the handles around a bit to get the hang of it.

Note that the handles are initially at the center of the node, so you will have to drag them out from the node to access them.

When the mouse cursor is above a path (the lines which connect nodes), it should become a "+" symbol. Click once with the left mouse button to add a new node at the current location. Don't worry if it's not exactly where you want it, you can move the node around afterward. You can also delete a node by holding down shift while clicking on it.

To move a node, first select "design" on the tool options dialog from before. Then simply drag the node to the desired location, the path will adjust automatically. Finally, once you're happy with the path you've created, click on "create selection from path" in the tool options dialog (circled in the sixth shot) to get your selection.

TIP: If the path is somewhat difficult to see on your image, create a new white layer and make it slightly transparent. That way you can see the image underneath, but also have enough contrast to see the path you are working on.

[Takmadeus]

OK, OK.... we are back in class

1. remember the image we just cleaned?... I am sure you practiced some more and applied the concepts used by Ramsus and Xian (great ones guys ). well... now it is time to go back to our old image...... we just....

2,3. resize the image we just used.... so we just do right click, Image>resize image, then we add the values we need (currently height, don't worry, it will automatically adjust the width )

4,5,6. this is the result, then we select all (right click, selection>select all), copy it (edit>copy) and paste it in our sig (edit>paste)

7,8. it will appear as a pasted layer in the layers tab.... so we just click on "new layer" to convert it into a proper layer

**hmmm as it was so small, I decided to cut the image and resize it a little, so it looks better , for compatibility's sake, I will keep working on my image.... as you may know for now, the resizing part before was for an educational purpose

[Takmadeus]

here comes the fun part .... where you'll apply your creativity

we'll start by adding the background....

1. decide how big the background will be, in my case, I want it to be 100 pixels high, and that the curvature in Dart's wings becomes the rightmost border

so obviously, what I will do is to inster a new layer which is 100 pixels high and 400 pixels wide (this is for the border to be covered by the wings

notice that it will appear in the top, and it won't move no mater what you do, well, the thing is that the GIMP does not allow you to move layers unless there is actually something in them.... so the trick is to paint it, move it and then clean it (remember, Ctrl+K)

2,3. I cleaned some more images and I will added them in the same procedure that I used to add Dart, and lowered the transparency level of them (to be barely visible)

4. of course that I will add another background, so I got some cool image in google and selected it, and as expected I pasted it and sent it to the bottom layer......

Now it is almost done

[Takmadeus]

Here goes the so promised update, so enjoy

1. decide how big the background will be, in my case, I want it to be 100 pixels high, and that the curvature in Dart's wings becomes the rightmost border

so obviously, what I will do is to inster a new layer which is 100 pixels high and 400 pixels wide (this is for the border to be covered by the wings

notice that it will appear in the top, and it won't move no mater what you do, well, the thing is that the GIMP does not allow you to move layers unless there is actually something in them.... so the trick is to paint it, move it and then clean it (remember, Ctrl+K)

2. of course that I will add another background, so I got some cool image in google and selected it, and as expected I pasted it and sent it to the bottom layer......

3. then I make the border, as this picture tends to be dark, then the most intelligent thing is to use a border that makes contrast with the sig, so I use the color picker to pick a color from dart's armor to use it as a border (and that way the border matches with the image )

so, how do I make a border?.... I just insert a layer that is 1 pixel bigger than the background image and put it behind, another trick is to duplicate the background layer and then paint it with the border color, then I just select all and shrink the selection by 1 pixel..... I will use the first method

Transparency and File Formats

The trick is to create a new layer containing NGEmu's background color, so it looks like it is transparent

there is another way to create this transparence... which is to leave the transparent part as it is... and then save it either as a gif or a png....

GIF: default format for animations or transparent images, it is ugly and has quite a low quality, plus uses a 256 color pallette (too small, considering other formats using 24 bit coloring which allows you to use millions of colors)

PNG: a rather new format featuring an almost flawles transparency algorithm.... has a regular compression. the bad thing is that the most used browser does not show png images as they are meant to be... yes, I am talking about IE.... other browsers like mozilla an opera show the images well...

[Strider]

In accordance to NGEmu's newly changed rules these signature limits are currently in place for NGEmu's forums.

As a guide signatures should not be larger than 100*500*20k for signatures hosted on ngemu, or 130*500 in dimension and 25k in filesize otherwise. Members who break these guidelines will have their rights to a signature removed.

If i see these rules being broken then consider this post a warning that I will personally take down said signature unless one of the other administrators here beats me to it. If you try to post up the same picture again it will again be removed but this time along with your right to *have* a signature. If your signature is removed you will either be contacted by a private message or your signature will have a *sig removed* tag on the bottom which you can later take out. Signatures must also follow our rules concerning What we mean by "adult material"

Now, all those pleasantries aside... on to the signatures.


Requesting Signatures and Avatars

If you wish to request a signature and avatar be made for you, or if you need your signature or avatar dimensions or file sizes changed; then visit the