Saturday, 2 June 2007

More weaving of those dreams...

Ok before I begin on images I'll talk about the layout of your folders: create a folder called "web" in which you will keep all your website uploadable things. Inside "web" create another folder called "images" in which you'll put all images that load onto your web including any .gif's or other moving images and flash based stuff. As you go along creating your website make sure all the future folders you make are containing in the original "web" folder so when you move that folder nothing is left behind and therefore no links become broken. You may have a folder for "pages" or "sounds" or "animation" depending on the content of your site. Always make sure you don't use capital letters or spaces when naming files to go on your website as this may cause problems in the future which will take an age to fix so you might as well do it right the first time, right?

Ok, when working on images you need to make sure they always have a resolution of 72dpi and are in .jpg format or .gif/.png (for buttons, simple moving images or simple images) and make sure they're in the colour format of RGB rather than CYMK which is used predominantly for print not web.

When creating images for your website always save them into your "images" folder with logical names you can follow. so say you've got 3 pictures of a tree and you want to have them as thumbnails that load etc. save them in the correct format as tree1, tree2, tree3 etc. so when you're linking your pages it's a hell of a lot easier to follow. It's all about planning ahead - it makes it a lot easier in the long run.

Ok so you've got your image open in photoshop editing it, and your ready to upload? open imageready (it comes with photoshop) this allows you to optimise the image for the web and you can choose the image quality which will change the loading time. So an image with a higher quality will take a longer time to load on a site... genius. Check the download speed which is shown at the bottom right as 28.8 kbps which is oldschool modem stylee so deside that time by 8 to come up with the time it will take to download using broadband (as there are very few people who haven't got it now-a-days). then save to images folder.

You can also use "slicing" to make images load quicker which, in short, slices an image into sections that will loads separate of the other slices - this is useful for larger images.

ok so now your image is ready for dreamweaver, it's been optimised and saved as a 72dpi, RGB .jpg image into your images folder in the web folder, yes?

if no go back and do it right damnit!

Ok, sorted? right open dreamweaver, on the top task bar you have an option to insert an image, clicky clicky. Choose the image path (find it in your folder) and it should show up on the design section of your screen and also in the html code as the image path etc. easy. you can then add hotspots and other jazz... we'll get to that.

Going to get a cup of tea now.

No comments: