Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

General Advice

Content Goes First

I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks.

Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.

Why do you want metallic ink? Do you think your name would really stand out in gold, even though your message is all about technology and recent code developments? You may want to rethink that. Or do you sell hand-crafted jewelry and want a design that reflects your latest silver creation? Then the silver ink might be the perfect solution for you after all.

The back of a business card is often ignored, but it can be a great place for extras that make your card even more memorable. Make it relevant to what you do, and make it useful if you can. You could include tips or a quick how-to guide relevant to your product, offer a free consultation, add a reminder for a date when you will offer discounts, or invite loyal customers to collect a stamp every time they purchase from you. Think of something that would make them want to hang onto your business card and consult it often. If you think the back should be reserved for note-taking, why not mark a few dotted lines, titled “Notes,” rather than leave it blank?

Talk to Your Printer

No one knows more about the techniques and materials available—and new ones come out all the time. Generally, printers are more than happy to give you all the industry news and advise you on techniques and materials. (If yours isn’t, you might want to look for a new printer.) If you learn a little about how they operate, they will appreciate it and be even more willing to help.

Size

While this article focuses on custom shapes and sizes, keep in mind standard sizes, too. Card holders are made to fit standard size cards, and I have often heard comments like, “If a business card doesn’t fit in my wallet, I don’t care how beautiful it is, it’s going in the trash.”

The standard sizes are 3.5 x 2 inches in the US and Canada, 85 x 55 mm in the European Union and 90 x 55 mm in Australia, New Zealand and Scandinavia. Or you could use a standard credit card as a reference, which about 85 x 54 mm or 3.34 x 2.25 inches.

Unless you have some other use for your cards in mind (for example, a bookstore’s card that doubles as a bookmark), you’ll want to stay within those dimensions. Smaller is okay, but anything too big won’t fit in most pockets, so consider going bigger only if you have reason to believe your cards will not be stored in wallets or holders.

Do you have the perfect idea but don’t know what to do with it? Maybe you’ve heard about die-cutting, varnishes, metallic inks, letterpressing and special materials but are unsure what they are exactly or which one is for you? Let’s jump into the different techniques!

Die-Cutting

Any card (or any printed material for that matter) that isn’t a standard rectangle or that has holes in it is created by a technique known as die-cutting. A metal template is prepared and is used to cut the paper in the given shape. The easiest way to think about this is to picture a giant hole-puncher, except that the holes are not necessarily round, but rather whatever shape you want them to be.

This means that, in addition to the artwork, you will need to provide the printer with a custom shape to “punch out” your cards.

The result can be as simple a round hole in the center of your card or as complex as a three-dimensional pop-out.

This simple and effective design makes use of the round hole on both sides of the card.

This card takes the shape of the product. Instant recognition!

Preparing the File

I’ll use die-cutting as an example, but most of these guidelines apply to the other finishes as well. The main differences are cited in the respective sections below, and I will provide links to help you read about the techniques in more detail. The guidelines below should give you a good starting point.

The best applications to prepare files for any special print finishes are the industry-standard Adobe Illustrator and InDesign. Photoshop is not suitable because it does not have the precision necessary for this kind of project.

As with any other print document, set up your file to the printed dimensions (i.e. whatever size you want your card to be, whether rectangular or a non-standard size), at 300 PPI resolution, using CMYK as the color space for all the elements of the artwork.

There seems to be a bit of confusion about DPI, PPI, CMYK and RGB. Preparing a file for printing with either Illustrator or InDesign is actually very simple.

In Illustrator, when creating a new document, click on the “Advanced” options tab (in some versions this is already visible). This brings up the options for both the resolution and color space. Set the resolution to 300 PPI and the color mode to CMYK.

Note that PPI, or pixels per inch, is often confused with DPI, or dots per inch. The latter refers strictly to printer hardware and its capability to reproduce dots on paper. When preparing files for printing, don’t worry too much about the DPI. 300 PPI is the magic number. Remember that and you’ll be golden. If you would like to learn more about DPI and PPI, see the link at the end for an article that explains it in much more depth.

InDesign documents are automatically created at 300 PPI. The only thing to make sure of is that the elements you insert in the document (such as photographs) are also at 300 PPI and use CMYK. Check this by selecting your image and bringing up the info window (hit F8).

For example, the image below uses the RGB color space; it should be changed to CMYK:

Even though you can use RGB images, it doesn’t mean you should. Yes, both InDesign and Illustrator are perfectly capable of converting the output to CMYK when you export a file as PDF, but if you ever have to submit your source files to someone or use the images for something else, this extra step could save you hassles.

And please-double check the resolution. Print out the card to check for pixelation. I know this sounds like a no-brainer, but so many people forget to check the printed result. What you see on the screen is not what you will see in print.

Another thing to check is your black text and line art, if you are converting any of them from RGB. They should be 100% K in CMYK color mode to avoid a muddy effect and color halos.

When your artwork is ready, create a new layer above the artwork. Call the layer something like “dieline.” You could be even more specific and name it “Dieline – DO NOT PRINT,” which would be especially helpful if you are not able to speak with the printer before submitting the file (say, if you are using a Web order form or your client is the point person for the printer.)

Now, create the guidelines for how your card should be cut. Make sure your outline for the die-cut uses a custom spot color, not CMYK; this allows the printer to extract the die-cut template when printing separations. To create a custom color, click on the little arrow in the swatches palette, and click to make a new swatch. In the dialog box that appears, choose any color that will stand out in your artwork, and then select “Spot color” from the drop-down menu next to “Color type.” The color can be anything you want. 100% magenta is quite popular because it usually stands out, but saving it as a spot color is important.

Also, remember to set the stroke (if it’s a custom crop shape) and/or fill (if you are cutting out holes) to “Overprint” to avoid knocking out the art below. You can bring up the options for Overprinting in InDesign by going to Window → Attributes, or in Illustrator by pressing F11 to bring up the “Attributes” window.

Let’s say your logo is a cloud, and you want the card to be cut in a cloud shape (not a very creative example but easy to explain). Your file in Illustrator would look something like this:

And your finished card would look like this:

If you wanted to cut out the cloud shape, it would look like this:

And the finished card would look like this:

Notice how the logo has moved from the artwork layer to the dieline layer and is now also filled with the custom spot color.

Make sure your artwork has enough bleed (i.e. it extends well past the edge of the document if the shape is regular or past the die-cut guidelines if custom). Usually 0.125 inch, or about 3 mm, is enough, but I tend to add more to be safe. Both InDesign and Illustrator allow you to add bleed in the “Document setup” options.

I won’t go into too much detail here, because bleed is a rather complex subject that deserves its own guide. For those of you interested in learning more, a couple of links are at the end of this article that explain it more thoroughly.

On the same note, do not put any important elements (such as logo or text) too close to the edge. Leave a buffer margin (again, about 0.125 inch or 3 mm) around the dieline or document, to avoid the risk of something getting cropped.

Usually, either a native file (AI, INDD, EPS) or high-resolution PDF is acceptable as the final file for printing. (Always check with the printer before preparing the final file.) If you prepare a PDF, make sure your custom fifth color is kept as a spot color and is not converted to CMYK. You can check it in the “Ink Manager” window (Export as PDF → Output → Ink Manager):

You can double-check that it appears in the Ink Manager list in the PDF itself (Acrobat Pro) by clicking Advanced → Print Production → Ink Manager:

Printing It

Most big print shops have die-cutting equipment. Check first if you are printing locally. The best way to make sure everything goes according to plan is to ask questions, explain your requirements and look over the proofs in person. Small printers outsource die-cut jobs. If you want more control, look for one that does it in-house.

If you are unable to print locally (for example, because your client is remote), you have two options. One is to find a printer local to your client. Usually, the client will already have one lined up, but I strongly recommend you get in touch with that printer yourself, rather than just pass the files to the client and let them handle it. Ask questions, send over mock-ups, get a proof sent back to you—do what you can to make certain that the job prints the way it should.

Alternatively, you could find an online print shop that offers die-cutting. Again, get in touch with them personally, rather than just submit the file via an online form, and make sure all your questions and concerns are addressed.

Printer Checklist

Need help choosing a print shop and communicating with it? Here are some things to keep in mind.

• Before you do anything else, get their phone number or email address and get in touch. Tell them about your project, and ask about technical specifications and any other questions you may have. (This is a good time to request a cost estimate as well.) If you have more than one candidate, rinse and repeat.
• Ask to see samples of similar pieces they have printed. Examine them. This could lead to more questions—or inspiration to make your project even better.
• The main criteria I use in choosing a printer is how responsive and knowledgeable they are. You want someone who will actually check your file and contact you if there are any problems or questions; because no matter how great a printing deal you find, if your file has an error, that’s money thrown down the drain.
• To save some money, you can often do this by asking the printer for advice. Would making the file layout slightly smaller allow them to fit more cards on one sheet? Could you adjust the shape so that there is less wasted paper? How about using fewer colors? Your printer should know the options; just ask!
• In my experience, PDF is one of the safest options for prepress. Native Illustrator files work well too, but be sure to check which versions of Illustrator your printer accepts. Always check which versions of any Adobe software your printer uses if submitting native files.
• Ask the printer if they have .joboptions files. These files can be imported into Adobe applications and will give you presets for exporting to PDF or EPS. This is the easiest way to make sure that your final files are exactly the way your printer needs them. If they don’t have these files, both InDesign and Illustrator have presets for saving in PDF. Just make the necessary adjustments; for example, you will have to add the bleed to these presets manually (see the links at the end for step-by-step instructions).
• If you are not able to speak with the printer, add an email message or a file with instructions. Don’t forget to include your contact information so that they can call or email you if they have any questions!

You’ve probably noticed that most of these tips emphasize the importance of communicating with your printer. I cannot stress this enough: every project is different, and communication is the key to getting the best result possible.

How Much Will It Cost?

While pricing depends on many factors, there is usually a set-up fee when using a die-cut or other special finishing technique. (Remember the giant hole-puncher mentioned above? They need to make one of those, just for you.)

The fee will be the same whether you print 50 or 500,000 cards, so printing larger quantities is much more cost-effective.

This may not be the case with certain popular formats (for example, rounded-corners business cards) because the printer would reuse the same template for multiple jobs, hence the special offers.

Special Finishes

I’ve devoted a big portion of this article to die-cutting because the file preparation and printing process described here is similar to many other techniques. But let’s look at some of them.

Spot UV Coating

This special finish is achieved by applying a clear varnish to an area of the card defined by you. The effect is a slightly raised design element, with a glossy, matte or satin finish. The example below shows a glossy finish:

File preparation is done the same way as for die-cutting, but instead of specifying a stroke, you specify a shape or area to apply the varnish to. This is still done by filling it with a spot color and, in this case, setting the fill to overprint.

Letterpressing

Letterpressing is done by inking a raised surface and then pressing it into the paper, giving the design both color and depth. This technique is suitable for vector images and text, using solid Pantone inks. An article linked to at the end of this article provides more technical detail. Here is an example of a business card done with this technique:

Embossing

Similar to die-cutting, a die is used to press the paper up, creating a three-dimensional raised effect.

Foil stamping

With this technique, a layer of thin foil is applied to an area of the card you specify.

File Preparation for Special Finishes

File preparation for all of these effects is similar to that of die-cutting: you have to define the area to be coated, embossed or whatever the effect is. But you might need to submit two files: one with the artwork, and another with the area to apply the effect to.

Make absolutely certain these two files line up perfectly. The easiest way to do this is to use a file with separate layers: one or more for the artwork, and another for the special finish guidelines (as described for the die-cutting file preparation above). Then, simply save them as separate files by first hiding one layer and then the other.

When using photos for a special finish, create a clipping path in Photoshop before placing the photo in Illustrator or InDesign. Then you can use this same clipping path as the mask for your effect either by choosing to export the clipping paths to Illustrator or by right-clicking (PC) or Control-clicking (Mac) on the clipping path in InDesign and converting it to frame. (You might want to check the options first if it isn’t showing by going to Object → Clipping Paths → Options.)

For example, you can use different masks with this image:

This mask will apply the effect to the entire photo:

While this one will apply it only to the foremost apple:

Special Inks

Additional inks can be used to make your card stand out even more. Metallic, pearlized and fluorescent inks can produce interesting effects. (To better preserve metallic inks, consider putting a varnish on top.) The even more common Pantone colors give a different and more solid effect than their process equivalents because they are opaque.

This one is simple: just find a custom color you like by looking at the Pantone swatches, and add it to your document. Prepare your artwork as you normally would, but make absolutely certain that your output does not convert to CMYK if you are preparing a PDF (as described above).

Note: the easiest way to prepare photos with a special ink is to convert your image in Photoshop first to grayscale and then to duotone. Choose your ink(s) from the Pantone library, and tweak your settings as necessary. (Working with color channels is a complex way to get more control over the result, but I don’t recommend this to Photoshop beginners, and Photoshop experts probably already know how to do this.)

Duplexing and Triplexing

This technique is about using two or more sheets of paper glued together. The effect achieved is commonly referred to as edge-painting or edge-tipping, because a different-colored sheet of paper that is inserted between the two main ones produces colored edges “inside” the card (triplexing), as seen here:

Using only two sheets (duplexing) gives a two-color edge—one on the front and one on the back:

It adds a touch of elegance and makes your card thicker than the standard stock. Combining this technique with die-cutting—budget permitting—gives an even more interesting result.

Scented Inks

You won’t find many examples of this technique on the Internet because it doesn’t exactly translate as a photo. Still, it is an interesting way to make your business card jump out.

Available scents range from chocolate to mildew. If that is not enough (and money is no object), you can create a custom scent for an extra fee.

Special Material

This is a vast subject because the options are countless. We will only touch on this topic. To see and feel the different kinds of material available, visit your printer!

Paper and Cardboard

There are so many varieties that I wonder why most people still use the same white or off-white cardboard stock for their business cards. From soft-as-cloth finishes to cold-pressed textured paper, there are enough options for everyone’s needs. The options are rather hard to describe; I recommend you make a trip to the printer (and give yourself an hour or so to ponder the choices)

File preparation is no different; except with colored paper stock, keep in mind that the colors will not display the same way in your software. To simulate the effect, use a layer of a similar color below the artwork, and set the artwork layer to multiply; or to about 70% opacity with darker color stocks.

Plastic

Transparent, frosted, stretchy—there are plenty of options for a plastic stock.

Plastic is usually printed with a different process, such as screen printing. Check with your printer to see what colors you can use. Special printing processes usually require that you use Pantone inks. Remember to account for any special effects, such as transparency and stretch. Giving general advice on this one is hard, because each material has its own requirements.

Metal

If your service or product is related to a metal, you might want to consider using metal as a material. You could simulate a credit card or computer. Keep the design minimal for a more striking effect.

Again, check with the printer before preparing your artwork to find out what process they use to print on metal and which colors you can safely use.

Other Material

Other options are wood, plexiglass, cloth. You could combine these and use a special finish as well. Hopefully this article has given you some ideas, and you will know how to start researching: by speaking with your printer.

Customizing by Hand

Sometimes, printing a highly customized card is simply not worth it, especially if you need only a small quantity. Does that mean you should dismiss your creative idea and stick with a standard solution? Not necessarily.

All you need is some imagination and a lot of patience. An appetite for crafts or having crafty friends or relatives can be a big plus, too.

You could print a standard card as the base of your idea and then customize smaller quantities by hand. I recommend doing this with fewer than 500 cards, or you will be overwhelmed. If you have crafty friends or relatives who are willing to help, you could tackle more.

Again, keep it relevant to the content. For example, colorful hand-stitching to underline a key phrase or “stitching” your design would be fun for a textile or fashion business:

Gluing on an element would work for crafts stores. Or you could glue a piece of fabric or something else that characterizes your service:

Incorporating something relevant to what you sell is a great idea, and there are plenty of ways to do this. Here is an excellent example:

A paper clip would work for a business supply store or even a business consultant, while a dried or plastic flower would work for a flower or gift shopt. Just about any kind of business can find something relevant to add on.

You could even invite the recipient to customize the card themselves; for example, by including cut and fold lines that transform your card into a unique shape. Simple examples are a paper doll for a children’s store or origami for a stationery store. Just make sure it’s relevant and fun, otherwise your recipients are unlikely to go through the trouble of cutting out and folding the card.

Hopefully this article offers enough information and inspiration for you to make business cards that are as creative as your imagination allows, and on any budget.

Want To Know More?

Here are a few articles that go into more detail on some of the topics covered:

• Living in a Die-Cut World
  An in-depth article on die-cutting from GoMediaZine.
• Display, Printing, DPI and PPI
  If you are really curious about the differences between DPI and PPI, this article by Photo.Net is for you.
• Brand Spanking New Colors: Making Custom Spot Colors in Illustrator
  A step-by-step guide with screenshots.
• Page Bleed: What Is It, How Much Is Needed and How to Fix It
  An easy-to-understand explanation of why bleed is needed and how much you need.
• Adobe InDesign Tips
  Tips on setting up bleed and exporting to PDF in InDesign.
• Illustrator Tips Tips
  Tips on setting up bleed and exporting to PDF in Illustrator.
• TheStandard: Prepress
  A very thorough guide from TheStandard on preparing your artwork for printing.
• PDF Basics: The File Format and Its Use in Prepress.
  Everything you need to know about preparing PDFs for prepress.
• How to Choose a Printer or Prepress Specialist
  Excellent tips from the printers themselves, put together by BoDo.
• New Uses for Old Clipping Paths
  A detailed explanation from Adobe on using clipping paths as frames in InDesign.
• Combining Metallic Inks With Color
  Useful tips on using metallic inks.
• Creative Business Cards: Uses of Various Shapes and Materials
  A showcase of different techniques and materials.

Related Posts

You may be interested in the following related posts:

• Business Card Design: Better Than A Plain Ol’ Business Card
• Business Card Design Starter Kit: Showcase, Tutorials, Templates

(al)

© Lisa for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: business, card, Design, print

Tonight at 7pm GMT we will be streaming a live video feed from our Envato Community Night here in Chicago. This will give you a chance to “hang out” with the Envato staff as we have an informal meet and greet with those who use the sites. Each site editor/manager, including myself, will make a point to come over and say hello. For those who can’t make it, we’ll record the stream for you to go back and watch later.

View Live Broadcast Here:

Sometimes certain scenes are too expensive, dangerous, or even impossible to photograph. This is when people often turn to Photoshop. In only a little bit of time, you can create a very realistic looking image. Today we will be learning how to create an eerie underwater scene. So, get your scuba gear on and let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• Bubble Brush
• Ocean Background
• Shark
• Turtle
• Coral

Step 1

We are going to first open up the background ocean image, as this will dictate how large our canvas is going to be. You can do this by either dragging and dropping the image icon onto your Photoshop icon, or go to File > Open.

Step 2

Once the background is opened in Photoshop, go to: Image > Image Size. In the popup box, we are only going to modify the Width. Set the width to: 630px.

Step 3

Before you can modify the background image, you are going to need to unlock it. We can do this by double clicking on the layer in the layer panel and by clicking "OK" on the "New Layer" popup.

Step 4

Once the background is unlocked, you can go ahead and drag it down, just until the bright rocks on the bottom are no longer visible. This will allow us to add more water to the top portion of the image. Grab your marquee selection tool and select the bottom portion of the image up to below the waves in the water, and then click the "mask" button in your layers panel.

Step 5

Select the top portion of the water and click "Cmd/Ctrl + J" on your keyboard to duplicate the selection to a new layer. Move the layer up just slightly and scale it upwards just so it covers about half of the transparent portion of the canvas.

Click "Cmd/Ctrl + J" one more time, to duplicate that layer. Take this layer, and move it upwards until it reaches the top of the canvas. Don’t worry about the water looking a little stretched. That won’t be noticeable once we are finished.

Step 6

Now that we have the background filled in, we have to work on the bottom edges of the new layers that we created in the last step. We can do this very simply by using layer masks once again. We do this by clicking on the layer in the layers panel and then click the "mask" button. A new thumbnail image of a white box will appear next to the layer thumbnail.

You will now need to select a midsize brush with a hardness of 0%. We are going to use this brush to gently paint the bottom portion of the selected layer. By doing this, it will make the layer blend in. You will have to repeat this step for both of the water layers.

Step 7

Import the Shark image. You can do this by going to File > Place and navigating to the shark image. Or you can just simply drag and drop the image from your folder directly onto your Photoshop document. Once it is imported, scale the shark to size, and then place it on the right side of the image about halfway up the image.

Step 8

Now it’s time to remove the background from the shark image. We are going to do this exactly like we did in step 6, with the mask tool. Click on the shark layer and then click the "mask" button in your layer’s panel. With a small brush slowly erase around the entire shark, removing the background. The closer you get to the shark, the better the final image will look.

Step 9

You can leave the shark as-is, but I prefer to give the shark more of a gray look. We are going to accomplish this by creating 2 duplicates of the shark and modifying them slightly. First step is to select your current shark layer and changing the Blending Mode to "overlay". You can do this by clicking the box with the word "Normal". This box is located at the top of your layers panel.

Duplicate that current layer (Cmd/Ctrl + J), change the Blending Mode to "Hard Light". We are going to want to "Desaturate" this layer. You can do this simply by clicking "Cmd/Ctrl + Shift + U", or you can do it the hard way by going to Image > Adjustments > Desaturate. This will turn the image black and white. Duplicate the desaturated layer (Cmd/Ctrl + J) and change the layer mode back to "Normal", but this time change the "Opacity" to 60%.

Step 10

Now it’s time to give the background a dark eerie look. Create a new layer above the water background layers and fill it with black. Then grab a very large eraser brush (about 1000 px) and erase the top left portion of the black background. Lower the opacity of this layer to about 65%. Create one more layer and fill it with black. Using the same size eraser brush, erase the top right portion of the layer. This time lower the opacity to 80%.

Step 11

We now have 8 layers in our layers palette and it is looking a little sloppy. We can quickly organize it by selecting the 3 shark layers and clicking "Cmd/Ctrl + G". This will create a new folder with those layers in it. Lets do the same for the 5 background layers (2 black layers and 3 background image layers).

Step 12

At this point, our scene is looking pretty empty. Lets fix this by duplicating the shark and giving him 2 friends. Select the "Shark" folder and drag it down to the "New layer" icon on the bottom of the layers palette. Go ahead and add one just above the current shark and then another on the left side of the canvas. Mess with the opacity and scaling of the shark to give the sharks more "depth".

Step 13

Now that the sharks are all placed, we need to give them a couple of friends, turtles. Go ahead and load the turtle image into Photoshop, exactly like you did with the shark image. At the moment, the turtle is swimming towards the left. We are going to flip the image horizontal so the turtle is swimming towards the right. We can rotate the image horizontal by going to Edit > Transform > Flip Horizontal.

Step 14

We need to now remove the background from the turtle image. We do this the exact same way as we did with the shark. Create a layer mask and then just paint around the turtle. This time, we want to leave a little bit of the coral that is under the turtle. You also want to mask a small amount of the background on the edges of coral. This way there are no hard edges.

Step 15

As you can see, the turtle stands out pretty badly. We need to do pretty much exactly like we did with the shark. Set the turtle layer’s blending mode to "Overlay" and set the opacity to 60%. Duplicate the turtle layer by clicking Cmd/Ctrl + J. Then set that layer to "Hard Light" with an opacity of 100%. As you can see, the turtle is standing out still, we need desaturate that layer. You can do this by clicking "Cmd/Ctrl + Shift + U", or going to Image > Adjustments > Desaturate.

Step 16

One final step for the "Hard Light" layer, is to slightly mask the bottom portion of it. We can do this by clicking on the "mask" thumbnail on the layer. Then with a black brush with the size of about 300px and a hardness of 0%, gently paint the bottom half of the turtle and coral. This will help make the turtle and coral blend in with the background Now, take both of those layers and put them into their own folder called "Turtle / Coral". You can do this by selecting both layers and clicking "Cmd/Ctrl + G".

