LustRazor

A Look Back

Well, its the end of another year that went by too fast. It seems during the last few months of every year, I get this strong urge to update my web site in some way or another. Maybe it's the cold weather that drives me to spend evenings indoors, or perhaps the new year marks a deadline to clear my to-do list. Either way, this effects me annually.

It's also kind of fun to look back on all the changes over the years. Way back in 1997, I barely had a grasp on basic HTML. Most of my efforts were going into graphics and animation at that time. Making web pages was pretty new to me, and the tools were not great. You had the choice between making simple pages using Netscape Navigator, or using a text editor. When Dreamweaver came along, it was a big deal. Designers could finally create sites visually.

Here is a look at past design updates. It went from the most simple structure to graphic layout with Flash basic PHP.

The first two tries were more about putting pictures online than developing web skills. The real interface design came at the end of '99. It had a crude PHP backend, and graphics to match an icon set that won me a prize that year. A section of Flash displayed my drawings in an animated slideshow. This interface endured until 2004 when it was replaced with a sleeker design with a more dynamic structure.

In November of '09 I spent all my free time developing a new back-end content management system in PHP. This automated things a lot more, allowing me to focus more on art. Of course, I had to have a completely new look to go along with my fancy new CMS, so a lot of time in December that year was spent redesigning the front-end as well. Large, chunky graphics were all the rage back then. More people had large computer screens, so designers started going wild with impressive designs. Grunge was also still going strong, so I used that to my advantage.

Everything has gone mobile now, and those huge images that were so popular back in 2009 are way too slow. Mobile devices also demand a much more flexible design overall. It's now coming up on 2012, a significant landmark in time. This time around I am doing something completely different. Yes, there were major improvements made to the CMS code, but the big change really is the white design. For over a decade, LustRazor.com has been a dark place for my dark art. The graphics of the site competed too much with the content during that last revision. Now I am going for the un-design; white with plenty of negative space. My hope is that blank pages will allow the page content to shine.

To Wordpress or not to Wordpress? When it comes to this site, I've always tried to make it efficient; using as few files as possible, highly optimized images, neatly organized directory structure, and not using any unnecessary code. It has been a good way for me to keep up my web design and coding skills. Wordpress has really taken over the web world lately. I considered using that as back end instead of my own custom CMS. It certainly would have taken less time. I never used big frameworks like that because of the overhead. This site only requires a small amount of code, a tiny fraction of what Wordpress is comprised of. I decided against it, but I do utilize some frameworks here; namely jquery. I have no desire to improve my knowledge of Javascript. I suppose some day when I have no desire to learn anything new about HTML, PHP, etc. then I will start using Wordpress.

Oh, and by the way, I haven't touched Dreamweaver in years. Ironically, my tool of choice is now a text editor!

Summer Time

This summer has been so busy. Between work and home life, there hasn't been much time to sit and contemplate the day. Blog posts are seriously lacking, this is really the lowest thing on the list of priorities. So here is just a quickie update.

Over the past couple months I was able to finish two paintings and turn a couple rough sketches into finished digital illustrations. Above are some small thumbnails of the illustrations. Earlier this year I sketched-out some ideas for visionary art. It has been fun to play around with more colorful themes, and it's a departure from the darker stuff I usually make.

These two pieces combine the graphics skills I've been honing over the years with some good old photoshoping for the finishing touches. Both of these were built with vector objects in Fireworks. A ton of layers, gradients, and blending effects went into each of these before the rasterized image made it into PS. The nice thing about working in vectors is I can work in low resolution to start off, which is suitable for screen viewing. This way I can really create the complexity needed without slowing down my computer. It's so easy to make changes at this point because everything is made of editable vector objects. After the image comes together, I crank up the file size. All the objects and effects scale up to high resolution needed for print. Sometimes this is too much for the software and it just crashes. The limit is around 5K to 7K pixels. Once it's in PS, the resolution can be bumped up a little bit without hurting image quality.

There isn't time for a full update at the moment. The paintings were sent off to my mom and sister back in Ohio. Speaking of Ohio, it's been nearly three years since the last visit to my homeland, but I will be back there next weekend for my cousin's weddin'.

