Thumb thumb monika Monika Čivić Friday, August 11, 2017

Have you always been interested in graphic design but never had a chance to get the right tool? If that's the case, you probably haven't heard of an amazing application called Inkscape. What is it and how to use it? Is it a good free alternative to more expensive graphic design software? How to use its basic tools or create grid layouts, mockups, and various UX/UI elements? Let's find out together! :)

Not Knowing Where to Start

When I first started designing for the web, I was pretty intimidated by the tools that majority of designers recommended for creating wireframes and website mockups. I didn’t have very powerful machine nor the money to purchase any of those programs, so I was determined to find a proper free alternative. Also, I was aware that my design skills wouldn’t come overnight - to make it happen, one should first practice. A lot! And it is always awesome to have an opportunity to do that without big initial costs.

My pursuit of free design tool ended up being much easier than you think. How? Well, almost all Google search results led me to an amazing tool called - Inkscape, that I am going to present (more or less) briefly. It is a great alternative to Photoshop, Illustrator, and Sketch when you need to design a specific UI element or entire mock-up before jumping into prototyping or writing any code. 

So, What Is Inkscape?

 As described on inkscape.org:

“Inkscape is a professional vector graphics editor for Windows, Mac OS X, and Linux. It's free and open source."

Along with many useful tips, tricks, and documentation, you can find and download various versions of Inkscape. Even though it is entirely free software, Inkscape is used both by professional and amateur illustrators, graphic and web designers. Once you get the skills,  you will be able to create pretty much any vector imagery that pops into your head. Within Inkscape, you can accomplish almost any design task - from creating simple textual designs to infographics, logos, wireframes, UI elements, icons, social media posts and much more.  Since I am focusing on web design, the steps presented further in the post will help beginners in that area to start their first project. However, if that is not what you aim for and you are just curious to know more about Inkscape, I still welcome you to follow along with the rest of us. 

Grid Layout and How to Define It

Before starting a specific project, it is useful and recommended to create a grid layout inside Inkscape canvas. You can do so by using Inkscape’s tools, such as canvas, rulers, and guidelines. The grid keeps elements of your website aligned and make the overall design look clean and organized. What is more, turning your amazing design into code will be much easier when you have a grid. Creating a grid layout can be a little bit tedious at first. It includes some calculations and repetitive tasks, but once you make it, you can always save it and use for other projects. Here is one way to do it: 

1) Set the Canvas Size

To set the size, go to File → Document Properties and define the canva’s height and width. Also, in the dialogue box shown in the picture below (Figure 1.), change the measurement unit to pixels. For a start, you can set the size to 1200x720px for the desktop version of the website. Keep in mind that different devices require a different version of the design, but once you learn how to set up the default one, it won’t be complicated to do the rest. In case you are making a scrollable site, just add some extra height pixels later.

Canvas Size Setup

Figure 1. Setting the canvas height and width (File → Document Properties) 

2) Draw the Grid

The most common grid for desktop devices is 12 column 960px wide grid. However, designers and developers nowadays choose various grids. To create a custom grid, divide the desired width by 12. Take into consideration some pixels for the gutter between the columns, as well - let’s say 20px between each column. Start drawing the guidelines according to the size of the canvas and the grid width. To draw the guidelines, click the rulers surrounding the workspace. Hold and drag the guideline to the canvas. Ruler on the left provides vertical guidelines, while top ruler provides horizontal ones. Create as many guidelines as you need. To specify their position double click on each guideline and place it according to your calculations. Just like in Figure 2. To hide or show the guidelines, try clicking on the rulers.

Guidelines Setup 

Figure 2. Positioning the guidelines 

3) Lock the Guides

Once you start drawing the elements and moving them around, you might misplace the guides from their position, which can get pretty annoying. To avoid misplacing, click on the lock icon situated in the top left corner beside the rulers and lock the guidelines. By the end of this initial step, you should have something looking like Figure 3.

Custom Grid Layout

Figure 3. Custom grid example made with Inkscape 

Play with Inkscape Tools

Now you have a cool grid layout set and ready. Even though it doesn’t look very exciting, it is a necessary foundation for the fun part coming on next - filling the layout with some shapes, text, and images using Inkscape tools. I won’t cover this section in details because mastering the usage of tools will come over time. I will just introduce you with some of the essential tools and show a few examples of what they can do. Be free to follow along in Inkscape, try each tool or even recreate the examples presented below. 

Select Tool

Select Tool

Select tool is used to choose the objects in your document and change their size, rotate them, flip them and manipulate in different ways. To select multiple objects click on the objects while holding the Shift key.

Rectangle Tool  Ellipse 

Rectangle and Ellipse Tools

