Remember, it’s all about subtlety - and complex subtlety takes time! If you’re ready to take your depth game to the next level, check out David Blum’s tutorial on how to create a one-layer strawberry. If you want to create more complex or realistic designs, then stacking up on techniques will help you achieve the best results. For simple designs, you might just need one. And there you go!Īs you can see, there are many techniques you can use to create depth. This way, it’ll be consistent with the position of our implied light source. To help us unify the whole look, change the background from a solid fill to a gradient that’s slightly lighter at the top. Then, add a light shadow at the bottom to highlight the edge as it rolls back out. Add a dark shadow at the top to make the surface appear to round inward slightly. Add a slight outer bevelįor the finishing touches, let’s add some regular shadows outside the container to contour the top edge. Just apply it to the whole thing with a radius of 1. Right now, the edges are looking a bit too crisp and totally not in line with our subtle approach. If you’re wondering why we created a protrusion instead of an indentation… it’s because we’ve got to flip it! Click on the Flip Vertically button under the Layer Properties section of the Inspector, and watch the magic happen. Take this opportunity to increase the contrast of the Gradient Fill and bring up the alpha of the dark Inner Shadow to make it look a bit more pronounced. This should result in a bulge sticking out of the knob. Hold ⇧ ⌥ and resize it to about 16x16 px. Select the knob and press ⌘ D to duplicate it. With this next step, you’ll finally be able to see what all the hard work has been leading up to. The key to realistic depth is subtleness, so it will take a while for it all to come together. If you find yourself squinting your eyes to notice the difference between steps, don’t worry! That’s totally normal. This shadow is the inverse of the highlight we just created, so set the Y position to -0.5 so it peeks up from the bottom. But let’s tone down the alpha to 1 so it doesn’t look too heavy. Next, add a black Inner Shadow to show the light rolling off the bottom edge. Once you’re happy with the outcome, you can set the blur to 1. At this scale, even a Y position of 1 is pushing things a bit too far, so let’s set it to something like 0.5. ![]() To make it easier to see what we’re doing, let’s set the blur to 0 temporarily. Start by adding a white inner shadow and increasing the alpha value to 100 since white on light gray is already subtle. For example, edges in real life are not as sharp as the edges of a vector shape. Joseph’s pro tip: Always consider the differences between the real object and its 2D depiction. Now that the knob and shadow will be clipped within the path of the container. So how do we make sure the knob only casts its shadow into the switch container?Įasy! Let’s mask the knob and container by selecting both layers, Control-clicking, and choosing Mask Selection from the menu. In this case, the switch container protrudes out further than what we’d want if our goal is for the knob to look more flush with the background layer. When working with depth, we’ll often need to combine a few techniques to create the desired effect. Mask the knob and shadow into the switch container You can also darken this shadow a little bit by increasing its alpha. ![]() Let’s go ahead and add a shadow using the same Y position of 3 and blur of 8. Since the knob is sticking out, it should be casting a shadow. Our container is looking good! Let’s focus on the knob next. If the light source is warmer, the result will be cooler shadows. Joseph’s pro tip: Always keep the qualities of the light source in mind. Below, we’ll teach you how different techniques to achieve this look. ![]() Our eyes can tell the difference between flat and realistic, but it’s hard to figure out the steps to follow. Take a look at the switch below as an example. When done well, the seams of depth are unnoticeable. We know it can be tricky to discern how others might’ve achieved the effect. In this tutorial, Joseph will show you how to create depth intuitively. While you don’t have to go super crazy and photorealistic, adding a bit of depth can really spruce up your icons and interfaces. There’s just something eye-catching about a design that seems to come out of the screen. But sometimes your designs just need more. ![]() We get it! Flat can be sleek, simple and versatile. Or maybe you’re a diehard fan of flat design. Looking to give a little more realism to your designs? Maybe you’re familiar with working with depth or are even a big skeuomorphism enthusiast.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |