Home
  
Getting Started

Free Web Tutorials
  
Nvu
  
Gimp

Create a Website
Tutorial

HTML Tutorial

Helpful eBooks

Useful Products

Web Hosting

Free Newsletter
Get updates, design tips, new tutorials, product reviews and lots more!!

First Name:
Email :



Subscribe to our blog
What's this?

How to start using the GIMP - Part 2
(Opening and Saving Images)
Watch Part 2 - Running the GIMP

There are a couple other important things to know when using the GIMP. Namely opening a file and saving a file.

1) To open a new canvas, just click File > New.

2) To open an existing images, click on File > Open then select the file you would like to open in GIMP

3) Saving an image is a little more complicated. That's because you'll need to know what the different file formats for graphics are.

Each file format has unique properties and are best suited for specific images. The file formats we're going to use with the GIMP are JPEG, GIF and XCF .

JPEG or .jpg - This is a graphics image format. You will see files saved as filename.jpg. And the logo in Windows XP for a JPEG image is shown below:

JPEG allows you to compress the image without losing a lot of quality in the image. This helps makes the files smaller and faster to load. It is used primarily for computer graphics. And graphics that contain more than 128 colors. It's great for photos, pictures, gradients, etc. Anything that uses lots of different colors.

Printing on paper with JPG will often times NOT give you the best results due to the file compression. And because you'll probably already changed the resolution to 72 dpi.

In the GIMP saving a .jpg file is done by choosing File > Save As. Then select the File Type by clicking the plus button and scrolling down to find the JPEG image. Clicking on that will allow you to save the file as .jpg. Once you click on it, then click SAVE in the lower right.

After clicking Save, this brings up another set of options. How much you want to compress (or make the file size smaller) the image.

For most images, I keep it around 80, but you can get more specific and try lower (lower = smaller size, but less quality). For a quality of 80, we've reduced the orginial image from 806 Kb to only 8.6 Kb. That's serious file compression and you really haven't lost any quality.

Click on Show Preview in image window. This will allow you to see what the image looks like compressed. If you compress it too much you'll lose quality and get something messy like:

When you see this loss of quality, it's known as artifacting. It just means the image has been compressed too much.

Once you find a good file compression quality, then just hit OK and you'll have saved your new file as a .jpg image.


.GIF
- This is another commonly used file compression format. This has some different properties than jpeg, however. It's best to use .gif when you have a limited amount of colors, no gradients and no complex shading.

You'll also see a different icon for .gif images in Windows XP. It will look like this (the file name below is stick-figure.gif):

Two main differences than jpeg. One is that you can save .gif files as a transparent image, you can't do that in jpeg.

Transparent images are images where you can see the background through the image. It's great for logos, simple colors, basic shapes, etc, because you can put it anywhere and it will instantly blend with your background.

For example, if your background was red, and you saved a .gif transparent image, then you'd get whatever your image was with a red background. It would blend easily.

If you save a .jpg image, like the stickfigure below, then you'd get your image with a solid white square on a red background.


Transparent .GIF



.JPG

 

So the image on the left is saved as a transparent .gif. Notice how it blends into the background of this red table. The .jpg is not transparent and will show up as a white square block. (If you really wanted to use a jpeg image, you have to manually blend it to the background by selecting the white color in the background using the GIMP and filling it with the same color as the table).

Another feature with .gif file format that you can't do with JPEG is animation. You can put together several frames of an image and animate them by saving them as an animated .gif.


Animated .GIF



.JPG

 

The GIMP actually has a special animation package you can download and use to create animations.

Also .gif animation is easily done in Fireworks and PhotoShop. And if you are really into animation, then you should simply use FLASH by Macromedia. This will accomplish smoother animation with a much lower file size.


.XCF -
This is the last image file format we'll cover. This is the default image that the GIMP uses. If you're going to be using the graphic image frequently by updating or editing it, then it's always a good to save it as both a compressed file (.jpg or .gif) AND as an .xcf file.

Saving your GIMP files in .xcf file format will allow you to go back and change and edit the image. .xcf format saves all the layers, all the special effects and makes it easy to re-do your image. Consider it the original uncompressed image.

You'll see this file format show up as... in Windows.

Ok, that ought to just about do it for saving your work of art in the GIMP. Just remember...

1) .JPG - Pictures, Photos, Gradients, Lots of colors.

2) .GIF - Low # of colors, transparency, and animation.

3) .XCF - Saves all the layers and the original uncompressed image.

Also, please keep in mind, that when saving a file for the web, the file name must NOT contain any spaces or weird symbols. You can use dash - or underscore _ if you'd like. For example stick-figure.gif and stick_figure.gif are acceptable.

And please note that capitalization counts. 'Stick-figure.jpg' is a totally different file than 'stick-figure.jpg'. So the names are case sensitive. An easy way around this of course is to just use all lower case.

Coming up next, we're going to begin covering the different tools used in the GIMP, starting with the first ones, the selection tools...

 

 


Google
Free Web Design Video Tutorials | Getting Started | Nvu Tutorials | Gimp Tutorials | Create a Website | Earn money with Adsense | Helpful eBooks | Recommended Products | Web Hosting | Links | Links2us | Contact Us | About Us

Bluehost.com Web Hosting $6.95

Want to learn how to make money online?

Click Here for extra $$

© 2005 - 2007 DesignYourOwnWeb.com. All rights reserved. Web Design Tutorials
Design Web Home