Getting Started with Photoshop Article

By Corrie Haffly | October 5, 2007 | Software Tutorials

You’ve heard of Photoshop, right? Of course you have — you wouldn’t be reading this book otherwise! You’ve probably heard of Photoshop’s sidekick, Fireworks, too, but you might not be quite sure of what it does or where it fits in.

Photoshop and Fireworks are two of the most commonly used tools in the web designer’s arsenal. From the preparation of initial design comps to generating optimized graphics for a web page, most web designers rely heavily on these two programs.

In this introductory chapter, which has been adapted from The Photoshop Anthology, 101 Web Design Tips, Tricks and Techniques, I’ll cover some of the basic tools and tasks that we’ll draw on in the later chapters. I’ll also share some of the shortcuts and time-savers that I use frequently. This chapter won’t give you an exhaustive review of the many things that Photoshop can do (where would it end!), but it should provide the bare bones that will help get beginners started. If you’re already familiar with the interface and can perform tasks like making selections, applying gradients, and working with layers, you might want to skip ahead to the next chapter.

So what are you waiting for? Open up Photoshop and let’s go!

The Photoshop Workspace

Photoshop’s “out of the box” workspace consists of the following components:

menu bar – You will probably already be familiar with the menu bar from other programs. This runs across the top of your Photoshop window, and contains various menu options for Photoshop’s tools.

options bar – The options bar sits beneath the menu bar and holds contextualized options for different tools. It also contains the workspace menu, where you can save and load arrangements of palettes.

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

Comps 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 and words for things. A comp (short for “composite”) refers to a mockup of the final solution that a designer has in mind. Traditionally, “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 he or she decides to proceed. You might even hear it being used as a verb: “comping” is the process of creating that mockup site.

palettes – Individual “panes” that hold information or options for working with your file, known as palettes (or panels), float on the right-hand side. Each palette is labeled with a tab, and can be minimized, closed, grouped with other palettes, or dragged in and out of a panel dock. In the example that follows, the Navigator palette contains a thumbnail of the image that allows you to zoom in or out of the image quickly, and to change the part of the image displayed on the screen.

document windows – Each open document has its own document window with a status bar along the bottom. The status bar sits to the right of the zoom percentage displayed in the bottom left-hand corner, and displays

information that’s specific to the document.

Customizing your Workspace

You can customize your Photoshop workspace to suit you or your project — almost everything within your workspace can be repositioned and reconfigured! You might choose to customize your workspace by:

changing the look of the menu bar

You can change which menu items are visible in your menu bar, and even add color to your menu items. If you wanted, you could also assign new or different keyboard shortcuts to menu commands (which I don’t recommend until you feel very comfortable with Photoshop or have a compelling reason to do so!). Go to Edit > Menus and use the dialog box to modify the menu bar and palette menus.

moving the options bar

If you want to move the options bar, you can do so by clicking on the handle on its left side and moving it around. The options bar will “dock” to the top or bottom of the screen automatically if moved near those areas.

moving the toolbox

The toolbox is extremely portable, and can be moved to any location on your screen. Move the toolbox by clicking on the light gray area at the top of it and dragging it around. You can switch between different toolbox layouts by clicking the double arrow along the top of the toolbox.

rearranging palettes

There are many ways to rearrange your palettes. You might want to separate a palette from its palette group, and move it into another group. You can do this by dragging the palette tab out of its original group and into the new group. You may want to expand or collapse a dock, by clicking on the double arrows at the top of the dock. You might also decide to drag some of your palette tabs out of their dock, and close the rest. To display a palette that has been closed, go to Window and select the palette you want to show.

displaying different information in the document window status bar

The status bar displays the document file size by default. The file size is shown as two numbers separated by a forward slash: the first number is an approximation of the image file size with all layers merged (known as “flattening” the image), and the second number is an approximation of the total file size of the image with layers intact. If all this sounds new to you, don’t worry — we’ll be discussing layers shortly. You can set the status bar to display different information, such as the document dimension in pixels, or the version number of the file. To do this, click on the arrow icon next to the status bar, select Show and choose the information you’d like to see.

Saving your Customized Workspace

As you become more proficient with Photoshop, you may discover that you use certain sets of palettes for different types of projects, and that there are some palettes that you don’t use at all. Photoshop allows you to save and load different workspaces — different arrangements of palettes, menus, and even different keyboard shortcuts — to help you work more efficiently.

After you’ve customized your workspace to your satisfaction, select the Workspace menu in the options bar, click Save Workspace and enter a name for your workspace, such as Creating Thumbnails or My Default Workspace. You can then load your different workspaces by opening Workspace and

selecting your custom workspace from the menu list.

Working in Photoshop

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 Ctrl-N on a PC or Command-N on a Mac. The New dialog box will appear,where you can specify the document size and other settings.

Opening Files

Open files by selecting File > Open from the menu bar, or pressing Ctrl-O (Command-O on a Mac). You

can select and open multiple files by holding down Ctrl (Command on a Mac) and clicking on all the files you require in the file dialog box.

Saving Files

Save a file by selecting File > Save, or pressing Ctrl-S (Command-S on a Mac). For a newly-created document, this will save your work in Photoshop Document (PSD) format. If you would prefer to save a copy of the document, you can use File > Save As or pressing Ctrl-Shift-S (Command-Shift-S on a Mac) instead.

Snappy Presets If you’re designing for a web site with a minimum screen size of 800×600 pixels, I’d recommend you start with a 750×550 pixel document. The smaller dimensions give you a better estimate of your actual screen area after you take into account scroll bars and menu bars. Also, be sure to set the resolution at 72dpi to reflect the actual screen resolution. 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 will be able to load your Web Page settings from the Preset list.

Saving Files for the Web

Photoshop files themselves can’t be embedded into a web page. You will need to export your file and save it in a web-friendly format. There are three formats for web graphics: GIFs, JPEGs, and PNGs.

GIF

The GIF format (pronounced “jiff” or “giff” depending on which side of the tracks you grew up) can have a maximum of 256 colors. GIF files support transparency and animation, and work best with graphics that have large areas of the same color, as shown in the logo below.

JPEG

The JPEG format (pronounced “jay-peg”), works best with photographic images or images that have more than 256 colors and gradients, such as the flower on the opposite page. Images saved in JPEG format are compressed, which means that image information will actually be lost, causing the image to degrade in quality.

PNG

The PNG format (pronounced “ping”) is similar to the GIF format in that it supports transparency and works best with solid-color images like the logo shown to the right, but it’s superior to the GIF format as it has the ability to support true levels of transparency for colored areas. Transparent PNGs are currently not in widespread use on the Web because older versions of Microsoft Internet Explorer do not support them; however, they’re often used in Macromedia Flash movies. PNGs can produce a better quality image at a smaller file size than can GIFs. Photoshop allows you to save an image as a

PNG-8 file (which works the same way as a GIF would with 256 colors) or a PNG-24 file (which allows for millions of colors as well as variable transparency).

Double-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 gray area behind the document windows. If your shortcuts aren’t working, check that you are clicking on an empty spot on the work area, and not in one of the document windows or Photoshop tools! Alas, Photoshop on a Mac does not have a work area, so Mac users won’t get to enjoy the goodness of double-click shortcuts.

To save for the Web in Photoshop, select File > Save for Web & Devices… or press Ctrl-Alt-Shift-S(Command-Option-Shift-S on a Mac). This will bring up the Save For Web dialog box shown overleaf, which will show you

a preview of the image that will be exported, with its optimized size in the bottom left-hand corner. You can adjust the settings for the image using the options in the pane on the right. Choose whether you want to save the file as a GIF,JPEG, PNG-8, or PNG-24, and have a play with the other settings, keeping an eye on the optimized file size. Try to strike a balance between the quality and file size of the image. When you’re happy with your result, click Save and give your image a filename.

If you tried the above exercise, you’re probably quite pleased with yourself for saving an image of reasonable quality at a file size significantly smaller than the original. You managed this by altering the settings in the right-hand pane, but what do these settings actually do?

GIF/PNG-8

colors – Adjusting this setting reduces the number of colors used in the image. This will usually make the biggest difference in the final image.

dither amount and type (No Dither, Diffusion, Pattern, Noise) – This setting has nothing to do with being nervous or agitated (although it’s quite possible that you may have been a few moments ago!). Dither refers to a compression technique in which the pattern of dots is varied to give the illusion of a color gradient. Changing the dither will result in a more noticeable degradation for images that involve a large number of colors blended together.

transparency – If you want transparent areas in your graphic, check this box. We’ll look more closely at transparency in Chapter 2.

matte color – For transparent images, the matte color is used to help blend the edges of your image into the background of the web page. For non-transparent images, the matte color defines the background color of the image. Using matte color with transparent images is covered in more detail in Chapter 2.

JPEG

quality – Changing the value in the Quality drop-down box alters the level of compression for the image. Reducing the quality may result in blurring or pixelation, but too high a setting will produce a large file that will take users too long to download. A good approach is to decrease the quality value gradually until you notice the degradation of your image becoming unacceptable. A reasonable compromise will be somewhere around this point.

Saving Files for the Web in Fireworks

You can optimize images for the Web in Fireworks using the Optimize palette, shown at right. Set the file type and options in the Optimize palette in advance, and when you’re ready to export your web image, select File > Export or press Ctrl-Shift-R (Command-Shift-R on a Mac). Fireworks will save the image based on the settings that you’ve defined.

Why Two Tools? Considering that it’s possible to save files for the Web in Photoshop, it’s perfectly reasonable for you to wonder why you would need Fireworks. While it’s true that both programs can perform many of the same tasks, there are certain things that Fireworks can do that Photoshop can’t. Fireworks also makes web-specific tasks easier, and since it’s a smaller program that doesn’t contain the full suite of Photoshop effects, it loads more quickly than Photoshop. As you work through this book

you’ll come to learn which tool is more suitable for particular tasks.

Photoshop Layers

Layers are a powerful feature of Photoshop that allow 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, once you get the hang of using layers you’ll wonder how you ever survived without them! The examples on the next page show how the layers in the Photoshop

document to the right stack together.The transparent parts of any layer, shown by the checkered grid, allow the layers beneath that layer to show through.

You can show and hide each layer in an image by clicking on its corresponding eye icon in the Layers palette, as shown at the bottom of the following page.

To organize your layers, you can arrange them into layer groups by going to Layer > New > Group…. Each layer group displays in the same way as any ungrouped layers on the Layers palette. A layer group is signified by a folder icon. You can collapse or expand layer groups by clicking on the triangle to the left of the folder icon, and nest layer groups within each other by dragging

one folder icon into another.

Layer Shortcuts and Tasks

Rename layers by double-clicking on the layer name.

Change the transparency of a layer by changing its opacity with the Opacity slider, or typing a value into the Opacity box (which is visible when you have the Selection, Move, or Crop tools

selected). Duplicate a selected layer by pressing Ctrl-J (Command-J on a Mac). You can also duplicate a layer by dragging it

while pressing the Alt (Option) key. Select multiple layers by holding down Ctrl (Command on a Mac) and clicking the layer names. This forms a

temporary link between the selected layers that allows you to move them as one unit, delete them all, and so on.

You can also link layers together. Select layers by clicking on them while holding down Shift or Ctrl (Command on a Mac). Once you have selected all the layers you wish to link, click the Link Layers button at the bottom-left of the Layers palette (signified by the chain). Linking layers allows the link relationship to remain even after you select a different layer (unlike the process of simply selecting multiple layers).

To unlink all the layers, select one of the linked layers and go to Layer > Unlink Layers. To unlink a single layer, select the layer you wish to remove from the link and click its corresponding link icon; the other layers will stay linked. To temporarily unlink a layer, hold down Shift and click on its link icon (a red “X” will appear over the link icon). Reactivate the link by holding down Shift and clicking the link icon again.

Rearrange layers by dragging the layer above or below other layers. Use the “move down” shortcut Ctrl-[ (Command-[ on a Mac) and the "move up" shortcut Ctrl-] (Command-]) to move selected layers up and down. Shift-Ctrl-[ and Shift-Ctrl-] (Shift-Command-[ and Shift-Command-] on a Mac) will bring layers to the very top or the very bottom of the stack.

Select a layer by using the keyboard shortcuts Alt-[ and Alt-] (Option-[ and Option-] on a Mac). These keystrokes let you move up and down through the layers in the Layers palette.

Create a new layer by pressing Shift-Ctrl-N (Shift-Command-N on a Mac). This will bring up the New Layer dialog box. Want to create new layers quickly without having to deal with the dialogue box? Simply press Shift-Ctrl-Alt-N (Shift-Command-Option-N).

Merge a layer into the one beneath it by pressing Ctrl-E (Command-E). If you have selected layers, this shortcut will merge those selected layers together.

Quick Keyboard Shortcuts Naturally, most of the tools in the toolbox have a keyboard shortcut. You can learn each tool’s shortcut by hovering your cursor over a tool for a few seconds: a tooltip box will appear, displaying the name of the tool and its shortcut. If additional tools are available in the flyout menu, you can cycle through them by pressing Shift-[keyboard shortcut]. Keyboard shortcuts can save you valuable time — pressing “V” to bring up the Move Tool is certainly a lot quicker than moving the cursor over to the toolbox to select it. It may not seem all that significant right now, but the time you take to access tools will add up over the course of a project! For your convenience, whenever I mention a tool, I’ll list its shortcut

in parentheses, e.g., the Move Tool (V).

Photoshop Toolbox

You’ve probably been hanging out to get stuck into the very nifty Photoshop toolbox. In this section, I’ll introduce some of the most frequently used tools found in the toolbox. I’ll discuss some of the other tools in later chapters as we apply them to solutions.

You’ll notice that some of the tool icons have small black triangles in their bottom right-hand corners. These icons contain hidden treasures! The triangle indicates that there are more related tools available; if you click on the tool icon and hold it down, a “flyout” menu will appear,displaying the additional tools

Secret Selections Selections can have varying levels of transparency, known as the degree of opacity. It’s actually possible to make a selection with an opacity of 100% in one area, but only 20% in another area. If a selection contains any pixels for which the opacity is more than 50%, they will be displayed with a border of dotted lines. Photoshop won’t visibly outline areas with less than 50% opacity (though they will still be selected). Selection tools automatically select at 100% opacity. We’ll learn about creating transparent selections using Quick Masks and alpha channels later in this chapter.

Selection Tools

You can use the selection tools to select certain areas of your document for editing. If you use a selection tool, only the area that’s selected will be affected by any changes you make. You can “feather” selections (specify a fuzzy radius for them) using the Feather field in the options bar. The example at the top of the next page shows two rectangles: one created by filling in a selection with a feather of zero pixels, and one that’s created by filling in the same selection with a feather of five pixels.

Marquee tools (M) are used to create rectangular or elliptical selections, including selections that are “single row” (one pixel tall, stretching across the entire width of the document) and “single column” (one pixel wide, stretching through the entire height of the document). To make single-row or single-column selections, click with the appropriate tool on the

image area where you want to select a row or column.

You can use the Lasso tools (L) to create freeform selections. The Lasso Tool comes in three different forms:

Lasso Tool (L) – Click and drag the Lasso Tool to draw aselection area. Releasing the mouse buttonwill close the selection by joining the start and end points with a straight line.

Polygonal Lasso Tool (L) – Click at different points to create vertices of a polygonal shape. Close the selection by moving your cursor to the beginning and clicking once, or pressing the Enter key.

No Selection Sometimes Equals All Selected If you’ve made a selection, only the pixels within the selection are active and can be worked on. Some tools can be used without making a selection at all. However, be aware that if you have not made a specific selection, Photoshop will assume

that you are working on the entire layer and any changes you make will affect all pixels in the layer.

Magnetic Lasso Tool (L) – If you think you need help with making your selection, try the Magnetic Lasso Tool. Photoshop will attempt to make a “smart” selection by following the edges of contrast and color difference. Click once near the “edge” of an object and follow around it — Photoshop will automatically lay down a path. You can also click as you follow the line to force points to be created on the path. Close the selection by pressing the Enter key or clicking at a point near the

beginning of the selection.

Magic Wand

The Magic Wand Tool (W) selects areas of similar color. You can change the tolerance (how close the color values should be to the sampled color in order to be selected) of a Magic Wand selection, and choose whether you want the selection to be contiguous (pixels that are touching) or not (in which case, matching colors across the entire document will be selected).

Selection Shortcuts and Tasks Hold the Shift key to add another selection to the first. Hold the Alt key (Option key on a Mac) to subtract your new selection from the first. Hold Shift-Alt (Shift-Option) to select the intersection of your first and second selections. Use the arrow keys to move the selection pixel by pixel. If you feel that this doesn’t move your selection quickly enough, hold down Shift and use the arrow keys to move the selection ten pixels at a time. Press Ctrl-J (Command-J on a Mac) to copy the selection into its own layer. To cut the selection into its own layer, press Shift-Ctrl-J (Shift-Command-J). If this seems familiar to you, it’s because I mentioned earlier how to copy a layer using the same keyboard shortcut. Now that you know that not selecting anything sometimes means that everything is selected, it makes sense that simply by selecting a layer in the Layers palette, you can copy the entire layer by pressing Ctrl-J (Command-J). To deselect a selected area, click outside of it with one of the Marquee tools, or press Ctrl-D (Command-D on a Mac). To reactivate your last selection, press Shift-Ctrl-D (Shift-Command-D).

The Move Tool

The Move Tool (V) moves a selected area or an entire layer. You can invoke the Move Tool temporarily when using most other tools by holding down the Ctrl key (Command key on a Mac).

Move and Copy Shortcut For most tools, holding Ctrl-Alt (Command-Option on a Mac) and dragging a selected area will temporarily invoke the Move Tool, allowing you to move and duplicate the selected layer quickly.

You can also duplicate a layer by holding down the Alt key (Option key on a Mac) while using the Move Tool, as shown in the image below.

The Crop Tool

The Crop Tool (C) is used to trim images. Create a selection using the Crop Tool, then double-click the center of the selection, or press Enter, to crop the image to the size of the selection.

To cancel without cropping, select another tool or press the Esc key.

Crop Outside the Box You can use the Crop Tool to resize your canvas. Expand your document window so that it’s larger than the image area, and create a crop selection that includes the image and extends onto the gray areas “outside” the image. Applying this crop will resize your canvas to include those extended boundaries, making your canvas larger.

Drawing and Painting Tools

Apart from its extraordinary photo editing abilities, the multi-talented Photoshop also provides drawing and painting tools that allow you to create your own shapes and backgrounds.

Brush

The Brush Tool (B) is suitable for soft-edged painting or drawing. Draw strokes by clicking and dragging the mouse over the canvas. You can change the brush size and other settings in the options bar at the top of the window.

Pencil

The Pencil Tool (B) is suitable for hard-edged drawing or painting and has similar options to the Brush Tool for setting its size, opacity, and more. The Pencil Tool is often used for drawing on, and editing individual pixels in, zoomed-in images.

Eraser

The Eraser Tool (E) removes pixels from the canvas. You can choose between Pencil, Brush, or Block mode from the Mode drop-down menu in the options bar.

Aliased vs Anti-aliased Unlike the Brush Tool, the Pencil Tool’s edges are aliased. The term aliased refers to the edges of an object being “jagged,” in contrast to an anti-aliased object, in which the edges are “smooth.” In the two examples shown here, the top shape in each example was created using the Pencil Tool, while the bottom shape was created using the Brush Tool. Notice the difference in the “jaggedness” of the edges of these curves. We’ll look more closely at anti-aliasing when we discuss the Text Tool.

Paint Bucket

The Paint Bucket Tool (G) fills a selection with a flat color. To use the Paint Bucket Tool, click once in the area that you wish to fill. If the chosen area is not within a selection, the Paint Bucket Tool will fill all similarly-colored pixels within the

vicinity of the clicked area

Gradient

The Gradient Tool (G) fills a selection with a blend of two or more colors, known as a gradient. You can easily create your own gradient, or use any of the preset gradients available in Photoshop.

Display the gradient presets and tools by clicking on the small triangle on the right-hand side of the Gradient Tool. Apply a gradient by setting your desired colors, choosing your gradient style, then clicking and dragging the cursor over the area to be filled.

I find that I use the first two gradients — the foreground-to-background gradient, and the foreground-to-transparent gradient — most often. The former will blend your foreground color into your background color, while the latter will blend your foreground color into a transparent background, giving it a “fading out” effect.

Text Tool

The Text Tool (T), true to its name, creates text layers. This one’s easy to use — just select the Text Tool, click on the canvas, and start typing! You can also click and drag to create a rectangular text area that will force text to wrap within its boundaries. You can change the font size, color, and other text properties using the options bar along the top of the window.

When the Text Tool is active, you can move the cursor outside of the text area. The cursor will change from the “text insert” cursor to the “move” cursor, and you’ll be able to move the text layer around.

It’s worth noting that when the Text Tool is active, you can’t use keyboard shortcuts to access other tools. This may seem like an obvious thing to point out now, but it won’t always be so apparent — especially when your text mysteriously starts spurting strange characters because you’ve been trying to use the shortcut keys!

To finish using the Text Tool, press Ctrl-Enter (Command-Return on a Mac). You can then resume your regular keyboard shortcutting!

Shape Tools

You can create shapes simply by clicking and dragging Photoshop’s Rectangle, Rounded Rectangle, Ellipse, Polygon, Line, and Custom Shape tools (U).

The specific options for each shape tool are displayed in the options bar, and you can access additional options by clicking on the arrow to the right of the Custom Shape button. For example, the Line Tool has options for displaying arrowheads, and for controlling the shapes and sizes of those arrowheads, as shown in the example below.

If you look at the options for each shape, you’ll notice that there are three different methods you can use to create a shape:

Your shape will be created as a solid-colored layer covered with a vector shape mask. Confused? Think of the mask as a sheet of dark paper that has a hole (your shape) cut out of it so that the color shines through the hole. To change the color,double-click on the color block in the Layers palette as shown in this example. To change the vector shape mask, use the vector editing tools.

as a path – Your shape will be created as a path in the Paths palette, as shown in the example above (in which the path has been named Work Path).

as filled pixels – Your shape will be created on whichever layer is currently selected. I created a new layer, then created a shape using the Fill pixels option on Layer 1 in the above example.

Selecting Colors

Set foreground and background colors by clicking on the appropriate tile and choosing a color from the Color Picker, as demonstrated in the example below.

Color Picker Shortcuts Press X if you want to switch the foreground and background colors. Press D if you want to revert to a black foreground and white background.

Eyedropper

The Eyedropper Tool (I) lets you sample another color from your image, and set this as the foreground color. In fact, it’s actually possible to sample colors from anywhere in your display and even from other applications outside of Photoshop. Simply click inside the document window, then drag the cursor to the color you wish to sample. Click to select that color.

The Eyedropper Tool also allows you to set the background color. To do so, hold down the Alt key (Option key on a Mac) as you select colors using the eyedropper.

The Paint Brush, Pencil, Paint Bucket and any of the other painting or drawing tools can temporarily be turned into the Eyedropper Tool by holding down Alt (Option).

The Hand Tool

The Hand Tool (H) moves your canvas, which is handy (pardon the pun!) when you’re zoomed in to an image, or have a very large document open.

What’s even handier is the fact that you can invoke the Hand Tool while you’re using any other tool (except the Text Tool) by holding down the spacebar. This is a neat way to position your image exactly where you want it without having to chop and change between tools to do so.

Other Useful Tasks and Shortcuts

Zooming

Zooming right into your image is the only way to make subtle changes at the pixel level. Use Ctrl + to zoom in and Ctrl – to zoom out. You can also zoom using the slider on the Navigator palette.

Making a Selection Using the Layers Palette

To select the pixels on a particular layer, press Ctrl (Command on a Mac) and click the thumbnail of the layer. This selection will also take into account the transparency of any pixels, so painting in the selection will recreate the transparency settings of the original layer. The example at the top of the next page shows a selection I made based on one of the text layers in my sunset document.

Making a Selection Using a Quick Mask

Quick Masks are one of those closely guarded trade secrets that professional designers use all the time, but beginners often are wary of trying because they seem complicated at first. Well, they’re not!

A Quick Mask is an alternative way of making a selection. The usual way to use a Quick Mask is to go into Quick Mask Mode (Q) and, using a tool such as the Brush Tool, painting the things you don’t want to select. This is called painting a “mask,” and the resulting reverse-selection will display as the transparent red color that you can see in the example overleaf. You can edit this red layer — honing the mask shape, for instance — using the drawing and painting tools. Those alterations won’t affect your image, though: they impact only on your final selection. Switching back to Standard Mode (Q) will complete your selection.

Why would we use this technique instead of those trusty selection tools that we’ve all come to depend on so heavily? Well, Quick Masks have a couple of advantages over the standard selection tools:

