Using 3D Elements Outside Blender

September 24th, 2011

I’ve had an itch for some time now to try making a screencast/tutorial.  As I was working in blender recently on a logo, it occurred to me that I’d never seen a tutorial on the exact technique I was using, and that it would be worth sharing.  So here’s my first shot.  Please let me know what you think!

Using 3D Elements Outside Blender from Bill Knechtel on Vimeo.

Learn how I use blender to create 3D elements destined for use in web & print designs. We’ll cover creating a logo in Adobe Illustrator, bringing it into Blender for conversion to 3D and rendering (using an HDRI lighting technique), then bringing the resultant renders into Adobe Photoshop for use in a web site and a business card.

External URLs referenced in the video:
Vector Stars: http://www.vecteezy.com/Miscellaneous/31710-Stars-and-Shines-Vector
HDRI Collection: http://wiki.mcneel.com/people/brianjames
Website PSD Template: http://www.bevelandemboss.net/show-template.php?id=16

Compositing with 3D Elements

August 16th, 2011

My friend Justin Cary is designing some banners to be used at a convention where a local BBQ retailer will be showing its wares.  These banners will be used to segregate floorspace dedicated to specific brands.  Justin will be using brilliantly composed and photographed morsels of food as a design element on each banner.   Yesterday he asked me if I’d build him a 3D fork to be used in place of the fork that he photographed, as he wasn’t really in love with the way the fork he used had photographed.  He also suggested I take the occasional screenshot and document the how’s and wherefore’s to share the process, so here we go.

The first step was to find a fork to use as a reference, so I went to the break room and grabbed a basic metal fork and brought it back to my office to photograph it for reference.  When you’re modeling an object 3D, it’s very useful to minimally have a front-facing and a side-facing photograph to load into your 3D modeling program and build your model right on top of the reference photo. Here are my two reference photos, after loading them into photoshop and making sure the fork is identically sized between the two photos.

And here you can see I’ve begun the modeling process.  Obviously this is just the top of the fork, from a few different views.

In this next couple of photos, you’ll see that the handle has taken shape for the most part, now I just need to fit it to the reference photo along the Y axis.

The fork is mostly complete now, but after looking at some test renders I’ve decided I want to add a bit of a raised detail to the handle, just so it has a bit more dimension.  You’ll see that edit happening in the second photo.

Next up, lighting.  I used a technique called HDRI lighting to give the fork some realistic reflections.  Essentially HDRI is a technique for applying a panoramic style photograph to the 3D program’s virtual environment, and using that panorama to inform the program how to light your scene.  The white dome you see behind the fork does two things: first, it acts like seamless background that makes it easy to separate an image from its background, and it adds a slight amount of light to the sides of the fork.

And here’s the completed render that Justin could use in his design, both with the seamless white background, and with the background knocked out in Photoshop.

And here’s our new fork after compositing into the original photograph to replace the practically shot fork, along side the original photo.

Finally, just for fun, I wanted to see what the fork would look like on a plain white surface so I could see some shadows with it… We’ll call it a beauty shot.  Yes, you can have a beauty shot for a fork that only exists in a computer ;-) The shots you see here are composing the shot in my 3D program, and the final render. Enjoy.

Ruby Random.org Client

June 1st, 2011

One of the projects I’m involved in has the need to randomly generate sequences of characters, and it’s important that the randomness in these sequences be cryptographically sound. My thoughts first jumped to the awesome Random.org, which has a cool API for things just like this, so I could use a truly random number as the seed for my random sequence builder.  I noticed that there was an archive of clients written in various languages, and the one client written in Ruby was pretty good, but not at all what I needed, as it was designed to run from the command line and only grab random integers, where I wanted a class I could include in whatever code I was writing, be it server-side, command-line, or some other third thing. So – in typical Bill fashion – I wrote my own.  Now I want to offer it to you, fair Ruby-loving coders.  Here you go, my Ruby Random.org Client. Enjoy.

jQuery Link Target Automation

July 26th, 2010

In a post I wrote back in November 2008, I taught you how jQuery can be used to make links open in a new window in a standards compliant way, using the “rel” attribute in your link tag.  In my efforts to build and run a photography news website recently, it quickly became clear that I didn’t want to mark all my external links with “rel=external” , because every single post has an external link. Being thusly motivated, I started looking for wordpress plugins that would scan the link, determine if it was external, and do something to it in a standards compliant way that would make it open in a new window.  Coming up with diddly-squat on the search, I realized I was being dense. Again. I could let jQuery do that for me, and not have to install a plugin to do it.  Here’s the relevant code:

