Lara ([info]alohamora_icons) wrote,
@ 2007-08-03 08:37:00
Previous Entry  Add to memories!  Tell a Friend  Next Entry
Entry tags:tutorial

Gimp Basics

In my recent tutorial (here) I had a lot of questions on how to do things like 'set to screen' and 'duplicate layers' in gimp. I therefore made this walk-through of it which shows the basics for gimp. I do not consider myself an expert in any way but this will be good for those who are just starting out on gimp. This is basically just step by step of my last tutorial which can be seen here.  I hope that someone finds this tut helpful because it took me FOREVER! Feel free to join my journal if you like it and want more updates. This post is VERY IMAGE HEAVY!   If you have ANY questions feel free to ask.

From  to

If you already know how to use gimp or you use a differet program follow THIS TUT! I made it last week and it is the exact same thing!

1. Here is an icon and the layers box before I get started. The layers box is very important when making graphics. If you cannot see the layers box then go to DIALOGS/LAYERS or just Ctrl+L on your keyboard. Base credit goes to [info]dont_be_so_base 




2. Many times the first thing you do to icons is duplicate the base and set the duplicate to screen (screen lightens your base). However in this tut we are going to start out with levels. Levels can be found by going to LAYER /COLORS /LEVELS (confused? see this picture) Levels can lighten or darken a picture. It also can add more blue, red, or green to the image. We however are just going to use it to lighten the image. There are five different 'channels' in levels. They can be found in the drop down menu at the top. The channels are Value, Red, Green, Blue, and Alpha. The red, green, and blue add those colors to the image and value will lighten or darken the image. Since we want to lighten the image click value. (Just and fyi next to the drop down menu is a button that says reset channel, if you ever mess up just click that button and the image will go back to normal. ) 
Now you will see the word Input levels in bold and a graph underneath it. Under the graph is a bar with three arrows pointing. Under the three arrows are three boxes with numbers in them . See it? If not see here. I always use that middle arrow. If you move the arrow to the right then the image darkens. If you move it to the left, it lightens. Since we are following a tut it says to set the middle input at 1.72. To do this click on the number underneath the middle arrow and type 1.72. (See image 2) Click OK! That is all there is to it! 



3. According to my tut the next thing to do is raise the master hue/saturation. So to get the hue/saturation box go to LAYER/COLORS/HUE-SATURATION (confused see here). You will see a circle of colors with the word master in the middle. You should have master selected. Master is used to boost all the colors. If you just want to brighten the blues though you would click the blue bullet and the same goes for all the other colors.  Under that there are 3 lines with the words 'hue, lightness, and saturation' next to them. (confused?) What are these three things? I'll tell you. HUE= changes the actual colors of the image, I really never use hue. LIGHTNESS= lightens the colors. SATURATION= increases the overall saturation. I mostly use saturation and lightness on occasion.
The tut says to boost the master saturation depending on your picture. So drag the saturation tab to the right until your image looks good. It could be anywhere from 48 to 100. I thought mine was bright already so I only raised the saturation to 48. (see image 3) Click ok!



4. Now remember how I said that normally the first step you do when making an icon or graphic is to duplicate the base and set it to screen. Well in this icon it is step 4. No matter what step it is though I almost ALWAYS have a screen layer! So first we need to duplicate the base. How? Remember the important layers box? On the bottom of it is a button that looks like two sheets of paper, click it! (see here) Congratulations you have now duplicated a layer! Now we have to set the layer to screen. At the top of the layers box there is the word "mode" with a drop down menu next to it. Click the drop down menu, find the word screen and click it. (see image 4) See how the image is lighter? Yeah! If it is too light then you can lower the screen layers opacity. See the word opacity at the top with the line and the tab next to it. (see here) To lower the screen layer's opacity click the tab on the line and drag it to the left. You can also just type a number in the box next to the line. I set the opacity at about 85. (see image 4)



