The need to tell and immerse the player in a setting, and then encourage them to evolve through a story line is an amazing focus of this digital interactive media.

Just like the Movie Industry, the Video Game Industry uses Trailers as their primary source of advertisement.  Normally showing you a glimpse of the story, so they can prime you to be excited about their newest products.  In an industry with so much competition every once in awhile it seem that a few leaders rise to the top with amazing stories that unify huge followings of players.  These stories get us to care about the people and characters, in away that not even movies can not seem to.

Here are some examples of these amazing game trailers:

This is the First trailer I saw for Halo 3, and I saw it before movie in the theater.  This is an amazing trailer for a few reasons.  First off, we all have looked up at the sky and wondered if we are alone.  Second, those are kids, innocents.  Lastly, it places the action happening in the same spot Master Chief laid as a child.  All this was done I think to make us care about the story, about our world, and this fictional future.

The Halo series has had an amazing run with trailers, and this is not the only Halo trailer I have decided to feature, next let’s look at Reach.

For fans of the series, Reach is a staple in the story line, we all know as the trailer opens that the planet will fall.  This trailer is remarkably simple.  But the feelings it evokes, knowing that everyone on the planet is going to die, and that this marks a major defeat for the USNC, are not.  This trailer also sets in motion the entire story as Halo: Reach is the first bit of story in the entire Halo series.

War seems to be a popular concept in video games, this is for a number of reason.  The most obvious and often shouted about reason being that the fast paced action is exciting.  But I feel that for a lot of designers, and players we are tackling a much bigger issue.  Our world is a dangerous place, ever balanced on a knife edge, and these feelings don’t just “go away”.  I think nothing sums up these feelings as much as the next trailer.

“It doesn’t take the most powerful nations on Earth, to create the next global conflict.  Just the will of a Single Man.”  Those words scare most of us, and they should.  Sure at the surface level the Modern Warfare series is about fast, fun, action.  As a culture we enjoy challenges, and we have a tendency to glorify war.  But under the surface, I think, most of us fear this sort of global event, and want to know that in some way we are not powerless.

Mass Effect is another game series that deals with an alien threat and the concept of the loss of an entire our Planet.  This trailer again focuses on the loss of innocence, as well as showcasing basic human desires, like the ability to fly.  It all shows how we can be dehumanized, and turned into monsters.  Once again the theme of this game maybe a little deeper than the surface action/adventure.

Just a few of my favorites.

-TheGrav

We talked about the the selection arrows, and pen tools in the last tutorial, and those will probably always be your most used tools.  Today we are going to focus on two new tools however, the “Shape Tool” and “Text Tool”.  We will use these to make a simple logo plate.

You might noticed that the tool bar is subdivided, this is done to basically split tool groups apart.  The top grouping is selection tools, the second section is creation tools, the third section is manipulation tools, the fourth is colors/effects, the fifth is inserts, and the last contains web/finishing tools.  The Very Last section deals with the line/object you currently have selected, I will go a bit more into that this tutorial as well.

For now we are going to focus on section two, which contains our creation based tools.  In order you have:  The Pen Tool, the Text Tool, the Line Tool, the Shape Tool, Paintbrush, Pencil Tool, Blob Tool, and Eraser. Our goal is to learn how to use the Shape Tool, and then the Text Tool.

The Shape Tool looks like an oval on this picture, but just like the Pen Tool it has a carrot in the bottom right hand corner indicating that there are some nested tools hidden from view by default.  Let’s take a look at all those now.

The Ellipse Tool was the last shape tool I used, and as you can see it is marked with a black bullet point.  But we have a few other potential shapes!

The Rectangle Tool makes rectangles.  Rounded Rectangle Tool is a rectangle with “soft” or rounded edges.  Ellipse Tool makes Ellipse’s (Circles/Ovals).  The Polygon Tool will make Polygons, and the  Star Tool makes star shapes.

The Polygon, Flare, and Star Tools are a bit more complicated, and get their own tutorial.  But back to basics, after all we need to know how to crawl before we run!

We will look at the Rectangle Tool as a good base from how all the rest work.

Click on a point and drag to make a rectangle of your desired size, just like with the Pen Tool, we get this ghost projection of what the shape “will” look like once we release the mouse button.

Now we can make a Square too, just like with the Pen Tool, holding down the Shift Key, constrains the Shape Tool as well.  In this case it makes a Square.

Once again we get the blue ghost projection.  With the Selection Tool (Black Arrow) we will do some quick manipulations, in the image below I grabbed the shape, and dragged the right edge line out converting my square back into a rectangle.  With the Direct Selection Tool, you can grab points and lines and move them with more freedom.You can use the Selection Tool on a shape holding down Shift, again constraining the shape in proportion, this way you can easily re-size the selected object.  Try it out!  The Ellipse tool works much the same, select it, click a point and drag.  We get the projected line, and without holding down Shift, we just get an oval.Again if we do hold down shift you can constrain the shape into a true circle.  Just like with the Pen Tool there is an almost endless potential with these shapes.  The Rounded Corner Rectangle Tool is fun to play with but follows the same rules!  Polygons, Stars, and Flares have lots of options, and I will cover them in my next tutorial.

But a lot of these rules are universal, so nab a shape, and play around get comfortable with all the possibilities, and then we can talk about making something!

Now we are going to clean up our work space, grabbing the Selection Tool you can select a shape and delete it with the “Delete” or “Backspace” key.  But what if you have a few shapes like we do?  Well you can click and drag with the selection tool to select multiple objects, or you can select one shape, and holding “ctrl” click on other objects/shapes to add them to that selection.

Now with everything selected, except for the oval shape I want to move forward with, I can hit “Delete” and clean up my work space quickly.  Now lets look at the top bar once again.  Just like with the line we manipulated last Tutorial, we have a bunch of Shape specific options.  Once again the first two boxes, are the fill color and line color selectors, and the next option is Stroke.

We skipped over Stroke last time but now we want it.  Stroke determines how “thick” the path around the shape is.  As you can see we are increasing the Stroke of this line to 6pt.(points)  Don’t worry about the rest of the bar in this tutorial.  With the Stroke Increased we start having some sort of design taking shape.  Next we are going to select the shape again and make a copy of it.  This is pretty easy “crtl + C” copies the images.

“ctrl + V” Pastes a copy of the object into the work space.  Now I just reduce the Stroke back to 1pt, and align the two ovals so the new, smaller stroked object is in the center of the other.

In Illustrator CS3 and above, neon green Alignment Guides Automatically appear to help you line it up!  This is an awesome cheat, but if you don’t have that, just align it by eye.

There are some advanced tricks for Alignment that we will get to later.  For now lets move to the Type Tool.  As with the other Tools there is a mess of hidden tools for typing. But all we care about right now is the Type Tool itself.(More on the others next time!)

Just like Microsoft Word, Notepad, or any other text based program the Type Tool gives you the blinking cursor, click anywhere inside the shape and you can type, just like you are using a word processor.  

Now I am going to play around a show you a few “Advanced” Type Tool steps that we will go over next time.  As you can see I have decided to type “TheGrav”  and then I have brought up the Character Window.  You can find this by going to Window>Type>Character or using the Hot-key “Ctrl + T”  I have selected the font Sansation, and increased the size so we can make something.  Again I have basically aligned the text in the center of both ovals.

Now we have two boring white ovals, and some text… lets change it up.  Remember the Very bottom section of the Tool Bar?  That’s where we are headed!

So we basically have a big solid box, and a thick stroke box.  In this case the “Stroke” box is on top.  What theses control is the “Fill” and “Stroke” color of your object.  Currently I have the text selected which does not have a Stroke at all, hence the white with red slash, and a black fill.  The box on the top is the box you are currently manipulating, but by clicking on the box behind you give it priority.  You can also click the funky double sided arrow up top.

This however does two things, it switches which you are working on “Fill” or “Stroke” but it also switches there values.  In this case, my stroke would become black, and my fill you become empty/clear.  Now selecting our inner oval, and going down to this box, that is what we are going to do.

Next I am going to use the Selection Tool to click where I know the text is, in the middle of the Oval.  (I also used the Selection Tool to reshape the inner oval a bit)  Once I have the text selected I am going to return to the very bottom box and double click the fill color box, which brings up the color selector.

Now we just select a color we want.  With the Color Picker Illustrator uses the Eye Dropper method, basically a small circular selector that you drag and drop on the color you want.  I choose white.  You can also choose to use RGB Values, Hex Codes, CMYK Values and play with hue, saturation, and Balance… we will get back to all those late.

Hit okay, The text turns white and we get this:

As always remember to play around and make as big a mess as you can!  Illustrator is a lot about becoming comfortable with the tools.

Be sure to follow my blog for more Tutorials in Illustrator, and ask any questions you might have!

-TheGrav

Related articles

• Make a Simple Cell Phone Icon in Illustrator (theraisak.com)
• Tutorial 1, Illustrator (worldcrafter.wordpress.com)

This is what I get for asking my friends for help and inspiration.  And what do my friends get?!?

HARDCORE PORCUPINE!

Step one was to figure out how to even make a Porcupine… So a quick trip to Google, and then a leap into Illustrator, and this outline is born!  Now he isn’t a marsh-mellow, but he is a bit “fluffy”.

I also decided that if he was going to be “Farting” rainbows and shooting flames from his nose, he needed to be ROCKIN’ OUT!  Hairband Style.

Next step was to add an electric guitar.  Of course this work was all done WHILE listening to 80s metal.  Inspiration comes from all around after all.

I also added a few more spines, as well as the second arm, and detailing on the hands.  I gave the Porcupine a bit of a “war” face, after all he is playing “the devil’s music”.

Can you see the rainbows?  The FLAMES!?!?  I mean this little guy has gone through the Ozzy and Zombie school OF FACE MELTING!  In a fantastic 80s way.

I need an art show,  it would be like Bob Ross mixed with Emeral.  You know.. behind this “happy tree” is where I hid the body, but don’t worry because HERE IS A BEAVER DUAL-WEILDING CHAINSAWS!!!!!!!  Or a History Channel special: “Beaver: The Real Ax-men.”

BAM!  Now the Little bastard has a clip!  I mean a Rainbow.  So you guys can kinda follow along with what I do behind the scenes, this is the last step where this guy is in Illustrator.

I have some lines to clean up in photoshop, as well as color to add.  This does show that you can get a lot done working just in Illustrator .  Organic shapes are pretty easy to come up with after you get over the fear of how it might look.

I cover more on how to use Illustrator in my tutorial series.  CHECK IT OUT!  (Nothing says metal more than caps everyone ONCE in awhile just to make sure the reader is paying attention.)

So a lot is going on here, I have yet to decide on what I am gonna do at the end of this logo.  Often I like doing “painted” logos.  This works pretty well with the digital state of most media these days.  It looks good, but it does take more time.  However after just a few minutes of tweaking and messing around I went back to the base Logo and redid the color.

Basically I felt I was moving past the original intent of the logo, as well as starting to get a bit too deep into a fun/quick logo.  I have more logo work, that I will be featuring in the future, that does follow the “Painting” method.

And here he is in all his GLORY!! Praise the HARDCORE PORCUPINE!

-TheGrav

Related articles

• Guess the Logo! (fabsugar.com)
• I can haz new logo (thewayoftheweb.net)

Illustrator, like most Adobe products is a pretty detailed program with an insane amount of options.  Most of it can seem like just finding your way around is too hard!  Now I am a PC user, as well as an artist and illustrator so my methods are pretty tailored to my set-up and style, but the rules are mostly still the same, and I hope this tutorial will help outline some of Illustrators amazing creation features.

I am also using cs5, but as someone how has used Illustrator professionally for about 7 years I can tell you, not much has changed in the basic functions, and some of the newer, more advanced functions will get their own tutorials.

If you have ever used an Adobe product before this should be pretty familiar, File > New File ( ctrl + n) will start our project, and bring up this window.

As you can see we have a bunch of options.  Name, allows us to name the file as  its created.  Number of Artboards, has to do with advanced printing options, so we are gonna leave it at 1.  Next we are gonna skip Size, and just enter 10 x 10 in Width and Height, setting Size to Custom automatically.  Now this is important, Units can have a big impact on your work, I almost always work in inches, and I always work pretty big. 

There are two reasons for this.  1)  Most of my clients have many printing needs, from letterheads to billboards, so working in inches I can do my own test prints and see it in real life sizes.  2)  If you ever take Illustrator files into Photoshop, they stop being Vector Graphics and they get assigned a pixel value, it is impossible to make a small, pixelated image bigger, without it being more pixelated.

With Vector Graphics, in a Vector Program (Like Illustrator) you are fine, as the “Points” are the only non-dynamic information stored in the file.  Meaning, in short, a Vector File is easy to re-size without loss of detail or pixelation.  This concept is a lot more involved, but that is really all you need to know to get started.

Bleeds we will leave blank for now, again this has to do with sending your work out to a print shop, and is an Advanced subject, so I may cover it in a later tutorial.

Now we have our file, and its all ready for us to make a mess!  This can be pretty scary
especially if this is your first time using Illustrator, so lets focus on the tools you really need as a beginner.  As you can see I have “Pen Tool” highlighted that’s because this tool, in my opinion, is what Illustrator is all about.  Forget every other tool for now, the “Pen Tool” is all you need!

Now the Pen Tool is not alone in his little spot, so let’s quickly go over what else we have hiding under him.  To access the menu under the Pen Tool simple Click and Hold, which should give you this drop-down menu.

The Pen Tool itself, is what we will use in a minute to draw a line.  A line is actually generated between two or more “Anchor” points.  The next two tools allow you to Add and Remove Anchor points respectively.  The last tool allows you to Convert the Anchor Point.  By default an Anchor point will create a hard edge, for example: a 90 degree angle.  However by using this tool you can change that edge into a curve.

I will cover all these uses for the pen tool by the end of this tutorial.  First select the Pen Tool itself and get ready to make a Line! To do this we only need to click on a point where we want the line to start, and then click on the point where we want the line to end.

Our first point…

Our Second point, and the line in between.  Now to draw a level line you can do the same thing, but hold down the SHIFT key as you place each of your points.

In order to get the two line not to be joined by one of the Anchor points, you have to quickly select the Black Arrow from the top of the tool bar, and click anywhere on the file that isn’t on a line.

Now we two lines, one straight or level, and the other at an angle.  Lets see what some of those other tools do!  First we are going to look at the “Add Anchor Point Tool.”   In order to add and anchor point, you have to do it on the existing line, if you don’t you will get an error, and no points will be added.  For this I am going to add two points to the angled line.

I zoomed in closer to the line so you could see the points I added, in this case they are those tiny blue squares that split my line roughly into thirds.

Zooming in and Out of most programs is pretty simple, and Illustrator is no different.  In most cases I used Hot Keys, and the zoom hot keys, I think, are some of the easiest to learn and use as a habit builder.  Ctrl + “+” zooms in, and Ctrl + “-” zooms out.

The next tool is the Delete Anchor Point Tool, once again you have to be pretty precise, in this case you can only used the Delete Anchor Point Tool On An Existing Point.  In this case I am going to take out the lower of the two center points. 

Our next trick requires that we look at the Tool Bar again, this time in a little more depth.

The top two tools are all we really care about right now.  The Black Arrow is the Select Tool and allows you to select an entire object.  It is also useful in switching objects, or de-selecting objects by clicking anywhere but an object on the screen.  There is a lot more to this tool, but lets stick with that for now.

The White Arrow or Hollow Arrow tools is the Direct Selection Tool and is used to manipulate Anchor points, line segments, or Anchor Handles.  It is also highlighted in this image as it is the next tool I am covering.  We will also only be using it to manipulate an Anchor point in this tutorial.

With the White Arrow selected we head back to our line and find the middle anchor point.  When you click on the line, but not on a anchor point, you will notice that the entire length get’s highlighted and the anchor points turn into hollow blue boxes.  Also whatever Line Segment you selected is what you are currently controlling.  In this case, find and hover over the Anchor point itself, when you get it a small anchor point icon should appear just under your mouse icon to the right.

When you click on that single anchor point it will turn solid blue while the other two points remain hollow.  Now with the Anchor point selected, Click- Drag the point up above your line, so you get two lines joined by an angle.  As you do this you will get a blue “ghost” line, which is the preview of where you new solid line will fall.

Letting go of the mouse button will leave your line in it’s new position, and freeing you up to head to the Top Tool Bar and look at some of the option this Anchor Point has.

