Irfanview Workbook - DOC by HC120229034533

VIEWS: 0 PAGES: 23

									           Irfanview (accompanying booklet to Using Images)
           Image editing software




May 2006
Contents
    Introduction ........................................................................................................... 2
    How to download IrfanView into WTS ................................................................ 3
    A list of the image files for use with this booklet ................................................. 9
    Copy and paste an image into IrfanView from Word/PowerPoint ..................... 10
    Resize/Resample ................................................................................................. 11
    Save an image file in Web format ....................................................................... 12
    Crop ..................................................................................................................... 14
    Increase the canvas size ...................................................................................... 15
    Rotate .................................................................................................................. 16
    Horizontal Flip (mirror image)Add text .............................................................. 16
    Add text ............................................................................................................... 17
    Converting an image to a transparent GIF .......................................................... 19
Introduction

Irfanview is a really easy to use freeware graphics editing program.
The program is called IrfanView named after its author Irfan Skiljan and will enable you to save images
for the Web. You will be able to copy and paste embedded images from Word documents, PowerPoint
etc and perform simple edits such as re-sizing, cropping, rotating, adding text, increasing the
background.
IrfanView is a very fast, small, compact and innovative FREEWARE (for non-commercial use) graphic
viewer for Windows 9x/ME/NT/2000/XP/2003. The current version is 3.97
Before you start, create a folder named: Downloads on the N: drive, if you are working within WTS.
(The following instructions and screen captures in this workbook are written for users of WTS.)
Double click on My Computer on your desktop




Double click on the (N:) drive

Click on the File drop down menu and select New then Folder




Key-in: Downloads for the folder name
Close the window down by clicking on the top right-hand X
How to download IrfanView into WTS
(Note: Screen views may change with each release)

Key-in the following URL (Web address) into your Browser
http://www.irfanview.com/

Click-on Download




Click-on TUCOWS Worldwide Network – download IrfanView
Maximise the window, if necessary by clicking on the Maximize button




Select your platform: 2K (for WTS December 2005)

On the next screen scroll down to the United Kingdom and select a London server
e.g. EasyNet Ltd




Click on Open
The destination folder will need to be changed.




Click on [Browse]

Select the correct root destination




Double click on Filestore (N:)
Select the correct folder.




Double click on Downloads

Click on [OK]

Screen displays the destination path




Click on [Next]
You will then see the version of Irfanview that you are downloading together with the release date.




Click on [Next]




Click on [Next]
You are now ready for the final step




Click on [Next]




Click on [Done]
Close down the IrfanView Web site and any other Web pages that have opened.

You now have a shortcut to IrfanView available on your desktop whenever you wish to open the
program.




           You are now ready to process images


                   A list of the image files for use with this booklet
                   word_document_with_photograph_embedded.doc           (633Kb)
                   millennium_bridge.tif                                (2.4Mb)
                   homeoffice.gif                                       (19Kb)
                   london_eye.jpg                                       (2.2Mb)
Copy and paste an image into IrfanView from Word/PowerPoint

If you have a Word document or a PowerPoint slide with embedded images which you would like to
include in your Web page there are several methods of doing this. One of the simplest is to copy and
paste it into IrfanView and then save it in a Web format such as JPEG, GIF OR PNG.

Watchpoint: If the image is not of a satisfactory quality when it has been copied and pasted from Word you may find that
using Microsoft PowerPoint as an intermediary will solve the problem, e.g. copy and paste from Word into PowerPoint
and then copy and paste again into the graphics program.

For example the first picture on the left was embedded within Word and copied and pasted directly into IrfanView with a
somewhat poor result.




The same picture was copied and pasted from Word into PowerPoint then copied and pasted from PowerPoint into
IrfanView with a satisfactory result.




                                                          NB If you are using the Microsoft Clip Organiser
                                                          within PowerPoint, or you have Windows Explorer
                                                          open, you can drag and drop the image/file into
                                                          IrfanView.
Resize/Resample

If you need to re-size an image you should always make it smaller because enlarging an image will, in all
probability, result in the resolution being detrimentally affected.

Click-on the Image dropdown menu in IrfanView and select: Resize/Resample




                                                 The majority of computers nowadays are set to a
                                                 screen resolution of 1024 x 768 pixels.

                                                 Therefore, an image that is 300 x 200 pixels will take
                                                 up approximately a quarter of the screen.



Decide whether you need to “Preserve aspect ratio” (recommended in order to avoid distortion) and
check/uncheck as relevant then change the Width/Height and click on [OK]



                                                              Aspect ratio maintains the proportions of
                                                              the original image.

                                                              Unless it is critical an image which has
                                                              been reduced to, say, 200 x 208 pixels can
                                                              be reduced to a uniform 200 x 200 pixels
                                                              by switching off the Preserve aspect
                                                              ratio option and keying-in the desired
                                                              custom size. In this example the resultant
                                                              distortion would probably not be
                                                              noticeable.
Save an image file in Web format
Example given on next page

Click-on the File menu in IrfanView and click-on: Save as…

Select type of file format, e.g. JPG* (photos), PNG (photos or computer drawn images), or GIF
(computer drawn images, images with transparent backgrounds and animations)

* Bear in mind that there is a loss of resolution each time a jpg file is saved using any graphics program.
Therefore, it is always best to archive a copy of the original in case you need to use it again.

Note the quality scale in IrfanView is set at 80% by default so that the file will automatically be smaller than the
original. You may need to experiment with this but always keep an original copy so that you can go back to the original
resolution if needed.

You can also alter the dots per inch (DPI) in the Resize/Resample options. Again you would need to experiment.
Typical settings would be 300dpi (high), 96dpi (medium) 72dpi(low). This would generally only be necessary for very
large files, e.g. 1Mb plus.




                 female_faces200x200




Select the relevant path/folder to save the file

Give the file a name.

Note: If you rest your mouse on a graphic file within Windows Explorer you will see the dimensions of the graphic in
pixels, e.g. width x height. We recommend, however, that you also include the dimensions in the file name as it is a useful
quick reference, e.g. female_faces200x200

Click on: [Save]
The example below was originally a TIF image (non-web format) and was 1280 wide x 596 high pixels
and 2.2Mb in size (2,200,000 bytes in storage space used on a disk).




It was then resized to half its size and saved in JPG format at 80% quality. The resultant file was only
32Kb (32,000 bytes) and is shown below.




Whilst this is not a true test from a reader’s perspective as both images have been copied into Word –
nevertheless, the difference in quality is almost indiscernible with perhaps the lower quality version
being slightly lighter.

Comparison of file sizes before and after saving in Web format using IrfanView…
Crop

There are times when only part of an image is required and, therefore, the original image needs to be
“cropped”.

Click and drag a box around the area of the image you wish to keep




The marqueed (boxed) area can be modified by dragging the relevant side of the marquee when the
cursor has changed to a double-headed arrow. This will happen as you move the cursor towards the
marquee box boundaries.

Click-on the Edit menu and select: Crop selection
Increase the canvas size

Sometimes it will be necessary to increase the size of the background (canvas)
For instance, the picture below would benefit from a larger white background.




Click-on the Image dropdown menu and select Canvas size…




                                        Decide on the size
                                        (in pixels) of the
                                        border you wish to
                                        add.

                                        Choose a colour.
                                        In this example it is
                                        white.

                                        Click-on: [OK]
Resultant image which has been cropped and the white canvas increased by 10 pixels all round.




Rotate

                                      Rotate Left (turn one quarter anti-clockwise)
                                      Rotate Right (turn one quarter clockwise)

                                      Custom/Fine rotation…
                                      (example set to 15o with white background)




                                      Vertical Flip (upside down)

                                      Horizontal Flip (mirror image)
Add text
Caution – for accessibility reasons any text embedded in an image must be kept to a minimum and included in the Alt
text tag when uploaded to the Web.

Before adding text you will need to ‘marquee’ an area where the text is to be inserted.




Click-on the Edit dropdown menu and select Insert text into selection…




Key-in the text into the
text box
Select the font, e.g. font style (Verdana), font size (8), font colour (Black)




Click-on: [OK]


NB: IF YOU WISH TO UNDO WHAT YOU HAVE JUST DONE – PRESS [Ctrl-z]


The resultant image with embedded text…
Converting an image to a transparent GIF
Not all images will be suitable for this process. Images with a white background lend themselves
particularly to this process.
Save the file in GIF format and then select:
Save transparent color | Choose transparent color during saving




You will then see the screen message: Click in the image to set the transparent color.
At this point you would need to click on the colour you wish to make transparent which in this
example is the white background on the left.
Task: Create a banner for a WebCT Course

Using IrfanView open the file london_eye.jpg

Either…

Proportionally re-size it to 505 pixels wide under the Image menu
Marquee an area 500 x 200 and Crop selection under the Edit menu
Increase the canvas size by a white coloured border of 10 pixels Top, Bottom, Left and make the right
increase to the overall width of 800, i.e. (10+500)-800 = 290
Marquee an area in order to insert text under the Edit menu
Key-in: Modern Buildings in gray, bold, modern font (e.g. AvantGarde if available), 36 points
on 2 separate lines

If you wish to add a black outline – increase the canvas by a 1 pixel black border




Or alternatively…

Resize the image to the screen size of 1024x768 pixels, crop it to a width of 900 pixels and a height of
200 pixels, add a thin black border (1 pixel) and add two text boxes using bold, modern font (e.g.
AvantGarde if available), 36 points each with different coloured text placed slightly apart see below.
Learning Technologies Support Service

              B.3.10
        Cruciform Building
      Gower Street WC1E 6BT


       http://www.ucl.ac.uk/ltss

								
To top