<script type="text/javascript">
  $(function() {
    $("a:not([href^='http://www.phototimes.net'])").attr("target", "_blank").addClass("external-link");
  });
</script>

This little snippet does several things all at once. The first thing it does is find all links whose href  attribute does not begin with http://www.phototimes.net.  This selects links that are off-domain, which we want to open in a new window.  The next part sets the target attribute of the link to _blank, so that it will open in a new window, and the third part adds the external-link class to the tag.  The external-link class allows us to style the link differently that other links on the site, like adding one of those nifty little arrows that visually indicate that the link is offsite, and was popularized by Wikipedia.  jQuery, I think I love you.

Artist Spotlight: Justin Cary

December 9th, 2009

Occasionally I come across people with amazing talent and skill in various disciplines – artistic and otherwise. Today I decided to begin writing a bit about these folks so that others can benefit from their expertise. I’ll begin by introducing you to Justin Cary, a photographer in Wichita, KS.  Justin is one of those enviable people that has a natural and exceptional sense for the aesthetic.  He’s also got the drive and desire to learn the fundamental science that underpins his craft, so he’s developed the same sort of relationship with his cameras that a concert pianist does with his or her instrument.  So for those of you looking for excellence in wedding photography, portraiture, and even commercial photography; be sure to give Justin serious consideration.

Oh, and for those within driving distance, Justin tells me he’s going to be starting to offer photography classes in Wichita, so those with the desire can begin to learn photography from someone that’s actually in the industry and taking awesome photos every day.   Be sure to take an in-depth look at his portfolio pages while you’re at his site!

Apache + Compression = Faster Website

October 14th, 2009

A lot of web developers tend to overlook or ignore the  file sizes of the files that compose their websites.  I’ve seen many websites that are well over a megabyte for just the home page with all its components.  I’ve even seen a few that were over 3 megabytes.  While most americans have broadband of some fashion, there are still a significant portion (~20%) that do not have broadband, and even those that do will get impatient waiting for a page to load, and may click off before you have a chance to wow them with your content.

I tend to use several techniques to keep my overall document size reasonable:

  1. Compressed Images – JPEG (for complex images) between 40 and 65 percent quality, depending on where compression artifacts become too noticeable; GIF (for simple images) color palette restrictions between 8 and 128 colors, depending on where the artifacts become too noticeable. Of course I also use PNG images where a really good alpha channel is needed, but I use them sparingly, as full alpha transparencies dont compress well.
  2. Minified Javascript and CSS files.  I like the YUI Compressor for this.
  3. Server-side compression.   Even minified files can be squeezed even smaller with the use of server-side compression.

Server-side compression is super-simple to implement, as long as you have access to an .htaccess file or a friendly server administrator.  Here’s a syntax that works for me on a couple of servers I run (This is Apache specific, for other servers find a mod_deflate equivalent):

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE text/x-js application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

The two AddOutputFilterByType lines can be combined into one or split up however you choose if you’re a stickler for keeping your text in configuration files readable. This can be inserted in the virtualhost definition or in your .htaccess file.  Using this alone, I consistently shave off between 60 and 100 kilobytes off my download size.  Enjoy!

Download My Grid Template

October 8th, 2009

One of the things I often use when building a website is a grid template. This is basically just a set of guides and an overlay I use in photoshop when mocking things up. I’ve come to learn that sites that are built against a grid have a structure that is felt more than seen. They make a visitor feel like things are just well put together, and comfortable to use. This certainly doesn’t mean you can’t get really creative, and it doesn’t impose any sort of limitations on what you can do, in fact I think that they make life a bit easier.

My favorite template currently is a 12 column, 900 pixel wide layout. You of course don’t have to use 12 tiny columns, but it gives you the flexibility to split those columns into various configurations, like three 300px columns; one 600px column and one 300px column; one 375px column, one 225px column, and two 150px columns; a page broken into three vertical sections, each having a different column configuration… whatever! This one has 6px gutters and guides for the edges and middle of the gutter, depending on how you want to line things up.

Se here you go, my 900px 12-column Photoshop Grid Template. Enjoy!

And now, for something completely different…

October 7th, 2009

So rather like the proverbial mechanic’s car, the web developer’s own website can languish unless he or she makes it a priority.  So after 5 1/2 years, I’m finally releasing a website under the ThreeBit flag.  I’m going to be transplanting some articles from my personal blog here to sort of get things off the ground, and will go from there.  So welcome to the new ThreeBit Media website!

Designing for email, and feeling dirty because of it.

February 23rd, 2009

Back in my first Designing For Email post, I discussed workable dimensions and some common-sense techniques when you’re approaching designing for email. Most of that still holds true, but I’ve discovered an unpleasant lack of support in a few email clients for an important bit of CSS: floating, clearing, and margins. The lack of this one bit makes good design wholly in CSS nearly impossible. I’m officially peeved. What’s really weird is MS Outlook. Outlook 2003 supports floating just fine. Outlook 2007 does not. So what does this leave me with? Table-based design.

Yeah, I know. Seriously. After all this time when CSS has (finally!) become a standard method of layout. When people are finally getting the whole point of separation of concerns when it comes to content versus layout, and browsers are getting good support, and for the most part I can get my designs to be pretty consistent across browsers without much effort as long as I closely follow the rules… I’m having to retrofit my CSS-based layout into a table-based design.

As I was coming to grips with this I did a sanity check by looking through the last few months of my inbox and looking at the adverts (non-spam) I’d recieved. A quick look at the source confirmed that they were ALL table-based. Dang. And now the fellow across the hall is making fun of me. He knows how dirty I feel for having to violate standards to make something layout correctly. Oh well. For what it’s worth, I did stumble across the Email Standards Project, which is what confirmed that Outlook 2007 and Gmail (!) both lack support for floating/clearing. So, have fun dusting off the table-based design knowledge you’d accumulated and then happily buried when CSS finally became a viable alternative.

Sitemaps and Multilingual Websites

January 6th, 2009

When beginning the architecting of the site I’ve been working on I knew I would need to address two issues (among many others, but for now we’ll just cover these two): 1) How to structure a multilingual website physically, and 2) How to address the sitemap.xml structure for the site as a whole.

First I had to decide how the site should be physically structured. Would a subdomain-per-language be good, e.g, en.mysite.com for English, es.mysite.com for Spanish, and ru.mysite.com for Russian? Or would it be better to use directories for the distinction, e.g. www.mysite.com/en/ for English, etc? If I chose the subdomain route it would be easy to build sitemap.xml files for each domain. But how would I structure the sitemap.xml if using directories?

I chose to use directories for a couple of reasons. One, I knew that google treats subdomains as entirely separate websites. I didn’t wish to do this because semantically these were three translations of the same website, and I felt that should be reflected in their structure. Two, I didn’t want to have multiple datasets when dealing with analytics, either multple log files to analyze or one of the myriad javascript-based analytics packages. Yes, I’m fully aware that there are ways to glom datasets together, or otherwise make analytics packages aware of your structure… this was just pure personal preference.

OK, so now I have my structure in place, how do I build the sitemap.xml? I don’t want one huge monolithic file for the entire site. Even though at current count there are only around 100 html files per translation (not huge by any means, but also not insignificant), I would just personally prefer to keep the translations in their own separate sitemap.xml files. Those of you familiar with sitemaps will have been shouting at your monitors by now “Use a sitemap index, dork!”, and you’d be right. I just wasn’t sure that Google would support this. Google didn’t seem to mention it anywhere in their webmaster tools documentation (though I could have just missed it).

I’m happy to report that Google does in fact support sitemap indexes, and I’m fairly certain that MSN and Yahoo! do as well. So, simply build yourself a sitemap_index.xml (the filename is arbitrary) file that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
     <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <sitemap>
          <loc>http://www.mysite.com/sitemap_en.xml</loc>
     </sitemap>
     <sitemap>
          <loc>http://www.mysite.com/sitemap_es.xml</loc>
     </sitemap>
     <sitemap>
          <loc>http://www.mysite.com/sitemap_ru.xml</loc>
     </sitemap>
</sitemapindex>

Then build your individual sitemap files as you normally would. You can find the full specifications for sitemaps at sitemaps.org, and a nifty utility to help you automatically build sitemap files at the google-sitemap_gen project. Dont forget to include your new sitemap index file in your robots.txt file! Enjoy.

UPDATED: December 8, 2009 – Corrected my syntax on the xml. D’oh!