Getting Started With Gravit Designer

Gravit Designer is, in my opinion, the next big vector editing program. It’s user friendly, professional grade, and truly cross platform in that it works in the browser, on Linux, Mac, ChromeOS and Windows, and will at a later date be available on iPad and Android too. It’s under active development with new features being added at a fast rate.

And on top of all that, it’s also 100% free with no advertising or intrusive monetization methods. In the words of Alex from Gravit, when asked if the program will remain free:

“Yes it will definitely stay free and never be crippled by stupid fremium or whatever. We later might offer some additional stuff for teams which might be paid (as we need to pay those server bills too) but the Designer will stay free as we want everyone to be able to get access to a free, pro design tool.”

In this tutorial I’ll take you through the features that make Gravit Designer so promising. We won’tget too into the weeds and put every tool under the microscope, rather we’ll takea broad overview so you get the best possible idea of what’s included in this software. Let’s begin!

Install and First Run

If you’d like to use one of the desktop versions of Gravit head to designer.io/#download and grab the installer for your OS. (Note that at the moment there’s a bug in the dropdown menus on the Linux build, so for now all you penguins might prefer to use the browser version instead).

For those who would prefer to use the browser version–which has the advantage of always being the most up to date, and at the moment may give better performance–go to: designer.gravit.io/

Right from the start things get cool. We’re greeted with a welcome screen that gives us the option to set a preferred height and width for our document. However we can also leave the height and width fields empty and our canvas will be infinite; a fantastic feature for when you’re unsure of what size your design is going to be.

Also on this first screen we get over fiftypredefined sets of
dimensions to choose from, with nineteen presets for print, eight for
website design, fifteen for social media covers and content, six for
phones and watches, and seven for tablets.

As well as that, if you sign up for free Gravit Cloud account you can get access to the new range of premade templates by clicking on the New from Template tab on the left side of the welcome screen.

In here you’ll find fifty social media graphics ready to use, thirty-six slide presentations, eighteen posters, twenty-four Facebook post graphics, twenty-three blog graphics, twenty-six A4 posters, and twenty card graphics. These are all ready for use as they are, or can be used as a base to iterate on. This collection is brand new as of only a couple of weeks ago, so expect it to grow as time goes on.

Quick Interface Overview

Thankfully, the interface of Gravit Designer is quite intuitive so you
shouldn’t find yourself particularly lost even if you go in blind
to explore the software. Nonetheless we’ll have a quick overview of the
key components.

The first thing you might want to know is that the interface doesn’t have to
be purple. If you dig the purple you can leave it as is, but if you
prefer a monochrome UI go up to the main menu at the top left corner,
choose Edit > Settings and select either “Dark Theme” or “Light Theme”.

Users of Sketch will find the interface somewhat familiar as the layout is very similar. Across the top we have our toolbar with all the tools you’d expect to find in a vector app, such as canvas movement and snapping controls, path and text creation and selection tools, shape flipping and rotating, multi-shape operations, stacking order control, and export and presentation hotkeys. Note also that multiple documents can be open at once and will be visible via tabs towards the top right.

On the left side we have three tabs: Layers, Libraries and Tutorials. The tutorials tab (due tobe moved to Help in the menu bar with version 3.2.) is great for guidance when you’re first getting into using Gravit. The libraries tab provides you with an extensive collection of drag and drop assets–these are in addition to the templates we talked about above. The layers tab is what you’ll have open most of the time, as it displays a list of your pages, (more on pages shortly), and, of course, your layers.

On the right side you have context specific design controls for your currently selected object. If nothing is selected, the document settings will be displayed instead.

Pages; Like Artboards With Bonus “Powerpoint”

Pages in Gravit Designer are something of a hybrid of the pages and artboards you might find in other applications. Each page is like a self-contained document, with its own dimensions, bleed, margin and canvas color settings. You start with a single page by default and add more by clicking the little Create New Page button at the top right of the Pages panel. You can then view any page by selecting it in that panel.

If you want to use pages as you would generally use artboards,
activate the toggle to the left of the delete icon and you’ll see all
your pages at once in “Multipage mode”. These pages can be selected,
moved, manually resized, or changed to different preset sizes just as
though they were individual documents. In multipage mode you can also
duplicate pages by clicking their title on the canvas to select them,
then either ALT + dragging or pressing CTRL / CMD + D.

Gravit pages also have the awesome “Master Pages” feature. With this
feature you can setup a page to act as a “master page”, with elements
like backgrounds or headers that will be common to other pages. Then you
can set those other pages to draw from this master page, bringing in
all of its content, over which you create additional elements. When you update the elements in the master page,
all the other pages will update in real time too.

And in a very cool feature, by using Gravit’s pages you instantly have the ability to create a “Powerpoint-like” presentation. Just click the Play button at the far right of the toolbar and each of your pages becomes a slide. Hit the down arrow to go to the next slide, and the up arrow to go back.

