by Chad Neuman

While teaching layout and design, magazine design and production, and web design at the university level, I’ve noticed a few common mistakes students make while creating designs in either Adobe InDesign or Adobe Photoshop. Here are five prominent bad examples with five corrections for making better publication designs. I’ll provide better alternatives to make various designs more professional. Check these out to avoid those design faux pas, and in the process we’ll learn the design principles of repetition, contrast, alignment, and proximity.

Design No-No 1: The Careless Drop Shadow

There are not many more things that say, “Hello, I’m an amateur designer,” than the poorly-employed drop shadow. I’m not saying to never use the drop shadow. But don’t use it just for the fun of it, rather than because it enhances the aesthetics of the design. In other words, don’t do it for any reason. Here are a few examples of what I mean:

I applied this drop shadow in InDesign, by going to Object>Effects>Drop Shadow, with a Distance of 0p2 and a Size of 0p2 and the settings seen here:

In Photoshop, you go to Layer>Layer Style>Drop Shadow with the text layer selected. With a higher pica size, the effect can be made to create a hazy look for certain text effects. A subtle drop shadow can also work, but it is a difficult effect to master in order to make it look professional. Instead, try a stroke around the edges of the text.

Better Alternative 1: The Carefully Done Stroke

This look is more professional. In InDesign, go to Object>Effects>Clear Effects to get rid of the drop shadow. Highlight the text with the Text tool, and then double-click on the Stroke on the bottom of the Tools palette. For my example, I changed the font to Impact, and added a 2-point stroke. Go to Window>Stroke to adjust the thickness of the stroke. (In Photoshop, go to Layer>Layer Style>Stroke.)

Design No-No 2: Inconsistent Photo/Visual Element Size
Good design incorporates a balance between repetition and contrast. When placing images in a layout, be sure to incorporate repetition of some elements. Contrast font style, size, and colors in various parts of the layout (such as different font sizes for subheads, titles, and body copy), but without some consistency/repetition, it would look like chaos. One of the times to repeat aspects of a design element is the placing of photos in a grid. In this example, we can see the photos are not a consistent size.

Better Alternative 2: Consistent Photo/Visual Element Size
To maintain a correct size, try using the Crop tool in Photoshop and setting the preset crop size to whatever size the photos should be, before placing into InDesign. Of course we can also resize after placing the photos in InDesign, using Cmd (PC: Ctrl) and clicking-and-dragging the corner of the photos (holding Shift to maintain proportion), but if the proportion is not the same across all three photos, they will end up being different sizes unless we crop part of the photos out by clicking-and-dragging on a edge without holding any keys.

Maintaining consistency is also important whether it’s photos or shapes, such as this pull quote (the Latin is randomly generated). Not how having a repeated visual element size adds appeal to the design. This is often utilized while working with a design “grid” of three or four columns.

Strokes often work better not just on text but on photos and shapes as well. Consider the difference between the drop shadow on the left and the stroke on the right, which looks much better, in this example.

Design No-No 3: Unaligned Text
Two other design principles besides repetition and contrast are alignment and proximity. Text looks better if it’s aligned. Notice how the three columns below are not aligned; you can tell by clicking-and-dragging a ruler guide from the top ruler and drag it to the bottom of the first line, in InDesign or Photoshop.

Better Alternative 3: Aligned Text
Clicking-and-dragging either the top bounding box or moving the text box allows us to align the columns with each other. I like to draw a ruler guide below the first line and then align the columns along it. Of course in InDesign we can also go to the Paragraph palette (Windows>Type and Tables>Paragraph) and click the Align to Baseline Grid option as well.

Design No-No 4: Uncoordinated Colors
When designing for print, broadcast, or new media, it’s important to coordinate colors. This example below shows how uncoordinated colors can clash in a design.

Better Alternative 4: Coordinated Colors
Use a color wheel to find complementary or analogous colors. Complementary colors are opposite on the color wheel, such as in this example (not that the colors do not have to be exactly across, but close matches do look good):

In this example, the colors coordinate because they are analogous, as opposed to complementary. They are analogous because they are next to each other on the color wheel, not on the opposite side.

Design No-No 5: Bad Proximity (Inconsistent, Too Close, or Too Far Away)
Finally, proximity is also a good design principle to learn. Proximity is the space between elements on a design. Notice in this example that the spacing, or proximity, between the left and center photos is different from the space between the center and right photo. Also the text is too close to the photos, since it is not intentionally flushed but is a separate elements which needs to be at least 1 pica away from the photos.

Better Alternative 5: Good Proximity (Consistent and the Correct Distance Apart)

In this example, the space between all three photos is consistent and the text has some “breathing room” apart from the photos.

These rules may seem subtle, but trust me, they add a lot of aesthetic value and professionalism to designs, whether it is for a print advertisement, publication, or web site design.

By Chad Neuman

This is an often-requested technique from some of my university students, so here’s a tutorial on it. Sometimes you may need to cut out the background from part of a photo and keep the background transparent. Reasons for this include needing a transparent background in a web page design or in an InDesign file. Here’s how to do this.

Step 1
Open an image in Adobe Photoshop.

Step 2
Here’s an important step, because Background layers do not keep deleted pixels as transparent. Double-click on the Background layer in the Layers palette and name the layer (Layer 0 is fine) and click OK. This allows the layer to have a transparent background once we delete some pixels.

Step 3
Use a Selection tool to create a selection of the element to keep. I will go over advanced selection techniques in another tutorial; for this example, we can use the Quick Selection tool or the Polygonal Lasso tool to click around the area and go to Select>Inverse to select everything but the element we want to keep. In this example, it’s the snowboarder. We can refine the edge of the selection by going to Select>Refine Edge if needed.

Step 4
Once the area needed to be transparent is selected, press Delete (PC: Backspace) to delete those pixels. The checkerboard pattern means those pixels are transparent.

Step 5
Here’s another important step. If you save this file as a JPEG, the background will be filled with pixels. Instead, save the file as a GIF (and keep transparency in the save options) or PNG if you need a transparent file for a web site design. If you need to incorporate an element from a photo with a transparent background in an InDesign file, you can save it as a normal Photoshop file (PSD) since they are both owned by Adobe and seamless. When placing the PSD file in InDesign, the file will retain its transparency.

by Chad Neuman

This technique can be useful when creating brochure, web site, or poster designs. Creating duplicated layers from selections and then applying layer styles to them is a simple yet effective technique. Let’s get started.

Step 1
Open an image in Adobe Photoshop.

Step 2
Press Cmd-J (PC: Ctrl-J) to duplicate the Background layer so we’re working on a copy.

Step 3
Select the Marquee Selection tool and click-and-drag a square (Hold Shift to create a square rather than a rectangle).

Step 4
We need to save the exact square shape for all three layers we will make, so go to Select>Save Selection and name and save it.

Step 5
Next, press Cmd-J (Ctrl-J) to duplicate just what was selected. I click the Eye icon on Layer 1 and the Background layer to show the new layer, Layer 2.

Step 6
Click Layer 1 in the Layers palette to make sure it is selected, and go to Select>Load Selection.

Step 7
Now we need to move the selection to the right. With the Marquee Selection tool selected, hover the mouse inside the edge of the selection and it should turn into an arrow. Holding Shift to maintain a straight line, click-and-drag the selection to the right until it is a few picas over. You may want to use the Rulers (View>Rulers) to make sure you’ve dragged the selection over enough so it does not overlap where the original selection was. Then click Cmd-J (PC: Ctrl-J) to duplicate another area to a new layer. I clicked the Eye icon on Layer 1 and the Background layer again to show these two new layers.

Step 8
Next, repeat steps 6 and 7 but move the selection over even more an even amount so we can duplicate a third layer. Try toggling Layer 1 on and off with the Eye icon to make sure we duplicate the area at about an even interval. It doesn’t have to be exact unless your design calls for it; I am mostly worried about avoiding overlapping.

Step 9
Now let’s add some layer styles. With Layer 2 selected, apply a layer style by going to Layer>Layer Style>Drop Shadow. Try the settings shown here.

Step 10
Now instead of having to add a layer style to each again with those steps, we can press Option (PC: Alt) and click-and-drag the Drop Shadow from Layer 2 to Layer 3 and Layer 4 in the Layers palette.

Step 11
There we go!

Try different layer styles by clicking-and-dragging the styles to the trash icon on the Layers palette and then applying new ones.

This one has a Stroke and Inner Shadow applied.

This one has an Outer Glow, Inner Glow, and Drop Shadow

by Chad Neuman

Here’s another way to create a Holga effect. Some Holga photos have varying hues or vignettes, and the one shown here. But others have a faded out focus on parts of the photo and a faded look. Here’s how to achieve that in Photoshop.

Step 1
Open Adobe Photoshop and open an image you’d like to use.

I chose this photo by Joey Nelson at iStockPhoto.

Step 2
Press Cmd-J (PC: Ctrl-J) to duplicate the Background layer.

Step 3
Next, let’s add a blur to the copied layer. Go to Filter>Blur>Gaussian Blur. The amount of blur depends on the size of the photo. This photo I am working with is very large, so I set the blur to 15 pixels. You may try 3 or 4 pixels or so if hte photos is much smaller.

Step 4
We need to add a mask to the Layer 1 to mask out parts of the blurred layer. Click the Add Layer Mask on the bottom of the Layers palette. This will create a white box on Layer 1.

Step 5
Choose a large, soft-edged brush, and set the Foreground color to black and click once in the photo to mask out part of the blurred layer.

Step 6
Next, click the Create a New Layer icon on the bottom of the Layers palette. Choose an orange Foreground color (I chose #ffc000) and press Option-Delete (Mac: Alt-Backspace) to fill the layer with this color. Change the Layer Blending Mode of this layer to Multiply.

Step 7
Change the Opacity of this layer to 50% and go to Filter>Distort>Lens Correction. Drag the Vignette slider to the left to create a dark border. I chose -100. Multiply blending mode is subtle, but try Color Burn and the look even looks more like a Holga.

Step 8
There we go! This is another way to create a Holga look.

by Chad Neuman

Holga cameras were created in China decades ago in order to create an affordable camera for the masses. Now hipsters and artists alike have discovered the Holga, taking photos that often turn out very suprising. Waiting for the photos to develop results in often desaturated photos, vignettes, and extra saturated areas on the photos. Here’s one way to add a Holga look to a normal photo by using Photoshop.
Step 1
Open holga.jpg, a photo of my friend Roxanne, in Adobe Photoshop.

Step 2
Double-click on the Background layer and click OK to make it a normal layer. Go to Filter>Distort>Lens Correction. Change the Vignette amount to -100 and the Vignette Midpoint to +40.

Step 3
Next, press Cmd-J (Ctrl-J) to duplicate the layer. Now let’s desaturate the top layer somewhat. Go to Image>Adjustments>Hue/Saturation and set the Saturation to -22. This effect is very subtle so far, and you can click the Eye icon to see the difference.

Step 4
Click the Eye icon on the top layer to make the top layer transparent for now. Click the bottom layer to edit it.

Step 5
Next, go to Image>Adjustments>Hue/Saturation. Change the Saturation to +100.

Step 6
Click the Eye icon on the top layer to turn off its transparency. Click the top layer to edit it, and the click the Add layer mask icon on the bottom of the Layers palette.

Step 7
Next, be sure to click the white mask box on the top layer in the Layers palette. Then, choose a soft brush, 300 pixels. Set the Foreground color to black. Click once in various areas and along the edges to simulate the Holga look seen in some photos.

Step 8
Finally, go to Filter>Distort>Lens Correction and set a Vignette to darken at -75 since we need more of a black edging for that vignette look that is often seen in photos taken with a Holga.

by Chad Neuman

Here is how to use layer clipping masks with photos and text in Adobe Photoshop for unique looks for brochures, web sites, and posters.

Step 1
Open Adobe Photoshop and go to File>New and create a new 1024×768 document and click OK.

Step 2
Next, click with the Text tool and type out some text. Change the font to a bold font like Impact so that the photo showing through will be noticeable. Think of the photo you’ll be using and type something to match it.

Step 3
Open a photo you’d like to use and using the Move tool, click-and-drag it onto the Photoshop file with the text, or copy and paste it.

Step 4
Here’s the trick to add the Layer Clipping Mask. On the Layers palette, there should be three layers: Background, the text layer, and the layer with the photo. Make sure the photo layer is on top of the text layer, and press Option (PC: Alt) and left-click with the mouse hovering between the two layers.

Step 5
Now we have text composed of a photo. We can use the Move tool and move either the text or the photo.

Step 6
Try various text and designs. Note: If you open a photo and type text on top, be sure to double-click the Background layer and name it to become a normal layer and then click-and-drag that layer over the text layer before applying the clipping mask.

by Chad Neuman

We can use Adobe Photoshop not just for editing photos but for creating artistic design and effects as well. Here’s one way to create an interesting and aesthetically-pleasing look.

Step 1
Open Adobe Photoshop and go to File>New and set the Width and Height to 1000 pixels. Click OK.

Step 2
Set the Foreground color to a dark color such as dark blue, black, red, etc., by clicking the Foreground Color Picker on the bottom of the Tools palette. I set it to #09005e. Click OK.

Step 3
Press Option-Delete (PC: Alt-Backspace) to fill the Background layer with this dark color.

Step 4
Next, press the Create a New Layer icon on the bottom of the Layers palette. Choose the Brush tool and set the Foreground color to white. Set the brush size to 700 pixels, soft-edged.

Step 5
Click the brush once just along the side of the canvas.

Step 6
Click the Move tool and make sure Show Transform Controls is selected up on the Options palette. Click-and-drag the side of this layer to make it about this size and press Return (PC: Enter) to apply the changes.

Step 7
Next, click Cmd-J (PC: Cntrl-J) four times to duplicate this layer so we have five layers with the brush pixels we just created.

Step 8
With the top layer selected (Layer 1 copy 4), go to Filter>Distort>Twirl and set the twirl to -100 and click OK. With the Move tool, move this layer slightly to the right and we can see the effect.

Step 9
Repeat step 8 but for the four other layers with the brush pixels on them: Layer 1 copy 3, Layer 1 copy 2, Layer 1 copy, and Layer 1. But instead of -100, set the Twirl to -50, 50, 100, and 150. Using the Move tool to move the layers around, we can see the various shapes.

Step 10
Next, rotate the various layers with the wavy shapes by hovering the mouse cursor near the corner of the transform controls and click-and-drag. Try various angles, my example looks like this.

Step 11
Click the Create a New Layer icon on the Layers palette, and click once with the Brush tool in various areas of the canvas with various colors. Change the Layer Blending Mode to Soft Light. Now we have a nice piece of art for a design.

by Chad Neuman

Adjusting the opacity of shapes and lines can help create interesting designs for flyers, advertisements, or magazine layouts. Here’s a basic technique to add to your design repertoire.

Step 1
Create a new document at 1024×768 pixels and 72 pixels/inch. Click-and-hold the Rectangle tool to get to the Ellipse tool and select it.

Step 2
Click-and-drag a circle, holding Shift to maintain proportion. Click the color on the Options palette and change it to #0e71cd.

Step 3
Click-and-drag a slightly smaller circle, and change the color to #f3a704.

Step 4
Click-and-drag another circle, with the color #10ae00.

Step 5
Click-and-drag the fourth circle, with the color #f6f900. Click-and-drag this shape layer below the previous one in the Layers palette.

Step 6
Change the Transparency of each shape layer to 50% in the Layers palette.

Step 7
Open a night photo and click-and-drag it with the Move tool onto the transparent shapes file. Click-and-drag the new layer below the shapes.

Step 8
Add some white text with the Text tool above the other layers.

Step 9
Click the New Layer icon on the bottom of the Layers palette and select the Brush tool. Change the Brush to soft brush, 65. Click-and-drag some lines. Again, we need to adjust the Opacity. Change the lines slightly, to 95% in the Layers palette.

by Chad Neuman

Here are a few techniques to create an “electrifying” design. Using soft white brushes is a popular technique in creating a hip layout, but we’ll use a few other techniques as well to create this design, including threshold, hue/saturation adjustments, and layer blending modes.

Step 1
Download the support files and open telephone pole.jpg in Adobe Photoshop.

Step 2
Go to Image>Threshold and change the Threshold Level to 179.

Step 3
Go to Image>Adjustments>Hue/Saturation and change the levels to the numbers shown here.

Step 4
Open “telephone pole2.jpg” and go to Image>Adjustments>Threshold and change the Threshold Level to 64.

Step 5
Go to Image>Adjustments>Hue/Saturation and change the levels to those shown here.

Step 6
Click the Move tool (the tool at the top of the Toolbar) and click-and-drag “telephone pole2.jpg” onto “telephone pole.jpg.”

Step 7
Make sure Show Tranform Controls is selected on the Options palette, and click-and-drag a corner with the Move tool and enlargen the top layer so it covers the Background layer.

Step 8
Change the Layer Blending mode on the Layers palette to Color Burn.

Step 9
Open kelly.psd and click-and-drag the layer with the Move tool onto the other image. Click-and-drag a corner with the Move tool to resize the image a bit. Hold Shift to maintain proportion.

Step 10
Go to File>Place and place “scan5.jpg” and make sure Show Tranform Controls is selected on the Options palette. Rotate it using the Move tool and make it larger by clicking-and-dragging on a corner.

Step 11
Click-and-drag the scan5 layer below Layer 2. Change the Layer Blending mode of scan5 to Multiply.

Step 12
Select Layer 2, the layer with my friend Kelly on it. Go to Layer>Layer Style>Stroke. Change the stroke color to White and the Size to 6.

Step 13
Click the New Layer icon on the bottom of the Layers palette and choose to Brush tool. Change the brush to the soft brush, 27.

Step 14
Click on various areas of the art, changing the size of the brush by pressing the left and right brackets.

 Now we have a nice design which adds interest to the overall photo look.

by Chad Neuman

The Pathfinder palette is a useful to when using Adobe Illustrator. Here’s a tutorial on creating text and gradient clouds using this palette.

Step One
Open Adobe Illustrator and open a New Document. Select the Text tool. Type out the word, “Clouds” and highlight it and change the font to one that is thick. I used Cooper. Set the Fill color to Black and the Stroke should be set to None.

Step Two
With the Selection tool selected, hover over the “Clouds” text and right-click over it. Click Create Outlines. This will outline the text.

Step Three
Hover over “Clouds” again and right-click. Click Ungroup.

Step Four
Now we can move the various letters and re-size them with the Selection tool. Click-and-drag a corner bounding box to resize it and click-and-drag over the letter to move it.

Step Five
Click-and-hold the Rectangle tool on the toolbar and click the Ellipse tool. Click-and-drag a few circles. Hold Shift to make perfect circles.

Step Six
Choose the Rectangle tool and click-and-drag along the bottom of the circles.

Step Seven
Cover up any areas in the middle that aren’t covered, using the Ellipse, Rectangle, or Rounded Rectangle tool.

Step Eight
Go to Window>Pathfinder to open the Pathfinder palette.

Step Nine
With the Selection tool, click-and-drag around all the shapes and click the Add icon on the Pathfinder palette (the top-left corner of the palette). This will make all the shapes one shape.

Step Ten
Click-and-drag the various letters with the Selection tool and place them so they’re partially covering the cloud shape we created.

Step Eleven
Click-and-drag around all the letters and objects with the Selection tool. Click the Add icon on the Pathfinder palette.

Step Twelve
Change the Fill color to the gradient swatch on the Swatches palette. You can change the angle of the gradient by using the Gradient tool from the toolbar. Click-and-drag over the object to set the angle. Change the two colors in the gradient by clicking-and-dragging them from the Swatches palette onto the Gradient palette.

Step Thirteen
Add a few birds by drawing them with the Pencil tool.

Step Fourteen
Draw a few with the Pencil tool and move them over the cloud object by clicking-and-dragging with the Selection tool.