Welcome back to the Design and Prototype Apps with Mid-Journey course. Today we will continue our design with an illustration that we will draw manually by tracing an image generated from Mid-Journey. Here you will learn the basics of using the Pen tool to trace our beautiful house illustration, creating paths, shapes and curves. We will focus on the details that make up the house design, such as the floor, walls, windows, door, roof, trees and shadows. In the previous course we used too much re
ctangle tool with corner radius and ellipse tool which are still quite easy to create our design. However, this time be prepared to use the pen tool more effectively. While the pen tool may seem easy, but you need to know how to handle it properly. In this section we will focus on the details of the house using several methods to achieve a great result. We will use the rectangle, ellipse, polygon, pen tools and the mask option for the house and trees. We will also create a boolean group for subt
racting secondary objects on some elements. Additionally, I will show you how to find inspiration for night colors using Mid-Journey. Finally, we will finish with different types of trees. trees. I know this is a big challenge but I promise to teach you as easy and simple tricks as possible to follow. So let's get started. As Mid-Journey has not provided us with a detailed image of the Smart Home app, we cannot proceed with designing based on the limited information available. The illustration i
s not very clear, making it difficult to understand what is intended. Therefore, it would be best to generate a specific image of a nice house that we can use as a reference for designing the app's interface. Let's now dive into the mid-journey. If you missed the course or want to learn more about how mid-journey works, the link is in the description. As you can see, the app is about smart homes. Maybe we can search for a small, simple house that we can draw efficiently. Write any details that c
an help describe the image you have in mind. The more details you provide, the better the outcome will be. To begin the prompt, type /imaginepromptcode and include detailed descriptions with as much specificity as possible. Let's try with image3d, cute triangle house in top of podium with green grass and Christmas tree, landscape isometric view. And don't forget to add v5 at the end. Or you can go to your settings and type /setting and press enter. Then select MJV5 and it will automatically set
at the end of your prompt. V5 is the new version of AI Image Generator's neural network. Mid-Journey V5 can produce strikingly lifelike visuals. The V5 model employs cutting-edge tools and a new neural architecture to generate aesthetics and designs. The image will appear even more realistic. Please note that every time you generate the image, it may be different and unique. However, you can play with the variations until you get what you want. There are four variations to choose from. All of th
em are cute, but we should select the one that is easiest to draw. For example, this house, the U3, would be ideal for our design, right? If you have a particular image that you like, you can now choose U3 to upscale only that image. If you select V instead, it will provide you with more variations of that image. So let's take this one. After generating the image, open it in your browser. Then you can either copy the image and paste it into your design file or save the image directly. Back to th
e design file. We have already created the dome and now it's time to add the illustrations to complete our design. We are going to manually copy and draw the house, place the image behind and reduce the opacity slightly until you can see the image to draw the outline. Try to center the image in accordance with the dome. Now let me explain a little about the pen tool. Normally when creating UI designs, we rarely use the pen tool. Instead we often use the rectangle or ellipse tools for buttons, la
yout grids and so on. However in this course we will learn about a little bit of everything. Let's dive deeper into the explanation. The pen tool is a powerful tool for creating vector graphics. In Figma, the pen tool can be found in the toolbar on the left side of the screen, represented by a pen icon. It is used to draw vector paths, which are composed of anchor points and line segments. By manipulating the position of these anchor points and line segments, you can create custom shapes and cur
ves with precision. Before getting into the design, it's essential to understand the functionality of the pen tool to use it effectively in Figma. Here are some key aspects of the PenTools functionality. Anchor points. These are points on the canvas where the path begins or changes direction. You can add, remove or manipulate anchor points to adjust the shape and curvature of the path. Line segments. These are the straight lines that connect anchor points. By manipulating the position and length
of line segments, you can control the direction and curvature of the path. Thus, paths are composed of anchor points and line segments, and can be used to create custom shapes, curves and lines. Paths can be filled with color or used as the outline of a shape. Finally, Bezier handles. These are the small control points that appear on either side of an anchor point. By manipulating the position and angle of these handles, you can adjust the curvature of the path at that point. Alright, if you ha
ve the necessary knowledge, designing will become easier. The image generated from Mid-Journey will serve as inspiration and reference for our house design. Although the house is simple, we want to make it stunning as well. To achieve this, we plan to change the color and the shape of the roof, and replace the tree with a nice round one. Where did I find that color palette? The original image has a boring color scheme that may not fit with the design. The theme is related to night, so we need to
use dark colors. But which color should we pick? To find inspiration, we can generate a dark mode image with the same prompt and add dark mode in the code. We'll need a cool color palette in the same shade. This will help us pick a color ranging from green to dark blue. There is another way to make the image blend and match with the night theme. You can adjust the strength of the blending mode directly on the image fill. To achieve this effect, select Image Fill and experiment with the blending
modes. It's best to test all of them, decrease the exposure slightly, increase contrast just a little and decrease saturation a bit more and so on. Then add one more fill with a solid blue color and select Overlay as the blending mode. This will blend with the background and work well with any color. Alright we can now begin drawing the house. To help you, use the Line tool and the edge as a guide to ensure that the house is aligned and consistent. So let's begin with the floor. Use the Pen too
l and draw the outline of the floor edge and fill it with the color red for now. Duplicate the rectangle, Command D Shortcut. Change the color to blue for now and drag to the top until it reached the top edge corner on left side and right side. To avoid confusion, name the red rectangle Floor 1, and the blue rectangle Floor 2. Next, we're going to create a floor edge. So select the Floor 1, press Enter to edit. You will see anchor points at the end of each of the four corners of the rectangle. T
o add an extra point, move your mouse along the line segment until an anchor point appears. Then drag it to the left to create an edge that follows the shape. Do the same thing for the right side. Now let's group the two rectangles by using the command G shortcut and name the group "floor". For the dark mode color, I was inspired by this image generated by Mid-Journey, but how to apply the right color as a function of the light and make a shadow effect if we use a linear gradient. To choose the
right color for your house design, consider natural light, light direction, and surroundings. These factors influence color appearance and can enhance your home's aesthetic. For a shadow effect using linear gradient, select darker and lighter shades of a color palette. For example, use light blue on the top of the wall and gradually darken towards the bottom. Consider the time of day when your home receives the most sunlight to determine the right color. Colors look different in different lighti
ng conditions. I chose the color in this image because it complements my overall design, which uses blue as the base tone. To achieve this, I used the dropper tool to sample the color of the house in the image, which gave me my base color. Next, I will apply this color consistently throughout my design. For the floor color, I was inspired by the roof of this house. To create a side wall, duplicate the floor edge and select the top anchor point. Then drag it down to the bottom until the middle co
rner. This is necessary because we need to add another shade of color on this side. Select the Pen tool and choose the top anchor from the middle corner. Click the bottom point to close the path. Select the Move tool and choose the two anchor points from the left. Press the Delete key shortcut to remove that part. It will provide a half path on the right side. Apply a linear gradient. We will raise a little to get a lighter color in the same tone to create a shadow effect that comes from behind
on the right. As you can see the light has come from behind on the right so the shadow should be darker to light. To create the wall we will follow the same steps as we did for the floor. The half wall will be a beautiful addition to the room, adding depth and dimension to the overall design. We will use a cool color palette for the wall, including shades of light and dark blue. The cool colors will give a sense of calm and relaxation to the room, fitting perfectly with the night theme. The blue
tones will create a soothing ambiance, perfect for unwinding after a long day. Let's duplicate the floor layer and bring to the top a little bit until it fit with the red line. There you go. Select the floor 2 and hide the layer for now. Select floor 1 and change it to a different color for clarity for now. and resize the line segment until it aligns and fits with the red lines. Do the same thing for the Floor 3. Resize the Floor 2 layer and use it as the base of the roof. Add a linear gradient
. The top color will be this light blue and the bottom, the dark blue. And rotate the gradient a little bit. Let's change the color gradient on this side wall and rotate to vertical like this. Don't forget to rename your layers for "WALL-E". Now let's draw the window and add more lines for guidance. You can use the rectangle tool or pen tool to draw the window. Let's try with rectangle tool. You only need to resize the two right anchor points and the left bottom point. Apply a solid blue color.
Rename the rectangle window base. Next we're going to create a mask on the window. So duplicate the window base, change the color to green for now, and drag to the top right a little bit until it fits with the red line. First group the two layers together using the CMD G shortcut, then duplicate the bottom layer. Select the duplicated layer and then right click on the second layer above it. Choose Use as Mask. Apply a solid color to yellow. To create an edge for the window, use the rectangle too
l to create a thin rectangle. Make sure to place the new rectangle inside the mask area. Adjust the anchor point to fit with the corner. Then apply the color to this purple. Rename the group to Window. To create the door, simply select the Window group and drag it while holding the Option key to copy and resize it to fit within the red line. To create the reflection for the lightning effect, duplicate the window base layer and bring the layer to the top since it will be on the mask area. Decreas
e its opacity to 80%. Then apply a layer blur of 16. Rename the layer to Reflection. Additionally, add the reflection to the door. and name everything properly. So this blur I'm going to name Door Reflection and this one Door. Let's group the reflection and door together and name it Door. Alright, let's continue with the design in the next section. We will be working on the top part and details next. Stay tuned and see you soon. Welcome back to the second part of our drawing series. In the previ
ous section, we focused on the theoretical aspects of of Mid-Journey's new version 5 and how to use the Pen tool. We also explained how shadows work and how color can be used to determine the time of day or the position of the sun in the sky. And we also started drawing the bottom part of the house. In this section, we will solely focus on drawing design. We will pick up from where we left off, beginning with the top area of the house, specifically the roof. Then we will move on to the rest of t
he details, such as lighting, trees and the ground. Alright, it's time to create the roof. Let's start by replicating the same shape as the image with the sharp roof. Once we have the basic shape of the house, we can modify the roof to make it flatter. By changing the roof shape, we can give the house a unique and charming appearance. Let's create guidelines for my roof. This will provide guidance for me to efficiently draw the roof. Use the Pen tool to trace the outline of your roof. Begin from
the left side and move to the right and up to the top. Then return to the starting point to close the path. Rename the shape roof base, select the floor 2 layer, duplicate it and bring the duplicate to the top layer. Then drag the rectangle to the top until you are satisfied. Next, we will subtract the top area using the Boolean group. To do this, select both the roof base and floor 3 inches layers. Go to the Boolean group, click the down chevron and select Subtract. Subtract removes the area o
f a shape or set of shapes from a base shape, only the bottom shape layer is solid, the rest are subtracted from it. And rename it again as roof base. To create the side roof, start by duplicating the roof base. Then right click on the duplicate and select Flatten. This will give you a single shape that can be easily edited manually. Next, select the Pen tool and click on the top middle anchor point to add a new connection network. Then click on the bottom point to create a straight line and clo
se the path. Select the Move tool and delete the two left anchor points. Cutting the left side will give you a half roof. Set the color to red for now to see clearly. Let's rename it Side Roof. Let's create another guideline for my roof. To add a flat ceiling on top of the roof, select the layer Floor 3 inches that is inside the Subtract layer, duplicate it, bring the duplicated layer to the top and resize it manually following the red lines as a guide. Now let's apply a linear gradient to the l
eft side of the roof. the gradient slightly to the left. The first color will be light blue and the second will be dark blue. Let's also add a linear gradient to the right side of the roof. The top color should be this light blue and the bottom color should be this dark blue. Add a solid color for this flat roof with this blue. You can rename it to "ceiling" or whatever else you want to identify it as. Now let's create the top window using the same technique. To speed up the process we can dupli
cate the bottom window and move it to the top. Then we just need to create the roof for the window. So press the option K shortcut and drag the layer to the top and make sure to bring the layer to the top of the roof as well. Then manually draw the outline to create the window frame ensuring that it aligns perfectly with the red lines. Next, use the Pen tool to create the roof for the window. Draw the outline by following the image. Let's begin by tracing the inside first, then trace the edge an
d finally the side roof. As the image is not very clear, it does not need to be replicated exactly. The design should make sense so that we can adapt it to our own needs. Let's start by tracing the inside first with a dark color. Let's trace the edge and name it Edge. Finally let's trace the side roof. Let's apply the following colors. Use this color for the inside shape, this one for the edge, and this blue for the side roof. Additionally, we can add a linear gradient and darken the color to cr
eate a shadow effect. Group all the layers of the window roof together and name the group "Window Roof". Then select both the window and the window roof and name the selection "Top Left Window". After grouping, make another duplicate of the window and bring it to the right. From here, select Flip Horizontal to create a mirrored version of the window. As you can see, the window on the right side is longer, so we can expand the size a little bit. However, it doesn't need to be exactly the same. No
w let's change the gradient color. The shadow appears due to the light of the moon coming from behind, from right to left. Therefore, the left side of the roof should be darker because this area blocks the light. Change the top color to this blue and change the bottom to this dark blue. Next let's create a small staircase. We will copy it as is and we can modify it later if you wish. We'll do the same process as the floor edge. Why not do something different? We can go up and incline the step to
wards the entrance of the house a little. So we're going to stretch out the corners here and go up more. Let's create the side of the step to be able to put different individual colors without it affecting the whole border, using the same process as the side floor. There you go. Now let's apply the colors. We'll use the same shade of blue to match the rest of the house. All the color codes are available in the Figma file, which you can use. So I'm going to use the dropper tool to make it fast. L
et's play with the gradient by adding a lighter and darker shade to make it more realistic. Group everything and name it Stair. Now it's time to add small details, such as the window in the back, the reflection on the window roof, and the shadow on the side of the wall. Add a shadow that gives the impression that the house is situated in a hole in the floor. However, we are not going to create small blocks, we can skip over small details. To start, use the Pen tool to trace the outline of the ba
ck window. Decrease the opacity of the image to 50% for better visibility. After tracing the outline, add Fill and remove the stroke. And rename Back Window, then add Dark Blue. Next let's create a reflection on the roof window. Select this layer and add an inner shadow with an X position of 2 and a Y position of -1. And 0 blur. Add this code of purple color and increase the opacity to 100%. Let's add an inner shadow on the right side, with an X position of -2 and an I position of -1 and apply t
he same color. Next let's add the shadow on the right wall. Duplicate the side wall layer and name it "Shadow". Select the top anchor point and drag it down to give it a height of 4 pixels. Change the color to black, with 0% opacity at the top and 100% opacity at the bottom. Rotate the layer to align it with the shadow. Decrease the opacity to 40%. Alright we are almost finished, we are on the last step. Next we will create different tree shapes and shadows. I was inspired by the prompt from Mid
-Journey to create the trees and I mixed them together to make an easy one. Ok now let's begin with the sharp tree. So use the polygon tool and create a triangle shape 42 by 88 for now. Select the two anchor points and set the corner radius to 27 and the top to 8. Next, press the K shortcut to scale the shape proportionally to 1.35x and make it slightly larger. Then manually change the width to 48 and the height to 88. Apply a linear gradient with an aqua color, where the top color is lighter an
d the bottom is darker, and rotate it slightly to the right. Next, we will add a shadow on the left side to simulate light coming from the right. To achieve this, we will use a mask. Select the Ellipse tool and create an oval with a height of about 70. And position it to the left like this. Group the shapes together and name the group "Tree". the polygon shape then right click on the duplicated shape and select "Use as Mask". Once masked, the ellipse will no longer be visible above the triangle
shape. To create a smooth dark shadow with the same color tone, use the dropper tool to select a light aqua color. Move the selection slightly towards the darker color, then add a layer blur of 15. Next, create the trunk of the tree using the rectangle tool. a rectangle that is about 30 of height and ensure that it is aligned with the center of the tree. You will know that it is aligned when you see a vertical red line. Select the two bottom anchor points and set the corner radius to about three
. Select the top left anchor point and move it one pixel to the right. Repeat this for the anchor point on the left and make sure the trunk is below the tree layer group. Now let's apply a color. Use the dropper and select the first color, then add a linear gradient and rotate it horizontally. Select the second color, increase the opacity to 100% and slide to the darker color. Select them all and name it "sharp tree". Next, let's create a second tree that is more round. This time we will use a r
ectangle tool. Create a rectangle that is 36 by 56 and set the corner radius to 44. Let's apply the color so I'm going to copy-pass from this tree. Next, let's create a shadow so use the rectangle tool and create any size of your choice. Use the dropper to select the same color and slide towards the darker shade. Add a layer blur, let's say 14, group them together and name the group tree. Next, create a mask by selecting the rectangle, duplicating it, right-clicking and selecting Use as Mask. Sl
ide down the color a little bit to make it darker like this. Let's create a second mask using an ellipse shape. Create a 59 by 59 ellipse and bring it to the top like this. Make sure to put the ellipse layer inside the mask area. Select this aqua color and add layer blur to 15. For the rest I will fast forward since it uses the same technique. For the last three I used the ellipse tool. Alright let's create the shadow for the trees. To create the shadow I will use the pen tool to trace the silho
uette of the tree. It doesn't need to be perfect, just a basic shape. Make sure to put the shadow below the tree and set the corner radius of the sharp corner to 2. Adjust the position until it fits with the tree trunk. Add a linear gradient with black for both. Tilt it slightly to the right until the color is well blended and smooth. Set the blending mode to Overlay, and decrease the opacity to 50% and voila. Rename the shape to Shadow. Use the option +K shortcut and apply it to the round tree
as well, then group each tree individually and rename them again. Since the small tree has a round shape, its shadow will be different. To create a matching silhouette, use the Ellipse tool and add a radial gradient with this purple color. Decrease the opacity of the bottom color to 0% and rotate the gradient slightly to the right. with this and add a layer blur of 1 for a better effect. Group everything and name them shrub and there you go. To make your design look even more stunning and realis
tic, it's time to add trees around the house. You can position the house however you like but make sure to group it. Then place the tree below it. What's missing here? Shouldn't there be a lightning effect when the light is turned To create a yellow light effect, use the Pen tool to trace a trapezoid shape, then select a yellow color and decrease the opacity to 40%. Add a Layer Blur effect of 30. Ensure that the yellow light is placed at the bottom of the floor. Alright, we have reached the fina
l step of the drawing. We will now draw the ground, which is a type of pavement. I have already added guidance lines to help me trace my way. We will begin from the entrance here. Select the Pen tool and ensure that the entrance line is aligned with the edge of the dome. Then begin the first point here. Let's add the corner radius. Select all the anchor points by holding down the Shift key and clicking. Then select all points except the start and end points and set the corner radius to 4 for now
. Sometimes when you set the corner for all points at the same time, it may not look consistent depending on the angle, Therefore, we will change it manually. So for this corner, we'll change for 9 instead. Same thing for this corner, we'll change for 9 as well. Name it "ground" and make sure to put the layer below of the yellow light. Alright, let's add a linear gradient and rotate it slightly to the right. The left color will be purple and the right will be blue, but decease the opacity to 40%
for the second color. Oops, we need to move the ground below the group of trees because it's currently on top of them. There you go. Congratulations on completing the course on drawing house design, copying a mid-journey design using PenTool Infigma. I hope this section has provided you with valuable insights and practical skills to enhance your digital drawing abilities. Remember, practice makes perfect, and the more you experiment with the techniques and tools covered in this course, the bett
er you will become. The upcoming course will be about designing for both dark mode and light mode. See you soon! soon.
Comments