Beginner Web Design: The Tools You Need

istock_toolbeltYou’ve probably read plenty of web design advice or noticed some tips around the web, especially if you have any interest at all in customizing your own theme and creating your own graphics.

You want to create a kick-ass design yourself, but when you’re a beginner, where should you start? We’re asked that question all the time. There’s plenty of advice around the web, but much of it can be confusing, and the help you do find is often written for an advanced audience.

Every technique seems to require the knowledge of another one – and you realize that you have to have some fundamental understanding of the basics that many seasoned designers take for granted.

Starting Out in Design

Not long ago, anyone could pick up a pencil and a sketchpad and start creating. That’s how I got started. Most of my childhood was spent pouring over my dad’s art books from a correspondence course he’d taken before he went to college. I can still see them; those big three ring binders were full of everything I needed to know about drawing, painting and sculpting.

Those books taught me the basics of shape, form, color and composition, the building blocks of great design. This is the real beginning of designing your own art, to be honest. Without a solid understanding of composition and color, your work won’t shine the way you want it to.

But I’m going off on a tangent.

The point is that breaking into design isn’t like it used to be. Today, there is so much technology involved in designing for your site that you have to cross-train and know a little bit of everything. Design, development, and coding go hand in hand. You can specialize in one, but it’s good to know as much as you can about each.

What Tools Do I Need To Design?

What you really need is to start at the beginning and focus on one element at a time. If you have an idea of the result you want, break it down piece by piece instead of diving into the whole project. Otherwise, you’ll be expending energy running around in circles.

All web projects, whether full websites or simple banner ads, start with graphics. To create graphics, you need a program that allows you to resize and crop images, change colors and add text.

The most popular graphics programs are made by Adobe. Their Creative Suite 4 (or CS4) offers everything from Photoshop to high-end video editing (Premier). Here’s a quick rundown of each program:

Photoshop: This program is the designer’s workhorse. It allows you to manipulate digital images in ways limited only by the imagination. Use it to adjust color, erase sections of photos, add elements, and create depth through drop shadows or bevel effects. With additional plugins, you can create effects like chrome, fire, smoke and more.

Adobe Illustrator: This program is a little more complex. Its main purpose is to create vector images, which are images based on shapes. Illustrator allows you to manipulate the lines, points, dots and curves used to create these images.

With a vector image, there are no pixels. The image can be enlarged and retain its integrity regardless of the size. If you’re creating flat, 2D images, like cartoons, Illustrator is your best bet.

Quark and InDesign: These two programs are very similar, and with good reason. Apple, the forerunner of many graphics programs, created Quark, and the program’s goal was to do layouts for magazines, brochures and now ebooks.

InDesign was Adobe’s answer to Quark, but Quark (available for both PC and Mac) is still the number-one choice for print houses when it comes to typesetting and layout.

Quark and InDesign cannot do what Photoshop does. You still need a program like Photoshop or Illustrator to create images used in Quark or InDesign. You can do some image manipulation with these two programs, but you can’t do it all.

Gimp:Adobe programs may be the best and most used, but they’re expensive. One of the most popular free Photoshop copycats is GIMP. The interface is different from Photoshop, but there is a free extension called GIMPshop to make the program resemble Photoshop’s interface

Alternative Solutions and Buyer Beware

If you decide you’d rather have the best programs than free versions, try searching Amazon for used or older versions. Many times, you can buy programs and software at discounted prices. They may not come with packaging or instruction manuals, though.

Be careful when shopping for programs this way. Some copies may be pirated versions, and you may not be able to upgrade to newer versions. Also, keep in mind that Adobe has tightened up on security so much that legitimate copies may be limited to one install per household.

If you’re a student, you may also qualify for Adobe’s discounted educational versions of their programs.


You can find hundreds of graphic tutorial sites on the web to learn practically anything you want to know. Two of the best are Abuzeedo and PSTuts. Layers Magazine also has a plethora of tutorial resources.

For design advice, Vandelay Design offer some great tips as well.

It takes a lot to create a website and there are tons of various programs, tools and terminology. Have you found a great little program that gets you the results you want? What about your first graphic design projects? Have you dabbled yet? How’d it go?

Post by Agent X

Agent X is the name many mysterious and intriguing people take on when they guest post at our site. Their mission is to slip in like a thief in the night, leave you with entertaining, valuable and useful content, and slip away again - without getting caught.