Going through our bookmarks here is our list of most useful links for inspiration or guidance when creating a concept. Whether you are just getting started as a designer or you are a designer with creative block these links will be sure to help.

Web Design Tutorials The Ultimate Roundup - This is a great article from Hongkiat showing some of the many design layout applicable businesses or individuals.

60+ Incredible Tutorials And Resources Collections For Designers To Discover The Best Of The Web In June - Following up with some of the latest design trends out, this collection of  sites are some of the best from last month.

23 Colorful And Inspiring Web Designs Where Textures Are In Full Action - Texture is a great way to give dimension to a web site. This short list displays some great examples of creative and affective use.

150 Useful Adobe Photoshop Web Design Layout Tutorials and Techniques - A great collection of both web design and photoshop tutorials to take  yor designs to the next level.

27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts - Just as the title states “Decent Web Layouts” i would have to agree with but you get the idea. Some time layout examples is all you need to get the creative juices flowing.

Honorable Mentions

35 Tutorials for Creating Website Layouts in Photoshop

40 Useful Photoshop Web Layout Tutorials

Top 30 Photoshop Web Design Layout Tutorials

Yesterday I had to add some custom forms to a WordPress plugin called Google Maps Store Locator for WordPress (version 1.2.28) and found it’s not as straight-forward as one might expect. After about forty-five minutes of digging through all of the plugin’s files, I located four that were of use to me:

• /store-locator/view-locations.php
• /store-locator/add-locations.php
• /store-locator/generate-xml.php
• /store-locator/js/store-locator.js

By making additions to these four files as well as the store-locator database, you can add custom form fields to the plugin that actually store data and, of course, display this data to the user!

Step 1: Add custom fields (or “columns”) to the wp_store_locator table

We need to add columns to the table named wp_store_locator in our WordPress database so that our custom info can be stored somewhere. We are going to add our columns after the last column in the table (which should be named sl_neat_title).

So, using phpMyAdmin or any other database administration tool, add your custom columns. For this tutorial, I’m going to add sl_creditcard and sl_giftcard to keep track of which stores allow the use of credit cards or gift cards. Notice that I included the sl_ prefix. This is necessary because the plugin expects every column in the table to have this prefix.

Note: From now on when you see “creditcard” or “giftcard” OR “sl_creditcard” or “sl_giftcard” OR “Credit Card” or “Gift Card” this is where you can insert the names of your custom fields.

Above: Database table wp_store_locator before adding custom fields

Above: Database table wp_store_locator after adding custom fields

Step 2: Modify view-locations.php, and add-locations.php

We need to modify these two files so the custom forms and info show up in the admin panel when the admin tries to add, edit, remove, or view locations.

In add-locations.php we must append our custom form field HTML. Opening the file initially and looking at lines 98 to 100 you will see:

“.__(“Hours”, $text_domain).”<br><input name=’sl_hours’><br><br>
“.__(“Phone”, $text_domain).”<br><input name=’sl_phone’><br><br>
“.__(“Image (shown on map with location)”, $text_domain).”<br><input name=’sl_image’><br><br>

To add form fields for the fields we added to the database (sl_creditcard and sl_giftcard), simply do the following:

“.__(“Hours”, $text_domain).”<br><input name=’sl_hours’><br><br>
“.__(“Phone”, $text_domain).”<br><input name=’sl_phone’><br><br>
“.__(“Credit Card“, $text_domain).”<br><input name=’sl_creditcard‘><br><br>
“.__(“Gift Card“, $text_domain).”<br><input name=’sl_giftcard‘><br><br>
“.__(“Image (shown on map with location)”, $text_domain).”<br><input name=’sl_image’><br><br>

Next, in view-locations.php, we will have to make three additions. First, on lines 153 to 155 find:

<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_hours&d=$d'>".__("Hours", $text_domain)."</th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_phone&d=$d'>".__("Phone", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_image&d=$d'>".__("Image", $text_domain)."</a></th>";

And do the following:

<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_hours&d=$d'>".__("Hours", $text_domain)."</th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_phone&d=$d'>".__("Phone", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_creditcard&d=$d'>".__("Credit Card", $text_domain)."</a></th> <th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_giftcard&d=$d'>".__("Gift Card", $text_domain)."</a></th>
<th><a href='".ereg_replace("&o=$_GET[o]&d=$_GET[d]", "", $_SERVER[REQUEST_URI])."&o=sl_image&d=$d'>".__("Image", $text_domain)."</a></th>";

Then on lines 189 to 191 find:

<td><input name=’hours-$value[sl_id]‘ value=’$value[sl_hours]‘></td>
<td><input name=’phone-$value[sl_id]‘ value=’$value[sl_phone]‘></td>
<td><input name=’image-$value[sl_id]‘ value=’$value[sl_image]‘></td>”;

And do the following:

<td><input name=’hours-$value[sl_id]‘ value=’$value[sl_hours]‘></td>
<td><input name=’phone-$value[sl_id]‘ value=’$value[sl_phone]‘></td>
<td><input name=’creditcard-$value[sl_id]‘ value=’$value[sl_creditcard]‘></td>
<td><input name=’giftcard-$value[sl_id]‘ value=’$value[sl_giftcard]‘></td>
<td><input name=’image-$value[sl_id]‘ value=’$value[sl_image]‘></td>”;

Then on lines 217 to 219 find:

<td>$value[sl_hours]</td>
<td>$value[sl_phone]</td>
<td>$value[sl_image]</td>”;

And do the following:

<td>$value[sl_hours]</td>
<td>$value[sl_phone]</td>
<td>$value[sl_creditcard]</td>
<td>$value[sl_giftcard]</td>
<td>$value[sl_image]</td>”;

Whew! Feel free to upload the files you just worked on. You can view the fruits of your labor by going to your WordPress Dashboard and clicking “Manage Locations” or “Add Locations” under the “Store Locator” menu. Your custom fields should show up like this:

Above: Result of adding code to add-locations.php

Above: Result of adding code to view-locations.php

Step 3: Modify generate-xml.php and store-locator.js

We need to modify these two files so our custom info shows up on the front end when the user interacts with the actual “store locator.”

Modifying generate-xml.php is a bit more tricky than duplicating HTML (like we did previously) because we must add our custom fields (sl_creditcard and sl_giftcard) to a SQL query. But follow along closely and everything should turn out well!

Open generate-xml.php and on line 43 find:

