Our end result turned out pretty good! Hopefully some of these techniques will “shed some light” on your designs. We learned a lot about blending certain colors and using some pretty advanced gradients to create some realistic lighting. With everything else in place, you should have ended up with a cool scene with pretty accurate, realistic lighting! Position the shadow object under the droplet (again, you can use Align and Distribute).įinally, apply that same radial gradient we’ve been using, position it like I have it below, and you should have a neat looking shadow for the droplet.įor a final touch, I added a really small white stroke on the droplet to highlight it some more. Then just put them in position, select them, and Path > Difference to get our shadow object. To do this, let’s duplicate the droplet again and flip it vertically. Now we need to add a shadow to our droplet. You should have something like this so far. Apply the same radial gradient we used for the droplet and position it like I have it below.įinally, apply a 10px Blur to blend it in some more. You’ll end up with a perfect sliver to use as a glare. Now just place them on top one another like I have them below, select them both, and head up to Path > Difference. In Inkscape there are various method using which we can create gradient and which can not only be applied to the fill but also the strokes to create some stunning effects. To create a glare for our droplet, duplicate the droplet and stretch one out as I have it below. You’ll want colors similar to the light source since this is a reflection, so I’ll just list what I ended up using below. We need to add a radial gradient to this droplet, but the colors will be a bit tricky. Now edit those nodes into a droplet shape, such as below. Go ahead and draw an ellipse like I have below. Now that we have a light source, we should add a subject to receive this light - such as a water droplet. Also, instead of just white, let’s do a radial gradient with white in the center, but then fades out to a complete transparency on the outside. Grab your Polygon tool and draw a star with 12 Corners and a 0.110 Spoke ratio. Let’s do another circle at 105px by 105px, white, and a 20px Blur.įinally, let’s add some flare. I was mostly referring to code like fill: linear-gradient(red, blue) which does not work because fill is from SVG which has its own gradient system, and linear-gradient is from CSS and made mostly for backgrounds. Position it over the orange circle also (use Object > Align and Distribute to be precise). In my 2016 article How to work with SVG icons, I concluded the Advanced section with this warning: sorry, gradient fills won’t work. Next, draw another perfect circle at about 125px by 125px, give it a yellow color, and apply a 20px Blur.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |