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 also 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 stage up your gradients sport and get snug designing extra with much less.
Earlier than we dive in, right here’s a fast take 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!
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!
Table of Contents
1. Create an Artboard
First issues first, let’s arrange our Artboard — it will 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 proud of its dimension. On this case, we’ll use 1200×860 px as our dimensions.
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 strains by dragging the handles. Don’t fear about making it excellent, strawberries are available numerous sizes and shapes!
Nonetheless, since we’re solely working with one layer, make certain to attract the leaves and the stem as a part of the identical path. Alternatively, you’ll be able to 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 shade. Head to the Fill part within the Inspector and add a linear gradient. In our case, we’re beginning with a lighter pink #E81436 after which steadily making it darker utilizing a number of shade stops like #E50000, #D20000 and #BF0000.
As you’ll be able to see, I’ve made positive 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 prime of one another. Mess around with the inserting of the shadows till you’re proud of the way it seems.
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 among 0.
You’ll discover that the logic is similar all through the entire tutorial: your first gradient cease must be essentially the most opaque and the final cease ought to at all times be set to 0. On this case, I mixed #590000 and #710000 and lowered their alpha worth progressively all through the gradient.
Mess around with the in-betweens to your liking, however make certain it’s progressive.
5. Fill the leaves
Now, let’s fill the leaves and stem with small inexperienced gradients. Keep in mind to comply with 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 prime of one another, you’ll be able to create a sort of three-dimensional leaf construction. Check out these values: #325900, #218A00.
7. Add depth to the leaves
To present the leaves extra depth, layer in further gradients over the present ones to darken the leaves in the 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’ll be able to place some radial gradients above the realm — as you’ll see within the picture beneath. First, add some pink 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 trying a bit blotchy. To smoothen out the colours, fill the strawberry once more with radial gradients — including stops from pink to clear.
10. Add some shine
To make our strawberry an actual showstopper, add in a couple of white radial gradients. Be sure 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 pink gradients. This manner, you’ll find yourself with extra practical 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 laborious work begins. Use radial gradients — going from pink to white — to create some elongated O’s. The objective 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 shade and darkening the outer edges to offer a way of depth. When inserting them, make 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 a few of the uncovered seeds.
14. Fill the stem
Final however not least, fill the stem with brown-green gradients to differentiate it from the leaves.
You can too give some depth to the tip of the stem with one other radial gradient as I’ve carried out right here.
15. Add noise
The strawberry is just about carried out, however I’d counsel including a noise overlay to shine the look. Add one final fill and swap 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 might also wish to change the Kind from Fill Picture to Tile Picture to scale back the scale of the noise a bit.
16. Add a background shade and shadows
This step will rely in your private choice, however I added a background shade to the Artboard (#252525). Then, I utilized a couple of shadows to the layer with totally different opacities and blurs to assist the strawberry stand out.
17. Add a mirrored image
You can too generate one other shadow layer to function a mirrored image of the strawberry shade. Then, overlay the shadows and reflection with further shadows on prime which have the an identical shade because the Artboard background (#252525, on this case).
There you’ve got it — a delicious-looking strawberry illustration created in Sketch utilizing only one layer. Nice job! 👏🏻
When 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’ll be able to showcase your work, encourage others, and join with fellow designers who additionally take pleasure in utilizing Sketch for his or her tasks.
Keep in mind, follow makes excellent, and the extra you discover and experiment with Sketch, the extra assured and expert you’ll change into in creating numerous illustrations and designs. So sustain the nice work, and comfortable designing!
David Blum is a product designer based mostly in Switzerland and our One-Layer Design Problem winner. You’ll find him on Twitter or LinkedIn.
