Videos for this entry will soon be available in the videos section of this website. I have created all of the videos, it’s just going to take me a little while to get them in a format for you to download and watch them. I have videos for every single topic in this section.

Introduction to Layers

Do you remember in grade school when a teacher had an overhead projector with transparencies? Layers work the same way. The rule of thumb is that with every element you put in your design should include an individual layer that corresponds to it. I have supplied a video to demonstrate how this is done. The example on the right is using Adobe Photoshop. If you are using The GIMP, your layers panel will look a little bit different, but is essentially the in the same place and the same concept.

Graphics editors come with predefined shapes, which we call paths. They include circles, squares, and lines which are easy to draw in your editor. Notice to the left of your graphics editor (in both Photoshop and GIMP) a set of tools? There you will find all of the shapes which we will be working with in this course. Here is st of all of those tools in Adobe Photoshop:

Tool Description
a) Rectangular Marquee – Allows you to select certain elements or layers that already exist. Practice this tool by adding a layer, use the paint bucket tool (q) and pour the color on to that layer. Now take the rectangle marquee, make a selection of a piece of the document and hit the delete key.

b) Lasso – Using the same method you did with the rectangular marquee, draw a shape on your colored layer and hit delete. You’ll notice that the shape you drew is now transparent.

c) Crop – Just as you did in (a) and (b), pour a color onto a new layer. Select the crop tool and draw a square somewhere on the layer. You have the option to resize this crop however you’d like. Once you’re ready to crop, hit the return key or select the check box. Video Available Crop

d) Healing Brush – The healing brush find comparable pixels in a photograph and will repair older photos with a drag of the mouse. If you’d like to experiment with this, open an old photo, select the healing brush tool, click your mouse on the desired spots and you will notice the repairs taking place.

e) Clone Stamp – Similar to the healing brush, the clone stamp is also used to repair old photographs. Hold the “alt” key to make a selection, and then drag your curser on elsewhere on the photograph.

f) Eraser – The eraser tool removes a selection from the layer.

g) Blur – When you click on a layer using this tool, you are able to blur your selection. This is especially useful when removing unwanted objects while still maintaining a nice look and feel.

h) Path Selection – When working with Paths and Shapes, as we discussed earlier, the Path selection allows you to

i) Pen – The pen tool allows you to create custom vector shapes and paths.

j) Note – Allows you to add custom notes and comments to your work. This can serve as a reminder to future updates. Watch this video to see exactly how this is done.

k) Hand – The hand allows you to move your perspective around within a window. For example, Zoom (v) in all the way to 50%, choose the hand tool and watch how you are able to navigate within your window.

l) Move – use this tool to move the layer you created in (a) around the screen.

m) Magic Wand – This allows you to make a selection of colors/similarities within your image. It also allows you to easily select layers and their content.

n) Slice – Allows you to slice your image into multiple images. This is especially useful in web design because our goal is to get our design into as many individual images as possible for HTML coding. This will be covered more in chapter 10.

o) Brush – Allows you to paint freehand onto a layer. Add a new layer, select the brush tool, and then select a color from the color swatches and begin to draw.

p) History Brush – This tool allows you to apply the brush tool to your history panel.

q) Paint bucket – This tool allows you to pour a color or patter onto a layer. If you hold down the paint buck tool in the toolbar, you can also select the gradient tool (as shown in the picture above) and you can drag a gradient onto your layer.

r) Dodge – Will brighten an image when selected. The other option is to select “Burn”, which will darken the image selected.

s) Text – This will allow you to add text to your image.

t) Rectangle – This is a shape tool that allows you to draw a perfect vector rectangle onto a layer. It is not necessary, however, to add a new layer because the tool will do this for you, but if you would like to draw more than one shape, it is recommended that you add a new layer each time. Watch this video to see exactly how this is done.

u) Eye dropper – this tool allows you to select a color and add it to your color swatches for further use. Try opening your favorite photograph, and use the eye dropper to find a color and add it to your palette.

v) Zoom – This tool allows you to zoom into your document and see things more closely. Watch this video to see exactly how this is done.

w) Color Swatches – these are the colors you are currently working with. The color on top is the foreground and the color behind it is the background.

x) Modes – These tools allow you to easily create a mask. This allows you to get perspective in your designs. y) Screen Views – Allows you to view your design in standard or full screen.

z) Switch to Image Ready – allows you to edit your design in Image Ready (which we will not cover in this course)

Brushes

