Create a New Cereal Box

Today we will begin using PhotoShop to create a new product -- in this case, a box of cereal.  We will be creating the box in 2D (flat on a page) as a foldable model to be constructed in 3D.  For example, your model may look like the "Pops" box (on the right) in 2D.  To begin with, download this cereal box template and begin blocking in your box.  Look at examples of cereal boxes [I have a few in the classroom] and think about what common components exist on this type of packaging.  Are the colors bright or muted?  Are they multi-colored or monochromatic?  Is the title large?  Bold?  Colorful?  Does it have an outline?  Is there a picture of the cereal on the box? 

Remember when you are looking for photographic components (i.e. cereal, bowls, spoon, cartoon animals, or whatever) that you look for large images.  It's much easier to reduce the size of an image without distortion than it is to increase it.  As you have found, expanding an image makes it blurry or grainy.

Next, think about cereal names:

• ______ Loops
• ______ O's
• ______ Nuggets
• ______ Smacks
• ______ Puffs
• ______ Crunch

Also, consider types of cereal flavors:

• Honey ________
• Sugar _________
• Crunchy ________
• Apple ________
• Spam _______
  

Is your new cereal based on your favorite movie?  Rock band?  TV show?

If you are interested in going the extra mile and trying a fancy cereal box font, check out this tutorial:  http://www.dzyneo.com/sugarpuffs.php

When you are finished, save a full-sized (4-panel) cereal box, but also save a copy of the cereal box cover that we can print for the wall.  If you don't have a USB drive to save your work, I suggest getting one ASAP.  I can loan you one of the USB drives we have for the class, but we're running low on these.  Remember, you can also email PSD's to yourself as a backup.  It's your responsibility to make sure you are saving your work -- especially now that we're ready to start Semester Two and you will be graded on projects [or lack thereof].

Have fun!

---

Also, this image was in the iStock.com "Free Image of the Week" gallery:

---

Recently Adobe (the makers of PhotoShop) did a contest asking graphic design students to create an "Adobe Cereal".  Here are some examples of what was created (I don't expect your boxes to be anywhere near this professional!):

Restore a Damaged Photo

Select one of the attached damaged photos to repair and restore [or use your own].  Remember to save the original to include in your portfolio as a "before and after".

Click on an image to view it full-size, then Right-click and Save As to your computer.

Using Text, Layer Styles, & Online Editors

Today we're practicing using the Text tool to add text (obviously) to an image. We will be using this technique for projects such as the magazine cover, the movie poster, etc.

Next we used Layer Styles to add drop shadows, a stroke, bevel & emboss, etc. Those effects make the text appear much more dynamic, 3-dimensional, and professional.

Finally we worked with some online graphic editors:

1. FotoFlexer (www.fotoflexer.com): A free online graphic editor that will allow you to easily create some PhotoShop-like effects.
2. CoolText (www.cooltext.com): A free title & button creator.
3. FlamingText (www.flamingtext.com): A free title & button creator.

Begin "Fool The Eye" Project...

Today we will look at examples of PhotoShop photo manipulations where things were added to [or removed from] photographs -- sometimes for advertising, sometimes for "news", and sometimes to show a different "history".

This is a good example of a photo manipulation done for this photo from two different newspapers:

Next we will begin creating our own "Fool The Eye" images.  Put elements from different photographs into the same image without making the photo manipulation too obvious.  Some ideas include adding people or vehicles, removing something (person, power line, mailbox, etc.), changing the colors of objects or clothing, or changing the background.  Remember to consider things like lighting, film grain, and color when considering the changes.

Have fun!

Finish PhotoShop Projects & Work on Portfolio

Okay, we have worked on the following PhotoShop projects:

• Gondola Beautification
• Theme Collage
• Colorized Photo
• Project Frankenstein

Work on getting those projects finished up and saved as JPG images.

Next you can play with the "Replace Color" tool.  Click on one of the sample images below and then copy [or Save As...] the image and open them in PhotoShop. 

• Go to IMAGE > ADJUSTMENTS > REPLACE COLOR
• Use the dropper tool to click on one of the bright colors
• Hold shift and select other shades of that color
• Drag the "HUE" slider left or right to adjust the color

Finally, log into your portfolio blog and post your finished projects.  Simply click on "New Post" and insert a picture.  It really helps to show the "before & after" if you do modifications (i.e. the Gondola or the Colorize).

Have fun!

Project Frankenstein...

Okay, this is one of the more bizarre PhotoShop projects I give.  :)  I call it... Project Frankenstein.

In this project you will gather pieces of faces from different people, and then composite them into a single image.  You can choose male or female, young or old.  You will take one persons head... anothers eyes... anothers mouth... anothers nose. 

