The inspiration behind this tutorial comes from the chatty frenzy and on-going activity in ‘social land’ that’s so prevalent today (think Facebook, texts and Twitter). A mixture of plant-like drawings and geometric shapes suggest a festive mood, while the speech bubbles reinforce the theme of conversation. The colour palette evokes a sense of zaniness like the antsy feeling from reading a juicy story or hearing the breaking news from a trusted friend. Bright pink, red and moss green add to the craze, while a navy blue background sets a more stable tone so things don’t get too crazy.
The first part of the tutorial is created in Illustrator and the second in Photoshop. Although the final working file is a .psd, both the .ai and .psd files are created in a way so that each layer contains one element and is named according to its content. Some of the resources we’ll use along the way are from www.mayang.com/textures and www.cgtextures.com.
The article was originally authored by Wendy Ding and printed within Web Designer issue 168. You may download the companion project assets by clicking here
01 Background begins
In Illustrator, create a new document at 8.5-inches by ten inches. Use the Rectangle tool to create a rectangle in the same size in a navy blue colour – this will be the background. Add a new layer above and create a thinner rectangle in beige – this will be the ‘paper’ that holds the main content.
02 Bubbles in the head
On a new layer, draw a speech bubble with the Pen tool and hit Alt/Option+Drag for numerous duplicates. Resize and rotate each one so none are identical. Right-click>Transform>Reflect to flip horizontally or vertically. Apply colours in red, burgundy, pink and mauve. Make sure they overlap to create a sense of overcrowding.
03 Bubble patterns
Turn the grid on with Ctrl/Cmnd+“. Zoom in very close. Next, create a square spanning across four grids with the Rectangle tool. Click Shift while dragging to make it completely square. Create a circle using the Ellipse tool on the centre points of the first and fourth quadrants inside the square.
04 Colour the circles
Decorate each circle with different colours and apply no fill and no stroke to the square. Select everything and drag it into the Swatches panel to make it a pattern swatch. Click on a bubble and in Window>Appearances, add a new fill and select the pattern swatch. This remains editable in the Appearances panel.
05 Patterns percentage
The scale and rotation of the patterns can be edited by clicking on a speech bubble then hitting S+Enter for Scale and R+Enter for Rotate. Then simply enter the percentage and degree you’d like the pattern to change, just make sure the Objects box is ticked off so only the pattern is affected.
06 Rainbow stripes
Create a rainbow shape with the Pen tool. Next, using a black stroke with no fill, create two separation lines inside. Select all and hit Divide under Window>Pathfinder panel. Right-click and select Ungroup. Apply a different colour for each stripe. Create more rainbows in the header and footer space using the same method.
07 Create the lips
Draw the outside outline of the lips using the Pen tool, then the inside outline. Select both and use the Divide method again. Ungroup and delete the inside shape. Apply hot pink to the lips and add highlights in pale pink. Next, switch to the Text tool and drag out a square-ish text box.
08 Words in the mouth
Fill the text box with IM lingo in Eurofurence: Bold. Right-click>Create Outlines to make it vector shapes. Use the Pen tool to draw a masking shape above the text box, select both, right-click and choose Make Clipping Mask. Position the masked text inside the mouth, draw a dark red shape, right-click>Arrange>Send to Back.
09 Paper line pattern
Make a four-grip square. Draw red lines inside the square as shown above. Apply no fill and no stroke to the square, select everything and drag it into the Swatches panel to make it a pattern swatch. On the paper layer, duplicate the paper shape and make it shorter. Apply the lined pattern swatch to the shorter paper at 40% Opacity.
10 Title text
Draw a curved line with the Pen tool. Click on it with the Text tool to type-on-a-curve. Make the text white, then Ctrl/Cmnd+C then B to paste a copy behind. Nudge the copy and change the colour to brown. Use the Pen tool to trace the inner contour of the text in red stroke, no fill. Make it dotted by ticking Dashed Line under Strokes.
The contents are kept simple to balance the vibrant surrounding design. Keep it neat, aligned and free of clutter. Colour-code and size accordingly.
12 Copy into Photoshop
Create a new Photoshop document at 8.5-inches by ten inches. Copy/Paste (Ctrl/Cmnd+C then V) each Illustrator layer into Photoshop in the same layer order. In the pop-up window, check Paste as Pixels. Nudge and place each layer as needed to ensure that it appears as shown above in the screenhot.
13 Japanese paper
In Photoshop, open floral1.jpg, select a portion with the Rectangular Marquee tool and copy/paste it onto a new layer below ‘rainbows’. Place it under one of the rainbows. Back on ‘rainbows’, select a stripe with the Magic Wand tool and choose Select>Inverse. With this selection active, go back to the floral1.jpg layer and hit Delete.
14 Let the floral through
Back on ‘rainbows’, Select>Inverse again, hit Delete and now the floral pattern shines through beneath. Repeat this process for the other stripes. Experiment with Hue/Saturation levels (Ctrl/Cmnd+U) to change colours and contrast for variation. When finished, select all the floral1.jpg layers and hit Ctrl/Cmnd+E to merge into one.
15 Decorative sketches
Plug in the Wacom tablet and open Window>Brushes. Set Shape Dynamics to Pen Pressure. Using the Brush tool set to a basic solid-edge brush, sketch plant-inspired organic shapes around the header and footer. Use pastel candy-pop colours. The line width undulates according to the amount of pressure applied.
16 Background pattern
Create a new layer above the background. Sketch some IM-related icons. Arrange six of them in an alternating diamond formation. Drag the layer to the New Layer icon for a copy and arrange it so it sits seamlessly to the original. Repeat the process for the other side and once finished, merge the layers and set to 40% Opacity.
17 Fraying edges of paper
Select the Eraser tool in a slightly grungy brush. Set Windows>Brushes to Shape Dynamics – Pen Pressure and gently erase away at both edges using 65% Opacity. Make sure the fraying looks organic, as though it withered away naturally. Use the Dodge tool at 4% Exposure along the edges to slightly darken it.
18 Sandy texture
Open sand.jpg and Copy/Paste it onto a new layer above ‘paper’. Change its Opacity to 20% Multiply. Trim away at it by using the Rectangular Marquee tool to select and Delete certain portions so it only covers the navigational area. Doing this creates a nice visual separator between the navigation and main body.