igrot.blogg.se - Inkscape logo making tutorial

Do another light area, another white duplicate of the base rectangle, this time colored in solid white. Change the white highlight area to a gradient from partly transparent white to fully transparent white.For the light area, duplicate the rectangle again, fill it with white, resize it to reduce the height and move it to the top area of the button: Duplicate and fill the copy with a gradient from partly transparent black to fully transparent black, but oriented upside-down than the gradient in the previous example. Start with the base rectangle from the simple button and increase the radius of the corners, for a "rounder" look.I'll get to buttons made in the Aqua style, simulating a liquid or gel effect. Do as many derivative as you want: just change the color of the initial rectangle and instantly you have versions of any color:.Copy the text, make the copy black, apply a slight blur filter, move it a bit to the right and down, move it under the initial text for a 3D look: Choose the font, size and color as you want.

With the Text Tool put a text label on the button.

Duplicate the rectangle once again, move it a bit to the right and down, make it black, apply a slight Gaussian Blur filter and move it at the bottom of the stack, under the rest of the elements.

Put the copy over the original rectangle (I used two rectangles to ease the creation of derivatives with other colors later)

Duplicate the rectangle, fill the copy with a gradient from partly transparent black to fully transparent black.Round the corners (here I used a 16px radius): Using the Rectangle Tool draw a rectangle and fill it with the desired color.I'll start with the simplest button, which will be reused later for the other styles. I will follow some ways to create various kinds of web buttons with Inkscape: simple, aqua, crystal, with and without shadows, of various colors and in various states.