Learn how to design a delicious-looking strawberry utilizing only one layer

strawberry david blum.png?ixlib=rb 4.1

  <p class="large">A pair months in the past, Sketch challenged us to create a singular design utilizing only one layer. Whereas freedom is nice to discover and go wild, it’s fascinating how constraints may help us push creativity in so many attention-grabbing methods. On this problem, I’ll present you ways I used a single layer and tons of gradients to create a juicy and delicious-looking strawberry — that is the right tutorial to degree up your gradients recreation and get snug designing extra with much less.</p>

Earlier than we dive in, right here’s a fast have a look at the ultimate illustration. Be at liberty to return again to it at any level within the tutorial to maintain observe of your progress!

image of one-layered strawberry made in Sketch
There’s extra to the strawberry than meets the attention, so don’t really feel pressured to undergo the entire tutorial in a single go! Bookmark it for later 😉

Let’s get began!

1. Create an Artboard

First issues first, let’s arrange our Artboard — this can assist us outline the scale and form of our strawberry. Press A to create an Artboard, click on anyplace on the Canvas and drag till you’re pleased with its measurement. On this case, we’ll use 1200×860 px as our dimensions.

Tip: You may manually alter these dimensions within the Inspector, so don’t fear for those who’re not completely correct when dragging.

image of one-layered strawberry made in Sketch

2. Draw the strawberry form

Press V to allow the Vector instrument and begin drawing the define of your strawberry. Click on anyplace on the Canvas to create factors across the form, and curve the traces by dragging the handles. Don’t fear about making it excellent, strawberries are available in numerous styles and sizes!

Nonetheless, since we’re solely working with one layer, be certain to attract the leaves and the stem as a part of the identical path. Alternatively, you may draw them individually after which merge them into one layer utilizing Layer > Mix > Union within the menu.

image of one-layered strawberry made in Sketch

3. Add the bottom gradient

Now that we’ve our form, let’s give it some shade. Head to the Fill part within the Inspector and add a linear gradient. In our case, we’re beginning with a lighter crimson #E81436 after which step by step making it darker utilizing a number of shade stops like #E50000, #D20000 and #BF0000.

image of one-layered strawberry made in Sketch
As you may see, I’ve made certain the gradient stops solely go so far as half of the strawberry’s width.

4. Create depth with shadows

Time to carry some depth to our strawberry utilizing shadows — we’ll use a number of radial gradients stacked on prime of one another. Mess around with the inserting of the shadows till you’re pleased with the way it appears.

Use a number of stops, between three and 4, on every gradient and ensure to carry down the alpha worth (opacity) progressively for each cease. For instance within the case of a few of our gradients, our first cease has an alpha worth of 100, the second cease of 99, the third cease of 44 and the final considered one of 0.

You’ll discover that the logic is similar all through the entire tutorial: your first gradient cease must be probably the most opaque and the final cease ought to all the time be set to 0. On this case, I mixed #590000 and #710000 and lowered their alpha worth progressively all through the gradient.

image of one-layered strawberry made in Sketch
Mess around with the in-betweens to your liking, however be certain it’s progressive.

5. Fill the leaves

Now, let’s fill the leaves and stem with small inexperienced gradients. Bear in mind to observe the identical logic: set the alpha worth within the gradient’s first cease to 100 and decrease it down progressively to 0.

Listed below are the inexperienced values I mixed: #4DBE00, #00BB10, #97FF12, and #8FFF00.

image of one-layered strawberry made in Sketch

6. Create the leaf constructions

By layering hard-edged gradients on prime of one another, you may create a sort of three-dimensional leaf construction. Check out these values: #325900, #218A00.

image of one-layered strawberry made in Sketch

7. Add depth to the leaves

To present the leaves extra depth, layer in extra gradients over the prevailing ones to darken the leaves in direction of the underside. I used #325900, #218A00, #471900, and #000401.

image of one-layered strawberry made in Sketch

8. Clear up the highest edge

To create a clear transition from the strawberry to the leaves, you may place some radial gradients above the world — as you’ll see within the picture under. First, add some crimson gradients utilizing #DD0000. Don’t fear about including a number of stops for this one.

Then, we’re going to make use of yellow tones to mix the world the place the leaves meet the strawberry. Stack a number of gradients and use the next values for each cease.

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

9. Mix again the highest

The earlier step most likely left your strawberry wanting a bit blotchy. To smoothen out the colours, fill the strawberry once more with radial gradients — including stops from crimson to clear.

image of one-layered strawberry made in Sketch

10. Add some shine

To make our strawberry an actual showstopper, add in just a few white radial gradients. Be certain the stops lower progressively till reaching alpha 0.

image of one-layered strawberry made in Sketch

11. Make the shine natural

To make the shine rather less geometric, cowl sure areas once more with crimson gradients. This manner, you’ll find yourself with extra sensible shapes.

image of one-layered strawberry made in Sketch

12. Create shiny contours for the seeds

No strawberry is full with out its seeds, and people seeds will want their very own shiny glow. That is the place the exhausting work begins. Use radial gradients — going from crimson to white — to create some elongated O’s. The aim is for these to work because the shiny contours for the seeds.

image of one-layered strawberry made in Sketch

13. Add within the seeds

It’s lastly time so as to add within the seeds. Create oval radial gradients, giving the middle a yellow shade and darkening the outer edges to offer a way of depth. When inserting them, be certain to partially cowl the shiny edges you created within the earlier step. To present it a extra completed look, add in some additional highlights to among the uncovered seeds.

Tip: To reinforce the three-dimensional form of the strawberry, take note of the completely different sizes and orientations you’ll want for the seeds. Sorry if this will get repetitive. 😜

image of one-layered strawberry made in Sketch

14. Fill the stem

Final however not least, fill the stem with brown-green gradients to differentiate it from the leaves.

image of one-layered strawberry made in Sketch
You may as well give some depth to the tip of the stem with one other radial gradient as I’ve completed right here.

15. Add noise

The strawberry is just about completed, however I’d counsel including a noise overlay to shine the look. Add one final fill and change to the Sample Fill tab. Then select one of many included noise textures, set the opacity to eight%, and add a Multiply mix. This can give the strawberry a extra pure texture. Relying on the scale of your strawberry, you may additionally wish to change the Kind from Fill Picture to Tile Picture to scale back the scale of the noise a bit.

image of one-layered strawberry made in Sketch

16. Add a background shade and shadows

This step will rely in your private desire, however I added a background shade to the Artboard (#252525). Then, I utilized just a few shadows to the layer with completely different opacities and blurs to assist the strawberry stand out.

image of one-layered strawberry made in Sketch

17. Add a mirrored image

You may as well generate one other shadow layer to function a mirrored image of the strawberry shade. Then, overlay the shadows and reflection with extra shadows on prime which have the similar shade because the Artboard background (#252525, on this case).

image of one-layered strawberry made in Sketch

There you will have it — a delicious-looking strawberry illustration created in Sketch utilizing only one layer. Nice job! 👏🏻

If you happen to like what you’ve created, we’d like to see it! Share your strawberry illustration with us on social media utilizing the hashtag #MadeWithSketch. This manner, you may showcase your work, encourage others, and join with fellow designers who additionally get pleasure from utilizing Sketch for his or her tasks.

Bear in mind, follow makes excellent, and the extra you discover and experiment with Sketch, the extra assured and expert you’ll turn into in creating numerous illustrations and designs. So sustain the great work, and comfortable designing!

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

          <li><a href="https://www.sketch.com/blog/one-layer-designs/">Learn how to grasp one-layer design</a></li><li><a href="sketch://">Strive it in Sketch</a></li>