How to use Inkscape to create banners
By webmaster (home page)
Inkscape is a free program, available for download. Most people will want to select the Windows .exe installer. Once you have it installed & running, read on.
Inkscape is a vector art program -- like Adobe Illustrator. It primarily works with SVG graphics, although export to PNG is available.
![]() | When you start up Inkscape, we're primarily interested in the tools on the sidebar. Click the icon of the colored square. Then click and hold on the blank document. Drag sideways and down to pull a square. Let go of the mouse button when you have it at the dimensions you desire. |
Our rectangle is fairly boring, so let's spice it up. The top row of icons contains a "Fill and Stroke" icon, which looks like a rounded square. Click that. A dialog box will pop up. | ![]() |
![]() | Now that the dialog has popped up, step 1 is to make sure you're on the "Fill" tab, and select the "Radial Gradient" icon (tooltips will pop up as you mouse over the icons, so it should be easy to discover). Step 2, click the "edit" button. A "Gradient Editor" box will appear. Step 3 involves playing with the colors and alpha. When you're happy with the colors, step 4 is to use your mouse to tug on the gradient's control points to get it into a shape that you like. |
For the next few steps, I wanted to get in close, to add a few details. So I clicked on the zoom icon (step 1), and then clicked on my image repeatedly, until it was as big as I needed. Step 2, I clicked on the "Star" icon, and pulled a star (bonus step not covered here: the top row of buttons will give you options to change the points on the star & other goodies). Initially, my star was black & white. So for step 3, I clicked the gradient tool icon, and then I changed the color of the fill (step 4). | ![]() |
![]() | For the final round, I selected the text icon (step 1), and then clicked on the image where I wanted the text to appear, and then I typed in my text. It appeared far too small. So for step 2, I used the "Text Properties" icon to pop up a box that allowed me to size the text (step 3). When I was happy, I clicked "Apply" (step 4) and closed the text pop up. |
Now, I did do one extra step to make the text look like the lighter part of the image was affecting it. I won't tell you what that step was, but it did involve the fill/stroke box that I mentioned in this tutorial. Here's the final result:

There are 0 comments on this tutorial. View & post comments.





