Ad Bottle

This the label I made for a hair spray bottle and part of the label was used in part of a magazine advertisement I made. It was made in the spring of 2012. I used Photoshop for the background and changing the color of the cotton candy. I then made an Indesign document and placed the images in them. The text was added last and was based on another hair spray bottle.


Week 12

Search Engine

This website has great links with definitions on search engine results, page rank, keyword tools. The page title is what Google uses for their searches while Bing does not use page title always for the results. Search engines are the main way user find websites. A good listing will increase traffic; most websites don’ t consider how search engine work. Google is a crawler based search engine. Human power directories are things like open directory. Hybrid search engine is like MSN search.

Good Host Sites

  • Blue Host
  • Chrystal Tech
  • GoDaddy
  • Network Solution

Keywords are the words the user might use to find your site. Should be at least two words long. Include title and atl tags.

Use Fireworks and Photoshop to make slices to define and create buttons and images. Does not create HTML code or account for incorporation of text/background images. For Fireworks to export css, html, and images import into Dreamweaver. When using PSD, smart objects importing to Dreamweaver. Photoshop save for the web and use CSS in Dreamweaver.

Week 11

Low Cost Images

Can go to micro stock sites for .20 cents to $10 per image.

Can get the images from:

  • stock.xchng

Creative Common

A set of copyright licenses and tools that create a balance inside traditional all rights resources. Can get them at Flickr or Fotopeds.

Design Comps

Free Icons

Designer Toolbox

Web Fonts In Photoshop

Five Principles to Design By

  • Technology serves Human
  • Users are always right
  • Design is not an Art
  • Web Design is first technology and gotten right of when it is not needed.
  • The experience belongs to the user
  • Designer creates things for the user to use and does not work until the user uses them
  • Great design is invisible
  • Works so well the design goes into the background
  • Simplicity is the ultimate sophistication
  • Know what to keep and what you don’t need.

Chapter 5

Images should be relevant, interesting, and appealing. Can create the picture yourself. purchase the photo, or hire a professional. Rights managed are professional quality but costly. Can use CC Flickr. Don’t get images from google or hotlinking. Use Photoshop for adjustment. Save as jpegs, gifs, pngs. Can use CSS to enhance images with things like boarders.









This is a picture of my grandfather taken before my mother was even a thought. Through the years the picture got bent and stains all over the image. This summer I took the time on Photoshop and lightened the image and went  by small sections cleaning up the image. He cleaned up pretty well.


Week 10

Common Mistakes Print Designers Make on the Web

Putting Design before Content

  • The user is not thought of.
  • Websites are context first than design second.
  • Wire Frame the content.
    • Three Document Layers
      • Structure
      • Presentation
      • Behavior

Designer for a specific Browser

  • Leaves out consideration for other devices and sizes.
  • Assertive technology needs to be thought of
    • Large Text
    • Navigation on-screen
  • Create pages to web standards
  • Preview in Many Browser

Naming & Styling Element Based on appearance

  • Use appropriate tags
  • Name CSS based on function

Believing the tool is Smart

  • You use the tools not the computer
  • Don’t forget the code

Misunderstanding linking, naming, and server codes

  • Uploading everything to the server
  • Use lower case letter

A Picture is worth a thousand words, isn’t it?

  • Don’t reply on pictures
  • Gif for flat color area
  • jpg for photos, gradient and drop shadows
  • Transparent png when you need transparency

Putting all the image directly in the page

  • Put images in CSS

Being a control freak

  • Colors vary from monitors
  • Web is not Print
  • No <Br> in headers

Think inside the Box

  • Using fluid method
  • Use 3D instead of 2D
  • Use navigation space

You Don’t have to wear all the hats

  • If you need help ask for help

Dao of Web Design

Web developing out of old medias like radio and tv. Radio to tv saw voice overs when voice overs were no longer needed. Don’t copy but be influences by old medias. Designers are not in control of the web. Deal with the facts and be creative in the box. Think why you do things.

Planning and Implementing Website Navigation

  • Primary: Content most used navigation
  • Secondary: Other things that may have interest to the user
  • Carding: sorting information that will on the page.

Wire Frames clarify exacting which you want to look like.

Mock up focuses on visual design elements and includes graphs

Prototypes: Semi-functional webpages, give you and the client a feel of what the webpage will look like.

Wire Frame:

Binder Clips


I did these vector drawings in the spring of 2012. The assignment was to first do up close photos of an object then draw the object. I choose a binder clip because I thought it would something you see once it is mentioned. Being really detailed orientated I actually used the paint tool to paint in the black.