Step 17

The turtle feels a bit out-numbered because there are so many sharks, so lets give him a friend. You can make a copy of the turtle, just like we did with the shark, by dragging it to the "new layer" button at the bottom of the layers pallet.

The problem with just cloning the turtle is that it has the little bit of coral at the bottom of the image, so we are going to have to remove that. Rather than redoing all of the previous steps, we are going to just add a layer mask to the folder. You can do this by clicking the folder, and just like with a layer, you click the "mask" button at the bottom of the layers pallet. With the mask created, paint away the rest of the coral with a small brush. Now, you can place the turtle at the upper left corner of the canvas. I recommend scaling, rotating and lowering the opacity to give it some depth.

Step 18

There is one more image for us to work with. This will just be repeating the exact same steps as the turtle. Go ahead and load up the Coral image and place it on the lower right corner of the canvas. Mask out the background, just like we did with the other images. With this image, all we have to do is change the layer Blending Mode to "Overlay" with an Opacity of 40%.

Step 19

Now that we are done with the images, we can begin adding a little detail. We are going to add bubbles to the water, to give some character to the fish. First, we will have to load the bubble brushes. You do this by right clicking the canvas. In the brush selection pop-up, click the arrow on the top right, go down to "Preset Manager." In the "Preset Manager" window, make sure your Preset Type is on "Brushes", then click on the "Load" button and load the brush file.

Step 20

Your brushes are now loaded, but painting 1 bubble at a time would take way too much time. We can save time by simply modifying the brush. Click "F5" to open your brush menu, or go to Window > Brush. Select the bubble brush with the number "690." In this window we are going to do the following: Size: 6px – Spacing: 210%. On the left, click "Shape Dynamics." Size Jitter: 30% – Minimum Diameter: 10% – Angle Jitter: 10% – Roundness Jitter: 20% – Minimum Roundness: 25%. On the left, click "Scattering." Scatter: 1000% – Count: 1 – Count Jitter: 18%. You don’t have to worry about any other settings.

Step 21

Now that your brush is set, create a new layer and make sure your brush color is white. Then paint the bubbles. I like to give 1 to 2 rows of bubbles (vertical rows) by each mouth and gills. You can also add a few in the background. Pretty much anywhere you feel bubbles should be placed. Feel free to play with the brush size. Once your bubbles are brushed, lower the bubble layer’s Opacity to about 20% to 30%.

Step 22

We need to go back to a "default" paintbrush. You can do this by right clicking the canvas and in the brush selection menu, just select one of the round brushes at the top. Set the size to about: 35px and make sure the hardness is 0%. Create a new layer and make sure your brush color is white. Now, we are going to paint "rays" coming from the top right of the canvas.

Step 23

We need to now make the sunrays blend in quite a bit better. First step is to add noise to them. You can do this by going to Filter > Noise > Add Noise. Make the amount 16%. Then add Gaussian Blur. Filter > Blur > Gaussian Blur. Make the Radius 22.0 pixels. Lower the layer Opacity to about: 20%. If you feel that the light rays are a little too "heavy", you can create a layer mask, and gently mask out certain portions of the rays. For example: the bottom edges, and parts that intersect with the fish.

Final Image

Congratulations, you have successfully created an eerie underwater scene.

Now would be a good time to explore a part of the AppStorm Network you’ve never seen before!

Best of iPhone.AppStorm

Best of Web.AppStorm

Best of Mac.AppStorm

Share Your Ideas

Is there something in particular you’d like to see on the site next month? We’d absolutely love to hear your suggestions for articles, topics and giveaways – just let us know in the comments. Thanks for reading AppStorm!

  

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

1. The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
2. The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

“Shelf”-navigation.

Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Bold color and traditional navigation.

Summary

In sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.

Related Posts

• Showcase of Modern Navigation Design Trends
• Showcase of Beautiful Vertical Navigation Designs
• The Case Against Vertical Navigation
• Navigation: Menus, Trends and Examples
• Showcase of Well-Designed Tabbed Navigation

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.

© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: navigation, showcases

  

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

• download the set (.zip, 6 Mb)
• step-by-step tutorial and guide
• release on developer’s page

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Screenshots

Containers and Dialogs. Large view.

Controls. Large view.

Navigation. Large view.

Galleries. Large view.

Social Web. Large view.

Browser window. Large view.

Application window. Large view.

Lightbox. Large view.

Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

Related Posts

You may be interested in the following related releases:

• The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)
• Free Medical Icons Set (60 Icons)
• Yummy! Free Food and Cakes Icon Set (20 Icons)
• Quartz Icon Set (90 clean sharp icons)
• gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: downloads, Freebies, templates, wireframing

Out of Bounds (OOB) is an interesting photo effect where the object or scene in the image seems to jump right out of the photo or its borders. It is a photo manipulation technique to add an illusion of 3-dimsnsionality to a flat photo. Getting an interesting OOB effect depends largely on the photo angle and the overall execution of the concept. It is lots of fun to create an OOB effect. You can use any photo editing software such as Photoshop or Gimp. With some imagination, creativity and basic photo editing knowledge you can create an amazing OOB image that captivates the viewer’s attention. This article showcases 50 most spectacular examples of Out of Bounds photo effects. We have also featured some excellent tutorials if you are interested in learning how to create this effect in Photoshop. So lets venture into this mesmerizing world where you will find creatures, people, and vehicles jumping right out of the screen.

• 50 Captivating Out of Bounds Creations
• Tutorials on Out of Bounds Effect
• Further Resources

50 Captivating Out of Bounds Creations

The Train

Lizard Popping Out

Get Me Out

Get Me Out is an amazing surreal styled Out of Bounds effect. The old antique photo frame, the expression of the subject and the clever use of lighting and shadow gives the entire image an extra dimension and adds a surreal effect. You can easily create a photo effect like this with a great original image, some stock resources, if necessary and with the effective use of Photoshop . Some of the tutorials featured at the bottom of this article can also guide you to create a surreal Out of Bounds illustration.

Bridge

Napoleon

Wildlife Book

You would not want to read a wildlife book where animals come out of the book! The concept of creating an Out of Bounds effect with the book is brilliant. The idea is beautifully executed.

VROOOOOM!

You might have seen many Out of Bounds effects with a car jumping out of photo frame, but this one is fantastic. The dust, the tire tracks and the whole execution of the concept adds action and depth which makes the outcome realistic.

Dress Lady

Fish – Out of Bounds

Snake Book

Snake Book is another very unique and original idea where the subject, a snake in this case, is shown coming out of magazine’s page. It is amazing to see how 2 different images (a book and a snake image) are put together and how the whole composition is given an Out of Bounds effect.

Holding Hands

Holding Hands is a clever example of what you can do with Photoshop. The concept is brilliantly executed with five different images of hands pulled together to create a simple yet incredible piece.

Bridge To Somewhere

Hungry Snail

A cool Out of Bounds effect of a snail coming out of a photo for food. In this meticulously executed idea, four different source images are used and they work really great together.

Hang On

Taking Off

The Escape

The idea of television sinking in the sea and the cute joyous fishes jumping out of its screen makes The Escape a visually appealing piece of Out of Bounds photo effect.

Sports Gallery

Escape in Time

Cave Nymphs

Out of Boundry

Possible with Photoshop

Slides

Slides is an amazing and unique style of Out of Bounds effect with the creatures coming out of slides. The little details like water drops and dirt really add to the over all image and keeps the viewers attention.

Interactive

That is one smart monkey who can jump out of photograph for food, a very interactive piece indeed.

Waterfall

Humm, Pizza

It wouldn’t be wrong to say that Humm, pizza is a drooling and mouth watering Out of Bounds effect. If you ever wished you could eat your favorite food directly from an advertisement or photo, you can do that with Photoshop.

The Lady Loves Chocolates

And if you think pizza isn’t enough, here are some chocolates.

Zodiac

Honeymoon

Honeymoon is a cool romantic example of Out of Bounds effect. The expression on the face of subject, the way he is jumping out of frame, the colors of the image and the background scene makes it an awesome piece of work.

OOB Guy

Battle

Out of Bounds – OOB Art

Loves Me

Surfing

Pulling Crackers

In Pulling Crackers, subjects are coming out of hinged picture frame. The soft pastel colors of the images in frame and all the decoration around it makes it a beautiful piece.

Internet Kiss

Riding China Style

Living Art

The Easy Way

Photoshop Solutions

A creative way to solve water shortage problems.

Comming Out Clean

Spiderman

Reaching Out of Bounds

Catch of the Day

Bubbles

Sticking Out

Snail

Beer

Hold Yourself Together

This actually is not an out and out photo manipulation but a drawing done with a graphite pencil from a reference. The style of this portrait is really very creative, all the pieces of polaroids with the hands holding them makes the concept an interesting Out of Bounds artwork.

Little Artist

Bridge

It is impossible to not get inspired and fascinated. Well, I also created one Out of Bounds effect.

Tutorials on Out of Bounds Effect

Create an Out of Bounds Fantasy Illustration

This fantastic tutorial from Psdtuts+ shows you how to create an Out of Bounds fantasy illustration where you create a painting on a wall which is a real world. It guides you through the process of creating a fantasy scene, making water pour out of a painting. You can create this surreal illustration with the use of absorption effect, colors and a variety of stock resources. You can also watch a video tutorial complimenting this text and image tutorial. If you have never experimented with surreal concepts in your artworks and want to incorporate it, we have an excellent Creative Sessions’ article, Incorporating Surrealism Concepts into Your Digital Artwork to guide you.

Out-of-Bounds

A simple and easy tutorial that can get you started with Out of Bounds photo effects. This tutorial shows you how after carefully analyzing the image you should decide where the best perspective is for the frame (the part that will set it out of bounds), how to hide the part of image with Layer Mask and how to add the shadows to add the extra dimension to the image.

Create an Out of Bound Photo in Photoshop

This easy to follow tutorial shows you how to create Out of Bounds photo effects in Photoshop using the Polygon Lasso Tool, Warp Effect and how you can tweak the colors using color saturation levels.

3D Border Breakout

A detailed step-by-step tutorial on how to create an Out of Bounds effect. This tutorial also shows you how to give the illusion that the subjects are jumping out of the picture by adding depth through perspective, shadows and some imagination.

Photos Out of Bounds

Here is a fun Photoshop tutorial that shows you how to make a picture jump out of the frame into another photo. You’ll use two images for this tutorial, Pen Tool to extract the part of image, Transform Tool to set up perspective and Layer Styles for more effects.

Using Photoshop To Make an Image Jump Out of Frame

The following tutorial teaches you how to create an Out of Bounds photo using basic Photoshop skills to isolate the target, giving it a realistic look with proper perspective and other effects. It highlights the importance of choosing the right photo to get a true 3D effect.

Create an Out of Bounds Surreal Photo Manipulation in Photoshop

This tutorial is a detailed walkthrough of an artwork, which shows you how to create a surreal out of bounds effect in Photoshop. The tutorial uses variety of stock images and highlights the advantages of adjustment layers and how important they are to create a intense photo manipulation. In this detailed step by step walk through it is interesting to see how the subject, a shark in this case is shown coming out of antique photo frame and how the photo manipulation is given a realistic look using various Photoshop tools and effects.

Midnight Magic Scene Creation in Photoshop

This again is a very interesting tutorial if you want to show a subject coming in or going out of TV screen and a big photo frame. This tutorial demonstrates how you can give a dramatic effect to the scene by using Blending Modes, Layer Styles and Photoshop Filters.

Photo Cutout

This tutorial demonstrates a very simple technique where the subject is extracted from the image using Extract tool and a clever use of Layer Mask to hide the part of image to create a effect that makes the subject look like it’s coming in or out of a photo. In this tutorial you will learn how to use Photoshop’s Extract tool, Layer Masks and Layer Styles to create a cutout from a photo.

Out of Bounds Photoshop Action

And finally, a bonus! This actually is not a tutorial but a Photoshop Action which simplifies the steps needed to create the impressive Out of Bounds photo effect. The Action allows you to define the border size, the perspective of the image, the out-of-bounds areas and you can also add the shadow effects. The action is very flexible and makes use of layer masks, which allows you to fine tune the effect at a later stage. There is also a video that guides you through the process of using this Photoshop Action to create an amazing OOB photo effect. At Panosfx you will also find some more great Photoshop Actions.

Further Resources

As you work through above tutorials to create an OOB effect (or any photo manipulation) it is essential to know some of the basic Photoshop techniques like working with Layers, Layer Masks, Selection and Transform techniques. Below we have listed the links to some of those tutorials.

• Working with Layers in Photoshop
• Unveiling Photoshop Masks
• A Basic Guide to Photoshop CS4 Adjustment Layers
• A Comprehensive Introduction to Photoshop Selection Techniques
• Using Transform in Photoshop
• Photoshop 101: How To Use The Free Transform Tool
• 10 Steps to Improving Your Photoshop Skills
• 30+ Useful Resources for Improving Your Photoshop Efficiency

With iMockups for the iPad, moments like these are a thing of the past. Now you can create incredible mockups quickly and easily – and in the next release even post process and share them with other iMockups users!

Target Audience

iMockups is geared mainly towards web designers who need to visualize an idea quickly, either for themselves or for a client. The app offers a wide range of elements used in layouts (image, video & text placeholders, containers to block space, lines to separate content etc).

It now also offers GUI elements used for interface design, specifically the iPhone and iPad. It’s less geared towards visual app development, but more towards how a website could look on the mobile device.

Getting Started

When first loading iMockups, the app doesn’t look like much. Only after creating a new project will you see where the magic happens. The canvas in the middle is framed by the project view on the left where you can see all the pages associated with a project (eg. Home, Services, Portfolio, Contact) and the tools palette on the right.

In the current version the tools for web, iPhone and markup are handily divided into separate sliders, making it much easier to find what you’re looking for.

Canvas, project pane and tool palettes

Before you start your mockup, spend a second to decide whether you want your content to be distributed mainly horizontally or vertically on your website. You can easily adjust the size and orientation of the canvas by tapping the respective preview page on the left pane and then choosing canvas size. You can choose from three templates (small, medium, large) or set your own size.

Setting up your canvas size and orientation

Starting on a Blank Screen

Now that you’ve set up your project, you simply start by dragging and dropping elements (tools) from the right onto your canvas or by tapping them once in the tools palette. By tapping and holding an element on the canvas you can move it around.

Conveniently, iMockups presents you with orange guides that pop up when elements align (and for some reason they are impossible to capture in a screenshot). Sometimes it can get a bit tricky to place an element just right. That’s where the inspector comes in: double tap an element and then use the X/Y coordinates for placement or the W/H (width/height) fields for adjusting size.

Using the inspector for fine tuning

You need to use two fingers to move the canvas. Using one finger will move only the element that was selected last.

Ease of Use

In case you need to select multiple elements, for example to group them, just tap and hold down two fingers until a blue area appear between your fingertips. By moving your fingers around, you can adjust the size of the area and which elements it includes.

That way you can easily group elements that belong together. That comes in very handy when you need to move a group of elements around or if you want to replicate them quickly. Once you find the perfect spot for an element, lock it, thereby avoiding moving it accidentally.

Quick commands

There are also a number of other commands easily accessible by tapping on an element. One of the best time savers is the clone command which replicates an element instantly. If you copy an element, you can paste it onto a different page, which is especially helpful if there are design elements which repeat on multiple pages.

Another time saver is the built-in “lorem ipsum” generator. Most designers will rely on filler text to test layouts, and it’s incredibly helpful to have it in iMockups. It takes a couple of tries to figure out what the difference between the text options is, but once you’ve mastered them, you can quickly create headings and paragraphs to fill your layout.

Headings do not have line breaks while paragraphs do; lorem ipsum is pre-made text which expands when the containing field is enlarged, but you can’t change any of the text; links are the only underlined text.

Importing Images

A new feature to iMockup is the ability to import images into your designs. I use this feature in one of two ways. On the one hand, some images in a layout can help the client to better understand what you are trying to show. In my experience, clients can rarely think in the abstract shapes we designers can and have trouble to visualize the final look.

On the other hand, you can also use a screenshot as a blueprint for a layout (if you want to analyze the elements used or build on top of an existing site). Unfortunately, iMockup can’t properly scale images up to their original size during import (they start to pixel), but it’s ok for basic guidelines.

Once You’re Done

After having created your mockup, you can admire it full screen by making both the right and left pane disappear. If you’re satisfied with your work, you can choose between two export options: export page or export project.

Both options give you the choice of either saving your layout as an image to your photo gallery or emailing a PNG. The difference with exporting a project is that it automatically saves all the different pages without forcing you to do so manually.

Final layout

Verdict

iMockups is an incredibly useful tool for people who often need to layout web sites and share their mockups. It is easy to use once some of the app’s peculiarities are understood, and there’s always the help section to guide you.

The developers are very active and responsive to the community of users, pushing out regular updates and implementing requested features like the ability to import photos. The next release will feature even more icons (shapes like arrows, stars, etc) to give diversity to layouts, and it will enable you to share your mockups among other iMockups users and edit them.

Overall, the app delivers great value for the price!

  

If you work as part of an in-house Web team, you have my sympathy. If that in-house team is within a large organization, then doubly so. Being part of an in-house Web team sucks. Trust me, I know. I worked at IBM for three years and now spend most of my days working alongside battle-weary internal teams.

Web designer trying to hang himself.

It’s hardly surprising that most in-house teams are worn down and depressed. They face almost insurmountable challenges:

• Departmental feuds
  Too often, a website becomes a battleground for pre-existing departmental conflicts. Political power plays can manifest themselves in fights over home page real estate or conflicts over website ownership. After all, is the website an IT function or a marketing tool?
• Uninformed decision-makers
  Rarely does an internal Web team have the authority to make final decisions on a website. Instead decision-making happens higher up in the organization. Unfortunately, although these individuals have more authority, they do not have greater knowledge of the Web. Decision-making is often based more on personal opinion than the needs of users or business objectives.
• Committees
  Committees are the curse of larger organizations. The bigger the organization, the more the number of people who want their say, and that leads to committees. Unfortunately, committees inevitably lead to compromise and design-on-the-fly. Both are the kiss of death to any Web project.
• An inward perspective
  Becoming institutionalized is very easy in a large organization. Eventually you speak an internal language and think in terms of organizational structure. This proves problematic when communicating to end users. Not only do most large organizations have their own internal perspective of the world, some individuals even think departmentally, further aggravating departmental conflict.
• Endless scope creep
  When an in-house Web team is constantly available, calling on their help is easy. This is both a benefit and a curse. The truth is that many Web teams are taken for granted, and websites that should never exist are built and launched because there are no constraints. Worse still, good projects can be drowned as “internal clients” keep demanding additional functionality that the Web team cannot block.
• Problem people
  The bigger the organization, the higher the chance they will hire a jerk. If you work for a large organization, I can pretty much guarantee you have someone in mind as you read this. These people can really hinder the work of the Web team and prevent a website from reaching its full potential.
• Glacially slow progress
  With endless red tape and painful committees, getting stuff done in a large institution can be nearly impossible. It is not unusual for projects to grind to a halt entirely because they become dependant on other systems or projects yet to be implemented. I have even seen something as simple as the roll-out of a content management system take years to implement.

With the odds stacked so high against them, I am surprised in-house Web teams get anything done at all. Their success depends as much on their ability to navigate politics and bureaucracy as it does on their skills as designers and developers.

But do not despair. I can tell you from the over-subscription to workshops I have run on the subject that you are not alone. This is a universal problem and one that can be overcome, as I will outline in this post.

Our Web design agency specializes in complex projects. During my time there, I have developed certain techniques that will hopefully help others keep their Web projects moving.

Let’s look at four areas in particular:

• Improving how your team is perceived within your organization,
• Overcoming politics and problem people,
• Ensuring that a project gets approval from the powers that be,
• Delivering work within scope and on time.

Let’s begin by addressing how Web teams are perceived.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Improving How Your Team Is Perceived

In too many organizations, the Web team is considered the lowest of the low. It looks like something straight out of The IT Crowd.

This is all the more bizarre considering that websites themselves are perceived as being important. Somehow there is a disconnect between those who produce websites and the websites themselves.

This poor attitude toward Web teams boils down to two beliefs:

• The Web team is a road block that needs to be detoured.
  Many large organizations find themselves frustrated by their internal Web teams, seeing them as people who constantly block their more “imaginative” ideas and set restrictions on what they can and cannot do online.
• Web team members are implementers, not experts.
  Management perceives Web team members as “techies,” there to implement the ideas of others. They are in no way perceived as experts who are capable of advising on strategy.

Fortunately, much can be done to overcome these beliefs. For a start, improve your communication skills.

A disturbingly cheerful Web designer.

Communicate Better

Most internal Web teams are terrible at selling themselves. If they were a Web agency, they would be out of business in a few weeks. Perhaps that is their reason for working in-house. But despite what you may think, most internal Web teams could desperately do with communicating and selling better.

To overcome the negative impressions people have of your team, you need to actively promote yourself and the work you do.

Here are just a few ideas to try:

• Hold launch events.
  When was the last time you celebrated the launch of a new feature or the redesign of your website? Holding a launch party is a great way to shout about your successes, and it’s fun, too. Email colleagues, telling them how excited you are about the completion of your latest project, and invite them to celebrate with you. Everyone loves free food, and it’s a great chance to show off your work.
• Publish a monthly newsletter.
  How will anybody know about the great work you do if you don’t tell them? One way to do this is through a monthly newsletter that features work you have been doing and cool stuff happening online. This is a great way to both increase your profile and educate people on the power of the Web.
• Report successes to management.
  Management needs to be regularly informed on traffic levels, dwell time and conversion rates. If you don’t have any calls to action to track conversion, get some. If you have no way to measure success, then the team is simply a drain on resources. Demonstrate that you generate income, rather than just spend it.
• Offer training courses and workshops.
  Part of your role as in-house Web team should be to educate those in the organization about the Web. I’m talking not just about technical training on using the CMS, but rather more general training about the Web and how it can benefit your business. Sessions like this not only educate internal stakeholders, but also increase your credibility and establish you as the expert.
• Hold regular meetings with website stakeholders.
  Set up regular meetings with those who most often use the website. Talk to people such as the head of marketing, sales and IT. Meet with front-line staff who answer customer support queries or those who work with suppliers. These meetings build relationships across the organization and demonstrate that the Web team is always looking for ways to help the business.

By improving communication within your organization, you significantly improve the perceived value of your team.

Create Value

There can be little doubt that internal Web teams are undervalued. As an external consultant, if I say exactly the same thing to management as the Web team, management will listen to me and ignore its own people. This is largely because as an external consultant, the cost of my advice is more evident. They listen to me because they are paying me in a very visible way.

Of course, they are paying as much (if not more) for their internal Web team. But that cost is not as evident and so is not valued as highly. The way to increase the value of your team is to make that cost more visible.

People are less likely to ignore your advice or waste your time if they are obviously paying for your advice or time. The way to establish this kind of value is to cross-charge for your work between departments. Have an internal charge-out rate based on salary, infrastructure, training, etc., and then price any new work coming into the department based on that rate.

This not only makes your value obvious, it also makes “internal clients” think twice before asking you to build some ill-conceived project just because you’re “free.” Nothing will change perception more than making them pay for your time.

Man holding a briefcase of money saying nothing is free, not even your internal Web team.

Of course, you might not be in a position to cross-charge. But that doesn’t mean you can’t go through the process of setting rates and costing projects. When you receive a request for work, respond with a breakdown of tasks, how long it will take and how much it will cost the company based on your charge-out rate.

While not as compelling as charging for work, it still drives home the point that your time is valuable. It might also make them think twice before suggesting a project, especially if they know that pricing will be included in your report to management.

Finally, keep track of the time you actually spend on projects. This will help with scope creep (see below) and show management how efficient you are.

