{"id":2857,"date":"2013-02-10T16:58:48","date_gmt":"2013-02-10T16:58:48","guid":{"rendered":"http:\/\/paulopedott.com\/paulo\/?p=2857"},"modified":"2013-02-10T16:58:48","modified_gmt":"2013-02-10T16:58:48","slug":"the-elements-of-retro-vintage-design","status":"publish","type":"post","link":"https:\/\/paulopedott.com\/paulo\/?p=2857","title":{"rendered":"The Elements of Retro (Vintage) Design"},"content":{"rendered":"

The Elements of Retro Web Design | Webdesigner Depot<\/a>.<\/p>\n

The\u00a0vintage\u00a0and\u00a0retro style\u00a0is becoming more and more popular in today\u2019s digital artwork.<\/p>\n

The use of retro and vintage themes in design is probably one of the most pervasive trends since the industry went almost completely digital.<\/p>\n

In today\u2019s post, we\u2019ll look at examples of work sourced from the wonderful\u00a0Dribbble<\/span><\/a>, which helps us focus on snippets of a piece, rather than the entire design or illustration.<\/p>\n

From here, it\u2019s possible to identify what techniques have been used and to describe how they impact the overall design. You will become familiar with these design trends and be able to replicate them.<\/p>\n

To help you, short tutorials are scattered throughout the article. We will also point you to several other useful tutorials and resources to get you started on your own vintage and retro work!<\/span><\/p>\n

1. Circles and Other Simple Shapes<\/h2>\n

Simple shapes are commonly used in vintage design. Circles are the most common, especially in branding. The examples below have been carefully selected to show you just how powerful simple shapes can be.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This lovely illustration makes use of elliptical shapes to produce a sun and is finished off nicely with a typographic effect.<\/p>\n

 <\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

Circlebox Creative\u2019s branding is based on a circle and inspired by vintage ink stamps and badges. The design is iced with floral patterns and simple typographic styling.<\/p>\n

 <\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This design is a bit different because it relies heavily on simple shapes to make it pop. The blue bar header uses a long row of small circles to create an interesting bottom edge.<\/p>\n

 <\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This vintage design, like Circlebox Creative\u2019s branding, is inspired by vintage ink stamps and badges. The identity looks like it has actually been stamped onto a piece of paper, unlike Circlebox\u2019s smooth and clean lines.<\/p>\n

 <\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

Here\u2019s another piece of branding based on a circle. The texture and the blue among all the gray really bring this design to life.<\/p>\n

 <\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

An incredibly simple piece of work consisting of two circles, a texture, some blending styles and clean typography. This piece really demonstrates the power of simple shapes.<\/p>\n

Mini-Tutorials<\/h3>\n

How to Apply a Damask Floral Pattern to a Circle Using Adobe Illustrator<\/p>\n

Applying a pattern to a circle in Illustrator is something you will probably do a lot if you explore the retro trend. The technique is similar to what Glace Cakes do for their branding (shown above).<\/p>\n

Open Illustrator, and draw a circle. Hold the Shift key while dragging your circle out to keep it round. Insert your damask floral pattern by going to File \u2192 Place.<\/p>\n

\"\"<\/div>\n
<\/div>\n

Remove any background and change the color of your newly placed pattern. You can select individual items by using the Direct Selection tool.<\/p>\n

\"\"<\/div>\n
<\/div>\n

Select your pattern using the Selection tool and then go to Window \u2192 Pathfinder to open up the Pathfinder window if you haven\u2019t already. Hold the Shift key and select your circle to select both of your items at the same time. Click the \u201cMinus Front\u201d button in your Pathfinder window to remove the floral pattern that lies outside your circle. Play with your color choice, and you\u2019re done!<\/p>\n

\"\"<\/div>\n
<\/div>\n

Creating a Bubbled Line Using Adobe Photoshop<\/p>\n

Let\u2019s create a bubble-like line like the one in the example above.<\/p>\n

Using the rectangular marquee tool, drag a selection and fill it with black on a new layer. Select the elliptical marquee tool and, while holding the Shift key, drag out a very small selection and fill it with black, again on a new layer.<\/p>\n

\"\"<\/div>\n
<\/div>\n

Position the black circle on the bottom of your black rectangle. Duplicate the layer, and position the new circle next to your original.<\/p>\n

\"\"<\/div>\n
<\/div>\n

Repeat this step until you have something that looks like the following image. You\u2019ll have a lot of layers. Select all of them while holding the Shift key, and then go to Layer \u2192 Merge Layers to turn them into one.<\/p>\n

\"\"<\/div>\n
<\/div>\n

Now we\u2019re going to add some simple layer styles or blending options to make our shape come to life! Right-click on your layer and select \u201cBlending options.\u201d The Layer Style window should open up. Apply the following effects to add a gradient, inner shadow and drop-shadow:<\/p>\n

\"\"<\/div>\n
<\/div>\n

And we\u2019re done!<\/p>\n

\"\"<\/div>\n
<\/div>\n

2. Two-Toned and Limited Color Schemes<\/h2>\n

Two-toned color schemes are a big thing in vintage design because producing full-color prints wasn\u2019t as easy back in the day as it is now. Below are some recent examples of two-toned and limited color schemes.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This minimalist design gets its visual appeal from the black and white shapes and lines, especially the horizontal dashed line and cut-out shapes from the bottom of the circle.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This branding repeats a few select colors throughout. The colors work incredibly well together. The yellow-orange is the focal color that catches your attention.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This lovely piece of retro design relies solely on color and typography. The subtle one-pixel-wide lines finish it off.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

Another two-tone black and white design. This identity is based on a badge and gets a slightly three-dimensional look from simple typography and effects.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This example really shows off how effective color can be. It uses three colors: orange, brown and white. The contrast between the three swatches works very well for the design.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This design (the identity itself, not the background) relies solely on color and typography.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This design combines orange and a nice blue-green with white. The color combination matches the fancy borders and simple typographic effects.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

Yet another vintage typographic logo that relies on two colors: white type on red. Notice how the identity is based on a circle.<\/p>\n

\"\"<\/a><\/div>\n
<\/div>\n

This identity uses only three colors, an elegant typeface and a nice blending mode to put the icing on the cake.<\/p>\n

Color Resources<\/h3>\n

A bunch of great applications are out there to help you create your own color schemes. This small selection shares several of the best:<\/p>\n