Dec
2
Now that you have a graphics editor installed on your computer whether it is Adobe Photoshop (which I will be using in this book) or GIMP (the OpenSource solution), I would like to guide you on a journey to the basics in graphic design. Building a design is actually easy, but there are tools that designers use to make their work more interoperable, editable, and practical. These tools include layers, channels, paths and shapes, brushes, patterns, and gradients. As we build a simple graphic design, I will introduce you to all of these important features, which will help you become the best graphic designer you can be.
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.
Article written by Andrew J. McClary, © 2008, All Rights Reserved.
Social Bookmarking:
BlinkList
| Blogmarks
| del.icio.us
| Digg it
| FeedMarker
| Furl
| Linkroll
| ma.gnolia
| Netscape
| Spurl
| StumbleUpon
| Yahoo MyWeb
|
Related Posts
Comments
Leave a Reply
