Home Sketch Easy methods to design a delicious-looking strawberry utilizing only one layer · Sketch

Easy methods to design a delicious-looking strawberry utilizing only one layer · Sketch


A pair months in the past, Sketch challenged us to create a novel design utilizing only one layer. Whereas freedom is nice to discover and go wild, it’s fascinating how constraints may also help us push creativity in so many fascinating 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 proper tutorial to degree up your gradients recreation and get comfy designing extra with much less.

Earlier than we dive in, right here’s a fast have a look at the ultimate illustration. Be at liberty to come back again to it at any level within the tutorial to maintain monitor 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 wherever 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’ll be able to manually modify these dimensions within the Inspector, so don’t fear should you’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 wherever on the Canvas to create factors across the form, and curve the traces by dragging the handles. Don’t fear about making it good, strawberries are available in varied sizes and styles!

Nonetheless, since we’re solely working with one layer, ensure that to attract the leaves and the stem as a part of the identical path. Alternatively, you possibly can 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 now have our form, let’s give it some coloration. Head to the Fill part within the Inspector and add a linear gradient. In our case, we’re beginning with a lighter purple #E81436 after which steadily making it darker utilizing a number of coloration stops like #E50000, #D20000 and #BF0000.

image of one-layered strawberry made in Sketch

As you possibly can 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 deliver some depth to our strawberry utilizing shadows — we’ll use a number of radial gradients stacked on high of one another. Mess around with the putting 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 deliver 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 one in all 0.

You’ll discover that the logic is identical all through the entire tutorial: your first gradient cease needs to be essentially 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 ensure that 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 here are the inexperienced values I mixed: #4DBE00, #00BB10, #97FF12, and #8FFF00.

image of one-layered strawberry made in Sketch

6. Create the leaf buildings

By layering hard-edged gradients on high of one another, you possibly can 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 offer the leaves extra depth, layer in further gradients over the present 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 possibly can place some radial gradients above the realm — as you’ll see within the picture beneath. First, add some purple 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 realm 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 purple to clear.

image of one-layered strawberry made in Sketch

10. Add some shine

To make our strawberry an actual showstopper, add in a couple of white radial gradients. Ensure 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 purple gradients. This manner, you’ll find yourself with extra lifelike 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 purple to white — to create some elongated O’s. The purpose 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 coloration and darkening the outer edges to present a way of depth. When putting them, ensure that to partially cowl the shiny edges you created within the earlier step. To offer it a extra completed look, add in some additional highlights to a number of the uncovered seeds.

Tip: To boost 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 can even give some depth to the tip of the stem with one other radial gradient as I’ve finished right here.

15. Add noise

The strawberry is just about finished, 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. It will give the strawberry a extra pure texture. Relying on the scale of your strawberry, you might also need to change the Sort from Fill Picture to Tile Picture to cut back the scale of the noise a bit.

image of one-layered strawberry made in Sketch

16. Add a background coloration and shadows

This step will rely in your private choice, however I added a background coloration to the Artboard (#252525). Then, I utilized a couple of 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 can even generate one other shadow layer to function a mirrored image of the strawberry coloration. Then, overlay the shadows and reflection with further shadows on high which have the equivalent coloration because the Artboard background (#252525, on this case).

image of one-layered strawberry made in Sketch

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

In case you 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 possibly can 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 good, and the extra you discover and experiment with Sketch, the extra assured and expert you’ll grow to be in creating varied illustrations and designs. So sustain the great work, and completely happy designing!

David Blum is a product designer primarily based in Switzerland and our One-Layer Design Problem winner. Yow will discover him on Twitter or LinkedIn.


Please enter your comment!
Please enter your name here