Home Digital Design Typography Computer Graphics Music Appreciation

HTML Test 1

Create the following:

A heading 1 with "HTML Test 1" at the top

A Paragraph with a brief bio of yourself:
Name(heading 2)
Unordered list of at least 5 things (character traits, accomplishments, etc.)

Copy the bio and comment out all the text of the copy.

Create a table with the following:
2 columns
2 rows
1 image in each row with a description in the corresponding columns
one description needs to be Bold
one description needs to be italic

A small paragraph of preformatted text

Links to google (red text with larger font) and yahoo (blue text with smaller size).

A form with the following:

Form name="input" 

Input text field for submitting "Your Name"
Radio Button for "Male" and "Female"
Check Box for "True" or "False"
Button for "Submit" 


Homework due Tuesday after Spring Break:

5 images

  1. Color Correction
  2. Crop 4 times with masked layers
  3. An example of this assignment is here.

The Syllabus for this class is available here.

Make your first website mockup real.

Click here for the source code we will use in class.

If you need help with coding this webpage refer to www.w3schools.com.

If you want a program to help with building websites you may consider Aptana Studio or PSPad.

If you need a free application for editing webpages you may want to check out: PSPad or Nvu

If you want a free graphic software for pixel based graphics try Gimp.

If you want a free vector based graphic software try Inkscape.

If you want a free 3D modeling platform try Blender.

Parks and Fish

Use this link for specifications on building the site:


Introduction to Photo Correction

2-4-10 Layer Structure Example:

Layer Structure Example

Download the example Photoshop File Below:

Example for Layers Editing


Save the picture above for class.

4 Brushes

Create one of each of the following brushes for Monday, 9-21-09

  1. Trendy circles from the tutorial below. Remember to click the image to be linked to the tutorial site.
  2. Black and White photo.
    1. Use an image in Photoshop with a resolution of 300 px/inch. (go to Image/Image Size in order to change the resolution if necessary
    2. Mask away any areas, or delete, that you don't want included in the brush
    3. Make sure you don't have the mask selected if you used one
    4. Go to Edit/Define Brush Preset
  3. Curvy Lines in Illustrator
    1. Use the pen tool to draw a curvy line
    2. Duplicate the line several times
      1. Hold the Alt/Option Key and left click the line
      2. Move the duplicate line slightly away from the original
      3. Release the mouse button before the Alt/Option Key
      4. Use the Align tools, if necessary to aid in lining up the lines
    3. Be careful not to use a fill color on your lines.
  4. Your name
    1. Create a cool looking brush with your name in it that could be used as a stamp, like an ink stamp
    2. I will be grading this brush for creativity, unlike the other three. So be sure to make it look cool

Dynamic Shapes

Dynamic Shapes 3

Here we will focus on creating designs that work well utilizing a single shape. You will use Adobe Illustrator to create 5 draft designs:

  1. Must contain only one shape and variations of that shape.
  2. You may use value to represent dynamics, repetition, rhythm, 3-dimensional space, etc.

This is due at the beginning of class Wednesday, 9-16-09.

The example below lacks balance and symmetry. Keep this in mind when creating your designs. They need to make sense. Keep it simple. Less i more.

Dynamic Shapes 1

The Graphic Design Process:

  1. Written concept
  2. Thumbnail Drawings
  3. Critique
  4. Detailed Drawings
  5. Critique
  6. Digital Re-Creation

Week of August 30 through September 5, 2009

This week we will complete the following:

Study Gradients and Layer Properties further

Create a Company Logo

Use the Graphic Design process below to design a company logo for an existing corporation such as; Coca-cola, Pepsi, McDonalds, etc. You may begin working on this week's work prior to class on Monday, August 31. We will discuss it all Monday. Please ask any questions that you have.

The Graphic Design Process Revised:

  1. Written concept - In extreme detail describe the concept/idea of the logo:
    1. Target Audience
    2. Color Scheme - Maximum of 3 colors
    3. Mood
    4. Intended reaction
    5. etc
  2. Thumbnail Drawings:
    1. Small, quick, hand sketches with minimal detail that capture the basic concept of the design
    2. Each Thumbnail Drawing should be unique, but it is okay to create multiple variations on a theme
    3. For this logo project create a minimum of 40 thumbnail drawings
  3. Critique Session:
    1. This will be done in class
    2. We will review each other's work thus far and offer constructive criticism
  4. Detailed Drawings:
    1. Larger than Thumbnail Drawings
    2. Very Detailed
      1. Full-color if possible
    3. Complete a minimum of 3
  5. Critique:
    1. Another in class critique session
  6. Digital Re-Creation:
    1. Complete the logo in Adobe Photoshop

Gradient Banner

Banner with Name

An example photoshop document is available here. Use the following tools:

Schedule for completing the Company Logo above:

  Monday Tuesday Wednesday Thursday Friday/Weekend
Company Logo Step 1: Complete in class Monday, 8-31. Step 2: Homework, Bring to class on Wednesday. Step 3:
Meet in class Wednesday, 9-2 and discuss each other's work. Be critical. Don't be afraid to say if a design looks bad.
Step 4:
homework. Bring to class on Monday.
Bring to class on Monday, September 7.
Gradients Tutorial for banner with gradients and your name. Create your own version of the name banner. Discuss each other's banners. Complete your own version of a banner with your name. Bring into class on Monday, September 7.

Our goal is to learn Photoshop basics while using the skills and creative thinking that we already posses outside of design software. This will enable us to integrate our knowledge, both new and pre-existing, with our new design and software skills.

Understanding Gradients:

Spiral Gradients

Spiral Gradient Example

  1. Create at least 10 gradients. 
  2. Apply each gradient in a Square on top of the Background Layer with a gradient inside of it.
  3. Be sure to use each type of gradient (Linear, Radial, Angle, Reflected, Diamond) at least once in its own layer.
  4. You can create a new square for each Layer with a Gradient in it or use the same square selection for each layer.
  5. Place a Drop Shadow on each layer.
  6. Bring in to Class Monday, August 31, 2009.

Gradients incorporated into graphics, for example:

Ohio Diversity Officers Collaboration Banner

Graffiti Kids

Graffiti Kids Example

In this assignment you will need the following

  1.  A picture of kids from this link:

  2.  A picture of Graffiti art

Create a new photoshop document with 72 pixels/inch, 1000 pixels x 1000 pixels.

Save the document as Graffiti Kids.

Copy both the kids and the graffiti into the document

Center and resize each image until it fill the space without bleeding over the edges.

Use the quick selection tool, the lasso, or magic wand tool to select the kids or the negative space around the kids.  If necessary select the inverse of the kids in order to have everything selected except for the kids.  Go to select in the main menu bar.  Click on save selection.  Save the selected area as All kids.

Make sure the graffiti layer is above the kids layer.  On the graffiti layer, keeping the area around the kids selected.  Or if necessary load the selection once you select the graffiti layer.  Delete the selected area so that you have a silhouette of the kids left over. 

On the bottom of the layers pallet there is a button that looks like a circle inside of a square.  If you hold the mouse over this button it should say layer mask, or something like that.  Click this button.  The selected area will no longer be selected. 

While still working on the graffiti layer use the gradient tool.  Select a black and white gradient and click and drag the gradient over the graffiti.

The result should blend the kids into the graffiti.

Working with Layers

Skyline Texture Picture Example

We'll complete this tutorial in class.

Trendy Circles

Trendy Circles Example

Blur Filters:

Grab the picture here.

  1. Open it in photoshop
  2. Create 2 duplicates of the original image
  3. On one of the duplicates apply a filter called Gaussian Blur (Filters/Blur/Gaussian Blur)
  4. Use a radius of about 3-5 and click okay
  5. Apply a mask and paint away the image at an opacity of about 20-40% to reveal the image of the original image underneath.
  6. Do the same for the second copy of the original image, but use a Motion Blur instead.
  7. Use a Distance of about 20-40 depending on how much blur you want.
  8. This one is great for making the waterfalls really blur out.
  9. Experiment with it long enough to know what you are doing.
  10. Save your work.

Film Poster

  1. Create a poster for a film that is not yet in theaters

Final Project - Video Game packaging

  1. Use all of your design skills to create a box for an upcoming hit video game.
  2. Template available on share folder
  3. Discussion session
  4. Trial and error period
  5. 3 Draft stages(1. online 2. in class 3 Final in class):
    1. Trial and error period
    2. Critique session
  6. Final Critique
  7. Present in electronic and printed format

Tutorials shared by students

Abstract Ice Tutorial presented by Tobi

Creating a Blazing Flame Text presented by Michael Farrell

Creating a Waterdropl Effect On a Leaf presented by Julie Helser

Lighting Bug presented by Jacob Callahan

Ice presented by Tim Liette

Light Ray presented by Sariah Merrill

Spirit Hands presented by Nathan Bosse

Vintage Photo presented by Julie Heffner

Creating a Rainbow presented by Forest Beran

Brushed Mettal presented by Kevin Riley

Derek Ditmer
See Thru Tutorial

Open a new file
Make your file 600 by 400 pixels with a white background.
Open up your effects of your layer and apply a pattern overlay. (lighter pattern works the best)
Next, pick your text tool and make your foreground white, and type “See Thru”
Next, open up the effects of text layer and put a drop shadow and inner shadow. (you can adjust them once you are done.)
Click ok on your effects
Then select the blending menu and select Multiply.

Then you should have see thru type.


Nathan Bosse Creative Drops Thumbnail

Creative Drops template presented by Nathan Bosse

Tutorials that we may cover in class: