How I Kill myself with indecision

I have been working on my portfolio site for what seems like years… although it has only been a few months.  The idea is to have this stargate like device the floats in the midst of planets, the planets making up the “artsy” links for the different sections of my site.  This works out pretty well.  Using HTML5 and CSS3 I am able to get a quarter gate, in the bottom left corner, with planets positioned around it to look awesome!  In 1920 x 1080…

The problem is with a Liquid Layout as soon as it is re-sized… everything goes to shit.  Well not everything, using some CSS3 trickery I was able to back the background starscape and the gate itself re-size and maintain relative position, but the planets go all to hell and back.  An unfortunate reality that modern web-designers have to take into account is that most people still prefer to view a webpage at 1024 x 768, whether that is their default screen-size or they prefer to browse in windowed mode so their boss doesn’t catch them.

This leaves me with a few options… write something obscenely javascript heavy, that registers the user’s screen-size and spits back the page.  This also requires a lot of coding, as CSS has to be generated for each size detected.  Or I figure out a simple solution for now, and get to finishing.

What this really means is that I am gonna repaint the gate… as I am now centering the navigation page in a 1020px box, rather than having it adhere to the rules of a traditional liquid layout.   For those of you new to Worldcrafter, here is the original gate:

Warp Gate, Digital Painting, Ryan Berry


And here is step one of the revision:



Wheee!!! Painting time!


On the Subject of Living worlds…

The last planet I worked on painting was somewhere in the primordial stage, some green sludge, some frozen or trapped water.  The next world I decided to work on was along the same lines just a little further developed.  More of an earth like planet, capable of hosting multicellular life, or even becoming a second home to humanity?



Once again I am much happier with this planet, the level of detail is much better and showcases my digital painting a bit better.


Another World Forge

One of these days I will get down to doing a real tutorial again… possibly on how to use Photoshop to make planet and space art.  I am still working on resources for my resume and portfolio website, mainly the planets that will become the hover over links that will serve as main navigation icons.

The planets I made last month were… okay, but I wanted to push myself and see if I could get back into the swing of things and make planets that really make my jaw drop.  I will admit it has been a few years since I did Space-Art…

Here is the first of the newest set of planets I am working on, this one I am really happy with.

OrganicI tried to design it as a young planet, that is just beginning to develop basic organics, still mostly rocky, with the majority of its water still frozen.

More to come!



Tutorial 1, Illustrator

The idea to work on these tutorial posts came from two places really, 1) On of my friends and readers Brotherxaos, mentioned that I should put something like this together and 2)  A lot of the time I remember to start the step by step process when I am already deep into a post, or…way too late.  Let’s take this one from the top!

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.

Illustrator Tutorial 1, Ryan BerryIf 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.

Illustrator Tutorial 1, Ryan BerryAs 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.

Illustrator Tutorial 1, Ryan BerryNow 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.

Illustrator Tutorial 1, Ryan Berry

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…

Illustrator Tutorial 1, Ryan Berry

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.

Illustrator Tutorial 1, Ryan BerryIllustrator Tutorial 1, Ryan Berry

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.

Illustrator Tutorial 1, Ryan Berry

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. 

Illustrator Tutorial 1, Ryan BerryOur next trick requires that we look at the Tool Bar again, this time in a little more depth.

Illustrator Tutorial 1, Ryan Berry

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.

Illustrator Tutorial 1, Ryan Berry

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.

Illustrator Tutorial 1, Ryan Berry

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:

Illustrator Tutorial 1, Ryan Berry

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.

Illustrator Tutorial 1, Ryan Berry

Using mostly just these few tricks, I created all the lines in the first steps of:

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!


Related articles

Is it to late to talk about resolutions?

I was really good, and then really really bad at sketchaday last year.  Well I am gonna try to get back on track!  I also have two or three paintings I started last year I should finish.. I am gonna work on that too 🙂  And I am kicking around the idea of starting a web-comic.

I don’t really believe that any resolutions are ever taken seriously, every year it seems everyone vows to lose weight, run more, walk to dog more often, go skydiving, not get shot in the knee, etc.  Of course 4 weeks later, those same people are back into the normal grind, resolutions forgotten, unless of course you managed to get a new TV over the holidays (wait for it.. wait for it…get it yet?).  I am not necessarily immune from this magical forgetfulness state of the human condition.

However I am gonna try to change very small things, things I was already kinda doing, just be kinda better at it.  Form new habits, good habits, that maybe will just lead to better habits.