3d space drawing illustrator vector template

TutThumbYep, you read that title correctly! I empathize this tutorial title kind of seems like an oxy-moron. We are combining one of the most primitive and limited graphic techniques edited on a pixel level, with the modernistic sleek artful of 3D effects. But the result is a juxtaposition so rockin it kicks you lot straight in your nostalgic keister!

Okay……okay…..I'yard the kickoff to admit that Illustrator'southward 3D effects are kind of similar an old dog that knows 3 tricks, and that dog has 3 legs. I'm totally fine with that! I beloved Illustrator for its clean vector graphics . Consequently the 3D in Illustrator has turned into that thing I similar to fool effectually with, but never apply for actual pattern jobs. I was pleasantly surprised one day while applying Illustrator's Extrude command to pixel art. I realized, that three legged dog even so has some tricks up its sleeves when a little creativity and unconventional software utilise is combined. Beneath we have the results of the techniques used in this tutorial. Lets get to information technology and create some vector nectar!

Tutorial Details

  • Program: Adobe Illustrator CS6 ( Filigree tool available from CS4 onward, 3D bachelor in all Illustrator CS versions)
  • Difficulty: Intermediate-Avant-garde
  • Topics covered: Alive Paint, Pathfinder functionality, Extrude and Bevel,layers
  • Estimated Completion Time: 20-40 minutes

Final Image

FinalLora

 Step i

Lets start by creating a new document and template image for our pixel fine art. For this tutorial you can go alee and copy/paste the graphic symbol sprite I fabricated of my lovely pixelated wife Lora. One time you understand the techniques to create 3D pixel art you can create your own characters or employ your favorite classic video game characters!

Template

Past double-clicking the image thumbnail of the layer you posted the prototype in, y'all can enable the layer equally a template. This volition automatically lock and dim the layer to 50%. How convenient!

Footstep 2

Once your template is in place, information technology is time to create a grid directly over our template layer. Lucky for us, Illustrator has a tool that will create grids for united states of america! You volition find the Rectangular Grid Tool under the Line Segment surface area of the Tools Panel. Hold the mouse down on the line segment tool to admission a fly out panel which contains our desired tool. In the wink of an middle the Grid tool will turn from a lonely useless Illustrator tool into a champion of possibilities! Once available, double-click the Grid Tool  icon in the Tools Console to admission the tools options. Set up the horizontal dividers to 27, and the vertical dividers to 14. In a new tiptop layer, drag the grid from 1 corner of the template to the other. Belongings infinite bar while dragging volition allow you lot to move the grid before placing it. In one case your grid is placed over your template equally pictured (pixel to pixel) it will be time to outset creating pixel fine art!
Grid

Stride 3

Select your grid and hitting shortcut "K" on your keyboard to access the Live Pigment Bucket. Hover the bucket over the grid and click to create a live paint grid. Now we shall pigment!
LivePainGif

Yous can sample the colors of the template underneath past using the Eyedropper Tool. You can toggle betwixt shortcuts "i" and "k" until your retro masterpiece is complete. Since our template is dimmed, we tin run across what the heck nosotros are doing. If you lot mess up, you can set your color make full to none "/" to erase your boo boos.Once you'r finished, select information technology once again and hit shortcut "/" on your stroke to eliminate the stroke on the grid.
Paint

Step iv

If yous are simply interested in creating pixel art in Illustrator y'all tin can cease right here. But, if you want to add together a few more blueprint wizard creds to your ever expanding repertoire nosotros must continue into the globe of 3D! Birthday nosotros are going to need a total of 4 dissimilar pixel sprite layers to complete our 3D design. Things are going to get much more complex from hither. In order to get the best looking 3D design possible we are going to demand to imagine our layers stacked in 3D space while nosotros are designing them. If you have difficulty imagining things in 3D infinite and so try this uncomplicated illustration. Imagine each one of these layers pictured beneath are flat Lego figures built out of square shaped pieces laying flat on the ground . When nosotros subsequently stack each layer directly on top of the last eventually we have a completed effigy with extra depth and unique grooves.

Create these 4 separate pixel sprite layers exactly equally shown. Ane incorrect pixel tin can create an incorrect looking design. Pay extra shut attention to the necklace and neckline in the 1_Bottom layer also as the transparency in the neckline and oral cavity in the 2_Middle layer. Those transparent parts are very important. Don't forget the whites as well! For the rest of the tutorial I will exist referring to these layers by the championship I have given them in the layers panel.
Sprites

Step v

In one case we have completed the four unlike pieces and have placed them in their respective layers we can endeavour out Illustrator's Extrude & Bevel effects on our pixel fine art.

Select the 1_Bottom layer and go to Effect>3D>Extrude & Bevel. When we select Preview in the bottom left of the panel, nosotros can encounter the effect applied to our pixel art. I havn't changed whatever of the default settings in this example except for Extrude Depth and a Tall-Round bevel.  I'm not going to become into all the details of the Extrude and Bevel options in this tutorial. You may experiment with the parameters to create what you feel are the best aesthetics for your pixel fine art.

Observe how your pixel art has each and every pixel block defined. If you like this effect you can go with this and ignore Stride 6. If you want to have solid pieces similar the concluding art I created and then proceed to the side by side footstep.

Cubes

Step six

To create solid pieces defined by color in our pixel art we are going to put the Pathfinder to good use. Select your pixel art and go up to Object>LivePaint>Expand. With the fine art selected press shortcut Command(Ctrl)/Shift/G to Ungroup all of our individual pixels.

Double-click the Wand Tool to bring up the tool's options. Make certain Fill Color is selected and your Tolerance is depression. With our pathfinder gear up nosotros tin can now select each color grouping with the wand and Unite them every bit a solid slice with the Pathfinder's Unite Shape Mode.

Make certain your other layers are locked or hidden or we inadvertently group pieces of our various layers together. Once the layer is finished brand sure the art is selected and re-Grouped past hitting shortcut Command(Ctrl)/G. This will keep the 3D issue from from doing funky things.

Pathfinder

Step 7

At present when we utilise the Consequence>3D>Extrude & Bevel we tin can see the new divergence. In one case again you lot may fiddle around with the parameters how you lot wish to give your art a good artful.

I will take this time every bit well to remind you that Illustrator'due south 3D furnishings aren't really the "End-all, Be-all" of 3D furnishings. So you may see some strange things especially since we are using the 3D in a somewhat unconventional way. You may go some artifacting and an occasional strange line. As you lot tin can see pictured in the left shoulder of my fine art. These tin be easily remedied in our concluding product past creating some rectangle shape "patches" of the aforementioned color, or our last art tin patched up later in Photoshop.

First3D

Step 8

Once you have your desired look y'all can apply the same effect and parameters to the 2_Middle layer. Identify this layer directly over the 1_Bottom layer. You tin can utilize the Arrows on the keyboard to nudge the art upward just right. Now you tin can commencement to run into the slap-up depth our pieces create when stacked up on each other. Wait at the negative space areas of the mouth and neck! Rad!

stack

Step 9

In our final stride we will echo Step viii on our remaining layers. Yous have now created 3D pixel art in Adobe Illustrator!Stop upward your art by creating a background and other characters or elements to your composition. Drop shadows can too be applied to these 3D layers for actress depth. Pat yourself on the back Vector Cadet!

FinalStack

Tutorial by Dan Grady

Dan Grady'due south Internet Stuffs

My Website
My Youtube Aqueduct
The Vector Sector

These icons link to social bookmarking sites where readers can share and discover new web pages.

summersgraping.blogspot.com

Source: http://vectips.com/tutorials/create-3d-pixel-art-in-illustrator/

0 Response to "3d space drawing illustrator vector template"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel