160 likes | 376 Vues
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
E N D
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. • Keep the size at 75x75 • 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 • Once you have your button, complete Homework 5-8 from the Hancock Website.