Basic Skills in Photoshop CS6 – Part 2

Using Drawing Tools to Create Lines

You can create straight lines in Photoshop in several ways.


Vertical and Horizontal Lines

Using the Brush or Pencil Tool (B), move the cursor to the position from which you’d like the line to start on your document. Click and hold down the mouse button.

Hold down the Shift key to constrain mouse movement to straight lines, then drag the cursor to draw your line. Release the mouse button to complete the line.

Diagonal Lines

Using the Brush or Pencil Tool (B), position the cursor at the point from which you’d like the line to start and click once (releasing the mouse button this time). Hold down Shift and click on the spot where you’d like your line to end. Photoshop will connect the dots with a straight line.

Vector Lines

If you want to make vector lines, use the Line Tool (U), position your cursor , then click and drag. Hold down the Shift key if you want to constrain mouse movement to vertical, horizontal, or 45-degree lines. You can modify the color , stroke, and weight of the line in the options bar.

Basic Skills in Photoshop CS6-Part2Vector Shapes Preferable

In today’ s environment of devices with different resolutions, you’re better off using vector shapes whenever possible. Vector shapes, unlike raster layers, can be resized bigger or smaller without losing graphic information. If you need to make a version of a graphic at 96ppi and another version at 72ppi, a vector graphic will allow you to make that change without any problem, whereas you’re likely to face more loss of quality with a raster-based image. Continue reading…

Basic Skills in Photoshop CS6 – Part 1

Resizing a Document

Sometimes, you need to use images that were created by another person, or perhaps designed with another project in mind. In such cases, you may have to resize an an existing document.


Bring up the Image Size dialog box by selecting Image > Image Size or pressing Command-Option-I (Ctrl-Alt-I on Windows). You can resize the document by altering either the Pixel Dimensions or the Document Size. Use the former when resizing images that will be used on screen (such as on a web page), and the latter for resizing images that will be printed. You can maintain the original document proportions as you resize the image by checking the Constrain Proportions checkbox. T o scale layer styles (drop shadows, strokes, and so on), check the Scale Styles checkbox.

Resizing a Layer or Selection

Photoshop lets you resize layers or portions without affecting the overall size of a document.


From the Layers panel, select the layer that contains the element you wish to resize. If it contains other elements that you wish to exclude, select your element using one of the selection tools.

After making your selection, use Edit > Free Transform or press Command-T (Ctrl-T on Windows). A bounding box with handles will appear around your selection. Click and drag these handles to resize the element, as shown in Figure 2.7. T o keep the transformation in proportion so that the image avoids appearing squashed or stretched, hold down the Shift key and resize it using the corner handles.

Basic Skills in Photoshop CS6-Part1Figure 2.7. Resizing an element using corner handles Continue reading…

Layers in Photoshop CS6

Photoshop Layers

Layers are a powerful feature of Photoshop that enable you to work on one part of an image without disturbing the rest of it. While the concept of layers may seem intimidating at first, you’ll wonder how you ever survived without them once you get the hang of using layers. Figure 1.7 shows a Photoshop document made up of layers.

Layers in Photoshop CS6-1

Figure 1.7. Layered Photoshop document Continue reading…

Working in Photoshop CS6

Working in Photoshop CS6-6

Now that you’ve been introduced to the Photoshop workspace and have a basic idea of where everything is, let’ s start getting our hands dirty .

Creating New Documents

You can create a new document by selecting File > New… from the menu bar , or pressing the keyboard shortcut Command-N (Ctrl-N on Windows). The New dialog box will appear , as shown in Figure 1.3, where you can specify the document size and other setting.

Working in Photoshop CS6-1Figure 1.3. The New dialog box

Working in Photoshop CS6-2Snappy Presets

If you’re designing for a website, be sure to set the resolution at 72 Pixels/Inch to reflect the actual screen resolution. If you’re designing for a minimum screen size, such as 1024×768, be sure to take into account scrollbars and menus, and set your initial document size at a smaller dimension for your actual working area. 1000×650, for example, will give you a better estimate of your actual screen size.