Other than File | Edit | Type … etc we get a secondary Header Tool Bar.  This deals only with the Anchor Point itself.  As you can see it has a bunch of options, but the only two buttons we care about right now are the Convert buttons.  The first shows a Right Angle, and hard edge, with the Anchor point at it’s center, this is how you will place most of your Anchors in Illustrator, however the second object is a curve with the Anchor Point in the center, this is the tool we are going to use.

Go ahead and click that button, and convert your hard edge into an organic shape like this:

We have two new little objects on our line now, these are control handles, and by using the Direct Select Tool (White Arrow) we can grab one of those control handles, and manipulate how our curve will look.  Now this is the intuitive part of the Tutorial.  You have two handle controls and you can go nuts creating all sorts of interesting curves.

As your drag them around, you will see the same sort of projected “ghost” line, which tells you more or less what the shape will look like once you have stopped manipulating the curve.  Much like Chess or Checkers, the line is not set in stone until you let go of the control point.

Using mostly just these few tricks, I created all the lines in the first steps of: http://worldcrafter.wordpress.com/2012/02/03/working-on-the-house-in-illustrator/

One of the biggest things to learn with any of Adobe’s creative programs is that you have to not be afraid of the tools!  Just play around, make a mess, and see what happens.  The Art, and Design come a lot easier when you know the tools first!

That wraps it up for my First Illustrator Tutorial!  Please be sure to follow my WordPress blog to see future Tutorials, as well as comment to ask any questions!  

Stay Tuned!

-TheGrav

• Adobe Illustrator Tutorial: Creating a Disco Ball (noupe.com)
• Create a Business Icon from Scratch an Adobe Illustrator Tutorial (noupe.com)
• Designing Invitations in Adobe Illustrator: Part 1 (weddingbee.com)

To make my shadows, I am simply making shapes, setting the color to a value just darker than the main house, and then turning off the outside line.  Same for the highlights.  Then it is all about making the shapes look bubble-like or organic in some way, that helps capture that Icon/Cartoon feeling.

For my hard lines, that is all I am using lines.  I play with the stroke value to get them looking more how I want.  For those of you looking to get a better grasp on how to use Illustrator from the ground up, I will be doing a few tutorials soon!

As I mentioned in my last post, those lines need to be expanded, or as you re-size they will retain their “stroke” and get MUCH bigger/smaller in relation to the object.  Once expanded they become filled objects themselves and are ready for the tweaking!  Once again I need to soften all my “door” line edges, and then I am just about done!

Here is my Final Logo!

For more Illustrator ideas/tutorials please be sure to follow this blog!

-TheGrav

Today I used method two and came up with this little Icon…

It’s supper simple, and looks pretty damn cool.  It will also fit perfectly in my clients WordPress theme.  But it is missing something.

A quick tip here:  when I was finished with the line work I selected all my lines and expanded them.  (Object > Expand).  This way, since I relied a lot on stroke weight to suggest shape, I can re-size this sucker at whim and it looks the same.

Now I need this little thing to pop!  I have decided to do this by trying to merge the “social media” icon look and the cell shaded cartoon look.  Wish me Luck!  My first step is to decide on a light source, in this case I am gonna put it in the upper left hand corner, just “off” camera.

Related articles

• Illustrator Spotlight: Lesley Barnes (webdesignier.com)
• Tips And Tricks: Increase The Realism Of Your Vector Images In Adobe Illustrator (noupe.com)

No clear winner yet

-TheGrav

As a web developer and designer, I have domains, I have web space, but how am I gonna make this work!  Wordpress is an awesome platform, and I have considered packing up Worldcrafter and redeploying.  I have even considered hand coding a web-comic site, but I keep getting stuck on what the next step should really be.

I also don’t want to lose any of my readers, and currently I am imagining I get most through wordpress.com.  A quick Google search on this just served to confuse me even more, there seems to be 900 people with really loud “bad” ideas on how to start/build a web-comic site.  Hopefully I can find a solution and share the steps as I go!

-TheGrav

My idea behind Death is of a specter dragging itself through the trenched to World War I collecting the souls of those damned to endless serve in the forever wars.

When all the horsemen are finalized I plan to do a few paintings, and possibly work them into a comic or something.

-TheGrav

Related articles

• The Four Horsemen joining forces in Darksiders 3? (venturebeat.com)
• 1916: World War I with dinosaurs and demons (nightmaremode.net)