Paths and Shapes

Path and shape creation in Gravit has the familiar tools you’d expect in any vector graphics program. We have the standard pen tool for drawing straight lines and bezier curves, and a series of predefined shape tools for lines, rectangles, ellipses, polygons, triangles and stars.

However we also have an extra tool that’s quite helpful, and that’s the bezigon tool. If you hold down ALT while laying down points with the bezigon tool, smooth curves will be automatically generated around each point.

Once paths and shapes are drawn they can have their properties altered
in the right side column. Regular paths can be set to open or closed,
making it easy to close off a path that wasn’t quite completed
correctly, or to open a path in order to continue adding points. Shapes
get context-specific settings, such as the ability to convert ellipses
into pie chart like shapes, or set the number of points a polygon or star
should have.

Regular Text, and Text on a Path

The text tool also works as you would have come to expect from using
other applications. With the text tool selected you can click on a point
to start typing out some dynamically sized text, or you can click and
drag to draw out a box your text will be constrained within.

And in a feature that will be super helpful for web designers, if you type “lorem” then press SPACE you’ll get a paragraph of “Lorem ipsum”
placeholder text generated for you automatically.

Having text follow a path is extremely
easy with Gravit. Just draw out any path or shape, select the text tool,
hover over your path until you see a red line appear along it, then
click. This will instantiate some next text that will follow the shape
of the path. The path can be modified afterwards and the text will
update its shape correspondingly.

When you select the text that
you’ve placed on a path you also get access to toggles in the right side
column to set the text on the inside or outside of the path, and to
reverse the text. And there is a simple way to position the text - just
click and drag the little orange marker at the beginning of the text and
that’s all it takes.

Integrated Google Fonts

Most designers will have been on the web font merry-go-round several times before: go to Google Fonts, pick out a font, download it, install it, (restart design app in some cases), select the font in the design app, repeat if it doesn’t look right. Or perhaps we might just use Skyfonts instead to skip the “download and install” step.

However in Gravit Designer the entire Google Font selection is available inline, out of the box, so using web fonts is exactly as easy as using regular fonts.

Additionally,you can import your own fonts when using the web version of Gravit with File > Import > Add fonts...

Of course the presence of web fonts doesn’t mean you can’t use system fonts–as long as you’re using a desktop version of Gravit all your local fonts will be available as well.

Multiple Fills and Strokes

Something I love in Gravit, and another feature Sketch users will be familiar with, is multiple fills and strokes. In many applications if you want to create composite effects by placing, for example, noise over tiling images over flat color, you need to duplicate your target shape each time. In Gravit that’s not necessary because you can add as many fills and borders as you want to any given shape:

Each fill or border behaves much like a separate layer, with its own shown or hidden status, blending mode, and opacity settings. Fills can also be sorted into any order you like. And because you can use use flat colors, image textures, gradients or noise there is a lot of room for creativity.

Effects; Better Than Layer Styles

Effects in Gravit are a lot like the layer effects you’ll be familiar with from other applications, but much like fills and strokes you are not limited to one effect per layer; you can have as many as you want.

Effects include the standard fare of drop shadow (doubles as outer glow), inner shadow (doubles as inner glow), and overlay (color or gradient). Stroke effects and pattern overlays are of course unnecessary due to Gravit’s existing fill and stroke tools. However there are also some really interesting additional effects like “mirror”, which creates a reflection effect below the shape, or “curved shadow”, which creates a shadow like this:

There is also a gaussian blur, a vignette, a simple hue slider recoloring effect, and a more in depth color adjustment effect. All these effects can be layered and configured however you like, then tweaked and reconfigured at any point in the design process.

Shared Styles; for States and Time Saving

Gravit has the ability to create styles that define a layer’s fill, border, effects and text settings. These styles have a couple of super beneficial applications.

One, you can create styles to represent different states on the same shape, such as a button’s default and hover appearance for example. Two, you can apply a style to multiple objects on the canvas then when you update the style on one of those objects you can have it apply to all the others as well.

Anchors for Semi-Responsiveness

Anchor settings allow you to define how a shape should respond when its parent is resized, which in turn allows you to create semi-responsive functionality and save you a whole bunch of time.

For example, if you’re creating a UI that needs to work on multiple screen sizes, you could create your layout at one size then set anchor points to control how the design’s elements should stretch, shrink or move when the document size changes. You could then make a duplicate of the current page and resize it, keeping the majority of your existing design in tact without needing to redo it.

Wrapping Up

Gravit Designer is already fantastic software, and it shows very strong promise for what’s to come. In the next release, version 3.2, we’ll see the inclusion of symbols, whichfor some users might be the final piece of the requirements puzzle. To get a look at everything coming up in the next few versions check out the roadmap.

Gravit is powerful, flexible, actively developed, truly cross platform, and completely free of charge. So whatever your reason for working with vectors, Gravit Designer is absolutely worth your while to check out.

To learn more visit: designer.io.