5. The next step is "Make a new layer, fill it with 003663 and set it to screen at 49.8. Duplicate that layer once."  That means we first must make a new layer. In the layer box there is a button at the bottom on the far left that looks like a piece of paper. It is used to make new layers. (see here) When you click it a box will come up, just click ok. You have now made a new layer. The next direction is to fill the layer with 003663. That is the code for a color. Copy the code and then click the colors button on the Gimp tool box. (see here)
When you click on it a box will come up. In the box are the words 'HTML Notation' with a box next to it. That is where you paste the code (003663). (see here) Click ok. The color will now show up on the tool box. Click and drag the color to the layer box and drop in the new layer. (see here) Now set the layer to screen using the drop down menu like we did earlier. Next change the opacity of the layer by selecting the 100.0 and changing it to 49.8. (see here) The next thing to do is duplicate that layer. We also did this earlier. Click the button that looks like two sheets of paper. Good job! You are ready for the next step. 




6. The next step says "Make a new layer and fill it with aed9f9. Set to burn 100. Duplicate that layer and set it to burn 90.2." We should know how to do this. It is like the previous step. We make a new layer by clicking the button with a single piece of paper on it. When the box comes up, click ok. Now copy the color code aed9f9 and click the color button on the tool box like we did last step. When the color box comes up paste the new code in the 'HTML Notation' box. Click ok. Drag the color from the tool box and place it in the new layer. This time instead of setting the layer to screen like before we are going to set it to 'burn'. You start off the same way click the drop down menu and instead of clicking screen click burn. (see here) Since it is already on 100 opacity we don't have to change it. After that it says to duplicate the layer. (You should be getting good at that lol) So click the button that looks like two sheets of paper. Since it is already on burn all you have to do is change the opacity to 90.2. 



7. This step's instructions are "Make a new layer fill with ffe6f6. Set to burn 100. Duplicate that layer."  Nothing new. So make a new layer (remember the button with one sheet of paper on it). Copy the code for the color ffe6f6. Click the color tool on the tool box and paste the code into the 'HTML Notation' box. Click ok. Drag the color from the tool box to the new layer. Next we must set the layer to burn (like last time). Click the drop down menu and click burn. Since it is already on 100, we do not need to change the opacity. The next thing to do is duplicate that layer, so click the button that looks like two sheets of paper. It does not say to change the opacity so leave it at 100. 



8. Now the step that everyone gets confused at, although it is not hard AT ALL! The instructions read "Now go to EDIT/ COPY VISIBLE and paste. Set it to multiply."  So do like the instructions say go to EDIT/COPY VISIBLE (see here)  Next you paste it. So you can go to EDIT/ PASTE or you can just Ctrl+V. Once you do that you will have to click the new layer button to paste it completely. (I don't know why!) Now set that layer to multiply. (The same way you set layers to screen and burn only you click multiply). I set my opacity to 40. If your icon is lighter you may want to set the opacity higher.



9. The final step is to make a new layer, fill it with fbdd8d and set to multiply. We know how to do that! Click the new layer button (the single sheet of paper) and when the box pops up click okay. Copy the code for the color and paste it in the 'HTML Notation' box. Click ok. Drag the color to the new layer. Set the layer to multiply. I set my opacity at 25. If yout icon needs more tan though you should raise the opacity. And thats it you are done! 



10. Saving. To save go to FILE/SAVE I always save my images as png . I think it is the best quality.




(19 comments) - (Post a new comment)


[info]flatters
2007-08-03 05:36 pm UTC (link)
I dont use GIMP. I've enver even seen it before.. But I see a lot of GIMP tutos and I think this is the best one i've seen so far.

(Reply to this) (Thread)


[info]alohamora_icons
2007-08-03 05:38 pm UTC (link)
hehe thanks!!

(Reply to this) (Parent)


[info]valliegurl
2007-08-05 08:00 pm UTC (link)
wow, you know you completely rock? i'm totally memming this so that if anyone asks, i'm going to direct them here. XD

(Reply to this) (Thread)


[info]alohamora_icons
2007-08-05 10:42 pm UTC (link)
hehe thanks. I was just getting tired of answering the same questions over and over. lol. I am thinking that I might make another one and instead of actually going through this tut just explaining each individual feature (since I didn't go through color balance or curves (although I am still not that great with curves myself)) but that depends on time and with school starting back up I am going to be busy!

(Reply to this) (Parent)


[info]appyangel94
2007-08-05 10:46 pm UTC (link)
Wow. I have GIMP but I'm still not very good at using it. I didn't know what half of the buttons were for or anything. I just looked at this because I was bored. It really helped a lot and I was able to understand it. The photos really helped. I was just wondering though, why do you have to keep doubling the layers? What would happen if you didn't?

(Reply to this) (Thread)


[info]alohamora_icons
2007-08-05 11:20 pm UTC (link)
The only difference duplicating the layers makes is that it makes the coloring stronger. Your image would still look fine if you didn't duplicate the layers. I am glad it helped if you have any more questions please ask!! I love to help!

(Reply to this) (Parent)(Thread)


[info]appyangel94
2007-08-05 11:24 pm UTC (link)
Thanks a bunch! I think I'm going to try some stuff later tonight after my mom goes to bed so I don't get asked 101 questions :) I'm sure I'll have another question sometime. Thanks again though!

(Reply to this) (Parent)


[info]kimnrowdy
2007-08-07 02:55 am UTC (link)
That was an excellent tutorial. I'm not new to GIMP, but I don't understand some of the more basic elements simply because there aren't many tutorials out there like this. Thanks so much for all your hard work. It's great and I learned a few new things. :)

