Using the Gimp for your Website Images - Part 2

12
Using the Gimp for your Website Images – Part 2

description

Useful Gimp tips covering cropping, sharpening and identifying colours in images. If you require a Hull web designer, you should hire Neogain.

Transcript of Using the Gimp for your Website Images - Part 2

Page 1: Using the Gimp for your Website Images - Part 2

Using the Gimp for your Website Images – Part 2

Page 2: Using the Gimp for your Website Images - Part 2

In our last Gimp article ‘Using the Gimp for your Website Images‘, we had covered resizing images, creating thumbnails and converting between graphic file formats.

This article is part 2 and we will cover working with colours, cropping, sharpening images and provide website optimisation tips.

If you require a Hull web designer, please get in touch.

Page 3: Using the Gimp for your Website Images - Part 2

How to identify a hexadecimal colour code.

To identify a colour code in an image is quite straightforward using the Gimp.

The question is why would you want to identify a colour code?

Page 4: Using the Gimp for your Website Images - Part 2

Often identify a colour code in an image will help you use the right colour, when branding and house styling are concerned.

You will then be able to use the correct colour for fonts, backgrounds, borders and other areas within your CSS.

Also you might need to alter an image, so naturally using the same colours in an area of an image will help.

Page 5: Using the Gimp for your Website Images - Part 2

Plus if you are presented with an image that is too highly compressed, you might need to alter the image to improve the quality.

Step 1 – Open your image within the Gimp software.Step 2 – Select the ‘Colour Picker Tool’ from the toolbox,

then click on the colour to identify.Step 3 – At the bottom of the toolbox the colour will appear,

which you can now double-click on to discover the hexadecimal colour code.

Page 6: Using the Gimp for your Website Images - Part 2

How to crop an image.

Cropping an image is when you need to alter or reduce the size of an image.

Step 1 – Open your image.Step 2 – Select your cutting tool from the toolbox, probably

the rectangle tool.Step 3 – Click on the beginning area and hold the mouse key

down whilst you drag the mouse over the region you wish to preserve.

Page 7: Using the Gimp for your Website Images - Part 2

Step 4 – Now from the menu bar select ‘Copy’ from the ‘Edit’ menu.

Step 5 – Now from the ‘Edit’ menu you can select ‘New Image’ from the ‘Paste As’ sub-menu.

Page 8: Using the Gimp for your Website Images - Part 2

How to sharpen an image.

Sometimes both in a website theme or within the content itself an image needs sharpening.

This can at times help an image that has been taken in lower light, else if the image was taken by a camera not in a steady position.

Page 9: Using the Gimp for your Website Images - Part 2

However you can only improve the image so much, so the end results can vary.

Step 1 – Open your image.

Step 2 – From ‘Enhance’ under the ‘Filters’ menu option, select ‘Sharpen’ and then adjust and apply the strength.

Page 10: Using the Gimp for your Website Images - Part 2

Website Optimisation tips.

Using the Gimp tips in this article and the previous, you should now be able to create greatweb friendly images.

The reason why you need to make sure your images are web friendly is to help your website load as fast as possible.

Page 11: Using the Gimp for your Website Images - Part 2

Using multiple images with large file sizes might load reasonable well on some broadband connections, but due to network performance, international traffic and at times network issues, large file sizes will hinder your website, including search engine ranking and the time visitors spend on your website.

Making sure you are using the right file format, the right compression level and the correct amount of colours for an image, will help.

Page 12: Using the Gimp for your Website Images - Part 2

Plus choosing when to use HTML colour codes instead, will all add up to a quicker loading design.

If you require a web designer in Hull, please get in touch.