Inkscape tutorial: Donate button

Transcription

1 Inkscape tutorial: Donate button By: Very Simple Designs (BDT466) Web Site: This Inkscape beginner tutorial teaches the viewer how to create a simple yet stylish 'Donate' button. Such a button can be used in many different settings, those including - but not limited to: Websites, applications, banners, posters etc. You can also take the design principles such as the engraving effect and apply it elsewhere, this method is very simple but when utilized correctly, is an extremely handy tool to have at your arsenal. I hope you enjoy the tutorial. Before we start Inkscape remembers by default the last settings of a tool. Therefore objects you draw may differ from the screenshots in this tutorial. Help on how to correct the most common settings can be found on this page: Inkscape Beginner Tips (opens in a new window). How big? Naturally being vector the objects are infinitely scalable, however, I would advise you to have even numbers so as to make it easier during certain steps along the way. The example in this tutorial is 200x50 pixels(202x52 including the stroke). Beginners Fun Fact! One of the most useful features of Inkscape is its zoom functions, they are worth there weight in gold. Inkscape has an unprecedented max zoom level of 25600%, just for comparison, Adobe Illustrator maxes out at a puny 6400%! Note: to utilize this amazing feature, hold control while moving your mouses' scroll wheel

2 Lets Begin Part One 1) Select the rectangle tool from the main toolbox(far left) and draw a rectangle. Any colour is fine but be sure there is no stroke applied. This can be done by opening your 'Fill & Stroke' dialog(menu bar - absolute top - Object>Fill&Stroke) then select the middle tab at the very top named 'Stroke Paint'. Make sure that the 'x' is selected, if not then please click the icon to rectify the problem. After you have a shape, grab the select tool from the toolbox and go to the 'tool controls bar' pixels (above the canvas ) and input the following settings: W=200 H=50 2) Now select the node tool from the toolbox(far left) and use it to select your rectangle within the canvas. Now you need to edit the corner shape handles (top right corner of any quadrilateral). Hold Ctrl and drag the handle(represented by a circle) down as far as it will go. Now the ends of your rectangle will be circular.

3 3) Time to add some colour! Select your rectangle with the select tool, then open your Fill & Stroke dialog(menu bar - absolute top - Object>Fill&Stroke). Select a 'Linear Gradient' for your rectangle(this is the 3 rd icon at the top of the dialog), the rectangle should now be a solid colour at the far left end and fully transparent at the far right. Now in the Fill & Stroke dialog, click edit which is situated next to the 'duplicate' button. This will bring up the gradient editor pop-up, this will allow us to change the properties to our liking. For this specific button I have chosen a nice simple yellow-to-orange gradient, this can be done by selecting the drop-down box within the 'gradient editor'. I will now walk you through the process of editing the colours of the gradient. As stated, click on the drop-down menu of colours, firstly we shall edit the base colour on top, now fill in the appropriate settings: R/G/B/A = 255/212/0/255, or alternatively the hex-decimal code(bottom right of the dialog): ffd400ff. Now select the drop-down box once again and click on the lower base colour. Repeat the previous step, but this time, use the following settings: R/G/B/A = 255/150/0/255, or once again, you can opt to simply use the hex-decimal code: ff9600ff. Now you may close the Gradient Editor dialog. 4) Simply select the node tool from the toolbox once again and select your rectangle in the canvas. It will now have some more 'control' points, this is how you can alter the direction of your gradient/s. Simply select the right control node(circle) and drag it to the top of the rectangle, now select the left control node(square), hold Ctrl and drag the node down to the bottom of the rectangle. Holding Ctrl will ensure the line snaps perfectly vertical.

4 Part two 1) Go back to using your select tool and click on your rectangle, now right-click on it and from the drop-down menu select Duplicate (Ctrl+D). Go to your Fill & Stroke dialog once again, this time however, select Stroke Paint from the 3 tabs at the very top. Now select the 'Flat colour' icon(in between the 'No stroke' and 'Linear Gradient' icons) so you will now have a stroke surrounding your rectangle. Now put in the following settings to there respective text boxes: R/G/B/A = 255/125/0/255 or the hex-decimal code: ff7d00ff. Now it s time to thicken the stroke weight, to do this, select the last tab at the top, Stroke Style. Now in the Width text box, simply write 2. Last of all we want to send the stroke to the back, you can do this via the 'tool control bar'. Find the Lower selection to bottom icon and press it, this will - you guessed it - lower the stroke to the bottom, behind the original rectangle. 2) Duplicate your original rectangle(yellow-to-orange gradient) via instructions in Part-2>Step-1. Now refer to your 'Fill & Stroke' dialog and make the newly duplicated object a solid black(this can also be done via the palette just below the canvas). Within in the 'Fill & Stroke' dialog, slide the 'Opacity' meter to approximately 50%, this will make the following steps much easier. Refer to the tool controls bar

5 (this is outlined in Part-1>step-1) again and input the following settings: W = 200 H = 25 pixels 3) Grab your select tool from the toolbox once again, make sure your rectangle is selected. Now from the toolbox select the rectangle tool, the 'tool controls bar' will have changed so as to be relevant to the current tool selected, in this case, the rectangle. As is highlighted in the image, click on the 'Make corners sharp' icon. this will create a perfect 90 degree edge. Tip: The reason being that during the tool control bar operation, the nodes squash and the former goes out of range making it transparent and therefore useless. Although the result may differ slightly upon the de/selection of the 'When scaling rectangles, scale the radii of rounded courners', the process stays the same as it still effects the dynamics that are desired. 4) Open the Align & Distribute dialog(object>align & Distribute this is placed near the bottom of the list). Once open look for Align>Relative to, then click on the drop-down box and choose the Last selected option. Now, the order is very important so pay attention. Select the last created object first(the black rectangle), then hold Shift and select the original rectangle, they should both now be selected. Go back to your Align & Distribute dialog and find the Align top edges icon, once found, click it. If you have followed the instructions correctly, the box will now move to the top edge of the original rectangle.

6 Part Three 1) Firstly grab the select tool from the toolbox, now click on an empty space within the canvas, this will deselect the items. Now click back down on your original rectangle(accessible via the lower half of the object), next duplicate your original rectangle(yellow-to-orange gradient) once again(instructions in Part-2>step-1). Once duplicated, press and hold Shift. While held, select the smaller black rectangle. If all is well so far, the corner will be poking out making it easily click-able. Check the 'status bar' for confirmation that two rectangles are selected. Now it is time to cut it, go to the menu bar up top, select Path>Intersection while both of the objects are still selected. Now all the excess that was going over the edges is promptly trimmed away. 2) Simply make the now trimmed object white either via the Palette (below the canvas ) or the Fill & Stroke dialog. Then make sure the opacity is set to 50%(the slider is placed on the lower part of the 'Fill & Stroke' dialog). 3) No go back to your Fill & Stroke dialog, select the 'Fill' tab from the top, then select once again the linear gradient (P1>step 3). It will automatically have the desired gradient(white to full

7 transparency), all you now need to do is move the gradient handles(via the node tool desired position, the optimum places are shown in the example. ) to the 4) Select the text tool from the toolbox and simply click anywhere and type Donate or any other text of your choice. Make the font Arial>Italic via the 'tool control bar' as indicated specifically by the image, this is a nice simple choice that looks classy and professional. It is also the preferred font for buttons of a similar nature. Part Four 1) Firstly deselect the text by clicking on an empty space of the canvas, the select tool from the toolbox on the left is the tool to use for this. Now reselect your newly created text, press and hold 'Shift', then proceed to select the original rectangle(yellow-to-orange gradient) once again. Go to your Align and Distribute dialog and click both the Centre on vertical axis and Centre on horizontal axis icons. This will centre the text in the very middle of the rectangle.

8 Note: This step presumes you have the same settings as outlined earlier in the tutorial. Once again the order of the selections is paramount to the correct result. As is always the case with the 'Align and Distribute' functions. 2) Once again, click on an empty space of the canvas with the select tool. Click on your text once to reselect, note the directional pull-tabs. Hold Ctrl and Shift and pull on one slowly, the text will resize with the drag of your mouse. Tip: holding shift will make the object re-size from the centre point of the object. Control holds the current Width-to-Height ratio. 3) While your text is still selected we will move the text below the semi-transparent white object by simply pressing Page Dn or using the manual method by clicking the 'Lower selection one step' icon to acquire the same result. Do this until the text is visibly below the white object. And here you have a finished button, this is perfect for display on various items such as websites, blogs or even in applications. Next I will show you how to make a spiffier looking version, however this can only be used providing the size is of a quantifiable amount such as shown in the example.

9 Part Five 1) Select the text once more and open your Fill & Stroke dialog. Make sure the upper tab is on the tab titled 'Fill', now proceed to fill in the appropriate settings as shown: R/G/B/A = 255/225/0/255 or the hex-decimal code: ffe100ff. 2) Now Duplicate the text(instructions: P2>step 1), this time change the colour to the following settings: R/G/B/A = 255/110/0/255 or the hex-decimal code: ff6e00ff. 3) Now hold the Ctrl key and drag the orange text upwards, then release and repeat but go to the left, remember to keep it as even as possible. Or alternatively you may prefer to use the keyboard shortcuts. To do this hold 'Alt' and use your arrow keys to 'nudge' the text into position. Note: the distance that is required for this effect to work differs per the full size. The example above is just about perfect for the example size, however this will change with any changes to the texts size. Also when using the keyboard method that the distance moved is relative to the zoom level, a higher zoom level will instigate smaller more precise movements. 4) Select both pieces of text by utilising the Shift key or using the mouse to envelop both objects,

10 which will then select them both, now go up to your 'Menu bar', click Object>Group. Now they are attached and cannot be separated until you ungroup them. And finally, press Page Dn until the text is below the white object. Summary And there you have it, an in-depth Inkscape tutorial showing you how to create a Donate button. This tutorial is much more than it may seem, it teaches the fundamentals that are requisite before you can create serious designs in Inkscape. The 'engrave' technique is very simple but extremely useful in your future endeavours with the Inkscape program. I hope you enjoyed the tutorial, any feedback good or bad - is greatly appreciated. Cheers