Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
4th January 2013

Recreate digital scrapbook styles

We all appreciate how styles that replicate real-world effects always go down well with today’s web users

Recreate digital scrapbook styles

We all appreciate how styles that replicate real-world effects always go down well with today’s web users. This is often seen in commercial sites, where the client wants a brand to reach out and connect with visitors. But beyond that, such styles are also applied by creatives in hope of enhancing a portfolio or page space, making it artistically more in-tune.

Adding illustrative elements is a certain way to achieve this, and mixed-media techniques can add authority if done in a sophisticated manner. Found images and according effects, such as torn paper textures and freehand font styles, give a sense of creative expression. The site of Armin Morbach (www.arminmorbach.com) is a fine example.

Intimacy with his site, however, is not just created with visual styles, but also with audio and real-time interaction (eg the floating interface), reflecting his brand’s sensibility. This takes this web presence into another dimension – into the realms of multimedia.

Throughout this workshop we’ll focus on delivering the graphic techniques and effects embraced by this website, enabling you to re-create similar scrapbook styles.

INSPIRATION: www.arminmorbach.com

TECHNIQUE

DROP SHADOW EFFECTS

Recreate digital scrapbook styles
Another dimension

Applying Layer Style>Drop Shadow is a subtle effect, but it will stop your design from looking flat and two-dimensional. Always apply from the second tier of Blend Mode options – ie Multiply, Color Burn or Darken. Set the Size so your shadow is tight to the model, and set the Spread at a value that maintains a visible edge.

Recreate digital scrapbook styles

Preset lighting

The Drop Shadow option is a great way to add unified lighting. Saving your settings as a New Style stores it as a preset, making it re-applicable to other elements in the Layer Styles>Styles options. If you want to manually tweak the effects go to Layer>Layer Style>Create Layer, which separates your shadow into its very own layer.

TECHNIQUE

CREATE DIGITAL RIPS WITH EASE

There’s nothing like an authentic look to scream ‘real-world’ in your digital projects. Tangible elements are always a big bonus in a creative arena that is seeing a backlash to synthetic styles. A torn edge effect can produce that tangibility, at the same time letting you retain your glossy photo images and clean graphics. It is easy to replicate such a style using Photoshop, with the help of some selection, brush and layering tools.

Cut out the model
Recreate digital scrapbook styles
Start by separating your model from the backdrop; this can be done as roughly or smoothly as you wish. For a more perfect edge use a Pen Path selection, otherwise use Lasso tools for something more immediate.

Brush styles
Recreate digital scrapbook styles
Open the Brush Preset menu, select the Splatter 14px style from the Brush Tip shape menu, then select Shape Dynamics. Set Size Jitter Control to Pen Pressure, and all Jitter controls to 100% with Minimum Roundness at 1%.

Paint your effect
Recreate digital scrapbook styles
Cmd/Ctrl-click your model layer thumbnail, create a new layer, then paint in your effect with a light grey brush. Invert (Cmd/Ctrl+Shift+I) and paint to the outer edge of the subject. Use both dark and light shades for a mottled effect.

TECHNIQUE

DOTTY TYPOGRAPHIC WORK

Convert the type
Recreate digital scrapbook styles
Begin by selecting the font you wish to use and spell out your word. We’ve used Arial Rounded MT Bold for its smooth edge. Next, Ctrl/right-click your layer and select Create Work Path, generating a Work Path in your Paths palette. Next, delete the type layer and create a new blank layer, leaving only your Work Path.

Optimise brush settings
Recreate digital scrapbook styles
With a hard brush, set the Size and Spacing to create sequential dots. Opt/Alt-click the Work Path, then Ctrl/right-click it, selecting the Stroke option. Lastly overlay your dot type layer on imported paper textures, and work up rough edges using the Pen or Lasso tool.

RESOURCE

SCANNERS AND STOCK
If you do want to get away from artificial effects and actually use real-life clippings and collages, then a suitable scanner has to be a serious consideration. Specifically, photo scanner types are what you should look at – preferably high-resolution for those detailed digital projects.
The Canon CanoScan 9000F is a solid option. It boasts a whopping 9,600 x 9,600dpi optical resolution that easily trumps most competitors. This device also supplies users with the ability to scan photo film – 12 x 35mm filmstrip and 4x mounted slides, both positive and negative – while the Auto Photo Fix II and Auto Document Fix software optimises the output and quality of final images. Available from around £149 it won’t break the bank either.
But if you don’t want to bother with such an investment, but still want authentic stock then you couldn’t do any worse than running a search at naldzgraphics.net. In the Freebies section, you can find a mountain of resources. Here the Naldz Graphics team have compiled over 200 high-quality paper textures, including ripped and distressed types, for anyone to grab. However, note that in commercial projects permission may still be required.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.