You are on page 1of 8

TYPOGRAPHY WorldMags.

net

20 TYPE
SECRETS
WE BRING YOU AN INSPIRING COLLECTION OF TYPE PROJECTS ALONG WITH
INSIDE INFO AND PRACTICAL TIPS FROM THE ARTISTS WHO CREATED THEM

© Jordan Metcalf

1. VINTAGE SHADOWS
JORDAN METCALF
www.jordan-metcalf.com
To create a toolkit for Boston
Magazine, artist Jordan Metcalf
decided to go for a clean bespoke
type that he refined and completed
in Photoshop.

■ The brief I was tasked with


building a visually striking
typographic treatment that would
work across a contents page, DPS
and various sub-section headers of
the magazine.
■ The inspiration The style is a
play on vintage signage that pays
tribute to the rich history of the city.
It was important that this wouldn’t
be specific to one place in Boston
or preferential to any particular
sub-section of the feature.
■ Custom type All the type was
completely drawn from scratch
and no fonts were used.
■ Creating shadows The
shadows cast by the lettering were
all done in vector with a
combination of a few techniques.
■ Getting grainy Photoshop was
used for the final grain and
highlight effects on the type.
■ Gradient Map I used a Gradient
Map adjustment layer in
Photoshop to get the subtle muted
colours consistent throughout the
entire toolkit.

134 Advanced Photoshop Premium Collection


WorldMags.net
WorldMags.net
20 TYPE SECRETS

2. BUILDING LETTERS
4. LEATHER AND TREAD
TODD FOOSHEE MARCELO SCHULTZ
www.toddfooshee.com
www.behance.net/marceloschultz
With a bold font from the Avant
When he was commissioned to create a T-shirt
Garde family as a base, Todd
design for Nike that would fuse trainers with a
Fooshee set about building up a graphic type by
slogan, Marcelo Schultz immediately reached
adding hundreds of very small birds to his project.
for the textures.
“The font is clean, easily readable and has a really
thick, sturdy look to it [that’s perfect for rebuilding]
the forms with birds. I did some adjusting to the
kerning and from there began to place birds all
around the letters. [I kept] balance in mind, but really
just placed them at random to build the words. In
terms of the specific tools for this project, I used a
pen and paper, a scanner and some basic features
inside Photoshop. Without the Invert adjustment I
would have probably had to go a different route… The
layer groups were what really helped me out the
most, just to stay organised and keep things in
order… After I finished the letters, it came down to ■ Create a mask to apply the texture you're
building a background texture, which I did by using. Select the type that you would like to
combining a few images using different blending apply the texture to by holding Cmd/Ctrl and
modes then erasing [areas] and using some texture clicking over the tiny image of the shape on the
brushes. I applied some of the bristle brushes with Layers panel. Keeping the selection active,
my Wacom tablet to add the slight vignetting around create a layer folder and select Add Layer Mask,
the top edges and then toned it down a bit with some located at the bottom of the Layers panel.
blending modes. There is also a lot of copy-and-
© Todd Fooshee
pasting work at the heart of this piece.”

3. COMMERCIAL PACKAGING
HERE DESIGN
www.heredesign.co.uk
The multi-disciplinary team at Here Design decided
to let their type do the talking when creating the
packaging for the Hairy Bikers crisps brand. Coming
up with a concept to sell snacks on behalf of two
unorthodox TV chefs was a unique challenge. The
team started by developing copy lines for each
unusual flavour and sensation, as director Caz ■ Next place the texture inside the mask, which
Hildebrand explains: “Once we started looking at should fit to the exact shape. Inside that mask
using just type, it quickly became obvious that this you can add some shadows and create a 3D
would work well and help the packs stand out depth effect, as you can see marked in green, to
against the competition. We were inspired by the sort achieve the final effect.
of graphic style associated with packaging that has
to travel, like cardboard boxes containing fragile
items reading ‘This Way Up’ or food packaging date
stamps that read ‘Best Before’ and so on.
The colours were derived from the flavours, for
example the Keralan King Prawns pack is pink both
for the colour of the prawns and the Indian feel. The
logo for the Hairy Bikers combines a spanner, a
pepper pot and a fork inside a wheel to evoke both
the motorbikes and the cooking of the duo. Each
pack has relevant language for the flavour as well as
Si and Dave’s seal of approval and signatures. We
used Photoshop to create the impression… of old
letterpress-printed type that’s a bit battered and care- ■ This image uses different textures, such as
worn… We mixed some of the Effects Gallery styles leather and tread. Textures can improve and
with scanned textures we found to create a unique lend a realistic effect to your artwork, as long as
© Here Design
set of textures to be used with the type.” they are of a good quality.

135
WorldMags.net Advanced Photoshop Premium Collection
TYPOGRAPHY WorldMags.net

6. ILLIUMINATE IT
5. 3D TYPE
ANTHONY GIACOMINO MARCUS BYRNE
www.agiaco.net www.behance.net/mobdesign
Marcus Byrne created this striking lighting typography for Cricket Australia/George
Anthony Giacomino teamed up with Richard
Patterson Y&R in Melbourne. The illuminated fluorescent design includes detailed light
Roberts (www.richardroberts.com) to create an
effects and bright colours and was reproduced in all hues across the colour palette. The type was used in
other-worldly type project for the Intrinsic
extensive applications across the range of marketing materials for T20 cricket. Here you can see some of the
Nature art collective. Bold 3D lettering takes
stages in Byrne’s process.
centre-stage, enhanced by light effects and
futuristic elements, as the team explains: “For
this piece we started with a base in CINEMA 4D
to make the 3D type, lighting and also an
assortment of geometric shapes. After
importing this into Photoshop, we added more
atmosphere and light emitting from the top, in
addition to some light effects.
“The piece needed some more colour, so we
sampled pinks and oranges to complement the
cool blue and navy tones. For the final details we
added a few other points of interest, such as the
figure on the right and some foreground shapes
to add depth and dimension. We utilised
blending modes such as Screen and Overlay
when playing with stocks and other elements to
create some unique effects.”
© Anthony Giacomino and Richard Roberts

7. FLOWING EFFECTS
NIK AINLEY
www.shinybinary.com
Drinks giant Diageo enlisted Nik
Ainley to give a typographic
treatment to promote a line of cocktail drinks. “They
wanted something with plenty of abstract and
photographic items related to each drink and centred
around 3D typography. The final design went through
many iterations, almost 40 for the first image I seem
to remember. The smooth flow from the pump to the
glass was an important part of the concept and
helped to give each illustration a shape. The first
elements to frame each piece were the pumps and
drinks, which came from specially taken photos.
After this I discussed with the art director what sort
of typography would work. From experience I knew
that a fairly simple font was needed, as when you
extrude a font you introduce a lot of new surfaces
that can confuse the eye. In the middle of complex
illustrations like these you need to keep things as © Nik Ainley
legible as possible. Using a simple chunky font
minimises the confusing effect, so that’s what I went for. The 3D letters were then built in 3ds Max and
positioned. An excellent 3D artist and friend, Marcelo Jr, was involved heavily in this part of the process. Even
after the 3D elements were brought into Photoshop, the piece consisted of many layers that enabled me to
continue tweaking it as I went. From there it was a case of creating all the other aspects that consisted of
stock photos, images captured for the project, decorative 3D elements and sections built in Photoshop. I
brought all of these together with a heavy dose of retouching and editing.”

136 Advanced Photoshop Premium Collection


WorldMags.net
WorldMags.net
20 TYPE SECRETS

8. GRAPHICAL HAIR
LUKE LUCAS
www.lukelucas.com
The team at Esquire magazine required an innovative
and stylish headline treatment for a grooming
section of the publication. Here Luke Lucas runs
through how he approached this task.
■ Initial brief I was asked to create a type
illustration and some hairy graphical elements.
■ Base text The client wanted to evolve the
illustration from their standard condensed sans
serif, into something that was more dynamic and © Luke Lucas
relative to the theme.
■ Creating hair I next built up all the hair elements
using very fine strokes drawn with the Pen Path tool
in Illustrator.
■ Making hair brushes I created several hair
brushes and applied them to paths in the shapes that
I felt would work the best on the different letters. I
then made some slight distortions using the Mesh
Warp tool.
■ Copy layers I added in some hair highlight layers
using fine paths. I then copied both the base hair and
highlights into Photoshop in separate layers.
■ Add highlights I hid and made a selection of the
highlight layers and brushed them within the
selected shape on a separate layer. This brought
more variation to overall design.

