Web Design Final

Click on the link below to take your Final

http://www.questionpress.com/mrballew

Signing Up for Tech Prep

http://sers.techprepwa.org/
Click Create an account under students click here.

Create an account. Fill out all forms marked with a red asterisk.
For Career Cluster pickle anything you want.
For Future Plans pick whatever is best.

Find Shorewood High School and select Web Design, Video, or Digital Photography with Mr. Ballew as your teacher.

Spry Menu Tutorial

Click HERE to learn more about creating an effective Spry Menu.

Creating Banners for Your Website

You will be creating all 12 Banners for your Website today in Photoshop.
Each banner will have the following dimensions:

Width = 1024 pixels
Height = 150 pixels

You MUST save each of these banners as a .png file.

What to do Friday, November 22nd

Today you will continue to work on your Magazine Cover.
If you think you're done, you're not!!!
Remember when we discussed "Revisionism" in class when we were working on the "B-Movie Assignment".   Every digital artist and designer goes through this process and you will too.

Open your Magazine Cover in Photoshop and go to "File", "Save As" and save it as _magazine2
Now change your Magazine Cover to be COMPLETELY different from your first version.  You can use different imagery for your second version, but if you use the same imagery, you must change the placement and look entirely.

Both versions are to be turned into my "Classes", "Period 3" folder by the end of class today.

If you finish early, continue your research for your 12 page website.

Photoshop Refresher - Advertising Your Website

Design a cover for VIBE, VOGUE, LIFE, PEOPLE, ROLLING STONE, or any other popular magazine. Pick a style of design from any of these magazine types and try to emulate it's looks and style.
Your Photoshop document will be 8.5" Width x 11" Height.

The Requirements for this Assignment are as Follows:

1. A minimum of 3 images that you have found on the internet must appear on your Magazine cover.
2. There will appear on this cover a "Feature Article" about your website and this must be appear prominently in the layout of your magazine cover.
3. One of these image of emphasis on your cover should be high resolution.
4. EACH of your images must be accurately selected and use at least one layer style.
5. There must be 2 other "featured articles" of less prominence , featured somewhere on this cover, as well. These articles can be completely fake.  Think of some funny names for these articles and what they would be about, but make it appropriate.

Use the naming convention _magazine.





This assignment is due by the end of class on Friday, November 22nd.

What to do today, Monday the 18th

I am sorry to have to be absent again today, class.
While I'm out, please continue to brainstorm, research, and find images for your 12 page website.
That is plenty of work for you to keep busy with today. 
You will have a special Photoshop design assignment on Wednesday and I will be checking of your "Brain Paper" then as well.

Pre-Production on your 12 Page Website

Here are the following aspects of your ideation process that you'll be working on in the development of your 12 page website:

1.  Who is your target audience?
2.  Writing out a Mission Statements for your website.
3.  Revising your Topic/Subtopics, if needed.
4.  Gathering images and informational material for your Topic/Subtopics for your website. (You will need a minimum of 250 words per webpage.)
5.  Storyboard your Home Page, including your navigation area.

What is a Mission Statement?

A mission statement is a statement of the purpose of a company, organization or person, its reason for existing.  In this case, what your website will be about, and the information it will cover.
The mission statement should guide the actions of the organization, spell out its overall goal, provide a path, and guide decision-making. It provides "the framework or context within which the company's strategies are formulated."

HTML QUIZ

Click on the following link to take your Question Press Quiz:

http://www.questionpress.com/mrballew

How to Add Hypertext Links

Below is a screen shot of the code that you will need to add to BOTH of your HTML documents.
Here are the requirements:

• You MUST add Horizontal Lines both above AND below your Hypertext links.
• You MUST add both Hypertext links to both your Topic AND Subtopic pages
• You MUST center both of these links on both pages
• Both links MUST be able to link to one another on BOTH pages

Here is the code you will need to use to succeed with the Hypertext link Rubric:

HTML Webpage Revision and Enhancement

You now have an added Rubric to both of your final HTML Webpages.
You must do the following:

1. You must add 2 hypertext links to both your "index.html" and "subtopic.html" webpages.
2. You must replace your current Headers on both webpages with creative, and visually interesting banners that you create in Photoshop. These banners must be saved as .png files to ensure continuity in your background color.

 Your revised HTML website is now due by the end of class on Wednesday, November 6th.

HTML Color Codes

Here is a link to a bunch of HTML color codes that you can use for your website:

http://www.pagetutor.com/common/bgcolors1536.html

Introduction to Web Encoding through HTML

First, you will need to read through Lessons 1- 6 at the following website:

http://www.alternetwebdesign.com/htmltutorial/lesson1.htm

Next, you will complete an exercise using nothing but HTML Code to create 2 web pages on any topic of your choosing. (The topic must be school appropriate and checked off by Mr Ballew before you begin.) You will email me your topic idea to marty.ballew@shorelineschools.org. YOU MUST INCLUDE 'MY HTML TOPIC' ALONG WITH YOUR FULL NAME, IN THE 'SUBJECT' LINE OF THE EMAIL YOU SEND.

You will be required to storyboard your 2 web pages by hand drawing each page on a blank piece of white paper.

Your web pages must have a background color and font color that are Harmonious. By using Analogous, Complementary, or Natural color schemes, you can achieve this color harmony on your 2 web pages.

