Web Design – Using the Gimp to create or edit your website images


Published on

How to use the Gimp software package to convert between png and jpg, plus resize and create thumbnail images. Need a web designer? Hire Neogain.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design – Using the Gimp to create or edit your website images

  1. 1. <ul><li>Web Design – Using the Gimp to create or edit your website images ? </li></ul>
  2. 2. <ul><li>Whether you are looking to change your website theme’s image files, else create or edit image files, the free package called Gimp, is often more than adequate for your requirements, especially if you are a novice. </li></ul><ul><li>Below are a series of instructions, that show you how to perform some common colour and image related tasks, using the Gimp software. This article is for novices working with images. </li></ul><ul><li>If you want to hire a web designer, please get in touch. </li></ul>
  3. 3. <ul><li>How to convert png to jpg (image formats). </li></ul><ul><li>As you can imagine converting a single image using the GIMP is straightforward. </li></ul><ul><li>The reason why we’ve included this, is because many people often forget that regardless of the image format you are using, you need to make sure you are using the best one for your target audience, which primarily is bandwidth consideration. </li></ul>
  4. 4. <ul><li>Often small image file sizes don’t seem important, but add them all up on a web page and they can impact your website load time. </li></ul><ul><li>You should always work to improve load time performance, whilst maintaining a certain level of quality. </li></ul><ul><li>Faster loading times can help with search engine ranking, as well as making visitors happier. </li></ul>
  5. 5. <ul><li>Step 1 – Open your png image. </li></ul><ul><li>Step 2 – From the file menu select ‘Save As..’. </li></ul><ul><li>Step 3 – Just type in the new name, but importantly followed by the jpg extension. i.e. test.jpg You won’t need to select a different file format, as the Gimp will know you want to save as jpeg. </li></ul>
  6. 6. <ul><li>Step 4 – You will now be asked to select the quality, which the default setting is usually fine. The lower the quality the smaller the file size, but also the image quality obviously will look worse. </li></ul>
  7. 7. <ul><li>How to resize an image. </li></ul><ul><li>The Gimp allows you to easily resize images, which the package refers to as ‘scale’ (scaling). </li></ul><ul><li>You don’t just have to resize based on pixels, but also can resize based on percentage, inches and millimetres amongst other options. </li></ul><ul><li>The package also allows you to keep aspect ratio. </li></ul>
  8. 8. <ul><li>For example if you change the width, it will automatically change the height to keep the aspect ratio. </li></ul><ul><li>Step 1 – From the ‘Image’ menu, select ‘Scale Image…’. </li></ul>
  9. 9. <ul><li>Step 2 – Enter your new details and then select ‘Scale’. </li></ul><ul><li>How to create a thumbnail image from a large image. </li></ul><ul><li>Often people need to create thumbnail images for their websites. </li></ul><ul><li>Typically an image size of 125×125, for blogs. Below is an example of creating a thumbnail image from a larger image. </li></ul>
  10. 10. <ul><li>Create a blank image. </li></ul><ul><li>Step 1 – Select ‘New…’ from the ‘File’ menu. </li></ul><ul><li>Step 2 – Type in your image thumbnail dimensions and create the new blank image. </li></ul><ul><li>Modify the original image. </li></ul>
  11. 11. <ul><li>Step 3 – Open the large image you will be converting into a thumbnail image. </li></ul><ul><li>Step 4 – Using the instructions for ‘How to resize an image’, resize the image so that it is slightly bigger than the thumbnail image. i.e. 127×131 for example. </li></ul><ul><li>Step 5 – Select ‘Copy’ from the ‘Edit’ menu. </li></ul><ul><li>Paste into the blank image. </li></ul><ul><li>Step 6 – Select the blank thumbnail image. </li></ul><ul><li>Step 7 – From the ‘Edit’ menu select ‘Paste As’, and then ‘New Layer…’. </li></ul>
  12. 12. <ul><li>Step 8 – From the ‘Toolbox’ area on the left, please select the ‘Move’ tool, which is shaped like a cross, and align the image. </li></ul><ul><li>Step 9 – Now you can save the new image. </li></ul><ul><li>We didn’t use the ‘Paste Into’ option as this would cause an issue in most cases with aspect ratio. </li></ul>
  13. 13. <ul><li>Coming up…. </li></ul><ul><li>Next week we will provide more useful Gimp tips for novices working with website images. Why not bookmark this page, so you have a resource you can easily refer to in the future? </li></ul><ul><li>If you require web design service , please hire Neogain. </li></ul>