Hi there fellow icon lovers, today’s quick tip sheds light on the process of creating convincing icons in Adobe Illustrator. As a subject for our little case study, I’ve chosen a fruit, more precisely a strawberry, which we will have dipped in chocolate.
I chose the reference image from PhotoDune's large library of images and it can be found on this page.
1. Do Your Research
As with any other project, the first thing you should do when you need to create something is learn about the subject. Research images and definitions, and find out what makes the subject tick.
Skeuomorphism is based on determining the characteristics that the design must take on in order for the object to depict its physical counterpart as accurately as possible.
For our case study, we must strip down a strawberry and learn about its basic structure and components.
Color
Say the word strawberry and I bet that almost everybody on this planet will think of the color red. But wait, strawberries aren’t completely red! They have green leaves, and dozens of gold seeded little achenes.
Quick tip: Look up different images on the internet, and save the ones that you think have the most attractive tints of red, as we can use Illustrator’s Eyedropper Tool to borrow and apply those colors to our artwork.
Shape
When I think of the actual shape that defines a strawberry, one particular contour comes to my mind: a heart. No, not one of those boomboxes we carry in our chest, but rather the symbol we associate with caring, and loving, which is probably why strawberries are so deeply associated with love, and passion (remember Valentine’s Day).
At first, you might think that the subject’s shape isn’t important, but when you start looking at how light bounces on and off it, you realize that knowing and having the ability to visualize and reproduce that in your design is probably the most difficult thing to do.
Anatomy
From an anatomical point of view, the strawberry is composed of a main fleshy body (the receptacle) that houses the little seeds (achenes). At the top we find the leaves (calyx) and the peduncle. Because our icon will be based on a rounded rectangle shape, the only things we need to represent are the receptacle, the achenes and the calyx.
2. Bigger Is Better
When working on an icon, whether it’s a strawberry one or something completely different, always try and start from the biggest size possible (most of the time that’s the market/store icon - 1024 x 1024 px for iOS and 512 x 512 px on Android).
Why? Well, when you go down to smaller and smaller icon sizes, you might find that some parts of the artwork need to be either adjusted or removed completely, due to the fact that cramping in all that information onto a very limited space might impact the viewer’s understanding of the subject depicted in the representation.
3. Layer Your Artwork
If you want things to go smoothly, and want to have complete control over every single element on your Artboard, you should always create layers for each and every section of the design.
If you take a look at my layers, you can see that I’ve separated my icon’s base shape from the reflections, the seeds from the body, etc., so that at any given time I know where my elements are. Also, most importantly, if I need to get something out of the way to have a better glimpse at a section underneath, I can do that simply by hiding that layer, without having to fear that somehow I accidentally deleted or moved parts of the illustration along the way.
4. Start From Simple Shapes
When you start creating any project, you must understand that building an intricate piece of artwork starts with basic building blocks. Such is the case for our icon, where you start out by laying down the basic shape and color of the strawberry. These will act as our foundation, onto which we will add details one layer at a time.
Step 1
Create a 512 x 512 rounded rectangle with a Corner Radius of 96 px. Color it using #F01A08 and then make sure to center it both
vertically and horizontally to the Artboard using the Align panel.
Step 2
Create a base seed by using the Ellipse Tool (L) and drawing an 80 x 120 px shape that will act as the
inner pocket holding the seed. Color it using a darker red tint (#DB1808). Create a couple of duplicates and then, moving the one on the top towards the
bottom, create two sections by selecting and then using Pathfinder’s Minus Front
option.
Color the resulting shapes using darker shades of red. Then create two
inner ellipses that will act as our actual seed. Color them using #DF984D for
the larger section and #E7D5A0 for the smaller, inner one. Add some shadows and
highlights and then group all the elements together.
Step 3
Once you start working on the icon’s seeds, you should create a bunch of variations, as you will need to add larger ones to the center and smaller ones towards the extremities so that you can give your design a sense of dimension and volume. Also, try and rotate some of the smaller outer seeds towards the inside.
Step 4
Using the Pen Tool (P), start tracing four leaves, making sure to draw the bigger ones towards the inside and the smaller ones towards the edges. Once you’ve created the base shape, start adding some veins, and endings, and then finish the basic leaf by adding a couple of highlights.
Step 5
Still using the Pen Tool (P), draw a wave-like line and finish it into a shape that will act as our chocolate section. You should know that you can go outside the strawberry’s base shape, and mask the parts that you don’t need using a Clipping Mask.
Apply a linear Gradient to the resulting shape, having the left color set to #69533F
and the right one to a slightly darker #211B13. Change the angle of the Gradient to -90 and you’re good to go.
5. Play With Gradients and Blending Modes
Gradients are a fundamental tool in creating realistic-looking icons. Try and play around with different colors, settings, Opacity levels and most importantly Blending Modes to get the best out of your design.
I for example built the base of the strawberry by leaving the main red shape alone, and applying two white to black gradients with the Blending Mode set on Overlay and the Opacity levels lowered to about 54% for the second one, while I left the first at 100%. The transitions might not be that noticeable, but the end result is clearly there.
6. Use Hard Highlights in Combination With Soft Ones
Use hard highlights for the seed’s bottom section, the chocolate’s top section and the leaves, while applying softer linear fading ones to the strawberry’s body. In order to get that softer look, simply select the highlight, add a linear Gradient with white for both colors, and then simply adjust the Opacity levels for each one.
7. Use Drop Shadows
Wherever you need to cast a shadow from one part of the icon to another, always use the Drop Shadow effect (Effect > Stylize > Drop Shadow) giving it, depending on your taste, a harder or softer feel.
8. Add Subtle Textures
Apply subtle-looking grain textures to parts of the design that look too flat, such as the leaves and the chocolate. You can find the effect under Effect > Texture > Grain. Play around with its different settings until you find something that you like.
It’s a Wrap
That’s about it! If you keep mind all these little things, you should be able to create a darn good strawberry icon, but most importantly adapt some of the tricks to other projects.