You can start with Google Images or use pictures of your family or friends.

Some tips:

• Click "Show Options" and then click "Large" for size.
• Start with a large picture of a head as the base to put the pieces.
• Pick faces with approximately the same skin color.
• Pick faces with similar lighting (i.e. from the same side).
• Drop your layer opacity to position the features and then return it to 100%.
• Use your eraser tool with a feathered edge to blend the features in.
• Save small "thumbnails" of your original pictures to display with your finished project.

Good luck!  I'm looking forward to seeing your creations.  :)

Colorize an Image...

Today we will be learning to colorize a black and white image.  The image we are starting with, however, is already in color.  What we will do is take this image into PhotoShop, convert it to black & white, then colorize it.

1.  Click on the image (below) to view it full-size.
2.  Right-click and save the image to your folder.

3.  Open the image in PhotoShop.
4.  Convert it to Black & White by going to:  IMAGE > MODE > GRAYSCALE
5.  Balance it by going to: IMAGE > ADJUSTMENTS > AUTO CONTRAST
6.  Create a new layer:  LAYER > NEW > LAYER
7.  Pick a bright color (pink, blue, red, etc.)
8.  Choose a soft (feathered) brush and paint on your new layer over an object (hat, pants, overalls, etc.).  Don't worry about the bright, ugly color because we're going to adjust that in the next step.
9.  Next, adjust the opacity (transparency) of your painted layer by clicking the arrow next to OPACITY above the layer.  Drag the arrow left or right to adjust the opacity. 

If [for some reason] you don't see your layers, click F7.

Begin Photoshop Collage...

Today we will begin using Adobe Photoshop to create a virtual collage of images that you will find on the Internet. You can choose the theme of your collage (favorite band, sports team, actor, city, etc.) but the images must ALL be school-appropriate.

The dimensions of this project should be:

• Width: 1024
• Height: 768
• Resolution: 100 pixels per inch

* It's also important to remember that if you use images from online sources, you may NOT distribute them in any way. If you plan to distribute your work you must either have permission to use each picture, or you must create each picture yourself.

Some of the skills that this project teaches you include:

• Effectively working with layers.
• Using the eraser tool to fade/blend edges.
• Copying/pasting images from the web.
• Using the opacity tool.
• Using fills and gradients.
• Using the Text tool.
• Using Layer Styles.
• Composing an effective image.

Here are a few thumbnail examples I created with this technique:

Our First Project: The Gondola

Today we will be accepting an assignment from a client to take a dull, scanned photograph and improve it to  use in a poster, brochure, web site, etc.  The client has scanned a photograph of a gondola, but they think it is too hazy... and they don't like the speedboat in the center of the picture... and "the colors are a little blah".  We will use PhotoShop to correct these issues... and more.

We will be using the following images:
(Right-click the image and save to your computer.)

• Gondola
• Clouds

If you have difficulty following along and would like to work on this from home, here is a tutorial using the same images:

Exploring Adobe Photoshop

Today we will be exploring the PhotoShop application and experimenting with the tools.

We will be using the following images:
(Right-click the image and save to your computer.)

• Bottles
• Gondola
• Clouds
• Veggies
• Fruit
• Horse & Cart

Below is a video (from Dove's Campaign for Real Beauty) which demonstrates how much the print media (magazines, billboards, etc.) rely on PhotoShop.  It also does a great job of demonstrating why young people today have difficulty living up to the images they see in magazines and advertising.  Even supermodels get PhotoShopped before they are "good enough".

Gmail and Blogger

Our assignment for today is to get set up with a Gmail account and a Blogger page. 

First of all, let's try Gmail:  Go to http://www.gmail.com/ and register for a new account.  Next we can go to http://www.blogger.com/ and sign in using our Gmail username and password.  I will walk you through this, but there are instructions available here if you would like to complete this at a later time.

We will be using our Blogger pages to keep links, post assignments, post responses, etc.  Eventually we will be creating a blog portfolio of our work from this year.

Web Design and Development

Welcome to Web Page Design and Development!

We will be exploring a variety of web design tools and techniques throughout this course.  We will begin with blogging and free online web design tools, learn HTML/XHTML, explore CSS (Cascading Style Sheets), use WYSIWYG editors (such as DreamWeaver), learn graphic editing software (PhotoShop), utilize FTP software to transfer files to a web server, and work with multimedia (Flash).

I am very interested in building this class into something students will be proud of and want to take in the future.  If you have ideas or suggestions for improving it, please let me know.

I look forward to working with all of you.

Mr. Griffith