9. USE A NEW PERSPECTIVE 10. PLAY WITH TYPE


EUGENE LVOVSKY ANDRÉ BEATO
www.andrebeato.com
www.eugenelvovsky.com
André Beato created a playful type for easyJet, merging bold letters
If you’ve ever thought that standard type options are incredibly boring – and if you’re
with different elements. “The brief behind this project was to create a
reading this I bet you have – try looking at them through Eugene Lvovsky’s eyes.
main type header for an article called ‘The Next Big Thing’. The idea was
Instead of seeing letters, he sees shapes, and has used this approach to create his
to play (bastardise, overlap or italicise) with the header title text,
series of ‘Type Is’ posters. You can see the full series here www.eugenelvovsky.com/
combining the four stories related to the article, namely Northern
typeis. “The inspiration for the series is the immense beauty of typographic forms.
Lights, Cycle like the Pros, Ice Climbing and Sleep-Inducing Machines. I
Simply spotting a beautiful descender on a typographic character could easily grow
started the illustration process in the vector program FreeHand MX and
into the question, ‘Can I make this into a flower?’ I take this step further by creating a
tried to find the best
visually pleasing
© Eugene Lvovsky way to combine the
relationship between every
text block – I used
single character, respecting
the magazine
and being true to its unique
house font called
shape. Everything is
Benton – then drew
thoughtfully interconnected,
the elements to
every character, every
adapt and join them
shoulder, stem and serif.
with the text. I
There are no letters
always try to create
accidentally placed together
something legible
in my images and the
but appealing at the
accessibility of Photoshop
same time. The
helps enormously when
process concluded
working on made-to-order
© Andre Beato, Ryan McCabe

in Photoshop,
prints. Everything from a
where I added all
Gradient Map to Hue/
the little details like
Saturation adjustment
shadows, glows,
layers save time when I’m
brush-star effects
perfecting a bespoke colour
and colour
combination for a client.”
adjustments.”

137
WorldMags.net Advanced Photoshop Premium Collection
TYPOGRAPHY WorldMags.net

11. REALWORLD ELEMENTS


LINDA ZACKS
www.extra-oomph.com
Linda Zacks usually originates her elements with
real-world media, but here shares her tips on how to
marry these perfectly in Photoshop. “RPA in Santa
Monica asked me to create an artful interpretation of
the Newport Beach Film Festival name. This
typographic collage was born from a stack of city
shots taken while zooming around at night… I went
through heaps of photos, picking out awesome
shapes and colours. In Photoshop I had a zillion
windows open simultaneously and pasted stuff into
a giant master file with a billion layers. Slowly but
surely the letters came to life from several bits and
pieces of photos as I sized, resized and transformed
them. I also added some watercolour textures over
the top that I had scanned in one rainy day. Nothing
originated in Photoshop, but I used it as a virtual
gluestick. For this project I used lots of layer
functions as well as Multiply, Screen and Overlay
blending modes. To finish I punched up the colour to
© Linda Zacks
add the last burst of zing.”

12. DIGITAL HAND LETTERING


LINZIE HUNTER
www.linziehunter.co.uk
Skinny Cow and JWT New York were in need of a fresh interpretation of
their campaign copy, so they got illustrator Linzie Hunter to apply her
unique style. “Sometimes I’ll create my lettering on paper, while other
times I play about with colours and styles directly in Photoshop. For this
series of ads I worked fully in Photoshop using a Wacom tablet and pen.
I concentrated on creating lettering that looked and felt hand-rendered
and more in-keeping with my personal style. I like to mix and match
typefaces with upper- and lower-case characters, as I feel this lends
energy to my work and I prefer everything to not feel too neat or perfect.
Sometimes it’s obvious which words need greater emphasis, but for me
it’s usually just more of a hunch when it comes to developing or picking
lettering styles… I used a variety of custom brushes in order to achieve
a more painterly or hand-rendered effect and also used my own
textures, either scanned, photographed or hand-drawn. I also tend to
have a lot of layers set to Multiply or Overlay in order to create textural
effects and backgrounds. Sometimes with these hand-lettering
assignments, the arrangement of words and letters just don’t fit the
space you’ve got in the way you’d like.”

