Graphic Design

< Back to Tutorials

Author: Shannon Sullivan
Date: October 17, 2006
Level: Beginner

Summary

Learn what graphic design is, and how it is practiced on the Web. Get to know Photoshop – the 'Gold Standard' program among graphic designers -- and a few free alternatives too. Learn about some key graphic production skills you'll want to master and then dive into tutorials that will get you started on the road to mastery.

Experience Needed

None for most activities. A few tutorials may be better suited for users with intermediate skills.

Software
  • A paint program such as Photoshop (recommended) or the Gimp or MS Paint for tutorials in drawing, photo editing and making animated .gifs
  • Flash for exercises in drawing vector images and creating animations
Learning Topics
What is Graphic Design?

Graphic design is a form of communication using text and/or images to present information. The art of graphic design embraces a range of mental skills and crafts including typography, image development and page layout. (From Wikipedia)

Graphic Design Tools

Photoshop is the industry's "gold standard" tool for graphic design work. It is definitely the one to learn if you can, but it is expensive to buy. We recommend that you learn how to use Photoshop, if possible. You can download a free 30-day trial version from the Adobe website. You can also create and edit graphics using alternate free programs, like the Gimp or MS Paint.

  1. Photoshop

    Adobe Photoshop is the master tool for digital image manipulation. Learn to combine images and use layers, masks, color palettes, cloning and filters as well as optimize files for the web.
    http://www.adobe.com/products/photoshop/

    We know: Photoshop is expensive. Check out these tips for getting Photoshop cheaper.
    http://www.absolutecross.com/tutorials/photoshop/basics/getting-ps/

    Explore one or all of excellent resources for orientation and tutorials on Photoshop tools:

  2. Free Alternatives to Photoshop

    If you don't have access to Photoshop, don't worry. There are free alternatives out there, including the Gimp and MS Paint that you can use to design and edit graphics. Any graphic design tasks you master on those programs will be handled in a very similar way by Photoshop. If you switch to Photoshop later, you'll just have to get used to some differences in the interfaces.

    The Gimp
    http://www.gimp.org/
    This is a free, powerful alternate to Photoshop. It has many of the same features but users often say it has a more difficult interface to master.
    Microsoft Paint
    http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/mspaint_overview.mspx?mfr=true
    This is the very basic paint tool that comes bundled with all Windows systems. It has far fewer features than Photoshop or the Gimp, but can be useful for more basic graphic design projects.
    Look for more image and photo editing tools online
    The software market is ever-changing. Search for 'free image editor' on Google, Tucows.com, or Version Tracker.com and see if you can locate other free or low cost graphic design tools.
  3. Flash

    Macromedia Flash is an authoring environment used to build interactive games, simulations and Web sites. It is an excellent platform for creating animated content, and is used extensively by Internet professionals. Like Photoshop, it is expensive to buy, but well worth learning.
    http://www.adobe.com/products/flash/flashpro/

    Visit the MyHLife Flash Tutorials area for tips and 'how tos" on drawing and animating in Flash:
    MyHLife Flash Tutorials

Key Graphic Production Skills?
  1. Typography and the use of text

    From Wikipedia: "Typography is the art and technique of setting written subject matter in type using a combination of fonts, font size, line length, leading (line spacing) and letter spacing."

    Learn how to create beautiful text and discover how to use text effectively to help users navigate your web content, learn from it easily and enjoy it more.

    Understanding typography
    http://www.designmeltdown.com/chapters/Typography/Part2.aspx

    More typography resources
    http://websitetips.com/typography/

    Using text instead of graphic images
    http://www.webdesignfromscratch.com/effective_text.cfm

  2. Image manipulation

    Learn how to take an existing digital image and modify it.

  3. Photo editing

    Incorporating photos in web projects can add depth, interest and information. Learn how to take good photos, find good existing photos online (free and legal ones!) and format your own photos for use on the web.

    • Download the Adobe tutorial on correcting and Enhancing Digital Photographs
      http://www.adobe.com/designcenter/tutorials/phscs2it_cibexcerpts/
    • Read these tips for improving the quality of the digital photos you take yourself
      http://digital-photography-school.com
    • Create and edit photo albums at an online photo sharing site like Flickr, Fotki or Photobucket.

      These sites are free and offer their own simple editing tools. They encourage users to add tags to classify their photos and make them searchable, so they are also a great place to explore millions of photos submitted by other members. Look specifically for photos that users are offering up for free or licensed use. If you download photos, make sure you only use photos that are intended for public use.

    • Prepare your own photos for the Jigsaw puzzle using Photoshop or The Gimp
      Jigsaw tutorial — Modding The Jigsaw puzzle section
    • Learn to crop an object out of a photo without including its background
      http://www.tutorialized.com/tutorial/Photoshop-Cropping-%E2%80%93-The-Non-Destructive Way/16873
  4. Drawing

    These tutorials are not intended to make you an artist or teach you to draw well. What they can help you do is learn how to use the tools in Photoshop and Flash to create original images.

  5. Animation
Preparing Graphics for a Website

Your graphic elements can't just look good in Photoshop or Flash – the also have to work well when you put them online.

  1. Overview

    Learn the Net outlines some basic considerations for adding graphics to a webpage:

  2. File formats — .gif, .jpg and .png files

    Discover the differences between the three main web graphic formats, and learn the pros and cons of each. http://www.utexas.edu/learn/graphics/fileformats.html

  3. Image Size and Resolution

    Image size refers to the height and width of an image in pixels, AND to the file size. Large graphics take a long time to download over the Web and many people will become impatient. Try to keep your graphic files less than 35K in size, and remember that they add up if you have multiple images.

    Read more about image size here:
    http://www.utexas.edu/learn/graphics/imagesize.html

    Digital image resolution (quality) is measured in ppi or "pixels per inch." Ppi is an important and complicated variable when you are determining print quality. Luckily, for the web it is easy: 72 ppi is the standard for computer screen resolution, so all of your web images should be saved at 72 ppi.

    You may also hear resolution measurements discussed in "dpi." "Dpi" (dots per image) measures the resolution of print output, not the resolution of a digital image itself. For images that will only be used on the web you need only concern yourself with ppi.

    Read more about image resolution, and the differences between ppi and dpi here:
    http://www.rideau-info.com/photos/mythdpi.html

  4. <img> tags

    Use the <img> tag to include inline images in a Web page. An inline image appears in the page itself and does not open in a separate window or require a helper application to display.
    http://www.utexas.edu/learn/graphics/imgtag.html

  5. Image Maps

    Image maps let you specify different hot spots on a single image. For example, the image below has two hot spots linking to two different URLs.
    http://www.utexas.edu/learn/graphics/maps.html

Resource Sites