Creating a New Image


Select FileNew from the menu bar. The New dialog box displays. Enter the following settings into the New dialog box:

  • Width: 150 pixels

  • Height: 50 pixels

  • Resolution: 72 pixels/inch

  • Color Mode: RGB Color 8 bit

  • Background Contents: White

Your screen should look like Figure 2-2.

image from book
Figure 2-2: Creating a new image

Once you’ve defined these settings, press OK. A white image window displays within Photoshop’s workspace.

Setting Preferences for Web Design

Before going any further, let’s make a couple of preference changes to Photoshop. Remember, Photoshop’s used by a multitude of users, including graphic designers, web designers, and photographers. Not everyone wants Photoshop to work the same way.

Photoshop’s Preferences dialog box allows you to tweak the program to fit your personal likes and dislikes. Let’s take a look at one preference especially useful to web designers: the unit of measure.

Changing the Unit of Measurement

Web designers work in pixels (rather than inches or picas or millimeters). By default, Photoshop sets its units of measurement to inches. Let’s change that. Perform the following steps:

  1. Press Ctrl+K (or select EditPreferencesUnits & Rulers from the menu bar). The Preferences dialog box displays.

  2. Change the Rulers and Type drop-down fields to pixels, as shown in Figure 2-3.

    image from book
    Figure 2-3: Changing the default measurement units to display pixels

  3. Press OK.

    Tip 

    If you don’t see rulers along the top and side of the image window, select ViewRulers from the menu bar. Make sure you check the Rulers option.

Using Layers

Layers are a powerful feature in Photoshop. To understand how layers work, think of each layer as a piece of transparent paper. They’re like those old acetate slides teachers used to use with overhead projectors…before the days of Microsoft PowerPoint.

Each layer in a Photoshop image contains a part of the image. For example, one layer might contain the text of an image. Another layer might contain the background color. A third layer might contain the cool, 3D bevel style that makes the layer lift from the page. A fourth layer might contain a drop shadow of the entire image.

When all those layers are combined, you get a composite, or a master image, created from all these multiple layers.

The best way to understand layers is to see them in action. If the Layers palette is not already displayed, select WindowLayers. See the following sections to learn about layers.

Creating a New Layer

You should see a layer named Background listed within the Layers palette. To create a new layer, click the New Layer button found at the bottom of the Layers palette, as shown in Figure 2-4.

image from book
Figure 2-4: Creating a new layer with the Layers palette

Selecting Layers

A highlighted layer points out the layer that’s currently active. You can only work on one layer at a time. To access a different layer, click on that layer. Move back and forth from the Background layer to your new layer (called Layer 1).

Caution 

You’ll want to create a new layer for each part of your image. This allows you to go back and edit layers individually. Don’t make the common mistake of creating a masterpiece, only to find it’s all one layer (thus making it difficult to change single portions of your image).

Naming Layers

It’s a good idea to give layers a descriptive name. For example, you might call a layer that contains a picture of a computer “Computer.”

  1. Double-click the Layer 1 text within the Layers palette. Notice how the text becomes editable.

  2. Rename this layer Co. Name, as shown in Figure 2-5.

    image from book
    Figure 2-5: Renaming a layer

  3. Click outside the Layers palette to close the editable text.

Working with the Toolbox

Photoshop’s toolbox contains a collection of tools useful for creating and manipulating images. You’ll learn about these tools in detail as you work your way through this book.

If the toolbox isn’t displayed, select WindowTools from the menu bar. Figure 2-6 displays the tools you’ll use in this chapter. These tools include:

  • Rectangular Marquee tool

  • The Move tool

  • The Pencil tool

  • The Horizontal Type tool

  • The Custom Shape tool

  • The Foreground Color tool

    image from book
    Figure 2-6: Familiarizing yourself with Photoshop’s toolbox

    Tip 

    Notice that some icons in the toolbox contain a right- facing arrowhead. Pressing on these arrowheads brings up added tools you can select.

Creating Text

  1. Select WindowCharacter from the menu bar. The Character palette displays. Notice the Character palette is grouped with the Paragraph palette into a palette set. You can toggle from one palette to the other by selecting either the Character tab or the Paragraph tab.

  2. With the Character tab selected, enter the following settings, as shown in Figure 2-7.

    • Font Family: Palatino Linotype

    • Font Style: Regular

    • Font Size: 10 pt

    • Leading: (Auto)

    • Tracking: 200

      image from book
      Figure 2-7: Defining text settings in the Character palette

  3. Make sure the Horizontal Type tool is still selected. Click into your image window. In all capital letters, type the following: JONATHAN BING.

  4. Let’s now enlarge the first letter of each word. Using your Horizontal Type tool, drag your cursor over the J in JONATHAN. The J should be highlighted. In the Character palette, change the font size to 12. Do the same for the B in BING. Your screen should look something like Figure 2-8.

    image from book
    Figure 2-8: Creating and formatting text

Moving Image Elements

We’ll want to add a small logo graphic on the left side of this image. To do that, we’ll first need to move the text.

  1. Select the Move tool, which is the arrowhead icon at the top- right corner of the toolbar.

  2. With this tool selected, click on the Co. Name layer within the Layers palette. Then, click on the JONATHAN BING text within the image window. Click and drag on the text and move it to the right side of the image window. Leave some room to the left of the image window for a graphic you’ll be adding in a moment.

  3. To move your image pixel by pixel, select the Move tool and click on the Co. Name layer in the Layers palette. Then, use the Forward or Back arrow buttons on your keyboard. To move images 10 pixels at a time, hold the Shift key while you press the Forward or Back arrow buttons.

    Tip 

    If you’ve selected the Move tool, clicked onto the image window, and found you can’t move your text, it’s probably because the text layer isn’t selected. Go to the Layers tab and highlight the Co. Name layer. Select the Move tool and try moving the text again. The text should move now.

Creating Subtext for Your Logo

  1. In your Layers palette, create a new layer by pressing the New Layer button. Call this new layer Subtext.

  2. Select the Character tab from the Paragraph/Character palette set. Select the Palatino Linotype font. (This font should remain selected since you used it previously when creating the Jonathan Bing text.) However, this time decrease the font size to 8 pt.

  3. Select the Horizontal Type tool. Type the following (all in capital letters) underneath the JONATHAN BING text: ATTORNEY AT LAW.

  4. Use the Move tool to center this text underneath the JONATHAN BING text. Your screen should look like Figure 2-9.

    image from book
    Figure 2-9: Adding subtext to your logo

Drawing Lines

Although there are a couple of ways of creating lines in Photoshop, let’s start with one of the easiest: drawing with the Pencil tool. Perform the following steps:

  1. From the toolbox, select the Pencil tool.

    Notice the options bar, found underneath the menu bar. Each tool contains its own set of options. Many of the options are also available in various palettes. In Photoshop, you’ll find there are many different ways to perform the same types of actions.

  2. In the options bar, select the Brush drop-down field. Choose a brush diameter of 1, as shown in Figure 2-10. The Brush preset allows you to control the diameter of brush and pencil marks in Photoshop.

    image from book
    Figure 2-10: Changing a pencil mark’s diameter

  3. In the Layers palette, create a new layer by pressing the New Layer button. Call this new layer Top Line.

  4. With the Pencil tool selected, click somewhere below the J in JONATHAN. Notice a pencil mark appears.

  5. Hold down the Shift key. Click somewhere below the B in BING. You should see a line appear. Holding the Shift key allows you to make a straight, 90-degree line between two points.

  6. If the line seems a little too long or short, you can resize it. Press Ctrl+T. This is the shortcut to Photoshop’s Free Transform, which allows you to resize shapes on the fly. You can also access this by selecting EditFree Transform from the menu bar.

  7. Notice the line now contains two clear squares on each end and a clear square in the middle. These handles allow you to stretch or shrink the shape. Hold the Shift key and click and drag the ends of the line until the line is about the same length as the JONATHAN BING text.

  8. Press Enter to accept the transformation of the line.

  9. Press Esc to exit from transforming the line, as shown in Figure 2-11.

    image from book
    Figure 2-11: Creating and transforming a line

Adding a Graphical Element to your Logo

It’s a cliché, but it’s also true: A picture is worth a thousand words.

You can use words and lines with your logos, but they’ll look boring. The graphic you choose is important: It should suggest something about the company, whether it is an image that represents the business, or perhaps something more symbolic, like the company’s personality or style.

You’ll learn to create and manipulate custom shapes as you work through this book. For now, let’s use Photoshop’s Shape tool to draw a simple vector shape.

  1. Go to the Layers palette and create a new layer. Call this new layer Pen.

  2. Select the Custom Shape tool from the toolbox. Refer to Figure 2-6 earlier in this chapter if you need to see what this tool’s icon looks like. (Since the Custom Shape tool isn’t a default tool, you’ll need to select the right-facing arrow on the Rectangle tool to access it.)

  3. With the Custom Shape tool selected, go to the options bar and select the Shape drop-down field. You’ll notice a menu of shapes display. Also make sure that the Shape Layers icon is selected. The Shape Layers icon is located directly below the Image menu item.

  4. Select the right-facing arrow within this shapes menu to display a submenu of additional options.

  5. Select Objects from this drop-down list, as shown in Figure 2-12.

    image from book
    Figure 2-12: Selecting a shape from the Custom Shape tool’s options bar

  6. Press OK to any message that displays.

Now we can place one of these shape objects on our logo.

  1. Make sure you’re in the new Pen layer you’ve just created and have the Custom Shape tool selected. From the options bar, select the Shape drop-down menu. A shape menu displays.

  2. Select the Pen shape from this shape menu.

  3. Hold down the Shift key and drag your mouse somewhere within the left side of the image window. You should see a pen-shaped object display.

  4. Release the Shift key and your mouse. Press the Enter key to make this shape an image.

  5. Use Free Transform (Ctrl+T) to resize the pen shape if necessary. Your screen should look like Figure 2-13.

    image from book
    Figure 2-13: Adding a graphical element from the shapes menu to your logo




Web Designer's Guide to Adobe Photoshop
Web Designers Guide to Adobe Photoshop (Wordware Applications Library)
ISBN: 1598220012
EAN: 2147483647
Year: 2006
Pages: 108
Authors: Chris Tull

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net