1. They allow you to control the level of transparency of your selection. 2. It’s easier to color an object in, than it is to carefully draw a line around it.

Initially, it can be difficult to get your head around the fact that you aren’t painting on your image: you’re just painting the selection. But once you master that concept, you’ll feel confident to be able to make a selection quickly on any shape, no matter how difficult it seems!

Quick Mask Options I prefer to set Quick Mask Mode so that it lets me paint in the selected areas rather than the non-selected areas, as shown in this example. To alter your settings to do the same thing, double-click on the Quick Mask Mode icon and change the Color Indicates: option to Selected Areas.

Alpha Channels and Selections

You can use alpha channels to create selections and save them for later use. If you open the Channels palette, you’ll see several channels, displayed in a similar way to layers in the Layers palette. By default, you’ll see the color channels, which represent how much of each color is represented in the document. You can click the Create New Channel icon at the

bottom of the palette to create your own alpha channel.

You can then use any of Photoshop’s painting or drawing tools to create a grayscale image that will represent your selection — white areas represent selected areas, black areas represent deselected areas, and grays represent the levels of transparency in the selection.

To turn your alpha channel masterpiece into a selection, simply hold down Ctrl and click the channel’s thumbnail (hold Command and click if you’re on a Mac).

To return to the normal image view, click on the Layers palette tab, and select any layer. Your selection will still be visible.

You can also create your own alpha channels from existing selections — a capability that can be very useful! For example, let’s say you’ve created a selection of an island silhouette like the one shown in the example below. You have a feeling that you’ll be reselecting this island pretty often, but you’d rather not recreate the selection each time. No problem! Once the selection has been made, use Select > Save Selection. Name your selection (in this example, Land), and click OK.

If you go to the Channels palette, you’ll see a new selection at the bottom of the list, named Land in the following image — that’s your saved selection. Now you can reload your Land selection as many times as you need to!

The History Palette

The History palette is your key to time travel (in Photoshop, anyway). It lists the most recent steps that you’ve made, and allows you to undo your actions by rolling your image back to a previous state. You can set the number of steps that are stored in the memory by selecting Edit > Preferences > Performance (Photoshop > Preferences > Performance on a Mac) and changing the value in the History States text box.

Like most of Photoshop’s other tools, the History palette has a set of useful keyboard shortcuts for quick access:

Ctrl-Z (Command-Z on a Mac) lets you undo and redo the previous step. Ctrl-Alt-Z (Command-Option-Z) steps back through the History palette. Shift-Alt-Z (Shift-Option-Z) steps forward through the History palette.

As only a limited number of history states are available, there may be cases in which you want to save a”snapshot” of your document so that you can revert back to it later if required. To do so, click on the small triangle on the top-right of the History palette and choose New Snapshot…. You can save a snapshot of the whole document, the current layer, or merged layers.

When Photoshop Stops Working

Woah! Photoshop stops working? That certainly doesn’t sound too promising! Before you panic, let me explain. Given the multitude of powerful features and fantastic tools it offers, it’s no wonder that, on occasion, Photoshop can exhaust itself. It may start behaving a bit erratically, and might even freeze, crash, or automatically exit during startup. If you find yourself in this situation, the first thing to do is reset the preferences file. The preferences file (which you can customize by going to Edit > Preferences on a PC, or Photoshop > Preferences on a Mac) holds Photoshop settings and can often become corrupted.

The location of the preferences file depends on the operating system and version of Photoshop you are using. For Photoshop CS3, the preferences file is named Adobe Photoshop CS3 Prefs.psp.The preference file for other versions of Photoshop will have a similar name.

Backing Up Your Preferences File It’s a good idea to back up your preferences file by copying and pasting it into a location outside of the Photoshop settings folder. Then, if the preferences file Photoshop is using becomes corrupted, you can copy your backup back into the settings folder to replace the corrupted file, without losing any of your settings.

To reset the preferences file, locate the current preferences file, delete it (while Photoshop is closed), and restart Photoshop — it will recreate the preferences file using default settings. Creativepro.com provides a detailed tutorial that explains how to find and replace your preferences file, and includes preference filenames for different versions of Photoshop.

If Photoshop continues to act up, restart it while holding down the Shift-Ctrl-Alt keys (Shift-Command-Option on a Mac), and click OK when asked if you wish to delete the Photoshop settings file. Unfortunately, this will also delete your custom actions, tools, and other settings, but the good news is that it should fix your Photoshop problems.

Summary

This chapter provided an overview of the Photoshop and Fireworks interfaces and common tools, and also explained a few basic tasks such as creating new documents and saving files for the Web. You also took a quick tour of handy keyboard shortcuts and other time-saving tips. Even if you haven’t used Photoshop before, you now have the tools that you’ll need to work with the examples we’ll discuss throughout the rest of this book

Getting To Know Photoshop – The Main Tool Bar

By Richard Carpenter With 14 Comments

Now on Photoshop Plus you can learn the very basics of using Adobe Photoshop, the series is aimed at new comers opening photoshop for the very first time. We’ll start by looking at the main tool bar.

The Main Tool Bar (Exploded View)

Getting To Know Photoshop: The Main Tool Bar

If you click the image above you can view the photoshop main tool bar in its exploded view. A good feature in photoshop is that every tool is binded to a shortcut key on the keyboard, if you notice on each of the tools there is a letter which tells you which key you

have to press to select that certain tool.

Most tools in the tool bar have a fly out menu, you can easily scroll through each tool in that tool set by holding down the shift key then pressing the tool shortcut. So for example if i have the “Brush Tool” (B) selected and wanted to switch to the “Pencil Tool” (B) which shares the same shortcut key i can simply hold down the shift key whilst pressing the shortcut key

(B) and it will circle through each tool in that tool set.

Quick Tip:

if you hold down a shortcut key when another tool is selected, Photoshop temporarily changes to that tool. When you are finished using that tool, release the shortcut key and the tool reverts to the original tool you were using before.

The Main Tool Bar: Tools Explained

I’m now going to briefly explain a bit about each tool in the main tool bar.

Move Tool (Shortcut Key V): The move tool allows you to move elements around your canvas, it also allows you to move several other items such as guides, shape layers, masks and text objects.

Shape Selection Tools (Shortcut Key M): This tool set allows you to quickly make a selection using either a rectangle, ellipse, row or a column style selection.

Lasso Selection Tools (Shortcut Key L): These set of tools allow you to make quick selections in the form of a lasso tool in which can be randomly drawn with the mouse and left mouse button, polygonal lasso tool which allows you to make selections in vertical, horizontal and diagonal lines and finally the magnetic lasso tool which allows you to make selection just by using the mouse.

Quick Selection Tools (Shortcut Key W): These tools can select areas of the document by detecting areas that are similar.

Crop and Slice Tools (Shortcut Key C): The crop tool lets you select an area of the document which you want to keep then removes the area around it. The slice tool is used for slicing up web images.

Eye Dropper, Ruler, Note and Count Tools (Shortcut Key I): The eye dropper tool is used to select a new foreground color from pixels in an image, the ruler tool is used to measure areas in an image. The note tool is a cool little tool which enables you to add notes to an image and the count tool allows you to count and log items in an image.

Healing Tools (Shortcut Key J): The healing tools provide quick ways to heal areas of an image. The heal tools can remove red eye from photo’s, dust marks and scratches.

Brush Tools (Shortcut Key B): The brush tool set allows you to apply painting techniques to enhance and create images, the brush tool is also used in conjunction with many other tools.

Stamp Tools (Shortcut Key S): The stamp tool set consists of two types of tool, the clone stamp tool and the pattern stamp tool. The clone stamp tool allows you to select and area of an image and then stamp or brush that area onto another part of the image. Its a really use for tool for removing skin blemishes, spots etc… The pattern stamp tool allows you to apply a pattern to an image using brush strokes.

Eraser Tools (Shortcut Key E): The eraser tool does exactly what it says on the tin, it allows you to quickly erase pixel date from an image.

History Brush Tools (Shortcut Key Y): The history brush tools are used to repair areas of an image by painting data from a previously edited state of an image. Just like returning part of an image back to its original state after editing.

Blur, Sharpen and Smudge Tools (Shortcut Key NONE): This tool set allows you to sharpen, smudge and blur part of an image using brush strokes.

Dodge, Burn and Sponge Tools (Shortcut Key O): The dodge and burn tools allow you darken or lighten part of an image using brushes, where as the sponge tool allows you to add or remove saturation to an image.

Fill Tools (Shortcut Key B): The fill tools are used to fill elements on your canvas with either a solid color, pattern or gradient.

Path Creation Tools (Shortcut Key P): The path creation tool also known as the pen tool allows you to create vector shapes and custom shapes using paths and anchor points.

Path Selection Tools (Shortcut Key A): The Path Selection tools allow you to select and manipulate vector paths by adjusting the anchor points.

Type Text Tool (Shortcut Key T): The Text tools allow you to add textual elements to images, either vertically or horizontally. The type text tool can also be used in conjunction with the path selection tools allowing you to type text onto a selected path.

Shape Tools (Shortcut Key U): The Shapes tool set can easily be used to create and manipulate simple geometric vector shapes and lines as well as custom vector shapes.

3D Objects Tool (Photoshop Extended Only – Shortcut Key K): The 3D objects tool set will allow you to create and manipulate 3D objects within photoshop. This tool set is only available to Photoshop Extended Versions.

3D Camera Tool (Photoshop Extended Only – Shortcut Key N): The 3D camera tool set will allow you to manipulate camera views, this tool can also be used in conjunction with the 3D objects tool. This tool set is only available to Photoshop Extended Versions.

Hand and Rotate Tools (Shortcut Keys H and R): Using the Hand tool, you can grab onto the image and pan by dragging the mouse. This is available only when you are zoomed in on the image, but it’s very useful for navigating around your image. Alternatively you can hold down the spacebar key on your keyboard which will have the same effect. The Rotate View tool allows you to rotate the canvas in the document window by dragging with the mouse. If you hold down the Shift key while rotating the canvas, the rotation occurs in 15-degree increments. Rotating the canvas can be useful if you need to align elements.

Zoom Tool (Shortcut Key Z): The zoom tools is simply used for zooming in onto areas on your document, the zoom tool zooms in at 100 percent in segments allowing you to zoom in up 3200%. You can also zoom using photoshops preset options which are Actual Pixels, Print Size and screen size.

Background and Foreground (Shortcut Key NONE): The background and foreground color swatches indicate your current selected background and foreground colors. Clicking one of the swatches will allow you to pick a new color.

Default Background and Foreground Colors (Shortcut Key D): The default background and foreground color button will reset your color pallet back to its original colors. The original colors are foreground black and white for background.

Switch Background and Foreground Colors (Shortcut Key X): The switch button allows you to switch between your background and foreground colors.

Edit In Quick Mask Mode (Shortcut Key Q): This toggles between Normal and Quick Mask mode. The Edit in Quick Mask mode option allows you to tweak selections using the brush tool to paint the exact shape.

Compact Menu (Shortcut Key NONE): This button will transform your tool bar into a more compact version, ideal for smaller monitors.

Selection in Photoshop

Photoshop selects pixels based one of the three properties, as shown in the image below:

1. Chroma: is the color of the pixel. Color of a pixel is the level of RGB values and color based select tools like the

Magic Wand. Select by color uses the RGB% as a criteria to group pixels based on the set tolerance values.

2. Luma: is a selection based on Illumination levels. Illumination levels are whiteness of the image, which is nothing but higher values for all the three R, G and B channels. Photoshop doesn’t have a native interface for a Luma based selection, but many existing tools can be hacked to get a similar result.

3. Masks: are based on spatial position. Pixels are selected and discarded or masked by a parallel layer bound to corresponding image layer. Masks are grayscale and brightness of the mask is called an Alpha level, which is the degree of opaqueness of the corresponding layer pixel. It’s also called the Transparency/Opacity channel as in RGBA etc.

A Note on Masks

In this article, words like Masks

and Alpha will be used

interchangeably. The process of

transferring images to layer masks

will be shown once and then

used repeatedly without explicitly

mentioning thereafter.

Step 1

Open a new image that you want to use as a mask. Double-click the background layer and create a new layer, which is "Layer 0." Make a new layer, which is "Layer

1," on top of it and fill with a uniform color, then hide "Layer 1."

Step 2

Go to "Layer 0" and click Select > Select All (Command + A) to select all pixels. Next, click Edit > Copy (Command + C) to

copy all pixels to the clipboard

.

Step 3

Go to "Layer 1" and create an empty Layer Mask. Initially an all transparent Layer Mask will be created. Alt-click the layer mask to see it in the canvas.

Step 4

With the Layer Mask visible, paste onto the canvas by clicking Edit > Paste (Command + V). A grayscale version of the copied image will be pasted in as the layer mask.

Step 5

Click on the fill layer thumbnail (not mask) to see the result. Any image can be applied as a Layer Mask to another layer. The opacity of the layer will be controlled by grayscale level of the mask.

More on Masks

The easiest way of creating a Layer Mask is to click the Add Layer Mask button with something selected on the canvas. The selection will be saved as a layer mask attached to the current layer and

everything outside the selection marquee will be masked and hidden.

Activate Layer Masks

Alt-clicking on the Layer Mask makes it active for editing. Only activated layer masks can be edited which are represented by a thin white outline around them.

Add Shapes to Layer Masks

Dragging any shape onto the canvas while a layer mask has been activated will draw it on the Mask instead of the layer itself. To draw it again on the layer we need to deactivate the Mask by clicking on

the layer thumbnail.

Add Brush Strokes to Layer Masks

The same is true for brush strokes. Anything painted

on the canvas with a Layer Mask selected will draw it on the Mask instead of the Layer. We can use this property to select objects with irregular boundaries from backgrounds, by painting everything else black on the Layer Mask. White brush strokes will reveal and blacks will conceal.

Copying a Layer Mask to Another Layer Finally, we can transfer the Layer Mask to another layers by simply loading it as a selection (Command-click) and unloading as we did in the first step by clicking the Add Layer Mask button. Or by Alt-

dragging the mask to another Layer (Not Shown).

Boolean Operations with Selections

This example shows how to Load, Add, Subtract, and Intersect selections between overlapping layers just with quick thumbnail clicks.

Load Pixels to Selections

