These are the Instructions for the Ninth module of this course:

We are going to be investigating on issues around Web Design.
We will become familar with basic tems and concepts around web design that will facilitate a more professional process next time we need to build a site.

Read this page on Web-layout and complement if needed with a search for major terms over the web:

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/designlayout1.htm

Complete this module's assignment for this class.

You will have to create a color-palette for an imaginary site as an assignment for this module.

Before you begin the task, refresh your memory on what is an hexadecimal value (to define web-colors),

http://soma.sbcc.edu/users/ajarabo/WEB_authoring/color_general.htm

Do a little search on the importance of using a color palette for your site.
you can also check this page:

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/color_theme.htm

When working on a color palette you can find a picture that defines the color-mood for your site and extract some colors from it in Photoshop to come up with a series of Harmonic colors or you can work backwards: Define some HUES in a color palette application and let the application create a harmonic family of colors around those hues. The objective in both methods is to find a combination of subttle colors that can translate a visual mood for a site.

http://colorschemedesigner.com/

This is an interesting engine that can assist you designing a color palette.
Play with the interactive interface: it can create a group of colors that are harmonic, using different color- principles: mono-hue (mono), complementary colors (complement), 3 colors being 2 adjacent in the color wheel and the other complementary (triad), 4 colors (tetrad), scheme of adjacent colors (analogic) and a mix of adjaccent and complementary (accented analogic).

Your choice on the left of the interface will generate a "fake rectangular page" on the right where to see the colors combined.Click on "light page" or "Dark page" to see a sample of how those colors could work on a page designed. You can select the colors that will integrate your color-palette and obtain the hexadecimal value by rolling over the block colors on the upper-right side of the page.

Great movie on color theory: http://www.lynda.com/home/Player.aspx?lpk4=96148&playChapter=False

As you might know, in painting and traditional color theory we use an ADDITIVE color palette, Red, Blue and Yellow being the primary colors.
When working for PRINT those will be replaced by slightly different tones: Magenta, Cian and Yellow, that will still work by "adding" one color to another to create different shades. The combination of all of them produce black.
In video lighting and screen color (colors seen through light) we use a SUBSTRACTIVE palette, with Red, Green and Blue as the basic light colors that combine all others and produce white light in combination.

Your color palette assignment

In this week's assignment I have asked you to import a picture to Photoshop and select colors from it with the eye-dropper. Using a color-scheme engine is an alternative to this. The important thing is that you end with 4-7 color values that will chromatically define your site.

In Photoshop you will create squares (marquee tool) and fill them with each one of the falues (with square selected fo File< Fill).
You will also write down the hexadecimal number underneath the colored square (Type tool).

Then you will create a bigger rectangle with one of the colors (in a new layer), smaller rectangles for text blocks or navigation bars on separate layers and text for the navigation items and the bulk text. You will do this 3 different times for each one of the color-mock ups.
(I advice you place all your layers for the fist mock-up inside a folder in photoshop _layers window_. Then duplicate the folder and modify elements for the second mock-up. Rename folder. Duplicate again a folder to create the third mock-up. Alter colors again)
Type font, size and color are important parts of the design. Try to make each page-mock up look different by playing with colors.

If you worked with a picture to obtain your colors, include the picture in the mock-ups.

You can submit a photoshop file (.psd) or a JPEG.

Assignment specifications:

• Use one picture to create a color scheme of 4-7 colors (the picture should be incuded in the file).
  
  
• Build a little rectangle filled with each color and write down the hexadecimal value.
  
  
• Try then 3 different possibilities of background color and text color whithin your chose values. Because web pages need to include so much content very often you have to create several blocks of text within a page. Those visually different areas usually have different background colors.
  Section names, section names on rollover, block-headings, block sub-headings and bulk text usually have different color and font treatment. A color palette treatment doesn't have to have finished design but it needs to have enough to create a visual mood the client can use to choose a design for their website.
  
  
• Save your test in Photoshop. You can send me a jpeg of it.

Links to free training movies on Basic Photoshop skills (I am linking to old versions of the software because it is more likely to find free movies at lynda.com)

Working with layers, Link to the whole volume
http://www.lynda.com/Photoshop-CS4-tutorials/layers-in-depth/776-2.html
Selecting portions of artwork,
http://www.lynda.com/Photoshop-CS4-tutorials/selections-in-depth/52106-2.html

Typing in Photoshop: point type,
http://www.lynda.com/home/Player.aspx?lpk4=85697&playChapter=False

Color for designers. If your have a subscription to Lynda.com ($25 a month) the first chapter has videos on how to use KULER: Adobe's tool to create color palettes.
http://www.lynda.com/Photoshop-CS5-tutorials/Photoshop-for-Designers-Color/89042-2.html

Using the free transform for scaling, rotating or skewing.
http://www.lynda.com/home/Player.aspx?lpk4=65604&playChapter=False

Complete tour of Photoshop interface,
http://www.lynda.com/home/Player.aspx?lpk4=65922&playChapter=False

Make your post in the Forum Web Layout 1.