Inkscape tutorial: Donate button

donate_button_thumb

Written by: BDT466

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

Lets Begin

Part One

part_one_donate_button

1) Select the rectangle tool vsd_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 vsd_select_tool from the toolbox and go to the 'tool controls bar'toolbar_settings_donate_button(above the ‘canvas’) and input the following settings: W=200 H=50 pixels

 

2) Now select the node tool vsd_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) Time to add some colour! Select your rectangle with the select tool vsd_select_tool, then open your ‘Fill & Stroke’ dialog(Menu bar - absolute top - Object>Fill&Stroke).

Select a 'Linear Gradient' vsd_linear_gradient for your rectangle(this is the 3rd 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 vsd_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.

 

Part two

part_two_donate_button

1) Go back to using your select tool vsd_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' vsd_linear_gradienticons) 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 vsd_lower_selection_to_bottom 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’ (this is outlined in Part-1>step-1) again and input the following settings: W = 200 H = 25 pixels

 

3) Grab your select tool vsd_select_tool from the toolbox once again, make sure your rectangle is selected. Now from the toolbox select the rectangle tool vsd_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' vsd_reset_rectangle 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 vsd_align_top, once found, click it.

If you have followed the instructions correctly, the box will now move to the top edge of the original rectangle.

 

Part Three

part_three_donate_button

1) Firstly grab the select tool vsd_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 vsd_linear_gradient(P1>step 3). It will automatically have the desired gradient(white to full transparency), all you now need to do is move the gradient handles(via the node tool vsd_node_tool) to the desired position, the optimum places are shown in the example.

 

4) Select the text tool vsd_text_tool_icon 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

part_four_donate_button

1) Firstly deselect the text by clicking on an empty space of the canvas, the select tool vsd_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’ vsd_align_center and ‘Centre on horizontal axis’ vsd_align_middle icons.

This will centre the text in the very middle of the rectangle.

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 vsd_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 re-size 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' vsd_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.

 

Part Five

part_five_donate_button

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, 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

final_product_donate_button

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

 

Downloads

Please do not claim this design as your own. Read our TOU.

 

 

Comments 

 
+5 # dantheman 2011-04-28 10:17
thnks. that helped a lot. I have no idea about inkscape. good beginner course
Reply | Reply with quote | Quote
 
 
0 # BDT466 2011-05-08 22:41
Thanks for the feedback, glad you enjoyed it :-)
Reply | Reply with quote | Quote
 
 
0 # Alit Mardangga 2011-09-15 00:05
Thank you so much, this is what I'm looking for :D
This is great tutorial, especially for newbie like me :)
Reply | Reply with quote | Quote
 
 
0 # Dude 2012-01-07 06:58
You could make buttons for people on fiverr for $5 each. I'd buy one from you since I'm always trying to hurry and beat a deadline :)
Reply | Reply with quote | Quote
 
 
0 # Ceridwen 2012-05-03 23:33
Great tutorial! Very thorough and easy to follow.

I just wanted to add that in case someone has trouble in Part 3 selecting the black rectangle and the golden gradient shape at the same time for doing the Intersection step, you can make the black rectangle wider and then you'll be able to select it and the shape easier.

Thank you for taking your time to do this tutorial! :)
Reply | Reply with quote | Quote
 
 
0 # Ruben 2012-10-16 15:38
EX-CEL-LENT tutorial man! Thanks a lot for offering this, it's very much appreciated!
Reply | Reply with quote | Quote
 
 
0 # Kennis 2013-11-15 13:48
Thank you so much for creating the tutorial. It is very detailed. For a absolute beginning like me, it's extremely helpful! I am planning to go through the tutorials and hopefully I can master Inkscape soon!
Reply | Reply with quote | Quote
 
 
0 # Maites 2013-12-03 06:35
Excellent little project for a complete novice to Inkscape. Thanks for demystifying vector design! What made it particularly encouraging was actually ending up with a finished (and rather professional) product at the end of it.

One comment; I floundered at the 'Path>Intersection' bit; the prior instructions on what to duplicate and when wasn't as clear as it could have been. Otherwise was easy enough to follow; including both verbal commands and an image of the button in question really helped here.

Thanks again, looking forward to doing the other projects!
Reply | Reply with quote | Quote
 
 
0 # Em 2013-12-06 23:34
Tq so much ... This has inspired me to explore more!
Reply | Reply with quote | Quote
 

Newsflash

We are very proud that the Spiro Swirls Tutorial for Inkscape has gained such popularity.

Today, 28 January 2012,  over 140,000 viewers have visited this page and our statistics show that it is still the most popular tutorial on this site. This tutorial is suitable for Inkscape version 0.47 and 0.48.

Thank you all for viewing and providing feedback. We do our best to make this site the best beginner resource site for Inkscape.