1 / 12

Create Buttons Task

Today, we delve into the aesthetic of 80s game websites and explore graphic design fundamentals. Participants will learn the concepts of vector and bitmap graphics, create buttons using various tools, and evidence their designs. The session includes a practical task: design 12 buttons for an estate agent with 3 major buttons, each having normal and mouseover states. We will also discuss the differences, advantages, and disadvantages of vector versus bitmap graphics, enhancing your understanding of various design techniques.

miron
Télécharger la présentation

Create Buttons Task

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Create Buttons Task OCR National - Unit 21

  2. Today we will • Consider what an 80s game website might have as a “look and feel”. • Understand the meaning of the terms vector and bitmap as used to refer to graphics. • Create the buttons that we have planned. • Understand how to evidence the creation of the buttons.

  3. Name the game • You have 5 minutes to complete the worksheet. 4 3 2 1 0 5 You now have minutes left.

  4. Vector Vs Bitmap graphics • Vector • No actual image • Set of instructions to draw basic shapes • Shape • Size • Fill • Rotation • Bitmap • Pixels (Picture Cells) • 1 dot on screen • 100 x 100 pixels = 10,000 dots • Compressed or uncompressed

  5. Houses Houses Houses Houses Houses Simple button created using the rounded rectangle tool. Text added. Outline graphic of a house added using the rectangle and trapezium tools. Shapes filled to create normal button state. Button shape fill reversed and text colour changed to create mouseover state. Shapes grouped then saved as GIF images. (Right click, save as picture, choose GIF) Creating a button for an Estate Agentand evidencing it

  6. Houses Houses Houses Houses Houses Simple button created using the rounded rectangle tool. Text added. Outline graphic of a house added using the rectangle and trapezium tools. Shapes filled to create normal button state. Button copied. The rounded rectangle fill was reversed and the text colour changed to create the mouseover state. The shapes were grouped then saved as GIF images. (Right click, save as picture, choose GIF) Creating a button for an Estate Agentand evidencing it

  7. Houses Button states

  8. Houses Houses Button states Mouseover

  9. Houses Houses Button states Detached Selected Semi-detached Terraced

  10. Houses Houses Houses Marking Detached Simple = Pass level Complex = Merit level Interactive = Distinction level

  11. Houses Create 12 buttons • 3 major buttons • 2 states (normal and mouseover) • 3 minor buttons • 2 states (normal and mouseover) Detached Semi-detached Terraced

  12. Discuss and compare • Discuss the differences between vector and bitmap graphics • Advantages and disadvantages of both

More Related