So you have just taken ownership of your spankingly new online presence – be it a blog or a content managed website you’ve had developed.
You’ve read the manual, had the training and put on your best typing hat (ok, so that’s just me then! ) and you are ready to show the world your dazzling linguistic ability.
That’s all very good but its often all too easy to undo all of this good work with poor use of supporting imagery and bad formatting, making your posts or pages difficult to read, and ultimately affecting your user’s experience and perception of your online presence.
By taking a few simple steps to ensure the visual side your posts are properly cared for you can really help to improve the overall user experience.
Content Managment Systems
Here at 360innovate we offer content managed websites. These allow our customers to take full control of their websites allowing them add, edit and delete pages and giving the administrators full control of the website content.
This has huge benefits for the customer as they are able to quickly and easily update content without having to contact their web developer.
The responsibility of power
“With great power comes great responsibility.” –Peter Parker in Spider-man (2002).
When taking control of your web content it is down to you to make sure that the content reaches your user in a readable and well presented format. Well thought out web content combines of a number of factors including:
- Typography
- Layout
- Imagery
If you have had a website developed on you behalf or are using a blog template you might not have direct control over certain features, but you can still make an impact with carefully managed content.
Below I hope to outline a few hints and tips on how to edit and organize images.
Enough waffle!……How do I go about editing my images?
Photoshop of course! …. You don’t have Photoshop? Just us designer types, huh? So we need to find something that will do just as good a job but for free.
Luckily for anyone with a half decent broadband connection, help is at hand. There are several free to use image editing applications that are extremely robust and will handle many of the basic tasks required to get your images online.
Below is a list of the online editors I’ve had a chance check out though there are many others available.
Pixlr
Sumo Paint
Aviary Pheonix
Splashup
Adobe Photoshop – (requires sign up to Adobe.com – this is free, but takes about 5 mins)
For the purposes of this article I will be using Pixlr though any of the applications above will be able to handle the tasks in the tutorial, although maybe not in exactly the same way.
I have also set up a dummy WordPress blog to go along with this tutorial and while I’m aware that WordPress is a fantastic tool with some great easy to use image control options I’d like to maintain focus on our image editors, so the blog just shows our images edited down and placed in context.
My dummy blog can be found at http://sufferingsuccatash.wordpress.com
You can click most the screenshots below to view an enlarged version.
First up – Image Resizing/Cropping
Taking beautiful digital photography to go along with your article content is becoming a lot easier these days, due to the proliferation of high quality digital cameras. When it comes to the web though all of your extra megapixels suddenly become a bit redundant as you will usually end up needing to resize your photograph to fit within the bounds of your website or blog.
Even if you have some sort of popup image gallery that requires a larger popup image you will still probably need to resize this as well.
There are benefits to resizing your images.
- Smaller images load a lot quicker than larger images.
- You can precisely control the layout of your web content.
- Careful cropping and position can have stunning results.
So lets get started (finally!)
The first step I would recommend would be a little preparation with a pen at the ready to note down the width in pixels of your intended content area. This is where using Firefox as your web browser comes in very handy – there are a number of Firefox add-ons that will let you measure elements on the web page precisely. I’ll be using the ruler from web developer’s toolbar, though measurelt will do just as good a job.
Measure your content area width by activating your ruler of choice and dragging from the top left of your content area to somewhere on the right that looks about right – a few pixels either way should not make too much of a difference and round numbers are easier to work with (always round down rather up – images that are too wide may inadvertently ruin the layout of your site).
My blog has a content width of 455px. So from here we can work out precisely the sizing we need to create a number different layout styles for your images and content.
Go to http://www.pixlr.com/editor/ and launch the application.
The Pixlr interface is very similar to Photoshop in look and feel and features a menu bar along the top, a tool bar on the left as well as a Navigation and Layers palette on the right. Pixlr also features a really handy history tool usually located the bottom right. This allows you to cycle through every change you made to the document – just like Photoshop – to undo any errors. First up we want to open our image. Pixlr has a launch menu that allows you locate the image you need to edit. Alternatively you can click file and open to find your image.
I have chosen a fairly large stock photograph of some mountains.
Creating a wide banner image
I am going to resize our image to the full width of the content area. From the top menu bar in pixlr click image and from the dropdown choose image size… a popup should appear – type in 500 in the width box ensuring the “constrain proportions box is ticked”. This will stop the picture getting squashed or distorted when we resize.
The height box should automatically adjust to right proportions. Hit “ok” to commit the changes.
Now we have an image that is set to the correct width, we will need to use the crop tool select a narrow area.
From the left hand tool palette select the crop tool (three options down from the left).
Click and drag across the image then release the mouse button and you should see a crop selection box appear.
At the corners of this box there are handles that allow you to alter the selection into a position you are happy with. I have made sure that my selection is the full width of the image and that it is sitting over portion of the image that I want to work with. Once you are happy with your selection press return to commit the changes and your cropped image should appear.
If you are not happy with your selection you can use the history palette (on the right hand side) to go a step back and try again.
In this case I am reasonably happy with the selection but I think it is has just a little bit too much height so I will use another technique to crop some more height off the image.
The information in the navigator palette on the right hand side will give details your crop box height and width while you are using it, which allows you to be pretty accurate with your cropping. However I have a specific height in mind and I can specify this using the image menu and selecting canvas size…
A dialogue box appears which allows you specify the height and width of the canvas (the working area of the document). At the moment the height is 108px and id like to crop this down to 100px. So we type 100 in the height box and leave the width at 500px.
Simple right? But wait, there’s more….
Below the height and width boxes there is a section labelled anchor. This tool uses 9 boxes, arranged in a 3×3 grid, to specify where in the document any cropping will occur. For instance click on the top left box and cropping will occur at the bottom and right hand side of you document.
I’m going to select the bottom center box, which will crop from the top and (had I specified a width other than 500px) from both the left and right hand sides – preserving the bottom portion of the image. Click ok on the dialogue box to commit the changes.
So there we have some very basic cropping techniques. With these image editors it will often be the case that there is more than one way to achieve a particular outcome and it comes down to practise and personal preference as to which will work best for any individual.
Saving a document
We now need to save our document and make it ready for the web.
Click File then Save… to bring up the save dialogue box. You will be asked to choose a file format either .jpg .png .bmp or .pxd. Below is a very brief explanation of the formats available. Click the links to find out more.
- JPG – the commonest format for web based imagery and the one we will be using. Uses a lossy (some of the original image information is lost) compression format to reduce the size of images. More information about jpg here.
- PNG – Best image quality and ability to use transparency make this format versatile allowing very creative results to be produced. Not so good for general photography as file sizes tend to be larger. More information about png here.
- BMP -Lossless images and some transparency support – however, file sizes tend to be way too large for web applications and I would advise against using them. More information about bmp here.
- PXD – This is Pixlr’s very own file format allowing you to save layered files for future editing. Great stuff – give this a try when you have time.
As I said, we will be saving in JPG format so making sure that JPG is selected from the dropdown list, we can take a look at giving the file a unique name (be sure not to overwrite the original file).
Next we want to take a look at the quality slider, which is set at a default of 80.
This slider lets you set a number between 1 – 100 and determines size of the file, which will be generated. The lower the number you choose the smaller the file size, but there is a trade off to be made here as the smaller file sizes also result in a poorer quality final image. The reason for this is your choice of number sets the level of compression or shrinkage (to use the scientific term ). When a file is compressed using the JPG format some of the data is removed in order to shrink the file size.
I would usually try to set a level of 80 – 90, which will give a relatively clear result and decent file size. Every image will have a different optimum compression and it may be worth trying to save in a few different compression levels to see the difference for your self. Once you have set your compression level hit ok to activate your own computers save dialogue and save the file as you would any other. Your file is now ready for upload to your site.
So why am I banging on and on about file sizes?
Image files tend to form quite a large part of page loading time for a web page and the smaller we can get our files the quicker the page will load. If you have lots of images on your page it takes longer to load (think – one of those viral emails we get every so often which contain a hundred images of ‘animals that look like their owners’ or ‘preposterously overloaded vehicles’).
You can repeat the steps used here to create web ready images of differing sizes to compliment your text content. I my dummy blog i have used some other photos and cropped them in various ways to show what can be achieved.
The importance of consistency
I really cannot stress this enough – CONSISTENCY IS THE WAY FORWARD!!!! Maintaining a consistent look and feel to your site is really important for ensuring a professional appearance and enjoyable user experience.
With our imagery we can keep it consistent by choosing specific heights and widths for imagery and sticking resolutely to those sizes.
We can also achieve consistency by through well thought out combinations of typography and imagery.
Its all too easy to go wild with experimentation when given control of a website. The basic styles that have been created for your site should give plenty of scope for adding you content. The temptation is often there to start adding bright colours and using a number of different font styles/sizes/weights to try and draw attention. This can often lead to some really unprofessional looking pages.
The tutorial above only covers the very basics of image manipulation and you may have noticed in the dummy blog that there were a couple of images which had some simple but very effective effects applied. In my next post i will introduce the concept of layers and show how powerful effects can be achieved with relative ease.
If you have managed to read this far without keeling over from exhaustion – I thank you for your patience and resilience.
Tags: Free Online Image Editors, Image Editing, Image Editing Tutorial, Web Design Tips
