Header Plan

Website Header


Project & Enabling Objectives

After viewing a variety of web page headers students will demonstrate their ability to create a series of web site headers utilizing Adobe Photoshop. After viewing a variety of header image samples students will use their understanding of Photoshop to create a series of website headers that combine images and express a theme. Upon reviewing student’s prior knowledge of combining images utilizing various selection tool techniques, students will demonstrate their ability to utilize transparent and fade techniques to overlap images. Along with prior knowledge of effect>stylize>fade techniques, students will become proficient with brush hardness and be able to create a faded feathered edge to images.  Students will understand the basic components of the header including title, tagline and header image.


Learning Standards

Art Standard 1: Creating, Performing, and Participating in the Arts. Students will actively engage in the processes that constitute creation in the arts and participate in various roles in the arts.

MST Standard 5: Technology Students will apply technological knowledge and skills to design, construct, use, and evaluate products and systems to satisfy human and environmental needs.


Visuals Resources

Full screen projection and demonstration of applications used in website development, classroom websites depicting tutorials aiding in project development.



  Phase One, Presentation; Clarify Aim; Review prior knowledge of Photoshop tools magic want, magnetic lasso, and transparency settings.

  Phase Two, Visuals and Demonstration; Show students a sample of the work to be completed highlighting instances of overlapping images that utilize faded image components. Demonstrate the brush hardness and brush transparency tools within Photoshop. Present classroom site tutorials. Discuss the procedure for overlapping images and creating transparent fade technique. Discuss the term header and tagline and provide examples. Have students find two images that they will overlap while fading the overlapping image into the underlying photo.

  Phase Four, Monitor progress and Provide feedback, address common issues and problems.

  Phase Five, Outcome and Discussion; View various student site headers and header templates within Google and highlight the effect evident within.


Summaries & Key Questions:

What are the basic elements of a website header?  

How do designers develop themes within their work?

How do designers fade pictures to integrate images as one visual expression?

How do designers group colors to create color harmony in their work?

What skills are needed to develop header designs for website development?


Time Frame: 7 working sessions



Header- top of the site, contains the title, tagline, and logos introducing the content of the site.
Tagline- the subtitle of the site found below the header, ex. a site titled The Brain might have a tagline called, “Where Ideas are Born”.
Navigation- also called a menu bar contains links to other pages on the site.
Body- main content of the site below the header, contains information conveyed in the site, such as text, video, pictures, or a combination of these.
Footer- the bottom, below the content area, contains copyright, addresses, email contact, or other links.

Transparency- the ability to see through and image, also opacity.