Guidance for creating and editing website pages
Lesson 3 - Advanced Web Image Editing
The object of this lesson is to demonstrate how to 'crop' an image, or in other words, focus on one area of it and then turn this into a separate image in its own right.
You will first need to download and install the following freeware programme:
You can get it from: https://www.getpaint.net
(Click on the link indicated by the red ellipse and not on the other two green download links!)
You will be taken to the following page - click on this second link:
Again, this programme is completely free.
Install this program on your computer in the normal way by accepting the licence conditions.
When you start the programme you should see this.
Go to the top left-hand corner and click on 'Open':
Navigate to your image folder:
In this instance I have chosen an image of Birnbeck's camera obscura dating from about 1891. The image is presently quite large - having been scanned it is now sized at 5143 pixels wide by 2054 pixels high:
For reference, the same picture is shown here next after reduction to 760 pixels wide by 304 pixels high. This is the biggest (width) size that this page can accomodate given its present construction, which allows for the page to satifactorily display on small-screen devices (and also load very quickly).
(See Lesson 2 - Editing images for webpage use - simple resizing - for details on how to do this in Easy Image Modifier - although Paint.Net is equally capable of doing this conversion - see further below.)
Open the picture in Paint.Net.
The image can be zoomed in (in several stages if needs be) if the resolution of the picture allows for this without significant pixelation taking place and positioned via the lower and right hand scroll/slider bars until the preferred selection is obtained:
It is important to zoom out one stage from this final selection before the next stage. It is difficult to use the next tool at the very edge of a displayed image. Practice with this technique until you get it right.
This selection can then be cut out of the original image by means of the 'Rectangle Select' option, which is the first tool available in the drop-down toolbar.
The chosen selection will turn blue:
Go to 'Edit' - then 'Cut':
Open a new window using the 'New' command (the first button on main toolbar).
This will appear and already be sized correctly for your paste, you will briefly see a sizing box - don't change anything and just click 'OK'. You will now see a new white image.
Paste your new cropped image into this.
Your cropped image will appear:
Save your image to your chosen destination folder - if it is for use on the website this should be an 'images' folder (or another sub-folder inside this) inside your main 'Website' folder:
The finished product (actually a second crop selection):
Further notes on image sizing
The resolution and overall size (in pixels in relation to their height-to-width ratios) of full-screen images that can be produced (although they will scroll off screen to bigger sizes) with this programme can vary according to the native resolution(s) of the devices that the images are produced on and also later viewed on.
The above images were produced on a screen with a resolution of 1024 pixels wide by 768 pixels high.
Screen capture can only happen at image resolutions equal to or below this in this instance. Screen capture is normally accomplished by simply using the 'Print Screen' key, sometimes 'Prt Scr', on any standard keyboard. The captured image can then be pasted into any suitable editing programme, in this case Paint.Net.
The height-to-width ratio of a captured (capturable) image can vary depending on whether it is viewed on a 4 to 3, 16 to 10, or 16 to 9 ratio (widescreen) screen. Cheaper widescreen monitors often display images in a 'skewed' or 'stretched' manner.
The screen shots below and above sometimes indicate (on the pixel counter just below the image) a resolution of one pixel above these respective resolution numbers - because the bounding box used to crop the image will occupy the very next pixel space in its own right - leaving a space inside itself for the accurate 1024 pixel wide crop whilst the edge of the box itself occupies pixel column 1025.
To resize images in Paint.Net click on 'Image' and then 'Resize':
From the above the image was subsequently reduced in size again to 760 pixels wide for direct website use. This would need saving again, which would overwrite the original larger one, or equally could be saved with a different file name ('.../image1024' and '.../image760' for example).
Note carefully the difference between 'Save' (the image) and 'Save As' (the image with a different file name or location). If 'Save' had been used here the previous 1024 pixel wide version would have been overwritten and become practically unrecoverable.
The originally cropped image now saved at 760 pixels wide displaying inside the 1024 pixel (on this computer) wide Paint.Net image editor.
And now uploaded to the server and displayed here on this page at 760 pixels x 440 pixels:
Here endeth the third lesson in web page production!
