Gargantuan Media

Make A Star Wars Hologram Effect

noreply@blogger.com (Unknown) — Tue, 08 Nov 2022 05:00:00 +0000

This demo takes imagery to a new level with good planning and a few Photoshop effects.

There's a wide array of effects in Photoshop. When used in specific combinations they allow Designers and Post-production Artists to achieve extraordinary results.

This demo will go through the steps to allow you to create the Star Wars "hologram" effect with any image. In this example, we will be using a logo for a job that I've recently finished.

I. Breaking Out The Logo
To get the maximum value out of this effect we need to separate out the individual parts of the image. That means the text, the art and even a background for the image need to be put on separate layers.

Figure A.The image is dissected in the Layers Panel. This is how the artwork needs to separated.

On this job, I interpreted each portion of the font as Adobe Devanagari but you can use Adobe Caslon or any bold, serif font such as Georgia. Here's how to do this step-by-step

1. Create a new 300dpi document at 766 pixels wide x 766 pixels tall (a 2.553 inch square).

2. Open up your logo artwork and drop it into this new document.

3. Do you have an EPS or a PSD with art already separated? Good! Go to 4c and then skip to 4k for rest of these steps. If you do not have a separated image please continue to Step 4.

4. Assuming you are working with a flat file:
   a. Identify and replace text.
   b. Create a white box vector box w/a dark gray Stroke of 5px at #939798.
   c. Set this box to "Multiply" in the Layer Panel and call it "inside stroke".
   d. Create a gray vector box under the word "LOGIC" and name it "gray".
   e. Create a new path in the Path Panel. Trace the green shape with the Pen Tool         until you have a copy of this shape.
   f. Select the Path then the "Load Path" icon. Make a new layer called "green". Fill         this layer with the same green from the image then turn off it's visibility.
   g. Align all of these new elements with the ones in the flat image.
   h. Using the Marquee tool select the large white area around the artwork and         then fill it with pure white with the paint bucket.

Figure B. For part "h", turn off any background so that you can accurately create a white bitmap box around this graphic. Do not use a vector box.

For this step, the art here cannot be a vector. Later, you will see the reason.

   i. Name this layer "fill".
   j. The "white background" layer you see in Figures A and B was the basic        "Background" layer. Paint this layer entirely white and then name it "white         background".
   k. Make a new group for everything by Shift selecting all the new elements but         "white background" and pressing Control+G or clicking the folder icon in the         Layers Panel and dragging each one into it. Name this folder "logo no fx".
   l. We need to mask out everything within the hologram/group. Select the "fill"         layer with a Control (Apple) click on the "fill" thumbnail in the Layers         Panel.
   m. With this layer in active selection look for the Mask Panel. If you don't see it         try Window > Masks. Look for two small icons in the upper right hand part of         the Panel. These are the new mask options. Choose the one on the left to "Add         New Pixel Mask".
   n. In the Layers Panel, click on the mask and drag it from "fill" to the folder for         the entire artwork. This changes the mask to encapsulate everything in this         folder.
   o. Ensure your layers are named and stacked in the order shown in Figure A.

Now, you should have everything broke out.

With each of the elements separated we can begin to control the amount of opacity of each element. This means we can create a sense of depth in a flat image. That which is brightest will appear closest to view. Also, we can use stacking order to arrange effects to appear more prominent on certain layers.

This is the concept: We "push" or "pull" elements into or out of a background of static, scan lines and darkness. We are essentially replicating a technological function. That is very important to remember.

Use A Hierarchy, Luke!
Pushing and pulling elements is what good designers do. To break up the monotony in a design, you can create hierarchy not only by size and position but through manipulating the opacity and levels of interference over elements.

II. Roughing In The Effect
The better part of this effect comes from layers of interference. These layers are essential. Here we need two types of interference layers: scan lines, which cover the entire image in differing degrees, and good old-fashioned static.

Right! Let's get into some advanced type of stuff now.

1. Duplicate your entire group.
a. Right click the group and select "Duplicate Group" or find the option in the options pane.

2. Name this new group "logo fx". Place it under the first group and "white background" layer.

3. Turn off the visibility for the "logo no fx" group.

4. Create a layer on the very bottom of all of the groups called "black background" and fill it with black.

Now, we have two groups. Group "logo fx" is the one we will develop and "logo no fx" is essentially just a back-up file with unaltered elements - just in case stuff suddenly goes batstuff on us.

Make a layer called "black background" and fill it with black. We need this layer to amplify the glowing hologram effect. Set it on the very bottom of the layer stacking order.

Time to make the first of our layer of interference.

To make scan lines we need to use this file. Download it and open it up in Photoshop.

