Meja Flat.docx

Buatlah gambar flat design wall minimal 2 meja (teknis pembuatan spt tutorial di bawah) Posisi dan hasil usahakan beda dari yg asli boleh menambahkan benda lainnya ( imajinasi diutamakan )

How to Create a Flat Design Wall Shelves Illustration in Adobe Illustrator

What You'll Be Creating

For a long time we've used wall shelves to hold our books, cups, and lamps, or just to decorate our home with plants and portraits. They are very useful and always help us to save space in any place, and because of this I was inspired to create this tutorial, where we'll draw these two wall shelves. In this tutorial you will learn how to create these shelves using simple shapes and applying basic techniques to create each of the elements that are on them. I hope you enjoy the process and learn something new. If you're looking for inspiration, GraphicRiver has plenty of flat design vectors for you to browse.

1. How to Create a Wall Shelf Step 1 Let’s start by creating a new document (File > New) with a Width of 800 px and a Height of 600 px. The first thing would be to create the shelf where all the objects will be placed. For the shelf, create a 280 x 16 px rectangle with the Rectangle Tool (M) and select #8199A3 as the fill color. For the shelf’s support, create a bolt using a 14 x 30 px rectangle and then a 4 x 4 px ellipse ( #8FAAB5 ) with the Ellipse Tool (L).