Slow Finder Previews

This problem has been plaguing me for months. Right after using OSX Finder's quickview (activated using spacebar) the whole Finder would freeze for a couple seconds.

Being too busy to search out a solution, I figured the normal tricks would work. I hadn't rebooted my computer in a month, so maybe that would do the trick? Nope. Installing all the latest OS updates? No change. Repairing disk permissions? Nadda. Deleting all the .DS_Store files? Sorry, try again.

To my mind, it was very possible that Apple slipped some code into the recent updates, which made Mac OS run slower on older computers (this is a first-gen Xeon 4-core). I considered installing TinkerTool or even Path Finder to replace the Finder all together. Remembering back to past attempts at Finder replacement made me remember that simpler is better. The OSX Finder is really a masterful filesystem tool, if it weren't for this lag I'm experiencing.

So, on my one last-ditch attempt to resolve this issue, I removed the preference file and restarted the Finder. Bam! Snow Leopard is back to being perfect again. Something in there must have gotten corrupted. You will loose all your window placement and settings, but it's totally worth it.

You can simply run this command from the Terminal:

The prefs file will move to your home directory. After you restart the Finder, it will create a new prefs file.

Blogger me

Over the past couple months, office work and household chores kind of took over my life once again. Not that it's a bad thing. I got a lot done; things that needed to get done. However I lost the balance that was going so well earlier in the year. About ten art pieces are still on the drawing board.

It starts innocently. Things come up that take priority and I'll say, "Just get this done, then you can have free time." Then a week goes by, more things pop up, and before you know it here we are. This is just my normal pattern.

Things haven't dropped off completely, though. I have been cutting up pages of my old sketchbook within small snippets of free time. Earlier this year I scanned in several sketchbooks from the past decade. The plan was to separate the sketches and assemble them into larger mosaic images. In that sense, some progress has been made. So far I've compiled 1500 individual sketches, and there are still many pages left to sort through. The end goal is not to let these poor little sketches go to waste, or be forgotten. It's like the island of unfinished drawings. They might not get finished individually, but as a group they will create a mosaic.

The mosaic project will take many months to complete, I'm sure. This involves so much tedious work that it's really impossible to complete all at once. Physical fatigue won't permit it, but it's a good task to work on when I'm not feeling very imaginative. It only requires small, consistent efforts.

In the interest of keeping this blog updated, here is a small sampling.

My plan is to take a jumble of sketches which would usually not see the light of day, and use them to form larger images. Using the power of pareidolia and computers, this can turn out to be really interesting. It's just tricky to maintain interest in a personal project that drags on this long. Amidst an already busy schedule, it becomes a real challenge.

Logos Exploded

In the mid 90's I was really into comic book art and wanted to emulate that style. The toughest part was coloring. I knew my way around Photoshop but couldn't figure out how to make my art end up like the comics. After a lot of trial and error I had a process that worked reasonably well, but it still lacked that special something.

Finally I came across a web page that provided the key ingredient. (the site is long gone) Some smart guy posted a very basic tutorial that gave me the secret ingredient. He selected areas where the highlights should be, and drew a gradient across it. This creates a light source that is hard-edged on one side, while blending smoothly across the other side as the gradient fades into transparency. This creates a falloff of the light's intensity, the same way real light does on 3D objects. In a single move, it creates a fairly convincing sense of depth. Up until then I was just using different sizes of airbrush. This new way of coloring was fast and could be accomplished using only a mouse.

Keep in mind, this was before google existed. Finding an obscure nugget like this was rare at the time. This simple key unlocked the secret of comic book coloring style. It was useful to me for years to come, while I expanded on it. I ended up combining it with techniques used in vector art. Whenever making logos or web graphics, the same process is used but vectors allow greater control and flexibility. This is old news to developed designers, but hopefully someone who is looking for this type of info will stumble upon my page and find it useful.