(Reply to this)


[info]lupinsmoon12391
2007-08-10 02:18 pm UTC (link)
As someone really new to gimp (as in I downloaded it two days ago), this was SO much help. Thanks, it's really appreciated. Now that I know how to alter the color of images, I am a bit curious as to how to work with text on them, but this was great on the whole. Thanks!

(Reply to this)


[info]lotiel_vanya
2007-08-29 12:26 pm UTC (link)
I just got GIMP and I was really confused. You saved my life:D

(Reply to this)


[info]samy_10
2007-09-06 05:51 pm UTC (link)
It's the best tut I've ever seen. Thank you so much!!

(Reply to this)


[info]wrthy2bluvd
2007-09-16 03:47 am UTC (link)
Great tut! :) It's great for everyone, whether a new user or an experienced one. Thank you.

(Reply to this)


[info]wicked_jenny
2007-10-18 08:53 pm UTC (link)
Thank you so much! You can't imagine how grateful I am cause I just made my very first icon thanks to you;) I have been so sad cause I didn't know how do make icons. I had GIMP but my English sucks and I didn't know how to use it. Thanks to your step-by-step tut I made it! Thanks!!! I'm trying to make more icons tomorrow;)

(Reply to this)


[info]mon_visage
2007-12-26 08:41 pm UTC (link)
Thank you so much for this.
I just downloaded GIMP and had no idea what to do.
This tut. helped so much.

(Reply to this)

WOOW
[info]koshni66
2008-06-06 07:31 pm UTC (link)
i have never done ANY graphic stuff EVA..i just downloaded gimp and thought i wood try it out for once..sum1 gave me ur tutorial! ;) i did the whole thing with an Anime pic...it look kool but at the very end when i tryed to save it said "Your should be exported before it can be saved as PNG for the following reasons: PNG plugin cant handle layers...then it gave me to two choices
A)Flatten Image
B)Merge Visible Layers...i said merge...i hope i did the right thing..can u tell me exactly what i did?

(Reply to this) (Thread)

Re: WOOW
[info]alohamora_icons
2008-06-24 10:45 pm UTC (link)
I always use flatten image but either works.

(Reply to this) (Parent)(Thread)

Re: WOOW
[info]koshni66
2008-06-25 12:31 am UTC (link)
lolz u respond uber slow...but thnx anway :)

(Reply to this) (Parent)


[info]iwishiwerekerry
2008-10-17 11:28 am UTC (link)
WOW! This tut was amazing! I suck at GIMP but this was the first tut i was actually able to follow! You rock!

(Reply to this)


[info]picture2burn
2009-02-04 01:58 am UTC (link)
Great Tut! Kinda long, but really good :D
I dont use Gimp, but was able to follow in PSE6 ^^

http://i280.photobucket.com/albums/kk177/Stollen_Kisses/Twilove/My%20Work/twilightcapsscreens95.png

Final image :D

(Reply to this)


(19 comments) - (Post a new comment)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…