All images © Lizzie Hunter/JWT New York

138 Advanced Photoshop Premium Collection


WorldMags.net
WorldMags.net
20 TYPE SECRETS

13. POPLAR IN A GLASS © Luke Lucas

LUKE LUCAS
www.lukelucas.com
Freelance creative Luke Lucas
was asked to design this sweet
and savoury graphic for the dining section of The
New York Times, using Poplar as a secondary
typeface. “This illustration began with defining
the main glass shape and the stylised wine
pouring inside it in loose vector shapes. The
main type was then created using Vector
Paths in Illustrator, while the secondary
type was set in the Poplar typeface and
distorted to fit using the Mesh Warp
tool. In terms of the creative process,
the wine shapes were brought into
Photoshop as separate objects and
colour, highlights and shadows were
applied to enhance the depth of tone.
The main type was then filled with
colour and the shadow details within
the letters were masked and brushed
to define overlapping elements. The
warped secondary type objects were
overlayed using layer effects, then it
came to building the glass. The ■ Refracted effect
background of the image was to be By separating and shifting
white, so in order to define highlights elements in the glass, Lucas
on a white background I first could imitate a slightly refracted
needed to add a slight grey tint distortion to create a realistic finish.
to the whole glass shape.
This was placed on the
bottom layer so as not to tint
the actual wine itself. Next I
brushed in the highlights and ■ Two typefaces
shadows in separate layers Lucas mixed two typefaces, placing one
above the wine and type centre-stage as Sweet and Savoury and
shape layers. Some faint the other to spell out associated words in
reflection shapes were also masked and brushed in. the glass.
Once the main type and glass objects were rendered
to a fairly polished level I placed all of the wine and
type elements into a layer group. To finish, I ■ Main idea ■ Highlights and Shadows
duplicated and applied masks to the groups, The brief was to incorporate various Painted highlights and shadows gave
separating the objects between those inside and flavours and descriptors associated definition to the type and the wine
those outside the glass.” with wine in an artistic way. background, adding depth and interest.

14. VINTAGE 3D
STEVE GOODIN
www.behance.net/demen1
Steve Goodin gave a funky yet classy edge to this
piece of marketing material for a Reno electronic
music event. “The initial idea stemmed from the title
of the event. I was given creative control over the
theme and style of the poster so I really wanted to
set the tone and the vibe based on that title. This
poster was created using some 3D type elements as
well as some other stock photography and
illustrated graphics. For example, the lightbulb
images and vintage flowery wallpaper pattern came
All images © Steve Goodin
from a deviantART member.”

139
WorldMags.net Advanced Photoshop Premium Collection
TYPOGRAPHY WorldMags.net

16. TYPE FOR TALL BUILDINGS


15. FROM HANDDRAWN TO 3D SI SCOTT
JURI ZAECH www.siscottstudio.com
www.juri-zaech.com
Working to a brief for Nike, full-time artist, designer and creative consultant Si Scott built a
Starting with an initially rough sketch, Juri Zaech gave these quirky
unique typography-lead image. The design fuses the kit of a well-known football team with
personalised bicycles all their touching character using
the words its fans sing at matches. “The brief was to make the footballers from famous
Photoshop’s toolset.
chants that the Paris Saint-Germain fans sing at their beloved team’s games. The piece
was used as three-storey-high banners on the side of the Nike store in Paris for the launch
of that season’s kit,” he says. The result
shows the famous kit, complete with Nike © Nike/ Simon Scott

swoosh, worn by a man built purely from


