Uppingham Community College Website Banners

Website Design Teacher Lead Activity What do these 3 websites have in common - Discuss? Talk to the students and explain to them that each of these websites have a banner and easy navigation. Before we can start to build a website, we need to be able to identify it. These 3 websites have a theme and people can identify them through their logo and their buttons / colour scheme. Websites should also be built at a specific resolution.

What is the default screen resolution? The default screen resolution for computers is now (1024 x 768) 3

Objective: - We’re learning to develop images for our website using graphics tools Before we can start creating our buttons and graphics for our website we need to grab some images relevant to each page of our website. Task 1: - Grab some images from the internet and acknowledge the website in a word document with the name of the image (Copyright) – This will be required once you’ve built your website. 4

Objective: - We’re learning to develop images for our website using graphics tools Task 2: - Create a new Fireworks document with the size 1024 by 150. Why do we have the width at 1024? At this point, your teacher will show you how to use Adobe Fireworks and you will see how to cut out images. These are bitmap tools. Check to see if your students were listening earlier. Walk the students through using Adobe Fireworks. Show them how to cut out pictures using the Feather tool. You can follow the video on the website Bitmap tools are tooks which allow you to manipulate the image. This is what happens when people ‘photoshop’ images. They can add or remove pixels. When you zoom in on a bitmap images, it will pixelate. Bitmaps can change in size depending on the pixels used. Get them to think about their own phones…. 8 megapixel / 12 megapixel etc… The next slide has an example. 5

BITMAP TOOLS Check to see if your students were listening earlier. Walk the students through using Adobe Fireworks. Show them how to cut out pictures using the Feather tool. You can follow the video on the website Bitmap tools are tooks which allow you to manipulate the image. This is what happens when people ‘photoshop’ images. They can add or remove pixels. When you 6

Objective: - We’re learning to develop images for our website using graphics tools Task 3: - You are required to create your own E-Safety logo for your website. Your teacher will introduce you to vector tools so that you can draw your logo. Once you’ve complete your logo Cut around other images and create a banner which will represent your website. Check to see if your students were listening earlier. Walk the students through using Adobe Fireworks. Show them how to cut out pictures using the Feather tool. You can follow the video on the website Vector images are made up of lines and shapes. The aim of using vector tools is so that you can create images for a larger scale. If I wanted to produce a logo, I would want it to work on a massive billboard without having to re-produce it. Vector tools allow us to do this. See the picture on the next slide. Now show your students some of the vector tools available and show them what they can do with it. 7

VECTOR TOOLS Check to see if your students were listening earlier. Walk the students through using Adobe Fireworks. Show them how to cut out pictures using the Feather tool. You can follow the video on the website Bitmap tools are tooks which allow you to manipulate the image. This is what happens when people ‘photoshop’ images. They can add or remove pixels. When you 8

Objective: - We’re learning to develop images for our website using graphics tools Task 4: - Remember that you created a banner at 1024. Our buttons will need to be 150 by 75. Use the image you selected for each button. Combine text and your image editing skills to produce your 4 buttons for your web page. Check to see if your students were listening earlier. Walk the students through using Adobe Fireworks. Show them how to cut out pictures using the Feather tool. You can follow the video on the website 9

Keywords: - Vector / Bitmap / Screen Resolution Plenary Our next lesson will aim to show you how to use your images and you will learn about templates. You have learnt about a number of new things this lesson. Teacher Lead Activity Keywords: - Vector / Bitmap / Screen Resolution Vectors Bitmaps Screen resolution