Get The Vintage Illustration Look

Tiling 101: Due to improved broadband speeds, graphical backgrounds can be much larger than in the past. However, it’s vital that they tile seamlessly so that, regardless of the visitor’s screen size, the continuity is not broken. One way to do this is to have a graphical element leave one side and then rejoin on the other, so it matches when tiled.

Textures you can touch: “For the background of my personal portfolio website, I was really aiming for a style that was truly unique. I wanted visitors to feel as if they could reach out and touch the textures – plus I wanted the work to speak for itself. By juxtaposing bright designs with subtle earthy tones, I ensured that my portfolio of work seems larger than life.”

• Inspiration: www.ryanscherf.net

There are many reasons why people are drawn to a website. Sometimes it’s a great whizzy feature, the utilisation of cutting-edge technology or a layout that’s a bit more clever than the norm. But for Ryan Scherf’s personal portfolio site, he uses good clean HTML5 that’s wrapped up in a brilliant design that incorporates illustration and typography beautifully.

Sometimes we don’t need whizzy features on our websites – we just need the iner points of a good, honest piece of design. This works excellently for Scherf as it shows of his ability to control creative software, not only through the making of great graphics but also through the precise implementation of CSS to produce a well-rounded, tactile site.

#1 - Bringing Vintage Bang Up To Date

Scherf’s graphic work is a style that gives maximum impact but is not too difficult to achieve. There is a distinct nod to the vintage style and, once you settle on a particular theme, it becomes very easy to replicate across the design. Here Scherf has enhanced the illustration by using some old-fashioned paper textures to give it a unique look. By blending the clouds and the stars into the design, it all begins to look cohesive as if it belongs together. The design is rounded of by the use of typography overlaid across the image, which also acts as a word count for the site.

#2 - Capture The Illustrated Look

STEP 1: Gradient Backdrop

Choose a light yellow colour for the background and a dark blue for the foreground colour. Switch to the Gradient tool and drag from top to bottom on your document while holding Shift to add a gradient.

STEP 1: Gradient Backdrop

STEP 2: Burn Some Paper

If you search for "paper textures" online you will find many results. Once you have one or two you like, drag them into your composition and change the blending mode to Color Burn.

STEP 2: Burn Some Paper

STEP 3: Pen tool

Switch to the Pen tool and draw triangles along the bottom of the image to give the impression of mountains. Make sure that the path is joined to the beginning point so we can fill it with colour next.

STEP 3: Pen tool

STEP 4: Fill Selection

In the Paths panel, click on the Selection icon to pick the path. Fill the mountains on a new layer with any colour; this will be covered up by the paper texture in step 5.

STEP 4: Fill Selection

STEP 5: Add Paper Texture

With a different paper, texture add this as a new layer to the piece, above the mountains. Hold Opt/Alt and click between the layers to use the lower shape as a mask.

STEP 5: Add Paper Texture

STEP 6: Head In The Clouds

Apply a cloud brush or stock imagery. Add several clouds and vary their direction using Edit > Transform > Flip Horizontal. Mix up the size with Edit > Transform > Scale.

STEP 6: Head In The Clouds

STEP 7: Soften Edges

Add a layer mask then use a soft brush (at 20% Opacity) on the cloud edges. Set the layer Opacity to 80% so that the background texture is able to show through.

STEP 7: Soften Edges

STEP 8: A Star Is Born

On a new layer, with a hard brush, add a yellow dot (Transparency 10%). Duplicate the layer and scale it up (Transparency 20%). Repeat and set the final layer to 80% transparent.

STEP 8: A Star Is Born

STEP 9: Duplicate The Star

Put the three-star layers in a folder, copy and place around the scene. Resize some of the stars for more variation. You should now have roughly the same scene as the site.

STEP 9: Duplicate The Star

#3 - Creative Titling For Your Site

Scherf’s site tells users exactly what his skills are as the visitor hits the site – something which is particularly important if you are a freelancer. Here we explore how to re-create his typographic style in Photoshop.

STEP 1: Lay Out Your Text

In Photoshop grab the Text tool and use black as the foreground colour. Place each word of text on a separate layer so that you can resize the words and arrange them in a suitable way to show the name of your site and your skills.

STEP 1: Lay Out Your Text

STEP 2: Open Layer Styles

Double-click on one of the text layers in the Layers panel to open the Layer Styles menu and set the Fill Opacity to 75%. Click on Bevel and Emboss and add an Outer Bevel setting at just 1 pixel. Turn of the Shadow Opacity and the Global Light options and move the angle as shown.

STEP 2: Open Layer Styles

STEP 3: Add Inner Shadow

Click on the Inner Shadow option and give it a Distance and Size of 1. Then leave all other settings as default before hitting OK. Ctrl/right-click the layer and copy the layer style, then Ctrl/right-click the other layers and paste in the style.

STEP 3: Add Inner Shadow