That Blue Square Thing

Image Editing

Editing images effectively is a really key ICT skill for the 21st Century. We put more and more images on the web and use them in the way we present ideas and work now.

So, let's get good at it!

A couple of useful online tools for image editing are Pixlrwiki link and Sumo Paintwiki link (uses Flash so won't work on an iPad). Both have some nice touches to them and are easy to use (a Year 3 child told me about Sumo Paint...). Sometimes Big Huge Labswiki link does just the think you need it to do as well.


Get your images the right size. Crop them in an image editor (like Paint) and then save them. They take up less space and make documents easier to use.

If you do just insert images into files then learn how to compact your images to reduce your file size.

PDF iconImage Manipulation Skills - right click and Save As

This describes a number of basic image manipulation skills - resizing, reformatting, rotating, cropping and renaming. It uses a set of images that I haven't made available, but the skills should be easy enough to pick up from here anyway.

PDF iconLayers in Photoshop - a guide to using layers in Photoshop

Transparent Images

Sometimes you just need to be able to make the background of an image transparent. It just makes your life so much easier and your product so much better.

The key thing to know is that the file must end up being saved as a PNG file. In Fireworks, as a Fireworks PNG. If it doesn't work then this is probably where you've made the mistake!

You can do this on the web using Pixlrwiki link which is a really nice editing tool - a bit like a cut down (and free) version of Photoshop. You can also do it using Fireworks or Photoshop.

PDF iconTransparent images with Photoshop - for Photoshop CS4 (similar in CS6)

PDF iconTransparent images with Pixlr - right click and Save As

PDF iconTransparent images with Fireworks - right click and Save As

The Photoshop or Fireworks methods are probably easier, but are expensive software so you might not have it at home. In that case, use the Pixlr approach!

Another cool, online free tool is Big Huge Labswiki link. Use this for adding speech bubbles or creating motivational posters.

Making a Banner

Website banners are very useful to be able to produce. There are lots of good ways to do this, some of which use online tools and are very simple.

It's also a good way to teach some interesting use of Photoshop as it happens...

PDF iconMaking a Banner - Photoshop - right click and Save As. This is for Photoshop CS4 but seems to work the same in CS6

Using Fireworks

Fireworks is a pretty powerful piece of software. It's handy for all sorts of image jobs if you want to get beyond using Paint.

PDF iconFireworks basics - a simple guide

Animated Logos

These are cool to do - using Fireworks again. But can be tricky.

PDF iconHow to make an Animated Logo - right click and Save As

Image iconBase file for an animated logo