In "Layer 2" Command-click to load a fill as a selection. Any pixel which is not transparent in "Layer 2" will be loaded as a selection. This is not the same as copying the layer, only its outline. The green fill shows the selected region although you will get only the surrounding Marquee. Let’s call this state (with "Layer

2" selected) the initial state.

Addition

With the "Layer 2" loaded as a selection, Command + Shift-click on "Layer 1" to add it to the selection. Now non-transparent pixels of both "Layer 1" and "Layer 2" are combined as the new selection. Notice the small plus sign in the Command-Click box.

Subtraction

Revert to the initial state and Command + Alt-click on "Layer 1." This will subtract any overlapping pixel of "Layer 1" from the current selection of "Layer 2." Notice the minus sign.

Intersection

Revert to initial state and Command + Alt + Shift-click on "Layer 1" to keep only the overlapping pixels as a selection. Notice the X sign. If the layers are not

overlapping this action will deselect all.

Garbage Masks

Garbage Masks are created to roughly isolate the ‘region of interest’ from rest of the image.Further trimming is carried out inside the Garbage Mask with precision.

Vector and Raster Selections

Draw an outline around the region of interest in the image with any of the Lasso Tools and double-click to complete the selection. A Garbage Mask needs to be saved for further refining, which can be done both as a Layer or Vector Mask. We must choose it depending on complexity of the outline and how we are planning to trim it later on. With the Lasso selection click Add Layer Mask to save it as a Layer Mask.

Alternatively, we can also save the selection as a Vector Mask which can be later refined by working on the shape spline that defines its outline. With the Lasso selection still intact (2), go to the Paths tab (3b) and click Make Working Path from the Selection button at the bottom. This will save the selection outline as a Shape Working Path.

Now load the selection again, and return to Layers tab. Click Add Layer Mask once to create a Layer Mask (Command-click to load again) then click the same button( 6b) once more to Add Vector Mask. Saving selections as Vector Masks or Shapes saves memory.

Selecting with Vector Mask

Click on the Vector Mask to activate it. Or selecting any of the Shape tools will make it active. Vector Masks are modified by adjusting the spline positions (Control Points) and curvature (Tangents). You can disable, delete, or save the Layer Mask with another Layer. The Convert Point tool is most suitable for altering Vector shapes and Paths. Click and drag on the handles, then Command-click on control points to move them.

Once a acceptable outline has been achieved use the Add Points tool to refine and further match the outlines. Delete points when necessary. Dragging handles with Command + Shift will lock their relative slopes. Drag directly on the Control

Point to reset handles. Regular curvy shapes are best to be extracted with this process.

This method is also best in situations where boundaries are not clearly visible.

Select by Color Range

Selecting by color is the fastest way to Chroma select. Click Select > Color Range and select a color with the Eyedropper Tool available. Once selected certain shades can be removed selectively with the Minus (-) Eyedropper or again added with the Plus (+) Eyedropper. There is also a preview window that displays the selected region or the original image.

This tool can be used to setup Garbage Masks around the subject and later refine it with editing the Mask. Select by color is not a one-click solution, but does a great job in minimizing manual work.

Chroma from Channels

Color information of each type are stored in as separate channels, which can be viewed in the Channels Tab. We can use the channel wise variations in color intensities for selecting objects in the image. This process is helpful only when background and foreground have separate color distribution in at least one channel.

Advanced Chroma

In the Histogram we can see that the blue channel is predominant in the image and it extends up to the highlights where other channels are very weak. Our subject here is the patch of vegetation in foreground.

Picking the Best Channel

A simple observation of the three channels tell us that the blue channel has the highest contrast between the Sky and Grass. We are going to exploit this property to separate the two. Duplicate (Command + J) the Layer and go to the

Blue channel of the Copied layer. Click Image > Adjustments > Curves or Press Command + M to apply curves modification on the current channel.

Applying Curves

Select the point closer to the dark grays of the channel and drag it (2) forward in the x-axis (horizontally) keeping y-axis

at 0 (shown by the small circle). This will make the darker pixels uniformly more darker. It shouldn’t affect the background, drag it a little back to left if it does.

Next, select another point closer to the White Point, drag it (3) back towards the midtones keeping the y-axis(vertical) at maximum (shown by the small circle). What we are doing is saturating the dragged range of blue up to 100%. Make sure the whole background turns white or almost so, and there is a very high contrast between the Grass and Sky.

Channel as Mask

Command-click on the

channel thumbnail to load the channel into the selection. Areas which are predominantly blue will be selected totally and the rest according to respective degrees. Areas which have no blue (the black parts) will be left from the selection. With the selection in place go to the Layers tab and click Add Layer Mask to save the selection as a Mask.

Inverting the Mask

Press Command + I to invert the Layer Mask.

Selecting by Brushing on Masks

Brush based selection is used to extract foregrounds with complex outlines with accuracy. It is also used to refine selections made with other techniques. And it also support transparency (softness).

Erasing is probably the first thing that comes to mind when we talk about brush based selection. But it is not a recommended process at all. Erasing is a destructive process and can permanently damage the original image as recovery is

limited only to a number of undo levels we have set.

Brushing with Layer Masks

Here too Layer Masks can be used, to preserve the workflow of Eraser and additional possibility of recovering removed portions if they are needed. Painting on the Layer Mask with a White or Black will reveal or hide the contents respectively. We can brush out backgrounds in the same way as in using the Eraser tool and get it back by painting with White.

No Feedback

When brushing the mask we may sometimes trim off relevant parts accidently and keep

focusing on the wrong silhouette only to be discovered later. This is highly probable when foreground background have similar hues and there is no immediate visual feedback.

Immediate Feedback

This problem can be averted by following a simple rule of keeping a multiplied duplicate of the current layer in the

background as a guide layer. Multiplied gradient maps will show-up as high contrast versions of the subject outlines if violated.

Luma Select

As already mentioned Luma is the illumination levels of an image. Luma can be used to extract components from the image which have a considerable brightness difference than others.

Simplest Luma Hack

Unlock the background and make a duplicate of it, then hide the original Layer.

Apply Threshold

Apply a Threshold Adjustment Layer on top. You will notice that some parts of the image have been turned instantly black and rest are pure white, and there are no intermediate grayscale levels.

Adjust Threshold

Adjust the Threshold Slider and try to enclose the subject or background (whichever is darker) in black. Hide the Threshold layer and look at the original image for guidance when required.

Merge Layers

Command-click to select the top two layers and Merge them into one. Select the bottom layer, make it visible and create a blank Layer Mask.

Add Layer Mask

Copy the merged image and paste to the Layer Mask, following the process discussed above. We have our Layer Mask ready, but in most cases there will be holes and parts of our background visible. Use the Mask Painting technique discussed above to make it tidy. Invert if necessary.

Luma Select with Transparency

The Threshold technique discussed above is very fast to implement, but is only useful for extracting solid objects as it lacks transparency. The following method can be useful in situations where we need Luma extraction with transparency. Here we are going to remove the ice-water from the rest of the rocks.

Using Luma to Mask with Transparency

Unlock and Create a layer from the background (1). Apply an Adjustment Layer Black and White on top and then a Brightness-Contrast Adjustment Layer above it.

Reduce Brightness

Select Use Legacy mode and slowly move the Brightness slider to left, try to get as many black areas from the rocks as possible. This process will reduce the brightness of the Water too so don’t overdo it.

Increase Contrast

Now slowly increase the Contrast slider to the right. With each increase dark-grays will turn to black and lighter grays will glow more brightly. We are going to get the whites as opaque and grays as semi-transparent. Try to get both

Whites and Grays where necessary. Over increasing the contrast will make it look like a Threshold Layer, if so there will be no translucency left.

Merge the Layers

When satisfied with the results Merge the top three Layers. Go to the background layer and Add a Layer Mask and copy the merged Layer into the Layer Mask.

Yet Another Possibility

Other than the above two procedures there is also another way of Luma based extraction using the Lab color method.

Lab Color Technique

Open an image and turn it to Lab Color mode by clicking Image> Mode> Lab Color.

Goto Channels Tab and find the lightness channel or press Ctrl+1 to directly select it. This is where the illumination levels of all pixels are indexed in the Lab Color mode. You can play with that channel and try to isolate some element from the background. Don’t forget to duplicate the Layer or the Channel before you alter any channel.

And filters that doesn’t work on the image in Lab Color mode works on the Lightness channel, and yield almost similar results.

A Comprehensive Introduction to the Type Tool

Who doesn’t know the Type Tool? This is maybe one of the most powerful and useful tools of Photoshop. We’ve all used it at least once, but do you know all its potential? That’s why I decided to write a comprehensive guide about Photoshop’s Type tool, including do’s and don’ts of the most important features of this tool.

1. The Basics

Type is the Photoshop tool to create vector outlines and mathematical shapes to define the symbols of a typeface. It’s located on the standard Tool Bar as a tiny T. The keyboard shortcut of this is the letter (T), and if you hold click over that tool (or Shift + T several times) you’ll see four options:

Horizontal Type, Vertical Type, Horizontal Type Mask and Vertical Type Mask.

Horizontal Type Tool: This enables the tool to create horizontal standard text (left to right and top to bottom).

Vertical Type Tool: Enables the tool to create vertical text (top to bottom and right to left), useful to write in oriental languages like Japanese or Chinese, or if you want to experiment with typographic design.

Horizontal Type Mask Tool, Vertical Type Mask Tool: Creates a Quick mask using the Type shape as a Selection. We’ll see more application of these modes shortly.

Once you’ve select your desired Type Tool, you’ll notice the mouse cursor changes into the standard Type cursor, something like an I, this means the document is ready to put text on it.

2. Creating a Type Layer

There’s two ways to create a text layer, which are Point and Paragraph Type:

Point Type: This option will create a Type layer into a single line, the break lines must be placed by you hitting Return or Enter in the keyboard.

To create a Point Type layer select your desired Type Tool (Horizontal or Vertical text), and click one time with the cursor anywhere you want to put the text in. Then just start writing, when you have finished to add the text you can either click the tiny Commit button on the Option bar, hit the Enter key on the numeric pad of your

keyboard or just hit Command + Enter.

Paragraph Type: This option will create a Text layer with text wrapping into a bounding box. Is pretty useful for both print and web design. To add a Paragraph layer you must create the bounding box first. You can Click and Drag

the cursor diagonally until you’ve got your desired size.

Doesn’t matter if there’s a background image, or any other object, the Type tool will create a new layer for the new text. Besides, you can easily switch between Point to Paragraph type or vice versa by going to Layer > Type > Convert to Paragraph Text / Convert to Point Text.

3. Resize and Transform

Obviously, you can resize and transform each text layer as any other, do it by using the Move Tool (V), selecting the layer and Showing Transform controls. Anyway this kind of transforming will stretch, enlarge, or badly distort the type shape.

If you really want a good result on a Paragraph Type layer, you must do the following: Select the Type tool, and click over the Paragraph text, then go to one of the transform handles and click and drag to resize the box, the text will automatically reflow inside the new box. Shift-drag to preserve the proportion or keep a constant rotation increment, Command-drag to scale the type, Command-drag on a center handle to skew the type box, and Option-drag to resize the box from its center.

4. Character Options

Basic Formatting

It’s time to move forward. After typing some text, you obviously want to change the font face, color and more, this is really simple. First show the Character window by going to Window > Character. The Character window has several Options to format characters, following there’re some examples about formatting Font Family, Style, Size and Color (you must double-click on color sample to see the color picker). After committing the type, you can either click on the text miniature in the Layers panel and change the entire text layer format or with the Type tool selected, click on the text layer you want to edit, make a selection and change the character format of the selected text.

Kerning and Tracking

You can easily customize both Kerning and Tracking in Photoshop. Select a text layer or make a text selection and look in Character window for the Kern and Track values.

You’re able to customize the kern (space between specific pairs of characters) by selecting between Metrics Kerning or Optical Kerning. Metrics will automate adjust kern using the included pairs of the font you’re using. Optical will adjust the kern based on the font shape. Besides you can customize the kern values by typing a numeric value (positive or negative) in the Kerning field or select one of the presets. Tracking is very

similar, just set a numeric value (positive or negative) to increase / reduce space between the letters. Besides you can combine both Kern and Track to obtain a nice result.

Vertical and Horizontal Scaling

Scale the text layer both horizontally and vertically by changing the Scale values in the Character window. Just as advice, I almost never use those scaling values because when you distort a typeface you’re distorting the shape itself, and sometimes creating an undesirable result, look at the image below, the nice Century Gothic’s ‘O’ character is a perfect circle without scaling it, and it turns into an oval when you change the scaling values. Besides notice the shapes aren’t regular, i.e. the line width is wider at top and bottom of the ‘O’ character when you change the vertical scaling.

Baseline Shift

This is very useful when you want to make your text layer fit somewhere, such as around an image. Change this value to move the baseline of a text selection above or below the baseline of the rest of the text layer.

Faux Bold and Faux Italic

Photoshop has the option to auto create a Faux Bold and Italic variation for any typeface, pretty useful sometimes, but you must take special care in order to distort the type shape as little as possible. Below there are examples of Faux Bold on

the Arial typeface, which isn’t distorting the type shape that much, but applying Faux Italic on Myriad Pro actually distorts

the original italic style of the typeface (look at the ‘a’ character for example).

Font Variants and Text Decoration

You can easily customize the font variant, Capitalizing all the characters, or convert it to Small Caps. To do so, just select a text layer, or make a text selection, and click on the respective button in the Character Window. Besides, you can edit the text decoration as Underline or Strikethrough.

Anti-aliasing, Where and When

Anti-aliasing produces smooth-edged text making the text borders blend into the background layer/image. There’re four anti-aliasing options: Sharp, Crisp, Strong and Smooth, and obviously the option None. Often, you must apply some anti-aliasing to every text layer in your design for easily reading in particular into Serif typefaces. There’re some exceptions when you should set None as anti-aliasing value, i.e. when you’re adding sample text for web design content, when using a pixel typeface, etc.

Leading

Either in both Point or Paragraph text layer you can adjust the leading (vertical space) between lines. Leave it as an automatic value by selecting (auto) for the Leading value, or type a custom value to adjust the space by yourself.

5. Paragraph Options

Basic Alignment

Since a Paragraph Text Layer can contain multiple lines, formatting them is very important for the quality of any design, that’s what the Paragraph window is about. Open it by going to Window > Paragraph. Create a paragraph text layer, type something, commit the text and click on the layer miniature to activate the options for the entire text. Alternatively, you can make a text selection by using the Type tool, and apply paragraph formatting only into the selected lines of your text layer.

Of course, the basic feature on Paragraph text is Align. You can easily customize the alignment (Left, Center, Right or Justify) by clicking on the icons in the Paragraph window, besides there are three more options for Justify Alignment, changing the alignment of the last line of the text layer or the selected text (Left, Center, Right).

To customize the Justify alignment, go to the Paragraph palette menu and click on Justification, there you’ll be able to configure Word and Letter Spacing, Glyph Scaling and Auto Leading percentages.

Hyphenation

The settings you choose for hyphenation affects the horizontal spacing of the paragraph, making it wider or stretching it, depending on the words of each line. To apply hyphenation into a Paragraph Text Layer, just choose the language in the Character Window, and activate Hyphenation in the Paragraph window. To disable Hyphenation, just uncheck the option box in the Paragraph window.

Most of time the automatic Hyphenation will work just fine for you, but sometimes you’ll need to customize it. To enable advanced Hyphenation options click on the Paragraph panel menu and select

Hyphenation. You’ll see the following options:

Words Longer Than # Letters: set the minimum number of characters for your hyphenated words; i.e. if you set a value of 5, the word ‘photo’ will be not hyphenate, but if you set the value ’3′ you’ll get ‘pho-to.’ The default value is ’2.’

After First # Letters and Before Last # Letters: specifies the minimum number of characters at the beginning or end of a word that can be broken by a hyphen, i.e. if you set any of those values as ’1′ you could have an undesirable hyphenation, such as "h-ello" or "actio-n." By default both values are set as ’2.’

Hyphen Limit: set the maximum number of consecutive lines on which hyphenation may occur.

Hyphenation Zone: set a distance from the right edge of a paragraph.

Hyphenate Capitalized Words: prevents hyphenation of capitalized words.

Indent and Space Between Paragraphs

Indenting is quite easy. Just select a text layer, or make a text selection, and write or slice both left or right Indent values. You can indent a text selection left or right, or indent the first line of a Paragraph as shown in the second image below.

Besides, you can easily add space between paragraphs (before or after) in the Paragraph window, just type a custom value in the Space Before or the Space After paragraph.

Warp Text

One of the most powerful features of the Type Tool is the capability to Warp any text layer according to your particular needs. To Warp a type layer double-click on the Text Layer Miniature and click over the Create Warped Text button in the Options Menu. You’ll be prompted to select a Warp Style orientation (Vertical or Horizontal), then you’ll have three sliders to increase or decrease the values of Bend, Horizontal and Vertical Distortion. Below is a single example of how to warp Point text by using Arc Warp and different values of Bend and Distortion.

Of course you can Warp a Paragraph Text Layer as well, see the

image below. It shows a simple way to get the famous “Star Wars” intro effect just by increasing the Vertical Distortion and with the help of a small Gradient Layer Mask.

Warping text is really funny, try it with different warp options. There’re a few restrictions though, you cannot Warp a Text Layer if you applied previously Faux Bold, or Faux Italic styles in the Character panel.

Type on a Path

You can create a type layer that flows along a work path created by using the Pen Tool or Vector Shape Tool. To create a Type on a path, first draw a path by using the Pen Tool, then select the Type Tool and place the cursor anywhere on the path, you’ll see the shape of the cursor changes the baseline for an S shaped line. Click on the path and write some text.

Path on a Shape

The process to add a text layer on a vector shape is the same. First, ensure the vector shapes is selected, do this by using the Path Selection Tool to select the shape. Once the path is visible, select the Type Tool and click anywhere over the path and write something. You can edit any Character option, a good example is increasing the Baseline Shift a little bit to create a space between text and shape.

Edit Type on a Path

Sometimes you’ll need to change the orientation and position of the type on a path. For this, select the Path Selection Tool, place the cursor over the text until you get a little black arrow on the type cursor, then Drag the cursor below the baseline to flip the type. Use the same method to flip the text and place it inside a shape. Obviously, you can add any layer style to the text layer and this will continue being editable.

Convert Type into Shape

Several times we’ll need to be able to change or modify the shape of a character, for several purposes, like logo design, Photoshop makes this easy. Just create a text layer or select one and go to Layer > Type > Convert to Shape. This tool will convert the type into a Vector Layer Mask, which can be edited as any other vector shape. You can also create a Work path by going to Layer > Type > Convert Work Path.

Type Mask Tool

Finally, you can do most of the described features of the type tool, but using Selections instead type shapes. For this click and hold on the Type Tool until more options appears. There select Horizontal (or Vertical) Type Mask. By selecting this tool you’ll be able to create a quick selection with the shape, which is pretty useful on either Layer Mask or Quick Mask mode. Below is a small example of a word written using the Type Mask Tool. I used that selection to create a Layer Mask over a picture.

A Basic Guide to Photoshop CS4 Adjustment Layers

Alvaro Guzman on Aug 21st 2009 with 46 comments

This entry is part 2 of 16 in the Photoshop Tutorials for Beginners Session - Show All

« PreviousNext »

Photoshop CS4 has a new Panel named Adjustments, based on the Adjustment Layers of previous versions. These adjustments can be used for non-destructive editing, can be masked to edit only a part of an image, it can be applied to several layers on a single document and even you can change the Adjustment Layer’s Blending Mode to create outstanding results. This time we’ll take a tour around this wonderful new feature.

Adjustments Panel

Photoshop CS4 introduces a new Panel to make our lives easier. Adjustments is a quick and accurate way to edit any picture or image by simply clicking on one of the Adjustment options shown on it.

You will be able to edit the colors, saturation, levels, channels, mix colors, add gradients and whatnot from a single interface. You’ll be able

to easily change the adjustment settings, hide/show a specific adjustment layer, quickly add clipping masks in order to apply an Adjustment to a single layer or several layers depending on your needs, and much more. This tutorial is a reference guide for any user level, and helps you to better understand this fantastic tool.

First of all, lets see what we are talking about. Open Photoshop and check the Workspace selector at the top-right of the window. You’ll see several options, where you can add your very own. A quick way to show the Adjustment tools is by selecting the option Essentials. Another way is just going to Window > Adjustments, either way is fine. You’ll see the Adjustment panel then, in the panels area, at the right side of the workspace.

Clipping Masks – Apply an Adjustment to Only One or to Many Layers

The Adjustment Panel shows two main areas, the first one with three rows of several filter layers, and a second one with several presets for the Adjustment Layers. At the bottom-right there’s a button that is used to enable/disable a clipping mask in order to apply the Adjustment only to one layer, or apply it to several layers below when the clipping mask is disabled.

Adjustments Panel Overview

Once you select any of the Adjustments, you’ll see the Settings options on the panel, you can enlarge the panel if that

works better for you. Besides you can easily toggle the visibility of the Adjustment, reset the default settings or even discard the Adjustment Layer.

To add another Adjustment layer click on the arrow at the bottom left of the panel, that will take you to the list, if you want to go back to the current Adjustment Click on the arrow pointing backwards. Well, that’s enough with the panel itself, let’s try the power of the

Adjustment Layers.

1. Brightness and Contrast

The first in line is the Brightness and Contrast adjustment. This is one of the simplest adjustments and yet very powerful. You can add it by clicking on the Brightness and Contrast icon on the Adjustments Panel.

You can simply edit the tonal range of an image in a very smart way. See the examples below, just move the sliders to adjust your desired settings. If you check the Use Legacy box, Photoshop will only increase/decrease each pixel’s brightness value, that’s why it isn’t recommended.

2. Levels

Who doesn’t know about Levels? One of the most used Adjustments in Photoshop. You will be able to easily adjust the color and tonal range by dragging three sliders: one for the dark tones, another for the midtones (gamma) and the last for the highlights.

To add a Levels Adjustment just click on the Levels icon in the Adjustments Panel and edit the settings as you wish. You can always go back to the Default values as shown in image 2.1 below. Or even customize your desired settings by dragging the sliders, 2.2 shows a dark enhancement dragging the dark slider to the right and 2.3 shows how to highlight the image by dragging the white slider to the left. 2.4 and 2.5 show how to increase/decrease the levels of Black and White.

At 2.6 you can see several presets of the Levels adjustment, you can choose any of them and modify it later, 2.7 shows an example of Increase Contrast. Finally you can edit the levels of each channel (Red, Blue, Green) separately, 2.8 shows a dark enhancement of the Red Channel. Besides, you can always click on the Auto button for an automatic correction.

Eyedropper on Adjustment Layers – How

to Use It

In both Levels and Curves adjustments there are three little eyedroppers. They are pretty useful to neutralize some colors in the histogram, by electing any of them and clicking anywhere on your image you’ll be setting a black, gray or white point respectively to auto adjust the colors.

In the images below you can see how the black point is set by clicking on a dark gray area of the image (a), since the clicked zone isn’t 100% black the image turns a little bit darker. Then by setting the gray point I’m clicking somewhere over a window (b) that will neutralize the window color for midtones, as the window is a little bit blue, Photoshop will neutralize the blue tone on the entire image making it more red/yellow/orange. Finally, by setting the white point somewhere over a highlighted wall (c), the image turns a little bit brighter. Is a good practice to start with the neutral gray

eyedropper.

3. Curves

Curves adjustments is a must-know filter for any Photoshop user. It basically lets you adjust points throughout the tonal range of an image (from shadows to highlights) you can adjust as many point as you want (with Levels you can only adjust three).

To add a Curves adjustment, just click on the icon on the adjustment panel. The first thing you’ll see is a line, because the tonal range is represented as a straight diagonal baseline, as shown in the image 3.1 below. The horizontal axis represents the input levels and the vertical the output levels.

Then you’ll need to add some points to the curve and play with them (3.2). As shows the image 3.3 below you can select only one of the color Channels by choosing it form the select list above the curves graphic. When you’re editing a single channel the points above the baseline increase the intensity of the color, and the points below the baseline make the color a little bit gray, or less intense.

Besides you can easily use the eyedroppers to set the black, gray and white points respectively (images 3.4 to 3.6) this process will modify the baseline for each color. Anyway you can always click the Auto button to make your job easier but less accurate.

4. Exposure

The fourth filter on the list is Exposure, add it by clicking over the icon on the Adjustments Panel. This is a pretty simple filter actually, basically it allows you to adjust the exposure levels by adjusting three sliders, Exposure, Offset and Gamma (4.1).

Exposure will adjust the highlights of the image without effecting the dark shadows. Offset will adjust the midtones and Gamma will adjust the dark tones without modify the highlights. This filter is pretty useful when you’re editing or even creating HDR pictures.

5. Vibrance

The Vibrance Adjustment is an easy way to edit the color saturation. Add it by clicking on the Vibrance icon on the Adjustment Panel. This adjustment increases the saturation of less-saturated colors more than the colors that are already saturated. This filter is really useful when you’re editing skin colors.

6. Hue / Saturation

Another must-know Adjustment, Hue/Saturation lets you adjust the hue, saturation, and lightness of a specific range of colors in an image or simultaneously adjust all the colors on it. Add it by clicking on the Hue/Saturation icon on the Adjustments Panel.

To adjust all the colors at the same time select Master on the color list and then move any of the three sliders. The Hue slider changes the color itself (6.2). The Saturation slider modifies the amount of the color, less saturated color means a more gray image (6.3, 6.4). The Lightness slider adjusts the amount of black/white of the image (6.5, 6.6).

The image 6.8 below shows the colors list, which means that you can edit only one color channel and adjust the hue/saturation/lightness values only for that channel (6.8). Finally there’s a check box named Colorize, check it if you want to colorize a grayscale image. For full

color images I recommend the Photo Filter Adjustment, that we’ll see shortly.

Hue/Saturation Eyedroppers

You’ll notice there are three eyedroppers below the sliders in the Hue/Saturation panel. To make them work you must select a color channel first, the Yellow channel in the following example. Use the first eyedropper (a) to select a base color range, e.g.

somewhere over the sand, then play with the sliders. Following select the next eyedropper to Add a color range to the editable range (b).

Finally, you’ll notice in the following example that the girl’s skin tone became almost red because of the adjustments. In order to fix it select the last eyedropper to delete or remove a color from the editable range of the face skin tone on the example. The final result is at the bottom of the image below (d). Useful isn’t it?

7. Color Balance

The seventh on the list is the Color Balance adjustment. Add this filter by clicking on its icon in the Adjustment Panel. This adjustment changes the overall mixture of colors in an image

for generalized color correction. It basically adds something like a tint over the Shadows, Midtones and Highlights of the image.

By default the filter shows the Midtone colors’ mix in 0 (See image 7.1 below) you can move the sliders to paint the midtones. I painted the midtones a little bit yellow (7.2). Do the same with the Shadows and Highlights, as shown in the images 7.3 and 7.4 of the example. I’ve painted the shadows red and the highlights a little bit blue.

8. Black & White

Maybe one of my favorites, the Black & White adjustment allows you to create quick and beautiful grayscale images. Add this filter by clicking on the B/W icon on the Adjustments Panel. This filter allows you to maintain full control over how individual colors are converted.

Select the Default mode to create an automatic black and white image, or chose one of the many presets. Click on the auto Button to automate the adjustment. Besides you can mark the Tint checkbox and colorize the grayscale image.

9. Photo Filter

This Adjustment is just like if you put a color filter in front of the camera lens. Add it by clicking on the Photo filter icon in the Adjustment Panel. The are are several presets based on standards (see 9.1 below), increase/decrease the filter’s density to adjust the color intensity. Image 9.2 shows a warming filter by using an orange tone, and 9.3 shows a cooling filter by using a blue tone. You can easily customize a color filter by selecting the color radio button and selecting a color from Photoshop’s color picker.

10. Channel Mixer

This Adjustment makes it easy to create high quality tinted or grayscale images. Add it by clicking the Channel Mixer icon in the Adjustments Panel. On the Adjustment Panel, select an Output channel as shown in the image 10.1 below. You’ll see the slider associated to the selected channel is 100%, then you can modify the color values by using the sliders (see 10.2).

You can work with other channels as well, for example on the image 10.3 the Blue channel is selected. There’s a color enhancement over the image’s blue areas (like the sky), as shows images 10.4 and 10.6 below. You can click over the Monochrome checkbox to edit the channels in grayscale mode. This is very useful to create advanced grayscale images, or apply a custom tint to an output channel or choose any of the several grayscale presets (10.5).

11. Invert

This is the simplest adjustment ever, but yet so useful. Click on the Invert icon in the Adjustments Panel and you’ll see the image’s colors inverted (like a negative).

12. Posterize

Posterize is a rapid way to adjust the number of tonal levels. Add this Adjustment by clicking on the Posterize icon in the Adjustments Panel. The Posterize works this way, you chose a Levels’ value, e.g. 5 (see the image 12.1 below) that means the image will have 15 colors, 5 for red, 5 for green and 5 for blue. The higher the levels, the better the better quality the image.

13. Threshold

This adjustment converts any picture into a two color (black and white) image. Add this adjustment by clicking on its icon in the Adjustments Panel. How it works? You specify a Threshold Level, all the pixels darker than that level will turn into black and all the pixels lighter into white.

14. Gradient Map

The Gradient Map adjustment maps the grayscale range of an image to the colors of a custom gradient fill. To add it click on the Gradient map icon in the Adjustment Panel.

The way this adjustment works is really simple, one of the sides of the gradient replaces the dark areas of the image, the other side replaces the highlights, and all the middle tones of the gradient replaces the midtones of the original image, just as examples 14.1 and 14.2 show below. Click the Dither checkbox to add random noise in order to make the gradient smooth. Click on the Reverse checkbox to invert the colors of the gradient (14.3).

15. Selective Color

With this adjustment you can modify the amount of a primary color selectively without affecting the other primary colors. This filter works extremely well on CMYK images, but it works on RGB as well. Add it by clicking on the Selective Color icon in the Adjustments Panel.

As you can see on image 15.1 below, there are fields to select the channel. Adjust the CMYK colors percentage and select Relative or Absolute adjustment, for example on image 15.3 the Cyan color is selected and I increased its amount of Black in order to make the sky darker. That looks fine because the Absolute option is selected. The Absolute value adds the exact percentage to the color channel. The Relative option, as shown in image 15.4 is less dramatic since it changes the existing amount of the CMYK colors by its percentage of the total.

Photoshop Brush Tool: A Basic Guide

Alvaro Guzman on Nov 24th 2009 with 118 comments

Download Source Files

Source files for this tutorial are available to Premium members. Get a Premium Membership

This entry is part 4 of 16 in the Photoshop Tutorials for Beginners Session - Show All

« PreviousNext »

This time I’ve got for you a really basic guide, which is useful for beginners and people interested in learning a little bit more deeply the power of Photoshop’s Brush Tool. Every single Photoshop user has dealt with the brush tool at least once, but not everyone knows how to explode its full potential.

In this guide, you’ll learn how to use the brush presets, create your own brush from scratch and modify its properties, play with blend modes and pressure controls, besides some useful tricks. How much do you know about Photoshop’s Brushes?

Psd Plus Membership

Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. Below is one of the brushes we’ll be creating in this tutorial.

What is it?

The Brush tool is a basic painting tool. It works like a traditional drawing tool by applying the color using strokes. It’s located in the standard Tool Bar and its default shortcut is the letter B.

The Brush Tool works by adding a shaped mark on a layer, and if you continue pressing the mouse button or the pen on a tablet, several marks will be added creating a stroke until you release the pressure. The essentials options for the brush tool are: Brush Tip Shape, Blending Mode, Opacity and Flow. You must understand those concepts before moving forward

with the advanced settings.

Photoshop includes several built-in presets, that are in fact pre-made brushes ready to use.

Part 1 – Basics

Brush Tip

This is the most basic option for any Photoshop User, the Brush Tip settings allow you to modify the way to add colors on a

Photoshop document using the Brush Tool. By clicking on the Brush Preset Picker in the default Options Panel you will see several built-in presets. On many of the presets you can easily adjust two very important values:

Master Diameter increases or decreases the size of the brush tip. The default shortcuts to increase or decrease are the Left Bracket key and the Right Bracket key respectively. Photoshop CS4 enables a dynamic way of doing it by Ctrl + Option (Mac) + Click or Alt + Right Click (Win) and Drag.

Hardness increases or decreases the brush tip’s border strength, 0% means a really soft border (color fades out) and 100% a precise border. The shortcuts to increase or decrease hardness percentage are the Left Bracket key and the Right Bracket key respectively. In CS4 you can dynamically modify this value by Ctrl + Option + Shift (Mac) + Click or Alt + Shift + Right Click (Win) and Drag.

You can even combine Foreground and Background colors (we will see this feature forward). Most of the time the color that is applied by using the brush tip is the Foreground Color.

Preset Picker Contextual Menu

There are many useful tools at the Brush Preset Picker menu including Create a New Preset, Edit it, and Delete. Then there are some options to display the list of brushes in the Preset Picker panel, below there are several examples of this. Besides, you can easily Manage the Brush list by loading, saving and replacing brushes in the list, or Append one of the existing Brush collections. We will see more about preset creation shortly.

Brush Blending Modes

Each time you paint something using the Brush Tool you can chose a Blending Mode for the stroke. A Blending Mode is a way to mix the colors with the object(s) behind them using several mathematical formulas working over the RGB values of each pixel. Let’s try some of them.

Modes: Normal, Dissolve, Behind and Clear

Let’s review some of the basic Blending Modes.

The first on the list is the Normal Mode, which paints the color as is without applying any transformation to the color pixels.

The Dissolve Mode adds some noise at the edge of the brush stroke.

Behind Mode paints behind an existing stroke even if they are both on the same layer. By using the Clear Mode you can delete a section of an existing stroke.

More Blending Modes

The Following Blending modes are just the same that can be applied to the Layers, below you can see some examples of

blending modes, and some applications. They are fairly useful for adding color to objects (Darken, Multiply, Overlay) or add some lights (Lighten, Color Dodge). You have a lot to experiment with here, no matter how many years you have been

using Photoshop, you never stop learning about Blending Modes.

Opacity

The Opacity Value is a percentage of transparency, 100% means a full color stroke, a small percentage means a more transparent painting.

3. Flow

The Flow value is a percentage that sets the rate of color applied. Each time you press the mouse button the amount of color applied is controlled by the Flow percentage, besides it cannot exceed the Opacity percentage unless you click again in the same place.

Brushes Panel

The Brushes Panel is the right place to create, edit, save and load a particular brush behavior or Brush Preset. You can customize several things here like the brush tip shape, scattering, opacity jitter, flow jitter, Background/Foreground jitter, configure controls for each variation and more.

To show the Brushes Panel go to Window > Brushes, or press the F5 key. You need to select the Brush Tool on the Tools Panel to enable the Brush Preset options.

As you can see, as soon as you show the Brushes Panel you can click over the Brush Presets option on the left and then in the main area a list of all the active brushes. Try them before moving forward in this guide, paint some random strokes using different presets and see what happens. Next we’ll create a Custom Brush, and apply several variations to it.

Creating a Brush Tip from an Image

One of the most powerful features of Photoshop is the ability to create custom brushes from scratch using any image as a source. This time we’ll make a brush using this image of a nice leaf.

Step 1

Open your image in Photoshop, and double-click on the "Background" Layer in the layers palette to make it editable. Then Go to the Channels panel (go to Window > Channel) and duplicate any of them (you can duplicate a channel by dragging the layer over the Create New Channel button at the bottom). I’m choosing the Green this time, then hide the other channels for awhile.

Then, With the "Green copy" channel selected hit Command + I to invert the colors, Then adjust the levels a little bit to make the leaf whiter. Finally, hit Command (Ctrl) + A to select the entire image, hit command (Ctrl) +

C to copy the "Green copy" channel to the clipboard and then delete it. Remember to turn on the visibility of the RGB channel before moving forward.

Step 2

Go back to the Layers Panel, select the only layer and go to Layer > Layer Mask > Reveal All. Switch to the Channels panel again and select the Layer Mask channel added at the bottom. There hit Command (Ctrl) + V to paste the clipboard, and that’s it. Now go back to the Layers panel to see how it looks.

Step 3

Now add some adjustments to the leaf, go to Window > Adjustments to show the Adjustments panel. First add a Black and

White > High Contrast Red Filter, and then a Levels adjustment using the values shown in the image below. Finally, select

the three layers, and merge them by pressing Command (Ctrl) + E.Then using the Transform Controls, resize and rotate the

leaf as you wish, the only restriction is that the image cannot exceed the 2500 by 2500 pixels in size. Finally, Command

(Ctrl) + Click on the merged Layer miniature to select the leaf contour, and go to Edit > Define Brush Preset, type some

name and voilá a brand new brush tip ready to customize.

Step 4

Once you’ve created the tip shape, you will see it in the Brushes Panel. You can select the brand new brush and paint some spots to see how it actually looks.

Create a Brush Preset

Now we’ll review all the possible variations of a brush preset, from the brush tip to color jitters and pressure controls. The first thing that you should do by creating a Brush preset is select a brush tip from the library or, as in this case, start working with a custom brush tip. The Lock icon next to a brush attribute retains the setting even when you change your tip or preset.

Brush Tip Shape

The first thing that you can customize is the brush tip.

1. The Diameter value is a pixel measured size of the Brush Tip, cannot be bigger than the tip image. 2. The Flip Axis checkboxes flip the tip on its respective axis, X or Y (Horizontally or Vertically) or even both. 3. The Angle value rotates the brush by the desired degrees. 4. Roundness defines the elliptical roundness of the brush tip where 100% is a perfect circle.

5. The Spacing is the percentage of space between images when you draw a stroke on the canvas, using a mouse or a pen tablet. The larger the percentage, the bigger space between color spots.

6. Finally, you can edit the Hardness value of the tip. Anyway custom Brushes created from an image cannot modify its Hardness value, but it will work with the default round tip for instance.

Shape Dynamics

Shape dynamics enables several options to handle randomness of Size, Angle, Roundness and Flip Axis values. The larger the percentage, the more random the result. Every Jitter can be controlled using a proper hardware device like a Graphic Tablet.

Control

Many brush behaviors like Jittering and Scattering can be controlled by setting one of the options of the Control drop down. There are five Control options that you can use:

1. Off means no control will be applied. 2. Fade Control fades the brush stroke

from the initial diameter to the minimum value in a custom number of Steps (i.e. 25 steps in the image below).

3. Pen Pressure Varies the brush diameter by using the pen pressure values provided by the external device (a graphic tablet). Pen Tilt and Stylus Wheel works the same way but using the hardware’s tilt and stylus wheel values.

Scattering

Scattering (1) determines the amount and placement of brush marks in a stroke. The higher the scattering percentage the more distribution of marks. The Both Axes checkbox enables the scattering in both X and Y axis, deselecting this option means the scattering will be perpendicular to the stroke direction.

The Count slider (2) specifies the number of brush marks, a large number means many marks. Count Jitter (3) adds some Randomness to the amount of marks on a stroke. Remember you can apply the Control options for Scatter and Count Jitter as well as in Shape Dynamics.

Color Dynamics

This option controls how the color of paint changes across a stroke. The way it works is pretty simple, it just adds some random color marks in a range between both Background and Foreground colors.

1. The Jitter Percentage defines the randomness between the colors. There you can define a Control for the Jitter, Pen pressure, Fade, Pen Tilt or Stylus Wheel.

2. The Hue Jitter controls the difference between the Front Color Hue and the Foreground Color Hue, the larger the percentage the bigger the difference.

3. Saturation Jitter defines a percentage by which the Saturation of a stroke varies between Foreground and Background colors, a larger percentage means a lot of variation of the Saturation.

4. Brightness Jitter is pretty much the same as the previous, but this works over the Brightness value. A higher percentage means a darker color increases the difference between front and back colors.

5. Purity increases or decreases the saturation of the color.

Dual Brush

Let’s change the brush tip for this one. In the following example I’m creating a peculiar brush (1) for an easy explanation of the Dual Brush. This one combines two tips to create a mixed mark. The second brush texture is applied within the brush stroke of the primary brush, only the areas where both strokes intersect are painted. You can choose a blending mode to combine the primary tip with the second, and all the common brush tips variation shown before.

Texture

Textured brushes use a pattern to make strokes look as if they are painted on a textured surface. To paint with a texture, grab one of the textures from the pop-up panel and set a percentage for the pattern Scale. You can Invert the pattern colors as well. Let’s review some variations of the ways to use a texture brush.

If the Texture Each Tip checkbox (1) is selected, then each time you paint a mark a new instance of the texture will be applied (consider a brush stroke as many marks). If this is unchecked the texture will remain flowing through the stroke as a whole.

The Blending Mode option (3) blends the texture with the brush tip color and Depth (4) will increase or decrease the texture’s contrast creating a depth sensation.

At last some textures enable the Depth Jitter with a variation between Depth and Minimum Depth percentages using a Control (rarely used, but you can experiment with it).

Other Dynamics

There are two options here. Opacity Jitter adds randomness to each mark’s Opacity, and Flow Jitter will vary the Flow of the stroke. You can add a Control for any of them (Pen Pressure, Fade, Pen Tilt or Stylus Wheel).

More Dynamics

There are five more dynamics on the list:

1. Noise will add some noise at the borders of the brush mark.

2. Wet Edges creates an illusion of watercolor painting, where the borders of the stroke seem darker than the center.

3. Airbrush simulates traditional airbrushing, so a long time pressing the click button means a bigger mark. The Airbrush option corresponds to the Airbrush option in the options bar.

4. Smoothing, pretty useful wen you’re painting in a rush, as it produces smoother curves in brush strokes. Great when you’re drawing with a mouse.

5. Finally, Protect Texture applies the same pattern and scale to all brush presets that have a texture no matter if they have different settings.

Create a New Preset Brush

Before or after modifying the brush options, you can easily save it by going to the Panel Menu and selecting New Brush Preset or clicking over the New Brush Button at the bottom of the Panel. Type a name for it and that’s it!

This Brand new brush will appear now in the Brushes Panel, but if you reset the brushes library (you’ll see this next) or if there’s a problem with the default Photoshop’s Preferences file, your brush will be lost.

Save and Load Brushes Libraries

1. In order to keep your very own custom brushes you can save as many brush libraries as you want. Click Save Brushes in the Brushes panel to save the actual set of brushes as an ABR file (you can delete the unnecessary brushes before saving the library by clicking on the Delete icon in the panel).

2. To Load a previously saved brush library, click on Load Brushes in the Brushes Panel menu, or double-click on the ABR file itself in your file system. Either way will append the library at the bottom of the brushes list acti

ve in Photoshop.

Besides you can click on Reset Brushes to load the default brushes list, or Replace Brushes to override the active list of brushes with a new one.

Using the Photoshop Vanishing Point Tool

In this quick tutorial I will show you some easy ways to use the Photoshop vanishing point tool to put graffiti on the side of a building.

The vanishing tool is only available in photoshop CS2 and up.

The first method I will show you with the vanishing tool is how to put text on the wall of a building at an angle. I am going to use graffit text to make it look like graffiti and I downloaded some free graffiti fonts from this website, http://www.dafont.com/theme.php?cat=606

Once you get those and install them download this image of an angled wall I am going to use.

Now open up the image in photoshop.

Lets go ahead and use the vanishing tool to get our angles.

If you go to filter on your top photoshop menu you should see the vanishing point option or you can hit Alt+Ctrl+v on your keyboard.

Now go into your vanishing point tool and you will see a different screen. You will see this menu on the side:

Once in there zoom in on the image by pressing ctrl+.

When you open up the vanishing point tool you should already be on the tool you need to use first which is the “create plane tool”

This tool will allow you to make 4 points to create a box on the section of wall you want so I will first click on the very left side

Then choose your other 4 corners. If you give photoshop a good angle it will turn blue but if and if its just a decent angle it will be yellow but a bad one will show up red.

Good angle

Bad angle

You can adjust each point to get a good angle easily. After that click OK at the top and you vanishing point settings will be saved.

With your installed font write some text on the image like I have

I used white and yellow because it blends in the best on the wall after my experimenting before this tutorial.

For the vanishing tool to work you have to copy and paste whatever text you want to use into the vainishing tool window so duplicate your text layer to have one for backup.

With your copied layer, you need to turn it into an image so it is not text which is called rasterizing the layer.

To rasterize the text go to layer>>rasterize>>layers

With the rasterized layer chosen use the keyboard shortcut ctrl+a to select all and ctrl+c to copy it into the clip board.

Next create a new layer above that and hide the previous layer.

Go back into your vanishing point tool and paste in the text with ctrl+v

When you do that it will paste the font in with a selection around it.

Then grab the text and drag it into the box you made and it will conform to the wall angle. You can hit ctrl+t to transform it to size it down and fit better Now I will set the layer to overlay

.

Then duplicate that layer one more time and set it to soft light.

Here is my result:

Thanks for checking out this quick tip!

Quick Tutorial: Create White Clouds on A Sunny Sky

16 July 2010, Eren Göksel

Hey, in this Awesome Quick Photoshop tutorial, i’m gonna show you how to create good looking clouds with a simple technique. I hope these easy and short tutorials will be useful and fun.

Here is the Final Image Before we start lets see the final image we’ll create through out this tutorial. You can download the layered PSD document

here.

Create the Sky Lets start by creating a new document which is 1024 x 768 pixels at a resolution of 300 pixels/inch, make sure Color Mode is set to RGB.

Create the Sky Set your Foreground Color to #a4cccc and Background Color to #5ebbd5. Get the Gradient Tool, pick Foreground to Background gradient and fill the Background with a Linear gradient from bottom to top.

Apply Clouds Filter Create a new layer and name it "Clouds". Hit D on the keyboard to set colors to Black and White. Go to Filter > Render > Clouds. Set Layer Blend Mode to Screen.

Add Layer Mask Click the Add Layer Mask button on the Layers Panel. Go to Filter > Render > Clouds to apply a clouds filter to the layer

mask.

Apply Curves to Layer At the moment the Layer Mask is selected in the Layers Panel. Go back to "Clouds" layer by clicking the Layer Thumbnail. Hit Command+M to bring up the Curves dialog and tweak the curve as in the below image.

Apply Levels to Mask Now select the "Clouds" Layer Mask and hit Command+L to open the Levels dialog and increase the contrast as shown in the below image.

Some Blur Go to Filter > Blur > Radial Blur while the Layer Mask is still selected. Use these settings: Amount => 50, Blur Method => Zoom, Quality => Best. You can also change the position of the Blur Center..

Let the Sun Shine Now let’s put some sunshine. Create a new layer on top and fill it with Black. Go to Filter > Render > Lens Flare, set Brightness to 175, pick 50-300mm Zoon lens, place the Flare Center at the top left of the canvas and hit OK.

Congratulations Set Layer Blend Mode to Screen. This is my final image. Because we’re using clouds filter each time you repeat this tutorial you’ll get different results, the Curves and also the Levels adjustments will also change the final image. Hope you liked this tutorial and had fun making it.

Using the

extract

tool

Posted by

polarbear

on May 25,

2010 at

1:38 PM

The extract tool is a very useful function in Photoshop as it allows you to cleanly select photo's and cut them from

backgrounds to paste your image or

drawing into another document, or just to

get rid of the background. Lets take a look.

I used this photo:

http://www.freedigitalphotos.net/images/vie

w_photog.php?photogid=256

However, try your own photo and see how

this works out for you

Now, open up your image in photoshop.

Go to Filter - Extract..

It will bring up a box like this once you have selected extract.

At the side panel

on the left hand

side there are icons

in which you need

to select in order

to use the extract

tool.

If you hover over the top one eventually it will say 'Edge highlighter'.Select this tool.

*Hover over the other icons and find out what they are. The two tools we are using to day are the:

-Edge Highlighter (B)

- Fill tool. (G)

I will also be using the Hand (H) and Zoom tool (Z)

Now, to start to extract your photo from the background I find it is easiest to Zoom in on the image this way you are able

to get the closest possible selection which makes the out come a lot nicer.

Before we go on I want to bring to your attention a handy little setting on here called the 'Smart Highlighting' tool. You can

find it on the right hand side tool pane.

This tools help you accurately select your image around the outline of what you want to select. When you have this

selected you get more accurate results so I recommend you use this, If not, then use the normal edge highlighter

Carefully start to trace around the edge of what you want to keep.

When you have gone around fully what you want to keep, select the 'Fill tool' (G) and then fill in the area you want to

keep.

*Common Problem

When this happens, it means you have not joined up your edges properly. When this happens go back and search for a gap

in your outline. When this has been fixed, try again.

Click ok, then you should have the image you want to keep on your canvas.

Thanks for taking your time to view this and I hoped it helped to understand the extract tool more as I know at first I didn't

exactly know what the exact tool was about until I actually fiddled with it a bit!

Create a Metal Style Text

Its very easy… Just follow these simple steps.

1. Create a new file (any size) and fill the background with the color #303030 2. Now type any text. In our case the text I am using is “Calgary Universal”

3. Now hold CTRL button and click on the TEXT layer, to make the selection.

4. Now go to Select > Modify > Contract > Enter the value “1″ in the dialog box. (This will reduce the selection up to 1 pixel)

5. Press M and select the option “Subtract From Selection” from the top menu. And Cut the TOP PART of the selection as shown in the image here (Click Here)

7. Select Gradient Tool and choose “#545252 To Transparent ” for it.

8. Now Fill the selection with the gradient “Drag the mouse from Top to Bottom”

That’s it. You should now have your desired result. Here is my final output.

Create Super Glossy 3D Typography in Illustrator and Photoshop

Final Product What You'll Be Creating

Step 1

Open Illustrator and create a new RGB document, 1000px by 800px, 72 DPI, and write your text in a nice big font. I’ve used Marketing Script size 234pt.

Step 2

Next, with you text selected, go to Object > Expand, and hit ok on the pop up window. Our text is no longer editable as text, instead it’s a series of paths that we can edit with the direct selection tool.

Currently, our letters are separate objects grouped together, we want

them to be one single compound path. We can do this using the Unite button on the Pathfinder Palette. If you don’t see the Pathfinder Palette, go Window > Pathfinder to show it, and with our paths selected, click Unite.

Step 3

With the Pen Tool (P) selected, draw a new path starting from the last flick of the last letter s, and swirling its way down underneath our type. I’ve also

changed the color of the text to a lighter grey just so I can see what I’m doing better.

Change the Stroke Weight of our new path to a size that matches the width of the text path that it will be joining. In my case the

Stroke Weight is 12pt.

Step 4

Duplicate this path by dragging the Group’s thumbnail (in the layers palette) to the New Layer button. Switch off this duplicate by clicking the ‘eye’ next the group thumbnail in the Layers

Palette. We’re doing this because wherever our elements overlap we need them on separate layers in Photoshop for when we add shading.

With the Direct Selection Tool (A) select the two bottom-right Anchor Points of our path, hit Delete and name this group "swirl 1".

Turn this "swirl 1" group off and turn on the duplicate that we made, name it "swirl 2" and delete the following Anchor Points. We’re doing this because when we extrude our shapes into 3D, we don’t want our paths to intersect, we want one to pass in front of the other.

Step 5

Switch all our groups back on now and you should have the complete original path, only it’s broken up onto two different groups. With both of these Groups selected go to Object > Expand, and press OK on the pop-up window. Now we want to make our swirl a bit more interesting by adjusting the width in certain places. To do this we’re going to zoom in and move some Anchor Points manually.

Now zoom in to the end of our swirl and add two Anchor Points as shown below, then move them slightly up and to the right.

Now with the Convert Anchor Point Tool (Shift + C), adjust the two new Anchors to round off the corners.

Step 6

Next we need to tidy up the area where our text will join our swirl. Zoom in to that area and adjust the swirl path so it flows out nicely from out text

Step 7

OK, before we Extrude this shape, this is your last chance to adjust your swirl so now’s the time to make any final tweaks, it’s worth spending the time here to get your line work just right. When you’re happy with your design, change your object so they’re all the same color, a medium grey, then with all of them selected go to Effect > 3D > Extrude & Bevel.

Then with all our objects selected, go to Object > Expand Appearance.

You’ll notice that in some areas our objects don’t quite line-up as they should, reposition them slightly now, but you wont be able to get them

perfect yet, that will take a bit of path editing, we’ll do that in a moment.

Step 8

Now turn off the two swirl layers, so you’re just left with the text. Select the text and Right-Click > Ungroup, then once more, Right-click > Ungroup. Now select the front surface of our text, and turn off this layer. You should now be left with the darker 3d elements.

Click and drag to select all of these remaining elements then click the Unite Button in the Pathfinder Palette and name this group "3d 1". If you don’t see the Pathfinder Palette, go to Window > Pathfinder. Uniting these objects joins them all as one Compound Path; it should also get rid of those little white lines. Repeat this process for the two

elements that make up the swirl, naming then "3d 2" and "3d 3".

Step 9

You should now have six groups –

"text", "3d 1", "swirl 1", "3d 2", "swirl 2" and "3d 3"

Before we export this file to Photoshop, we just need to clean up the line work around where our text meets "swirl 1". Zoom in on that area with the Direct Selection Tool (A), edit the Anchor Points and their Handles to make the two seamlessly join together.

Now we’re ready to export this file to Photoshop as a Layered PSD. To do this go to File > Export and make sure you select Photoshop as the Format.

Step 10

Open the exported file in Photoshop and go Image > Canvas Size and enter 3000 x 2000px and press OK. Resize our layers (Cmd/Ctrl + T) while holding Alt + Shift, make them a comfortable size within the document.

Name and arrange your layers as follows, so we have three “base” layers (these are the light grey layers that make up the front face of our object), and three “3d” layers (the darker grey 3D elements).

Now group (Cmd/Ctrl + G) our three pairs of layers into individual groups named “1″ “2″ and “3″, so “1″ contains our text layers (“base 1″ and “3d 1″), “2″ contains “base 2″ and “3d 2″ and “3″ contains “base 3″ and “3d 3″.

Step 11

Create a new layer and place it below group "3", name it "bg" (for background) and fill it with white. Then create a new layer on top of "bg" and name it "bg2". Set your foreground color to grey #767676 and select the Gradient Tool (G). Choose a foreground to transparent gradient and draw our gradient from the top of the document down to the middle and set the layer transparency down to 30%.

Create a new layer on top of "bg 2" and name it "bg 3". Select the gradient tool and press D to set our foreground and background colors to black and white.

With a foreground to background gradient selected draw a new gradient at the bottom of our document and change the layer to 10% Opacity. Group these three new layers and name the group "background".

Step 12

Now select “base 1″ layer and apply a Gradient Overlay Layer Style (Layer > Layer Style > Gradient Overlay) using colors #c81d61 and #d3347b.

Right click on "base 1" layer and select Copy Layer Style. Now select "base 2" and Cmd/Ctrl + Click on "base 3" so we have both layers selected, then right click on of the two and select Paste Layer Style. Double click on the Layer Style of "base 3" to open the Layers Palette and Reverse the gradient.

Step 13

Now we’re going to add a simple Color Overlay Layer Style to all our “3d” layers. Select “3d 1″ and apply a Color Overlay (Layer > Layer Style > Color Overlay) and use color #797979. Then copy this Layer Style (Right click > Copy Layer Style) and then paste it to “3d 2″ and “3d 3″.

Now create a new layer within group “1″ and name it “shine”. Our layers should now look like this.

Set white as your foreground color, select a foreground to transparent gradient and draw this gradient from the middle of the document up to the top of the text.

Cmd/Ctrl + Click on the “base 1″ layer thumbnail (this will load a selection based on that layer) then go to Select > Modify > Contract and use 2px as the

amount.

Set this "shine" layer to 30% Opacity, then with this selection active and with our "shine" layer selected, click on the Add Layer Mask button located at the bottom of the Layers Palette.

Step 14

Now with the Layer Mask selected and your foreground color set to black, take a medium sized, hard edged brush and mask out more of the “shine” layer.

Create a new layer called “shine” and place it in group “2″ and draw another white to transparent gradient this time in a diagonal direction.

Cmd/Ctrl + Click on the layer thumbnail of "base 2" (to load a selection based on this layer) then Cmd/Ctrl + shift-click on the layer thumbnail of "base 3" (this will add a selection of "base 3" to our current selection). Once again we need to contract this selection by 2px, we do this by going Select > Modify > Contract > 2px. With our new "shine" layer selected, click the Add Layer Mask button in the bottom of the Layers Palette again to apply our selection as a mask. You should

have something like this.

Turn this new “shine” layer down to 50% Opacity and then with a variety of hard and soft edged brushed, we’re going to mask more of this layer.

Step 15

Create a new group within group “1″, name it “3d shading” and place it above layer “3d 1″ and below “base 1″. Now Cmd/Ctrl + Click on the layer thumbnail of “3d 1″ and click the Add Layer Mask button to apply the selection to the new group as a mask.

Create a new layer inside this new group and name it “shading 1″, then with a small soft brush set to 80% black, shade in any areas that would be in shadow according to your light source.

Then set the layer’s blend mode to Overlay, 50% opacity.

Create a new layer above “shading 1″ and call it “shading 2″, then with a small soft brush set to white and 50% Opacity, paint any areas that would be lit up by our light source.

Set “shading 2″ to 50% Opacity with Blend Mode – Overlay.

Create a new layer in this group and name it "shading 3". Then with a small, soft black brush set to 100% Opacity, paint more shadow in the small areas along the bottom of the text that would be receiving no light.

Step 16

Now we’re going to repeat this process for group “2″. Within group “2″, create a new group above “3d 2″ and

below “base 2″, name it “3d shading 2″, then Cmd/Ctrl + Click on the thumbnail of “3d 2″ and apply that selection as a mask to “3d shading 2″. Then create a new layer called “shading 1″ within this group and with a medium sized, soft black brush paint in some shadow. Lastly, change the Blend Mode to Overlay.

Create a new layer in this group and call it “shading 2″. With a medium, soft, white brush, paint a highlight on the left corner and change the layer’s Blend Mode to Overlay.

Step 17

Now we’ll do the same for group “3″. Create a new group called “3d shading 3″ and place it in group “3″ between layers “base 3″ and “3d 3″. Cmd/Ctrl + Click on layer “3d 3″ and apply the selection as a mask to “3d shading 3″. Create a new layer called “shading 1″ within this new folder and set the Blend Mode to Overlay. With a large black brush paint some shadow along the bottom edge.

Create a new layer called “shading 2″ and with a large white brush paint a highlight as follows.

Switch the Blend Mode to Overlay.

OK at this stage this is how your image, and your layers should look.

Step 18

Now go back to group "1" and duplicate "base 1" by dragging it to the New Layer button at the bottom of the layers palette.

Open the Layer Styles window for this duplicate layer by double clicking on Gradient Overlay Effect. In the Layer Style window, uncheck the Gradient Overlay and add an Inner Shadow with the following settings.

Right click on the effect itself in the Layers Palette and go to Create Layer. This will separate the effect from the layer, so it will cease to be a layer style and will be a pixel image on a layer of its own. Name this layer "highlight 1."

Now you can delete the "base 1 copy" layer. Nudge "highlight 1" 1px left by pressing the left arrow key, then Cmd/Ctrl + Click on the thumbnail of "base 1" and apply that selection to "highlight 1" as a layer mask by pressing the Add Layer Mask button at the bottom of the Layers Palette.

The with the layer mask in place, nudge the layer 1px up and 2px left using your arrow keys. This is to position the highlight right over the corner of our lettering – where the light would be reflecting from. You should now have something like this.

Group the "highlight 1" layer (Cmd/Ctrl + G) and name the group "highlight". Give the group a Layer Mask by clicking on the Layer Mask button. We could work on "highlight 1"s layer mask, but this way it will be easier to correct errors and fine-tune the mask.

With the layer mask selected, using a medium soft, black brush, mask out areas of the highlight folder. Mask any areas that are not on a top-left edge. Here’s how it should look.

Step 19

Repeat this last step for groups "2" and "3" – duplicating the "base" layers, applying the Inner Shadow, then creating a layer from the style then masking it necessary.

OK, we’re getting there, now we want to add some more colors. Create a new folder at the very top of all our layers/groups, and name it "color overlay". Create a new layer within this new group and call it "overlay 1". Set your foreground color to #7c21c8 and select the Gradient Tool (G) with a foreground to transparent, circular gradient. Add a large radial gradient in the bottom right corner, and then set the

layer Blend Mode to Color.

Step 20

Now create a new layer called “overlay 2″ and draw another gradient in the top right corner with the color #fee409. Again switch the Blend Mode to Color.

Step 21

Now we want to load a selection that includes all our "base" layers. We do this by Cmd/Ctrl + clicking on "base 1", Cmd/Ctrl + Shift-clicking on "base 2" and Cmd/Ctrl + shift-clicking on "base 3".

Now apply this selection as a layer mask to the group “color overlay” by clicking on the Add Layer Mask button.

Step 22

Now we’re going to add color to the "3d" layers. Create a new layer within the group "1", name the new layer "color 1" and place it directly above the group "3d shading 1". Select the Gradient Tool and create a three-color gradient using colors #a53c3d, #c52366 and #b22d9d. On the new layer, draw a linear gradient across the length of our image and change "color 1"s Blend Mode to Color.

Step 23

Now we want to mask this new gradient layer in the shape of our "3d" layers, minus the shape of some of our "base" layers. This might seem a complex series of clicks but its necessary to get the right selection, so it’s important that you follow these clicks correctly, and remember, you need to click the layer thumbnail, not the full layer.

First, Cmd/Ctrl + click on "3d 3", then Cmd/Ctrl + alt-click on "base 2", Cmd/Ctrl + Shift-click on "3d 2", then Cmd/Ctrl + Shift-click on "3d 1", finally Cmd/Ctrl + Alt-click on "base 1". When you’ve got the selection, apply it as a layer mask to "color 1".

Step 24

Next, create a new layer inside of, and at the top of group "2" and name it "shadow". Cmd/Ctrl + click the thumbnail of "base 2" and Cmd/Ctrl + shift-click the thumbnail of "3d 2" and apply that selection as a mask to "shadow" layer. On that layer, with a medium, soft, brush set to 30% Opacity black, paint in a small shadow where the top of our swirl disappears behind the text. This will create the illusion of distance between those two elements.

Now we need to do the same thing further down the swirl where it overlaps itself. Create a new layer inside of, and on top of group "3" and name it "shadow 2". Cmd/Ctrl + click the thumbnail of "base 3" the Cmd/Ctrl + Shift-click the thumbnail of "3d 3" to load the selection and then apply it as a mask to "shadow 2". With a medium, soft brush set to 30% black, paint in a small shadow on the swirl that’s beneath.

Step 25

OK we’ve just about finished now, just a small shadow and reflection left to add. If you collapse all your folders now, you should be left with five main groups. Select all of them apart from "background" and drag them to the New Layer button to duplicate them. With all the duplicate folders selected hit Cmd/Ctrl + E to merge them into one layer, name this layer "reflection". Free Transform this layer (Cmd/Ctrl + T) then right click > Flip Vertical. Move this layer down the page and add a layer mask.

With black and white as your foreground and background colors, draw a foreground to background linear gradient on the mask, from the bottom of your reflection to the top, then switch the layer Opacity down to 10%.

Step 26

Finally, create a new layer, just above our “background” group and name it “shadow”. With black as your foreground color, select the Gradient Tool (G) choose a radial gradient and draw a large foreground to transparent gradient in the middle of our image.

Free Transform this layer (Cmd/Ctrl + T) and drag it with the top and bottom anchors to reduce its height as shown

Before you release the Free Transform, right click and select Perspective. Drag the top right anchor in towards the left (the left will mirror this) and press return.

Conclusion

Turn the layer Opacity down to 30% and thats it!

Create Elegant, Glassy, 3D Typography in Photoshop and Illustrator

Tutorial Details

Program: Illustrator and Photoshop Difficulty: Intermediate Estimated Completion Time: 2 Hours

Download Source Files

Source files for this tutorial are available to Premium members. Get a Premium Membership

Final Product What You'll Be Creating

In today’s tutorial, we will demonstrate how to create elegant, glassy, 3D typography using Photoshop and Illustrator. For this project, I used my company logo. Feel free to apply this effect to any logo, text, or shape. Let’s get started!

Step 1

Open the file "LOGO.fh11" from the download file with Illustrator or open your own. Import page: 1 of 1, color mode: RGB.

Step 2

As you can see I have imported my logo, with a previous gradient grayscale already applied. You can set up a similar gradient using the settings below.

Step 3

It is very important not to forget to use the Layer panel. We have included the logo on the "LOGO FRONT A" and the slogan to "SLOGAN FRONT A".

Step 4

Insert 2 new layers, through the layer panel > duplicate, and rename them to "LOGO FRONT B" and "SLOGAN FRONT B".

Step 5

Duplicate the logo and slogan. To insert the two duplicate items in the new layer, just select the duplicated item and click the new layer created. We place the two new layers in the layer panel and drag them below the layer "FRONT A".

Step

6

Open the Transform panel. Select all the 4 elements and apply a distortion of 17 degrees.

Step 7

Next, apply a rotation of 17 degrees.

Step 8

Hide the layers "FRONT A", from the layer panel.

Step 9

Select LOGO FRONT B and change the fill from gradient to solid color.

Step 10

Delete the stroke by clicking the stroke icon.

Step 11

Apply a solid color, for the layer SLOGAN FRONT B.

Step 12

Select LOGO FRONT B and SLOGAN FRONT B, assign the two elements, the RGB color: 77-77-77 Duplicate items and move them using the Transform panel with following settings: X: 50, Y: +29 after that, apply the RGB color: 139-142-141.

Step 13

In this step, apply a blend as shown. To do this, set the blend options: Object > Blend > Blend Options, specified step value: 50. And after, we select the two logos and apply a blend effect by clicking on the Object > Blend > Make. Next, we must also apply the blend effect on the slogan.

Step 14

After creating the blend, delete the duplicated layers.

Step 15

Reactivate the two layers "LOGO FRONT A and SLOGAN FRONT A, and prepare everything, to create the file for Photoshop.

Step 16

Select one by one all the elements of the scene in the order of the layers, cut them and paste them into a new Photoshop document of 1200x1200px, remember to rename the layer pasted to Photoshop, with the same name given to Illustrator. The procedure is very simple, requires very few minutes, all the individual levels can be pasted or as Smart Objects or raster image.

Step 17

Once you have pasted all the individual layers, copy and paste all the layers that make up the logo in Illustartor together, rename "RIF". Place this layer below all other levels. This special layer will serve as reference to properly align the individual components imported separately above.

Step 18

To make this task easier, activate the snap to View > Snap and position the layers one by one.

Step 19

Once this has been completed, clear the layer RIF, and proceed with the reflected part of the logo.

Step 20

To create the reflected part of the logo, we open, in Illustrator, the file "LOGO REFLECTED.fh11" Reflecting the logo using the Object > Transform > Reflect by inserting vertical value 180 °. Rename layers (LOGO FRONT A_R – SLOGAN FRONT A_R) and (LOGO FRONT B_R – SLOGAN FRONT B_R) We repeat all the steps made from 1 to 19, to obtain the reflected part of the logo in Photoshop.

Step 21

Once you have completed all the steps above, your image should look similar to the image below. Make sure your layers look similar to below.

Step 22

Drag the layers of the reflected part of the logo and place them below the logo. Place the mirror part in the scene correctly with the move tool.

Step 23

Center all the elements in your scene.

Step 24

Create a new layer by going to Layer > New Layer, rename it "GRADIENT BASE" apply a fill white color and apply a radial gradient using a layer style, the parameters are below.

Step 25

Give LOGO FRONT A a layer style with Inner Glow + Bevel and Emboss.

Step 26

Copy the layer style you just created and paste it to: SLOGAN FRONT A LOGO FRONT A_R SLOGAN FRONT A_R

Step 27

Give LOGO FRONT B, a layer style with these parameters.

Step 28

Copy and paste the layer style you just created, on the layer LOGO FRONT B_R.

Step 29

Copy and paste the layer style you just created also on the layer LOGO FRONT B_R and SLOGAN FRONT B_R Only on the level SLOGAN FRONT B, we have to change, in the panel Satin, Distance value from 127 to 30. And disable the Gradient overlay only on SLOGAN FRONT B_R and LOGO FRONT B_R.

Step 30

Add a layer mask to the layers LOGO FRONT A_R and LOGO FRONT B_R, by clicking on the icons add vector mask.

Step 31

With the Gradient Tool (G) we have to create a gradient on the mask layer with an angle of about 15 degrees. But first, we need to edit the gradient type to use, click on the gradient bar. We will use the classic Black and White, mode Multiply.

Step 32

The effect of mask, in the layer LOGO FRONT B_R must be stronger, compared to the mask LOGO FRONT A_R. Because the first, better hides the darker parts, while the second shows a bit more reflection of the bright parts of the logo. To improve the outcome of the two layers change the opacity to 55% and 70%.

Step 33

We set the opacity in the layer SLOGAN FRONT B_R to 40%, and level SLOGAN FRONT A_R to 75%. To resolve the overlap transparency, between SLOGAN B_R FRONT and LOGO FRONT B_R, select the layer SLOGAN FRONT B_R activate the selection by Select > Load Selection, and let Ok.

Step 34

Select the layer mask of LOGO FRONT B_R and apply a color fill black.

Step 35

To create the shadow, load the selection of the layer SLOGAN FRONT B by Select > Selection, create a new layer by Layer > new layer, and rename it "SHADOWS". Color your selection black. The shadows layer created are positioned between LOGO FRONT A_R and SLOGAN FRONT A_R, with the move tool, go down a bit to make it visible.

Step 36

Create a selection using the Lasso tool, with the angle of inclination of the logo, after this step erase the shadow that is not needed.

Step 37

Apply a Gaussian Blur effect with a Radius value of 4 pixels.

Step 38

Change the opacity of this layer to 75%.

Now we just have to create a new layer, rename it the "LIGHT", Place it on all layers.

We take a brush tool with 1 pixel radius, draw with the help of the shift key, well-defined

straight lines in all parts sharp of the logo and slogan text. This step produces a realistic

glass effect to the logo.

Final Image

Creating Retro Folded Typography Using Photoshop

Tutorial Resources

Paper Texture by Zen Textures Grunge Texture by Zen Textures

Step 1: Working away from the computer

To create our folded text, we first want to see in real-life how folded strips of paper would look. This technique lets us reduce the amount of guessing we have to make and gives us a reference point.

So first, take a piece of regular 8.5” x 11” paper and cut it into strips using scissors or a box cutter.

Start folding the strips to the letters that we want. I’m folding all the letters at roughly 90o angles except for the letter "N" (which we need the angle on).

Now we can see exactly how the folds will look for the letters we’re using.

Step 2: Setting up the document

Now that we have a general idea of how the fold on our paper strips should look,

we’re going to go into Photoshop and create a new 1200 x 600px document.

Write out "DESIGN" and a smaller "INSTRUCT" below it using the Horizontal Type Tool (T), something like I have done below. I’m using Futura Bold for my font because it has a retro look to it. If you don’t have Futura, try using any wide, bold font that gives us room to work with.

We’re going to use this as our type’s base for sizing and width guides while making our folds.

Step 3: Adding color

Next, we’re going to change the color of our text. First, the "DESIGN" text is going to be a different color for each letter.

Your colors don’t have to be the exact colors that I’m suggesting below, but I’m trying to go for a wide variety of colors that I think will translate into some nice retro colors.

The letters and their corresponding hexadecimal color values are as follows:

D: #00AEB7 (blue) E: #FF9900 (orange) S: #BA0000 (red) I: #01AD4E (green) G: #FEDE58 (light yellow) N: #FF99AB (pink)

Also, we’re going to change the "INSTRUCT" text to a brown color (#3B2601).

Step 4: Guiding the "D"

Lets start off by working on the "D". Let’s make a new Photoshop group (Layer > New > Group). We’ll name this group, "D".

Next, create a new layer (Ctrl/Cmd + Shift + N) within the "D" group.

We’re going to lay out some Photoshop guides to help us with the shaping our "D" letter. We want a guide on the top, bottom, left-right and the inside-left side of the "D".

Step 5: Creating the template

Since all the strips of paper are the same width, we need to make sure the lines of the "D" (and the rest of our letters) are the same width. We’re going to do this by first clicking on the Rectangular Marquee Tool (M) in the Tools Panel to activate the tool.

While holding down Shift to make a perfect square, click and drag a square selection starting from the top left of the "D" towards the inside guide.

Create a new layer (Ctrl/Cmd + Shift + N) and fill it (Edit > Fill) with black (#000000) so that we can easily see it (the color doesn’t matter because this square is just for helping us shape our text).

This will be our template to make sure everything is the same size. We’ll be moving this square template throughout the creation process with the Move Tool (V).

Step 6: Adding more guides to the "D"

Now that we have the template, we can drag down a guide so that it’s on the bottom of the box we just made.

Click and drag the box down to the bottom guide and

place a guide on the top of the box.

Also, using the Move Tool (V), move the box to the right and put a guide on the left side of that box. What we’re making with the guides is a hole in the middle, while making sure all the lines are the same width.

Step 7: Subtracting from the "D"

Now that we have our first letter all mapped out, we can start editing it. In the Layers Panel, click on the "D" layer we made in Step 4 to make it our active layer. Using the

Rectangular Marquee Tool (M), make a box around the outer guides so it covers the letter. Afterwards, fill it with the same blue as our "D" (#00AEB7).

Before we subtract the middle part, we want to right-click on the "DESIGN" text and choose Layer > Rasterize > Type. This will make it so we can delete areas from the original text—we can’t do this if it’s still a text layer.

Create a selection using the inner guides, click on the "D" layer in the Layers Panel, and then press the Delete key to remove the area beneath the selection.

We can also completely delete the "D" from the original base text layer because we don’t need it anymore.

Now you should have a box with a white hole in the middle.

Step 8: Shaping the "D"

Now we’re going to chop off the corners on the right side to start to give us a "D" shape, similar to how our real-life reference looks.

Using the Polygonal Lasso Tool (L), click on the intersection of the top and inner right guide. Then click on the intersection of the inner top and outer right guide. Finally, close the path by the clicking around so you get that top right corner selected and then hit Delete to take away the section under our selection.

Now we’re going to do the same thing with the bottom right corner.

Step 9: Adding imperfections

Since these letters have a folded look, we’re going to give them some slight imperfections by making the ends of the folded strip of paper overlap past the letter.

Using the Rectangular Marquee Tool (M), make a square within the top two guides and out past the left side of the "D". Fill the selection (Edit > Fill) with the blue color (#00AEB7).

Move the marquee selection down to the bottom two guides and fill that area with the blue color (#00AEB7) as well.

Step 10: Adding guides to the "E"

We’re going to work on the shadows and finishing elements later on, so lets move on to the other letters next. Create a new group (Layer > New > Group), call it "E" and create a new layer (Ctrl/Cmd + Shift + N) within that group.

Now we’re going to use the square template that we created for the "D" to make sure our letter has a consistent width.

Since we created the guides for the "D", we notice already that the top and bottom arms of the "E" aren’t quite tall enough. We can also assume that the middle part of it also has the same problem. We should fix those issues.

Bring in our square template and put it in the center of the middle arm. Put a guide on the top and bottom of the template.

Also make guides on the left and right sides of the "E", as well as where the middle arm ends.

Step 11: Filling out the "E"

Click on that layer we created in the "E" group. Use the same orange color (#FF9900) as the "E" to fill in the areas so the arms are the same as the stem of the "E".

Step 12: Shaping the "E"

Bring our template to the top left of the "E" letter and make a guide on the right side of it so that it follows the inside of the stem. Just like in Step 8, we’re going to chop off the corners of the "E" from the original text layer.

We’re also going to make the middle stem extend out the same way we did in Step 9.

Step 13: Creating the "S"

Create a new layer group called "S" and a new layer inside that group.

We’re going to base off the letter "S" with our existing letter "E". First, select the area from the top guide to the edge of the left side of the "S" to the very bottom guide, at the right edge of the "S", and then fill it with the red color (#BA0000).

We want all the letters to be the same height so that’s why we’re cutting off the top and bottom edges of the "S".

Step 14: Roughing out the "S"

Using the Rectangular Marquee Tool (M), select the two areas between the guides that goes in between the arms of the "E", and then press the Delete key to remove the area beneath your selection. This should give us three horizontal bars with the same width as the "E".

Step 15: Shaping the "S"

Put the template on the top left corner of the "S" shape and then place a guide on its right side. Move the black square template to the bottom right and put a guide on its left.

Now using the Rectangular Marquee Tool (M) to select the area, fill the empty area on the top left and the bottom right with red (#BA0000).

Step 16: Rounding out the "S"

Toggle off the visibility of the original text layer from our view to make this next process easier.

We want to get rid of some of these corners, just like with our "D" and "E". The two ends don’t get their corners chopped off because they don’t fold.

The "S" looks kind of funny right now, but it’ll look fine later on once we start applying shadows on it.

Delete the "S" from the original base text layer if you want, because we no longer need it.

Step 17: No change to the "I"

The "I" will stay as-is since there aren’t any folds to it.

Step 18: Creating the basic shape of the "G"

Make a new group for "G", and—you know the drill by now—a new layer (Ctrl/Cmd + Shift + N) inside it. Just like with the "S", we’re going to select the area from the top to bottom guides and the left to right edges of the "G".

Once selected, fill it with our yellow color (#FEDE58).

Now, let’s put a guide on the left and right sides of the box.

Step 19: Shaping the "G"

This will start out similar to the "D". First, put the square template on the top left and put a guide on the right side of it.

Next, put the template on the bottom right and put a guide on its left side. Select the area that the guides make inside the box, and then delete it from the box and the original text.

Step 20: Finishing off the "G" shape

To make our letter into a "G", we’re going to move our square template so the top of it is resting on the top of the inner circle. Create a guide on the bottom of the template to help us.

Now, using the Rectangular Marquee Tool (M), select the area that starts at the top of the inner circle to the guide

we just made so we can get rid of the top right side of the box.

Step 21: Rounding off the "G"

Now we want to get rid of all the right-angle corners of our letter (as shown below). Use the Polygonal Lasso Tool (L) to make the selection, and just press the Delete key to clear the area below the selected area.

Step 22: Reduce the width of "G"

Our "G" is a little too wide for our design. To fix that, get the Rectangular Marquee Tool (M) and select the right half of our letter.

With the appropriate area selected, click on the Move Tool (V) on the Tools Panel, hold down Shift, and move the selected area to the left.

Step 23: Creating the basic shape for the "N"

For our letter "N", let’s create a new group and also a new layer inside the group. Create a box around the original "N" and fill it with our pink color (#FF99AB).

Move our square template with the Move Tool (V), placing it at the top left corner of the letter. Also place a guide on the left and right to make our selections easier and more accurate.

Move the square template to the right corner, and also place guides on the left and right sides.

Now select the middle part with the Rectangular Marquee Tool (M) and delete it.

Step 24: Adding the crossbar

Using the Rectangular Marquee Tool (M) again, we’re going to create a box around the right stem of the "N" and duplicate the selection into a new layer by pressing Ctrl/Cmd + J.

Take the stem we duplicated and then use the Free Transform command (Ctrl/Cmd + T) to angle it so that it turns into the crossbar of our "N".

With a little experimentation, the top left corner should line up with the left corner of the left stem and the bottom left corner should line up with the bottom left corner of the right stem.

Select the part of the crossbar that goes above the top guide with the Rectangular Marquee Tool (M) and delete it.

Step 25: Finishing off the "N"

If you look at the actual fold of the letter "N" in our reference photo, you’ll notice that the folds at the top and bottom aren’t completely horizontal.

We’re going to create these angles by moving the square template to the top left.

Use the Free Transform command (Ctrl/Cmd + T) and move a guide on the horizontal middle transform control. What we’re doing is making a guide at the halfway mark of the template. Do this for the bottom right corner.

With the Polygonal Lasso Tool (L), delete the corners using the guides we just made as the side points.

Step 26: Cleaning up the text

Right now, you should probably have something that looks pretty messy. Let’s clean up the type by deleting the extra elements we don’t need in the original text.

We also want to get the letter "E" on one layer. Click on the original text layer in the Layers Panel while holding down Ctrl/Cmd. Then with the Rectangular Marquee Tool (M), hold down Alt/Option to create a square selection around the "I" to subtract it from the current selection.

Now hold down Shift + Ctrl/Cmd and click on the rest of the "E" in the "E" group. Click on the "E" layer in the "E" group and fill the

selected area with our orange color (#FF9900).

Step 27: Creating the folds on the "D"

Now we can start creating the folds for the letter "D". To create the folds, we’re going to use our guides as well our real-life model for reference.

The horizontal pieces are the ones on top for the "D", so the two vertical pieces are going to have shadows on them.

To create the shadows, select the area in the middle with the Rectangular Marquee Tool (M) and make a gradient with the Black to Transparent gradient preset using the Gradient Tool (G).

Play around with this until you get something that looks good. If you don’t like the gradient you made, just press Ctrl/Cmd + Z to undo it, and then try again. Try not to start the gradient right at the edge, but try not to make it too subtle and understated either.

To get rid of the excess gradient, Ctrl/Cmd + click on the "D" layer, go to Select > Inverse (Shift + Ctrl/Cmd + I) to invert your selection, and hit the Delete key to get rid of the selected area.

Step 28: Creating the folds on the "E"

With our "E" letter, the vertical stem is going to be the top piece with the three arms getting the shadows (exactly like our real-life reference).

Step 29: Creating the folds on the "S"

For the "S", the curved parts are going to be the ones on the top, with the rest shaded.

Step 30: No folds on the "I"

Our letter "I" is pretty boring — there aren’t any shading that needs to be done for the "I".

Step 31: Creating the folds on the "G"

For the "G", the two vertical lines are going to be on top, so the horizontal ones are going to have the shadows.

Step 32: Creating the folds on the "N"

For the "N", the left stem is going to be under the crossbar and the crossbar is going to be under the right stem.

Step 33: Overlaying the shadows

Now we’re going to change the blending mode of all the shadow layers to Overlay except for the right fold

on the "N", which will be changed to Soft Light.

Step 34: Desaturating the backside of the "D"

The folds look pretty good now, but we want to define the front and back a little bit more by dulling down the color that would be the back of the paper to give the letters some depth.

Select the pieces that would have been folded under with the Rectangular Marquee Tool (M) and open up the Hue/Saturation image adjustment command (Ctrl/Cmd + U).

Note: To make multiple disjointed selections like the image below, hold down the Shift key (this should put

a small "+" on your mouse cursor, indicating that it’s the correct mode).

Change the Saturation to -40 and the Lightness to +20. We’re using the Lightness option in the Hue/Saturation because it washes out the colors, which is what we want.

Step 35: Desaturate the rest of the

letters

Apply the Hue/Saturation from Step 34 to the rest of the letters.

Step 36: Add a Satin layer style

Click on the "D" layer and go to Layer > Layer Style > Satin. This will give the text a little bit of a shine and highlight the middle areas of the text.

Apply this to the rest of the letters as well. A shortcut would be to right-click on the "D" layer, choose Copy Layer Style, select the other layers, right-click on them, and then pick Paste Layer

Style from the contextual menu that appears.

Step 37: Adding a Gradient Map

We’re going to add some effects to our text and image. First off, we’re going to go to Layer > New Adjustment Layer > Gradient Map.

Click on the yellow to red gradient preset and also

choose the Reverse option.

Drop the opacity of the Gradient Map adjustment layer down to about 15%. This should be your topmost layer. This will give our entire piece a yellowish, aged look.

Step 38: Adding a Hue/Saturation adjustment layer

We’re also going to drop the brightness of our work. Go to Layer > New Adjustment Layer > Hue/Saturation.

Step 39: Give the text an uneven look

Now we’re going to give our text a little bit of an uneven, natural look. First, make sure the

foreground and background colors are black and white (press D to reset your colors).

Create a new layer by pressing Ctrl/Cmd + Shift + N, and then go to Filter > Render > Clouds. Make sure the layer is just below the Gradient Map and the Hue Saturation layers.

Change the blend mode of this new layer to Overlay and the drop the Opacity down to 50%.

Step 40: Adding a background texture

Let’s open up the paper texture included in the Resources listing in Photoshop.

Alternatively, use a paper texture of your own, or look around the Freebies section of Design Instruct for textures that you might want to use instead.

Go to Image > Image Rotation > 90o CCW so that the binding of the texture is at the bottom of the canvas.

Go to Image > Image Size and change the width to 1200px to make the texture the same width as our main canvas.

With the texture prepped, copy and paste it into our retro folded paper Photoshop canvas.

Change the blend mode of the texture’s layer to Overlay and then open up the Levels image adjustment dialog window (Ctrl/Cmd + L). Change the option values so that they are similar to what I have below—these settings will make the texture stand out more.

Step 41: Adjusting the texture

Open up the Hue/Saturation dialog window and drop the Saturation to -40. Also, drop the opacity of this layer to about 50%. This will make the color of the texture more

subtle.

Step 42: Adding a second texture

Duplicate the paper texture with Ctrl/Cmd + J and move it down the layer stack below all the letters.

Change the blend mode to Multiply and drop the opacity to 20%.

Step 43: Adding a vignette

For artistic effect and to draw the eyes of the viewer towards the center of our piece, we’re going to darken the edges of the canvas, creating a faux vignette. Click on the Rectangular Marquee Tool (M) on the Tools Panel, and in the options bar, change the Feather to 50px. Click and drag a box around the entire canvas (or press Ctrl/Cmd + A).

Go to Select > Inverse and fill the inverted selection with black (#000000). This should fill just the edges.

Change the blending mode of the vignette layer to Overlay.

Step 44: Alternate texture

You can also play around with additional textures. I’m going to keep the background with the same paper texture. I’m going to hide the paper texture that was above the text.

Next, I’m going to bring in this other texture (also included in the Resources listing above) to give the image a dirtier, grungier look. Play around with different textures to create something that’s all your own.

Step 45: Final adjustment

I moved the letters around a little bit to get the kerning to be a little more even. You can do this more accurately with Photoshop’s Ruler Tool (I), but eyeballing it is fine—

perfect spacing isn’t important because we want the text to have an imperfect, hand-made feel to it.

Tutorial Summary

In this Photoshop tutorial, I showed you how to create an interesting folded paper typography. First, we created a real-life model of our text, which I hope shows you the value of having a reference before firing up your favorite graphics editor and creating artwork digitally.

We used simple Photoshop techniques such as selecting areas manually using the Photoshop’s Lasso and Marquee tools. To make our selections more accurate and our letters more uniform, we created a square template and used a copious amount of Photoshop guides. To finish up the piece, we applied some basic adjustment layers to give our product a retro, faded look.

I hope you enjoyed this tutorial and I look forward to seeing your own versions in the Design Instruct Flickr group pool.

How To Create a Gothic Blackletter Typographic Design

Blackletter or gothic script fonts are hugely popular in a range of modern cultures. Metal bands, tattoo artwork and extreme sports brands all make use of the awesome blackletter style. Often the sharp letter shapes are enhanced with elaborate swirls and decorations. Follow this step by step guide to customizing your own gothic typographic design, we’ll be modifying the original vector letters in Illustrator before moving over to Photoshop to add a cool distressed and metal effect finish to the artwork.

The design I’ve been working on features the word ‘Cobra’ – Simply because it sounds pretty bad-ass! The blackletter type has been customised and modified with additional swirls, curls and various pointy bits which add plenty of visual interest while disguising the original wording.

View full size artwork

The first stage of the design process will be in Illustrator, here we’ll create and tweak the gothic script lettering. The first step is to pick out a bunch of blackletter style fonts. There’s a huge range and different styles to pick from. I wanted a font that used straight edges on most of the letters, as opposed to being rounded. I eventually picked out Cloister Black as my typeface of choice.

I wasn’t too keen on the shape of the letter A, so I took a copy of the O, created outlines from the text (CMD+Shift+O) then used the Direct Selection Tool to take portions of the original letter A to build my own customised version. The original letter O, the little point at the top and the terminal at the bottom were all combined with the Merge option from the Pathfinder palette.

The new letter A was combined with the rest of the word and all the letters converted to outlines making them ready for customisation.

One of the first tweaks was to extend the letters to make the whole word taller, which was the main

reason I wanted a font with straight edges. The lower half of the text was selected with the Direct Selection Tool and moved downwards (holding Shift to constrain the axis).

Elsewhere a new brush was created. A small circle was drawn, then the left hand point dragged outwards with the Direct

Selection Tool. The bezier curves were removed from this point with the Convert Anchor Point tool to give a sharp point.

The rounded edge from the opposite end is then clipped off using a temporary square along with the Subtract option from the Pathfinder palette. This shape is then added as a New Art Brush by clicking the littler ‘new icon’ at the bottom of the Brushes palette.

This new brush is used with the Brush Tool to draw some smooth swirly lines across the text. My Pen Tablet came in handy here, but the same effect could easily be created with a mouse. Double click the Brush icon to edit the Smoothness settings in order to generate nice flowing curves.

Smaller flicks were drawn and carefully positioned over key points of the text. When the edges are lined up the shape flows seamlessly.

More flicks were drawn and duplicated across the inner sections of each letter, giving a a kind of thorny or teethed appearance.

Some of the longer lines overlap the text, which seems a popular feature in this style of gothic typography design.

Various swirls, curls and sharp pointy bits later and the vector version of the type design is complete. Any tight

angles and the position of each individual piece were adjusted to perfect the design.

In order to migrate the design to Photoshop while keeping the various objects separate, I had copy and paste each set of elements individually. To ensure they all remained aligned in Photoshop a temporary blank rectangle was also used with each selection.

As each element was pasted into Photoshop the temporary rectangle would keep everything aligned and scaled correctly, with each piece being placed on a new Photoshop layer.

A rough stone texture was added over the black background and set to soft light to generate a cool and distressed background for the type to sit against.

Each layer of typographic elements was then given a Drop Shadow. The settings were tweaked to create a subtle shadow by lowering the opacity and increasing the size.

The Drop Shadow layer style in the layers palette was then rasterized into a layer of its own by right clicking and selecting Create layer. This then allowed a Layer Mask to be used to erase out portions of the shadow with a soft brush, leaving shading in key places to give a three dimensional effect.

Drop Shadows were added to the other typographic pieces and each one adjusted with a layer mask. This shading allows the swirls to either blend into the type or flow on top of the wording.

Once all the shadows are in place the design is given an extra level of depth and dimension, as well as bringing a little legibility back to the wording.

A selection of the whole design was made by CMD-Shift-clicking the thumbnails of each layer in the Layers palette. This selection was then filled with white on a new layer.

A subtle noise texture was added using the Noise filter. A small about of 3-4% is all is needed to give a tactile feel to the otherwise unrealistic smoothness of the white fill.

A Gradient Overlay was also added as a layer style to this new layer. The gradient flows from grey to white vertically up the design.

An Inner Shadow and Stroke combination also helped add a subtle chamfered edge effect. The Inner Shadow gives a thin 2px white border while the Stroke adds a darker grey border to the outside.

The selection of the whole design is loaded once again, then filled with a black to white gradient on a new layer. Setting this layer to Hard Light allowed the black to interact with the grey from the layer below adding more shading.

Additional spots of black were dotted around the design, which were also given the Hard Light blending mode to add more levels of shading and tone.

A spray paint Photoshop brush was used to create some splattery textures across the type, adding more detail and subtle marks which all help give a more tactile feel.

All these additions of texture and tone help give a metallic feel to the design.

Two thin vertical lines were added to each letter. One filled with white, the other in grey, which gives a chiselled line effect. Layer masks were added to each line to both fade out the upper and lower edge as well as mask out where any swirls overlap the text.

These chiselled lines help add that little extra to the metal effect, while enhancing that impression of multiple dimensions where the

swirly lines clearly flow over the top of the letters.

The Pen Tool was used to draw small selections over the pointy areas of the text, then a quick dab with a soft brush helped add a bit of dimension and visual interest to these elements.

The final gothic blacketter typographic design is complete! The customisation of the letters is made easy with Illustrator’s editable paths, then Photoshop brings it all to life with realistic textures and different levels and shading and tone.

How to create a simple and elegant text effect

In this tutorial I’ll show you how to create an elegant text effect in only 13 steps. We will use Illustrator to realize the outlined text. Then we will play with blending options to create the pressed effect. This style would be perfect for a site tagline or a poster design.

Preview:

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here

to learn more.

Support Files:

Creampuff font

Step 1

If you observe the final result, you can notice that it’s composed by 2 elements: the text and the outline shape. The easiest way to create a text and its outline is with Illustrator. So create a 2000×1500 pixels document in Illustrator and write something using the Creampuff font. The font size is 280 pt.

Step 2

We have to turn the text into a path. Then go to Type>Create Outlines. With the text still selected go to Object>Path>Offset Path and enter a value of 25 px.

Step 3

Use the direct selection tool (A) to select only the outline letters. Merge them using the pathfinder (Window>Pathfinder).

Tip: if you want to select more then one element, hold down shift while clicking on each element

Step 4

Hide the offset path (uncheck its layer visibility) and select the letters with the direct selection tool (A). Group them (ctrl+G) and change their color to distinguish them from the outline path. It’s not important the color you choose. Now you can replace outline shape visibility.

Step 5

Open Photoshop and create a 2000×1500 pixels document. Fill the background with grey (#3f3f3f)

Step 6

Copy and paste the text and the outline path in 2 different layers. Make sure to paste them as smart objects. In this way they can be resized without lose image quality.

Step 7

Lets start working with the outline shape, then hide the text for the moment. Right-click on the outline layer and select Blending Options. Let’s start reducing the fill opacity to 0%.

Step 8

Add a dark grey (#242424) color overlay.

Step 9

How to create the pressed effect? Simply adding inner shadow.

Step 10

At this point you can make the text visible. We will still work with blending options. Start reducing fill opacity to 0%. Then fill the text with the same background color (#3f3f3f).

Step 11

Add a bevel and emboss effect:

Step 12

Our text is complete. The last step consists in adding a noise effect. Create a new layer and fill it with grey (#3f3f3f). Now set the same grey as foreground color and white as background color. Go to Filter>Noise>Add Noise.

Step 13

Set the layer blending mode to screen with opacity 10%. We’ve finished!

Typographic Portrait like Grammy’s Posters

On 09.01.09, In Photo Effects, Text Effects, by sergio

In this tutorial, we’re going to make a typographic poster (like Grammy’s Typographic Posters) from a simple portrait using Photoshop techniques.

Final Image Preview

The described effects look nice on portraits with good contrast and light background, but you can easy adjust the contrast and make the background lighter using possibilities of Photoshop. (to make this tutorial I have used Female Stock thanks to Katanaz-Stock).

Step 1.

In Adobe Photoshop, open our portrait

and adjust the contrast Image>Adjustments>Brightness/Contrast

Step 2.

From the Select menu, choose Color Range.

From the Select drop-down menu in the Color Range dialog, choose Shadows and click OK.

Press Ctrl+J (MAC: Command+J ) to copy the selected shadows pixels in a new layer. Back to the Background layer in the Layers palette.

Step 3.

Use Color Range again, but now choose Midtones from the Select drop-down menu and click OK.

Press Ctrl+J (MAC: Command+J ) to copy the selected midtones pixels in a new layer.

Step 4.

Click on the shadow layer and apply Edit>Fill (Shift+Backspace (Mac: Shift+Delete)). Use Black color, with Preserve Transparency selected, and click OK.

Then, activate the midtones layer and use the Fill again with 50% Gray color. You should have a portrait made from black and gray color.

Step 5.

Click on the shadow layer and press Ctrl+E (MAC: Command+E) to Merge Down it with the midtones layer.

Step 6.

Create a new document File>New (Ctrl+N (MAC: Command+N)). Set the Foreground color to black by pressing D. Use the Type tool (T) to type different words in various fonts and sizes.

Right click to select Rasterize Type for each word

and from the Edit menu, choose Define Brush Preset. Give a name for each brush in the Brush Name dialog and click OK.

Step 7.

Click the Create a New Layer at the bottom of the Layers palette. Set the Foreground color to black by pressing D.

Choose Brush Tool (B) and select one of your created brushes from the Brush Picker in the Options Bar.

In the Brushes panel(F5), click on the Brush Tip Shape. Adjust the Spacing between each word, Diameter and Angle of the brush. Paint on the new layer and feel free to experiment with the Spacing, Diameter and Angle of the brush.

Repeat with your other custom brushes.

Step 8. Create a new layer, Press Ctrl+Backspace (MAC: Command+Delete) to fill it with white color and and drag it under the layer painted with brushes

Step 9.

Hide all the layers except the black&gray portrait layer, and then click on that layer to make it active.

Press Ctrl+A (MAC: Command+A) to Select All content of the layer and then press Ctrl+C (MAC: Command+C) to Copy.

Step 10.

Activate the layer painted with brushes, click on the Add Layer Mask at the bottom of the Layers palette to add a layer mask.

Hold Alt (MAC: Option) and click on the layer mask thumbnail.

Press Ctrl+V (MAC: Command+V) to paste the content of the black&gray portrait layer in the mask.

Press Ctrl+D (MAC: Command+D) to Deselect. Press Ctrl+I (MAC: Command+I) to Invert the mask.

Step 11.

Activate the layer painted with brushes (not the mask) by clicking on the layer thumbnail. The text will appear inside the white&gray areas of the mask.

Create a new layer and add more text brushes outside the mask.

Step 12.

Add a Gradient Overlay style to the layer painted with brushes by clicking on the Add a Layer Style icon (fx) at the bottom of the Layers palette and select Gradient Overlay.

Click on the Gradient, and select the Blue, Red, Yellow gradient in the Gradient Editor dialog box and click OK.

Step 13.

Repeat the same operation for layer with text brushes outside the mask but use Violet, Orange gradient in the Gradient Editor.

That’s it! Our Typographic Portrait like Grammy’s Posters is complete.

Create A Beautiful 3D Text Composition

3D text effects are common elements in graphic design and advertising. The extra depth dimension allows images to visually pop from the page, and provide excellent building blocks for development of an image. A variety of tools can be used to create them, but creation of 3D text effects often requires significant time, patience, and knowledge.

In this tutorial, Joe Moore will teach you step by step how to render beautiful and visually sharp 3d text in 3D Studio Max, render it using Mental Ray, and then combine it with additional visual elements to create an atmospheric, nature inspired 3D text composition using Photoshop. If you don’t have 3D Studio Max, fear not, for a beautiful PNG render is included so you can still follow the Photoshop section.

This tutorial is jam-packed with techniques, tips and tricks to improve your workflow and design skills. Whether you’re a rookie designer looking to learn new techniques to use, or you’re a veteran designer just looking for tips on taking your images to the next level, you’ll find a ton of useful information here.

Software used:

3DS Max (Xara3D would also work.) Adobe Photoshop

Download the Render

Skip to the Photoshop Section

Final Image Preview:

Step 1: Creating 3D Text

Step 1-1: Setup and Materials

Start your 3D Studio Max up and press F10, this

will bring up your rendering settings. This displays all the information about our render, size, algorithms, caustics, environments and much more.

Now, you want to scroll all the way to the bottom of the render settings; click the assign render tab and then click “Production”. This will bring up a dialog menu that displays all your available rendering engines or “productions”. For this we will choose “Mental Ray”. This allows us to use mental ray materials to their true potential.

Alright, so now that we have “Mental Ray” enabled we can close out the render preferences and press “M” on the keyboard. This will bring up our “Material editor”, we will use this to make the blue stripe and the white basic color. So start off by selecting the first sphere and then click the large button under the grid that says “Standard”. This will bring up a new window which will show us all the types of materials to choose from, we will select “Raytrace” and select ‘ok’.

Now that we have that done go ahead a select “Diffuse” and choose white. Your going to want to keep the setting pretty basic, aside from the white, but you can use the screenshot to reference with mine.

Before we go any further; go ahead and click the checkerboard on the far right hand side, 3rd icon down. This will show us the reflection our material has. Now, we want to click the gray box beside “Reflect”, which is right beneath the “Diffuse” section. This will open a new window that will allow us to edit the reflections for out material. We want to choose “Falloff”. A falloff map is a basic gradient that we can edit to cast reflections, where black is flat or no reflection at all and pure white is 100% reflective.

Now we want to scroll down on the falloff parameters to where it has a “MIX CURVE”, this is how we will create our gradient. Click the icon 3rd over that looks like a line exploding, that will be the ‘add point’ icon. Click in the middle to add the point, once the point is added right click and choose “Bezier-Smooth”. Click the first icon, that looks like a move tool and grab the points of the “Bezier-Smooth” and move them around until you have a similar curve, but make sure the

points of your curve touch the top and the bottom of the mixer. Now under “Falloff Parameters” select a almost white and a almost black. With the checkboard selected we can now see the reflections of our material.

Now we want to click the button on the corner right, directly

beneath the grid that looks like a arrow. This is the “return to parent” button and it will take us back to the beginning where we selected our diffuse color. Once at this screen click and hold your white sphere in the top left and drag it over the sphere to the right. This will duplicate our material. Go down to diffuse on the duplicated material and select a pastel blue, like I did in my screenshot. Once you have done that rename the material to “Blue”. The rename dialog box will be to the left of the large button that says “Raytrace”.

Step 1-2: Creating The Text and Beveling.

Now we can close out our material editor and go way over to the right and click the icon that looks like a square, a circle and a triangle all arranged behind one another. It should be in the middle of the sphere and light icon. This is the shapes icon. Once that is selected, go ahead and click the text button.

With the text button selected, the toolbar on the right should now have new tabs on it, “Rendering”, “Interpolation” and “Parameters”. We will go to the “Parameters” tab to edit our text.

Choose to align to the left and select your font, which will be “Palatino Linotype Italic”. Set your size to 100 and put a capital “F” in the text box. Now, just click on the screen to drop your text. Since we will polymodeling, beveling and arranging our text all independently, its a good idea to do each letter by itself. This means that we will repeat this process for each letter in the word “Flow” independently.

With the “F” selected, choose the arc shaped tab on the right hand side entitled “Modify”. It should be the the right of the arrow button. This will allow us to change the settings for our text. We won’t be changing any settings, but we will add

a “Modifier”, so click the drop down menu entitled “Modifiers” and select “Bevel”.

With bevel selected, we can change the parameters of the bevel itself now. Beveling the “F” will create a 3D “F” rather than just a group of splines. So we want to go down to the “Bevel Values” tab and make our adjustments. You want to leave the start outline at 0 and only adjust the “Level 1:” sections, in this section we will increase the height by 6.5.

Your “F” should look something like mine, if it is a different color go ahead and press “M” to open our material editor again and click and drag the white sphere over the letter “F”. This will apply our custom white material.

Step 1-3: Poly Modeling

Now we can right click our “F” and go down to “Convert to > Editable Poly”.

This will break our object up into selectable and editable polygons. When we have done this go back to the “Modify” tab on the right hand side and set yours up as mine is.

Being sure to click the bright red flat square, the fourth icon over and going down to the “Edit Polygon” tab and selecting the “Bevel” button.

Now, this is where it gets tricky, with the bevel button selected, you can now click what will be the top face of the “F”. Once clicked it should highlight the polygon we clicked in red as seen here. Now, click the polygon again and drag it up, making the “F” taller. Just make it about a

inch taller like mine looks, you don’t want to wind up with a 10ft “F”. Once you release the mouse button it will allow you to “Taper” the polygon, making it bigger or smaller, try to keep it the same size it was to begin with. If you mess up, just right click to end the beveling process.

With that done and the face of the “F” still bright red press “M” to bring up the material editor and drag your

blue sphere on top of the red polygon. This will apply the blue material to just that polygon, leaving the rest of the letter white.

Now, we will bevel the “F” again. This time you will see that where it is getting taller, it is now blue. This time make it about as tall as mine looks and taper it smaller, but be careful! Tapering the “F” to small will result in some crazy shredded looking polygon, so keep at it until you get something you like.

Now that you have successfully beveled the “F” again, go ahead and apply the white material the same way we did before to the new top polygon. If you were unable to taper the top polygon as much as you wanted, don’t distress, just right click the polygon and select scale.

With scale selected go ahead and shrink it to something that looks better to you.

Step 1-4: Arrangement

Go ahead and repeat the previous steps for each letter until you have spelled the word “Flow” (or whatever word you want). Once you have done this, arrange the letters as I have.

Step 1-5: Final Modifier and Render

Now we can select all of our letters and go back to the modifier tab and select “Bend” from the drop down menu. This will simply bend our word “Flow”.

Once clicked, go ahead and set your parameters to what I have set mine to in the screenshot. If you have strayed from the tutorial at all, be sure to keep an eye on the word “Flow” to the left, it might become deformed if you bend it to much, and pinch on one side,

which we don’t want.

Now your word should look something like this:

Once you have bent and made all the text all the hard work is over. Just simply press “F10″ on your keyboard once again and change your render size. I set my render output size at 4950*4950. Once you have set yours to the same size, click render and sit back… it may take a while!

Step 1: Closing Notes

If your render looks dull or lackluster, go ahead and select the spotlight icon on the right hand side and click the omni button to drop a omni on the scene to brighten things up a bit!

Bare in mind that the beveling process can become quite the headache, keep at it and you will get it in due time.

Be sure to experiment, just because I only used the bevel tool on the front polygon doesn’t mean you have to! The possibilities are endless, you can apply a stripe all the way around you letters if you want. Play with it and have fun.

Always save your render as a PNG, this way the background will be isolated from the render, so you won’t have to fool around in Photoshop for that.

Step 2: Composition in Photoshop

Step 2-1: Document Setup, Render Arrangement and Background Creation

Start up your copy of Photoshop, if you have set up your render such as mine, then go ahead and create a new document at 3000*2000.

Now create a new layer and click and hold the paint bucket icon, this will display another icon called the gradient icon. Click the gradient icon and select your colors, go with a light blue to dark blue and fill the layer going from one corner to the other. To ensure your top left corner is the darkest go ahead and do a edit rotate 180, rotate horizontal or rotate vertical if need be.

Now create another layer a fill this layer with another gradient. Set up your gradient as a dark blue (not as dark as the first layer) to white to the same dark blue. Once you fill the layer, set it up as a “Multiply” at 19%.

Go ahead and locate your render and open it up and pull it into the new document we have created. Place it somewhere in the center as I have done. If your render is a little gray go ahead and duplicate the layer by right clicking it and then clicking duplicate layer. On the duplicated layer set it as “Screen”, with a range around 20-30% opacity depending on your render.

Double click your render layer to open the “Layer Styles” dialog window. In this dialog you can set up inner and outer shadows as well as bevel and emboss and much other

things, but for this tutorial we will create a drop shadow. So click the checkbox for “Drop Shadow”, it should be the first option on your layer style screen. Set the opacity of your drop shadow around 45-50% opacity, I prefer about 47% because we don’t want anything bulky. Set the angle at -114 with a distance of around 60-65px depending on your gradient. keep in mind you want it to look as if it were natural. Keep the spread down to a 0px and set your size to around 45-50px. I prefer to have the size at about 46 or 45 so it looks nice and fluffy but not like some strange gaussian blurred blob.

If you have looked at the screenshots and noticed this strange thing around my render, its where i have used a displacement filter atop the render and then used the edit > fade option. I won’t go into the details of how I did this yet, because looking back it wasn’t something I would suggest doing. I will however go through the displacement filter later on in depth in regards to displacing leafs as well as the geese. It’s always important to experiment with

your techniques, and investigate what looks good and what doesn’t.

To increase the light in the scene we will go atop the render layer and create a new layer. Use the paint bucket to fill this layer with a solid black color. Next go to “Filter” > “Render” > “Lens Flare”. This will open a dialog box allowing you

to customize your lens flare to your liking. We will be choosing the first option “50-300mm Zoom” with a brighness around 80-85%. I chose to use it at 85% just because I thought it looked better, but if you did create a screen layer for your render, or you used lights when rendering the render you might want to tone it down to around 70-75%. If your render

looks bright enough all ready or you don’t like the lens flare effect this step may be skipped.

Once the filter is applied, grab the soft 150px eraser from your default brush set. Set the opacity of your eraser to 60% and start erasing the extra parts of the lens flare, all we are really after is the light circles that look like light bokehs. So gently erase all the outside edges and anything that looks off as I did, you may also want to use a low % smudge tool set as the

same brush to feather the light a little more.

Now you can set your black layer to screen and place it to where it appears as if the light it hitting the corner of your render. I placed mine at the top point of the letter “W”. You should try and keep in away from the darker side of the gradient. You’re trying to give it a look as if the light is coming from one distinct side and not from every which way. If the lens flare creates a unpleasant amount of brightness when set to screen at 100% opacity go ahead and knock it back down to about 75%. You don’t want to ignore

anything in the beginning because it could be a hassle to backtrack one your done to try and figure out why it looks so bright, or any other problem for that matter.

Now we can simply duplicate the layer and drag it beneath the render layer. Set this duplicated layer to “Linear Dodge” at around 85%. Since mine didn’t looks as bright as I wanted I bumped the opacity up to a mere 87%. This layer might make the lens flare look exceptionally bright but its okay. The idea is that this lens flare will be both beneath and atop our clouds, flowers and leafs. This way everything looks as if it is in the light in some regards. So if it looks ghastly go ahead and turn the layer off but don’t delete it just yet. Keep it hidden until the end of the tutorial and then once all the layers have

been placed and its time for some merging then go ahead and turn the visibility back on to see if you like it. If you still don’t like the duplicated flare layer its no big issue, you can now delete it.

Step 2 – 2: Cloud Isolation

Proper cloud isolation is a key to keeping this looking good, and if you do it as I

describe here its a simple technique that will look like something that took hours to complete. We will start off by going to http://www.sxc.hu/photo/1193812

SXC is where I got all the stock images for this piece, I will be posting more links to clouds later on in this section as well as links to flowers and leafs in the sections to come. So its a good idea to go ahead and set up an account there if you can, its free so why not.

Once you have the cloud image go ahead and paste into your Photoshop document, I have placed another layer beneath it filled with black to ease in the isolation.

Once you have the layer in and the black layer beneath it we will go to “Select”>”Color Range”. The color range function select a range of colors and isolates what was not selected. So once its clicked go ahead and use the eye drop tool and select the blue close to the cloud, this will select all the blues in the photo. Set the fuzziness to 200%. The fuzziness is basically the same as using something like the marquee tool with a feather option, or a soft eraser/brush on a mask layer. This prevents getting hard edges in your isolation. Make sure you check the invert box as well so that we will be selecting everything that is not blue, rather than selecting everything that is blue. Once you have everything set up as I do in the

screenshot, click okay.

Now that ‘okay’ was selected, you can see that you have a nice selection around your clouds. It will look like your not getting all of the cloud selected, just the inner most cloud will look selected. But that’s ok since we have chosen to have

the fuzziness set to 200%.

Now we will copy our clouds using “CTRL C”, or “Edit”>”Copy”. I choose to copy in case I make a mistake, that way I still have the original and won’t have to go looking for it again. Once you copy it hide the original layer and paste your clouds. Press “CTRL SHIFT U” or choose “Image”>”Adjustments”>”Greyscale”. This will grey scale our clouds so we don’t get any strange saturation issues later on. Also, most clouds are strictly white with only a glimmer of

color anyway.

After this you can press “CTRL SHFT L” or go to “Image”>”Adjustments”>”Auto Levels”, this step isn’t necessary but it usually will create a better looking cloud. If your familiar with the level settings you can adjust them your self, for the sake of this tutorial will not go into depths about how it is used.

After the autolevels go ahead and set this layer to a “Screen” at 100%. You can see they look really rather grey in my screenshot as they will in yours, this is ok since they aren’t 100% opaque. They are showing some of the black from the

layer beneath it which is exactly what we want, that way later on it will be showing the blue from our sky layers.

Once you have done that your going to want to go ahead and grab the eraser tool, set it up as a soft eraser with these settings:

Size : 271px Hardness : 14% Opacity: 45%

We will use this eraser to clean up the edges of our clouds, which should be fairly easy to spot out on this black background. Usually the corners and sides of the document retain some strange edges so those are always a good place to start. But since this brush is not 100% opaque or hard, it will aid in creating “Fluffy” clouds, so any strange parts of the clouds you don’t like go ahead and erase them now as well.

If you have a Wacom or are just really good with a mouse, you can set the size of this brush to about 15% with a size jitter on set to brush pressure and zoom in to erase out circle motions and areas to create something that will look like “fluff marks”. If you don’t then don’t despair they aren’t as visible after we finish the piece and size it down as you would think, they become tiny

details that are nice for large resolutions or prints. Once you are satisfied go ahead and hide the black layer, bring the cloud layer down beneath the render layer and play around with its placement.

I chose to use a marquee tool with a feather of about 25% and free transformed a segment of the cloud so it looks like the screenshot but that’s just out of taste. You have to remember once we have all the cloud layers down things like this won’t be all that noticeable, its just something I wanted to do.

You should also think about using the brush we just created as a smudge brush to help smooth out the outside of the clouds and feather them a little more, but be wary of having your strength over 25%. Using something around 20% and smudging it properly could definitely help to create a better blend with the other clouds later on.

If you have followed the tutorial so far your cloud should look something like this now:

Some examples of using the smudge brush to fluff the edges can be seen below:

You can also see where I have used my tablet with the eraser mentioned above to create some “Fluff marks” here:

You can see i have also varied opacity of some the clouds, particularly the clouds that i have “fluffed” a great deal with my smudge tool. I have also moved a few of my newly created cloud layers beneath the second gradient we created. It was set to a multiply in step 1 remember? Since I only moved the fluffier clouds and since I adjusted the opacity on some of the clouds it creates a sort of depth of field. It’s not the best but it looks better than if we pasted all the clouds atop one another at 100%, it makes it look a little bit more realistic.

When you look up not all the clouds are big white fluff balls, some are narrow and darker.

Now you need to repeat this process, til you have a significant amount of clouds. If you created or have an existing SXC account, here are links to more clouds I used in mine, I used the same techniques described above to isolate and stylize all of the clouds in the final piece. Cloud links:

http://www.sxc.hu/photo/1254127 http://www.sxc.hu/photo/1218511 http://www.sxc.hu/photo/270213 http://www.sxc.hu/photo/784742 http://www.sxc.hu/photo/1175426 http://www.sxc.hu/photo/1032898 http://www.sxc.hu/photo/1175423 http://www.sxc.hu/photo/956433 http://www.sxc.hu/photo/1236129

After using the above techniques along with the above clouds, varying opacity and layer order I came up with an arrangement that looked like the following screenshot.

Step 2-1: Closing

Its important to realize that the isolation of clouds can become cumbersome if you choose images that appear as if they will be hard to isolate. In the beginning its best to start off with limited interference, don’t choose images that have planes, birds, trees or power lines on your first few.

Also if you choose a image and it has a landscape in it go ahead and crop that out before you continue, it can save a lot of extra time.

For some additional “fluff” use different smudge brushes, not settings but shapes that is. The standard circle brush doesn’t provide any textures or variations so its a good idea to try out some other things.

Keep in mind that you don’t need 30 different clouds, I used the same clouds a good bit. Sizing clouds down and varying different techniques such as your smudging, blurring, layer placement and changing directions of a single cloud can yield 3 or 4 different looking clouds.

Also for extremely noise looking clouds its a nice effect to use “Filter”>”Stylize”>”Diffuse” set to “Anisotropic” after it has been isolated. This is also a nice effect to use on non-noisy clouds, just be gentle with it, you don’t want to use it on every cloud or on other layers like your render for instance.

Step 2-2: Leafs

Ok, to start the next part of the tutorial we will go yet again to SXC to get a stock image of a leaf. http://www.sxc.hu/browse.phtml?f=download&id=225311

Now that you have it go ahead and drop it in your photoshop document and press “W” on your keyboard or click the “Magic wand” icon which suprisingly looks like a wand. Set your tolerance to 33% and keep the rest of the settings the same. Now just click and you should get a selection like this.

Now that we have our isolated leaf we can do two major things, one being to create a layer mask by going to “Layer”>”Add layer mask” > “Reveal selection”, or just press delete. If you’re worried about deleting out portions of your

leaf, its best to go with the mask option. But for the sake of the tutorial I won’t bother. Either way, you want to zoom in and use the same wand to grab all this ugly bits of white that are hiding in there. Despite the fact that they might not

show up due to the clouds its still best to keep all of our elements as clean as possible. A trained eye can see all your defects in Photoshop and you don’t want someone pointing out that you forgot

to clear out a tiny corner of white, do you?

Once you have deleted all those tiny portions and you have cleaned it up so its all nice a proper, your leaf should look something like mine here:

Now we can contemplate placement, and this is where it gets fun! No one wants to isolate leafs all day anyways, so create a duplicate layer of your leaf and hide it (you may want it again later), drag the unhidden layer way down beneath the render but not below any clouds and size it down some. This is what mine looked like, and so should yours after you have placed it.

And it looks nice doesn’t it, but its a little bit dull. So we will create a new layer under our and fill it with black just so its easier to see what exactly we are doing. Click and hold the marquee tool, which will look like a dashed line box until the options for it come up, when they do choose the circle shaped marquee and set your feather to 25%. Make a semi small circle

and place it just barley over your leaf.

Now, with the selection still intact, we will go to “Filter” > “Distort” > “Displace”. The displace filter is one of the strangest filters Photoshop has to offer. It can be used to add texture, wrap objects, distort them as we will here and much more. It basically moves the pixels in your PSD file based off of the black and white values of another image. So once we have opened set your values “Horizontal scale” to “-250″ and your “Vertical scale” to “150″ then press ok.

Now it will want you to choose a source file, the source file will be what Photoshop uses to reference the black and white values from. Since we are using this to create abstract effects it really doesn’t matter, just choose a random PSD file you

have lying around and press “Open”. My source file looks like this:

Because of how we are using this filter and how it works, the placement of the leaf will dramatically effect the filter. For instance if you rotate the leaf 90 counter clockwise and apply it the result will be different. As well with moving your marquee, so this is something your going to want to play with. You should be careful with this however, you want it to still like a leaf in the end after all! My result looked like this :

Its a subtle effect, but when done properly it can yield wonderful effects. You can also use a layer mask to isolate out certain parts of

the effects. And keep in mind what was said above, your displacement will most likely NEVER look exactly like mine. Just try to get something similar, a subtle effect that.

We can use the same leaf numerous ways, for instance we can displacement filter in different ways or not use it all on one of the leafs. You can also press CTRL+SHIFT+L to do a auto adjustment of the levels to create a slightly different look. Or you could play with the hue and saturation values by pressing CTRL+U, not all leafs are exactly the same tint of green anyways. Another easy and effective way to change how the same leaf looks is to create a duplicate layer and desaturate it by pressing CTRL+SHIFT+U and then setting the new leaf layer as a overlay or soft light layer with a opacity to aroud 30%.

Examples of these effects can be seen below, but also keep in mind that just changing the size and direction of your leaf along with were you place it dramatically. For instance a smaller version placed beaneth the clouds will still be seen, but it will be much harder for the viewer to recognize that the leafs are one in the same.

Its important to vary the size and saturation of your leafs to prevent it from looking to uniform, so even though we can use the same leaf and make it look like 4 different leafs I prefer to only make 2 or 3 leafs from the original. Also, keep in mind that we don’t want 10 leafs all the same size, so try creating some smaller ones and try and vary your displacements.

More leaf images that i used in the creation of this piece can be found here:

http://www.sxc.hu/photo/225375 http://www.sxc.hu/photo/927298 http://www.sxc.hu/photo/1195849 http://www.sxc.hu/photo/1118085 http://www.sxc.hu/photo/1019912 http://www.sxc.hu/photo/1127378

After I isolated more leaves, displaced them, arranged them, adjusted there levels and hue I wound up with this.

You can see I have filled it up quite a bit, but not all the way, and a lot of what is filled will soon be covered with our flowers. You can also see I have placed some leafs underneath the clouds, this helps to add a 3D look to the final outcome.

Step 2-3: Closing

You should try and experiment with the displacement filter, try to combine it with leafs to create strange textures

and odd looking leaf explosions.

Remember the Diffuse filter I explained before? Its also a neat filter to try out on your leafs, it creates a soft almost blurred looking image but used only once and it should never make the layer out of focus. So its a good idea to try it on some of the leaves that are beneath your cloud layers.

Vary your colors, don’t have 15 leafs all at super saturated forest green or the end result will look horrid, play with removing saturation, levels and slight decreases or increases to hue.

Try throwing the same layer style from the text layer to a leaf or two (the drop shadow), it can help in your creation of a 3D looking piece. A lot of mistakes people make when they create something like this is failure to add some sort of depth, it winds up looking like 3D text slapped atop flat stocks. So layer arrangement and drop shadows will aid in decreasing this, but try and keep the shadows soft, you don’t want any big clunky shadow. And if your leaf was poorly cut it you will see it 1000 times more once the drop shadow is applied so try and only use it on the smaller leafs or the leafs the look as if you cut them out properly.

Step 2-4: Flowers

So to create the flowers we will once again go back to SXC, http://www.sxc.hu/browse.phtml?f=download&id=211686 . Once you have downloaded the daisy, go ahead and grab your magic wand tool again and isolate it out the same way we have isolated out the leafs in the previous steps.

Once you have isolated it switch to your circle marque with a 25% feather and make a lasso around your daisy as I did.

Now with this selected we will press CTRL+SHIFT+I, to select the inverse of what we have selected. Now with the petals

selected and not the pretty yellow section press CTRL+SHIFT+U. This will desaturate the petals, making them a pure white rather than having the pink tips. This is important because we will use this stock over a lot with different saturation and we don’t want any odd color combos

throwing it off.

You can press CTRL+SHIFT+I once again and use the displacement filter if you like. But keep in mind everything I said above, keep it random and keep trying until you get something you like. I used the PSD for our flow piece as the source with a horizontal scale of 88 and a vertical scale of -198. Don’t distress over the numbers, I just came up with them randomly when applying the filter. My result looked like this:

However I didn’t like my result so I kept at it with different source files until I got something that i thought looked good. Once you get something you like you can press CTRL+SHIFT+D to deselect the pretty yellow section. After you have deselected the screen press CTRL+U to adjust your hues, decrease your hue value by -52% as I have done here.

After making the daisy red, its time for placement, the flowers are especially important because they are your last filler object. We want to layer them in between and atop the leafs, as well as adjusting sizes and hues. I placed my daisy around the top where I placed my first leaf, I like to start there and work my way around.

More flowers can be found here:

http://www.sxc.hu/photo/1243993 http://www.sxc.hu/photo/596752 http://www.sxc.hu/photo/632271 http://www.sxc.hu/photo/663329 http://www.sxc.hu/photo/1004297

Now repeat the steps the same way you did with your leafs until you have a bouquet of flowers all over, never put any atop the text and try and put some under the clouds. As you can see below I used the star flower along with the original daisy the most, however I kept trying different hue adjustments, size variations and placement to keep things interesting.

Step 2-4: Closing

Try and make sure to play with the flowers, displace single petals and keep some flowers in their original state. Keeping the variety up will keep the viewer interested for longer.

Try copying the layer style (drop shadow) from the leaf and text to your flower. Don’t place it on all of them but to have one or two flowers casting shadows on leafs will make a huge difference.

Be careful with your hue adjustments, try and stay within the realm of sanity when it comes to this. The fact of the matter is there just aren’t any neon green daisies, and over saturation of something as small as a daisy can ruin an other wise beautiful picture.

Step 3: Extra Additions and Closing

Step 3-1: Abstract Lines

For a nice effect you can create a new layer, grab the marquee tool and make a long thing white stick. We can use this to make the crazy abstract lines you see coming out of either side of the finished product.

Once you have a nice skinny line go ahead and go to “Filter” > “Distort” > “Shear”. The shear filter is one of the funner filters in Photoshop, its great for doing things like this. Once it opens click on the line to add points, move these points into a “S” shape and press ok. Your end result will look something like

a “S” as mine does below.

Now, we can press CTRL+A followed by CTRL+C, this will select the entire canvas and copy the line. Now press CTRL+V to paste a duplicate line onto your document, do this about 5 or 6 times. Then arrange your “S” lines into a nice shape, merge the layers and use the soft eraser from before set to 100% opacity, to clean off the edges, try and get your to look like mine does here.

As far as placement goes, size it down to about half the size and then squish it and make it thinner. At this point you could experiment by pressing CTRL+A followed by CTRL+C once more and paste the finished “S” multiple times to make a more complex looking design. Drop it beneath all your layers and position it as i have done here, be sure to put the best looking side sticking out!

Step 3-2: Everyone loves ladybugs.

We can go ahead and grab a lady bug at: http://www.sxc.hu/browse.phtml?f=download&id=513002 Once you have it crop out the out of focus lady bug and isolate it the same way we have isolated the flowers and leaves, keep in mind that you may need to adjust your

magic wand tolerance, I kept mine at 20 for this part.

Once you have it isolated go to “Filter” > “Stylize” > “Diffuse” and set it to “Anisotropic”. Due to the terrible quality of the image we will apply this filter twice and then press CTRL+SHIFT+L to auto level the lady bug. Size it down dramatically, then you want to go to “Edit” > “Transform” > “Flip Horizontal” followed by a “Edit” > “Free Transform” to make it appear as if he ladybug is going up something.

Now we can drop it on top of our text and give it a drop shadow, keep in mind you don’t want it gigantic. So if you didn’t size it down enough now is the time to do so, try and keep it in relation to how big a ladybug would look in real life compared to a leaf or daisy. Now grab your lady bug with the drop shadow and put it crawling up the backside of the

letter “F” as I have done here.

Step 3-3: Drips

If you choose to create drips as I have (which is voluntary), then go ahead and create a new brush with these settings and with your shape dynamics set to pen

pressure.

Next, just use your Wacom tablet or mouse to paint out your drips, keep in mind to have the same hue on the drip as the flower. Be sure to paint on some highlights and then apply the same layer style (drop shadow) as we have done before. Try and get yours to look as fluid as possible, my end result looked like:

Step 3-4: Geese

The geese were another stock, but not from SXC as all the others have been, I believe its a affiliate of SXC called StockXpert, for that reason I don’t have direct link to it. However, any bird will do in this situation because the steps are identical to the steps we took when isolating the leaves. You want to isolate the bird or birds and then use a circle marquee with a 25% feather. Once you have a grabbed a piece of the bird just displace as before!

Step 3-5: Closing

Now we are done! All your hard work has finally paid off with a wonderful typography experiment. Once you have finished be sure to save (CTRL+S) and then merge the layers down (CTRL+SHIFT+E). After you have merged it you can add some sharpness, for this go to “Filter” > “Sharpen” > “Sharpen”.

Sharpen your final out come and size it down to 1200*800, you can size yours down by going to “Image” > “Image size”. Once it is sized down you can press CTRL+F to re-apply the sharpen filter. Your final outcome should look similar to mine here:

How To Create A Grungy iPhone Application Advertisement in Photoshop By Ofek Deitch Oct 03, 2011 Photoshop Tutorials - Layouts

Page 1 of 3

In this tutorial I will explain how to create a grungy iPhone Application advertisement using Photoshop CS5. The tutorial will be explained step by step, and will include all of the details and tips you will have to know in order to finish it correctly.

Preview of Final Results

Download the PSD

Resources

Vintage paper TEXTURE PACK - Knald

Cloud Photoshop Brushes - Milanda

iPhone 4 - reddevilsX

Futura Font - Font Yukle

Cheyenne Hand Font - 1001 Free Fonts

A profile photo (I recommend your own)

Step 1: Setting up the Document

Open Photoshop and create a new document with the below settings - Width: 1200px, Height: 760px. Click OK to get started.

Now we will create guides in our document. Make sure the rulers are on, View > Rulers (Cmd/Ctrl + R), and set the measurement units to Pixels by right clicking on them. Create a new guide, by clicking on the ruler and dragging the mouse. Drag the new

guide to 40px. Do the same thing on each of the four borders.

Step 2: Creating the Background

Download the Vintage paper TEXTURE PACK and open Texture C. Place Texture C in your document. Stretch the texture to the borders of the document until it fits perfectly. Change its Blending Mode to Multiply. Open Texture A and do the same thing. Change Texture A's Blending Mode to Darken and set its Opacity to 60%.

Now we will create a Stripes Pattern. Create a new document (4px on 4px). Use the Pencil Tool (P) to create the following image:

After you've created the pattern press Edit > Define Pattern. Name your pattern however you like (I named mine "Stripes"). Now go back to the original document. Create a new layer above Texture A and name it Stripes. Choose Edit > Fill to fill the layer. Hitting Cmd/Ctrl + Delete (Backspace) also enables you to do this. By clicking the Cmd/Ctrl button you fill your layer with the Background Color. But, if you click the Opt/Alt key instead, you can fill your layer with the Foreground Color.

Back to creating the background. Double click Stripes (Or click Layer > Layer Style > Blending Options) and set its Fill Opacity to 0%. Then, go to Pattern Overlay and scroll to the bottom of your pattern list. Choose the stripes pattern. After you picked the stripes pattern change the pattern's Blending Mode to Multiply and set its Opacity to 10%.

The background is done! Just group the background's layers in order to make your layer section more organized. Name the background group "Textures".

Step 3: Creating the Background of the Application's Icon

Create a new layer above the group Textures. Group the new layer and name the group "App". Use the Rounded Rectangle Tool (U) and create a rounded rectangle with the following settings:

After creating the rounded rectangle click Layer > Layer Style > Gradient Overlay. Change the gradient's colors to #277282a and #5092a5. Now duplicate the rounded rectangle and decrease its width and height by 2px (90px on 90px). Double click on the decreased rectangle. Go to the Gradient Overlay section again and change the colors

of it to #8dc2c4 and #c8f5ff. Now, After you have a pair of rounded rectangles, duplicate again the top one, or the brighter one, and decrease its width and height by 2px (88px on 88px). After you have decreased the rounded rectangle, change its Gradient Overlay colors to #49849d and #91ced9. Duplicate the top rounded rectangle and double click it. set its Fill Opacity to 0% and apply a Pattern Overlay with the stripes pattern from before. Now, select all of the rounded rectangles and align them horizontally and vertically.

If you have followed the steps correctly you are supposed to get this result:

Step 4: Creating the Person on the Application's Icon

Open your profile photo and select the area in which the head and shoulders appear. Apply a layer mask on the layer to hide everything except yourself. Notice! The selection you select does not have to be very accurate. Later on we will decrease the size of your image to a small size (about 90px on 90px), and we will apply a Color Overlay on it, so you won't be able to see the small details.

Drag your edited profile photo to the original document. Decrease the photo's size to about the size I did (See Below).

Then load the Stripes layer's selection, and apply a layer mask on you photo's layer. Then, double click the Profile Photo's layer and apply the following styles:

We're almost done with the icon! The only thing left is to create a highlight layer. Create a new layer above the Profile Photo and name it Highlight. Select the Ellipse Tool (U) and create a white ellipse above the rectangles and the photo. It should look like this:

After creating the ellipse apply the following Layer Styles on it:

If you finished applying the Layer Styles on the Highlight layer you're almost done! The only thing you have left to do is to apply a Layer Mask on the layer and to apply a Drop Shadow effect on the bottom layer.

Click and drag, while holding Opt/Alt, the Layer Mask's thumbnail of the Stripes layer on to the Highlight Layer. After applying the Layer Mask double click the bottom layer and go to the Drop Shadow section. Apply the next settings:

Step 5: Creating the Download Button

Before we start creating the Download Button, go to the Futura Font link in the resources and download the following weight of the font: Light, Medium, Bold, and Extra Bold.

Let's get started! Now, we will create the button with the same technique I showed you in Step 3. Create three new rounded rectangles with these sizes: A. 302px on 76px, B. 300px on 74px, and C. 298px on 72px. Apply on the three rectangles the Layer Styles we used in Step 3. Then, duplicate the top rectangle and apply the Settings and Layer Styles we have applied on the Stripes layer earlier.

Select the type tool. Use the Futura Font and select the Extra bold weight. Type "Free Download!". Use font size 22pt. Then, apply the style which we used on the Profile Photo. And after applying the

styling options align all the layer horizontally and vertically. Just apply the Drop Shadow effect, that we applied on

the bottom layer of the app, on the bottom layer, and you should get this:

If you got the result I did, group the button layers and name the group "Button".

Step 6: Type the Download Description Text

Select the type tool again. Use the Futura font with Black color, Light weight, and 30pt size. now write: "Download the new iDeitch App for FREE.". Change word "iDeitch"'s weight to Medium.

Step 7: Create the iTunes Store Icon

First create a rounded rectangle. width 147px, height 48px, and background color #6d6d6d. Then type "Available on the iPhone"' using Myriad Pro, in size 7.5pt and "iTunes Store" in size 18pt. Then create another, smaller, rounded rectangle

which will be the iPhone later. Set its width to 18px and height to 32px. Then, Create a rectangle above the rounded rectangle which represents the screen of the iPhone (13px on 19px). After that create a circle which stands for the menu\back button (3px on 3px). Afterwards, load the selection of all the layers (except the background) and apply an Invert Layer Mask by Opt/Alt clicking the Layer Mask button. Then load again the selection of the screen and the menu button and fill the selection with White in the Layer Mask of the Background. And finally, group all the layer and name the group "iTunes Store"

Now just group the layers and groups: "iTunes Store", "Download the new iDeitch App for FREE.", "Button", and "App". Name the group "Download".

Step 8: Place our Icon in the

iPhone

Open the iPhone file. Before dragging the whole iPhone document to our project I want you to hide the following layers:

After deleting the layers I showed you, group the layers left (without the background) and name the group "iPhone". Then, drag the iPhone group to our document and decrease its size to 348px on 680px and drag it until it lays besides the guides on the left.

Duplicate the group App and drag it into the iPhone Group, then into "Springboard Components" and then into "Springboard Icons". Then, decrease the group "App copy" by 45% (till 55%), hide the Drop Shadow effect from the bottom layer, merge all of the App copy group, and apply the Drop Shadow effect again. After that, write "iDeitch" with the following settings,

and then apply the same Drop Shadow effect to the text:

Rename the app icon to iDeitch and group the app icon and the text which says "iDeitch". Name the group iDeitch.

Step 9: Add the comment on the iPhone

Select the type tool. type "Download Now!" with Cheyenne Hand Font, font size 16pt. Then rotate the text layer 25 degrees clockwise.

Now we're going to create the arrow. Create a new layer. name it "Arrow". Select the Pen Tool (P) and create the following path:

Now select the Brush Tool (B) and select the default round hard brush. Change its size to 2px. Make sure the Hardness is 100% and that your Foreground Color is black. Switch back to the Pen Tool and right click the path we have created a second ago. A new menu is supposed to open up where you have right clicked. Pick "Stroke Path". Now we have finished the arrow itself. Let's create the head of the arrow: Create the following path and repeat the steps we did to create the body of the arrow:

Group the "Download Now! comment and the Arrow. Name the group "Comment" and drag it into the top of the group iPhone.

Step 10: Create the Colorful Title and Background

Open the Cloud Brushes brush set. Create a new layer under the group Textures. Name it "Clouds". Select the first brush in the brush pack and paint the layer as shown below, with the colors #ffed21, #fd43f2, #3fcbee:

After finishing the background create a new layer. Select the Type Tool (T) and write "iDeitch" with the settings below. Then, type "NEW APP" with the other settings below, on a different layer. Use the color #ffed21. Then group the two text layer and name them "Yellow". Duplicate "Yellow" and rename it to "Blue". Move the Blue group a little to the right and up and apply on the layers the following Layer Styles:

After applying the Layer Styles group the groups Yellow and Blue and name their group "Title".

Step 11: Create the "Made By Ofek Deitch" Sign

Create a new layer and group it. Name the group "Made By". select the layer we have just created, and using the Type Tool (T), write "Made By" with the settings below. Then, Create another layer and type "OFEK" (The settings are found below). Create another last layer and type "DEITCH" with the setting below.

Rotate the layer that says "OFEK" 90 degrees CCW (Counter-Clockwise). Arrange the layers like this:

Step 12: Putting the Copyright at the Bottom

Create a new layer. Select the Type Tool (T) and type: "Copyright © 2011 by Ofek Deitch. All rights reserved.". Before typing, change the Type Tool's settings to the following ones:

Step 13: Arranging the Layers

Before we even start organizing our layers, have a look on how our layers are supposed to be ordered:

Let's start! First things first, hide all the layers except Background and Textures. Then, show the layer Clouds. After that, show the iPhone group. Make sure the iPhone is aligned to the left guide and is vertically aligned to the center of the document. Afterwards, show the Download group but hide all the layers and groups inside it. Show the group Button.

Align it to the bottom guide and near the right guide. Then, show the iTunes Store group and align it to the the right guide and align it, vertically, to the center of the group Button. After that, show the text layer inside the Download group. align it to 50px above the Button group and align it, also, to the same X value (so they start together). Then, show the App group.

Align it, horizontally, to the center of the text layer, and vertically to the center of the iTunes store group.

Before you continue, check according to the image above if you have done the previous step correctly until now. If so, then great! You can continue! But if not, then find what you have done wrong and fix it.

Let's continue! Show the group Title. Click Cmd/Ctrl + T to Free Transform the group. On the top left you will see this bar:

Change the X and Y values to the same as shown on the image above. Now show the "Made By" group.

Change the X and Y values to the same as shown on the image above. And finally! Show the copyright layer and horizontally align it to the left guide. Then, vertically align it to the center of the area between the bottom border of the document and the bottom guide.

Final Results

How to Create an Environmental Painting in Photoshop

By Hatice Bayramoglu Oct 11, 2011

Photoshop Tutorials - Drawing

Learn how to create this fantasy environment painting in Photoshop. This picture represent a fantasy environment painting. I painted it as a personal work and used Photoshop with a Wacom Tablet. You will learn techniques and methods that I personally use for coloring.

How to Create an Environmental Painting Photoshop Tutorial

Part 1 - Drawing

Step 1: Sketching

I often draw a lot of sketch, on computer or maybe sometimes on paper. I decide to paint kind of a fancy environment . First of all I began to see my image in my head but not very colorful. in my imagine I can see this is a vey different planet and in the evening sun is losing in a very different way. And the sky is a different color and the trees in a very different shape too. And I do imagine I'll paint some very alien flowers. Maybe you can say those flowers are alive maybe they can walk or move. Also I would like to draw an alien animal in my sketch

And here are two sketches about my fancy environment. I started with some quick sketches to get a feeling for my environment. I don't go too much into details. I'm just trying to find out how I want environment look like. I n this step I have to make a decision for to continue on painting. I do think I'll use the second sketch. It is looking more dynamic and it has a creature like I want.

For the initial sketch work, Photoshop File size is 668x969. Resolution can be 72 for now. Of course later I need to make it bigger to add painting details. But not now.

Here is a closer screenshot for the simple sketch work I did with Photoshop. And of course any part of this sketch will be in the final image. You need this sketch entirely for reference purposes.

When I felt my sketch is quite nice I named my new layer name as "sketch" And now here as you see I have 3 layers. You do the same on your project. And now the first layer group is for my signature. You can add a sign your image You have a question in mind - Why so much layer for such simple artwork ? Because if I am not satisfied with the color and want to change I can make some changes via help of those layers. This step is very important.

Step 2: Color Palette

The second thing here you to choose color scheme. I want to do something really colorful colors for the environment . I do think my final colors will be warm colors of autumn. Some orange, green , yellow, red, brown...and so on. I decided for background a dark blue color . Other colors are for the character face and his clothing. Open an another file and save your colors. And always keep open that new file when you are painting.

Step 3: Choosing a Brush

For my environment I am going to use only s standard brushes with some different pen pressure settings. Let me show how I arrange my brush. Chose a simple standard brush

After that from brush panel choose "Other Dynamics" and make the setting as seen on the below picture. And After you click on "Other Dynamics" panel you will see the options. "Control" option is Off.You must change it. Click on the little panel.

And choose "Pen Pressure" And also you can see the brush at the bottom of the panel.

Make the numbers as seen. From the bottom of the panel you must have noticed how different strokes it has now.

Now try your brush. See how soft it is and make some strokes with your new brush settings and try too see how it is painting. You see the soft strokes of the brush and

nothing too fancy about brushes since some of you wondered.

How to Create an Environmental Painting Photoshop Tutorial

Part 2 - Coloring the Sketch

Step 1: Working On The Background

At this point, we can start coloring the sketch work. Don't focus in on any one area, just start throwing down some shading to bring the volumes out. At this stage I just start coloring and give the basic background colors to the sketch. Select the Gradient Tool and do as you see on the picture.

After you filled the background, it must be like this. Red area is for the sun and upper image is going to be more darky and more reddish colors. Also there will be some green colors on the background. But we are going to add those colors later.

Step 2: Coloring

Before continue the painting process let me sow you my layer order. Here are my layers for the image. "tree" layer is for the tree color. And the "back" layer is for the background layer. Others is for the main sketch and the signature. So as you see I have opened a new layer for tree and the background. You can change the name of the layers if you want. For to change please click twice on the layer and write here name of the layer .

Now here as you see I am coloring the tree and the sun and painting at the top of the image with a dark brown and some dark red colors. I'm sure you have noticed I haven't painted the alien character. I'm not painting this character at this step. I'm going to began coloring this character at the next part.

At this step I have opened a new layer with the name of "grassy" it is for the background of the greenish area. I paint dark colors at the bottom of the trees and with yellow color I paint area of the sun. At the next step I'm going to paint some nice green flowers and some tiny dots for to represent imaginary flowers and green grass.

Now I paint more dark areas on a new layer . Name of the new layer is "dark_green " as you see.

And at this step I would like to change the size of my file because I'll begin to add more details so I need a bigger file size. I do wish my file is to be more bigger size because at this stage I do think I can't make so much detailed painting. So I open

Image/Image Size.

And make the settings as you see.

Step 3: Quick Detailing

Now I can continue to painting with this bigger file size. I'm more more comparable on painting. I continue to paint more green grass. On the top of my "back" layer there is a new layer as you see. I have merged the other layers together "back"layer. So now you see it is going to be more easy to paint with less layers. I paint some green grass and some darky areas on the ground.

I also hide the "sketch" layer for you to see more details about the tree.

Now I'm going to hide hide the "back" layer too. Look at the outline of the tree. At the next step I am adding more detailing to the tree branches and the leaves.

And also I do add some strokes with the Dodge tool too. I use this because I want to add some slight light areas on the tree.

When I do want to add some more light on the tree I am going to use color dodge tool. When you are using this option you must be very careful not to press hard on the pen of your table. With your pen tool you must very lightly touch on the tree branches. Don't use hard strokes.

Now look at all details which I just make with the color dodge option.

Step 4: Main Detailing

Once I'm satisfied with detailing the tree I create a new layer and name it with "green_green" I continue to add some green grass. Then I opened all layers except "sketch" layer.

Step 5: Changing Canvas Size

I do think I must make a little change with the canvas size so from Image select Canvas Size.

Here are my first settings before I change. I do want make higher the Height Size.

Here make the settings as you see.

Step 6: Continue add more Detailing

I continue to add more details and opening some new layers when I need. Pay attention to my layer order. And also pay attention to blank area at the bottom. We will need this area later.

Step 7: Working on Character

Now that I have decided to paint alien animal character. At the step I am just trying with the basic colors for my sketch. I have just closed the sketch layer for the see how is looking my character painting. I can start to add details. In this step. I started with coloring of my character. First select the "character" layer and began begin adding the character's colors.

I'll now begin to detail the character, adding more yellow and green colors. By the way don't forget at this step you don't have to over detail everything. At this point I kept working on main details and lights, until I got a nice and

contrast. Sometimes I have to change some colors. I am pretty much finished with painting it's body.

Step 8: Detailing Character

At this point I realized that my first character sketch is looking very simple and not so good, so I thought it was time to make some changes about character . I try some different outlook for it. First I have opened a new layer as "hair" and I continue to adding more details. I also would like to add some more details at the bottom of the image.

I do want some details at the bottom of our illustration. So first I have make a copy of the "tree" layer and name it as "black" And after choose Edit/Transform/Distort.

And make some changes with that. After from the sample panel select the Warp option and some changes as I did with the tree layer.

Here as you see position of the black tree must be like this.

Now at this step you must have noticed my new tree's color is black. Before I make those changes I had changed it's color via help of the Brightness Contrast. If you haven't changed it now you can arrange it. Here let me show how I did. Select Image/Brightness/Contrast

And make the settings as you see. Now we have completed this stage.

Now we can start out detailing our character. I also used Color Dodge tool for the bright areas. This is how it looks once all the adjustments are done with the Color Dodge and Burn tool.

Step 9: Final Adjustment

At this last step I use Photoshop's color balance tool to change colors a little bit. First of from Layer option select Flatten Image.

After flatten image, select Image option and Auto Levels. Now we are going to make some changes about colors.

After making Auto Levels your picture will be very lighted so you need to fade a little the brightness. Select the Fade option as you see.

And make the settings as you see..

And here's the final image, I hope you found this Tutorial interesting. Thank you for reading.

GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop

P o s t e d i n : T u t o r i a l s • W r i t t e n b y : M i c h a e l J o h n B u r n s

31

In this week’s tutorial we are going to create an awesome landing page for GD Auto Service as an example. The template will have a cool logo, search bar, navigation, slider gallery, login panel, blog, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial. So let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Rims

PSD File

Step 1: Setting up the Document

Start by creating a 1400px x 1850px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

Rulers: Ctrl + R

Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. When you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create a second guide with a value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Creating the Header

Now that we have set up our workspace time to create the layout. Start by creating a 100% by 200px using Rectangle Tool.

Add this Blending Option

Drop Shadow

Gradient Overlay

Stroke

Result

Add another shape at the very top of the canvas using Rectangle Tool size 100% by 40px, color #000000.

Add this Blending Option

Drop Shadow

Result

Using Text Tool add Signup and Login link at the top-right corner.

Step 3: Creating the Site Logo

This will be the site logo. Now to start, create a 80px by 80px shape using Ellipse Tool.

Add this Blending Option

Drop Shadow

Gradient Overlay

Result

Now, Contract the shape by 5px. To do this Ctrl + Click the thumbnail of the layer in the layers panel, next go to Select – Modify- Contract and the value to 5px. Create another layer at the top of the shape layer and fill it with any color.

Add this Blending Option

Inner Shadow

Gradient Overlay

Stroke

Result

Using Text Tool add GD text. I used Myriad Pro 36pt bold.

Add this Blending Option

Drop Shadow

Gradient Overlay

You should have this result

Now let’s add some highlights to our logo. Create a new layer above the text and name it highlights while the layer is selected make a selection of the inner shape. Select Elliptical Marquee Tool and make a selection while pressing Alt Key as shown in the screenshot provided below. Note that while holding Alt key this will hide the selection that you have selected.

Select Linear Gradient Foreground(#ffffff) – Transparent.

Refer to the screenshot below for the final result.

Step 4: Creating the Navigation

Using Line Tool create a #000000 1px line and below it create another #444343 1px line. All our navigation will be placed here.

Using Text Tool let’s add our navigation links. “HOME, ABOUT US, SERVICES, COMMUNITY, APPOINTMENT”. Each link should have 40px distance from the right. Then, between our links create two 1px line using Line Tool.

Let’s style our home as an active link. Using Rectangular Marquee Tool make a selection as shown in the screenshot below. Use Linear Gradient Foreground(#ffffff) – Transparent to fill the selection then, set the layer mode to Screen Opacity to 30%.

The Result

Step 5: Creating the Search

As you can see in the preview above there is a input field and a search button. First thing we need to do is to create two shapes using Rectangle Tool and make sure it is centered.

To make the left part of the first shape slanted we must select the input field shape layer and use Free Transform (Ctrl + T), right click on the stage and select Distort. Now you will have the option to drag the top right point from the right. For the search button drag the left point to the right.

Add this Blending Option – Input field

Inner Shadow

Gradient Overlay

Add this Blending Option – Search Button

Inner Shadow

Gradient Overlay

Using Text Tool add text label for the input field and button.

Step 5: Creating the Slider Gallery

Select Rectangle Tool and set the radius to 10px. Create a 600px by 340px and label the layer base, create another shape above it 600px by 50px label it control base.

Right click to control base and choose Rasterize. Using Rectangular Marquee Tool make a selection as shown in the screenshot below and delete it.

Add this Blending Option

Gradient Overlay

Stroke

Result

Now we will add next and previous controls. Select Shape Tool and find an arrow that looks the same as in the screenshot below.

Add this Blending Option

Drop Shadow

Gradient Overlay – For Hover purpose

Result

Create three circles using Ellipse Tool align it as shown in the screenshot below.

Add this Blending Option – First Circle

Drop Shadow

Gradient Overlay – For Hover purpose

Add this Blending Option – second and third Circle

Drop Shadow

Inner Shadow

Gradient Overlay

Result

Using Rectangle Tool create three shapes as shown in the screenshot below label them first, second ,third and set the opacity to 90%.

Add this Blending Option – first, second, third

Gradient Overlay

Result

Fill each layer with dummy text using Text Tool. Create also a read more button, just refer to the screenshot below.

Let’s add some separation between each tab. Using Line Tool create a line as shown in the screenshot below.

Result

Step 6: Creating the Login Panel

Select Rounded Rectangle Tool and set the radius to 10px. Create a 340px by 170px shape.

Add this Blending Option

Inner Shadow

Gradient Overlay

Stroke

Notice that the login and search look the same. But for the login input field remove the Inner Shadow and for the login button add a #a5150 Stroke.

Using Rounded Rectangle Tool with the same radius. Create a shape as shown in the screenshot below.

Add this Blending Option

Gradient Overlay

Stroke

Create another shape using Pen Tool.

Add “User Login” text using Text Tool

Step 7: Creating the Appointment Box

Using Rounded Rectangle Tool with a 10px radius create a 340px by 140px. 20px distance from the left and top.

Add this Blending Option

Gradient Overlay

Stroke

Result

Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.

Add a For Free text using Text Tool size 14pt Myriad Pro.

Add this Blending Option

Inner Shadow

Gradient Overlay

Stroke

Result

Add dummy text using Text Tool size 24pt Myriad Pro Bold Italic, place it as shown in the screenshot below.

Add this Blending Option

Drop Shadow

Gradient Overlay

Result

Finally open the rims image that you have downloaded and place it as shown in the screenshot below.

Step 8: Creating the Services

Create a 960px by 205px base shape using Rounded Rectangle Tool.

Add this Blending Option

Inner Shadow

Gradient Overlay

Stroke

Result

Let’s add previous and next controls. Using Rectangle Tool and Pen Tool create a shape as shown in the screenshot below.

Add the same Blending option as we did in our base shape.

Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.

Add this Blending Option – Base layer

Drop Shadow

Result

Create a shape as shown in the screenshot below color must be black. When you’re done set the layer opacity to 80%. Add text using Text Tool and grab a copy of read more shape as we did in our slider gallery place it as shown in the screenshot below.

Group all the layers we have made and duplicate it twice for our other services. Place it as shown in the screenshot below.

Result

Step 9: Creating the Latest News / Blog

The base and the header of our blog section is the same as our login. Duplicate a copy of it and change the header text to Latest News.

Grab a sample 125px by 125px image for our thumbnail post. I will not go into detail about how to do this, just refer to the screenshot below.

Step 10: Creating the Testimonials

Still the same header but different base style. For the base style copy the blending option we applied on the base of our services. Refer to the screenshot below for the thumbnails, text format, and line colors.

Step 11: Creating the Footer

Using Rounded Rectangle Tool create a shape as

Step 12: Creating the Background

Select the background layer and fill it with #bbbbbb. Using Rectangle Tool create a shape as shown in the screenshot below.

Go to Filter – Blur – Gaussian Blur

Finally we’re done. Wooo! I hope you didn’t get bored following this tutorial and I hope that you’ve learned something in doing this. If you have questions or comments just post it below and don’t forget to tweet and share this tutorial with others. Cheers all! :)

Preview

Before moving on, take a look at the final image we’re going to create. Click here or click on the image to see it in full screen.

Source Needed

These are the resources used in this tutorial:

Vintage Grunge Textures from princess-of-shadows Butterfly 3 from shoofly-stock Autumn Leaves PNG Pack from gild-a-stock Autumn Leaves 1 from sammykaye1sstamps Stock9-Yellow Flower from pralinkova-princezna Flower Stock 59 from anbdstock Vector Flourish Design from All-Silhouettes 5 Vector Floral Ornaments from QVectors

Step 1: Background

Open Photoshop. Create new file (File > New) with size 1280×1024 px, resolution 72 dpi, Mode: RGB.

Step 2

Activate gradient tool. Click preview box in option bar to open gradient editor dialog. Create gradient from #ffbc58 to #f95b1e.

Step 4

Create radial gradient from center to outside.

Step 5

Download vintage grunge textures and paste it on top of the image. Resize it until we find nice texturing.

Step 6

Change texture blend mode to Multiply with 20% opacity.

Step 7: Main Text

Add text on top of the image. Here, I use yellow color.

Step 8

Add this layer styles.

Step 9: Floral Shapes

Download Vector Floral Ornaments and open it in Illustrator. Select one of the vector shape. Hit ctrl+C to copy it to clipboard.

Step 10

Back to Photoshop. Hit ctrl+V for paste. Make sure you choose Smart Object. This way, pasted object will remain an illustrator file, so you’ll be able to resize it without degrading its quality. Rotate and resize the vector shape until you find it interesting.

Step 11

Now, we need to change its color to math overall color tone. From the Layers panel double click its layer thumbnail. You’ll probably get a dialog box like seen below, just click OK.

Step 12

The Shape wil be opened in Illustrator. Select it and change its color from Color Panel. After you finish edit the color hit ctrl+S to save it and ctrl+W to close it. Let’s go back to Photoshop and you’ll find the shape is also changing.

Step 13

Hold alt and move cursor on line between shape and text layers. The cursor will change into two overlapping center, click now to convert shape into clipping mask. The vector shape will goes inside the text.

Step 14

Repeat the process for other vector shape. Once you’re done, select the shape layers and the text then hit ctrl+G to put them into separate group. Name the group text.

Step 15: Add Subtle Floral Image in Background

Hold shift then click on thumbnail layer of shapes we have created earlier. This step will create selection based on the shape’s size.

Step 16

Create new layer underneath the text. Click Edit > Fill, use White then click OK.

Step 17

Remove selection by pressing ctrl+D. Click Filter > Blur > Gaussian Blur.

Step 18

Change layers opacity to 20%.

Step 19: Decorating Text

Back to Illustrator, open Vector Flourish Design and hit ctrl+A to select all shapes. From color panel

change its fill color to white.

Step 20

All the shapes’s color is now white. Because the background is also white its very hard to see them. Click View > Preview to see shapes outline.

Step 21

Shape one of the shape. Press ctrl+C.

Step 22

Return to Photoshop, hit ctrl+V to paste the shape. Place it on top of the text. Add layer styles Drop Shadow.

Step 23

Repeat this process with other shapes.

Step 24: Add Depth to Text Decoration

Select all shapes and press ctrl+G to put them in one group. Duplicate the group by dragging it to New Layer icon.

Step 25

Hit ctrl+E to convert duplicated group into a layer. Double click layer to open layer styles dialog box. Select Layer Mask Hides Effect and add bigger drop shadow.

Step 26

Select text by ctrl+clicking its layer thumbnail. Hit ctrl+shift+I to invert selection. Make sure the floral layer is still selected and click Add Layer Mask icon. Change fill layer to 0%.

Step 27

Now, floral shape out side the text will have bigger and darker shadow. This gives impression as if they are higher from the background.

Step 28: Adding Real Flower

Open Yellow Flower in Photoshop. Use Quick Selection to select the flower. It’s very amazing how this tool works! All you need is just dragging inside the flower and they will automatically selected.

If you use earlier version of Photoshop, you may not have this tool. Use the magic wand to get similar result.

Step 29

Click Select > Modify > Contract. Use 2 pixel then click OK.

Step 30

Copy flower and paste it on our image. Right click flower layer and choose Convert to Smart Object. By changing the flower layerto smart object we will retain all its pixel information.

Step 31

Hit ctrl+T and change flower’s size.

Step 32

Add drop shadow to give the flower realistic look.

Step 33

Hold alt and drag flower to duplicate it. Again change its size.

Step 34

Open another flower, select it, and paste it in

Photoshop.

Step 35: Add Dry Leaves

Download Autumn Leaves 1 and open it in Photoshop. This file is already cutted. All we need to do is just make rough selection around it, cpy, and paste it in Photoshop.

Step 36

Resize and put it on the text.

Step 37

Keep doing this to another dry leaves.

Step 38: Adding Butterflies

Open Butterfly in Photoshop. All the butterfly has already cutted. Just like we did with earlier dry leaves, select and paste them on Photoshop. Don’t forget to add drop shadow.

Step 39: Add Subtle Floral Shape in Background

Paste floral ornament we have opened earlier. Put it behind the text.

Step 40

Change fill layer to 0%. Add Bevel and Emboss.

Step 41

Add another floral ornament on the background. Don’t overdo this, keep them subtle. Otherwise the design will be too crowded and remove the focus from main text.

Step 42

I feel that there’s too much empty space in this design. To remove it we’l use crop tool. Open crop tool and drag around the text. I’m using Photoshop CS5 here and you can see that the crop box is divided into 9 grids that help us see the final image proportion. Once you have find the right size hit ctrl+Enter to start cropping.

Conclusion

Finally, we are done! I hope you like this tutorial and learn something here. Click here or click on the image below to see it in full size.