• Go online and find information regarding your topic.
• You will have 1 Topic and 1 Subtopic.
• The Topic will be your Homepage.
• The Subtopic will be your second that you will link to from your Homepage.
• The information I am looking for is anything that you feel the reader MUST know about your topic and subtopic. What are the top 5 things your reader MUST know about your Topic and Subtopic.
• You will write no fewer that 2 sentences per 'thing' that is a MUST know for the reader. (10 Sentences for Topic and 10 sentences for Subtopic.)
• You also need to find 8 images that are relevant to your Topic (4) and Subtopic (4).
• You will need to Storyboard your 2 Webpages.

You will also have to italicize 2 words and bold 2 others.

You will need to include a hyperlink from your main 'index.html' page to your second HTML page.

This assignment will be due by the end of class on Thursday, October 31st.

What to do Friday, October 18th

Today you will be taking the feedback that you received from the class to again REVISE your B-Movie Poster.
If you did not receive feedback yet, then you will need to ask your peers, neighbors, or friends in class what you should work on to improve and REVISE your 3rd and final version of your B-Movie Poster.
When you have completed this new version, you are to save it as a JPEG and turn it into my Classes, Period 3 folder with the naming convention _bmovie3.
This assignment is due by the end of class today.

Creating a Contact Sheet in Photoshop

Go to "File", "Automate".

At the top left click on the "Choose" button, and select the "Manipulated Quiz Photos" folder that you created on your Desktop.

Selections Quiz

You will have until the end of class to manipulate the following images, selecting the main emphasis in each photograph with any of the Selection tools that we've learned about in class thus far.  These tools would include, the Marquee Tools, the Lasso Tools, the Magic Wand, or the Quick Selection tool.

With each of the 5 following images you will need to ACCURATELY select the object (or subject) of emphasis WITHOUT ANY FRINGE, create a new layer copy,  and then digitally manipulate it in some way.  You are free to manipulate either the emphasis, the background, or both.

There must be a clear contrast between the emphasis in each photo, and the background. (Example, do not manipulate both layers with the same digital Image Adjustment, or Filter.)  Otherwise, you are free to choose whichever Image Adjustment or Filter in Photoshop that you think would look best.

When you are finished, put all 5 photos onto a contact sheet in Photoshop. Save it as a JPEG and use your naming convention and _selectionsquiz

Log onto the Staff server and put this document into "Classes", "Period 3".

IF YOU FINISH EARLY, GO BACK AND SWEAT THE DETAILS AND MAKE EACH DIGITAL MANIPULATION LOOK AS GOOD AS IT CAN, OR CREATE A COPY USING 'FILE', 'SAVE AS', AND TWEAK YOUR LAYERS WITH OTHER FILTERS OR ADJUSTMENTS!!! USE THE TIME YOU ARE GIVEN TO MAKE YOUR DIGITALLY MANIPULATED PHOTOS LOOK AS CREATIVELY MANIPULATED AS YOU CAN. (THINK ABOUT HOW ANY OF THE ELEMENTS AND PRINCIPLES OF DESIGN COULD BE USED TO ENHANCE THESE PHOTOS.)

Create a folder on your Desktop.  Call this folder "Original Quiz Photos".  Drag and drop the photos below into that folder.

Before you create your contact sheet, you will need to save the photos you've manipulated into a folder called "Manipulated Quiz Photos"

Here are your 5 photos:

The B-Movie Poster Assignment

Go to Google and do an Image Search of B Movie Posters.

The B-Movie poster you create has to be one that you make up. Be creative and have fun. Yours can be serious or funny, it's up to you!

Your Photoshop document will be 10" Width x 17" Height.

The Requirements for this Assignment are as Follows:

1. A minimum of 5 images that have been copied from images that you find on the internet must appear in the poster.
2. There must be a Main title for your movie poster along with titles for 2 characters that appear in your movie.
3. There must be at least one Slogan title that appears on your poster. (Think of the slogan for Superman, "The Man of Steal"
4. Your movie has to be made up, an idea that you come up with on your own.
5. You will use at least 2 different fonts for titles used on the B-Movie poster.

MAKE SURE TO LOOK AT THE POSTERS NEXT TO MY WHITE BOARD FROM STUDENTS OF YEARS' PAST FOR EXAMPLES. THERE ARE ALSO POSTERS OUTSIDE MY DOOR, TO THE RIGHT, IN THE ROOM OUTSIDE THE TECH LAB. CHECK 'EM OUT!

This assignment is due by the end of class on Monday, September 30th.

The Photoshop "Color Wheel" Assingment

Now that you know about the Color Wheel and the importance of color in Web Design, you will be demonstrating your knowledge and new-found Photoshop skills in assignment today.

You will be creating a Photoshop document that is comprised of 12 different objects you collect in  class that accurately select and cut out these objects and drag them over to your 12 inch x 12 inch Photoshop document.

 MAKE SURE THAT YOU DO NOT HAVE ANY 'FRINGE' ON THESE OBJECTS YOU SELECT!!!! THIS IS A BIG PART OF YOUR GRADE FOR THIS ASSIGNMENT.

Arrange these objects in the order that the colors appear on the Color Wheel above.
Resize these objects using the "Free Transform" function (Command, T) so that each object is relatively the same size.
The naming convention for this assignment is (example) '3_ballew_colorwheel' (.psd)
You should complete this assignment by the end of class on Tuesday, September 24th.
Good Luck!

Color Harmony

Click on the this link HERE

Read about "Harmony in Color".

Once you've finished reading this assignment, continue to search on the internet for websites.  This time, look specifically for 3 websites that utilize harmony in their Color and Design. 

For each website, tell me what type of Color Harmony is being used?  Analogous or Complimentary?

Now try to find 1 example of a website that is using color, but not using Color Harmony.  Tell me what does not look right about this website?

We will be looking at these sites and discussing them in detail on Thursday.