Did you also had fun creating the cityscape illustration? Well, I got good news for you. I thought with Summer at full swing, why don’t I create a beach illustration. So here is an other extended tutorial for you. This is a detailed step-by-step tutorial on how to create a very simple 2D composition of a beachball, an umbrella, bucket with shovel, blue sky, tiny clouds and a sandy beach…
General setup
Below is an image that shows the final result of the illustration together with the Layers panel. Each object is saved in a separate sublayer, and positioned in the right stacking order: sky, and sea at the bottom, the beach, the clouds, and the bucket with shovel in the front. The beach is placed in front, because I wanted to have the beachball sink a little bit into the sand.
Preparation
Just like before, I decided to give you a little help to get started. I’ve saved a template file with the necessary color Swatches, document dimension, and a horizontal guide in place to position the elements of your illustration on. There is also a separate swatches ASE file included.
Choosing the right color palette
People often ask me how I choose the color palette for my artwork. It’s hard to give a simple and helpful answer to this question. Most of the time I choose my colors rather random, and very intuitively based on what I feel goes well together, and suits the subject, or brand etc. For this illustration, I didn’t want to choose flashy colors, or colors that are very typical for sun, beach, sea, and beachball etc. I also wanted to use only a very limited amount of colors, and a color palette that is a bit off, a bit vintage like if you like: the blue isn’t really blue, the red isn’t red, it’s more orange… Same goes for the yellow, and for the white.
What often helps if you don’t have any color inspiration is extracting colors from a photo or using the color bar at my inspiration stream. When you choose colors I mostly work with 1 or 2 bright colors that contrast well together, and a light and darker color. They can be complementary, but it’s not necessarily needed. They need to create a certain harmony together. But remember, good colors on their own doesn’t guarantee you’ll end up with a beautiful design or artwork. The way you apply your color palette is as important as the colors themselves. As are many other factors… but a book could be written on this subject alone. So let’s not distract our minds all too much on this matter and move on :)
Let’s get started!
Beachball
Well go object by object, starting with the beachball. There are couple of ways to draw a beachball. As usual, I decided to keep it as simple as possible.
Draw circle
Start by drawing a circle of 100 x 100 px. Select the Ellipse tool, click the canvas, and enter 100 as pixel value in both fields. You can also drag a circle with Smart Guides on (make sure View > Smart Guides is checked), so you can see the width and height values, while holding down the Shift key, and stop dragging when you have reached a value of 100 pixels. Also make sure View > Snap to Point is checked for this tutorial. Apply the off-white swatch as fill for the circle.
Draw 3 straight lines
Add a vertical guide on the center of the circle (drag out from the Rulers. If the Rulers aren’t visible, go to View > Rulers > Show Rulers or hit Cmd/Ctrl + R). Before proceeding to the next step, change the Fill and Stroke swatches at the bottom of the Toolbar. Click the Fill swatch in the Toolbar, and select the No Fill swatch (the one with diagonal red line), and click the Stroke swatch and choose black.
Now select the Pen tool and draw 3 straight thin black lines as follows: Make sure to start outside the circle at the top to the right of the vertical guide, and make 3 clicks in the order and approximate place as shown in the illustration above, with the 2nd click exactly on the vertical guide. After the 3rd click, when you have drawn the first 2 lines (which are connected to each other), hold down the Cmd/Ctrl key and click once on your canvas. This will break the connection for the line for the next click, because we want the 3rd line to be a separate one, not connected to the 2 lines we've already drawn.
For the 3rd line make sure to make the first click in the intersection point of the vertical guide and the corner of the 2 lines, and also make sure the 2nd click is outside the circle and somewhere to the right of the vertical guide. You can of course also decide to use the line tool too draw these lines. It’s up to you.
Copy Reflect
Select the 3 lines using the Selection tool (black arrow). Use the Shift key to select the 3nd line. Go to the Toolbar and choose the Reflect tool. Click in the intersection point on the vertical guide as shown in the image above, choose Vertical Axis, and hit the Copy button.
Make with Warp
Select all the black lines, and go to Object > Envelope Distort > Make with Warp…. In the Warp Options window that appears, choose Arch from the dropdown menu, choose Horizontal, and put the Blend slider to 50%. Check Preview to check out the result. If things look more or less similar as shown in the image above, hit OK.
Select the warp object and make it less wide. Move the object down if needed. You need to make sure all black lines go outside the circle, and that the object and the circle are vertically center aligned with each other. If Smart Guides are on you should get a visual clue when the object is perfectly centered, but if in doubt, you can select both objects and choose the Vertically Center Align option from the Option bar at the top of your document.
Expand
Select the warp object and go to Object > Expand… In the Expand window leave the settings as is (Object and Fill are selected) and click OK.
Divide
Select both the circle and the lines, go to the Pathfinder panel and select te Divide option. This will cut the circle into the divisions the way we want, to give each part its proper color.
Apply color
The object is now grouped. To select part by part to apply a color, we need to double click the object first. This will take us into Isolation Mode. Notice the grey bar at the top of your document. Normally, all other objects in your document will be faded out as well, but since we only created this object, you don’t see this effect. Now you can select one part at a time and give it its proper color fill. See the image above for guidance.
Rotate 45°
The only thing left to do is to rotate the beachball 45°. To do this, go out of Isolation Mode first. You can do this by clicking the arrow button at the top, or by simply hitting the Escape key. Select the beachball using the Selection tool (black arrow). Hover your cursor over one of the corners of the object until your cursor changes into rotation arrows. Now start dragging to the right to rotate the object, and hold down the Shift key so the rotation value jumps exactly to 45° (see image above). Release the mouse. Lastly move the beachball into position, so the bottom of the ball touches the horizontal guide. Then use the down arrow key on your keyboard twice to move the ball just a little bit more down.
Organize
Next step: name & organize your layers. It’s important to keep your file clean so you can save time in a later stage in case your illustration becomes complex. It might feel ridiculous to do this at this stage and for such a simple illustration as this. This is only pure advice I give you. It’s of course up to you whether you follow it up or not ;) Click the triangle next to the layer name in the Layers panel, double click in the text field of the object (named
), and rename it to beachball.
Bucket
Draw a square
Select the Rectangle tool and draw a square of 50 x 50 px. Apply the lightest teal fill. Move the square to the left of the beachball, and into position so the bottom anchor points touch the horizontal guide.
Draw a rectangle
Draw a slightly wider rectangle above the square. Make sure the bottom line touches the top of the square. You should get a visual clue (a green line appears, and it should snap to the line) when this happens. Apply the other (slightly darker) teal fill. Select both the square and the rectangle and choose the Vertical Align Center option from the Options bar.
Move bottom anchor points inwards
Select the Direct Selection tool (white arrow), and select the left bottom anchor point of the square and the rectangle. Hit the right arrow key twice. Now select the right bottom anchor point of the square and the rectangle, and hit the left arrow key twice.
Draw bucket handle
Select the Ellipse tool, and draw a small circle (7 x 7 px) in the center of the rectangle. Since this is a small circle make sure to zoom in a little bit first. Draw this circle from the center out. To do this, first hover with your cursor over the center point to find it. You should see the word ‘center’ in small green type. Hold down the Option/Alt key first, click and start to drag outwards, then also hold down the Shift key . So you should hold down both the Option/Alt and Shift key while dragging. When you’ve reached the size, make sure to release the keys first, then the mouse. If this seems hard to do you can choose to click in the center and enter the value 7 and hit OK. Then select the rectangle and the circle, and use the align tools to center align both objects vertically first, and then also center align horizontally. Lastly, make sure to select the circle, rectangle and square, and align all 3 objects vertically.
Apply Fill
Apply the light teal fill to the small circle, and change the fill opacity blending mode to Multiply, to darken it al little bit.
Bucket handle
Select the Line tool and draw a diagonal line starting from the center point of the small circle. While drawing (by click dragging) the line, hold down the Shift key to draw a perfect diagonal line.
Apply the darkest teal as stroke color, and select the value of 3 pt from the Weight dropdown. Then also choose the Round Cap option. Select all bucket shapes and hit Cmd/Ctrl + g to group the object.
Shovel
Draw a short vertical line (see image above), and apply a Weight of 7 pt tick. Give it the orange color, and make sure the line has a Straight cap.
Handle
Select the Rectangle tool and draw a small rectangle right above the vertical line (see image above) for the handle of the shovel, using the same stroke width and color as the stroke. Select both objects and choose Vertically Center Align from the Options bar at the top.
Round corners
Select the Direct Selection tool (white arrow), and select the 2 bottom anchor points of the rectangle. 2 small circles should appear. Click into one of them and start dragging inwards to the end so the bottom part becomes fully rounded. This is a feature only possible in version CC 2015 of Illustrator. For those who use an older version of Illustrator, I recommend the same technique I’m using to draw the top part of the umbrella (see further below in this article): circle + rectangle, in combination with Pathfinder’s Minus Front option, but of course with the rectangle positioned towards the top of the circle.
Organize
Select both objects and group them together (Cmd/Ctrl + g). Go to the Layers panel and name your sublayers (see image above): drag the ’shovel’ layer into position. Move it under the ’bucket’ layer.
Move & Rotate
Select the shovel and move it into place as shown in the image above. Rotate it a little to the left, just as you learned before using the Selection tool, but this time you don’t need to hold down the Shift key since it only needs to be rotated a few degrees to the left.
Select both the bucket and the shovel and move them into position as shown in the image above.
Umbrella
Draw a circle
Select the Ellipse tool and draw a circle of about 200 x 200 px size. Give the circle the orange fill.
Draw a rectangle
Select the Rectangle tool and draw a rectangle on top covering about 2/3 of the circle, as shown in the image above. Make sure the rectangle is also wider than the circle.
Minus Front
Select both objects, go the Pathfinder panel and choose Minus Front from the Shape Modes.
Draw line
Select the Line tool, and draw a vertical line right in the center of the shape (the vertical green line that appears in the center should be your visual clue). Draw the line from top to bottom and hold down the Shift key to keep the line perfectly vertical (see image above).
Apply stroke color
Apply 12 pt as Weight, and give it the dark teal swatch color stroke. In the Appearance panel select Multiply as blending mode at 50% Opacity.
Draw arches
Double click the Arch tool. In the Options window that appears, set the Base Along to the Y-Axis. Next make sure your fill swatch is set to no fill, and your stroke swatch is set to black (or any other color, it doesn’t matter really). Now draw an arch starting from the top center point of the umbrella. Just click drag like you draw a line. Make sure the arch goes a bit further below the orange part (see image above).
Now draw a 2nd arch to the right of the 1st arch, again starting from the top center point of the umbrella as shown in the image above.
Copy Reflect
Select both arches, and select the Reflect tool. Click exactly on the path of the vertical teal stroke. In the Reflect window that appears, select Vertical as Axis. Check the Preview option to see what will happen. Hit the Copy button to copy the arches.
Divide
Just like we did for the beachball, we will cut the umbrella into segments so we can apply a color to each segment. Select the arches and the orange shape below. Go to Pathfinder panel and select the Divide option.
Add color
Just like before with the beachball, the object is now grouped, and you have to double click it to go into Isolation Mode so you can apply a color to each part. Give the 2nd and 4th part the off-white color. Hit the Escape key to leave Isolation Mode.
Organize
Group the umbrella objects together (Cmd/Ctrl + g), and give the sublayer a name (’umbrella’). Move the sublayer into place, below the beachball.
Create composition
Create a perfect composition by rotating the umbrella 45° to the right. Hold down the Shift key while rotating.
Move the umbrella into the right position as shown in the image above.
Beach
Select the Rectangle tool and draw a yellow sandy rectangle below the horizontal guide on top of the 3 objects (so the bottom of the beachball is slightly hidden).
Sky
With the Rectangle tool still selected, draw a light blue rectangle above the beach.
Organize
Organize your layers again by naming the objects, and by moving them into place in the Layers panel. The sky should be moved down below all other layers.
Clouds
Next we’ll create some clouds. Select the Ellipse tool and draw a couple of slightly overlapping circles as shown in the image above. You can use a white fill for now for each circle. Make sure the circles overlap slightly.
Draw a line
Select the Line tool, and make sure the fill swatch in the toolbar is set to no fill, and the stroke swatch is set to a color. Now draw a horizontal line on top of the circles (hold down the Shift key). Make sure the line doesn’t touch the blue sky when it crosses the circles, and that it is wider then the group of circles.
Divide
Select the circles and the line and choose Pathfinder > Divide just like before.
Remove unnecessary parts
Select the Shapebuilder tool from the toolbar, and remove the unnecessary parts by clicking the shapes one by one while holding down the Alt/Option key. A minus should appear in your cursor as shown in the image above.
Unite
With the object still selected Go to Pathfinder > Unite.
Clean path
This step is not really necessary, but I’m a bit of a nitpicker when it comes to clean paths. I just hate unnecessary anchor points. So if you’re with me, you can decide to clean up the path of the cloud by removing all unnecessary anchor points. Select the Delete Anchor Point tool from the toolbar and click in the anchor points that should be removed. Hopefully Adobe will soon come with a version where this step becomes unnecessary.
Add more clouds
To add a couple of more clouds, repeat the steps to create a cloud, or copy reflect and resize the one you’ve created. When you are ready, select all the clouds and apply the off-white color swatch as fill, but only for about 60%, by moving the slider in the Color panel to 60% (see image above).
Sea
Last but not least, we’ll create the sea in the very distance. Select the Rectangle tool and draw another rectangle, right above the beach rectangle. Give it the light teal color at 75% (move the color swatch slider to 75%). Give the object the name ’sea’ in the Layers panel, and move the sublayer into place right above the ’sky’ layer.
Finishing touch
Add pattern effect
Your illustration is finished, but you could also decide to add a subtle vector pattern that lays on top of your illustration. Adobe Illustrator has some nice subtle patterns that you can apply to your artwork. In this illustration I’ve used the pattern ’USGS 22 Gravel Beach’. You can find this pattern if you go to the Swatches panel, and go into the Options dropdown menu (arrow menu icon at the top right of the panel). In this dropdown choose Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures.
To quickly add a simple pattern effect on your illustration, you can draw a rectangle on top that covers your entire illustration, and give it a pattern fill like ’USGS 22 Gravel Beach’. Then in the Appearance panel you can change the blending mode of the fill to Overlay. You can also play with the Opacity value.
All vector-based
The beauty of these subtly patterns is that they are all vector-based. If you scale your image up to 500% everything will still look crystal sharp. You can also decide to apply different patterns to certain objects, by applying a 2nd fill on top of the color fill. In the example at the top of my article, I’ve applied another pattern for the beach and the sea. You can also resize the patterns using the Scale tool (and by double clicking the tool to evoke the Scale options window). By only checking the option Transform Patterns, you only scale the pattern but not the object. Try it out! Experiment with patterns, blending modes, opacity values etc. The possibilities are really endless.
That’s it! I hope you’ve enjoyed this tutorial.
Enjoy the Summer!