The tools for drawing basic geometric shapes such as squares and ellipses are the ones you will most definitely use a lot. Whether it is for creating buttons, menus or any other container that might appear in your design. 

Polygon Tool

Polygon Tool

If you need more complex shapes, like triangles, stars, hexagons and various polygons, you should reach for this tool. Play with its options to get curvier or sharper shapes. Maybe you get surprised by something really cool and reusable.

Fill and Stroke

Even though it is a very basic option, fills and strokes help you create design wonders. Don't be afraid to use your imagination, colors and options like Gradient, Blur, Stroke style and Opacity.  Make different buttons, shadows, and containers for your website elements. In order to open Fill and Stroke toolbox click Object → Fill and Stroke

Text Tool

Text Tool

There is no website without textual content and typography as its key elements. So, even though you probably won’t write the actual copy of the website, you still have to style some textual content. With the text tool, you can choose fonts, adjust line heights, align paragraphs, set letter spacing etc. There are a lot of beautiful and free fonts out there. Thus, go ahead and download them and create something worth showing off. 

Zoom Tool

Zoom Tool

When you move over your canvas and work on different parts of the page, zooming in and out is something you can’t avoid. Since it is really essential, I recommend learning keyboard shortcuts and using mouse wheel while holding the Ctrl key. Give it a try. 

Duplicate, Copy and Paste

To speed up the design process, you will likely duplicate, copy and paste the website components. Ctrl + D is the fastest way to do it as it automatically creates an object and places it on top of the existing one. Ctrl + C copies the object which you can paste with Ctrl + V.

As I had promised earlier, we went through few fundamental Inkscape tools. Still, you might have no idea what to make with them. Figure 4. is an example of multiple buttons I made with Rectangle, Circle, Polygon, Fill and Stroke, Duplicating and Copying. Try to guess which tool I used for particular effect. However, let’s not stop with the buttons. Why don’t you try creating your own icons, too? Use some basic shapes like me with the little panda below in Figure 5.

 

Different Buttons

Figure 4. Buttons made with basic Inkscape tools

Panda Icon and Logo

Figure 5. Panda icon made of basic shapes.

 

A Little Extra Magic for More Fun with Your First Project

Since we have already covered the basics, you should go and try to make a mock-up for your personal website. However, I want to hang out with you more, so I prepared some extra tricks! I guarantee that, once you get used to them, they will become as essential as the rectangle.

Align and Distribute

One of the most useful tools is definitely Align and Distribute tool. It allows you to align elements quickly, relative to a specific feature. As follows, you can align them relative to the page, relative to the order of selecting or to the bigger and smaller object. What is more, this tool will help you set the equal distances between multiple objects.  To use this tool and make your designs as neat as a pin, go to Object → Align and Distribute.

Align and Distribute Tool

Figure 6. Align and Distribute Options 

For example, I used Align tool to set the navigation items in the middle of the black container and Distribute to set the equal spaces between those items and between social media icons. Similar actions are done in the footer, as well.

Navigation Bar

Page Footer

Figure 7. and Figure 8. Navigation and Footer examples 

Clipping

Setting Masks and Clips comes in handy when you need an image of a particular size or shape. How can you achieve that? Choose an image you like and draw a shape over the part you prefer to be visible. Select both the image and the shape and click Object →  Clip →  Set. The examples in Figure 9. show how I used this method to get various panda images. A slightly different method is used in the last example with the text because the text needs to be converted to Path first. Select the text, click Path → Object to Path and apply the method described above. Finally, if you are wondering how to get the sticker looking object, try playing with polygon tool and see for yourself.

Masking and Clipping

Figure 9. Masking and Clipping

With this Inkscape insider, we have only scratched the surface of all the features that Inkscape offers to the future web designers. In order to master Inkscape, all you need to do is practice, practice and practice some more. In addition, try watching youtube tutorials or reading more articles. There are a bunch of them, mostly made by amazing designers.  Find inspiration on Pinterest, Dribbble, Behance and in your own surroundings. I sincerely hope this post encouraged you to "Draw  Freely!", just like Inkscape slogan says. 

"Draw Freely!" 

As you can see, you don’t need any expensive tools and equipment to do so. However, if you still don’t have a clear image of what Inkscape can do, take a look at  Figure 10. It is a simple website mockup and the summary of today’s tutorial. Useful thing is that you can also export every single element and use it for later prototyping and actual coding. Hopefully, I will cover some of those options in future blog posts. Till then, I challenge all of you web-designers-to-be to recreate this simple Panda page and have fun! :D

Simple Panda Website Mockup

Figure 10. Simple PandaPanda website we did together! Yaay! :D



Cookies help us deliver our services. By using our services, you agree to our use of cookies.