Since then I've made lots of different forms of art using the same basic steps. It's hard for a beginner to reverse-engineer a process when looking at a finished piece, so I will deconstruct one of my logo designs to show how it's built. Personally, I love this kind of stuff; I always find something valueble from watching other people work. There are so many little tricks that we wouldn't otherwise learn. This is only the technical part of logo creation, not including thumbnailing out your ideas out on paper. I use Fireworks for all icons, logos, and graphics. It is is the only software I've found that combines vector drawing with pixel effects, in an easy to use interface. I've been using it since version 1. It's not good for photo manipulation or digital painting, but it's perfect for graphics like this.

Take a look at the image above. The final composition is on the right and on the left, each vector shape is highlighted. When you look at it you would never guess this is vector art. It looks like a finely airbrushed digital painting, but it's not. So why is it good to use vectors for this sort of graphic? Well, you may create this for a web site but the client might then ask for a wall sign or poster to be made. If you made the original art in Photoshop, then you would have to make it all over again at a much larger size. Printing requires much higher resolution than a web page. Scaling it up is not an option because it only creates a blurry mess. This art can be scaled up to any size and it will always look great, thanks to good old vectors. :)

The next image shows the base object with some of the highlights selected. On the right, each highlight is a hand-drawn vector shape with a feathering applied to the edges. The feathering blends in the edges so it doesn't look like a vector object, but it is always editable. At any time I can adjust the shape, gradient color/opacity/direction, feathering pixel value, blending mode, and overall opacity. Fireworks gives you a lot of control over each component.

On the left is an exploded view showing a few of the highlights as isolated objects. From here you can see they are simply curves layered on top of the base shape. The blend mode for these is set to overlay, which intensifies the colors. The gradient transitions the colors from white to orange while fading to transparent at the same time.

I like to use use radial gradients for this type of thing. It allows me to quickly place the hot spot in a different place on each highlight, in relation to the light source. Some areas are farther away from the light, so moving the whole gradient away from the center of the vector lessens the intensity without the need to adjust the overall opacity. Does that make sense? Building up your objects this way gives you granular control. As a demonstration, the full radius of one of these gradients (above) is outlined in blue; that portion is normally clipped by the boundary of your vector object.

The next item in our bag of tricks is texture. In this image, I broke down the peach into it's most basic shapes so you can see the build-up. Your base shapes are pretty simple, just the fruit, stem, and leaf in solid color. This is what vectors look like when there are no effects at all. From here, gradients are applied to determine the basic light direction. Consider how light is effected by a semi-translucent object such as a piece of fruit. Light rays will reflect off of the skin of an apple, but they pass through to the internals of a peach. The light penetrates to a certain depth and exits, but not before bouncing off of the cellular matter within. The light exits at all different angles (diffusion) and at a different color temperature. In the CG world we call it subsurface scattering. This causes a slight amount of internal illumination, resulting in a more saturated glow to the . That's why the main gradient of my peach gets lighter near the bottom. Light passes through the top and bounces off the inside of the bottom surface. It's not entirely accurate to real-world lighting, but fudging it gives us a more depth and vibrance. Like Walt Disney always said, "Exaggerate more!"

Next we will add texture to the surface. Fireworks lets you add variable amounts of bitmap texturing to any shape, and the falloff is controlled by the gradient opacity. The textures of the dark areas use multiply blend mode so only the darker colors effect the base color. The highlights use screen blend mode, so only the brightest parts of the texture show up. Offsetting the dark and light textures can give you some great CG-type effects. The lower dimple of the peach is a couple simple shapes with a high amount of edge feathering, for a soft contoured edge.

What we're doing here is playing with the diffuse light, shadow, and specular highlights in a 2D program to create a 3D effect. Why not use 3D software? --because this is faster, less involved, and most importantly: vectors are scaleable. A rendered CG image would still be made of pixels. You would have to re-render any time you made a change or needed different a resolution image. A lot of people would try to create these effects using Photoshop filters, but the results become perminently baked into the pixels of your bitmap image. Remember, all our vector shapes are fully editable at any time. If I come back in a week and decide the peach needs to be more oblong, I can just pull a few points on the path and it's done. Photoshop filters can't offer anything near this level of control.

I hope you learned something useful by reading this. Have fun and experiment as much as possible!