Hi, I'm Tibby and this is my graphics tutorials page. Graphics are a big part of Neopian life for some people, and making them can be so much fun! The big, popular graphics packages can be very expensive but there are alternatives. Most PCs/Macs come with a basic graphics editor (such as Paint on Windows) but sometimes that just isn't enough. There is another option, however - the GNU Image Manipulation Program (GIMP for short) is a powerful, free piece of software. It's different from a lot of other packages and this is why a lot of people can find it difficult to use. It's definitely worth the effort. You can create just about anything you want - blogs, layouts, animations, logos, buttons, badges - and I'm going to be writing tutorials and tips to show you how.
Saturday, 26th July 2008
I've put up a new tutorial for creating a King Altador blog. Hopefully it'll be helpful to some of you. The next tutorial will be a shop banner.
Let me know if you find these tutorials useful, or if you have a request for something that isn't there =)
Saturday, 19th July 2008
I've just put up the first intermediate tutorial which goes through making an animated glitter image. It doesn't explain every tiny step in as much detail as a basic tutorial, but give it a go and let me know what you think!
I haven't decided what tutorial to put up next, but it'll probably be tutorials for a simple blog and a more complex banner. Let me know if you have anything specific that would make a good tutorial.
One last thing - if you want to quickly see the end result of any tutorial, just scroll down to the bottom.
Monday, 14th July 2008
I've written a new beginner tutorial on making a simple banner. Hope you like it =)
I'm taking requests for tutorials, so if you have something you'd like to know about, let me know. I can't promise I'll have time to do every single one, but I'll do my best! If you have any shorter questions that don't really need a whole tutorial, ask away - I'm hoping to put up a few pages of tips and frequently asked questions soon.
The next tutorial I have planned is a simple animation tutorial - GIMP does animation too!
Sunday, 13th July 2008
I've been writing the first few tutorials over the weekend and now they're finally finished! These are really just for beginners but if you already know the basics, keep checking back because I'll be adding more basic, intermediate and advanced tutorials soon.
If you have anything good or bad to say, questions, corrections or anything else drop me a neomail.
AwardsHere are the awards that I've received from people that found this pet page helpful =)
What is GIMP?
GIMP (GNU Image Manipulation Program) is a free program for image manipulation tasks such as photo retouching and image creation. It can be used for basic tasks like adding text to an image, or for more advanced work such as a full Neopets layout. It can also be used to create animations.
It has a bit of a different layout to other popular image manipulation software and this can put some people off. That's why I decided to start a series of tutorials to help people become acquainted with its many features.
As you probably already know, I am unable to provide links but you should be able to find the homepage for the GNU Image Manipulation Program using your search engine of choice.
At the bottom of the homepage, there is a menu which can take you to the Features page, the Screenshots page and various others. We're interested in the Downloads menu item, which has three sub-items - Unix, Windows and Mac OS X. I'm going to assume that we're using Windows (those using Unix-based systems will probably know what they're doing, and the process for installing on a Mac is similar to Windows).
Choose the Windows link under Downloads. You can have a read over this page, but what we're interested in is the Installer link. Click there and then under the Base Packages heading, click the Download link. This should start the download.
Note that if you want the help files, they are located on this same page a little further down. Look for "English language only" download (unless you want a different language, of course). Once you have installed the main program, you can run this download to install the help files. This is completely optional but may be helpful when you're playing around.
Once the GIMP installer has finished downloading, run the file (note that it's always a good idea to use your anti-virus software on any newly downloaded files - even if they are from a trusted site). Most people can click the Install now button on the installer, but if you want control over some of the slightly more advanced options (such as the installation directory) you can click the Customize button.
Finally, start GIMP.
Using the software
The software will start with two windows (as well as a Tip of the Day window). The first one, which will say GIMP at the top, is the main application window where you can change preferences and select tools and colours. The second window should say Layers, Channels, Paths at the top. From now on I'll call these windows the main window and layers window respectively. Closing the main window shuts down the whole program. You may end up closing the layers window by accident but you can get it back by going to the main window and selecting File - Dialogs - Create New Dock - Layers, Channels & Paths.
Now, let's have a go at creating an image. Go to File - New in the main -blocked- Leave all the settings as they are and click OK. A third window (the image window) will appear. You can rearrange these three windows and their positions will be remembered for the next time you use the program - I like to have the main window on the left, the layers window on the right and the image window in between.
In the main window, choose the Paintbrush () tool if it's not already selected. You can hold your mouse over the icon for each tool to see a tooltip which gives the tool name. Below the tool icons, the options for the specific tool appear. For now we'll leave all the options alone. In the image window, click and drag the mouse to paint across the canvas.
Excuse the messy mouse-writing!
This is just a simple introduction to get you started. Next up will be tutorials on creating and saving basic graphics!
A Basic Graphic
This is just an introduction to the various features of the GNU Image Manipulation Program and at the end you will have a cute little graphic like the one on the left. Things I'll be talking about include:
I will try to be as newbie-friendly as possible but if something isn't quite making sense, or could be explained better, just drop me a neomail.
How to make a basic image
Step 1 - Acquire your image
Drawing things from scratch is time consuming, so I often use Neopets' own images. Today I'm using a picture of the tooth faerie which you can get by going to the backgronds page and searching for tooth. I always use the largest images available (1024x768) because you can always easily make it smaller. Open the file by either double clicking the image file or by going to File - Open in the GIMP main -blocked-
Step 2 - Crop the image
First, a bit about the bottom bar in the image -blocked- It tells us loads of useful information.
The numbers (3, 49) tell you where on the image your mouse is in pixels, starting from the top left at (0, 0). The drop-down list that says "px" tells you which unit you're working in - px means pixels and is the most commonly used unit. The next drop-down box is the zoom level. If you hold your mouse over this box and use your mouse scroll wheel, you can zoom in and out quickly. The final part of the bar is a context-sensitive status bar. It displays information based on what you're currently doing.
In the main window, choose the Rectangle Select tool (). Click and drag anywhere on the image to create a box that is 200x190 pixels. The status box at the bottom tells us how big our box currently is. Now that we've drawn the box, we can easily move it by clicking and dragging it. We can also change the size by clicking on one of the four corners and dragging.
Move the box so that it surrounds the faerie's face. Then right click anywhere on the image and choose Image - Crop to selection (you can also do this using the menu at the top of the image window).
As you can see, cropping just chops off any undesired parts of the image.
Step 3 - Add a glowing effect
Now we'll take a look at layers. Layers a bit like a stack of different images on top of each other. Any transparent parts let the layer below show through.
In the layers window, there will be a list of all the layers in your image. At the moment there is only one layer called Background. Click on the layer and duplicate it by using the duplicate button () below the layer list or by right-clicking the layer and choosing Duplicate Layer. Now double-click on the newly created layer, type in Glow and press enter to rename the layer. Renaming your layers makes it easier to keep track of them.
Making sure that the Glow layer is selected (the currently selected layer has is highlighted in grey), go to Filters - Blur - Gaussian Blur... in the image -blocked- Set the Horizontal and Vertical blur radius to 15 and click OK. This just defines how much to blur by - you can try playing with these numbers to see how they affect the blur. Once the blur is applied, you will only be able to see a blurred version of the image.
Now we're going to see how layers are more than just a stack of images on top of each other. Layers can also affect the layers below them. In the layer window, there is a Mode drop-down list above the list of layers. Using this list box, change the layer mode to Screen. Like any drop-down list box in GIMP, you can either use the arrow at the side to see the list, or hold your mouse over the box and use the scroll wheel to go through the list items. Now turn down the Opacity to 60 either by using the slider, the text box, or the up/down arrow buttons.
To see the difference that the Glow layer makes, you can temporarily switch off that layer by clicking on the eye symbol next to the layer in the layer list. Click the box where the eye symbol was to make the layer visible again. Being able to toggle layers on and off like this is really useful for checking to see what difference a layer makes in the image.
Step 4 - Add a border
The Filters menu in the image window allows you to add a whole lot of different effects to your images. The gaussian blur that we used before is one commonly used filter, but there are many more - in fact, after you've completed this image, you might want to open up an image and just try some of the filters out.
Now, however, we're simply going to add a border. Select Filters - Decor (at the bottom of the menu) - Add Border... to bring up the option window for adding a border. For the border X and Y sizes, I used 2. For Border colour, click the blue box. Choose black either by using the colour selector, or by typing 000000 into the HTML notation box, then click OK. Leave the delta value at 25 and click OK.
Your border will have been added to the outside of your image, making your image slightly bigger than it was before. If you check the layers window, you should also see a new layer called Border-Layer. This means that if you ever wanted to remove the border you could right-click on the border layer and select Delete Layer, or use the Delete icon () under the layer list.
It might be a bit hard to see the border because the image will have a yellow and black dashed line around it which shows the edge of the layer (the layer isn't always the same size as the image). You can switch off this line by unchecking View - View Layer Boundary.
Step 5 - Save your image
First, a quick note about file formats. When I save an image that I want to use on the web, I usually save two copies. The first one ends in .xcf (this is known as the file extension) which is a type of file that saves all your extra data such as your layers making it easier to come back to an image and change it. The second copy is usually .gif, .png or .jpg which only save a flattened version of the image - this is the copy I put online_
Select File - Save As... in the image -blocked- Type in the name you want, followed with .xcf (it might already have .bmp - get rid of that if it's there). If you don't want to always have to remember the file extension to use, you can click the little plus sign beside Select File Type (By Extension) at the bottom of the Save Image dialog. You can then select the type of file to use. Choose the folder you want to save the image to and click Save. Now you can do the same thing for a GIF version of the image. A dialog box will appear when saving as GIF - just click the Export button on the first dialog, then the Save button on the next.
It can be a bit tricky to know when to use a specific file format so if you're feeling lost drop me a neomail. If enough people show an interest, I'll make a short guide on image formats.
This tutorial will show you how to create a simple banner with writing on it. Banners are great for advertising your shop or petpage, and don't have to be too complicated to look good. For the tutorial, I'll be making a Snowager banner.
Here are the things I'll be using:
- Colour picking
- Text in an image
- Bevel and shadow filters
- Manual borders
Making your banner
Step 1 - Getting a background
First of all, we need some image to go in the background. I found a nice big Snowager background like the one on the left in the backgrounds section. Make sure you get the biggest one available (1024x768).
In the image window, either press Ctrl+a or go to Select - All to make a selection of the whole image. Now press Ctrl+c or go to Edit - Copy.
In the main window, go to File - New. At the top of the dialog box is a Template drop-down list - choose Web banner common 468x60 from this list and press OK. In the image window of the newly created image, press Ctrl+v or choose Edit - Paste. The Snowager image we copied is far bigger than the new image so you'll only see the top corner of it, but don't worry, we'll be sorting that out soon.
In the layers window, there will be a new layer called Floating Selection (Pasted Layer). To make this into a normal layer instead of a Floating Selection, we need to right click on the layer in the layers window and go to New Layer. You can get rid of the Background layer that was there when we created the image by selecting it and clicking the delete button (), or by right clicking the layer and choosing Delete Layer. Once you've done that it might be a good idea to rename the Pasted Layer to Background by double clicking on it.
Now choose the Move tool () in the main -blocked- In the image window, click and drag the mouse to move the Background layer. You'll notice that although we can only see a small part, the whole original image of the Snowager is still there. Move it so that the Snowager's eyes are showing.
Step 2 - Adding text
First, a quick note about colours. In the main window, you can see the current foreground and background colours as shown on the right. The arrows in the top right swap the two colours and the mini black and white squares reset the colours to black and white. Clicking on either of the colours brings up the colour changer which lets you drag some sliders to change the colour, or enter the HTML notation of a colour. The foreground colour is probably the most important one as it is used by most of the tools.
In the main window, choose the Colour Picker tool (). This is a very useful tool which lets you choose any colour from your image. Click on a light blue area of your image, and the foreground colour will change to the colour you clicked on. The colour I'm using here is c6f6ec in HTML notation (you can make sure you got the same colour by clicking the foreground colour box and typing it in for yourself).
Select the Text tool () in the main -blocked- The tool options in the main window will change so that you can now choose a font. The font I'm using is called Bell Bottom Laser and is probably not on your computer by default. It's freely available online and although I can't provide a link, a quick search will probably find it - otherwise just choose a font that you already have. Choose a font size of 42px (note that this may be too big or small if you aren't using the same font as I am - you may need to tweak the size slightly).
Click somewhere near the top left of your image, type The Snowager Rules! into the dialog box that pops up and then click Close. Now choose the Alignment tool () from the main window and then click on your text, making sure you actually click the text itself and not the background behind it. You'll know you got the right layer if there are little boxes at the corners of your text layer. In the tool options for the Alignment tool (in the main window), make sure that the tool is aligning relative to the image then click the Align centre () and Align middle () buttons to put the text in the middle of the image. Remember that if you're unsure about which buttons to click, hover over them for a second to see what they do.
Step 3 - Adding a text border
Create a new layer by clicking the new layer button () or right clicking in the layers list and choosing New Layer. In the dialog that pops up, change the name to Text Border and make sure that the Layer Fill Type is Transparency so that the layer is created completely empty. Move the new layer in between the background and the text, either by clicking and dragging it in the list or by selecting the layer and using the up/down arrow buttons (). Your layers should now look like the image on the right.
Next, use the Colour Picker tool () to choose a dark blue from the background. Make sure that the background layer is highlighted when you do this otherwise it won't work. The colour I chose was 246383 in HTML notation.
Now, right click on the text layer at the top of the layer list and choose Alpha to Selection. This will make a selection in the shape of the text. Click on the Text Border layer to select it. In the image window, choose Select - Grow..., enter 2 and click OK. Then go to Select - Feather... and enter 1 before clicking OK. Feathering a selection makes the edge softer. Now go to Edit - Fill with FG colour (Ctrl+,) followed by Select - None (Shift+Ctrl+a) so you can see your handiwork.
Step 3 - Bevel and shadow
Right click the top layer (the text) and select Alpha to Selection again. Make sure that the text layer is selected, then go back to the image window and choose Filters - Decor - Add Bevel.... Set the thickness to 1 and make sure that the two checkboxes are unticked before clicking OK. Thanks to the filters, it's as simple as that to add a bevel effect. Select - None (Shift+Ctrl+a) to get a proper look.
We can also use a filter for creating a shadow. Make sure that the Text Border layer is highlighted in the layers list, then go to Filters - Light and Shadow - Drop Shadow... in the image -blocked- Change the X and Y offsets to 4 and the blur radius to 10. Make sure that the colour is black, the opacity is at 80 and the Allow resizing checkbox is unticked, then click OK.
There will now be a Drop Shadow layer below the Text Border layer. Select this layer and change the opacity to 65. You could have entered this in the Drop Shadow dialog box, but now you know that filters often leave room for change after they've been applied. Look out for extra layers that are created as a result of a filter being used.
Step 4 - Add a border
Now we're going to add a border to the image. Instead of using the filter like in the Basic Image tutorial, we're going to do it manually. This is because the filter makes the image larger to make room for the border, whereas I want the image to stay the same size and have the border cover the inner few pixels.
First, create a new layer at the top of the list and rename it to Image Border. Choose the same dark blue that you used for the text border (HTML notation: 246383). Make sure that View - Show Layer Boundary in the image window is unchecked to make it easier to see what you're doing. Still in the image window, press Ctrl+A or go to Select - All and then shrink the selection by 2 pixels by going to Select - Shrink.... Set the selection feathering to 0 by going to Select - Feather... and entering 0.
We can invert this selection to select a thin border around the image instead of the middle of the image. Choose Select - Invert (Ctrl+i) then fill the selection with the foreground colour by going to Edit - Fill with FG Colour (Ctrl+,). Finally go to Select - None (Shift+Ctrl+a) to see the result.
Here's my final image.
Hope you liked the tutorial, feel free to try this out with other images/colours/text. Part of the fun of making graphics is just playing around, seeing what you can come up with!
As usual, if you have questions, comments, corrections or anything else, don't hesitate to neomail me =)
Glitters are so cute, and making one is the perfect way to learn about animation in GIMP! Here are some of the things you'll learn about in this tutorial:
- Merging layers
- Selecting by colour
- Noise filter
Making the Glitter
Step 1 - Get your base image
I'm going to use the picture of a baby Lupe. To get this image, go to All Pet Colours at the Rainbow Pool. When you have found the baby Lupe image, right click it and select Save Image As... and choose a location. It might be helpful to change the name from "2.png" to "babylupe.png" in the File name box before clicking Save.
Open the image in GIMP.
Step 2 - Add some glitter
The Lupe should be on a chequered background. The areas where you can see the cheques represent areas that are completely transparent. If you save an image as .png or .gif, you can preserve this transparency so that when the picture is on a webpage, the background shows through the transparent parts.
While this can be a good thing, it can cause problems when you put an image online_ Create a new layer and make sure it's at the bottom of the list. Select white as the foreground colour then, in the image window, select Edit - Fill with FG Colour. If the image is going to be used on a webpage with a different coloured background, use that colour instead of white. Now right click on the current top layer and select Merge Down. There will now only be one layer in the layer list.
We don't want the whole thing to glitter, so we need to make a selection around the areas we want. For the tutorial, we're just going to make the blue parts glitter. Selecting these areas is actually pretty easy if we use some of the tools that GIMP provides.
First, zoom in to 400% by using the drop-down box on the bottom of the image -blocked- Now choose the Colour Select tool () and in the tool options on the image window, change the Threshold to 20 and make sure the Select by box says Composite. Only the Antialiasing box should be checked. Because you zoomed in, you can probably see that there's a lighter blue and a darker blue. Click on the dark blue with the Colour tool to select all dark blue areas of the image. Now hold down the Shift key and click on the lighter blue part to add to your previous selection - if you don't hold down Shift, your previous selection will disappear. You should now have the blue parts selected. Don't worry about small parts getting missed out or included.
In the layers window, duplicate the Background layer four times by using the duplicate button or by right clicking and selecting Duplicate Layer. You should now have five layers, all the same. Make the top four layers invisible by clicking the eye icon next to each one.
The selection should still be active in the image -blocked- Make sure that the bottom layer is selected and then go to Filters - Noise - RGB Noise... and change the settings to look like the image below.
Step 3 - Animate the glitter
In the layers window, make the next layer up visible and then select the layer - making the layer visible does not automatically highlight the layer! The selection from before should still be active. We're going to apply the filter again, but instead of going through the menu again, GIMP provides a shortcut to repeat the last filter that was used. At the top of the Filters menu in the image window it should say Repeat "RGB Noise (this will change depending on the last filter you used). Click there and it will apply the noise to your image again. You can also press Ctrl+F when the image window is selected to repeat the last filter even more quickly.
Repeat the above for the last three layers, making sure that you highlight each before applying the filter.
Now we have five layers with noise on them. When we turn this into an animation, each of these layers is called a frame, and each frame is displayed one after another. We can now use GIMP to play back our animation by going to Filters - Animation - Playback... and pressing the Play button.
Step 4 - Save the animation
First save an .xcf version - this will save your layer data so you can come back and edit it easily. To do this, go to File - Save As..., and enter a file name (eg. lupeglitter) followed by .xcf.
Now save a .gif version. The Export File dialog box will pop up. Select the Save as Animation option and click Export. You will now need to select some options. Match them up to the image below and click Save.
There's the end result. The more frames you have, the better the animation will often look. For those of you who feel adventurous, give it a try with a different image. When selecting by colour, play around with the Threshold of the Colour tool - a higher threshold will result in more areas being selected.
Any comments, questions or anything else, just neomail me!
King Altador Blog
This tutorial should help you in making basic blogs. I won't be talking about coding them, this is really intended for people who already know that or can figure it out for themselves. I'll be focussing on the graphics side of making a blog.
Things I'll be doing include:
- Layer opacity
- Text, text borders and text shadows
- Bump mapping text
- Adding borders to images
Making the Blog
Step 1 - Choose the image
The best images for blogs have space for the text somewhere. I'm going to be using the image of King Altador above because it's about the right size and it has a perfect area in the top left to put the text box.
First, a neat trick for getting an image in your browser into GIMP. Right click on the image in your browser and choose Copy or Copy Image (the exact wording depends on your browser). In the GIMP main window, go to File - Acquire - Paste as New (Shift+Ctrl+V). You will now have a new image window containing the image.
Step 2 - Add a text area
Use the Colour Picker tool () to select a pale yellow from the image (I used fffff9). Using the Rectangle Select tool (), draw a rectangle in the top right of the image like the image above. In the layers window, create a new layer called Text Area BG, making sure that the Layer Fill Type is set to Transparency. With the new layer selected, go to Edit - Fill with FG Colour.
In the layers window, set the Text Area BG layer opacity to 70. Get rid of the selection with Edit - Select None (Shift+Ctrl+A). Select the Background layer and then use the Colour Picker tool () to select a dark grey (I chose 45413c).
Create a new layer called Text Area Border, again with the Layer Fill Type of Transparency. Right click on the Text Area BG layer and click Alpha to Selection. Click on the Text Area Border layer to select it and then choose Edit - Fill with FG Colour. Shrink the selection by 1 pixel by going to Select - Shrink... and the press Delete or go to Edit - Clear.
Step 3 - Add some text
Set the foreground colour to the same pale yellow used earlier (fffff9). Select the Text tool (). Change the font to Chopin Script if you have it. Otherwise go for any "kingly" or fancy looking font that you have. Set the font size 72 (you may need to adjust this if you aren't using the same font as me). Click somewhere at the bottom of the image and type in His Majesty and click Close. You can use the Move tool () to move the text up if it isn't where you want it. Make all layers except for the Text layer invisible and then choose the Alignment tool (). Click on the text (you'll know it's selected properly because small boxes will appear in the corners of the layer). In the tool options in the main window, select Image from the Relative to box, then click on Align centre (). You can make all the layers visible again.
Create a new layer just below the text layer called Text Border. Right click the text layer and choose Alpha to Selection. Click the Text Border layer to select it then go to Select - Grow... and grow the selection by 2 pixels. Feather the selection by 1 pixel by going to Select - Feather.... Make the foreground colour the same dark grey that you used before (45413c) and then go to Edit - Fill with FG Colour.
We're going to make the text stand out a little now. Create a new layer called Bump on top of all the other layers. Right click the Text layer and go to Alpha to Selection. Highlight the Bump layer and then go to Edit - Fill with FG Colour. Go to Select - None then blur by 5px with Filters - Blur - Gaussian Blur....
Highlight the text layer then go to Filters - Map - Bump Map... then choose the settings below. Make sure that the top drop-down box has the Bump layer selected. Once you've clicked OK, delete the Bump layer.
The last thing we'll do to the text is add a drop shadow. Make sure that the text border layers is selected, then go to Filters - Light and Shadow - Drop Shadow... and choose the settings below.
Step 4 - Add an image border
Go to Filters - Decor - Add Border... and set the border size to 2. Choose the dark grey (45413c) as the colour and set the delta value to 1.
Press OK to apply the border.
All your text goes here!
Here's my finished blog. When coding it, remember to add some padding between the text area border and the text. Remember that you can find out the position of things in the image by hovering over them with the cursor in GIMP - the position is displayed in the bottom left corner. I'd recommend using the same dark grey that you used before as a text colour.
You can use the technique for making text in an image for any sort of graphic, so feel free to play around with colours and values to see what you can come up with.
If you have questions, comments or requests, just neomail me =)