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!

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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. 😜

14. Fill the stem

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

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.

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.

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).

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.