In today’s tutorial we are going to design a website homepage with a custom vector illustration of the trip to the desert.
Custom vector illustrations are long lasting trend, with a lot of advantages, branding, scalability 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.
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.
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:
#FFE56F#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.
