Tutorial: Preparing your avatars, banners... And maybe more with The Gimp [Archive] - Celebrity Loop Forums

scismondo

10-28-2005, 01:02 PM

**** find more tutorials here: ****
http://cmp-france.homelinux.org/l4n/images/l4n_banner.gif (http://cmp-france.homelinux.org/l4n/index.php?op=lang&lang=english)
The Gimp - OpenOffice - and much more... You can also write your own tutorials if you have knowledge to share!
(site currently in testing phase with only a few tutorials, growing slowly)

Hi all,

First of all, I suggest that a mod makes a sticky with this thread, as it will certainly be useful to a lot of people...

Ok lets go. As the title says, we will be working with The Gimp. It is a free, open-source, and multi-platform image editing program - btw, "gimp" means "G.N.U. Image Manipulation Program". You'll find it at the address http://www.gimp.org
I'm working on a Linux operating system, but everything I'll show here should be at 99.9% identical on all systems that The Gimp is available for. This includes Wind*** and MacOS of course.

***edit***
It seems obvious to me but not to everyone else... The Gimp is an open source app, which means its source code is available to everyone. But if you just want to use it, don't dl the source it's for the developpers! Download the binary version for your system.
***edit***

Once you have The Gimp installed, you can go on.

Part 1: preparing a simple avatar
We will be making a simple picture here, I'll keep the animated pictures for part 2.

Once you have launched The Gimp, you should see at least 2 windows, like this:

http://cmp-france.homelinux.org/gimp_tut/gimp.jpg

The "Layers" window isn't required right now, you'll need it later. You can close it if you like, you can still call it back when needed.
Now we will open the picture you want to use as your avatar... I won't tell you to use the File / Open menu I think htat's obvious!
You now have your picture in a new window. You have maximum dimensions to respect: 80 pixels wide and 80 pixels height. We'll resize it.
Here's my own avatar before resizing, it's dimensions are 120 x 106 pixels as you can see in the picture's title bar - too big!

http://cmp-france.homelinux.org/gimp_tut/tuxmoto.jpg

Now let's make a right click on the image itself... This menu appears:

http://cmp-france.homelinux.org/gimp_tut/scale.jpg

You click on Image --> Scale image, a new window should pop up...

http://cmp-france.homelinux.org/gimp_tut/scale1.jpg
<!> Note that I'm using the "cubic" interpolation method, always do this to get a better result. Your image will look nicer. <!>

The link between the two values "width" and "height" means that the proportions will be respected. We don't want to distort our picture! So just change one of the values and hit the "enter" key the second value should follow. Make sure you respect the limits then click on "scale". This windows disappears and you see that your picture has been scaled... Mine is now 80 x 71 that's perfect.

Now make a right click on your picture, the menu appears again, go to File --> Save, name your picture "whatever-you-like.jpg" without the quotes of course. Don't forget the ".jpg" and avoid any funny characters - spaces, dollars, etc...

Now that your picture is ready you still need to check the file size. The method to do that depends on your operating system, but basically your should be able to check that by selecting the file in your favorite file explorer - its size should be shown. Mine is 6kb, the limit is 35kb that's fine.

That's it! You now have your avatar, you just have to upload it, if you have respected all the limits everything should work.

See you tomorrow for the second part.

Seb.

Vick

10-28-2005, 03:15 PM

Seb,
Thank you so much for taking the time to post this for those of us who are clueless when it comes to this kind of stuff but who desperately want to learn.

I am really eager to learn about banners so I can't wait for part II of the class.

Until then,
take care and peace,
Vick

scismondo

10-28-2005, 03:32 PM

Thanks Vick :-)
I've seen that a lot of people here have difficulties with their avatars / banners... At least now they'll know how to do! I help where I can - and this is one of the areas where I have some knowledge...
And the required tools are available for free :-) Gimp is a serious opponent to some big commercial apps like Photoshop :D and he's not the only one of his kind!
Come back tomorrow at about the same time for the second part.

Seb.

Ryebeach

10-28-2005, 03:36 PM

Thanks so much for posting this tutorial Seb! This is going to be a great resource for our members. :) I also need to learn a bit more about banners/avatars and am looking forward to part 2 tomorrow.

Ozzie

10-28-2005, 03:38 PM

Damn good idea Seb.

With the GIMP being free (I have it running on my box......in both Linux and XP), you shouldn't have to worry about paying $200 or more for a good paint program. What's more, it's in many respects a better program than most......they don't call it the "poor man's Photoshop" for nothing.

I might suggest to Kathy that we have a specialised board setup to run tutes such as this......although it might be better to have it in the Q&A board. We'll see what happens.

1_charmin_scoty

10-28-2005, 03:48 PM

awww kooool now i can do mine :D
Thanks!!!!!!!!!!!

Luv Laura xxx

Vick

10-28-2005, 04:26 PM

Greay Idea Ozzie!!
It could even be a subforum of the banners board.

Maybe if we promise to do all our chores Mom ( I mean Kathy) will let us have this.
Vick

scismondo

10-29-2005, 04:40 AM

Are you ready?
I said I would talk about animated pictures in part II but I don't want to go to fast... So we'll make a still banner from 3 or 4 different pictures for now. This involves some skills (especially layers) required to make an animation anyway, so take it as a beginning!

Part 2 - Simple banner

First, keep in mind the dimensions and file size allowed: 600 pixels wide, 125 pixels height, 34.2 kb (filesize).
So wee need an empty image of the same size... We launch The Gimp, and through the menu File / New we get this window:

http://cmp-france.homelinux.org/gimp_tut/new.jpg

You just need to change the dimensions of your new picture, just forget the advanced options for now. Btw, when you see this kind of line (a triangle followed by some text), this means there's a hidden zone that you can show by clicking on that triangle.
Once you have changed the dimensions just click on "OK" and you'll get a new, empty image.

