Wszystkie wpisy, których autorem jest admin

Web Tools

How to Create a Bodega Shop Illustration in Adobe Illustrator

Post pobrano z: How to Create a Bodega Shop Illustration in Adobe Illustrator

Final product image
What You’ll Be Creating

In this tutorial we will create a complete shop with all the details, in addition to some shrubs and a street with its lampposts, using the most basic shapes and tools of Adobe Illustrator.

Find more inspiration for your vector illustrations over on GraphicRiver.

1. How to Create a New Document 

Press Control-N to make a New Document. Set the Units to Pixels, and enter 800 x 600 for the width and height of the document. Then in the Advanced options, select RGB, Screen (72 ppi), and make sure to uncheck the Align New Objects to Pixel Grid box before clicking OK.

Go to the Preferences (Control-K) and enter 1 px for the Keyboard increment. Press OK.

You can activate the Info panel (Window > Info) in order to have a preview of the size and position of your shapes. Remember to set the measuring unit to Pixels from Edit > Preferences > Units. This will greatly increase the speed of your work.

New Document and Set Keyboard increment

2. How to Create a Road

We’ll start with the road and the sidewalk of our shop.

Start by creating an 800 x 120 px rectangle using the Rectangle Tool (M). Use #706B79 as the fill color.

Now create the sidewalk using one 704 x 10 px rectangle (#A8A5AA) and one 704 x 6 px rectangle (#706B79). 

Creating the road street

3. How to Create a Store

Now for the most time-consuming step, the store.

Step 1

Start by creating the shop floor. Create a 314 x 7 px rectangle (#9D9588) with the Rectangle Tool (M).

Then create a column using a 36 x 256 px rectangle (#E9E7DC) and add details with two 22 x 53 px rectangles (#F9F6E6) and a 22 x 125 px rectangle (#F9F6E6). Set Inverted Round corners with a 5 px radius from the Transform panel.

Adding a column

Step 2

Now duplicate the internal forms of the column twice (Control-C followed by Control-F) and move them 2 px downwards with the keyboard’s arrow keys. Apply Minus Front from the Pathfinder panel to every copy.

Change the fill color to #D6D4C3. Group the column together (Control-G) and duplicate it (Control-C > Control-F) at the other end.

Adding details on the column

Step 3

Let’s create the door using a 90 x 180 px rectangle (#EAAB61). Then add another 62 x 34 px rectangle (#DB9747) and create a shadow by duplicating twice (Control-C followed by Control-F). Move the last copy 4 px downwards and 4 px to the right.

Set Minus Front from the Pathfinder panel.

Creating the door of the store

Step 4

Create the door’s window using a 62 x 112 px rectangle (#78C4ED). Now add a 5 x 112 px rectangle (#64ABD5) to act as a shadow.

Now create a pair of rectangles (#FFFFFF) and rotate them 45º with the Rotate Tool (R). Set a 30% Opacity in the top bar and with the Shape Builder Tool (Shift-M) remove the remaining forms.

Adding details in the window of the door

Step 5

Now, create a sign using a 30 x 20 px rectangle (#FFFFFF). Add two 2 x 18 px rectangles (#EAAB61), rotate them until they have a 45º angle using the Rotate Tool (R), and place them under the sign (right click > Arrange > Send Backward).

Then create a 6 x 6 px ellipse (#FFFFFF) using the Ellipse Tool (L). Draw two rectangles (#F7DDC0) on the sign.

Group the sign (Control-G) and duplicate it (Control-C > Control-F). Use #64ABD5 as fill color for the copy, move it 2 px downwards and to the right, and then send it behind the sign (Control-[).

Adding a sign

Step 6

Now create the handle using a 7 x 7 px ellipse (#BB7B33).

Now add a 224 x 27 px rectangle (#EAAB61) for the wall of the store and a 224 x 153 px rectangle (#78C4ED) for the window.

Duplicate the rectangle of the wall twice (Control-C followed by Control-F), and move the second copy 3 px downwards and 3 px to the right. Set Minus Front from the Pathfinder panel. Change the fill color to #DB9747.

Creating the wall and windows of the store

Step 7

Create some setoffs in the wall with a 3 x 16 px rectangle and a 61 x 3 px rectangle (#DB9747), grouping them together (Control-G) to form an inverted L. Then duplicate it twice (Control-C > Control-F).

Adding setoffs in the wall

Step 8

We will create some details in the window. Take the Pen Tool (P) and draw the top of a bar using the fill color #6BAFE2.

Then draw the seat’s shadows and some glasses on the table using the fill color  #5789C3. Round the seats’ corners using Live Corners with the Direct Selection Tool (A).

Creating the details in the window

Step 9

Now create the lamps using one 2 x 44 px rectangle (#5789C3) and one 22 x 12 px rectangle (#5789C3). Move the upper nodes of the last rectangle inwards by 4 px with the Direct Selection Tool (A).

Add an 8 x 8 px ellipse (#5789C3) under the hood of the lamp and group everything together (Control-G). Duplicate it (Control-C > Control-F) and place them far from each other.

Adding the lamps in the store

Step 10

Add reflections on the window, drawing three rectangles with the Rectangle Tool (M). Use #FFFFFF as the fill color and set a 30% Opacity in the top bar.

Rotate the rectangles 45° and use the Shape Builder Tool (Shift-M) to remove the rest of the form of the window.

Adding highlights on the window

Step 11

Now add the window divisions using one 7 x 180 px rectangle, one 217 x 7 px rectangle, and one 7 x 146 px rectangle. Use #F9F6E6 as the fill color.

Then add two 4 x 146 px rectangles (#64ABD5) and place them under the reflections (Control-[) as shown in the image below.

Windows divisions

Step 12

In this step we will create the blind. To do this, create a 24.15 x 74 px rectangle (#EAAB61) and round its lower corners. Duplicate the rectangle (Control-C > Control-F) three times and alternate the use of the fill color #EDEEF0.

Adding the blind on the store

Step 13

Now draw a rectangle (#EAAB61) one-third away from the lower part of the blind and remove the remaining shape with the Shape Builder Tool (Shift-M). Set the Blending Mode to Multiply and the Opacity to 35% using the Appearance panel.

Add a 314 x 4 px rectangle (#FFFDEF) in the fold of the blind, and from the Appearance panel set the Blending Mode to Soft Light and the Opacity to 50%. Group everything together (Control-G) and duplicate it (Control-C > Control-F).

Creating details on the blind

Step 14

Send the blind copy backwards (Control-[) and apply the fill color #000000. Set the Opacity to 10% in the top bar.

Move the copy downwards just once by pressing the Shift key.

More details and shadows

Step 15

Add a lintel by creating a 314 x 34 px rectangle (#E9E1C4). Then create a 296 x 168 px rectangle (#D6D0B5) and set Inverted Round corners with a 4 px radius from the Transform panel.

Afterwards, duplicate it twice (Control-C followed by Control-F) and move the last copy 2 px downwards. Then apply Minus Front with the previous copy using the Pathfinder panel. Use #C2BCA4 as the fill color.

Adding a lintel on the blind

Step 16

Create a 314 x 35 px rectangle (#D6D0B5) over the lintel. Then create a 4 x 28 px rectangle (#C2BCA4) and round the lower corners.

Duplicate it and place it at the other end of the lintel. Select both rectangles and go to Object > Blend > Make to merge. Then establish a 40 step separation from Object > Blend > Blend Options.

Another lintel and details on it

Step 17

Make some shadows on the columns using two 36 x 4 px rectangles (#D6D4C3). Afterwards, add a 314 x 7 px rectangle (#C2BCA4) above the lintel, and set the Blending Mode to Multiply with a 40% Opacity using the Appearance panel. 

Adding some shadows on the lintel and columns

Step 18

Let’s finish the roof, using a 405 x 27 px rectangle (#F9F6E6). Then, add one 351 x 14 px rectangle (#D6D0B5) and one 351 x 4 px rectangle (#C2BCA4). Finally, add a 360 x 7 px rectangle (#F9F6E6). 

Adding the ceiling

Step 19

Create some bushes with two 54 x 54 px ellipses and use #7FBB86 and #68A96A as the fill colors. Then, duplicate the bushes (Control-C > Control-F) and place the copy at the other end.

Be sure to place them behind the shop (Shift-Control-[).

Adding some bushes

4. How to Create a Lamppost

Step 1

In this step, we are going to create the lampposts on the street. To do this, use an 18 x 18 px rectangle (#7C7C7C) and move the upper nodes 2 px inwards with the Direct Selection Tool (A).

Then add a 7 x 194 px rectangle (#6B6B6B) and move the upper nodes 2 px inwards. Afterwards, draw a rectangle at the top and delete the rest with the Shape Builder Tool (Shift-M).

Creating the base for the lampposts

Step 2

Now create a 26 x 3 px rectangle (#6B6B6B) over the post and a 36 x 3 px rectangle (#6B6B6B) above the last rectangle. Create a 3 x 26 px rectangle and place it in the middle, make a copy (#424242) and change its height to 4 px in the Transform panel.

Then take the Pen Tool (P) and draw a trapezoid for the lamp using the fill color #F2F2F2. Place it below the rectangle (Control-[).

Adding the post and the base of the lamp

Step 3

Create a 36 x 3 px rectangle (#6B6B6B) and place it in the middle of the lamp. Use the Shape Builder Tool (Shift-M) to remove the ends with the shape of the lamp.

Now create a 26 x 26 px ellipse (#7C7C7C) and remove the lower node. Place it on the top of the lamp. Group the lamppost together (Control-G), duplicate it (Control-C > Control-F), and place it at the other end of the store.

Creating details on the lamp

Step 4

To finish, let’s create the sky. Create an 800 x 600 px rectangle (#80C3EA) and send it to the back of the canvas (Object > Arrange > Send to Back).

Duplicating the lampposts

Perfect, You’re Finished!

The result is commendable! Congratulations on reaching this point. I hope you enjoyed it as much as I did and that you have learnt a lot. I’ll be watching the comments!

Final result
Design

Shutterstock editor: designing has never been so easy

Dodaj komentarz

Post pobrano z: Shutterstock editor: designing has never been so easy
first image of the post

“A picture is worth a thousand words”, this idiom coming from the newspaper era has never been so true. In a world where social media is so prominent, the volume of information has drastically increased, and the readers attention span has decreased proportionally.

Creating powerful pictures has never been so important, which is good news for designers and imaging professionals. This means that everybody needs to find a way to share images that will catch their friends and followers attention on various social networks.

You can now rejoice, as Shutterstock recently released an impressive tool that makes image editing easier than ever. Create messages for social media, ads that grab everybody’s attention, all that quicker than ever. Let’s take a look at the features of the editor.

Easy editing

Good app design is probably the core feature of Shutterstock’s online photo editor. The flawless is the feature that sets the image editor from its competitor that have been around for a while. You can personalize anything in your images, crop, add texts, logos, or create shapes. There are also some cool photo filters that you can add to your photo to make them even more special.

Streamlined search

Finding source images for your social media updates is often more time-consuming than it should. You need to fire up your browser, do a search, sign in to your account if you have one, or even sign up for a new account.

With Shutterstock Editor, this is made much faster. You can search for photos right into your editor, and start working on your image right away. Obviously, the photos will be taken from Shutterstock’s gigantic image database. One more good reason to choose to work with Shutterstock Editor.

Ready-to-use templates

To create professional designs very quickly, using templates is the way to go. Shutterstock anticipated on this need and provides you with stunning templates that will make you more productive than ever.

Saving and sharing made easy

Thanks to a flexible workflow, Shutterstock Editor makes saving your work on the go and sharing it seamless. This makes it perfect for marketing people and community managers.