WHAT WE’RE CREATING:
Hello there! It’s Simon on this end of the keyboard for this week’s second tutorial here at Design Cuts. We are exploring the possibilities offered by the 33 typefaces which are a part of The Typographer’s Dream Bundle.
The brief this week is to create a lovely and whimsical lemonade recipe card, using the more artistic options of the font selection. We’ll work towards giving it a hand-drawn, chalkboard feel. The tools we’ll use to accomplish this goal mix the typefaces themselves, Photoshop’s ability to warp, distort, and transform typefaces, and some small texturing tricks.
TECHNICAL CONSIDERATIONS
I’m happy to announce that this tutorial is Photoshop centric! We recently worked a lot with Illustrator, and poor ol’ Photoshop was feeling extremely lonely.
That being said, we’ll still use Illustrator to grab assets from the bonus file that come with Nicky Laatz’ typographer’s toolbox.
STEP ZERO: DETAILED BRIEF
The stylistic approach
We were all very impressed with one of Nicky’s demo pieces for the typographer’s toolbox. It’s the one below. It features a solid mix of typefaces, small eye candy, all the while staying legible, and visually beautiful.
Our piece will focus on emulating the spirit of the piece rather than copying it.
The recipe
The recipe we’ve chosen to base ourselves on is one of the simplest out there. It can be summarized in four steps:
- Squeeze lemons for lemon juice
- Prepare simple syrup
- Combine the lemon juice, simple syrup, and water in the appropriate quantities
- Serve over ice, and enjoy!
It’s a perfect refreshing drink to prepare if like us, you’re not ready to say goodbye to summer (even though the soltice happened, and the sun is in hiding).
Additional consideration
If you’ve followed my past tutorials, you know that I like to be very precise in the positioning of elements within a piece, more often than note giving absolute coordinates in the form of X;Y coordinates. In this specific instance, balance, and other relationships between type and illustrative elements, were achieved visually rather than mathematically. I will however provide you with the type size (and other settings) to get a sense on how to come close to my result.
What this means is that you have plenty of latitude to personalize and tweak things to your liking. In fact, we’re looking forward to your own versions of the outcome. Try a different drink recipe. Heck, try a dish recipe instead of a drink one! See what happens if you change the color paletteorif you decide to work with a light background instead of a dark one.
Ready? Then let’s dive right in!
STEP ONE: DOCUMENT SETUP
We’ll be using an A5 card format (148×210 mm, roughly half a lettersized sheet of paper).
To give ourselves some reference points, we’ll add guides marking the center of the piece, as well as a 10 mm zone around the edges of the canvas.
If you don’t have the CC 2015 version of Photoshop that includes the new guide layout feature (View > New guide layout), you should consider trying a little piece of software called GuideGuide (visit guideguide.me for more information).
STEP TWO: THE BACKGROUND
This one will go quickly: the background is filled with a dark, warm gray: #231f20.
We can rapidly give its own layer group.
And now, let the fun begin!
STEP THREE: COLOR PALETTE, TITLE, AND INGREDIENT LIST
Color palette
The color palette for our piece will be simple. Other than our dark gray (#231f20), it will feature white (#ffffff), and a warm yellow (#f0cc33.).
Title
The title block includes five elements:
- A suporting shape: the bottle (vector asset)
- A catchword: “awesome” (vector asset)
- The word “Lemonade”
- The word “RECIPE”
- A small ornament: a cloud (vector asset)
The block is placed in the top left corner of the canvas, slightly spilling on the 10 mm safe zone around its edge.
First is the bottle shape, found in Nicky Laatz’s vector bonuses (\nicky-laatz\Typographers_Doodles.ai).
It’s pasted scaled up to 180%, rotated by66°. It features a yellow color overlay (#f0cc33.).
Color overlay is probably going to be the fastest way to apply colors to the various vector assets we’ll use throughout the piece, rather than have to open the smart object’s content through Illustrator, assign the color, save, and return to Photoshop to admire the results.
“Lemonade” is written in LEMON SQUEEZE Regular that is 36 points tall, centered, and colored in dark gray (#231f20). It’s also rotated to follow the bottle’s orientation (roughly 18°).
“Awesome” is from Nicky’s bonus doodles, is pasted in white, scaled down to 75%.
“RECIPE” is set in Bacon Sandwich Regular that is 24 points tall, in all caps, and white. It’s also rotated to follow the bottle’s orientation.
Finally, the little cloud (also coming from the bonus doodles) completes the open space above the bottle’s neck and opening. It’s pasted scaled down to 75%, and sports a white color overlay.
A little bit of layer cleanup is in order.
The ingredient list
The ingredient list block is more complex, as it features more elements.
- A suporting shape: the banner (vector asset)
- A sentence part: “YOU’LL NEED:”
- A catchword: “and” (vector asset)
- The sentence part “1/2 CUP OF SUGAR”
- The sentence part “ABOUT 6 LEMONS”
- A small ornament: swirl #1 (vector asset)
- A small ornament: swirl #2 (vector asset)
- A small ornament: line work star (vector asset)
- A divider (vector asset)
The banner is solid, overlaid with dark gray (#231f20), and given a centered white stroke of 10 pixels. This makes it look like the banner has no fill color. It’s pasted in scaled up to 225%. Its position in the top right corner helps to create the visual counter-point to the title block.
“YOU’LL NEED:” is set in Bacon Sandwich Regular, that is centered, all caps, yellow (#f0cc33), and 30 points tall.
“1/2 CUP OF SUGAR” and “ABOUT 6 LEMONS” are written in Fox And Bear Regular, that is centered, white, and 36 points tall. We need to keep in mind the gap for the “and” vector asset, to be put in place shortly.
The “and” catchword is placed in the remaining gap at the end of the first half of the list. We need to assign it a yellow overlay. It should be placed between the “1/2 CUP OF SUGAR” and “ABOUT 6 LEMONS” layers. This will help to hide the extra swirls, that are lowering the legibility of the ensemble.
If we give a dark gray stroke of 35 pixels to the “1/2 CUP OF SUGAR” sentence half, we can hide the front “and” swirl, and make things legible again. And because of the layer hierarchy, nothing else is hidden.
The next element to add is the first swirl. It’s pasted in scaled up to 125%, and given a yellow color overlay. It marks the visual continuity between the first type sentence half, and the bottle.
To the left of both the first swirl and the bottle is the line work star. It’s pasted at its original size, and given a color overlay.
Next, the second swirl bridges the gap between the first swirl, and the second half of the ingredient list. It’s white, and pasted in scaled down to 75%.
Finally, we can paste in the small horizontal line as a divider, to finish the section. It’s scaled up to 500%, and given a yellow color overlay.
Because of its original small size, the divider isway too thick. Following a similar technique tothe one we used earlier for the banner, we’re going to give the divider an inside-aligned, 18 pixels, dark gray stroke, to make it seem thinner.
Here’s what the layer stack looks like so far.
It’s time to move onto the next step of the recipe!
STEP FOUR: SQUEEZING THE LEMONS
This first step of the recipe is to invite the person preparing the lemonade to squeeze the lemons, to obtain fresh lemon juice. There are only five elements for this step.
- “STEP 1”
- “Squeeze the lemons to obtain 1 cup of fresh lemon juice”
- Triple chevron, x2(vector asset)
- A small ornament: line work heart (vector asset)
- A divider (vector asset)
“STEP 1” is written in Mustache Regular, that is all caps, left aligned, and 60 points tall.
Next, “SQUEEZE THE LEMONS TO OBTAIN 1 CUP OF FRESH LEMON JUICE” is set in yellow Heartstrings Regular, with the exception of 1 CUP, that is set in white Zanjeros Regular, that are both 30 points tall. That textblock is centered, andaligned to the right of the canvas.
We are going to fill the gaps with the triple chevron assets, as well as with the heart. The chevrons are used as a visual allegory for the lemon squeezing. The chevrons are pasted scaled down to 75% once, duplicated, and flipped.
The heart is pasted between the second line of the instructions, and the “STEP 1” element. It’s pasted at full size, and given a white overlay.
Finally, a flipped copy of the large divider used earlier will help us to visually separate Step 1 and Step 2.
After some layer reorganization, here’s the result so far.
Time to move onto the next step –the recipe!
STEP FIVE: SIMPLE SYRUP
This step features six different elements.
- “STEP 2”
- “COMBINE THE SUGAR AND 1/2 CUP OF WATER IN A SMALL SAUCEPAN. BRING TO A BOIL UNTIL THE SUGAR
IS DISSOLVED (STIR OCCASIONALLY). LET COOL.” - Asterisk (vector asset)
- “CONGRATULATIONS: YOU JUST MADE SIMPLE SYRUP!”
- Banner #1 (vector asset)
- Banner #2 (vector asset)
First, let’s put the first banner in place: the smaller one. It will be pasted scaled up to 150%, and given a yellow overlay.
“STEP 2” is set in Heartstrings Regular, that is centered, colored dark gray, and slightly rotated to fit the banner’s curvature.
The next step is to put the big banner in place. It should be pasted scaled up to 175%, also in yellow.
And now, we can slide the “COMBINE THE SUGAR AND 1/2 CUP OF WATER IN A SMALL SAUCEPAN. BRING TO A BOIL UNTIL THE SUGAR IS DISSOLVED (STIR OCCASIONALLY). LET COOL.” text block in the space open at the right. The element is set in Bacon Sandwich Regular that is right-aligned, and 18 points tall, except “1/2 CUP OF WATER” being set in Zanjeros Regular, that is 24 points tall. The whole text block is colored in white.
Next, we can add the “CONGRATULATIONS: YOU JUST MADE SIMPLE SYRUP!” line within the wide banner. It’s set in dark gray Bacon Sandwich Regular, that is 18 points tall.
Last element for this one: the asterisk, placed scaled up to 150% in the gap at the left of the small banner.
Here’s a quick look at the layers.
Next up: it’s time to combine all the things.
STEP SIX: MIXOLOGY
The third step in the recipe is about combining all the elements prepared so far. It has three visual components to it.
- “STEP THREE”
- “COMBINE THE SYRUP, THE LEMON JUICE, AND ABOUT 3 CUPS OF COLD WATER IN A PITCHER”
- Burst element x2 (vector asset)
“STEP THREE” is written in all caps, set in white Habaneros Regular, that is 48 points tall. It’s somewhat horizontally centered within the safe zone guide, and the center guide.
The burst element is used like the chevrons earlier, pasted in once at full size, overlaid in white, flipped, and duplicated on each side of “STEP THREE.”
Finally, “COMBINE THE SYRUP, THE LEMON JUICE, AND ABOUT 3 CUPS OF COLD WATER IN A PITCHER” is set in yellow Bacon Sandwich Regular, that is left-aligned, and 18 points tall. The text block is fitted within the right column.
The layer organization as it is at this point:
Time to tackle the last recipe step, and the next to last step in our tutorial: the way to serve the refreshing goodness!
STEP SEVEN: SERVE OVER ICE
The last step also features three elements:
- “STEP FOUR”
- “Serve over ice, & enjoy!”
- Banner (vector asset)
The banner element is well hidden in Nicky’s doodles. It’s this unsuspecting blob.
It needs to be pasted severly distorted at the bottom of the canvas, scaled up at 300% of its original height, and 1100% of its original width. Similarly to the ingredient list’s banner, it’s given a dark gray overlay, and a yellow colored stroke of 10 pixels to look like it’s only an outline.
“STEP FOUR” is written in all caps, and set in yellow Zanjeros Regular that is 30 points tall.
Finally, “Serve over ice, & enjoy!” is written in regular case, but with an ampersand symbol. It’s set in white Rembrandt Regular that is 48 points tall.
That layer group is relatively simple, just like before.
It’s now time to move onto the finishing touch: textures!
STEP EIGHT: ADDING ALL THE DEPTH
The texture work we are going to put in place will help us to further reinforce the “chalkboard feel” already given bythe use of white on black in the color palette.
Because we’ll manipulate raster textures, these few PSAs are necessary:
- Don’t know what a clipped layer is? Glad you asked! This means that the layer is only visible/applies to the layer directly below it. You can very quickly do this by holding ALT down on your keyboard and clicking between the two layers. Here’s a quick demonstration.
- Every time we’ll work with textures, we’ll follow this simple process: place as smart object, sharpen1, desaturate, enhance contrast with levels, and modify the blending mode.
- Placing the textures as smart objects, and using adjustment layers to tweak them, allows us to stick to a non-destructive workflow. We’ve explored in depth the numerous pros and few cons of such a workflow in this past tutorial: “How to Use Textures The Right Way.”
Notes: 1 – accessed through the Filter > Sharpen > Sharpen menu.
Assets gathering
Now that this is out of the way, let’s talk freebies! The texture elements we’ll use for this tutorial are all freebies. The first one is brush-strokes-textures-volume-01-009-sbh.jpg, from the mother’s day card tutorial freebie pack. You can grab it in the Design Cuts freebie area.
The next freebie comes from Design Cuts’ friend, Chris Spooner. He released a pack of free dust and scratches textures, both as raster and vector elements.
Getting started
As stated earlier, the first texture is from the mother’s day freebie pack – brush-strokes-textures-volume-01-009-sbh.jpg.
It should be placed to cover the whole canvas.
After sharpening the texture (Filter > Sharpen > Sharpen), we need to desaturate the texture.
Blending mode: soft light @ 25% opacity.
The next texture is made using Photoshop magic, and will give us a convincing grain. We need a new layer at the top of our layer stack, and to fill it with a medium gray (808080).
Next, we need to turn that layer into a smart object (Filter > Convert for smart filters).
The grain filter we want to use for this can be found through Filter > Filter gallery > Texture > Grain. We’ll use the clumped grain type.
Blending mode: overlay @ 75% opacity.
We have some rough surface, and some grain. We still need speckling, and scratches, to make our blackboard emulation more credible. That’s where 2.jpg from Chris’ pack comes into play. The texture features plenty of dust worms, and the light scratching we need.
Scaled at 90%, the hair artefacts on the texture are cropped out of the canvas.
Blending mode: screen @ 100% opacity.
Since the effect is too strong, we are going to create a vignette effect to soften it. First, we need to draw an ellipse that fits our canvas with the ellipse tool (U).
The ellipse’s color should be our dark gray, #231f20. The color can be changed using the color swatch button in the Shape details section of the properties panel.
With the direct selection tool active (A), and the ellipse layer selected, we need to head to the top toolbar to “invert” the ellipse.
With that done, our vignette looks more like it. Now, we need to feather it so its edge is faded to transparent. That setting is accessed through the properties panel.
Finally, we need to change the blending mode of the ellipse to overlay @ 100% opacity.
And with that, our piece is done! Here’s a last look at the layer stack.
WRAPPING THINGS UP
Phew, that was a longone! I hope that you enjoyed following along the tutorial as much as I enjoyed creating it, and that your outcome matches the goals you set for yourself before diving in.
Did I leave anything unclear? Any suggestions? Don’t hesitate to reach out in the comments below! The Design Geeks and myself will be happy to help out.
We’d love to see your tutorial outcomes! Please share them with us on the Design Cuts Facebook page. We’ll share the best ones with the whole Design Cuts community.
The Typographer’s Dream Bundle is still available for a few more days, for an incredible 99% off its original price. Don’t miss out! If you already purchased the 33 font families, I hope you enjoy them, and that this tutorial gave you a sense of what you’ll be able to accomplish with them.
And on that note, that’s it for me! Until next time, cheers!
