After all the time working and designing with Gravit Designer I have acquired a lot experience and now, I want to share it with everyone can have a faster design process.
Math can really help you out
You want make a button a 1/3 of the current size? Thats easy just use formulas in the width/height fields. All inputs from Gravit support this kind of operations.
Example: Enter 540/4 and hit enter.
The result will be 135.
You can use these operands:
/ to divide
* to multiply
+ to add
– to subtract
Use layers instead grouping
An awesome feature of Gravit Designer is the layer system. It works like a group but you don’t need to double click to select an inside object. It’s also possible give custom colors to each layer. This will make organizing your layers much easier.
You can enable outline mode to each layer in order to move the entire layer with its contents by using the layer select tool or selecting it on the layer panel.
Using master pages instead copying content
If you want to simulate a screen popup or you have some header/navigation menus that always appear, the best solution is to use Master Pages instead of duplicating all the content. It has a lot of advantages. Everything stays synchronized. You can make one master page linked to each other and the design itself keeps working fast because it has less objects.
Using styles
In the last version of Gravit we have introduced styles but there is some stuff that you don’t know yet. =)
You can make styles for Appearance, Fill, Borders, Effects and Text.
After creating your style it’s only applied to the desired object. You can still change its style and by pressing the Sync button it will update all other objects.
Styles can be renamed, reordered and have their properties changed in the style editor. Go there by clicking organize style and after this the settings button.
Simulate buttons states with multiple fill & borders
In screen design one of the hardest part is to simulate all buttons states.
On Gravit using multiple fills & borders you can make a style with all states inside and after that just show/hide the fills/borders simulating the new states.
Mastering anchor points
Anchor points were introduced with the styles updates. It is very important to make screen design components that work responsive and test your designs in multiple screen widths without needing to redraw it.
What people don’t know is that anchor points can have containers instead working with pages.
So, if you set an anchor point to a single object the container will act like the document page.
But objects inside others with a clipping will respect the area of the higher level object as the anchor point container.
Text editing
Some text features are hidden in the UI but they are still there.
Strikethrough with: Cmd / Ctrl + S
Underline with: Cmd / Ctrl + U
Italic with: Cmd / Ctrl + I
Bold with: Cmd / Ctrl + B
Cropping images and Making Patterns
One of most common actions in screen design is crop images, on gravit you can quick do it by double clicking on it.
If you want to make an image background fill on an object that always fits the design you can use the pattern fill and make it stretch to the shape.
Also you can quickly create a custom pattern by copying the desired pattern object in editor and then pressing the paste button inside the pattern color picker.
Fills can be dragged and dropped on each other to be replicated quickly.
Text on path
One thing that users always ask for is how to make text on path in Gravit, so here is a quick explanation, really quick. 🙂
Just create a text with the text tool at the border of the desired object and whoolaaa! It will work.
Smart Duplicating
On Gravit duplicating objects is really easy but a nice feature that many people don’t know is that if you press cmd/ctrl + d to duplicate the object again it will reproduce the same operation and movement.
Also, if you use cmd/ctrl + shift + d the object will be duplicated at the same place.
Editing images to make them look professional
This is very important. Sometimes, you want to place a text over a image or the image color is not fitting perfectly the layout. To solve this Gravit Designer has a lot of image effects that can help you with this job without going to an external image editing tool.
Original image:
This is the original image that we are going to play around with.
Screen Overlay:
You can use it to blend images to alpha or blend a gradient color over it.
Recolor:
Recolor is used to make an image in a single color tone.
Blur with clip on:
The clip option makes the blur only being applied inside the container without blurring the image.
Adjust:
There are a lot of standard image adjusting like hue/saturation/brightness/contrast.
Using the transform tool
Transform tool is not only about duplicating objects. There is some interesting stuff for screen designers. You know when you want to make sure all components have the same width? That’s easy, just select them and then go to transform tool and click in same width.
Using hotkeys for zooming
You can quick switch between zoom levels using Cmd/Ctrl + Numbers.
Cmd/Ctrl + 1 = 100% Zoom
Cmd/Ctrl + 2 = 200% Zoom
Cmd/Ctrl + 3= 300% Zoom
Cmd/Ctrl + 4= 400% Zoom
Cmd/Ctrl + 8= 800% Zoom
Cmd/Ctrl + 5= 50% Zoom
Cmd/Ctrl + Alt + 0= Fit all
I hope that was helpful and you folks have learned something new today that will help to speed up your design process.