Now we need the components of our banner. I'll use 3 pictures of Alyssa, you can use whatever you like of course! But something tells me that you will all do the same :-) Open your picture via File / Open...
My pictures are too big for the banner, so I'll resize them (see Part 1 if you don't know how to do). I'll take care only of the height because it's the smaller dimension of our banner.
I now have on empty picture and a first picture of Alyssa I've resized. If you have closed the "Layers" window it's time to call it back now via the menu File / Dialogs. Your screen should look like this:

http://cmp-france.homelinux.org/gimp_tut/part2-2.jpg

If my picture of Alyssa looks smaller thant it should be (compared to the banner's height) that's because of the zoom value that you can see at the bottom of each image window:

http://cmp-france.homelinux.org/gimp_tut/part2-zoom.jpg

Now we need to take that picture of Alyssa and put it inside the banner. For this, make sure that the window containing the picture you want to copy is the active window (just click on its title bar if you're not sure), then use the key shortcut Ctrl + A (do not type the "+" sign of course :-) ). The whole image should be selected with a blinking frame around it. If you can't see that frame it means you have missed your selection, try again. If you see it you can go on with the next step: use the key shortcut Ctrl + C to copy it.

Now we have our picture in the clipboard - you can't see it, that's some kind of buffer zone where your computer stores the data you copy. We can now paste it inside the banner. To do this, click on the banner's title bar to make it the active window, then use Ctrl + V to paste the content of the clipboard. You should see this:

http://cmp-france.homelinux.org/gimp_tut/part2-layers-1.jpg

Note that in the "layers" window there's a new layer.

Maybe I should explain now what layers are...
I guess it's the same everywhere, when you were at school you must have used some of these transparent papers (don't know the english name) to copy a drawing using the transparency. You might even have used several of them superposed. Layers are exactly the same thing in The Gimp! You can reach any layer, work on it without affecting the others, hide some layers, show others, concatenate two layers, etc... That's a very powerful function! With it, we will be able to keep each element of our banner separated from the others.

Back to our work... Right now, the program doesn't know what we want to do with that picture we have pasted: do we want to concatenante it to the existing layer (the background) or make a new layer? That's why it is shown as a "floating selection".
We will make a new layer out of it. Just make a right click, in the layers window, on that floating selection, and say you want to make a new layer with it, like this:

http://cmp-france.homelinux.org/gimp_tut/part2-layers-2.jpg

Now we have two layers: the background, and a "new layer" that we will rename cause we don't want to get lost later. Still in the "Layers" window, make a double click on that new layer's name and rename it, then it "enter".
Our picture is right in the middle, maybe that's not where you want it... Just use the cross tool, from Gimp's main window, to move it wherever you like.
You can now close you original picture (the small picture of Alyssa in my case) without saving it because you certainly don't want to overwrite your original picture which is bigger... But don't close the banner of course!

scismondo

10-29-2005, 04:41 AM

You can do exactly the same with other pictures, here's my result so far:

http://cmp-france.homelinux.org/gimp_tut/part2-3.jpg

OK, time to eat for me! I'll come back later to continue.
We'll add some text, and maybe some blur too around the pictures. And why not a nice pattern in the background?
While I'm away, you should save your banner using the Gimp's own format. It will save all the layers separated - a "normal" image can't handle layers. We will make such an image at the end, but for now we need to keep everything clear. So make a right click on your banner, go to File / Save in the menu that appears, and name it "my-banner.xcf" (still no quotes of course, don't forget the ".xcf" part).

eilz7

10-29-2005, 06:18 AM

wow thanks seb for posting that i had no idea how to do it before! hehe
Alee
xXx

scismondo

10-29-2005, 06:31 AM

OK let's go further!
We'll add a 3D-like frame around our pictures. For this, we'll work on a new layer. This way we won't damage our pictures...
So, first, we need to add a new white layer. Make a right click on any existing layer, and in the manu chose "new layer". This window pops up:

http://cmp-france.homelinux.org/gimp_tut/part2-newlayer.jpg

Its size should be the same as your banner's size, no need to change it. You just need to change its type - we want it white, not transparent.
Once you click on the OK button, you should get this kind of result:

http://cmp-france.homelinux.org/gimp_tut/part2-newlayer2.jpg

In my case, my new white layer isn't on the top of the other layers. If this happens to you, just click on it with the left mouse button, don't release, and drag it at the top position. Now it should hide all the layers beneath it. We want to make some holes where the pictures are, in order to see them, but we don't know exactly where they are... No problem! We'll make our new white layer partially transparent for a moment. With that white layer selected, in the layers window, change its opacity value (1):

http://cmp-france.homelinux.org/gimp_tut/part2-opacity.jpg

now we can see our pictures!
Still with our white layer active, use the rectangular selection tool (2) to select one of the pictures. keep a margin, we don't want to see its borders. Result:

http://cmp-france.homelinux.org/gimp_tut/part2-selection.jpg

Now hit Ctrl + K and the corresponding part of the white layer should be deleted. Do the same for the other pictures and set the white layer's opacity back to 100%. Remove any selection by right-clicking on your banner, the in the menu go to Select --> None.
Now we can fill our white layer with a pattern. In the Gimp's main window, select the "Fill with a color or pattern" tool (1) then choose a pattern (2) and say that you want to fill with a pattern (3):

http://cmp-france.homelinux.org/gimp_tut/part2-pattern.jpg

scismondo

10-29-2005, 06:44 AM

Now fill the white layer with your pattern by clicking on it - in one of the white areas of course, not in one of the areas we have cleared!

http://cmp-france.homelinux.org/gimp_tut/part2-pattern2.jpg

Now we will add some bevel...
Right-click on our image - we still have our new layer selected - and in the menu that appears go to Script-Fu --> Decor --> Add Bevel.

http://cmp-france.homelinux.org/gimp_tut/part2-bevel.jpg

Set it to the maximum value:

http://cmp-france.homelinux.org/gimp_tut/part2-bevel2.jpg

Be careful, sometimes the Script-Fu windows may appear beneath the others windows.
Keep "Work on copy" if you don't want to modify your original picture. Click on "OK". This will create a new picture with the bevel. You don't see much difference right now, don't worry... That's because there's no shadows! We'll add some. Open the same menu, go to Script-Fu --> Shadow --> Xatch-effect:

http://cmp-france.homelinux.org/gimp_tut/part2-shadow.jpg

The default values should work fine. Click on "OK". Result:

http://cmp-france.homelinux.org/gimp_tut/part2-final.jpg

scismondo

10-29-2005, 07:09 AM

Don't forget to save your work now. If you have choosed to work on a copy when doing the bevel, then you must have two pictures - before and after the bevel. You can close the original picture without saving it, and save the one with the bevel and the shadow.

Now the easiest part - let's add some text...
In the Gimp's main window, select the text tool (1), choose your font and color (2):

http://cmp-france.homelinux.org/gimp_tut/part2-text.jpg

Then click on your image and add your text...

<!> Note: before doing that, make sure that the selected layer is the upper one, or your text will be placed below it, thus hidden. If you don't see your text that's certainly the reason. You can still move the text layer later but it's easier to put it on the top immediatly. <!>

http://cmp-france.homelinux.org/gimp_tut/part2-text2.jpg

When you click on "close" your text is ready. You might want to move it with the cross tool - be careful to put your mouse exactly on the text itself! The other areas are transparent, you would affect the underneath layer. It's easy to see, the pointer changes whether you are on the text or not. You might need to bring the layer with the text to the top for this.

That's it! Now you can save your picture two times (with File / save as if you want to change the name):

- As an XCF file ("mybanner.xcf") if you want to keep all the layers, in order to be able to work on it again later,
- As a JPEG file ("mybanner.jpg") to get a picture that you can use on the board.

When saving to the JPEG filetype, The Gimp will tell you that it needs to export you picture - no problem, just do it, and your picture will be saved! You will see a window asking you which level of quality you want to use: the lower the value, the more compressed your image will be, the smaller the file size will be...
Now you just have to check the file size to make sure it's not too big. Mine is 17.2 kb with a quality of 85:

http://cmp-france.homelinux.org/gimp_tut/banner_ss.jpg

Good luck!

Seb.

scismondo

10-31-2005, 05:02 AM

Don't worry guys I haven't forgotten you :-)
This evening we'll make a simple animation based on the banner we have just created. I'll write this in a few hours.

Seb.

Vick

10-31-2005, 05:24 AM

Seb,
Thank you so much for taking the time to spell this all out.
I can't wait to be able to sit down and try it.

With appreciation,
Vick

scismondo

10-31-2005, 05:54 AM

Seb,
Thank you so much for taking the time to spell this all out.
I can't wait to be able to sit down and try it.

With appreciation,
Vick

:D
Actually, it may sound paradoxical...
I have plenty of time as I'm unemployed, but I have a lot of work these days! Between these tutorials and... something else (sorry I can't talk too much of it here and now :p).
At least I have something to do!

scismondo

10-31-2005, 08:49 AM

Just to let you know, here is the result we will achieve:

http://cmp-france.homelinux.org/gimp_tut/banner_ss_animated2.gif

The filesize is 24kb that's below the limit of 34 kb.

See you later for the tut!

Seb.

scismondo

10-31-2005, 09:15 AM

Ok let's go... (they cancelled Stargate for today :mad: I wanna kill someone! We only have one hour of Charmed on saturday evenings instead of 2 (that's a crime!!) and now they remove my Stargate!!! And they've removed McGyver too that's unfair!!).

Part 3 - Animation

So... Let's see what we have, how the above picture is made:

- This is a group of pictures showing one after an other,
- 1st: the frame and 1 pic of Alyssa
- 2nd: the frame and 2 pics of Alyssa
- etc...

So we need to prepare each picture first.
We'll work from the banner we made earlier. Open the file that you have saved, you should get all your layers back - if you saved it in the Gimp's file type of course.
Remove the layer with the text for now. Just make a right click on it in the layers windows and choose "delete" in the menu. You should now have something like that:

http://cmp-france.homelinux.org/gimp_tut/part3-anim1.jpg

For the first picture of our animation, we want to see only one pic of Alyssa. We don't need to delete the others for this - we just need to hide them! Did you notice the small eye on the left of each layer's name? It lets you show or hide each layer at will. So hide the two layers that we don't need right now, you'll get this:

http://cmp-france.homelinux.org/gimp_tut/part3-anim2.jpg

and two pics of Alyssa hidden of course.
Now we have our first picture, we'll save it as "banner_anim1.jpg" (or whatever name you want, just don't forget to use numbers). Right click on the banner then File --> save as (to be able to change the name).
Then show the second picture - you should now have two pics visible, save again as "banner_anim2.jpg".
Same thing for the third pic. We now have the basis of our animation. We can close the file we're working on - we'll keep the xcf file intact in order to preserve all the layers.
Then we open again each one of the pictures we have previously saved (just use the File / Open recent menu from the Gimp's main window). Result:

http://cmp-france.homelinux.org/gimp_tut/part3-anim3.jpg

Now we will copy the pictures 2 and 3 into the first one as new layers. Select pic 2 by clicking on its title bar, use CTRL + A to select all, then CTRL + C to copy to the clipboard. Now select pic 1 still by clicking on its title bar then use CTRL + V to paste the content of the clipboard. You should see pic 2 above pic 1. Take a look at the layers window you'll see that you have a new floating selection: it's your pic 2. Make a right click on it (the floating selection in the layer window) and say you want it to be a new layer.
You can now close the original pic 2 without saving it. Do the same with pic 3. Result:

http://cmp-france.homelinux.org/gimp_tut/part3-anim4.jpg

You should be able to see each picture by hiding the above layers.

scismondo

10-31-2005, 09:47 AM

Now, as we want this to be animated, we need to define a length for each picture. You do this by double-clicking on a layer (in the layers window of course!) and wrting its length in milliseconds like this - I've chosen a length on 1500ms (1.5 second) for each picture but you can use the length of your choice of course. I've also renamed the layers, but the important part is the way the length is written:

http://cmp-france.homelinux.org/gimp_tut/part3-anim5.jpg

Now we can check our animation by right-clicking on the banner and going to Filters ==> Animation ==> Playback. You should see this window:

http://cmp-france.homelinux.org/gimp_tut/part3-anim6.jpg

Just click on "play/stop" and see the result!
You can then close this window. Now we will add our text...

It works the same way as before - make sure the selected layer is the upper one (or your text will be inserted below it and you won't see it), add each part of text separatly, this will make a new layer each time. Place your text with the cross tool. Then define the lenght of each new layer. My result:

http://cmp-france.homelinux.org/gimp_tut/part3-anim7.jpg

Note that the last layer has a longer lenght that the others - after this one the animation will go back to the begining, so I'm making sure every one will have enough time to read the text (here, 3 seconds).
You can check the animation again if you like. It's finished, now we need to save it, but it will be a bit more complicated than before...

If we save it now, it will make a BIG file! We won't be able to use it on SS. So we will:

1) Reduce the dimensions of our banner
2) Optimize our banner
and 3) reduce the number of colors.

ALWAYS do it in that order if you don't want to loose too much quality. We will loose some anyway, because of the filesize limit, but we will try to reduce the damage.

For the dimensions, we have done this before, see part 1 if you don't remember. I used a width of 500 pixels it's perfect for me. For you, depending on your banner, it might be different. Never forget that you can go back to the previous state by using CTRL + Z (= "cancel") and this, on several levels (you can cancel several times).

Now we need to optimize our animation to reduce the filesize even more. Right click on the banner, Filter --> Animation --> Optimize for GIF. You'll get a new window with the same picture. This is the banner we will save later - the previous one isn't needed anymore, but keep it just in case you want to do the previous step again (if your filesize is finally too big at the end you'll probably want to go back to step 1, resize a bit smaller and do the optimisation again).

For the number of colors, we'll change the color mode of our banner. Right click on it, go to Image --> Mode --> Indexed:

http://cmp-france.homelinux.org/gimp_tut/part3-anim8.jpg

I used a palette of 100 colors instead of the default 256 to reduce the file size.

Now our animation is ready we can save it. Of course we will save the optimized one that's obvious (I say that just in case you have kept the previous one). Right-click on the banner, File --> Save and name it "my_banner.gif". The GIF file type has some options, a window will pop up asking you if you want to save your picture as a still image or an animation... Of course you want an animation! Then click on "Export", a new window appears just click on "OK" and that's it!
You can open it in the browser of your choice to see your animation. You just need to check the file size. If it's too big there are 2 things you can change: you can make the dimensions smaller (the resizing step above, just before the optimisation) and you can reduce the number of colors.
My own file is now 33.1 kb that's allright (limit 34.2 kb):

http://cmp-france.homelinux.org/gimp_tut/banner_ss_animated3.gif

hollymariefan

11-09-2005, 09:08 PM

gimp rulz!!!! thanks seb!!!

Grey

11-10-2005, 12:28 AM

Okay, don't think that I'm stupid, but I don't know how to install The Gimp onto my computer. I went to the website you listed but I just don't get it, I am what you may call "compute illiterate".

scismondo

11-10-2005, 05:48 AM

Okay, don't think that I'm stupid, but I don't know how to install The Gimp onto my computer. I went to the website you listed but I just don't get it, I am what you may call "compute illiterate".

You must first download the version of Gimp for you operating system - what are you using? Windows? MacOS? Linux? Something else?
Once downloaded,
- with Windows you should just have to click or double-click (depends on your setup) on the file,
- With MacOS I don't know, I've never had a Mac in my life,
- With Linux it depends on your distrubution.

Tell me more about your setup, please. But if you're using Windows you should try to find someone else to help you, cause I haven't used that **** in more than 4 years...

Seb.

PS: I never call someone stupid ;)

****edit****
Of course - that's obvious for me but maybe not for everyone else - The Gimp is an open-source app, which means that everyone can download, study, improve its source code... But if you just want to use it, don't download the source code, download the latest binary version for your operating system!

scismondo

11-10-2005, 05:48 AM

gimp rulz!!!! thanks seb!!!

:D:D:D

My pleasure.

Grey

11-10-2005, 03:50 PM

I use Windows, but I am just going to quit because this is just like reading Chinese to me.

scismondo

11-10-2005, 03:55 PM

I use Windows, but I am just going to quit because this is just like reading Chinese to me.

lol, don't give up that fast :-)
First, download a binary version of Gimp from www.gimp.org . And if I used you this word, that's because they use the same on the site :-) So use the "download" link on the left, and download the binary version of Gimp for Windows - just like it's written!

I'll be nice... Here's the direct link to the download for Windows:

http://gimp-win.sourceforge.net/stable.html

You have 2 things to download and install. Just read the page.

Seb.

Grey

11-10-2005, 04:51 PM

Thanks a lot, I got it installed, you are a great help.

scismondo

11-10-2005, 05:34 PM

Thanks a lot, I got it installed, you are a great help.

You're welcome.

Grey

11-11-2005, 03:31 PM

I made a banner, Thanks A Lot Scismondo!

http://i3.photobucket.com/albums/y79/Charmedno1fan/alyssabanner1.jpg

scismondo

11-11-2005, 03:42 PM

I made a banner, Thanks A Lot Scismondo!

Great! But please call me "seb" :-)

trinity

11-29-2005, 09:15 AM

cool! thanks seb
trinity
xXx

scismondo

11-29-2005, 11:41 AM

cool! thanks seb
trinity
xXx

Thanks :D
Now you must show us what you will do with these tuts!

Grey

11-29-2005, 01:34 PM

Do you like my new banner? vv

scismondo

11-30-2005, 06:40 AM

Do you like my new banner? vv

It seems that you have forgotten something :D File size!
Try to reduce its dimensions and/or reduce the number of colors.

Grey

11-30-2005, 09:21 AM

I fixed it.

scismondo

11-30-2005, 09:31 AM

Nice :)
Maybe you should try to soften the edges on the 2nd one.

scismondo

12-13-2005, 02:34 PM

OK guys, I'm quite bored tonight - nothing on TV, and I had only 1 eppy of MacGyver to watch, that's over...
So we'll make an other nice little banner, based on transparency and blending.

First, we will make a backgroung for our banner, from a big pic of Alyssa. It must be big enough to let us select a small part of it as our backgroung.
Select the crop tool (1), define roughly the aera you want to keep (2) and make precise modifications if required (3). You can use the handles of the aera you've selected to move it afterwards. Two of them let you move it, the two others let you resize it.
Don't forget the limits - 600 wide, 125 height. These are only limits, you can do smaller of course.
When you're satisfied click inside your selection or on the button "crop".

http://cmp-france.homelinux.org/gimp_tut/banner2-1.jpg

You should get a smaller image with only the part of the picture you've selected. It's our background.
Now, as we are going to add things on it, we don't want that background to be too "present". For this, we'll add a new white layer (I won't tell you again how to do, it's in the previous lessons), and make it 50% transparent. Result:

http://cmp-france.homelinux.org/gimp_tut/banner2-2.jpg

That was the easy part. Now we'll add a couple of smaller pics on each side, and combine them with our background.
Opening two pics, resizing them and copying / pasting them into our main project as new layers shouldn't be too difficult. If you don't know how to do, again, it's in the previous lessons.
So far here is what I have (they're not combined yet):

http://cmp-france.homelinux.org/gimp_tut/banner2-3.jpg

Now let's combine them.
The idea: a layer mask is a component that lets the masked picture beneath it appear depending on its state. So our two pictures will be more or less visible depending or their respective masks.

Select one of the layers that contains our small pics. Make a right click on it and go to "Add layer mask". A dialog box will appear, select a white mask and click "OK". The preview in the layers window should change:

http://cmp-france.homelinux.org/gimp_tut/banner2-4.jpg

You'll notice that you can click on each preview. To work on a mask, you must activate it by clicking on its preview. It should then have a white border like in the upper picture.

Now we'll fill it with a gradient. Remember that for a mask, black = transparent and white = opaque.

Select the "Fill with a gradient" tool (1), select a gradient (2) - I'll use a simple black and white gradient but feel free to try the others - and make sure it's applied in normal mode (3), linear shape (4).

http://cmp-france.homelinux.org/gimp_tut/banner2-5.jpg

scismondo

12-13-2005, 03:01 PM

Now we can apply that gradient on our mask.
A gradient has a starting point and an ending point. You define them by clicking on the starting point, and without releasing the left mouse button, draging your pointer to the endding point. Then you can release. They can both be inside or outside the picture you're manipulating. You can apply your gradient in the direction you want. In my example, if I apply it like this (left) I'll get the result on the right:

http://cmp-france.homelinux.org/gimp_tut/banner2-6.jpg

You can try several times, for the moment, each new attempt cancels the previous one.
Now we'll apply our mask by right-clicking on the layer, then selecting "Apply layer mask". The mask's preview should desappear.
I'll make a second mask on the same layer to apply the same effect in an other direction. You can do it as many times as you like. Just don't forget to apply the mask when finished. Same thing with the other small pic. Result:

http://cmp-france.homelinux.org/gimp_tut/banner2-7.jpg

You should know how to add some text... But we'll make a nice logo effect out of it.

<!> WARNING: If you haven't done so already, it's important to save your work NOW, before applying the logo effect. Some of these effects can't be cancelled. <!>

First make sure your text layer has the same size as your banner if you don''t want it (the banner) to be resized. For this, right-click on the layer that contains the text, and go to "layer to image size".
If your text layer isn't on top of the other layers, then drag it to the top now.

In the banner, make a right click on your text - on a letter, it's important, not between two letters - , go to Script-Fu ==> Alpha to logo and pick one. I choosed "Starbust", so I have a color to choose. Each effect can have its own options window. Be careful, sometimes the Script Fu windows may appear beneath other windows. If you have slected a Script Fu effect, but don't see anything appearing, then its window is probably hidden by a bigger one.

This particular effect inserts a white layer below my text, thus hiding my banner - no problem, I'll remove that white layer, and... Tadaaaaa!

http://cmp-france.homelinux.org/gimp_tut/banner2-8.jpg

Now save it.

- In XCF format if you want to be able to work on it again later,
- In JPG format to get a file that you can use here.

Seb.

hollymariefan

12-13-2005, 07:32 PM

oh nice -- I will have to try this :D If I can't follow these steps then you can make me a Holly banner right? :)

I can send you the pics *ermmm* I mean after I try it of course :D

Good tutorial Seb!

scismondo

12-14-2005, 03:13 AM

scismondo

12-14-2005, 06:27 AM

Here is an other example made with the same techniques.
This time I've also used the "Artistic ==> Cartoon" filter to get the drawing-like effects.

http://cmp-france.homelinux.org/123.gif

Those who would like to study the source, here's the XCF file:

http://cmp-france.homelinux.org/123.xcf

Seb.

charmed*cabbage

12-21-2005, 07:36 AM

wow Seb, these tutorials are great!! Nice job! Im already a banner maker, but some of the tips you have included are helping me! When i get a new computer im definately going to download the gimp, it looks like a real alternative to photoshop! Thanks Seb!

maggiegrl

12-23-2005, 07:14 AM

Lyssa_fan_0703

12-23-2005, 12:09 PM

scismondo

12-23-2005, 12:16 PM

hello to all here. i have a problem, i am from vienna, my english is not so good,

who can help me, because, i want to have a avatare and a banner with the so famouse alyssa milano, is this possible, because, i had so much problems to registry here, but now i am here, i hope someone can help me

If you already have the pictures you want to use, go to User CP then Edit Avar and Edit Signature.
If your pictures aren't ready yet, read the tutorials all the instructions are there!

Seb.

scismondo

12-23-2005, 12:23 PM

woo hoo! i did it, i made my very first banner!!! i was just curious how do you soften the edges cause that would make my banner perfect!!! it isnt brilliant but let me know what y'all think!

http://i7.photobucket.com/albums/y252/mags005/alyssa.jpg

Nice.

I'm not sure of what you call "soften the edges", but if you're talking about round corners, do this:

1) Select the rectangle selection tool,
2) In its options that appear once the tool is selected, there's one to make round corners - it's called "feather edges". You can customize the amount of "rounding".
3) In your picture, select the part you want to keep. You should now have a rectangle selection with round corners.
4) On the pic, make a right-click, go to Selection --> Invert selection. Now the part selected is the one you don't want to keep.
5) Hit Ctrl + k and the selection is deleted. Your banner now has round corners.

Of course this will work only on one layer. If you still have a set of separated layers, then start by flattening the image by doing a right-click on any layer. you can also merge only some layers the same way.

Seb.

scismondo

12-23-2005, 12:25 PM

wow Seb, these tutorials are great!! Nice job! Im already a banner maker, but some of the tips you have included are helping me!

Thanks.

When i get a new computer im definately going to download the gimp,

Why wait?

it looks like a real alternative to photoshop! Thanks Seb!

It is. And he's not the only one of his kind! A few examples: the well-known OpenOffice, Scribus, Cinelerra, Blender, Nvu, ... They are all members of the same family!

Seb.

gnulinuxman

01-04-2006, 02:29 AM

It's great to see another Linux user here...

I've been one for almost two years, and it's been great. It's surprising how the ideals of free (as in freedom) software are not widely known outside of the computer geek circles. Thanks, Seb, for helping spread the word. (No, I am NOT Richard Stallman...)

If spending absolutely NOTHING on all your software AND getting full control over it looks too good to be true, head over to http://www.ubuntu.com and take a look.

PS: Yes, it is VERY possible for someone to be a major computer geek and an Alyssa Milano fan... (and to share many of her passionate interests). My fiancee is very similar to me in interests (a female computer geek and feminist humanitarian--gotta love her), so there are at least two people in this world with these VERY diverse interests.

scismondo

01-04-2006, 02:49 AM

It's great to see another Linux user here...

I'm not the only one... I know at least two other persons here who use Unixes (I don't want to be too restrictive). The difference is that I use ONLY* free software, and I say it.

I've been one for almost two years, and it's been great. It's surprising how the ideals of free (as in freedom) software are not widely known outside of the computer geek circles. Thanks, Seb, for helping spread the word. (No, I am NOT Richard Stallman...)

LOL! :D

PS: Yes, it is VERY possible for someone to be a major computer geek and an Alyssa Milano fan... (and to share many of her passionate interests). My fiancee is very similar to me in interests (a female computer geek and feminist humanitarian--gotta love her), so there are at least two people in this world with these VERY diverse interests.

Three.

*: well, I have to admit that I have the Flash plug-in installed, shame on me! :D

hollymariefan

01-06-2006, 04:46 AM

*: well, I have to admit that I have the Flash plug-in installed, shame on me! :D

yeah -- shame shame on you ;)

scismondo

01-06-2006, 09:31 AM

yeah -- shame shame on you ;)

That's that Win XP user who didn't have any other solution than using a Linux PC to read that damn movie the other day who says this? :D:D:D

hollymariefan

01-06-2006, 02:25 PM

That's that Win XP user who didn't have any other solution than using a Linux PC to read that damn movie the other day who says this? :D:D:D

oh really!!! Well just so happens I am that XP user who is trying to learn Unixes/Linux so :P to you.

scismondo

01-06-2006, 02:28 PM

oh really!!! Well just so happens I am that XP user who is trying to learn Unixes/Linux so :P to you.

If only I wasn't so far!! I'd take care of that :rolleyes:;)

Seb.

hollymariefan

01-07-2006, 06:19 PM

If only I wasn't so far!! I'd take care of that :rolleyes:;)

Seb.

Promise ;)

scismondo

01-08-2006, 03:44 AM

Promise ;)

It would be my pleasure. Well, you know the story, if you give me computers to build and open-source software to install, I'm happy!

mantisbh

02-15-2006, 06:23 PM

scismondo

02-16-2006, 02:56 AM

You have no idea how much this has helped me thanks so much for taking the time out and
explaining how GIMP works and I am honored by your ability to share your wisdom please keep it up and I just wanted to thank you personally.... if you have any other advice I would be a willing student....

Thanks again....
love you all always.

mantis

I'm glad you found it useful. This was the objective.
There should be more tutorials on my website... But so far I didn't really take the time to write them, except a small introduction to OpenOffice. But I will certainly do so, so take a look at it from tme to time! (just click on my banner).

Seb.

Cally

02-18-2006, 05:44 PM

scismondo

02-19-2006, 03:43 AM

Hi Seb.
Thanks for the excellent tutorial. I've just finished my banner, but I can't figure out how to upload it as my signature. Can you please point me in the right direction.
Thanks again - you're a star. :D
Cally

It must be hosted somewhere - I have my own web server, some here use free image hosting services, etc...
Then just go to User CP / Edit Signature and insert an image using your banner's address.

edit: if you don't see the form's buttons go to "Edit options" and choose "Enhanced interface" in the last box.

Seb.

Voltair

02-21-2006, 01:56 PM

nice tutorial, thanks helping me. Where can i find NVU tutorial?

scismondo

02-21-2006, 02:03 PM

nice tutorial, thanks helping me.

Great.

Where can i find NVU tutorial?

Using Nvu is as easy as using a word processor. But this doesn't mean that you'll be able to write good code just because you know how to click on a button... Personaly I Nvu only for 10% of my work when I need a quick-made piece of code. You need to find some good (x)HTML tuts if you want to start in web-developping. The only links I have are in french, but I'm sure you'll find some easily - Google is your friend!

Seb.

Ami_future_actress

04-22-2006, 12:04 PM

Hey seb,

you know when i make a banner, the lines between the pictures are still there. like this one:

http://i56.photobucket.com/albums/g178/CexiAmi666/BuffyBannerBlend.jpg

could you tell me how to blend them in or get rid of them,OR something?!?!?!?!?

Ami_future_actress

04-22-2006, 12:30 PM

Hey Seb, what do u think to this banner?

http://i56.photobucket.com/albums/g178/CexiAmi666/FriendsBanner.jpg

Ami
x-x-x
(by the way my designer copyright name is Elina)

_DTB_

07-04-2006, 07:01 AM

So you can animate in GIMP aswell? if so, thats pretty nifty. Although I'm too used to Photoshop to convert :D.

gnulinuxman

07-10-2006, 11:30 PM

So you can animate in GIMP aswell? if so, thats pretty nifty. Although I'm too used to Photoshop to convert :D.Yes, you can! I made my avatar in the GIMP, for example.

But whatever, keep yourself on the chains of corporate greed. I like the GIMP.

gnulinuxman

07-11-2006, 12:05 AM

_DTB_

07-22-2006, 04:37 PM

Yes, you can! I made my avatar in the GIMP, for example.

But whatever, keep yourself on the chains of corporate greed. I like the GIMP.

Was that a dig at me being a photoshop user?...cause I'm a proud user at that. Photoshop is the most professional image creation/manipulation software I have come across. It can do anything but animate (hence the addition of ImageReady).

Photoshop is awesome :cool: .

kmh big fan

07-28-2006, 07:00 AM

Hey Seb, great tutorial, thanks for taking the time to to explain it to us:D

i have one problem when making my banner

Its size should be the same as your banner's size, no need to change it. You just need to change its type - we want it white, not transparent.
Once you click on the OK button, you should get this kind of result:

http://cmp-france.homelinux.org/gimp_tut/part2-newlayer2.jpg

this window doesnt not appear on mine when i click the OK button, what do i do now then?

thanks

kerri-marie
xxx

kmh big fan

07-28-2006, 07:16 AM

scismondo

07-28-2006, 07:21 AM

oh i got it up now:p

but now when i go to drag the layer on to the banner i have made it doesnt work, the new layer just moves above or below my banner, so what do i now?

kerri-marie
xxx

PS sorry for asking you all these silly questions :o
Of course it won't go over your banner :D
It's an other workspace. The purpose of doing it partially transparent (at the next step) is to let your banner show through it. That way you can work on the new layer while seeing your banner below it, but you can't damage the other layer(s), and you can access each part individually.

Seb.

kmh big fan

07-28-2006, 08:26 AM

oh thanks Seb

god i feel so stupid lol:o

thanks for explaining it :)

kerri-marie
xxx

Star_20

08-11-2006, 07:30 PM

Wow! this thread is pretty Cool! thanks for the tips!:D

andriugalaxy

08-13-2006, 09:47 PM

Of course it won't go over your banner :D
It's an other workspace. The purpose of doing it partially transparent (at the next step) is to let your banner show through it. That way you can work on the new layer while seeing your banner below it, but you can't damage the other layer(s), and you can access each part individually.

Seb.

;) nice your gimp work !!!!!!

larondaA26

11-03-2006, 08:07 PM

Is this avatar okay, if not please tell me.:)

Mariah

11-07-2006, 05:32 PM

Seb,

Thanks alot for posting that !:D That helps me alot !:D

Love,
Maureen.

gnulinuxman

03-03-2007, 01:39 AM

The best companion to the GIMP is Inkscape! http://www.inkscape.org

I use it to draw my cartoons. :)

scismondo

08-05-2007, 08:45 AM

Hi all,

I've just launched a new tutorials site... Everyone can write tutorials and share his knowledge; So don't hesitate to write something if you feel it could help people!
You'll find it in my signature. Don't get stopped by the name, it's not a Linux-only site... I intend to cover subjects like OpenOffice, backup, Internet use, etc...
There are just a few tutorials for now (check the stats out) but I'm writing new ones slowly - and I hope to get people to write some!

Seb.

|ouch|UV|C-HS}

09-23-2007, 05:29 AM

Thanks for all your hard work!!
you have helped me a lot!!!

scismondo

09-27-2007, 07:59 AM

Thanks for all your hard work!!
you have helped me a lot!!!

You have seen nothing yet :D
Keep an eye on my new tutorials site. I don't have much time to take care of it right now, but I still intend to add new tutorials whenever I can.

Seb.

Lori_Lou

11-19-2007, 07:45 PM

Thank you so much for the information. I just downloaded Gimp 2.4.1 a couple of hours ago and have had the chance to play around with it a little bit, and now I am wondering what took me so long.:)

I haven't done much with layering yet, the toolbars on this are a little different that in your screenshots, so I am trying to get it figured out, but I have been trying out some of the other tools.

http://i242.photobucket.com/albums/ff202/LoriLou_photo/Keysgimp.jpg

Thanks again, I will try to make something more impressive with more pictures when I get the chance.

Lori

Lori_Lou

11-19-2007, 09:40 PM

scismondo

11-20-2007, 07:17 AM

Ok, now I need some help:

I am trying to make a banner with more than one picture. I have followed the instructions to pasting my pictures into the banner, when I do they just stack on top of each other and I can't figure out how to separate them....

Help please

Thanks,
Lori

... Layers, my dear, layers!
When your paste the first picture, Gimp doesn't know what to do with it. It's a floating selection. If you don't tell it what to do with it, the next time you'll paste something it'll paste it over the first one since you're not giving it any other option... You're actually telling it you want to replace the 1st one.
You must put each new picture in a separate layer, then even if they are one over the other, you'll be able to move them.

Seb.

Lori_Lou

11-20-2007, 08:54 AM

Ok, I thought I was putting it in layers....that's why I am so confused:rolleyes: .

Hmmm......

I will try it again.:) I'll let you know...and thanks for the quick response, I'm glad to know you are here for technical support!

Lori_Lou

11-20-2007, 10:28 AM

Oh my goodness!! I got it, it's amazing what trying something after a night of sleep will do!!:o

scismondo

11-20-2007, 11:00 AM

Oh my goodness!! I got it, it's amazing what trying something after a night of sleep will do!!:o

