Unit 21: Web Graphics A05: Banner Advert Year 10 ICT OCR Nationals Unit 21: Web Graphics A05: Banner Advert

Lesson Objectives To recap on what has been done in Unit 21 so far To understand the requirements for AO5 Pass, Merit and Distinction grades and how to achieve them To understand the term ‘interactivity’ and to be able to add interactivity to the banner advert by creating a rollover button which links to a website To be able to animate the banner by adding extra frames (if there is time)

A05: Banner Advert Pass Grade: Create an banner advert which advertises the RecycleGB company Merit Grade: Add some form of interactivity to the advert, such as button that links to a website Distinction Grade: Add animation to the banner to make it more interesting and eye-catching

Interactivity Interactivity is a difficult term to define Computer games are interactive because you play them and control what happens – you don’t just watch them, you get involved For an advert it means that the person looking at the advert gets involved with it or controls it in some way A simple way of adding interactivity to your advert is to add a button which links to a website – you are then controlling what happens.

AO5: Banner Advert Task Continue work on the banner advert you started last lesson Make sure that the advert is colourful and has text and graphics on it and displays some useful information, i.e. it advertises the RecycleGB company Add an interactive rollover button to link to the RecycleGB website (www.recyclegb.co.uk)

Adding Animation If there is time, try to add some animation to your advert This is done by adding extra frames to the graphic each with some slight differences – like a ‘flick book’ The advert must then be saved as an ‘animated gif’’ Watch the demonstration on how to do this

Plenary What have you learnt today? Assessment requirements for AO5 What interactivity means How to add simple interactivity Perhaps how to add animation

Unit 21: Web Graphics AO1: Web Graphics Research A02: Hand drawn designs for RecycleGB A03: Create RecycleGB Navigation Bar AO4: Create RecycleGB Rollover Buttons A05: Create RecycleGB Banner Advert AO6: Present RecycleGB graphics as a webpage

A06: Presentation Create a presentation to present your web graphics Slide 1: Title slide with your name and Unit details Unit 21: Web Graphics – A06: Presentation Slide 2: Navigation bar screenshot, cropped with labels Show any drop down menus included Slide 3: Navigation / rollover buttons cropped with labels Show at least three buttons Show the three states (Up, Over and Down) of one button Slide 4: Banner advert cropped with labels Show an interactive button if included Show screenshots of stages in any animations included Slide 5: Web page mock up with all three graphics Arrange your graphics on a page to look like a website

Navigation Bar Earth image from the web – background removed with magic wand tool Blue rectangle with gradient fill Blue rotated rectangle Orange rectangle with gradient fill Arial Bold text with inset emboss effect Arial Bold font with inner bevel effect – size 80pt Slices over text to link fo web pages

Rollover Buttons Rounded rectangle with drop shadow effect Up State Blue gradient fill with drop shadow effect Drop shadow Removed and position changed Rectangle colour changed to red Up State Over State Down State

Banner Advert Car graphic imported from the internet Start of animation Frame added and car graphic moved to the left Middle of animation Frame added and car graphic moved to left. Text added. End of animation

Web Page Mock Up This is what my webpage would look like with all the graphics on it and a blue background.

Web Page Mock Up This is what my webpage would look like with all the graphics on it and a white background.

Minimum Work for a Pass 2 navigation bars researched using headings given in table 2 rollover buttons researched using headings given in table 2 banner adverts researched using headings given in table 1 navigation bar drawn by hand and in colour for RecycleGB 1 set of buttons drawn by hand and in colour for RecycleGB 1 banner advert drawn by hand and in colour for RecycleGB Presentation showing each graphic you have created with labels and explanation Final slide shows a ‘mock-up’ of webpage with all three of your graphics on it made to look like a real web page