When working with any brushes (including the eraser tool) it is important to recognize the power of your brush size and its intensity. Notice, on the right, when the brush tool is selected you have the option to change brush settings? Depending on the size of your design, you may want to change the diameter of the brush you’re working with. It will help you be much more precise in drawing (or erasing) pieces of your design. You can also change the hardness of your brush so that the effect will blend in easier with the rest of your design. I recommend choosing one of the pre-chosen templates that are in the picture above.

Patterns

Patterns are another technology which will help you tremendously in the design process. Notice, when you have selected the paint bucket tool, the advanced properties allows you to choose a pattern instead of a color??

Gradients

Gradients are another wonderful way to pour color and life into your design. Simply go to the toolbox and select the gradient tool. It is located in the same box as the paint bucket tool, so you may have to hold down the paint bucket tool (and more tools will appear) and select the gradient function. In the top menu bar, double click on the gradient scheme you see at the top and the gradient editor will appear. Here, you can alter gradients and choose from the colors that are currently in your palette (background and foreground).

Blending Options

Blending options are another way to expand upon your knowledge of layers. I have included a video to explain how to blend layers together and some exercises that will help you accomplish great designs by the process of experimentation. Watch this video to see exactly how this is done.

Congratulations, you’ve just completed a basic course in graphic design. You are now ready to begin designing an actual website.

Adobe Photoshop is THE industry standard in graphic design. I, personally, own and use Adobe Creative Suite 2.0 Premium to do all of my website development on. When you go to purchase the suite, however, you’ll notice that the price tag is a hefty $1,799.00. I would like to recommend this application suite if you can afford it, because it will help you go much farther professionally.

Design Secret

Educational Discounts – If you are a student or teacher and have a “.edu” e-mail address, you can purchase this software from Journey Ed, who gives a substantial discount on this software, and other software mentioned in this book.

Design Secret

Open Source Software – If you are not a student, this software is too expensive for you, or if you are simply looking for something free, than I have designed a portion of this course specifically for you. There is a new movement growing fast in the Information Technology world and that is the Open Source movement. Thanks to the effort of many software developers, you can now do virtually any work you could ever imagine absolutely free. There are a couple pieces of Open Source software which I would like you to download and install before we get started. ?

Graphic Design Editor – GIMP (GNU Image Manipulation Program)

1. Go to http://www.gimp.org/
2. Click Downloads and scroll down to where it says: “Binaries for various platforms” and click UNIX, Windows, or MacOS X. For demonstrational purposes in this book, we are going to use the Microsoft Windows platform.
3. Select the “Automated Installer” and select “Download” in the left menu
4. If you are running Windows XP or higher, you need to download “The GIMP for Windows” and download the “GTK+ 2 Runtime Environment”. You will need to install the runtime environment first. Note that the GTK+ 2 Runtime Environment is in a ZIP file and you will need to extract that ZIP file and double click on the installation file and install it. Then you will double click the GIMP installation file and install it as well. ?

Graphic design has changed significantly since its inception in the early 20th century. Today, it incorporates both print and electronic media including interactive and multimedia design. In this book, I’m giving you the tools to expand upon these basic design concepts and evolve into a world class graphic designer—worthy of the title.

It is an art form, and as you begin to demonstrate the design principles and elements in your head, you will begin to create amazing pieces of art. I invite you to take a strong look at some of the web design masters and learn from the elements which you are about to employ. The internet is full of beauty, and it’s your job to make it more beautiful. Like it or not, you’re an artist and it’s your job as an artist to depict the best online presence you possibly can.

We’re about to dive into the world of graphic design. Get ready to get started building a powerful website.

Today, a powerful graphic can totally change someone’s opinion of your product and they will more likely be swayed in your marketing. In an age where every conversion counts, it’s so important to use your technology to your advantage. I believe that you need to have a source for inspiration when doing graphic design for your website. My source has been Apple’s website. I find their website so intriguing. You can learn a lot from a website that converts so much of their traffic. One thing that you’ll immediately notice after visiting their website is their use of transparencies in their graphics.

They are able to accomplish so much more with a higher resolution, higher bit compression graphic. Next time you’re designing a website, I recommend pulling the background out of your images in Photoshop and saving them as PNG-24 and see all of the amazing things you can do with them! It just might be the answer to your prayers!

There is a catch, however–these 24-bit graphics have issues in rendering transparencies when using Microsoft Internet Explorer. Why Microsoft would not include support of these graphics by default puzzles me, but luckily there is an easy fix!

Add the following to your <HEAD></HEAD> tag of your HTML page and upload the attached JavaScript to your website.

PNG-24 JavaScript fix for Microsoft Internet Explorer