Dashed Lines

screenshot

Dashed or dotted lines are a great way to bring a little flair to your designs. They’re super easy to implement and tend to bring some old school class to a design. In Illustrator, creating a dashed stroke is as simple as opening the “Stroke” palette.

Try varying the use of the dashed line. Place one vertically in between items in a horizontal list, try just a text underline or maybe even create a complete rectangle.

You can also accomplish a dashed or dotted line using pure CSS via the border property.

Traceflow, the website shown below, is a prime example of using the dashed lines technique. Here’s a shot of their navigation area:

screenshot

Stitched

The same website shows a slightly altered version of the technique. If you bring the dashed lines in a little so that they’re offset from the edge, the result is a stitched look.

screenshot

Easy Text Lockups

screenshot

Text lockups like the one above are extremely popular at the moment. They’ll likely be a bad cliché in the near future but for now everyone seems to love them. They look like a really fancy piece of design but are actually quite easy to build. Just grab some fonts that look good together and make the line widths equal. Be sure to vary the number of words per line so that some words are larger than others and the emphasis is placed right where you want it.

Try mixing in simple but attractive graphics with the type for added interest. Notice how I actually used the double line shape of one of the typefaces as inspiration for a vertical dividing line. This is a textbook example of the principal of repetition. You should look for similar opportunities in your own work.

The thing that makes these so dang easy is that the people who created the fonts have done all the work. The aesthetic appeal is in the attractiveness of the letter shapes. This is one of the main reasons designers love typography so much. Someone else does all the work, then we toss it onto a canvas and get the credit!

Of course, all of the really great text lockups have a little more work put into them. Check out this great example from Deda.me, which showcases some nice variation with text, artwork and color. There’s also a bunch of cool hover effects at work here so be sure to stop by the site and have a look.

screenshot

Sticker Effect

screenshot

The sticker effect is so ridiculously easy that it’s silly. All you really do is take just about any image and throw it onto a background with a thick white stroke and maybe a little bit of a shadow. This is a good trick to use when you’re going for a bright, fun and retro feel. Because this technique lends itself to bright colors and interesting illustrations, it’s obviously perfect if you’re designing anything for kids.

In Photoshop, all you have to do is crank up the stroke until it looks good. For text, you might have to go in and manually fill in the negative areas in the letters, but it’s usually a super quick process.

We can see this technique in action on, of course, a sticker website! Check out the illustration below from Sticker Mule.

screenshot

A Cheap Alternative to a Good Clipping Path

This trick can also be used to solve a common design hurdle. If you’re too lazy or inexperienced to build a proper clipping path, it can be difficult to place a photo that was taken on a white background onto a dark canvas without some artifacts showing through.

Here all you have to do is make a really quick and dirty selection, then apply a thick white stroke. The result looks fairly intentional, no one will even know you suck at Photoshop!

screenshot

Headline Banners

screenshot

Want a fun way to liven up a headline? Stick it on a banner. This is another trend that is quite popular in web design today, you can find this idea all over the web.

As you can see in the image above, there are three main variations of your typical banner, all of which can be used in conjunction across a site. The first is a freestanding banner, which sort of folds back on itself on the ends.

If you’re wondering how to make the 3D effect, it couldn’t be easier. First, choose a color for the main or front part of the banner. Then choose a slightly darker shade for the side portions. Finally, create a tiny triangle and make it yet another shade darker. The three pieces are shown separated and then together in the image below.

screenshot

The other two versions of the banner are a variation on this theme. This time though, the idea is to wrap the banner around some content. You can make the banner peek out from one side as with the second example or wrap around the full object as with the third example.

The website WPCoder actually uses all three variations of the banner in its design. Here are a few screenshots of some of the elements.

screenshot

These have been created with images but it’s becoming quite common to achieve a similar effect using only HTML5 and CSS3. Check out this tutorial from WebDesignTuts for a walkthrough of this process.

Put a Photo In Your Text

screenshot

Sometimes a simple, solid color headline just feels boring. You throw a shadow onto it and maybe try to bevel it, but that kills the classic, simple look you’re going for. What’s the solution? It’s easy! Just use a photo as the background for your text.

Building one of these headlines in Photoshop is a breeze. All you need is two layers. First, type up some text and get it the way you want it. Then throw a photo over the top of it and hit Cmd-Option-G or go to Layer>Create Clipping Mask. That’s all there is to it! Now you can move the text and image layers independently and the clip will remain.

screenshot

Using CSS

You can actually accomplish this same technique in CSS through the use of background-clip:text or mask-image. Trent Walton has a brief but handy tutorial on accomplishing this very thing.

Keep in mind that if you want all users to experience the effect, you’ll have to use an image. As with most newer CSS features, browser support is spotty for these properties.

Conclusion

I hope these quick and easy design tricks have inspired you to think a little bit harder about how you can switch things up in your typical design process. It’s likely that you’ve seen these in action a thousand times but becoming aware of them will help you expand your horizons as a designer.

Leave a comment and let us know what you think! Do you regularly use any of these? Will you start now?