Working on the House, In Illustrator…

As you may have guessed I am not working on a house ūüôā ¬†Just working on a house icon in Illustrator. ¬†When I get down to icon work I do one of two things. ¬†1) ¬†A long work-up often including, prototypes, google searches, sketches, sleeping on it, and then making someone else decide, not listening to them and going with something else. ¬†Or 2) ¬†Sit down and slap something neat looking together in Illustrator…

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

House Icon, Thegrav, Ryan BerryIt’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.

Houseing Icon, Ryan Berry, TheGrav

Another tricky thing to keep in mind is perspective.  Generally speaking the laws/rules of perspective are something you can tweak, or outright ignore when looking at cartoon like images.  However tossing them out whole-sale can get you into a bit of trouble.

As you can see in this image I am starting to get my shadows placed but I am having an issue with the shadow edge in the chimney.  As I keep working it may be less noticeable or I may find away to fix it.

With lots of suggested lines, like I have here, it is all about balancing to get those shapes to truly pop.

House Icon, TheGrav, Ryan BerryI have added a second shading color, I also spent some time softening all my hard edges, by the time this is re-sized and read to be deployed really minute details like those hard edges are hard to see.  However the all around effect is that the image is just a bit softer, which is worth the extra time.

Now a light source does more than create shadows on the object, so I have some choices to make here.  I am not going to add a shadow to the ground, but I am going to add a few high-lights.

Like I do with most of my work, I am currently zooming in, zooming out, getting up from my chair, and just really looking at this object from as many angles as I can.

Here it is after a few highlights, and now it is time to sleep on it. ¬†I am honestly not sure how it will get used! ¬†Cool Icon? ¬†RSS Feed button? ¬†hmmm…

House Icon, TheGrav, Ryan Berry



Working with images

One of the things I do often as a working graphics guru, is use found/purchased images in fun and different ways to get an end product my client is happy with.  Sometimes I can afford the time to go and get my own images.  But scouting a location, collecting the shoots I need and then going through them is a process that can be long and wasteful.  Which a lot of times is not in my clients budget, or doable based on my deadline schedule.

In these cases I have to fall back on a number of tricks and skills that can save me time, but deliver an awesome end product that fits my clients needs. ¬†In this short tutorial I will go over creating “header” or “banner” style images, which can be used in many different web applications. ¬†I work mostly in Photoshop and on a PC so keep that in mind as you follow along, the tools I will outline and mention normally have¬†equivalents¬†in most other graphic programs.

The image I am starting with is a couple of sail boats at dusk. ¬†I am going to fit this image into a 940 x 198 pixel banner (compatible with WordPress headers), so I search for a big image. ¬†It is important to also find a high DPI or high pixel count image when you are planning a project like this. ¬†Make sure you save the file and don’t overwrite it, often I will save and image as “sailboats_src.jpg” ¬†or something along those lines.

Doing both of these steps will help you out in the long run. ¬†It is always easier to shrink and image than it is to blow it up. ¬†The nifty “enhance” trick made fun of in¬†Super Troopers¬†and often seen in shows like CSI is complete bullshit. ¬†Yes you can do it.. But it is massively time consuming and just a waste, plus your end product will look grainy or pixelated.

After a quick search on Google I have a 1024 x 768 image I want to use.  After dragging it into my template I end up with something like this:

Photoshop, sail boats, sunset

You will notice that it doesn’t quite fill my work-space, I have a big chunk of white to the left of the boats that is a bit out of place.

This is what I will focus on fixing to make the image which is not at the right ratio, look right.  There are a few ways to do this, painting new information in is more artistic but ultimately almost as involved as going and taking the shot it wanted in the first place.

I could drag another image in, to hide it, but that isn’t what I want, I could clone it, which works but can look to “doctored”. ¬†So what am I gonna do? ¬†Mix all three of those methods of course!

Transform, Sunset, Sail boatsFirst I will cut and paste the image in again. ¬†It some in on-top and I have gone ahead and used ctrl-t to transform the image so you can see the outside bounding box. ¬†You can see in this example how big the image is and why I couldn’t just shrink it down to get what I wanted.. the Ratio is just to far off.

This is the Layer box, or Layers Menu. ¬†As you can see the image I dropped in is currently “on top” of the other image, so it displays as if it is physically on top of the other image. ¬†A good way to look at layers is just like that, each one is a new “photo” that has been dropper onto the stack.

However “Layer 2” is not the layer I want on top, so I will simply use the drag and drop feature to place it below “Layer 1”. ¬†This way the white space on the left is covered up, just as mentioned above this is one of the ways I could have fixed the banner…

This is not enough however it is only part of what I plan to do in the long run.  Simply covering the white space still leaves something to be desired.  And this is what we end up with..

Now I need to get it the way I want it.  There are a few different methods for getting this done, but what I will do is use the Transform tool or ctrl-t to move it, resize it, twist it and even distort it until it looks good and like something I can use.

Here what I mostly did was shrink it to almost the right size and then distort it by stretching it to get the mountains and water where I wanted them.  Again I left the transform tools bounding box up so you could get an idea of how much I tweaked the image.

From here we are getting pretty damn close. ¬†In my lazier moments I will toss some text, or even just a thick black line over the image to disguise the “weld” line but that isn’t enough for this project, so I will get into using my skills as a painter and the clone tool to get rid of that line and make this header really work.

Below you can see what I have started to do, and as in most good art projects, I started by making a

Sunset, Boats, Banner

mess, that then needs to be refined and perfected into a finished piece.

From here I start to pull out all my tools, burn, dodge, smear, and even some digital painting will go into making a finished piece.  This is really where you have to decide how you want to work, with what tools and how fast.  Remember MAKE A MESS!  Then refine it, also make sure you are looking at the whole piece as much as you can.

It can be tempting to zoom in and get lost on details, but my warning is this: You will waste time, and you will lose what you are working on. ¬†The zoom feature is awesome, but your audience won’t see it zoomed in… so you can make the corner perfect! But no one can see it and it¬†doesn’t¬†match…

Sunsets, Boats, BannersAnd there you have it, I will continue to weak it a little one way or another, but I am happy enough to show my client and move on to the next part of the process.  I would stress that this is however a small element and just a draft, a final may include a different picture or even more refining.

Create Away!



WordPress Tweaks..

About a week ago I mentioned that I was taking steps to be a bit more active in the blogging world, along with doing some tweaking/optimization to  I have begun some of the planning and I turned to some old work to lead the way.

One of the first things I want to do is replace the header image with some of my own work.  I love what this theme has to offer me, but I am a creative person and a web-developer!! Time to act like one!

I do a lot of Space paintings, normally either as practice or for client projects, but I have a tendency to toss most of them out… however every once in awhile I come up with one I really like and I keep it a refer to it again and again.

Sci-Fi, Digital Painting, SpaceThis is the case with Dust Planet, a digital painting I originally did for practice, but it has inspired a huge array of other works. ¬†Now this one is old, I am guessing I did it back in 2005, right around the time I launched my original blog that used to be hosted at ¬†Back then I was working on my own “theme” from the ground up and the header I was tinkering with looked a bit like this:

Space, Sci-Fi, Digital Painting.

I like it but the title needs to change, the tag line needs to change.. the font I am not super big on, and of course the last time I looked at it was in 2005.  But it gives me a good starting place to work from as I move forward in designing how I want Worldcrafter to look.

It also shows a world!!  Something I have not done too much with here on Worldcrafter since I started.  I might need to change that!  Anyway after a bit of searching around I have decided to unpack this header, look at it again and dive right in!  Look for the change to happen soon!


A new direction…

I have been fairly active since I rebooted my blog/site… Well fairly active when it comes to the blog side of things. ¬†My site has sat for a few months, it seems that most of us web-peeps are unable to ever buckle down and work on our own sites!

I have played with the idea of migrating my posts as is, and installing wordpress on my personal site (this is how I operated for many years) or building my own blog from the ground-up.  As where both options have their pros and cons, I think that the amount of work needed to build my own blog slightly out weights the amount of SEO return on investment.

However as I am a digital artist by desire and training, and a graphic designer and web developer by need, I do should start to claim my own place in the wider blogging world. ¬†The theme I currently use, Twenty Ten, is amazing and beautiful and in many ways still meets my every need. ¬† It does use some-else’s amazing photography rather than my own art though. ¬†Something I intend to change.

As my goals for this blog are to show a glimpse into the mind of a creative person, ME!, and the tools that person uses, it seems to be only fair that I chronicle a bit about how I am going to change this blog, on this blog.  Some of the first changes that I did have been in place for at least the last few weeks.  It is subtle, but it is also a good first step.

SEO and Social Media Marketing, two of the biggest things I forget to do for myself. ¬†When it dawned on me that I wasn’t doing ANYTHING! ¬†I hit google and started to look around at what other people were doing. ¬†Viperchill had a pretty good break-down that I jumped into and used his tutorial to tweak a bit of what I was doing to get closer to the mark. ¬† One of the biggest changes I did behind the scene, was to start to add tags to all my posts, and use alt text on the images I do share.

Now at this time that is not helping as much as it could.. as long as WordPress is hosting my blog, I have limited options, but I am forming habits, which in the long run is what most of us lack.(Well the good ones anyway.)  I also used the wealth of WordPress provided widgets to make sure my blog posts were syndicated to some of my other Social Media outlets and accounts.  Wordpress has really gone above and beyond to include a bunch of incredibly useful tools that just beg to be played with.

Another useful tool has to be more active on the blogs I read… I know right? ¬†Be more active in a social setting if you want to be more social?? ¬†WHAT! ¬†Anyway I regularly follow: Geeks are Sexy,¬†Geek in Heels¬†, Laughing Squid, and Slashdot¬†. (Not to mention webcomics like: Penny-Arcade, PvP, XKCD, and a few others…) ¬†And I just added a few more to my daily list including: Has Boobs, Reads Comics. ¬†Commenting on articles I find interesting or that I have relevant input on shows those I read that I care ūüôā , and hopefully they will come read me too!

Entire new sections have been added to my blog, the most noticeable one should be Sketch A Day, where I attempt to share a sketch I have done each day.  This gets even more complicated because I try to present the sketch I did the day before each time!  The other sections are Games/Technology, where I will share reviews and opinions on each, and Inspiration, where I hope to share inspiring bits I find on the net.

All of this is under the hood sort of work, stuff you may not notice unless I point it out. ¬†So now comes time for the fun pieces! ¬†Some of you probably noticed that I renamed the blog The Darker Side of Art, and I plan to being to re-skin it to reflect that new name. ¬† For now though I leave you’ll at a cliffhanger!

More to come!