With the scanlines08.jpg file open select Edit > Define pattern. This brings up a dialog box for you to name this new pattern. Call this one Scan Lines and click OK. Now, we have added a new pattern we can use anywhere in Photoshop. Hold tight with this new style for a second.

We also need to implement this whole image in a broader way beside just one new pattern. Duplicate the image by using the Layers option and select your hologram logo file as the destination for the new layer. Here are the next steps.

1. Name the layer that you have duplicated "scan lines all" set it to a 50% Multiply layer. Place it underneath the text and over the rest of the artwork (over "green").

2. Erase, in a general way, around the edges of the scan lines. Change it from a proper box to more of an irregular blob. We do not want sharp edges bordering this hologram.

3. Duplicate "scan lines all" within this document and call it "scan lines edges".

4. Hide "scan lines all".

5. Set the eraser to the Airbrush option with between 60-90% opacity. Erase from the center of "scan line edges". Look at Figure C. to see what area you need to focus removing from this layer.

6. Turn back on "scan lines all".

Figure C. Make scan lines over the artwork by erasing some portions of each Multiply layer. Erase from the middle for the layer "scan lines edges".

Since these lines are on Multiply layers, Photoshop uses just the dark lines from "scanlines08.jpg" to change anything underneath this layer to a darker tone. Notice how we've shaped the brightness in the center of the image where the text is located?

Next, we need to use our newly made Scan Lines pattern to enhance our text.

Figure D.. In the Layer Style options, we need to select Pattern Overlay then the new Scan Lines pattern.

To apply the Scan Lines pattern and effect to the text:

1. Double-click the MD font layer or right-click and select Blending Options.

2. Click Pattern Overlay. Look for the pattern selection. The last one should be Scan Lines.

3. Select Scan Lines thumbnail from this dialog box.

4. Set the scale to 184% and transparency to 14%.

5. Add a dark blue Stroke of #332f5f at 1px. Set the options to Outside, 8% opacity.

6. Click Outer Glow. This is what will make the text seem more ghostly.

Figure E. In the Layer Style options, we need to select Outer Glow then make some adjustments.

7. By default, the glow is light yellow. Change this to pure white.

8. Change the opacity to 34% with 0 Noise.

9. Under Elements make sure your setting is "Softer" with a Spread of 13(px) and a Size of 29(px).

10. Under Quality leave them at default which should be a sharp ramp, Range of 50 and a Jitter of 0.

Figure F. At this stage, this is how your image should be looking.

At this point, you should be seeing the image above. To re-use this style on the remaining text, right-click on the MD font layer. In these options select "Copy Style". Next, right-click the "LOGIC" font layer. Under these contextual options select "Paste Style". You will want to adjust the scale of the Scan Lines and the glow to compensate for the smaller text size.

Are you worried about the time spent on this effect, yet? Hah! Well, we are over halfway done. Plus, once you have it done once you can endless copy it to other files. So, don't worry so much. The next part is really short.

III. Static
Next, we need to make some static. To make this type of interference we don't need any more imagery. Can just use Filters.

1. Select your foreground color, in the Tools or Color Panel, to a dark gray of #434343.

2. Change your background color to pure white at #FFFFFF.

3. Select the mask for "logo no fx folder" by Ctrl+Shift clicking on the icon in the Layers Panel.

4. Make new layer called "static".

5. Dump dark gray into this layer. This fill everything in that area.

6. Select Filters > Render > Fibers.

7. Move this layer behind the fonts and scan lines layers and change it to 50% opacity.

Eureka! We have static - but it needs some adjusting.

The Fibers Filter makes vertical fibers by default. Rotate your "static" layer to a horizontal position across the canvas. Slightly scale the static to cover the entire artwork. Just like the scan lines, we need to erase the sharp edges off of this layer. Erase the edges into a blobby shape.

Figure G. The static layer of interference needs to have soft, faded out edges.

After your own image matches Figure G., we need to go ahead and set it to Screen and forget about it for now.

Next, use the eraser to fade out the edges of the "fill" layer. Since it's not a vector we can erase it easily.

As you erase, think in terms of where the image would be most bright and most concentrated in this hologram. After you've got the edges out turn the opacity down to 50%.

Figure H. Now, we are getting it all together in a serious way.

Figure H. is where we are at now. The effects are all in there. As black and white elements, we can see how well they work together without worrying over color. This is a great way to do business because it simplifies the process.

I told you this part was short didn't I?

Flip The Script!
For night-vision effects using these same techniques: instead of using blue, you can use green and dial down the opacity of the scanlines. Check it out when you're finished with the hologram.

IV. Color Casting

