IDEO Labs

The process of making one or hundreds of Illustrator files pixel perfect is a pain in the arse, so here are a few tips to put ointment on that owie. For digital screen based design, I highly suggest using Photoshop or Fireworks over Illustrator. However, there are times when you have no choice but to use Illustrator…and that’s what these tips are for.

1) Move selected items to whole pixels
I created an Illustrator script for moving selected items to the nearest whole pixel (top / left).
Download the script: MoveItemsToNearestPixel.jsx

To install, move the script to your Illustrator scripts folder:
OS X: Applications/Adobe Illustrator CS5/Presets/en_US/Scripts
Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts

2) Make selected items look like they are on whole pixels
Select any or all items you want to look like are on whole pixels and check the Align to Pixel Grid checkbox in the Transform Panel (Shift + F8). This makes things look like they are on whole pixels, even though they might not be.

3) Set up your grids
— Open Illustrator Preferences/Units and set everything to pixels
— Open Illustrator Preferences/Grids & Guides and set Gridlines every to 10 px and Subdivisions to 10
— Enable grid snapping (Command + Shift + “)
— Remember that Preferences are saved on a per-file basis, so get used to checking these

4) Pixel Preview
Pixel Preview is a handy way to see how vectors turn into pixels when you’re zoomed past 100%. Turn this on from the menu View/Pixel Preview (Command + Option + Y).

5) Check Artboards
Artboards are a great for managing pages for flows, but when creating they sometimes are not on whole pixels themselves. Enter Artboard Edit Mode (Shift + O) and check them.

6) Check Symbols & Swatches
Make sure all artwork is on whole pixels before creating Symbols and Swatches. If the original artwork is not on whole pixels during the creation process, than those symbols or swatches will not look pixel perfect when you use them.

7) Pixel pushing windows workflow
If you have to get nitty gritty, open a second window (menu Window/New Window) for the same file, turn Pixel Preview on (Command + Option + Y) and zoom way in. This way, you have the 100% view and a super zoomed in view side by side. It free’s you up from having to zoom in and out so often.

I’m sure by now everyone in the world has seen some ‘hack’ involving a Microsoft Kinect and some clever programming. Microsoft’s Kinect is a computer-vision dream come true; an infrared depth sensor with impressive resolution and a standard RGB video camera. Throw in some microphones for sound capture and you have a force to be reckoned with.

Released in 2010, the Kinect was developed for the Xbox 360 with the technology and legwork done by PrimeSense who wrote the libraries and on-board processing for the vision data. However, soon after it’s release, the Kinect’s USB protocol was hacked and libraries were written for pretty much every programming language under the sun and coders got to work.

With all of the crazy possibilities that the Microsoft Kinect offers, we got a Kinect for the Palo Alto office to play around with and learn about the possibilities it offers for storytelling, prototyping, and straight-up awesome.

I wanted to give a shot at a simple program to demonstrate the basics of the Kinect for a workshop. I thought it’d be fun to make the most bare-bones interaction possible to get peoples’ brains going on the possibilities with this rich of data. The program is a demonstration of the ease of dynamically filtering moving objects based on depth and using these objects to interact with non-physical objects of our choice. You can see the grayscale depth data in the silouhetted person + couch outline in addition to the noisy outline along with some smoothed outlines. The IDEO boxes have their own physical characteristics (weight, friction, etc) and use the person + couch outlines as boundaries for interaction.

All in all, it took a whopping 2-3 hours of coding, most of which was library and driver issues at the beginning, to code this quick demo, so you get a sense of how easy it is to work with in terms of developing.

Information on how it works and links to the source code are provided after the jump.

(more…)

After requests for the Arduino Mini Shield to be made available for purchase, I spoke with SparkFun to see if they could produce and sell the board.   This way people won’t have to go through the hassle of making a board run and populating them themselves.

Today I was pleasantly surprised to see the “Mini FET Board” on the SparkFun new product page!

The new board is almost identical.  It’s missing the battery charger and the jumper that allows you to reroute a button to pin 2 for wakeup from sleep.  However, it’s easy to get and only $20.

We love seeing when our work gets used or repurposed.  It’s part of the reason we started IDEO Labs.  If there are any other projects out there please let us know in the comments!

Buy it here

The original post along with source files can be found here.