Step 2 Add shadows to the shelf’s support using a 14 x 8 px rectangle ( #6B7F87 ), duplicate the bolt (Control-C > Control-F), and change its fill color to #6B7F87 . After that, send it backwards (Right click > Arrange > Send Backward) and move the ellipse down twice using the arrow keys on your keyboard. Group all the elements making up the support (Control-G) and duplicate it (ControlC > Control-F). Secure it to the other side of the shelf as shown in the image below.

Step 3 Group all of the shelf together (Control-G) and duplicate it (Control-C > Control-F). Place the second shelf by double-clicking the Selection Tool (V) and setting a distance of 140 px above the other shelf in the dialog window.

2. How to Create the Books Now that we have created the shelves, we will draw each of the elements that will be on them. Let's begin by drawing the first set of books.

Step 1 For the first book, create a 15 x 62 px rectangle ( #A094D9 ). Then add two 15 x 4 px rectangles ( #897FBA ) and a 7 x 7 px ellipse ( #897FBA ). Afterwards, add a 7 x 62 px rectangle ( #A094D9 ) above the book and set the Blending Mode to Multiply with a 20% Opacity using the Appearance panel. Group everything together (Control-G).

Step 2 For the second book, create one 12 x 55 px rectangle ( #3498DB ) and three 12 x 3 px rectangles ( #EDEEF0 ), and then separate them vertically every 3 px.

Afterwards, add a 6 x 55 px rectangle ( #3498DB ) and set the Blending Mode to Multiply with a 20% Opacity using the Appearance panel. Group the entire book together (Control-G) and place it next to the other book.

Step 3 For the third book, create a 6 x 50 px rectangle ( #F6CD61 ) and add a 3 x 30 px rectangle ( #EDEEF0 ) in its center. Afterwards, create a 3 x 50 px rectangle ( #F6CD61 ) and set the Blending Mode to Multiply with a 20% Opacity. Group the book together (Control-G). Double-click the Rotation Tool (R) and enter an angle of 350 degrees in the dialog window. With the help of the guide lines, place the book next to the others.

Step 4 Now let's create the second set of books. First, create a 58 x 15 px rectangle ( #67537A ) and then select the right-side nodes and round the corners with Live Corners using the Direct Selection Tool (A). Duplicate the rectangle (Control-C > Control-F) and change its fill color to

#EDEEF0

Go to Effect > Path > Offset Path and set an offset of -3 px. Then, expand its appearance (Object > Expand Appearance). Now select the left-side nodes and align them next to another rectangle.

.

Step 5 Copy the last rectangle (Control-C) for a moment. Then select both rectangles and apply Minus Frontlocated in the Pathfinder panel. Paste again the rectangle (Control-F), select the left-side nodes and move them 2 px to the right. Now create a 60 x 2 px rectangle ( #C2C3C9 ) to add a shadow on the book’s spine, removing the rest using theShape Builder Tool (Shift-M).

Step 6 Add a bookmark by creating a 6 x 8 px rectangle ( #39B4FF ). Take the Pen Tool (P) and add a node in the middle of the bottom, and then move it upwards slightly. Now group the book together (Control-G).

Step 7

For the second book, we’ll be using the same procedure from steps 4–6, so use a 49 x 12 px rectangle ( #1DABB8 ) and round its left-side corners. Duplicate the rectangle ( #EDEEF0 ) (Control-C > Control-F) and apply an offset of -3 px. Continue with steps 5-6 explained above.

Step 8 It’s time to create the third set of books. Begin by creating a 70 x 23 px rectangle ( #39B4FF ) and then add two 4 x 23 px rectangles ( #EDEEF0 ) and one 8 x 12 px rectangle ( #EDEEF0 ). Afterwards, create a 70 x 12 px rectangle ( #39B4FF ) and set the Blending Mode to Multiply with an Opacity of 20% using the Appearance panel.

Step 9 We’ll create a second book the same way we did in step 7. Use a 61 x 15 px rectangle ( #C2B6D6 ).

Step 10 Now to create the last set of books. For the first book, start with a 70 x 10 px rectangle ( #67537A ). Then add two 2 x 10 px rectangles ( #EDEEF0 ) and one 30 x 2 px rectangle ( #EDEEF0 ). Finish the set by creating a 70 x 5 px rectangle ( #67537A ) and set the Blending Mode to Multiply with a 20% Opacity. Group the book (Control-G).

Step 11 For the second and third books in this set, use a 70 x 10 px rectangle ( #4CD4B0 ) and add four 3 x 10 px rectangles ( #EDEEF0 ). Afterwards, create a 70 x 5 px rectangle ( #4CD4B0 ) and set the Blending Mode to Multiply with a 20% Opacity. Group the book (Control-G). Duplicate the last book (Control-C > Control-F) and double-click it to enter Isolate Mode. Change the fill color #F6CD61 and the shadow’s fill color by using the Eyedropper Tool (I) and pressing Shift on the color of the other rectangle. Press Escape to exit Isolate Mode.

3. How to Create the Portraits Step 1 In this step we are going to create portraits for our shelves. Start by creating one 51 x 72 px rectangle ( #6F5E87 ) and one 40 x 60 px rectangle ( #F7F7F8 ). Then duplicate the last rectangle ( #D8D9DD ) twice (Control-C > Control-F), and move the last copy down twice and once to the right using your keyboard’s arrows. Select it along with the last copy and apply Minus Front from the Pathfinder panel.

Step 2 Create a new 30 x 48 px rectangle ( #6F5E87 ), and then add two 40 x 40 px rectangles ( #BADEB2 ) and rotate them 45 degrees using the Rotate Tool (R). Use the Shape Builder Tool (Shift-M) to remove the remaining part. Add a sun by creating a 14 x 14 px ellipse ( #F7E999 ). Group all the elements of the portrait (Control-G).

Step 3 For the second portrait, use a 45 x 63 px rectangle ( #299EBF ), and add an inner frame using a 33 x 50 px rectangle ( #8BCBDE ). Then duplicate the inner frame ( #7FBACB ) twice (Control-C > Control-F), move the last copy twice down and once to the right, and apply Minus Front on the Pathfinder panel—make sure both copies are selected when applying Minus Front. Set the Opacity to 50% in the Appearance panel.

Step 4 Add two 70 x 70 px rectangles, selecting

#D8E2EC

and

#87E8C6

as the fill colors.

Rotate them 45 degrees using the Rotate Tool (R). Then select the Shape Builder Tool (Shift-M) and subtract towards the inner frame, leaving the inner forms. Group the portrait (Control-G).

Step 5 For the last portrait, use a 42 x 55 px rectangle ( #67537A ) and set the inner frame to 34 x 46 px ( #FFFFFF ). Follow the same steps as mentioned in step 2 to apply the inner shadow. Add a 26 x 38 px rectangle ( #EDEEF0 ). Then add a 14 x 14 px ellipse ( #F7A3A2 ) and a three-pointed polygon and a radius of 8 px ( #82BBC2 ) using the Polygon Tool.

4. How to Create the Plants Step 1 Now let’s draw the plants that will liven up the shelves. Use a 32 x 26 px rectangle ( #BCCBFA ) for the base of the pot, and then move the lower nodes 4 px inward using the Direct Selection Tool (A). Duplicate the pot (Control-C > Control-F) twice and move the last copy to the left. Apply Minus Front using the Pathfinder panel and change the fill color to #A4BEE7 .

Step 2

Add a new 34 x 3 px rectangle ( #6B7EB9 ). Duplicate it (Control-C > Control-F) and change its width to 13 px using the Transform panel, and then change its fill color to #556AA3 . Add a 4 x 24 px rectangle ( #1ABC9C ). Then create a 8 x 8 px rectangle ( #089E80 ) and round the lower left and upper right corners with a radius of 8 px from the Transform panel. Group it (Control-G) and position it as shown in the image below.

Step 3 Let’s draw the plant's leaves. Use a 15 x 24 px rectangle ( #BADEB2 ) and set the radius of all corners to 15 pxusing the Transform panel. Duplicate this first leaf (Control-C > Control-F) ( #ACD4A3 ) and flip it vertically (right click > Transform > Reflect).

Add two 30 x 30 px ellipses ( #A2CC99 ) and cross them at the center, applying Intersect from the Pathfinderpanel. Place this last petal behind the rest (click right > Arrange > Send Backward). Group the plant together (Control-G).

Step 4 For our second plant, let’s begin by using the same procedure from steps 1-2. Use a 32 x 43 px rectangle for the pot ( #BCCBFA ) and 36 x 2 px ( #6B7EB9 ) and 18 x 2 px rectangles ( #556AA3 ) for the top.

Step 5

Now we’re going to draw the leaves of the next plant. Select the Pen Tool (P) and draw a petal as shown in the image below. Rotate the petals using the Rotate Tool (R) and alternate the following fill colors between them: 

#BADEB2



#ACD4A3



#A2CC99

Remember to duplicate the petals using Control-C followed by Control-F.

5. How to Create the Radio Step 1 Now let’s create the radio using a 37 x 80 px rectangle ( #08AAC7 ) to represent the body, and add a 76 x 32 px rectangle ( #BFE6EC ). Duplicate (Control-C > Control-F) the last rectangle ( #A3D1D9 ) twice and move the last copy twice downwards and once to the right. Then apply Minus Front on the Pathfinder panel, making sure to select the last copies. Add two 6 x 3 px rectangles ( #007099 ) for the base of the radio.

Step 2 Now add the speakers using a 22 x 22 px ellipse ( #A3D1D9 ), duplicate it ( #08AAC7 ) (Control-C > Control-F) and move it upwards by 1 px. Then add a 14 x 14 px ( #EDEEF0 ) and a 7 x 7 px rectangle ( #08AAC7 ). Group all ellipses together, duplicate the group (Control-C > Control-F), and place both of them as shown in the image below.

Add another 6 x 6 px ellipse ( #A3D1D9 ) and duplicate it ( #007099 ), moving it upwards by 1 px. Repeat the same procedure but change the fill color of the last ellipse to #08AAC7 . Group the radio (Control-G).

6. How to Create the Pencil Pot Step 1 Let’s continue with the pencil pot. Begin by drawing a pencil using a 3 x 35 px rectangle ( #EBBD63 ) and then add four 3 x 2 px rectangles with the following fill colors: #CB6120 , #D8D9DD , #AEADB3 .

Create a 1.5 x 35 px rectangle ( #EBBD63 ) and set the Blending Mode to Multiply with a 20% Opacity. Add a node using the Pen Tool (P) at the bottom of the pencil and move it downwards. Group everything together (Control-G).

Draw another pencil using an equal 3 x 35 px rectangle ( #87E8C6 ). Duplicate it and change its Width to 1.5 px using the Transform panel. Set the Blending Mode to Multiply and the Opacity to 20% using the Appearance panel. Group the pencil together (Control-G).

Step 2

Now draw the glass by creating a 22 x 30 px rectangle ( #897FBA ), and add a 22 x 3 px rectangle ( #7D73B0 ). Create another 25 x 3 px rectangle ( #A094D9 ) for the top of the glass. Group the glass (Control-G) and position the pencils under the glass as shown in the image below.

7. How to Create the Box Step 1 Let’s create the box using a 63 x 31 px rectangle ( #A094D9 ). Add a 63 x 3 px rectangle ( #897FBA ). Now create two rectangles for the label, one of 28 x 10 px ( #EDEEF0 ) and another one of 22 x 2 px ( #F6CD61 ). Finally, create the box lid using a 69 x 13 px rectangle ( #6F5E87 ). Group everything together (Control-G).

8. Place All the Elements Together

Step 1 Combine all the items on the shelves.

Advertisement

Step 2 Finish the design by adding an 800 x 600 px rectangle ( #EFF7E0 ) to the back of the canvas. And with that, we have finished this illustration.

Congratulations! You're Finished! Done! We finished this amazing illustration, and it turned out great. We have created a bit of everything, which is a good thing because surely you have learned many new things that can help you open up your imagination. I hope you enjoyed it as much as I did, and that every step has been a learning experience for you. I’ll be awaiting your results!