If you want easy access to these dimensions for other new documents, it’ s probably a good idea to click Save Preset… and give the settings a name like “Web Page.” The next time you create a new document, you’ll be able to load your “Web Page” settings from the Preset list.

 Opening Files

Open files by selecting File > Open… from the menu bar, or pressing Command–O (Ctrl–O on Windows). You can select and open multiple files by holding down Command (Ctrl) and clicking on all the files you require in the Open dialog box.

Saving Files

Save a file by selecting File > Save or pressing Command–S (Ctrl–S on Windows). For a newly created document, this will save your work in Photoshop Document (PSD) format. If you’d prefer to save an additional copy of the document, you can use File > Save As… or press Command-Shift-S (Ctrl-Shift-S) instead. T o the great delight of Photoshop users everywhere, Photoshop CS6 introduces a backup save, where a recovery file is saved every ten minutes. You can change the time in between saves by going to Photoshop’ s preferences (Mac: Photoshop > Preferences > File Handling…, PC: Edit > Preferences > File Handling…), and choosing from 5, 10, 15, or 30 minutes, or 1 hour. If Photoshop crashes on you, the recovery file will open automatically the next time you start up Photoshop.

Working in Photoshop CS6-3Double-clicking Power
As if keyboard shortcuts weren’t quick enough, Windows users have even more ways to open and save files, such as:

■ holding down Ctrl and double-clicking the work area to create new documents
■ double-clicking the work area to pull up the Open dialog box to open files
■ holding down Alt and double-clicking the work area to open existing files as new documents
■ holding down Ctrl-Shift and double-clicking the work area to save documents
■ holding down Shift and double-clicking the work area to access Adobe Bridge: Adobe’ s “control center” and file browser

The work area is the dark gray area behind the document windows. If your shortcuts fail, check that you’re clicking on an empty spot on the work area, and not in one of the document windows or Photoshop tools.

Alas, on a Mac, Photoshop only allows for double-clicking the work area to open a document. Even then, you must have Window > Application Frame ticked in order for it to function. Continue reading…

The Workspace in Photoshop CS 6

The Workspace in Photoshop CS 6-1

The Photoshop Workspace

Photoshop’s “out of the box” workspace consists of the following components, shown in Figure 1.1:

Options bar

The options bar holds contextualized options for different tools.


By default, the toolbox sits to the left of your Photoshop window, and contains shortcuts to Photoshop tools.


Individual “panes” that hold information or options for working with your file, known as panels, float on the right-hand side. Each panel is labeled with a tab, and can be minimized, closed, grouped with other panels, or dragged to the panel docking areas on the right and bottom,and in the icon column. In Figure 1.1, the Color panel allows you to change the foreground and background colors by changing the Red/Green/Blue values directly , or by picking from the color spectrum.

Document windows 

Each open document has its own document window with a status bar along the bottom. The status bar displays information that’ s specific to the document. Document windows can be full-screen as shown in Figure 1.1, with multiple document tabs across the top, or dragged out to become independent, floating windows.

Menu bar (not shown)

You will probably already be familiar with the menu bar from other programs. This runs across the top of your display (Mac) or Photoshop window (Windows), and contains various menuoptions for Photoshop’ s tools.

The Workspace in Photoshop CS 6-1Figure 1.1. The Photoshop workspace

The Workspace in Photoshop CS 6-2Comps and Turtlenecks: Designer Lingo
Now that you’re going to be working in Photoshop, you might want to start talking like a designer. Designers, like professionals in most specialist fields, have their own terminology for their tools of the trade. A comp (short for “composite”) refers to a mockup of the final solution that a designer has in mind. Traditionally , a comp is used in the print world to refer to page layouts, but for web designers it usually refers to a static interface prepared entirely in Photoshop for the client to look over before they decide to proceed. You might even hear it being used as a verb, where comping is the process of creating that mockup site. Continue reading…