$query = sprintf(“SELECT sl_address, sl_store, sl_city, sl_state, sl_zip, sl_latitude, sl_longitude, sl_description, sl_url, sl_hours, sl_phone, sl_image,( $multiplier * acos( cos( radians(‘%s’) ) * cos( radians( sl_latitude ) ) * cos( radians( sl_longitude ) – radians(‘%s’) ) + sin( radians(‘%s’) ) * sin( radians( sl_latitude ) ) ) ) AS sl_distance FROM “.$wpdb->prefix.”store_locator HAVING sl_distance < ‘%s’ ORDER BY sl_distance”,

And do the following:

$query = sprintf(“SELECT sl_address, sl_store, sl_city, sl_state, sl_zip, sl_latitude, sl_longitude, sl_description, sl_url, sl_hours, sl_phone, sl_image, sl_creditcard, sl_giftcard,( $multiplier * acos( cos( radians(‘%s’) ) * cos( radians( sl_latitude ) ) * cos( radians( sl_longitude ) – radians(‘%s’) ) + sin( radians(‘%s’) ) * sin( radians( sl_latitude ) ) ) ) AS sl_distance FROM “.$wpdb->prefix.”store_locator HAVING sl_distance < ‘%s’ ORDER BY sl_distance”,

Then, on line 69 to 72 find:

echo ‘hours=”‘ . parseToXML($row['sl_hours']) . ‘” ‘;
echo ‘phone=”‘ . $row['sl_phone'] . ‘” ‘;
echo ‘image=”‘ . $row['sl_image'] . ‘” ‘;
echo “/>n”;

And do the following:

echo ‘hours=”‘ . parseToXML($row['sl_hours']) . ‘” ‘;
echo ‘phone=”‘ . $row['sl_phone'] . ‘” ‘;
echo ‘image=”‘ . $row['sl_image'] . ‘” ‘;
echo ‘creditcard=”‘ . $row['sl_creditcard'] . ‘” ‘;
echo ‘giftcard=”‘ . $row['sl_giftcard'] . ‘” ‘;
echo “/>n”;

Okay, we’re almost there! All that’s left is store-locator.js…

Open store-locator.js and on lines 61 to 63 find:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var image = markers[i].getAttribute(‘image’);

And do the following:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var creditcard = markers[i].getAttribute(‘creditcard‘);
var giftcard = markers[i].getAttribute(‘giftcard‘);
var image = markers[i].getAttribute(‘image’);

Then, on line 66 find:

var marker = createMarker(point, name, address, “”, description, url, hours, phone, image);

And do the following:

var marker = createMarker(point, name, address, “”, description, url, hours, phone, creditcard, giftcard, image);

Then, on lines 139 to 141 find:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var image = markers[i].getAttribute(‘image’);

And do the following:

var hours = markers[i].getAttribute(‘hours’);
var phone = markers[i].getAttribute(‘phone’);
var creditcard = markers[i].getAttribute(‘creditcard‘);
var giftcard = markers[i].getAttribute(‘giftcard‘);
var image = markers[i].getAttribute(‘image’);

Then, on lines 143 find:

var marker = createMarker(point, name, address, homeAddress, description, url, hours, phone, image);

And do the following:

var marker = createMarker(point, name, address, homeAddress, description, url, hours, phone, creditcard, giftcard, image);

Then, on lines 145 find:

var sidebarEntry = createSidebarEntry(marker, name, address, distance, homeAddress, url);

And do the following:

var sidebarEntry = createSidebarEntry(marker, name, address, distance, homeAddress, url, creditcard, giftcard);

Then, on lines 154 find:

function createMarker(point, name, address, homeAddress, description, url, hours, phone, image) {

And do the following:

function createMarker(point, name, address, homeAddress, description, url, hours, phone, creditcard, giftcard, image) {

Then, on lines 163 to 164 find:

if (hours!=”") {more_html+=”<br/><b>Hours:</b> “+hours;} else {hours=”"}
if (phone!=”") {more_html+=”<br/><b>Phone:</b> “+phone;} else {phone=”"}

And do the following:

if (hours!=”") {more_html+=”<br/><b>Hours:</b> “+hours;} else {hours=”"}
if (phone!=”") {more_html+=”<br/><b>Phone:</b> “+phone;} else {phone=”"}
if (creditcard!=”") {more_html+=”<br/><b>Credit Card:</b> “+creditcard;} else {creditcard=”"}
if (giftcard!=”") {more_html+=”<br/><b>Gift Card:</b> “+giftcard;} else {giftcard=”"}

Then, on line 188 find:

function createSidebarEntry(marker, name, address, distance, homeAddress, url) {

And do the following:

function createSidebarEntry(marker, name, address, distance, homeAddress, url, creditcard, giftcard) {

Then, on line 197 find:

var html = ‘<center><table width=”96%” cellpadding=”4px” cellspacing=”0″ class=”searchResultsTable”><tr><td width=”30%” style=”padding-right:4px” valign=”top”><b>’ + name + ‘</b><br>’ + distance.toFixed(1) + ‘ ‘ + sl_distance_unit + ‘</td><td width=”40%” valign=”top”>’ + street + ‘<br/>’ + city + state_zip +’ </td><td width=”30%” valign=”top” style=”text-align:right”>’ + link + ‘<a href=”http://’ + sl_google_map_domain + ‘/maps?saddr=’ + homeAddress + ‘&daddr=’ + address + ‘” target=”_blank” class=”storelocatorlink”>Directions</a></td></tr></table></center>’;

And do the following:

var html = ‘<center><table width=”96%” cellpadding=”4px” cellspacing=”0″ class=”searchResultsTable”><tr><td width=”30%” style=”padding-right:4px” valign=”top”><b>’ + name + ‘</b><br>’ + distance.toFixed(1) + ‘ ‘ + sl_distance_unit + ‘<br>Credit Card: ‘ + creditcard + ‘<br>Gift Card: ‘ + giftcard + ‘</td><td width=”40%” valign=”top”>’ + street + ‘<br/>’ + city + state_zip +’ </td><td width=”30%” valign=”top” style=”text-align:right”>’ + link + ‘<a href=”http://’ + sl_google_map_domain + ‘/maps?saddr=’ + homeAddress + ‘&daddr=’ + address + ‘” target=”_blank” class=”storelocatorlink”>Directions</a></td></tr></table></center>’;

Congratulations, if you’ve followed the steps correctly your custom fields should be showing up on the front end like this:

Above: Our custom fields on the front end!

Build a Content Slider with jQuery
A cool Jquery content slider to add to your site.

View the Demo
Get the Source Code

Design a Unique Grungy Website Layout
The web is filled with grunge web tutorials well here’s one. We like this not so much for the overall result but it is a good tutorial that can be used in many different ways.

Real-time Face Detection in Flash 
Now this is just cool. The future is here. 

View the demo
Grab the source here

43 Creative Examples Of High Quality Free Icon Sets

Other Great Articles:
11 Non-Traditional Uses of WordPress 
Avoid the Apple Tax – Cash in on the value of Windows 
Using CSS Zen Garden As A Teaching Tool For New Web Designers
Blog comments design considerations
App Review: Amplitude — Your iPhone as a Covert Surveillance Tool
101 Design resource sites

Here’s our latest Roundup of Print and Web tutorials. The following tutorials are great examples of the  website design and print design work we complete on a day to day basis. Tutorials make great practice and try to do different variations of them by using your own text or images.

Print Tutorials

Business Card – Making a Print-Ready Business Card Using Only Photoshop
Business Card - Using the Vanishing Point Filter to Mock up a Business Card 

Print – Creating an Old-Collage Effect Poster
Print - Creating A Cool Vintage Collage Design In Photoshop

Text - A Slick Supernatural Text Effect

Web Tutorials

31 Practical (Web) Interface Design Tutorials

40+ Greatest Web Interface Design Photoshop Tutorials, Part I

How To Create a Stunning Vista Inspired Menu

How To Create A Desk Environment In Photoshop From Scratch!

Related:

Photoshop can be a very versatile tool and can be used in many different instances. Here are so of our featured tutorials we recommend to get your feet wet.

Image effect:

create a red hazard sign

The above tutorial is great for the beginner. Here are more great image tutorials for some great effects.
30 Nicest Photoshop Tutorials
41 more nice Photoshop Tutorials

Text Effect:

Icy  Styles

After you mastered the above tutorial and you want more try so of these:
22 more great text effects
55 text effects
30 beautiful text effects 

Web 2.0 stuff:

making a message strip 

web 2.0 buttons

glossy web 2.0 button

web 2.0 badge that flips

web 2.0 badge/label

Most of the time, the first webhost you sign up for, you wind up outgrowing after a year or less.  Most people purchasing webhosting don’t know what factors to look for, and even if they do, it’s difficult to tell the seedy companies from the good ones.  On top of this, any good website should bring in ever-increasing traffic, which often requires an upgrade.

When you move webhosts, it’s often challenging to understand exactly what the steps are, and what order they should be completed in.  Here’s a rough guide, that will hopefully show you have to avoid some of the pitfalls, and minimize any downtime you may have.

1. Purchase new webhosting.  You need to have a new home for your website before you move out of the old one.  You might have to pay double rent for a month, but it’s better than being homeless for any length of time.  We recommend Bluehost, as they’re really good at adapting to your site’s growth, and provide an amazing amount of features for the price.
2. During signup, you will want to signup as a transfer client.  You already own the domain name (something like a phone number), you just want to move where the files live.  DO NOT transfer the domain name yet, though.  this won’t happen until the end of the signup, so don’t worry.  You won’t do it by accident.
3. One of the reasons that we recommend Bluehost is that they provide you with FTP access via IP address before you transfer your hosting.  You’ll next want to download your entire site from your old webhost.  Once you’re set up with a new host, you’ll be able to log into your control panel, where you can see your new IP address.   set up your FTP client, using that FTP address as the host.
   
4. Once you’ve moved your site over, log into your old host’s control panel, and you can now safely point your nameservers at your new host.  if you’re using bluehost, that will be NS1.BLUEHOST.COM and NS2.BLUEHOST.COM.
   
5. After those are set, you can begin the process of transferring control of the domain to your new host.  First, make sure that domain privacy and domain locking are turned off.  Disabling Domain Locking allows you to give permission for the domain to be transferred.  Disabling Domain Privacy ensures that your old host will send email to your correct email address, rather than a catch-all address.
   
6. You may also request your domain’s authorization code at this time.
   
7. In your new control panel, go to the Domain Manager, and follow the steps to transfer a domain.  Provide the authorization code as requested, and the domain should move over gracefully.  With some hosts (your old host) you may have to further confirm that you are, indeed, transferring.  With GoDaddy, for instance, you’ll need to approve the transfer, from the domain manager:
   

The reason for doing things in this order is that even if the domain transfer takes a long time to complete, in the interrum, your files are still being served off of your new hosting plan.  No down time, no worries

Root recently wrote a post answering a question I’ve started hearing with increasing frequency since I started working with Blueprint: “How do you become a web designer/developer?”
This is usually followed immediately with “I’ve got a copy of Dreamweaver, will that help?” Root’s answers, most of which I agree with, are a great start on a means to answer both questions, although they point out the flaws in both questions. Here are some higlights, with my own additions:

1. Without a really good understanding of HTML I wouldn’t be able to build integrated interfaces for Content Management Systems
2. I made no progress at all until I got my head around CSS positioning (layouts) Here’s a great gallery of layouts that nearly everything I work on comes from. These are the essential building blocks, which can be stacked, nested, and remixed to form any layout.
3. If I used a code generator I would never have learnt html as I need to know it today
4. Separating style and content is not achieved simply by using CSS. It needs semantic markup hand in hand to unlock the power.
5. Good web pages are built on well understood scientific principles. There is nothing arty about usability or accessibility.
6. Choose a forum and become a teacher / student. Be good at both roles
7. Read the experts. Follow their work. Open dialogue
8. Reuse your code, and follow consistent nomenclature eg: I now always call my outer container #page my menu is #sidebar and so on. Think about how to best uses classes. I use a few that I reuse. Other than that go with descendant selectors
9. Understand the global reset
10. Since I started sectioning my CSS my life got a whole lot simpler.
11. Build your bookmarks. Throw out the junk. Find the very best solution to each and every challenge in web construction and use it consistently.
12. Challenge yourself. Learn new stuff every day. Move outside your comfort zone
13. Do not use hacks, do not use Conditional CSS. It is the road to madness (CSS 101: there’s always another way)
14. Avoid defining the width of anything if it can be avoided. Ditto for height.
15. Understand Richard Rutter’s stuff on vertical spacing for fonts
16. Be a blogger – use social media to move among the community that you aspire to join. This is the most priceless facility the internet has given us. We can learn directly from our industry leaders.

I think that I’m probably less qualified than Root to answer such a question, but the answers he gives are certainly true in my experience. The moral of the story, specifically #3, is that Dreamweaver my be a useful tool to those who already know how to design and develop for the web, but it will not teach you to be a web developer – It will always be a shortcut around the things you have not yet learned.

There are a ton of webhosts out there. Some are cheap, some are risky, some are high quality, and some are expensive. None of those qualities confers any of the others. Choosing one is one of the most difficult tasks in setting up a website by yourself.

Windows Vs. Linux

However tempting it may be to get a web host with the same operating system as your home computer, you must resist. In general, you want a Linux host. The LAMP stack (Linux, Apache, MySQL, PHP) powers millions of web sites, based on free software packages that make it easy for you to put content on your website without writing code. CMSes like WordPress and Joomla!, as well as e-Commerce packages like X-Cart, osCommerce, Zen-Cart, as well as forum software, Wiki’s, photo galleries, and other software that makes managing your website easy, all run better on a LAMP stack.

This isn’t to say that all windows hosts are bad. I’ve used EasyCGI in the past, and they run PHP apps very well. In terms of performance, PHP performs as well or better on Windows/IIS, but things like nice permalinks (look at the URL’s on our site) are not available, which means software like TextPatttern won’t run.

Quality Tiers

1. Reliable, High quality hosts. in this category, I’d put Bluehost (inexpensive), Site5 (expensive) in this category. These hosts provide good support, all the free add-ons you’ll ever need, full access to your server, etc.
2. Overly Controlling hosts. I’d definitely put GoDaddy and Yahoo! SmallBiz in this range. Their support is great, but it needs to be, because you’ll be calling them pretty regularly. These hosts deliberately cripple their service, to make their own lives easier. These sites often have custom control panels as well, making it difficult for your “geeky” friends to help you without logging in. It’s controversial, but I’d also put Media Temple in this category, because they bill based on CPU cycles, which isn’t something that makes sense to a lot of people. Since a great many people are installing software like wordpress automatically,
3. Terrible hosts. These are the hosts that will accidentally toss your data, and then charge you to recover it. Support is terrible, and you’ll be calling them often, since even basic features are missing. Startlogic is the most recent of these that I’ve had to deal with. I’ve blotted the rest out of my memory.

How do you tell the difference? Short of personal experience, or reading hundreds of reviews, you can’t. You should read reviews, but it’s better (and easier) to find the opinion of someone you trust. Don’t go googling “Startlogic Sucks”. Those results are worthless. You should be googling for “compare webhosts”, and variations thereof. Hosting review sites will paint a much more accurate picture. If you’re on your own, here are some things to look out for:

• Restrictive storage and bandwidth. These things are cheap. You should look at the numbers and think “How does anyone use that much”? Right now Bluehost is offering 15 Terabytes of bandwidth (transfer), and 1.5 Terabytes of storage. I’ve been known to backup my home computer onto my webserver, just because I don’t know what else to do with the space. Tier 2 & 3 hosts will have numbers that look more reasonable, because they want to scare off the “Power Users“.
• Offering Plesk or vDesk instead of cPanel. It’s not that cPanel is inherently superior (maybe it is from the hosting side, but as a customer, it’s irrelavent). It’s that I’ve never seen vDesk or Plesk as a tier 1 host’s default control panel.
• Additional charges for services that most hosts provide as part of their base package.

Terms of Service

Before you decide on a web host, you should always look at their terms of service. For most people it won’t be an issue, but when it’s an issue, it’s never a small issue. Hosts fall into tiers here as well:

1. Permissive: Hosts who you can be absolutely sure won’t be taking down your website. Clear terms, that clearly state that they only deny service to people who are breaking the law in an actionable manner. A Small Orange has great terms of service in this regard.
2. Boilerplate: The vast majority of hosts have boilerplate Terms, that technically allow them some leeway to take down your content, using words like obscenity, piracy, illegal content, etc. This language is troubling, but for most people, it’s not an issue.
3. Scary: There are some hosts who have terms of service that prohibit hosting anything that they determine to pornographic, content with foul language, and other “moral police” type infringements. The hosts that I remember having these sorts of terms have all changed theirs since I saw these clauses. While you may not be interested in hosting what you think is objectionable content, you may run afoul of what they think is objectionable.

Trust

We list hosting as a service that we provide. What we actually do is manage hosting for our clients, most often hosting their content on our own hosting accounts. Recommending other hosts is not a conflict of interest for us, because we’re not providing the same service. This site is still hosted on Godaddy, but we recommend Bluehost to all our clients, and host several of our related sites there. We do see a small commission of of the Bluehost links in this post, but we’d rather see you choose a good host than make back any of our hosting fees.

I recently ran into some problems vectorizing some images I wanted to use for a logo, and took some time to problem solve, so I’m presenting my findings here in hopes it will save someone a big headache and a lot of stress.

Ok, so I got my image ready in Photoshop and saved it as a .psd, and placed it in Illustrator. See how the image below has a border around it? That’s important. You need to have closed path shapes of course when you vectorize an image, and Illustrator interprets full bleed images as open shapes, so making a ‘border’ from the background layer in Photoshop is an important step. Then I used Object > Live Trace > Make and Convert to Live Paint:

After you do this, make sure you release the paint group. (Object > Live Paint > Release).

The next problem: losing details. Or so it seemed. The trunk of the tree ended up on top of the shadow marks, and I couldn’t find those for a while. So I sent the trunk to the back of the group and turned it into another color so I could see the smaller paths on top:

What you’re seeing here is the next step. I selected all the small shapes on top of the trunk, then the trunk, and used Pathfinder to cut out the smaller path shapes from the trunk shape. You could just make them the same color as the background if you wanted to, but I wanted the most design process flexibility, so I made them as a cut-out.

Here’s one of the concept revisions I used this image for:

I like to see the infiltration of the Flash vector aesthetic offline into video. See this Beck video by Mumbleboy and this Knife video (I’m not sure if it was made with Flash, but it could have been).

Here are a couple videos Jenny Schmid and I made using Flash (she has a fantastic flash website by the way).

Tips: It’s good to start in Flash by making your file 720×480 and 29.97 frames per second (that’s the frame rate of video). I usually just stick to 30fps (and 60fps for any Flash for the web).

Going from vector based to raster/video based can be rough on all those nice crisp vectors. I’ve tried many codecs but the best codec seems to be Animation or Uncompressed. Yes, it takes up a lot of room (about 1GB per minute), but I wouldn’t do it any other way – it keeps compression junk out. To go to Quicktime, go to File > Export > Export Movie, then choose Quicktime for Save as Type, go ahead and hit the Save button, click on Quicktime Settings, then under Video, click on Settings, and choose Animation.

After that, the video compresses well for DVD, or web video using H264 or whatever compression you’d like to use. Don’t forget to compress the sound too! If not, the audio actually ends up taking more bandwidth than the video. I usually use AAC, 128 for the web.