Skip Navigation

How to design a delicious-looking strawberry using just one layer

Learn how to create a one-layer masterpiece directly from our design challenge winner, David Blum

A couple months ago, Sketch challenged us to create a unique design using just one layer. While freedom is great to explore and go wild, it’s fascinating how constraints can help us push creativity in so many interesting ways. In this challenge, I’ll show you how I used a single layer and tons of gradients to create a juicy and delicious-looking strawberry — this is the perfect tutorial to level up your gradients game and get comfortable designing more with less.

Before we dive in, here’s a quick look at the final illustration. Feel free to come back to it at any point in the tutorial to keep track of your progress!

image of one-layered strawberry made in Sketch

There’s more to the strawberry than meets the eye, so don’t feel pressured to go through the whole tutorial in one go! Bookmark it for later 😉

Let’s get started!

1. Create an Artboard

First things first, let’s set up our Artboard — this will help us define the size and shape of our strawberry. Press A to create an Artboard, click anywhere on the Canvas and drag until you’re happy with its size. In this case, we’ll use 1200x860 px as our dimensions.

Tip: You can manually adjust these dimensions in the Inspector, so don’t worry if you’re not perfectly accurate when dragging.
image of one-layered strawberry made in Sketch

2. Draw the strawberry shape

Press V to enable the Vector tool and start drawing the outline of your strawberry. Click anywhere on the Canvas to create points around the shape, and curve the lines by dragging the handles. Don’t worry about making it perfect, strawberries come in various shapes and sizes!

However, since we are only working with one layer, make sure to draw the leaves and the stem as part of the same path. Alternatively, you can draw them separately and then merge them into one layer using Layer > Combine > Union in the menu.

image of one-layered strawberry made in Sketch

3. Add the base gradient

Now that we have our shape, let’s give it some color. Head to the Fill section in the Inspector and add a linear gradient. In our case, we’re starting with a lighter red #E81436 and then gradually making it darker using multiple color stops like #E50000, #D20000 and #BF0000.

image of one-layered strawberry made in Sketch

As you can see, I’ve made sure the gradient stops only go as far as half of the strawberry’s width.

4. Create depth with shadows

Time to bring some depth to our strawberry using shadows — we’ll use multiple radial gradients stacked on top of each other. Play around with the placing of the shadows until you’re happy with how it looks.

Use multiple stops, between three and four, on each gradient and make sure to bring down the alpha value (opacity) progressively for every stop. For example in the case of some of our gradients, our first stop has an alpha value of 100, the second stop of 99, the third stop of 44 and the last one of 0.

You’ll find that the logic is the same throughout the whole tutorial: your first gradient stop should be the most opaque and the last stop should always be set to 0. In this case, I combined #590000 and #710000 and lowered their alpha value progressively throughout the gradient.

image of one-layered strawberry made in Sketch

Play around with the in-betweens to your liking, but make sure it’s progressive.

5. Fill the leaves

Now, let’s fill the leaves and stem with small green gradients. Remember to follow the same logic: set the alpha value in the gradient’s first stop to 100 and lower it down progressively to 0.

Here are the green values I combined: #4DBE00, #00BB10, #97FF12, and #8FFF00.

image of one-layered strawberry made in Sketch

6. Create the leaf structures

By layering hard-edged gradients on top of each other, you can create a kind of three-dimensional leaf structure. Try out these values: #325900, #218A00.

image of one-layered strawberry made in Sketch

7. Add depth to the leaves

To give the leaves more depth, layer in additional gradients over the existing ones to darken the leaves towards the bottom. I used #325900, #218A00, #471900, and #000401.

image of one-layered strawberry made in Sketch

8. Clean up the top edge

To create a clean transition from the strawberry to the leaves, you can place some radial gradients above the area — as you’ll see in the image below. First, add some red gradients using #DD0000. Don’t worry about adding multiple stops for this one.

Then, we’re going to use yellow tones to blend the area where the leaves meet the strawberry. Stack multiple gradients and use the following values for every stop.

  • Stop 1: #C90000, alpha 100
  • Stop 2: C94603, alpha 100
  • Stop 3. C0A805, alpha 100
  • Stop 4: CCAC00, alpha 0
image of one-layered strawberry made in Sketch

9. Blend back the top

The previous step probably left your strawberry looking a bit blotchy. To smoothen out the colors, fill the strawberry again with radial gradients — adding stops from red to transparent.

image of one-layered strawberry made in Sketch

10. Add some shine

To make our strawberry a real showstopper, add in a few white radial gradients. Make sure the stops decrease progressively until reaching alpha 0.

image of one-layered strawberry made in Sketch

11. Make the shine organic

To make the shine a little less geometric, cover certain areas again with red gradients. This way, you’ll end up with more realistic shapes.

image of one-layered strawberry made in Sketch

12. Create shiny contours for the seeds

No strawberry is complete without its seeds, and those seeds will need their own shiny glow. This is where the hard work begins. Use radial gradients — going from red to white — to create some elongated O’s. The goal is for these to work as the shiny contours for the seeds.

image of one-layered strawberry made in Sketch

13. Add in the seeds

It’s finally time to add in the seeds. Create oval radial gradients, giving the center a yellow color and darkening the outer edges to give a sense of depth. When placing them, make sure to partially cover the glossy edges you created in the previous step. To give it a more finished look, add in some extra highlights to some of the exposed seeds.

Tip: To enhance the three-dimensional shape of the strawberry, pay attention to the different sizes and orientations you’ll need for the seeds. Sorry if this gets repetitive. 😜
image of one-layered strawberry made in Sketch

14. Fill the stem

Last but not least, fill the stem with brown-green gradients to distinguish it from the leaves.

image of one-layered strawberry made in Sketch

You can also give some depth to the tip of the stem with another radial gradient as I’ve done here.

15. Add noise

The strawberry is pretty much done, but I’d suggest adding a noise overlay to polish the look. Add one last fill and switch to the Pattern Fill tab. Then choose one of the included noise textures, set the opacity to 8%, and add a Multiply blend. This will give the strawberry a more natural texture. Depending on the size of your strawberry, you may also want to change the Type from Fill Image to Tile Image to reduce the size of the noise a bit.

image of one-layered strawberry made in Sketch

16. Add a background color and shadows

This step will depend on your personal preference, but I added a background color to the Artboard (#252525). Then, I applied a few shadows to the layer with different opacities and blurs to help the strawberry stand out.

image of one-layered strawberry made in Sketch

17. Add a reflection

You can also generate another shadow layer to serve as a reflection of the strawberry color. Then, overlay the shadows and reflection with additional shadows on top that have the identical color as the Artboard background (#252525, in this case).

image of one-layered strawberry made in Sketch

There you have it — a delicious-looking strawberry illustration created in Sketch using just one layer. Great job! 👏🏻

If you like what you’ve created, we’d love to see it! Share your strawberry illustration with us on social media using the hashtag #MadeWithSketch. This way, you can showcase your work, inspire others, and connect with fellow designers who also enjoy using Sketch for their projects.

Remember, practice makes perfect, and the more you explore and experiment with Sketch, the more confident and skilled you’ll become in creating various illustrations and designs. So keep up the good work, and happy designing!

David Blum is a product designer based in Switzerland and our One-Layer Design Challenge winner. You can find him on Twitter or LinkedIn.

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free