Yup, bingo!
I know something about it :) - I sometimes spend hours trying to find why some function of my new application doesn't work and that's when I go to sleep that I find the solution lol! Sometimes if I was not reasonable I'd wake up at 4am to continue my work lol...

Lori_Lou

11-20-2007, 03:21 PM

Seb ~ you have made a fan of me!!!!

I am so excited, I wish I had all the time in the world, I feel like I have a new toy and I want to play with it all the time now!!

I made a banner with some pictures of my kids playing in the leaves and sent it off to the family to enjoy.

This is great, I am so happy!!:)

scismondo

11-20-2007, 06:23 PM

Woah my first fan! :D
If you ever find time... This is just a beginning!
The Gimp offers lots of possibilities. But it isn't the only one of its kind! You can find open source applications (http://en.wikipedia.org/wiki/Open_source) for about everything you like... Not even talking about your operating system!
Here are just a few examples... These are all FREE and open-source:

Audacity: make audio editing like a pro! (I used it to mount all the audio parts of that movie we made for Alyssa's birthday a couple of years ago).
LiVES: Need to make some video editing? Maybe mount your last vacations movie? Create realtime effects? Adobe Premiere is outrageously expensive? No problem! LiVES is for you.
MPlayer: tired of all those junk video players you have? MPlayer will read just anything: MP3s, all kind of video files, DVDs, ...

And these are just a few examples. Audacity and MPlayer at least are cross-platform, MS windows versions are available. For LiVES I'm not sure but it's a possibility. They're all easy to find with a small search.

Seb.

Lori_Lou

11-30-2007, 10:40 AM

Hey Seb, when you have some time can you provide me with some technical assistance?

I have been trying to figure this out and am stuck, I'm sure it's possible with GIMP to remove an image from a picture and place it on a different background...I just can't quite get there...

So for example, I have this picture:

http://i242.photobucket.com/albums/ff202/LoriLou_photo/oaklandraiders_1976_16829351.gif

I would like to remove Alyssa from the picture and place her on a different background.

Then I would like to remove her from this picture and also place her on the new background.

http://i242.photobucket.com/albums/ff202/LoriLou_photo/dodge.jpg

Thanks for your help, I really appreciate it.:D

scismondo

11-30-2007, 12:43 PM

Hi,

For the 1st one, use the magic wand selection tool to select the background, then invert the selection (right click - selection - invert). Now copy and paste.
For the 2nd one it's a little bit more tricky as the background is not uniform; You can either use different selection tools (magic wand several times and / or color selection tool, note that for each selection tool you can choose if the new selection should replace the current one, be added or removed from it - you will obviously want to add each time) or use the "make path" tool to draw a path around the part you want to keep, to then transform that path into a selection (if I remember correctly you do that by joining the 1st and last point of the path, or there may be a button for this in the tool's options).

Note that in the new Gimp 2.4.2 there is a tool to extract the foreground. This should replace everything I've said above. You may want to updage your installation of Gimp.

I'm answering only quickly cause i'm quite busy, if this is not enough let me know.

Seb.

scismondo

11-30-2007, 12:46 PM

-- note to everyone who asks for help --

Since I have now updated my Gimp version to the new 2.4.x series, I can't help anymore people with a 2.2.x version - mainly because a lot of things have changed, see my answer to Lori_Lou above, there's a new tool that lets you do quickly a task that required several minutes before with Gimp 2.2.x.
So if you ask for my help, you'd better update your Gimp installation first - cause my answers may not be completely adapted to a 2.2.x version.

Seb.

Lori_Lou

11-30-2007, 01:52 PM

Mariah

11-30-2007, 01:59 PM

scismondo

11-30-2007, 02:27 PM

Can I do this with Gimp 2.2.13 ?
Yup. You just won't have that new tool I was talking about... But you can use the other techniques. This said, do not hesitate to update your version of Gimp, there are some very interesting improvements!

Note for Lori_Lou: I've just tried it... It's quite impressive; First you define roughly the part you want to keep. The part you intend to remove should turn dark blue. Then you refine your selection - this time by clicking on the part you wish to keep - until all the background is dark blue. You can switch between the background / foreground selection modes from the tool's options... Then I think there must be a button somewhere to change the result into a selection.

Seb.

Mariah

11-30-2007, 02:38 PM

Yup. You just won't have that new tool I was talking about... But you can use the other techniques. This said, do not hesitate to update your version of Gimp, there are some very interesting improvements!

Note for Lori_Lou: I've just tried it... It's quite impressive; First you define roughly the part you want to keep. The part you intend to remove should turn dark blue. Then you refine your selection - this time by clicking on the part you wish to keep - until all the background is dark blue. You can switch between the background / foreground selection modes from the tool's options... Then I think there must be a button somewhere to change the result into a selection.

Seb.

Thanks a lot for your reply, Seb !:) But what are the other techniques ?

scismondo

11-30-2007, 02:46 PM

Thanks a lot for your reply, Seb !:) But what are the other techniques ?

... Read again my first reply to Lori_Lou today on the previous page! ;)
Only the new background removal tool requires Gimp 2.4.x

Mariah

11-30-2007, 02:48 PM

... Read again my first reply to Lori_Lou today on the previous page! ;)
Only the new background removal tool requires Gimp 2.4.x

Ok ! Thanks a lot !:)

Lori_Lou

11-30-2007, 03:27 PM

Yup. You just won't have that new tool I was talking about... But you can use the other techniques. This said, do not hesitate to update your version of Gimp, there are some very interesting improvements!

Note for Lori_Lou: I've just tried it... It's quite impressive; First you define roughly the part you want to keep. The part you intend to remove should turn dark blue. Then you refine your selection - this time by clicking on the part you wish to keep - until all the background is dark blue. You can switch between the background / foreground selection modes from the tool's options... Then I think there must be a button somewhere to change the result into a selection.

Seb.

I've been trying the foreground selection tool, it's pretty cool the way you can select an image, but that's where I have troubles, I'm not sure what to do with it once I have it selected.:o
Again, no rush if you are busy, this certainly isn't a priority.