GIMP and Graphics for the Web

Without the need to draw anything, we can make this free software a tool of choice for graphics of a website. GIMP (GNU Image Manipulation) is an open source graphics editor that is a good alternative to Photoshop, although of a more laborious use. Actually there is a version of GIMP that tries to emulate the interaction with Photoshop, called Gimpshop.
Once mastered the use of this software, it becomes very useful for Web graphics.

What can a webmaster make with GIMP?

Graphic elements

Modern web pages contain a variety of graphic elements.

• Logo. The name of the site and possibly some symbol.
• Banner. A composite image to be placed on the header of the site, or to make advertisements.
• Signs. These are images used to identify categories of articles (see the homepage of this site).
• Icons. Graphic signs to access functions of a site.

These elements are realized by a combination of objects and special effects.

Special images in pages

These are images processed by some artistic effects.

• Image with a blur contour.
  Using an image as the banner is producing the best experience, but when the page width varies and is enlarged, the image gives the impression of being too small. To avoid this negative effect you can creates a blur effect on the sides through which the image is progressively confused with the background of the page.
• Artistic titles. Many effects on the fonts are used to create original logos.
• Items with a transparent background that are combined into banners.

What to learn

If you spend two hours to study each question with one session per day, you should have acquired after a week what is required to make the graphics of a site with GIMP. Assuming that you use compositions of already drawn pictures or photos. You must know:

• The role of icon controls in GIMP.
• Gradients and airbrush.
• Image size and copy and paste.
• Selection. Moving selection.
• Feather, transparency.
• Layers and masks (Whole Chapter 8).
• Paths, to make a clipping.

The tutorial of the software is sufficient to learn all that is necessary but perhaps trimming. To go further and apply this knowledge to build graphical components of a site, you have to use extra tutorials made by users, including that of scriptol.com...

Tutorials

	How to give a blurred contour to an image. Shaded edge is often used in logo of websites.
	How to superimpose an image into another. Make your own advertisement pictures.
	Merging two images with a fading effect. Use a layer mask to build an awesome picture.
	Removing objects on a photo. No need for Photoshop to suppress objects and rebuild the background automatically.
	Creating a text and image logo. Alpha to logo filters allow to make automatically fancy logos.
	Clipping tutorial.

More tutorials

• List of tutorials.

External Links

• Download GIMP.

Tweet