With our new Draw feature available in the Hatch editor, you can create hand-drawn stickers and gifs, or make illustrated games and interactive stories. In this walkthrough, we’ll use Draw to make a hand-drawn webpage and get you started with this new tool.
Drawing on the Hatch canvas
Our landing page features a street down the middle with a couple buildings on each side. These buildings will be clickable, each leading to a different social media site. We start by accessing the Draw feature from the left sidebar.
An important thing to remember when using the Draw feature is to split your drawings into different parts. When you click done drawing, whatever you have drawn so far will become a standalone object.
We want our first object to be the street on the ground, which will mostly serve as a background. Try to keep your drawing inside the shown page borders, to ensure it looks right on mobile.
Object layers and order
Up next, we’ll start drawing the buildings. We’ll include a colored building for each social media site we want to feature. Remember, each building should be a separate drawing so you have complete control over the object. We started with the red building, which will lead to Youtube when clicked.
The object tree is really helpful to keep track of your drawings. You can open it up by clicking on the button at the bottom of the left sidebar.
As you can see in the object tree, the Youtube building object is listed underneath the street object on the object tree. The object tree shows the objects in a list of layers, which means whatever is on the bottom of the list is actually the top layer. Therefore, the building will be displayed on top of the street on the page. As shown above, when you select a specific drawing, you can add more strokes to it or remove unwanted strokes with the eraser tool.
Adding perspective
As part of our image, we’ll add the YouTube logo to the front of the building. Since our page has a 3D perspective going on, we want to make the logo fit properly. We can achieve that by selecting the logo and navigating to the effects tab on the right. Select 3D Perspective to bring up the window shown below.
We’ll play with the the sliders until the logo fits nicely on top of the building. Finally, we’ll add a link to the drawing to redirect the user to the desired site. For this project, we’ll make the whole building clickable, but you can also choose just the logo. Add a link to any object by selecting the object and pressing the add link button above it.
With our Youtube building done, we’ll repeat that process to create buildings for Instagram, TikTok and Twitch. You can see the updated object tree with our new drawings below.
Note how the position of the objects is determined by their placement in the object tree. We now have all the clickable buildings in place. Let’s add some details, a nice background and some personal information.
Adding library assets to a hand-drawn webpage
First we’ll check out the vector library for some streetlights. You can find the vector library on the left sidebar. Just type what you’re looking for in the search box at the top and you should get some quick results.
Up next we drew the background. We placed it at the top of the object list to make it show up at the back of the page. We also looked up an animated starry sky gif to give the page a bit of movement. To finish up we added a personal photo and some descriptive text. Check out the finished project to see our hand-drawn webpage in action.
