Graphic Design 101

[ Home ] [ Up ] [ Syllabus ] [ Computer Systems ] [ Ethics ] [ Animoto ] [ Powerpoint ] [ Publisher ] [ Writing ] [ Graphic Design 101 ]

Home
Up

Graphic Design 101

Do:

  • Under your Multimedia folder, create a new folder and name it:

    • Graphics

Read:

Have you heard of Photoshop? Do you know why it’s used? Have you ever tweaked a photo or graphic for your MySpace page? Would you like a powerful free tool that works almost exactly the same as Photoshop? For this unit we will use a web-based application called Splashup. There are many more like it online. This is just one, small concept of what’s called Web 2.0.

The term "Web 2.0" describes the changing trends in the use of World Wide Web technology and web design that aim to enhance creativity, communications, secure information sharing, collaboration and functionality of the web. Web 2.0 concepts have led to the development and evolution of web culture communities and hosted services, such as social-networking sites, video sharing sites, wikis, blogs, and folksonomies. The term became notable after the first O'Reilly Media Web 2.0 conference in 2004.[1][2] Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specifications, but rather to changes in the ways software developers and end-users utilize the Web. According to Tim O'Reilly:

“

Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as a platform, and an attempt to understand the rules for success on that new platform.[3]

Source: http://en.wikipedia.org/wiki/Web_2.0

Assignments:

Do:

Day 1 - Get comfortable with Splashup

Step One: Open

  1. Open a web browser

  2. Go to http://splashup.com/

  3. Click Jump Right In

    1. Maximize your screen

    2. Move the toolbars to the sides

  4. Click the following sequence:

    • File > Open > Http

  5. Copy and paste the following URL into the window to get your graphic

  6. Click Open

Step Two: Edit 

  1. Click on Filter > Hue/Saturation
    1. Change blues to pink
  2. Save in your Graphics folder as mygraphic.png
    1. Pick PNG in the dropdown menu
    2. In the Save Window, you have to name it mygraphic.png as it's not automatic! 
    3. If you don't, you will not be able to open it later to revise.
    4. BE PATIENT AS IT SAVES

Day 2 - Editing

Open mygraphic.png from your Graphics folder

Open: http://www.wpclipart.com/holiday/Christmas/turtle_with_santa_hat.png

  1. Click Image > Image Size
  2. Resize (with constrain checked) turtle_with_santa_hat to 200 pixels wide
  3. Click on Filter > Find Edges
  4. Click on Tools Bar > Marquee
  5. Starting in one extreme corner, click and drag across image so you select all of it

    •  If you do it wrong, click Edit > Undo

  6. Click Edit > Copy
Go back to Christmas Card image
  1. Click Edit > Paste
    1. Notice the Layers Pane at the right of your screen
    2. To work on a layer, you have to SELECT that layer first
    3. When you copy/paste, a new layer is automatically created
  2. Drag turtle to lower, right corner, still staying within Christmas card image
  3. Click on Tools bar > Eraser
  4. Erase area surrounding turtle so it looks part of the foreground of the Christmas card
  5. Change your Eraser shape and size to your liking
  6. Change Feathering if you'd like to give it a more subtle edge
  7. Zoom in to 200% or more to get a more detailed view of your work
  8. Does it look like it was part of the original image? If not, clean up those edges!
Resave in your Graphics folder as mygraphic.png (follow save directions!)

You can close and not save the turtle image; you're finished working with it.

Day 3: More Editing

  1. Open mygraphic.png
  2. Open http://www.wpclipart.com/holiday/Christmas/bugs_bunny_with_bird_Christmas.png
  3. Click Filters > Grayscale
  4. Using the tools you've learned, put only the bird in the large tree at the left
    • The bird cannot be taller than 1/2 the height of the tree
    • Undo to correct errors and try again until it's scaled correctly
  5. Take the hat off the dog in the following image, resize it to correct scale and put it on Santa's head (he's in the sleigh):
     http://www.wpclipart.com/animals/dogs/cartoon_dogs/cartoon_dogs_5/dog_in_santa_hat.png
    • It must be to scale - not too big or too small. 
    • Does the image look different than what you saw online? If so, click on Filters > Brightness/Contrast and tweak both until it looks decent. 
  6. Resave in your Graphics folder as mygraphic.png (follow save directions!)
  7. You can close and not save the bugs/bird and dog images; you're finished working with them.

Day 4: Adding Text and Applying Effects

  1. Open mygraphic.png
  2. Click on the Text tool on the Tools Bar
  3. Type in your holiday message
    1. Make sure your name is in the message - very important!!!
  4. Select the text
  5. Change to font to:
    1. Palantino Linotype
    2. Size 36
    3. Color: Light Green
  6. Click on the Move button on the Tools Bar - that will "set" the type
  7. Making sure the type Layer is selected (it shows an "A" icon), click on the Layer Effects button (on the right side of the layer)
  8. A Layer Effects window will pop up
    • Choose Drop Shadow
    • Click "Add"
    • Tweak the settings to your preference
  9. Click OK
  10. Resave in your Graphics folder as mygraphic.png (follow save directions!)
  11. Navigate to the mygraphic.png file in your folder
  12. Right-click over the icon
  13. Choose "Print"
  14. The Photo Printing Wizard opens
    • Click "Next"
    • Choose Mr. Janes' printer (look at the signs around the classroom if you need a refresher)
    • Choose "5 x 7 Cutout Prints"
    • Click "Next"
    • Pick up your print and give it to Mr. Janes
    • You may print a second copy for yourself if you'd like

Click here to see what a correct, finished graphic resembles

Do you like that webapp? Check out this link for nine more:

 

[ Home ] [ Up ] [ English IV ] [ In Production ] [ Desktop Publishing ] [ Web Page Design ] [ Schedule ] [ MySpace ] [ Search ] [ Links ]
All graphics and html: created by Mr. Janes. All content such as photographs, other images and text: public domain, permission granted, fair use or otherwise noted.
For problems or questions regarding this web site contact: jjanes@usd452.org.
This site was created with MS FrontPage and is best viewed in Internet Explorer.