Homepage With Custom Illsutration in Gravit Designer

In today’s tutorial we are going to design a website homepage with a custom vector illustration in Gravit Designer.

Custom vector illustrations are long lasting trend, with a lot of advantages, branding, scallability and animation-friendliness, to list a few.

In today’s article I will share with you some tips on how to integrate the custom illustrations in your websites and create a single coherent design.

Step 01. New Document

Let’s start by lunching our Gravit Designer application. If you still haven’t had your own copy of the editor, please, visit an official Gravit Designer’s website and download it for free.

From a Start-up Menu choose “Website Large” to work on a 1140×900 canvas.

Start a new gravit document

Step 02. New Document

Next step is to download a sketch and to place it inside the app. In order to do this, you need to head over to File/Import/Place Image… .Select the file and click open to place the sketch.

Place Sketch in Gravit

Step 03. Tracing Sketch

Trace sketch elements with the Pen Tool. Hold left mouse button to introduce direction handles and create a smooth curve. Hold Alt to create a disconected anchor point and move the handles independently.

Follow the Principle of Three – each angle, curve or arch you create with a Pen Tool should contain three anchor points. Provide more and you will achieve a very rough line. Provide less and you might expirience the problem with the exact anchor point placement – some of your angles wouldn’t match the initial sketch.

Yet anoter good principle to follow when tracing a sketch is General to Detail direction. It is near intuitive rule, that states that you need to start with a general shape of the whole composition, then trace a major element and make some fine details after. As you may see from the picture below, I started with a background shape and then then create a light source.

Step 04. Give a Colors

Lets fill a background shape with the Gradient. Delete the Border and head over to the Fill Color Panel. Select Gradient Icon and set these colors to the gradient slider:

  1. #FFE56F
  2. #FF4929

Recolor the Sun

Create a circle using Ellipse Tool. Make three duplicates and increase each of them on 20%. Set a fill color of all ellipses to #FF0000.

Decrease the Opacity to 22%.

Recolor the the Sand

Draw a wavy line at the bottom right redion, then close it to create a dune. Delete the border and set fill to the Gradient. Arrange colors of the gradient as shown on the picture.


Coloring the Sand Hill

Trace a sandhill in the middle of the sketch and delete the Border. Set fill to Gradient and allocate gradient stops as shown on the picture below:

Front side (toward the sun):

Rear side:

Duplicate the hill and size it according to the perspective. Use Effect/Adjust/Color Adjust to make the colors of the gradient darker:

Step 05. Textual Elements

Grab the Text Tool and create a tiltle capitalizing every letter – in Gravit you should do it manualy. Set a font size to 132px and font to Poppins.

Create and intro text with a font size equals 28px.

Create a rectange and round the corners. Set a Border Color to none and fill to the Linear Gradient. Arrange radient Stops as shown on the picture.

Add a Drop shodow with these parameters:

  • X=0
  • Y=4
  • Blur=18
  • Opacity=44%

Color the Title

Select the title and add a New Fill. Select the Linear Gradient from the menu and choose these color as the colors for the Gradient Stops.

We are done. The full design is almost ready. Last thing is to add a humberger icon, custom or from the Free Gravit Icon 8 library.

Thanks for following that far, you might also like Gravit Redesign project, briefly explained into the Gravit Community article.

join Gravit tutorials

Gravit Designer tutorials facebook community

Find a solution for every Gravit challenge

Join group

Leave a Reply

Your email address will not be published. Required fields are marked *

join our newsletter

Subscribe to the weekly newsletter: