Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using the Gimp for your Website Images - Part 2


Published on

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

  • Be the first to comment

  • Be the first to like this

Using the Gimp for your Website Images - Part 2

  1. 1. <ul><li>Using the Gimp for your </li></ul><ul><li>Website Images – Part 2 </li></ul>
  2. 2. <ul><li>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. </li></ul><ul><li>This article is part 2 and we will cover working with colours, cropping, sharpening images and provide website optimisation tips. </li></ul><ul><li>If you require a Hull web designer, please get in touch. </li></ul>
  3. 3. <ul><li>How to identify a hexadecimal colour code. </li></ul><ul><li>To identify a colour code in an image is quite straightforward using the Gimp. </li></ul><ul><li>The question is why would you want to identify a colour code? </li></ul>
  4. 4. <ul><li>Often identify a colour code in an image will help you use the right colour, when branding and house styling are concerned. </li></ul><ul><li>You will then be able to use the correct colour for fonts, backgrounds, borders and other areas within your CSS. </li></ul><ul><li>Also you might need to alter an image, so naturally using the same colours in an area of an image will help. </li></ul>
  5. 5. <ul><li>Plus if you are presented with an image that is too highly compressed, you might need to alter the image to improve the quality. </li></ul><ul><li>Step 1 – Open your image within the Gimp software. </li></ul><ul><li>Step 2 – Select the ‘Colour Picker Tool’ from the toolbox, then click on the colour to identify. </li></ul><ul><li>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. </li></ul>
  6. 6. <ul><li>How to crop an image. </li></ul><ul><li>Cropping an image is when you need to alter or reduce the size of an image. </li></ul><ul><li>Step 1 – Open your image. </li></ul><ul><li>Step 2 – Select your cutting tool from the toolbox, probably the rectangle tool. </li></ul><ul><li>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. </li></ul>
  7. 7. <ul><li>Step 4 – Now from the menu bar select ‘Copy’ from the ‘Edit’ menu. </li></ul><ul><li>Step 5 – Now from the ‘Edit’ menu you can select ‘New Image’ from the ‘Paste As’ sub-menu. </li></ul>
  8. 8. <ul><li>How to sharpen an image. </li></ul><ul><li>Sometimes both in a website theme or within the content itself an image needs sharpening. </li></ul><ul><li>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. </li></ul>
  9. 9. <ul><li>However you can only improve the image so much, so the end results can vary. </li></ul><ul><li>Step 1 – Open your image. </li></ul><ul><li>Step 2 – From ‘Enhance’ under the ‘Filters’ menu option, select ‘Sharpen’ and then adjust and apply the strength. </li></ul>
  10. 10. <ul><li>Website Optimisation tips. </li></ul><ul><li>Using the Gimp tips in this article and the previous, you should now be able to create greatweb friendly images. </li></ul><ul><li>The reason why you need to make sure your images are web friendly is to help your website load as fast as possible. </li></ul>
  11. 11. <ul><li>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. </li></ul><ul><li>Making sure you are using the right file format, the right compression level and the correct amount of colours for an image, will help. </li></ul>
  12. 12. <ul><li>Plus choosing when to use HTML colour codes instead, will all add up to a quicker loading design. </li></ul><ul><li>If you require a web designer in Hull , please get in touch. </li></ul>