Introduction to graphic editing

You can use the graphic cropping and resizing functions that are built-in to WordPress for simple graphics manipulation, but for more advanced work you will need to become reasonably proficient in at least one graphics editing program that supports \"layers\". You should choose your preferred program from the list below and then follow one of the tutorials in this section to make a simple graphic header for your website. You can also sub-contract out this work for more professional results (graphics creation is a artist\'s skill that it may be worth your while to let an expert handle).

For do-it-yourself kinds of people, however, here are some choices:

  • Paint.Net is free and easy to use. It is available only for Windows computers. It\'s probably your best bet if you are on Windows
  • GIMP is also free, more sophisticated than Paint.net, and is also available for Mac computers. This is your best bet for free graphic editing on Mac computers
  • Pixlr.com is an excellent free web-based tool that has all of the functionality of the other software listed above
  • Photoshop (and it\'s little brother Photoshop Elements) are the professional standard for graphic editing, but they are not free and both have a learning curve. We do not provide Photoshop tutorials here but you can find excellent ones on the web
  • Camtasia is not an image editing software, rather it is a screen-capture tool for creating screenshares and narrated powerpoints. It is a commercial program.

Graphic formats

There are two main formats used for images on the web:

  • .jpg format is used for photographics and more complex images (i.e. images with great variety of colors and detail). When you save an image in .jpg format in your image editing software you will be asked what compression to use. Use as much compression as possible without loss of image detail (so-called \"image artifacts\" will appear if you try and compress too much). Try and avoid putting images to the web greater than 100-200kb or so, as your site performance will degrade for people with slow internet connections
  • .png format is best for so-called \"bit-mapped\" images. These are images that contain clip-art or text. However in some cases a .jpg image will be smaller than a .png image of equivalent quality -- you should experiment. Png format also supports so-called \"transparent png\" in which elements underneath the graphic will \"bleed-through\". This can be advantageous in some situations, such as when you place a transparent-png graphic as a logo image on top of your header, but want to preserve the background color or image of your header image

Image dimensions

In addition to the image type, images are measured as Horizontal pixels x Vertical pixels (i.e. 200 x 300 pixels). You can find the image dimension in your browser usually by right-click > Image properties.

If you need to resize an image for the web, it is important to start from the largest image you have and then scale it down. The opposite won\'t work as you will lose image definition and get what\'s called \"pixelation\" giving a non-professional result.

Complete and Continue