Figure I. This image is for educational purposes only used as reference for a digital art technique. Star Wars is a registered trademark of Disney.

What you believe to be the most simple part of this tutorial is actually fairly difficult. The color of the imagery will greatly impact the final result.

Let's review the final technique as seen in Obi-1's communication in Episode II from Kamino.

The color of Ewan McGregor and his wardrobe has not be replaced by black-and-white - as in our own image. There is a dullness to the color as if the transmitter was having a hard time sending color information across space. There are some "hot spots" where the brightest light converges. Last, there is a glow around the hologram.

We need to match this in own image. Turn on the "green" shape layer. This green began life as #21b67f but needs to take on a blue "color cast". We need to change this layer around and add some details.

1. Turn back on the visibility for "green". Control click the layer thumbnail to select all of the visible area.

2. Make a new layer called "blue". Turn off "green".

3. On the "blue" layer add a medium blue of #7b9aaf in the selected area.

4. Copy the style from the MD font and paste them onto "blue".

5. Change the Stroke settings in the Layer Options to a 6px, light blue of #75cac1 line. Make the options "Inside" with an opacity of 70%.

6. Change the options for Pattern Overlay to 22% in opacity and 79% in Scale.

7. Change the opacity for the "blue" layer to 87%.

8. Copy and paste these settings to the "gray" layer under the font layer "LOGIC".

Now, we have a dull blue shape with a mostly transparent green-blue line around it and our gray vector box textured as well.

Next, we need to tone everything with the same medium blue color as we see in the reference shot.

1. Make a new Multiply layer called "blue cast". Put this on the top most layer in the "logo fx" group.

2. Control click to select the square "fill" layer area in the "logo no fx" group.

3. Select the "blue cast" layer and fill it with #509ad0.

4. Use your eraser to remove the sharp edges and then fade the blobby shape around it's perimeter.

5. Set the visibility of this layer to 58%.

Now we've taken the first major steps into finalizing this effect. Let's move onto making some new layers to add color and a glow effect.

V. Color Refinement

Figure J. Color applied to the "green" layer and name changed to "blue". A new layer tones everything underneath of it to blue.

The rough effect is looking good. It's time to look back to part IV and our list of notes for Obi-1's Kamino message. We need white "hotspots" and we'll also add some glow with a little variation for realism's sake.

Hotspots? It is best to use custom painterly brushes to make these refinements. There are two places that I strongly recommend that you find them at. One, is at Vincent Montreuil's dA site. The second is from big boss Kyle Webster who sells huge sets for extremely reasonable prices.

1. Make a new layer named "texture for gray" over "gray" and set it at 50% opacity.

2. Using a grainy, spotty, textured brush, at about 30% opacity, select a very light blue.

3. Work out from the center of the word "LOGIC" reinforcing the brightness there.

4. Remember that you can use the eraser with a custom brush to re-work any overly bright areas.

5. Create a new layer named "texture for blue" over "blue" at 50% and repeat the same process.

Next, we want to add a few final highlights in the glow that will appear to be radiating from the "blue" layer inside of the artwork.

1. Make a layer called "blue color b" and place it below most of the art. Put it under the "gray" shape layer.

2. Airbrush in a bright, light blue color of #a2e9ec into the center of the artwork.

3. Make this a 50% Screen layer.

4. Under "blue color b" make another layer called "blue color c".

5. Use the Airbrush to make a shape around the "blue layer" to accentuate the edges of this shape. This color painted on this layer should fit in between spaces of the previous "blue color b" layer and the "blue" shape layer.

That's it for almost everything. We want to add another glow layer made out of blue and green to cascade around the image. Airbrush this in and set it outside and just below of the "logo fx" group.

Figure K. The final art with all steps applied. Note the stacking order.

That's everything for this one. The static layer can easily get toned down in your own work if you'd like to more closely match the even and non-distressed Star Wars hologram transmission style.

For those who want to more closely examine this file, or to proceed more quickly through this tutorial, I'm including the PSD file below. Please let me know by email if you have any questions, comments or find something missing (besides the $99 font Adobe Devanagari) from this demo.

This file requires PS CS4 or greater.

Download the Hologram Resource File

CSS Tricks: Automate Complex Tasks Like A Ninja

noreply@blogger.com (Unknown) — Tue, 04 Oct 2022 13:00:00 +0000

Learn how to make global level graphic edits without uploading a single JPG.

I. Create Code Based Global Drop Shadows
Coming from a Print Design background, there were several tricks that I learned to make graphics pop. Without these techniques the product pages that I worked on would have been dull, flat and frankly, overwhelming.

Like the stock prices listed in the daily newspaper these ads could have been pure info and rendered in a dull way. With a few tricks, information flows in rows and columns guiding the reader through the spots almost effortlessly. Before they know it they've caught the logo, tagline and product in a few seconds.

Why not use these common techniques from newspaper ads and circulars on web-based work in a broad, code-based way?

The most basic lay-out trick are drop shadows. Catalogs and national auto ads in particular use a lot of drop shadows on their products. It's pretty common for product images online to have these same drop shadows but: can they do it in a timely way when there are thousands of items?

One choice is to add shadows in Photoshop. One by one. This would require a great deal of time, setting up shadows on each layer and then uploading each processed image. There is no ninja-ing here. This task is dry and dull. It is work that no one will ever enjoy doing.

Instead of image processing in this way, we could define some CSS code to apply a shadow to a series of images that we can change globally. This way we can refer to it automatically by using the class tag. Any changes to this class code would effect every shadow that it was applied to w/out uploading a single image.

Figure A. One image displayed with two methods. The first is a flat JPG. The second is a PNG on a transparent background with a CSS3 based drop shadow.

Above, in Figure A, are two images. The first is a JPG on a white background. The second is a PNG with a transparent background. To add a shadow on the JPG we have to adjust several settings in Photoshop to get a drop shadow, save it and upload it. To add a drop shadow under the PNG all we need to do is create a couple <div> elements with settings that will emulate a drop shadow.

Let's start with adding a CSS3 drop shadow to one image and then move into a global solution based on those results.

First, we need to drop a PNG image into a <div>. Next, we set it's stacking order be on the top with a property called "z-index". The lower the z-index number, the lower it's stacking order. This image's stack position will be 2.

Figure B. The start of the code. The image is in a 200px wide <div>.

Now that our image is in a <div> (Figure B) we need to get it in place. We will add the "float" property in combination with the "position" property. This allows us the ability to move the image <div> where we need it. Float will be set to "left" (float:left;) and position will be set to "relative" (position:relative;) meaning that the <div> will position itself with regard to surrounding divs.

With the image <div> floated, it can be moved around by using top/left/right/bottom properties instead of margin or padding. In this case, we need to state "right:-200px;" to get it into place in the frame. Check that these properties are set by referring to Figure D. below.

Next, add a 200px wide 40px tall <div> directly below it with black as it's background-color. Then, we turn it into a simple shape with CSS3 by adding the following code:

Figure C. This code defines a shape inside of the shadow object. No image is needed.

This creates a black cylinder within the shadow <div>. For cross-browser fucntionality we use -moz for a Firefox specific property, -webkit for Safari and border-radius for Explorer.

The float and position properties for this one are important here. Set the position to "absolute". This setting means that the shadow placement is fixed in place. We will need to adjust it using margin-top and margin-left.

Figure D. Two divs lined up with the shadow underneath of the image.

This cylinder shape is "floating" directly underneath the image. Lastly, this shadow <div> has a z-index of 1. This setting will place the shadow object below the image that it appears to be falling from.

Figure E. The two divs from Figure D are implemented on this page.

II. Refining The Shadow
Now we have an initial drop shadow in place. This black shape represents the total area where the shadow will fall. Time to refine this rough shape with a few tricks.

In Photoshop and Illustrator, we have access to gradients. CSS3 can emulate these gradients with both linear and radial options. Add the following code to the shadow <div> to create a gradient:

Figure F. This CSS changes the flat black oval into a gradient that spreads from the center.

This code, written for cross-browser functionality, will create a radial gradient.