Of course, cross-charging can be perceived as another blocking tactic, reinforcing people’s negative opinion of your team. Therefore, balance this with a positive and helpful approach…

Be Positive

No offence, but most of the in-house Web professionals I meet are a miserable lot. Okay, that was probably offensive. Still, it shouldn’t come as a surprise. With so much negativity aimed at Web teams, some of it is bound to rub off on them. It is up to you to keep the website on course, and that involves telling people “No” or putting constraints on what they can do. The problem is that this damages relationships and eventually forces people to bypass you, often by outsourcing to agencies such as mine!

However, you don’t need to say no to people or even constrain them with rules. Take my situation, for example. When clients pay me, I don’t have the luxury of saying no. I have to be Mr. Positive, or they’ll just find someone else.

The next time someone asks you to implement a stupid idea on the website, try to be positive. Praise positive aspects of the idea (if there are any), and encourage the “client” to explain their thinking behind the rest. Often you will find something workable in the idea.

Even when the idea has no redeeming feature, there is still no need for you to say no. Instead, explain the probable consequences of the idea to the client, and guide them to the point that they reject it themselves. The problem with “No” is that it is a dead end. It leads only to confrontation. By focusing on the positive and educating the client on the consequences of their suggestion, you create an open and honest conversation.

The process of educating the client on the potential pitfalls of their suggestion also demonstrates your expertise…

Become the Expert

The ultimate aim of improving your reputation is to establish yourself as an expert. If people see you in that way, then they will listen to your opinions and follow your advice. But if your reputation is already damaged, coming to be seen as the expert is hard.

One way to be perceived as an expert is by association. This comes in two forms: referring to another expert or having an expert refer to you.

Referring to an expert is easy. If you have no credibility in the eyes of internal stakeholders, borrow the credibility of others. For example, the next time a client asks you to put all content above the fold, don’t just tut and say that it’s a stupid idea. Instead, refer to a study on the subject, such as one of the several by Jacob Nielsen. This lends weight to your argument and demonstrates that you are well read on the subject.

The second approach is to get an expert to back you up. Essentially, this is the very reason why I am hired by many Web teams. I am brought in to reinforce the arguments they have been making all along. Because I am perceived as an expert and support what the Web team says, I add creditability to the team and increase their expertise in the eyes of management. It’s ridiculous, but it works.

Web designer suggesting a better way of working.

Finally, don’t try too hard. A true expert demonstrates their knowledge but is not afraid to admit their limitations. They are confident enough to challenge wrong thinking, but not arrogant or aggressive. I speak with too many in-house Web developers who come across as sneering and condescending because they believe they are above everyone else.

While improving your reputation will go a long way to pushing your projects forward, it is not the only hurdle to overcome. No matter how respected you are, there will always be those with agendas that interfere with the smooth running of your website…

Overcoming Politics And Problem People

Politics are unavoidable in large organizations, and yet most of us consider ourselves above them. We claim not to play politics, and we moan about those who we perceive do. But in reality, we all do it. We all have an agenda and want our point of view to be taken seriously. To believe otherwise is naive.

Ultimately, having a holier-than-thou attitude to internal politics is damaging. If you refuse to deal with those who play politics and avoid pushing your own agenda, you will only damage the website.

To get things done in a large organization, don’t shy away from playing the political game. As the saying goes, if you can’t beat ’em, join ’em.

While we’re citing aphorisms, another one is, keep your friends close…

… But Your Enemies Closer

One of the biggest mistakes people make with problem people is avoiding them. A far better strategy is to keep them close. The problem with avoiding your “enemies” is that you are entrenching their position. If they know you are hostile towards them (and trust me, they’ll know), then they’ll become even more hostile towards you. Eventually, the arms race of hostility will get out of control.

A better approach is to keep talking. Meet with them regularly. Ask them what they want from the website? Look for ways to build bridges. Listen to what they say.

Some individuals only want their voice to be heard. As long as you listen and make them feel important, they’ll go away happy. Also, let them win whenever possible. It may dent your pride, but that is a small price to pay for winning the war.

A client refuses to sign off a design.

On the topic of war…

Avoid Confrontation

When I suggest that you meet with problem people regularly, I’m not setting the scene for a monthly showdown. In fact, avoid confrontation whenever possible, especially when other people are around. No one wants to lose face in front of their peers, which is why people become entrenched in their views in group settings.

Instead, use the tactics I spoke of in relation to being positive. Use the question “Why” as a way to encourage people to think through their position. Encourage positive contributions with praise, and explain their consequences in the gentlest language possible.

Finally, when you are criticized in a group setting (such as a committee meeting or group email), take a long deep breath before deciding whether to respond.

In my experience, there is little point in becoming defensive or, worse, retaliating. Most of the time I don’t say anything at all. It’s amazing how often someone else will leap to your defence if given the chance. Better that they say how great you are than saying so yourself!

Of course, it should never come to that, especially if you learn to empathize with problem people…

Learn to Empathize

As Web professionals, we pride ourselves on our ability to empathize. We go to great lengths to get into the heads of our users and understand what they want to achieve and how to motivate them. We have become experts at nudging users towards the goals we want them to complete.

Interesting, then, that we totally fail to demonstrate this ability with our colleagues. Instead, we often dismiss them as stupid or “not getting it.” This kind of narrow-minded attitude causes many of the problems we encounter. Take the time to really understand your colleagues. What makes them tick? What problems do they face in their jobs that the Web could solve? What pet subjects could we use to nudge them in the right direction?

If we tried to empathize with our colleagues and understand their psychology, we would find internal politics much less painful.

A Web designer talking to a client about his problems.

Stay tuned for the second part

The second part of this article will be published soon here, at Smashing Magazine. Please stay tuned for our updates: subscribe to our RSS-feed and follow us on Twitter.

You can also check Paul’s workshop that he ran on the topic of this article.

Related articles

You may be interested in the following related posts:

• Passing The Holy Milestone: How To Meet Deadlines
• Renegotiating The Contract (And Other Tales Of Horror)
• How To Successfully Educate Your Clients On Web Development
• Dealing With Clients Who Refuse To Pay

© Paul Boag for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Recreating electronic devices in Photoshop is a great way to learn. Today, we will demonstrate how to create a Motorola Droid style phone in Photoshop. Let’s get started!

Step 1

Start by creating a new 2000 x 2000 px canvas and save it as "phone.psd." Use the Pen Tool to the outer silhouette of the device. Make sure it is black. Name it MAIN BG.

Step 2

With the Pen Tool, draw a shape for each main section of the phone. Notice that we are leaving a small gap between the shapes to give the illusion of separate parts. Organize your shapes in groups ( Cmd/Ctrl + G ), and rename the layers as seen below.

Step 3

Now make the side of the phone and again organize and rename them as shown below. It is very important to keep your layers organized because this project requires many layers.

Step 4

Now that we have defined the main parts of the phone, let’s start adding some shading. Double click the "Front / bottom / 1" layer , and apply a Gradient Overlay with the settings shown on the image below. Drag the mouse onto the canvas, and with the Layer Styles Window open and Gradient Overlay selected, reposition your gradient.

Step 5

Duplicate the "Front / bottom / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and apply a Gradient Overlay and Inner Shadow with the settings shown on the image below. Press OK.

Step 6

Close the "Front / bottom" group. Select and double click the "Front / center / 1" layer. Apply a Gradient Overlay with the same settings on the picture below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 7

Duplicate the "Front / Center / 1" layer (Cmd/Ctrl + J), rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the following image. Press OK.

Step 8

Close the "Center Group" and select the "Front / Top /1" layer. Double click it to apply the Gradient Overlay with the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Remember you can drag on the stage to move the gradient while the Layer Style Window is open and Gradient Overlay is selected.

Step 9

Duplicate the "Front / Top /1" layer ( Cmd/Ctrl + J) , rename the duplicate to "2", and double click to apply a Gradient Overlay with the settings seen on the image below. Press OK.

Step 10

Close the "Front " group, double click the "Side / Side_Bottom / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 11

Now, double click the "Side / Side_Back / 1" layer to apply a Gradient Overlay as seen in the following image. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 12

