1 / 14

Basic Shapes and Colors

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

yaakov
Download Presentation

Basic Shapes and Colors

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. 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

  2. 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.

  3. 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

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

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

  6. 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”

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

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

  9. 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

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

  11. 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

  12. Blending Options • Start with: • Apply Options: • Result:

  13. 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.

  14. 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.

More Related