Using the align center and align middle buttons, you can easily center your design on the page.
You can always resize and rotate later, but I like to use shift while dragging to create a flat bottom as the baseline.
In the top toolbar, select the shapes dropdown and select "Polygon"
At this point you can zoom in to make the canvas fill the screen.
I'll cover scaling to other sizes down below!.
At the top of the New Design page, enter the width and height as 32px.
Everything covered here works without the PRO trial at the time of writing - so feel free to skip activating the free PRO trial for now.
Head to Gravit Designer and create an account if you haven't already.
So now that we have a bit of the background, I want to walk through a practical example - creating a minimal favicon you can use for a website! Creating a simple Favicon for your site 🎨 The top of your list is an item with z-index: 9999999999 and the bottom of the list is an item with z-index: 1, with items between scaling accordingly. In CSS terms, this is identical to z-index. This means that an item closer to the top of the list would visually cover an item closer to the bottom of the list should they overlap. Each of these assets forms a layer - and you're looking at everything from a top-down perspective. Layers are a list of all the assets (lines, shapes, curves, images, etc.) that are on your canvas. Layers are a powerful tool once understood, but cause a lot of frustration to understand. One of the common struggles I see with vector software is with Layers. The trick with this one is to make sure you're focused on the canvas so that the browser and sidebar don't scale instead! 😅
Ctrl + Scroll = Zoom in/out, the same as your browser.
Scroll wheel click + drag = This will allow you to pan around the canvas, which I find more convenient than trying to scroll the page.
alt + drag object = This creates a duplicate of the object wherever you stop dragging.
Shift + Scaling = This will scale your object at a 1:1 scale, which is useful for not causing distortions.
Shift + Rotating = This locks your rotation to breakpoints, which helps keep rotations consistent across your work.
All images in this post including the cover imageįrom my time working with vector software, there are a few keyboard 'shortcuts' that I use a lot.
The included cloud storage combos nicely with being browser-based to allow you to start a project on one computer and seamlessly continue working on another computer later - a feature I use all too often. Unlike those alternatives, however, Gravit offers a free tier and runs completely in your browser (or offline as a PWA with the PRO license). Gravit.io is a browser-based vector graphics software - meaning it allows you to create images using lines, curves, and shapes similar to Adobe Illustrator or Affinity Designer.