Duplicate the "Side / Side_Back / 1" layer (Cmd/Ctrl + J). Rename the new layer to "2", double click it to apply a Gradient Overlay with the settings seen on the image below. Notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the right left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 13

Duplicate the "Side / Side_Back / 2" (Cmd/Ctrl + J) layer. Rename the new layer to "3", double click it to apply a Gradient Overlay with the settings seen in the following image. Again, notice that now the blending mode of the gradient is set to Multiply because we are making a shadow (not a light) on the bottom left corner. Drag the gradient to reposition it to the corner. Press OK.

Step 14

Close the "Side / Side_Back" group and double click the "Side / Side_Center/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 15

Close the "Side / Side_Center" group and double click the "Side / Side_Top/1" layer to apply a Gradient Overlay with the settings seen on the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 16

Now, close the "Side" group, and with the Pen Tool, make the shapes for the buttons and the speaker. Make a small circle with the Ellipse Tool (u) for the microphone. For the center part of the speaker make a shape and paint it grey (bfbfbf). Organize all shapes following the image below.

Step 17

Double click the "Buttons / 1" layer, and apply the Inner Shadow and Gradient Overlay following the settings of the image below. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 18

Do the same with the "Buttons / 2" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 19

Do the same with the "Buttons / 3" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 20

Do the same with the "Buttons / 4" layer, apply the Inner Shadow and Gradient Overlay following the settings of the image bellow. Press OK. On the Layers Window turn the Fill of the layer to 0%.

Step 21

With the "Buttons / 4" layer selected, create a rectangle anywhere on the space using the Rectangle Tool (U). Rename the layer of the rectangle you just created to "All". Now select the Path Selection Tool (A), select the path of the "Buttons / 4" layer, copy it (Cmd/Ctrl + C), and paste(Cmd/Ctrl+V) it onto the path of your "All" layer. Do the same for "Buttons / 3" layer, the "Buttons / 2" layer, and the "Buttons / 1" layer. This may be a little tricky to understand, but following the image below illustrates how it is done.

Step 22

Now double click the "All" layer and apply a Gradient Overlay and Inner Shadow following the settings of the image below.

Step 23

Close the "Buttons" group and select the "mic / Mic" layer. Make sure it is Black and its Fill is at 100%. Apply a Bevel and Emboss with the settings of the image below. Press OK.

Step 24

Close the "mic" group and select the "speaker / Speaker" layer. Apply an Inner Shadow and Gradient Overlay with the settings shown on the image below. Press OK. On the Layers Window, turn the Fill of the layer to 0%.

Step 25

Now lets make the center part of the speaker. Create a new document with size 4 x 4 px. Zoom in as much as you can. With the Mask Tool (m) make a selection like in the picture below. With the Paint Bucket Tool fill the selection with black. Deselect all (Cmd/Ctrl + D) and go to the menu Edit/ Define Pattern , a window will prompt for you to write a name for the Pattern, write any name and press Ok.

Step 26

Go back to the file phone.psd and double click "speaker / Speaker center" layer. Add a Gradient Overlay, Inner Shadow and Pattern Overlay with the pattern we just created. Check the picture below for the settings.

Step 27

Let’s create the HDMI plug. Start by selecting the Pen Tool (P) and drawing the outer shape of the plug. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "HDMI plug". Then apply a Bevel and Emboss style to the "HDMI Plug / 1" layer following the settings on the picture below.

Step 28

With the Pen Tool, create another Shape over the last one, make sure its color is CCCCCC and apply an Inner Shadow Style with the same settings as those on the following image.

Step 29

With the Pen Tool, create another Shape over the last one. Make sure its color is 797979 and apply an Inner Shadow Style with the same settings as those on the following image.

Step 30

With the Pen Tool, create another Shape over the last one, Make sure its color is 343434.
And your HDMI plug is done.

Step 31

Let’s make the USB plug. With the Pen Tool, draw the outer shape of the plug. Make its color 0e0e0e. Rename it to "1" and press (Cmd/Ctrl + G) with the layer selected to make a group. Rename the group to "USB plug".

Step 32

With the Pen Tool, draw the inner shape of the USB plug. Make it black 000000. Rename it to "2". Apply the Inner Shadow, Inner Glow and Gradient Overlay styles following the image below.

Step 33

Let’s make the display screen. Start by drawing the outer part of the screen. Make it black 000000.

Step 34

Draw the inner part of the screen name it "2" and hide it. Paste the image you would like to be in the screen over the "Display / 2" layer and rename it to "wallpaper" (I am including a beautiful image with the source files in case you wish to use it). With the Cmd/Ctrl key pressed, select the Vector Mask Thumbnail of the "Display/2" layer. That will make a selection. With your "wallpaper" layer selected, press the Add Layer Mask button to hide the part of the wallpaper that is outside the screen. Now click the small chain links that appear on your "wallpaper" layer to disable the link between the layer and its mask With the thumbnail of your "wallpaper" layer selected, press Cmd/Ctrl + T to transform it, and press the Cmd/Ctrl key to distort the image you are using as wallpaper to match the phone’s perspective. Press Return key when you are done. Apply a Gradient Overlay and an Inner Shadow style to your "wallpaper " following the settings shown at the bottom of the image below. Press OK. Finally, again enable the link between your "wallpaper" layer and its mask.

Step 35

Let’s do the glare of the screen. With the Pen Tool, make the shape of the glare over your "wallpaper" layer. Rename the layer to "glare" and apply a Gradient Overlay Style following the settings of the image below. Turn the Fill of the layer to 0%. Press OK.

Step 36

Now go and download the USB, HDMI, and MOTOROLA logos. Paste them into your "phone.psd". Using Cmd/Ctrl + T to transform, and the Cmd/Ctrl key while transforming to distort your logos to match the perspective of the phone. Place all the logos in a group named "Logos". All the shapes of the logos should be color grey 959595.

Step 37

Now do exactly the same with the icons. The only difference is that you will have to draw them with your Pen Tool using a reference image. Make sure the four icons are color grey d7d7d7. Make a group with all the icons and name it "Big Icons". Do the same with the three big icons, but make them color white FFFFFF, and set their Fill to 50%.

Step 38

If you are still here with me, it means you are an extremely patient and detail-oriented person, so let’s take it a little bit further and add more detail to make our phone look even more life like. Make a new 100 x 100 px document with a black background. In the menu, go to Filter/ Noise Add Noise following the settings on the image below. Press OK. In the menu go to Edit / Define pattern, and name it "Noise".

Step 39

Go back to your "phone.psd" file. Double click the first layer you created, "MAIN BG", and apply a Pattern Overlay style with the pattern "Noise" that you just created following the settings on the image below. Press OK. This will add some texture to the plastic.

Step 40

While pressing the Cmd/Ctrl key, select the Vector Mask Thumbnail of that same "MAIN BG" layer. This will select the entire phone. Now press the "Create New Fill or Adjustment Layer" button at the bottom of the layers window and select "Foto Filter.” This creates an adjustment layer named "Photo Filter 1" over the "MAIN BG" layer. Drag "Photo Filter 1" to place it between the "USB plug" group and the "display" group.

Double click the thumbnail of the "Photo Filter 1" layer and the "adjustments" window will pop up. Apply the same settings as those on the image below.

Step 41

Using the Shift Key, select all layers and groups, from "MAIN BG" to "Big Icons", and press Cmd/Ctrl + G to make a group with everything inside. Name that group "Final Phone". Drag the "Final Phone" group to the "Create a New Layer" button at the bottom of the layers window. This will duplicate the "Final Phone" group. Select the new "Final Phone Copy" group and press Cmd/Ctrl + E to merge all layers inside that group into one layer. Rename it to "Reflected". Select the "Reflected" layer and go to the "Edit / Transform / Flip Vertical" menu.

Step 42

Now drag the "Reflected" layer to its final position. Press the "Add Vector Mask" button at the bottom of the Layers Window. Ensure you have white as your foreground color and black as your background color. Within the Mask Thumbnail of the "reflection" layer selected, drag from top to bottom. Finally, paint the Background layer with gray "c2c2c2".

Final Image