If you take a look around the web today you will see that the use of images can play a big part in your design. "Web Design" and "Graphic Design" can go hand in hand but are actually two different things. You dont need to be an amazing graphic designer to create great websites nor do you need the best graphics software. There are some simple ways you can spice up your sites with images using some great free tools.
In this section I will detail some of the fundamental basics you need to know as a web designer to get images ready for the web and give you a few tips on how to create images with readily available software.
There are two fundamental graphic types you should use in web design:
JPEG - These image types are generally used for sizeable photo’s or detailed illustrations with shading or complex colours. These file types can support millions of different colours.
GIF - These image types are the sort of thing you will see used in clip art for example. They are best used for small illustrations or pictures. These file types can support up to 256 colours and will load quickly on a web browser.
When adding images to your web pages you need to be careful with there actual file sizes. If your file size is too large your page will take a long time to load. A general guide for your file size is a resolution of 72 DPI (dots per inch).
The fundamental basics of being able to create and edit images for the web is to make sure they are of the correct image size and file size and also of the correct format as previously detailed.
Examples of free/readily available software you can use is as follows:
Microsoft Paint - This comes as a standard accessory on a Windows PC and is useful for cropping images and for saving them in the correct file types as detailed above. I use Paint for pasting screen shots in and then cropping the bit I want etc.
Picasa - This is free software provided by Google that you can download to your PC. It allows you to organize, edit, view and share photo’s with people on Google. It’s great for altering your image and file sizes and also for adding some different effects to your images.
When using images on the web it’s always nice to be able to use your own if you can. Using other peoples images from the web can result in copyright issues so you need to be careful what you use if you do. There are however many images you can use on the internet, you just need to check the websites you get them from for any terms & conditions. You can type "Free images" into your browser to get a list of sites you can use. You can also do an "Image search" via your browser (select the images tab on your browser window) and and then change the "Usage rights" in the advanced search section.
When using images in your web pages you need to ensure that they are saved in the same folder as your web document/HTML file otherwise they wont work. I create a folder for my HTML docs then save another folder in that for my images.
When inserting images with HTML you need to use the <img> tag. This is a standalone tag and does not need a closing tag. Within this tag you need to add what the picture cource is you want to insert and will look like something this; <img src="filename.jpg"> for example. You can also add further HTML syntax in your <img> tag to edit your image and adjust it’s size and position on your page and add borders to it etc.