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.

Elements and Principles of Design Quiz

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

http://www.questionpress.com/mrballew

Quiz on the Elements and Principles of Design on Monday, September 16th

A design is an arrangement, a way of organizing something. In art, even though we use many different materials, the visual appearance (that is what our eye sees and our brain decodes) can be reduced to seven elements of design. They are line, shape, form, space, color, value, and texture. They are what we organize. They are the tools.

The principles of design are how we organize or use the tools. The seven principles of design are balance, emphasis, movement, pattern, rhythm, variety, and unity.

Elements of Design

Line is a mark with greater length than width. Lines can be horizontal, vertical or diagonal, straight or curved, thick or thin. 

Shape is a closed line. Shapes can be geometric, like squares and circles; or organic, like free formed shapes or natural shapes. Shapes are flat and can express length and width.

Form are three-dimensional shapes, expressing length, width, and depth. Balls, cylinders, boxes and triangles are forms.

Space is the area between and around objects. The space around objects is often called negative space; negative space has shape. Space can also refer to the feeling of depth. Real space is three-dimensional; in visual art when we can create the feeling or illusion of depth we call it space.

Color is light reflected off objects. Color has three main characteristics: hue or its name (red, green, blue, etc.), value (how light or dark it is), and intensity (how bright or dull it is).

Value is how light or dark the color or tone is.

Texture is the surface quality that can be seen and felt. Textures can be rough or smooth, soft or hard. Textures do not always feel the way they look; for example, a drawing of a porcupine may look prickly, but if you touch the drawing, the paper is still smooth. 

Principles of Design

Balance is the distribution of the visual weight of objects, colors, texture, and space. If the design was a scale these elements should be balanced to make a design feel stable. In symmetrical balance, the elements used on one side of the design are similar to those on the other side; in asymmetrical balance, the sides are different but still look balanced. In radial balance, the elements are arranged around a central point and may be similar.

Emphasis is the part of the design that catches the viewer’s attention. Usually the artist will make one area stand out by contrasting it with other areas. The area will be different in size, color, texture, shape, etc.

Movement is the path the viewer’s eye takes through the artwork, often to focal areas. Such movement can be directed along lines edges, shape and color within the artwork.

Pattern is the repeating of an object or symbol all over the artwork.

Rhythm is created when one or more elements of design are used repeatedly to create a feeling of organized movement. Variety is essential to keep rhythm exciting and active, and moving the viewer around the artwork. Rhythm creates a mood like music or dancing.

Unity is the feeling of harmony between all parts of the artwork creating a sense of completeness.

Contrast offers some change in value creating a visual discord in a composition. Contrast shows the difference between shapes and can be used as a background to bring objects out and forward in a design. It can also be used to create an area of emphasis.

The 10 Rules of Netiquette

Today we will be moving into exploring the world wide web and what your responsibilities as 'Netizens' are to this relatively new form of communication medium in our society.

You will compose an email using any email account you have currently, and will use it communicate with your teacher (me) and others over the web. Please click on the url link below. This will send you directly to today's reading assignment.

You are required to read all 10 'Netiquette Commandments' and write out short one sentence definitions of each Netiqeutte in a 'Word' document on your computer. You will then turn in these 10 definitions by attaching your Word document to an email that you will send to me by the beginning  of class on Monday, September 16th.

Send your email to me at marty.ballew@shorelineschools.org

You will not get credit by copying and pasting text from the Netiquette website into your Word document. You MUST write out your own paraphrase in YOUR own words from the following Netiquette Commandments.



1. Remember the human

2. Adhere to the same standards of behavior on-line that you follow in real life.

3. Know where you are in cyberspace.

4. Respect other people's time and bandwidth.

5. Make yourself look good on-line.

6. Share expert knowledge.

7. Help keep flames under control.

8. Respect other people's privacy.

9. Don't abuse your power.

10. Be forgiving of other people's mistakes.


Use complete sentence structure and capitalize when needed.

Click on this link:
www.albion.com/netiquette/corerules.html

Your First Assignment

We all use the Internet to look up information, listen to music and watch video clips, or play online games. Regardless of that your intended use is for the Internet, there are literally millions of websites you could choose from in order to obtain your information. What makes a person choose one website over another? Is it the colorful layout, the organization of the information, or the ease of navigating through the website?

For this assignment you are to search the Internet and find THREE websites that you use or visit frequently. After settling on your websites rank them according to the best (1st) to 3rd best website. If you like, you can base your decision on design or ease of use, or both.  Make sure to include the url address for each website.

For each website that you rank, write one short paragraph about each site and explain why you ranked the site the way you did. In other words, what do you like about this site? Anything you don't like? Mention that too. Use the vocabulary that you have learned about from the Elements and Principles of Design to describe what you are seeing on these websites.

Bold and underline the Elements and Principles of Design vocabulary that you use in your descriptions

Be prepared to share you thoughts on some of the websites you choose to evaluate as we will look at these websites as a class on the projector.

You are to write up these descriptions in an email and send them to my email address which is marty.ballew@shorelineschools.org

Grading:


Website Write-ups
Ranking THREE websites (5 Points)
Explanation of ranks (10 Points)
Elements and Principles of Design vocabulary used (5 Points)


THIS ASSIGNMENT IS WORTH 20 POINTS AND IS DUE BY THE END OF CLASS ON WEDNESDAY, SEPTEMBER 11TH.

Welcome Web Design Students

This website is designed to keep you up-to-date with all things related to this class.
This is where you can come to retrieve your assignments and link to your tutorials.
Whenever you have any questions regarding Web Design assignments, you can first look on this website for details. If your out of the classroom and your questions remain unanswered, feel free to email me at marty.ballew@shorelineschools.org
Please read the blog posting I created below to learn about topics relating to this week's material that we'll be covering. When finished, I will go around the room to ask questions about this posting, so read carefully.