type. To create the image, Scott fused his
well-known style of hand-crafted work with
his Photoshop expertise. “The image was
drawn by hand in separate parts, scanned
into Photoshop and pieced together in the
program. The Magic Wand tool was used as
a selection tool to get rid of the negative
space. It was also helpful to remove marks
■The ‘Write a Bike’ series started with my own wish to create a
left on the paper from the drawing process,
personalised bicycle, so using the name of the owner seemed a
which can’t be seen by the naked eye. From
logical and interesting way to demonstrate this. The process
there a mask layer was added to the type so
started with sketching up a rough shape of the bike and the name,
the colour could be added.”
to see how tight the letters needed to be spaced to maintain a
somewhat natural proportion.
17. EXPERIMENT WITH TONES
JOEY CAMACHO
www.joeycamacho.com
Inspired by a period of his life when he wanted to slow down and appreciate the simpler
things, Joey Camacho created a typographic poster series to echo his ideas. “My process
with this project, as with all my typographic work, started with word-pairing or putting
together the concept for a series of images. I used Burgues Script for this as it has
thousands of glyphs and alternative characters. Balancing out the words and using the
flourishes sparingly was important. Some people don’t spend the time required to
understand the entire font, which I think is really important. When I get the images into
Photoshop I use the Alpha channels and layer masks to tweak the colours, enhance the
lighting and give them a tactile feel. The textured background is made up of quite a few
different layers, reduced in opacity and overlaid. This often gives more depth than just one
■ I drew the bike in Illustrator, starting with the basic elements and
texture layer. I use custom dust and scratch brushes, while also using the Dual Brush
the lettering of the chosen name. It took a lot of adjustments to get
feature to add some randomness and inconsistencies to the final result. I spend quite a bit
to the even structure of the bike’s frame. Once all the vector work
of time dodging and burning the reflections and shadows, which helps make them pop. I
was finished, I took the different elements to Photoshop to render
also often use Color Balance and Curves adjustments to finesse the final product.”
the 3D effect.

■ I mainly used simple Bevel and Emboss layer effects. It was


important to pay attention to the details like the colour of the
shades and obviously the amount of embossing. The reflection
elements needed to be blurred, have their opacity reduced and
other partial adjustments. The background, shadows, reflections
and textures were all finishing touches. © Joey Camacho

140 Advanced Photoshop Premium Collection


WorldMags.net
WorldMags.net
20 TYPE SECRETS

18. REPLICATE CRACKED CONCRETE


BEN DOWNARD
www.cargocollective.com/downard
Ben Downard created a concrete type graphic to raise awareness of the events in Haiti. He
worked across CINEMA 4D, Illustrator and of course Photoshop to add texture and bring
together the final effect. The result is a solid graphic that portrays the destruction. “For the
aesthetic of the project I wanted something stark, sterile and in a duo tone to illustrate the
idea of devastation and its impact on a clean environment. For the concrete effect I used
two photographs: a macro shot of basic concrete for the texture and a macro shot of dry,
cracked, muddy earth. From that point on I applied with masks and lighting effects used as
layer styles. This achieved a painterly and illustrative effect for the remnants of a building
© Ben Downard left standing after the earthquake.”

19. TWIST VECTORS


CHARLES WILLIAMS
www.madeup.org
The Church of London commissioned different artists to depict
various Olympic athletes for the cover of the Metro newspaper
during the games. The brief specified that only the portrait had to
be recognisable and include the athletes’ names. Charles Williams depicted Louis
Smith with a combination of hard-edged and soft flowing shapes, in reference to the
strength and graceful movement required of gymnasts. “Once I’d put together a rough
layout I started building the vector design in Illustrator, then added detail in Photoshop.
I based the type on the shapes I used to build the portrait – flowing organic shapes –
then gave it a bit of a circus feel, as this sat well with the gymnast figures above. I built
the type in Illustrator then added depth and a soft 3D feel in Photoshop using Bevel
and Emboss. To get this effect I set the Bevel and Emboss adjustment’s Highlight
Mode to Overlay and created individual layers for each letter’s bevel. This prevented
the bevels from bleeding into one another and distorting.”

© Charles Williams

© Stefan Chinof

20. RETHINK HELVETICA


STEFAN CHINOF
www.behance.net/chin2off
Inspired by horror films and a love of candy, Stefan Chinof turned the
Helvetica typeface into a fun take on a terrifying texture. “I was inspired
by a poster for a horror movie that had a very organic, bloody and sort of
raw-meat-looking texture! Since I’m a big comedy junkie and not at all
a horror fan, I thought of how I could make this effect a bit more fun and
juicy. Helvetica isn’t a font that’s usually seen in such an abstraction, so
it was an interesting challenge on top of using the negative space
around the font. Using negative space always has great power but is
rarely used in this way. The tools I applied the most for this project were
the blending options as well as the Bevel and Emboss adjustment.
Shapes were quite useful too and a great addition, but drawing the idea
out to start was the base of it all.”

141
WorldMags.net Advanced Photoshop Premium Collection

You might also like