The gradient starts in the center of the shadow <div> and moves from dark gray at 50% opacity (rgba(90,90,90,.5) to a light gray at 20% opacity (rgba(190,190,190,.2) and end at white at 10% opacity (rgba(255,255,255,.1).

Some Background:
This gradient works for images on a white background, like our example, but the white value (rgba(255,255,255,.1)) would have to be adjusted for this trick to work on images appearing on a different background color.

At this point, we have the the image and shadow in place. Now, these elements should be encased in a third outer "container" <div> to allow for centering of the product photo. After aligning them inside this "container" the entire three-part element should look like this:

Figure G. Everything as it should look at this point. The image and gradient drop shadow are lined up.

And this is the code for the image above:

Figure H. The code for the HTML divs. One more step and we are automated.

That's all the heavy stuff. Now we move onto stream-lining the HTML and CSS. But before we do that we can also...

Flip The Script!
To use this method with JPG images on white backgrounds, you can reverse the stacking order. This will place the shadow layer on top of the JPG. However, with JPG images on a white background there are potential cross-browser/device alignment issues. Try this method after you've successfully completed this tutorial with this PNG.

OK, now that the script got momentarily flipped we can continue.

As mentioned in the beginning of this tutorial, we need to prep this code to be used on a wide array of images.

The image and shadow portions of the code need to be separated and packed into a CSS document with a class for each. In this way, the code can be referred to repeatedly on each object that needs this type of drop shadow.

Figure I. The HTML and CSS for the divs are separated. A new class now controls the drop shadow.

Now the solution for one product can be a solution for a group products, helmets in this example. Every <div> that uses the shadow class is edited along with this one piece of CSS. So, when you have it right in one place you have it right in dozens of places as well. The best part is that you never had to edit or upload a single image.

Note that in the CSS for this final example, all of the characteristics for the shadow <div> are defined. In the HTML tab less than 25 characters are used for the shadow. The image element is 25 characters plus the image URL and alt tag. This is handy for SEO guidelines when you have multiple images that need shadows on a page.

Try it out. See what you can come up with. Next time, controlling drop shadows on a <div> in a very different way using the mysterious shadow-box functions.

Graphic Design: Print vs Web

noreply@blogger.com (Unknown) — Mon, 19 Sep 2022 19:13:00 +0000

Print is not dead or dying. It's not even taking a breather.

I. Print Now or Web Ready?
This week, three jobs rushed out the doors from here at the design desk. Two jobs were web sites and the third was a print job - a pretty good ratio. While I was working on these different jobs, I started thinking about the multiple areas of overlap between print and web based techniques.

At it's heart, Graphic Design for print and web are practically twin brothers. They both look identical on the surface but below that surface layer they are very different people. Very different people who happen to being doing the exact same job: Communication.

Print work, Twin #1, is demanding. It's unforgiving with very little margin for error. Once a typo or a bad image goes to press - it's frickin' permanent. And you, as a designer or a project manager will hear about it. Yet, even in circular ads and for direct mail, print is by far taken much more seriously than any well-designed email ever will be.

Holiday promotional direct mail designed for a tree farm and wreath retailer in Wisconsin.

Print design produces a solid, authentic and tangible product. Anyone can understand it. No electricity, browser related errors or internet connection are needed to read it. Catalogs can be much more accessible than search boxes. Art prints beat electronic wallpapers hands down. There's an inherent value to print despite all the premature reports of it's death.

However, the one thing that a static catalog or newspaper cannot do is change.

Web Design, Twin #2, is much more forgiving but several orders more complicated. Why should that be? Aren't each simply communicating a message? Here is where Twin #2's many complications begin...

Once, there was just Microsoft's Internet Explorer, which dominated the internet browser market, and Netscape. Designers in the 1990's had free range to throw scaled-down print graphics online. They were free to do so in anyway they wanted to just so long as these graphics could fit into HTML tables on 600px x 400px windows.

The results, then, were nearly identical. The code for Explorer and Netscape, at that time, was not so radically different.

An HTML5 CSS3 W3C Complaint Cross-browser compatible website. Say that three times fast.

Today, there are dozens of smaller browsers and four mainstream internet browsers - Chrome, Firefox, Safari, Explorer. Add to that two varieties of mobile browsers (phone/tablet) with Mac and PC variants.

In 2014, Explorer users make up between as low as 10%-25% of the market. All of the HTML protocol that was originally written for Explorer in the 90's now only applies in the loosest possible way to a much larger digital landscape.

"Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program."

The most popular browsers today (the oldest of which is Safari written in 2003) use software that operates very differently than the original programmers could have imagined. These browsers display text and graphics in much more stream-lined, effective and efficient way than Explorer does now or did in the 90's.

Designers today live and work in the era of The Browser Wars. Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program.

Internet browser popularity 2009-2014 as tracked by Stat Counter and Wikipedia.

II. HTML Finally Evolves
The good news is that: through robust competition in the browser market, the HTML language has been forced to re-invent several critical aspects of it's own structure with HTML5.

This re-invention of HTML allows for many things including stream-lining audio and video. For example. the <video> allows for a broader usage of Youtube, Vimeo and video applications which were not even considered in the early days of a dial-up Internet.

In those days, downloading a 2Mb extension to view a website would stop a viewer dead in his or her Pennyloafers. Today, with widespread high-speed internet and client-side scripting, it's barely noticeable. HTML5 makes this aspect much more accessible to designers.

Next, and most importantly, in re-considering the current HTML and writing HTML5 the first building blocks of all HTML sites were examined; namely - tables.

This brings us to an unavoidable situation and the bad news: Chrome, Firefox, Safari and Explorer each interpret structure (like tables) differently. That includes table alignment methods, table borders/padding and even how standard image formats are seen inside of tables. This produced an amazing array of possible errors with tables depending on which browser is used.

Since designing tables for just one browser or for just mobile devices is not a viable methodology - finding a better solution became critical. Enter the seldom used <div> tag from HTML4 which is now critical to the under-lying structure of HTML5 sites.

With neatly stacked <div> containers, questionable tables are no longer essential. Dividers (divs) allow a more cross-browser friendly web design to be developed. No special lines of code have to be added to collapse tables and borders or to center text and graphics in the HTML. This method removes unnecessary redundancy and the high probability of misaligned graphics and text within tables.

Add to this, new print design influenced tags like <section>, <article> and <aside> and HTML begins to look much more universal across browsers.

Using modern specs, a site looks the same in Chrome, Firefox, Safari or Explorer.

There are complexities that have to addressed in both print and web based Graphic Design for designers. To say one method is more or less complicated is not a productive line of thought. What is productive to recognize is: access to audiences and target markets is easier today than it has ever been.

The methods to reach them are only a matter of style. Consistency in message, print or web, is all that is important in this context.

Next time, I would like to talk about practical usage of CSS3 for image editing. I'll show you guys some style sheet code examples that mimic Photoshop tricks for shading, shadows and highlights.

Logo Design

noreply@blogger.com (Unknown) — Thu, 21 Jul 2022 19:03:00 +0000

Logo design can be a tough task! A company's identity, communicated by specific fonts and artwork, is the most critical part of their business presence in the public eye. Here are a few logos that I've worked on recently.

The first logo here was made for a biotechnology investment firm. After browsing for competition logos I found two types of biotech logos: DNA strands and leaves sprouting from the center of a sphere. I didn't want to use either one! Plus, I couldn't really. This company specializes in investment across the board for farming and medicine not just one or the other.

For this, I went in a molecular art direction. Molecules are what chemicals and DNA are at each of their own most basic levels. This seems to work both intellectually and graphically.

This logo, above, is fascinating to me. The direction was to use a local artifact, The Uffington Horse in central England, for a modern and up-market company specializing in modern custom home renovations.

Easy, right? No. But the client, very much to their credit, had a clear and simple goal in mind. The hard part was in combining the ancient with the modern.

Because of this, I didn't want to use too basic of a graphic style. So - out with the flat and starched shirt stuff right away! With a bit more toning than usual I produced two variations of this style of logo.

Great thing about the way the Internet has shaped business is that I can send work internationally very easily. The Pega Hoy logo was made for a company in Chile!

Gene Therapy Cures is a very exciting and relatively new part of medical science. The goal for this logo was to be as professional and succinct as possible.

There is a deep appreciation of graphics made for racing, hot-rods and stockcars in my work that I have had since forever. I see great logos for racing groups from all levels - from Letterman-Andretti to gutsy small companies operating out of garages with one trailer. Above is a logo I made in four variants that was sent out to a motocross company.

Direct Mail

noreply@blogger.com (Unknown) — Tue, 20 May 2014 17:36:00 +0000

Direct mail! Millions of us get it but how much of it is really worth looking at? These designs are meant to be eye-catching and informative. These designs are the ones that get read in that pile of colorful mail we pull out of the mailbox each week.

Being attention grabbing and informative is exactly how to get these direct mail campaigns out there in the public eye and in front of interested parties.

Would you like to maximize the value of these designs? We also digitally convert these mass mailings into emails for mailing lists. This saves time, effort, the environment and most of all printing and postage costs.

Do you like the look of these cards? Please get in touch with my company directly by email. We will work up a dual print and web campaign aimed directly at your market.

Graphic Design

noreply@blogger.com (Unknown) — Mon, 21 Apr 2014 16:24:00 +0000

Good Tides logo created for a surf and skate shop in southern California in 2012.

As an experienced Graphic Design, my professional background has been in both print and web based projects. In multiple capacities from Proofer, Junior Designer and Lead Artist, I have worked for agencies and corporations as well as individual clients. This design experience includes:

Branding and Logos
Catalogs and E-catalogs
Book and Menu Design
Banner Advertising
Graphics Packages

I can turn around your project whether you need menus for your restaurant or a new web site for your small publishing company.

Advanced Bio Sciences logo created for an American company in 2013.

The best part about being a Graphic Designer is that I am always learning about new industries. There isn't a time when I was working on a clients project in which I didn't learn something. A great deal of the time learning something critical about a client's industry is the key to a project.

Tuf-N-Lite logo created for a commercial construction company in 2006.

Several of my personal favorite jobs involved going on-site for catalog production. That involved touring warehouses, looking at the product and meeting team members. Not only does this make for a much stronger catalog but from a technical point of view it ensures that catalog is as comprehensive as possible and a good reflection of a company.

Grandin Road monthly catalog. Production and digital design work done from 2007 to 2010

Aside from freelance clients, I have also worked for several large companies within their design departements. One of these was Cinmar where I worked for three years as a Graphic Designer on two monthly catalogs and then as a Web Designer for the two websites attached to these book.

Graphics for software created at Ball State University from 2010 to 2012.

As a Senior Designer, at an academic institute within Ball State University, I worked on several core cirriculum courses for the school. I created graphics and animation for proprietary Learning Management Software.

Puppets Comic

noreply@blogger.com (Unknown) — Mon, 20 Jan 2014 03:15:00 +0000

Puppets is very special type of comic - a giant monster comic! No seriously, it's not just a mindless action comic. At the heart of the story is a young girl named Miette whose parents abandoned her. She lives with her grandfather, a former vaudeville illusionist, where she learns the lost art of puppetry at his downtown magic shop.

Miette is a child prodigy. She channels her need for her parents approval and love into her genius at making mechanical toys. Her grandfather loves her very much but she is in danger of losing him too.

A comic page from my original indie comic project Puppets.

Puppets is written by Derek Edwards. Derek has created a very moving script that hits you right in the guts. So, it's not just another giant monster book. It's about finding love and justice in the heart of a cold, cruel city.

We follow Miette as she is attacked by a series of deranged pederasts, petty thugs with cocaine dementia and... rival monsters?

Roaches Comic

noreply@blogger.com (Unknown) — Mon, 20 Jan 2014 03:09:00 +0000

Roaches began as a "one-off" attempt at a webcomic. The series got started in black-and-white in winter of 2009-2010.

Up to this point, I had spent nearly 100% of my time working in Graphic Design for agencies or as a Web Designer for large companies. During an abrupt downturn in the American economy I found myself, along with many of my friends and former co-workers, as a qualified, experienced and educated professional designer who was suddenly left out in the cold by a job market almost entirely without jobs in my field.

It was time to go back to what got me into the field in the first place - cartooning.

Title art for my original indie comic comic series Roaches.

My first webcomic, Roaches, used some basic Illustrator art and was a minor league hit. Instead of being repulsed - people got interested. In fact, some folks got so interested they actually spent weeks posting about how awful it was on the webcomic boards. These negative reviews, which were clearly written by irrational, angry people, did more for me than anything else. All of these professional condemnations drove huge amounts of traffic to my webcomic and earned me quite a few dedicated fans.

Today, I have one edition in print in almost a dozen comics shops in Indiana and Ohio. The second edition is on it's way this year.

Undead Warrior

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 08:34:00 +0000

Character Design detail for an undead warrior from an original indie comic project titled War Cry.

After working on a modern version of Woody Woodpecker for a few months - I needed a change of pace. This character is part of a world that came out of 24 Hour Comic Day held in Indianapolis in 2011. The character is part Deadpool and part Ralph Bakshi's Peace/Necron 99 set in a Forgotten Realms/Spelljammer corner of the D&D universe.

On the planet that this poor sap inhabits magic rules and all people are re-animated zombie slaves. The are rules by two distinct sects that are split along gender lines and geography who have been at war for many hundreds of year. Their battles have reduced the planet's population to a handful of battle-scarred survivors.

Miette

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 08:08:00 +0000

Character Design detail for the unlikely hero Miette from my original indie comic Puppets RYTEC.

XXX.

Full character sheet for Miette in Central City shows the lighting effect from his head.

XXXX.

Roaches

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 08:08:00 +0000

Title design detail for a short based on from my original indie comic Roaches.

Roaches began as a webcomic from the late winter of 2009 to the early winter of 2010. As an animator, I had spent all of my time working in Graphic Design for agencies or as a Web Designer for large companies.

During an abrupt downturn in the entire American economy, I found myself in a prolonged period of unemployment - along with many of my friends and co-workers. It was time to go back to what got me into the field in the first place - cartooning.

Character Design detail for the main character from my original indie comic Roaches.

Two things happened at this point. I discovered one of my friends comics that made in 2007 and put on and I decided to give it a try myself. His comics were, and arguable are, much more funny than my own. Rom Hunter's Awesome Star Wars (now unavailable) was full of hilarious immaturity: stormtroopers smothering on their own farts and Chewbacca having existential crises.

Character Design detail for more characters from my original indie comic Roaches.

My first webcomic, Roaches, used some basic Illustrator art and was a minor league hit. Instead of being repulsed - people got interested. In fact, some folks got so interested they actually spent weeks posting about how awful it was on the webcomic boards. These negative reviews, which were clearly written by irrational, angry people, did more for me than anything else. All of these professional condemnations drove huge amounts of traffic to my webcomic and earned me quite a few dedicated fans.

Today, I have one edition in print in almost a dozen comics shops in Indiana and Ohio. The second edition is on it's way this year.

Miette

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 08:08:00 +0000

Character Design detail for the unlikely hero Miette from my original indie comic Puppets.

The hero of Puppets is 9-year-old girl. She secretly controls a giant monster as it wrecks massive destruction in Central City. The demolition is just collateral damage for Miette who is on her own mission of vengeance.

Miette's wardrobe is very specific and needs to be seen from as many angles as possible.

Puppets and everything in the world it takes place in is heavily influenced by the animated series Big O, Studio Gainax's Neon Genesis Evangelion and Hiromu Arakawa's Full Metal Alchemist.

Cement

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 08:07:00 +0000

Character Design detail for the giant monster Cement from my original indie comic Puppets.

Cement is a type of a giant monster known as a golem. He was created through a mixture of advanced machinery and ancient magic. Small by Godzilla's 300 foot tall size Cement is 60 feet tall or around four stories tall.

He is a strange creature who seems to have his own set of complex emotions aside from being a huge "puppet". His history is told by way of a myth of a giant monster who helped the early city fathers create a dam located near the city.

This puppet is controlled by Miette, a 9-year-old girl. Miette is a child prodigy who in her young age is a genius mechanic. She lives with her grandfather above his magic shop in Central City.

Full character sheet for Cement in Central City shows the lighting effect built into the creatures head.

Cement does battle with a series of rival monsters and, guided by Miette, seeks out human villains, in the city. As he fights and searches he does catastrophic collateral amounts of damage to the city.

Rytec

noreply@blogger.com (Unknown) — Sun, 19 Jan 2014 07:37:00 +0000

Digital Interface design in Flash for RYTEC/Anheuser-Busch in 2007.

A good example of a project that required graphic design and an understanding of interactive Flash assets including video elements is this one for RYTEC/Anheuser-Busch.

This is used as a digital sales tool for prospective clients to view industrial doors for their new or existing warehouses.

Good Tides

noreply@blogger.com (Unknown) — Wed, 15 Jan 2014 10:04:00 +0000

Good Tides logo created for a surf and skate shop in southern California in 2012.

Good Tides is a brand from a small surf and skate shop in southern California. After talking about what they wanted we generated a design spec that limited the color range to two colors that would be printed on locally produced merchandise sold in their shops.

Tuf-N-Lite

noreply@blogger.com (Unknown) — Wed, 15 Jan 2014 10:03:00 +0000

Tuf-N-Lite logo created for a commercial construction company in 2006.

Tuf-N-Lite is a commercial and residential construction materials manufacturer in Ohio. They needed an update of their existing logo plus additional sales materials. It was one of my favorite jobs to date due to the broad level of access I had to company and with it's personnel.

SISA Tech

noreply@blogger.com (Unknown) — Wed, 15 Jan 2014 08:51:00 +0000

A web site design for an innovative IT solutions company in Australia..

Here is some text laid out inside of the post. It's important to check out how all this text goes in and how far apart and how long the text runs down the page.

Red Anvil Comics

noreply@blogger.com (Unknown) — Wed, 15 Jan 2014 08:50:00 +0000

Dynamic site created for Red Anvil Comics a New Jersey based publishing company created in 2013.

I'm very proud to have worked with many types of clients from all over the country. Recently, I had the privledge of working with Red Anvil Comics in New Jersey on a site re-design.

Gluten Free Me

noreply@blogger.com (Unknown) — Wed, 15 Jan 2014 08:03:00 +0000

Web design can be as original and as fresh as the company it represents.

I've worked with a variety of clients from very different industries from Gluten Free food companies in Australia to East Coast comic publishers. I've worked to give each one a strong web presence.

For this client, a mail order specialty food business, they needed to update their logo. The original logo was in black and white and at too small of a resolution to be featured prominently.

To establish their brand through out their new site, I slightly modified their existing logo and created a file that could be used for both and web and print.

Next, two PSD designs for the site were shown to the client in order to get approval and then begin coding the elements in HTML and CSS.

The first design used the color green in order to reflect the eco-friendly and health conscious ethos of the company. This design made viewing products and buying them very easy with a large "viewing pane" prominently featured at the top of the page.

The second design, seen at the top of this post, was made using black as the central color. This was done in order to reflect a professional appearance for this company and serve as a sharp contrast the very colorful selections of food. Orange yams for example, really "popped off" the page due to this contrast in color.