CRT - Creative Technologies
Class 7 - User Testing, Interactivity & Interface
Discuss Assessment Task 2
Review the assessment task and discuss options for the topic you might choose for your HTML Poster.
1. How to create a "fancy" font piece of text in Photoshop with transparent background
In Photoshop, create a new file with transparent background. You can then experiment with fonts in different sizes and colours, using different effects. Make sure your background stays transparent. You can save your working file as a PSD (Photoshop file), but when you want the image you need for the web, you will need to do an "Export for Web" output and save the file as a PNG-24 with transparency (check the box that allows transparency).
You must save this image in the folder that has all of your HTML content. The best practice is to have a sub-folder in your web folder titled "images" and put all of your images in there.
Remember the requirements for image format:
JPG - good for background images as they are smaller than PNG-24. you can select a compression quality so that if you have a large background image, you might be able to get a way with a "medium" quality compression for your JPG which will give a small file size.
PNG-24 - good for high quality images and images that require transparent backgrounds. you may need transparency in images that you want to layer together in the web page.
Resolution: It is important to make sure that your images for the web are only 72 dpi (dots per inch) because this is the maximum that your screen displays content at. Higher dpi such as 300, 600, 1200 are used for printing purposes, and are much too big for the web.
Dimensions: you must consider the width and height in pixels for your images - you don't want to use a massive image and scale it down because this is a waste of broadband for your user to download. This is why it is important to create wireframes and think about the entire width/height for your screen size, then plan the images that you need according to that size.
For example, if your screen size is 1200 x 800 pixels, then your logo may only be about 400 x 200 pixels in size. So if you have a logo that's 1000 x 500 pixels, you need to resize it in Photoshop, then save a copy in your web/images folder and use the smaller version. you need to apply this method to all of your image development for the web.
2. How to layer background image and content in <div> layers in Dreamweaver
You can use images as your background instead of colour. This requires understanding styles for "tiling" the image to see how it repeats in the page or element. If you want a background image for your whole page, the image needs to be large. There are considerations here because of file size. I try to make a JPG image with low compression so that even if the image is large in width & height, it is still small in Kilobytes so it loads quickly.
to set a background image for your page, go to the Modify menu in Dreamweaver and choose Page Properties. You can set a number of different page properties that will affect the whole webpage. For the background image, choose Background Image and link to a file in your Dreamweaver Site - remember, you must put the files in your Site images folder before you link to it.
The other property you need to know for background images is the Repeat property. By default, any background image in a webpage will tile (repeat) itself in both X (across, left-right) and Y (down, up-down) directions. You can control this with CSS styles and the Repeat property in the Page Properties panel makes the task easier by allowing you to choose from a drop-down list.
Choose from repeat, repeat-x, repeat-y or no-repeat. your selection will depend on whether you have a small image that can be tiled, or a very large image that will not be repeated. You should consider how big the contents of your webpage will be and how much scrolling will be involved to make sure your background image is adequate. There are many tricks and techniques that designers use to make clever background images that tile in different ways like very thin but very long images with gradients that only repeat on the X so you get a very small file size, but it looks as if your whole background has a gradient image covering it. In the early days of web design, there were some pretty horrible background tiled images - even very annoying animated GIF images as backgrounds, so if you want to make a "retro" website circa 1995, make a loud, irritating small image and tile it over your entire background.
The sample folder contains an example I have created that demonstrates the following:
Other Things to Do/Remember