Basic Shapes and Colors Web Design Section 5-8 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will: Utilize the shape tools to make a basic shape and fill it with color Select colors using the color palette Understand how to limit the palette to web safe colors Utilize hexadecimal values to maintain consistency in color use Use the Blending Options to create a visually appealing button.

Creating Buttons Over the next few days you will be creating buttons for your web page. We will be using Photoshop to create the buttons To create a button you will need to understand layers, shapes, colors, and gradients

Photoshop To begin to create a button you will need to create a new file in Photoshop Note the settings!

Create a New Layer Creating a layer allows you more options to change an image

Colors in Photoshop When working in Photoshop your colors are based on a color palette. You can select the color that will be used by clicking on “Set foreground color” or “Set background color”

Colors in Photoshop When using the color picker for the web it’s good to set the palette to web safe colors:

Web Colors in Photoshop Once you select Web Colors note how the palette is limited. Also note the web color is shown.

Drawing a Shape Right click on the shape tool for the different selections Once selected sweep the size of the shape you want in the layer

Modifying Shapes Once you create a shape you can then change the options Right click on the layer and select Blending Options…

Blending Options There are many options for each of the blending options. Click on the name in the list and the options are brought up in the next task pane. Look at the options for

Blending Options Start with: Apply Options: Result:

Summary Use the shape tools to insert shapes into a layer Select colors using the color palette Use the Blending Options to change the look of the shape.

Rest of Today Use Photoshop to create your own button. Do not simply recreate the button from this talk. Look at the other blending options and try them out. Try changing some of the parameters. Use colors that fit with your web page Save your button! You will be using this on your webpage.