BlogmyQuery – BMQ

I’m back in the saddle this week after returning from Build, a conference in Northern Ireland, expertly assembled by Andy McMillan. It was a great event, and a nice way to cap off a busy year of speaking. Build was my last event till 2012. I decided I need some time off to recharge, focus on some other things, not be away from the family, and take a good long while before thinking about diving into Keynote again to construct a fresh talk. Looking forward to attending an event or two in 2011.

Last week Apple released an update for Snow Leopard, bringing Mac OS X to version 10.6.5. In case you missed it, details about the update are available in About the Mac OS X v10.6.5 Update.

This update changed the apachectl script (used to restart Apache from the command line, for instance), causing it to give you an error when you run it. I noticed this when trying to restart Apache after adding a new virtual host:

username:~ username$ sudo apachectl graceful
/usr/sbin/apachectl: line 82: ulimit: open files: cannot modify limit: Invalid argument

Read full post

Posted in Mac.

In this post we will take a drawn design, scan it and clean it up in Photoshop, then trace it using the Live Trace feature in Adobe Illustrator. Live Trace was introduced in Adobe Illustrator CS2 but is still a powerful tool available in Illustrator CS5. This process really gives an artist the freedom to digitally experiment with drawings of any kind. The vector art it produces can be used in numerous ways and is easily customized. My motivation for trying this was originally to make a “growing vine”-type animation in Adobe After Effects. I will show a link to the resulting animation at the end of this tutorial, but for now, let’s get started.

Scan and Clean Up

Scan your sketch and bring the image into Adobe Photoshop. Make sure that the image is Grayscale (Image -> Mode -> Grayscale). Begin by adjusting the image using Image -> Adjust -> Brightness/Contrast -> Levels (Cmd/Ctrl + L)  and/or Curves (Cmd/Ctrl + M) to improve upon the sharpness and contrast if needed. Clean the image using the Eraser Tool (E), trying to get the white areas as clean as possible. Paint the black areas, and alter or redesign any shapes so you are happy with the overall design.

Cleaning up the image is important for getting a good trace in Illustrator. There are a number of techniques that help get rid of unwanted specks and imperfections, here’s the method I used:

Go to Select -> Color Range:

• Sample Colors: Select from drop-down.
• Localized Color Clusters: Leave this deselected in the beginning.
• Fuzziness: Play with this setting to get the edges less, or more, sharp.
• Selection Preview: Select None.
• Invert: Choose this if you would rather preview selected pixels as black instead of white.

Use the Eyedropper Tool to click on your image and to sample the colors you want included. Because we chose the Selection preview (and Invert is not selected), you will see the selected pixels as white, so white = selected. Using the Eyedropper Tool, zoom into your main drawing (Cmd/Ctrl + Scroll) so you can see the pixels you are selecting. View the results on the Color Range preview.

• Add to Sample and Subtract from Sample: Use these Eyedropper Tools (to the right of the main Eyedropper Tool) to select or take away from the preview image.

If you have trouble areas, you can select the Localized Color Clusters box and this will help add or take away from localized areas (not the whole image). When you are happy with the selection, click OK; you should now see dancing ants. Make a new layer and click on that empty layer. Go to Edit -> Fill (Shift + F5) and fill with black.

Turn off your previous layer. The result should be a much cleaner version of your image. It may take a few experimental tries, since every drawing is different. When you are done, save the image as a .PSD file (this is important for editing it later in Illustrator).

Lastly, take the Eraser Tool (E) and separate parts of the image that run together, isolating each component image or shape that you want separated. An alternative is to select small shapes with the Magic Wand Tool (W) and add a 2-4 pixel white stroke (Edit > Stroke) to slightly separate shapes. This is to avoid having large groups of your drawing connected with anchor points when it is converted to vectors. There are methods to cut and separate these areas later (which will be explained), but it’s a good idea to try to achieve this early-on.

Tracing in Illustrator

Open a document in Illustrator and place your clean PSD image. Click on the image to select. Click the small box to the right of the Live Trace button called Tracing Presets and Options and scroll down to Tracing Options.

The Tracing Options dialogue box will open. There are many preset selections to choose from but we’re going to use our own settings to get the best possible trace:

• Check Preview: Now you can see the effects live as you change the settings.
• Check Ignore White: Now the white background is not present.
• Set the Mode: Select Black and White. Leave Raster set to No Image and Vector set to Tracing Results, and check Fills.

Since you can see the results live, it helps to play with the settings a bit to get used to what effect they have. The way to think of the settings is that the left side (Adjustments) resembles Photoshop, and is conditioning the raster image before it is traced; the right side (Trace Settings) resembles Illustrator, and is taking the conditioned rasterized image and converting it to paths. Let’s look at what the most relevant settings do.

• Threshold: This value determines which pixels are white and which are black. Any pixels lighter than the Threshold value are turned white and all pixels darker will become black. For instance, making the threshold higher means that more of the darker pixels will be included in the vector shape.
• Blur: This blurs the original image before its traced, which helps smooth out jagged edges.
• Resample: This may come as a surprise to some, but with Live Trace, a higher resolution doesn’t necessarily translate to a better traced result. In many cases, a high-resolution file can add unwanted complexity to a traced file. So play with this feature to see if your image might do better using a lower resolution.
• Path Fitting: The lower the number/setting, the tighter the image will be traced. If it’s too low you could get a jaggy effect. The higher the number/setting, the smoother the effect, but you lose detail.
• Minimum Area: Defines the minimum area that will be traced, which helps get rid of the imperfections or “dirty” areas you don’t want to capture. This setting determines the pixel minimum area, so anything smaller won’t be traced.
• Corner Angle: Sets the sharpness of the corner angles. The lower the number/setting, the sharper the corners.

When you are happy with the settings, be sure to first Save Preset. This is on the right of the Tracing Options dialogue box and will come in very handy if you need to make some other changes before tracing again. Once you’ve saved, hit Trace. You will then need to hit the Expand button or Object -> Live Trace -> Expand to see the actual results.

Edit and Tweak the Results

Separate Grouped Vector Objects

Be sure to Ungroup (Shift + Cmd/Ctrl + G) (Object > Ungroup) as many times as necessary to make sure everything is ungrouped.

In the above images you can see that I did some editing to my original trace. Some shapes were unwittingly grouped together, despite my efforts in Photoshop to keep them separate. Luckily, should this happen, there are a few easy solutions.

Revise the Original Image:

It is easy to go back and quickly edit your image in Photoshop with a click of a button. The Undo (Cmd/Ctrl + Z) command will need to be applied until you return to the raster image (hence saving the preset, so we can use it again here):

Go to the Links panel (Window > Links) and click on the little pencil icon in the lower right corner. It can now be instantly edited in Photoshop. When the editing is done, close the window and when prompted, choose to update/save the changes in Illustrator. You can now use your preset to re-apply the trace in Illustrator.

Use the Knife Tool:

Another solution is to simply use the Knife Tool (pictured above, it is part of the Eraser group on the tool bar) to cut grouped anchor points apart. It helps to View Outlines (Cmd/Ctrl+Y). You can also hold down Alt to have the knife tool cut a straight line. Zoom in by scrolling while holding Cmd/Ctrl. The Delete Anchor Point Tool (Pen Tool + minus sign) is another tool for deleting anchor points and separating grouped objects.

Live Paint (see “Inspirational Suggestions” section below):

This feature doesn’t actually alter any of the vector groupings; instead it allows the coloring and texturing of any lines or shapes, regardless of how they are grouped.

Reduce the Number of Anchor Points

Live Trace tends to produce an extraneous amount of anchor points in some places. To get rid of some of these we can use the Smooth Tool (pictured in the above image). Click and drag to simplify and reduce the anchor points and to smooth curves.

Touch-Ups

If some shapes did not trace properly (as with the circles in the example below), they can quickly be redrawn. It’s helpful to lock down the original raster art on the background at around 20% opacity.

Final result.

Animated illustration

Design Techniques

At this point you can alter, delete or add to your vector design as you creatively see fit. I experimented with patterns, textures and backgrounds. The main thing is that you now have your art in vector form and can easily alter it in many creative ways. Here are a few brief suggestions for techniques that are useful:

Adobe Kuler

An extension handy for anyone using Illustrator, Adobe Kuler puts a pallet of suggested and popular color combinations that can be added to the swatches panel. This tutorial shows a way to create and load your own Kuler swatches from the Kuler website to your Illustrator library. Another great informational video tutorial: Learn CS4 Design Premium: Using Kuler Color Themes.

Live Paint

Live Paint deserves a tutorial of its own, as there are many features; a quick mention is worth it here, because Live Paint can easily fill in shapes without having to alter the vector groupings:

Select your artwork and go to the Object menu. Select Live Paint > Make. Select the Live Paint Bucket (K) and fill the cells with the desired colors.

Recolor Artwork

Great for playing with color combinations. This feature takes the existing colors and provides complimentary color options which can be viewed instantly. To open the palette, select your artwork and click the little colorful circular button on the top menu, or choose Edit > Edit Colors >Recolor Artwork.  This is pretty intuitive to use, but here is a great tutorial from Mordy Goldman if you’re interested in an in-depth look.

Credits, Links and Resources

• Fridays with Mordy
  I’ve seen Mordy Golding pop up, over and over again, in video tutorials about Illustrator. He has a great deal of valuable information. This link takes you directly to his “Fridays with Mordy: Live Trace in Illustrator” podcast.
• Lynda.com
  This website has many useful video tutorials, including ones on the Live Trace feature. Access them by subscription, or by signing up for their 7-day free trial.
• Creating Vector Content Using Live Trace
  This PDF download has an in-depth description of Live Trace.
• Tweak to Get the Perfect Trace
  From the Adobe website, this gives an in-depth explanation of all the options in the Trace Settings feature.
• Live Trace Tricks in Adobe Illustrator
  This video tutorial from Layers Magazine is more about using Live Trace for color photographs, but I thought I’d include it since it’s a nice variation and describes the Live Paint Bucket feature very well.
• Applying Custom Texture in Illustrator
  This is a nice, simple tutorial for adding textures.

(rk) (ik) (vf)

© Sharon Hart for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: drawing, illustrator, sketch, tracing

by Nousheen Aquil

This post contains 40 varieties of functional jQuery tables plugins that let you achieve the maximum functionality and flexibility that you cannot get with the classic ways of using HTML tables. With the right jQuery plugin, you can create dynamic tables in which users can identify and sort out all the sections they want. These plugins will help you in creating user friendly and dynamic tables with ease.

Useful Tables jQuery Plugins

Visualize: Accessible Charts & Graphs from Table Elements ( Demo | Download )
Visualize is a plugin that can scrape data from an HTML table and generate charts using the HTML 5 Canvas element. This plugin is particularly useful because the data for the visualization already exists in the page in a structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

Using jQuery To Manipulate and Filter Data ( Demo | Download )
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this tutorial, author will go over four techniques: hover effects, zebra rows, filtering, and sorting.

TableRowCheckboxToggle ( Demo | Download )
It generically adds the toggle function to any table rows you specify based on the CSS class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script.

Tablesorter ( Demo | Download )
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

Grider ( Demo | Download )
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way.

Tablify – Fancy Tables ( Demo | Download )
Tablify is a cross-browser JQuery plugin built to extremely simplify beautifying of standard HTML tables. Its advanced configuration options allow all the styles to be completely redesigned according to the website look and feel. Comes with 3 default styles, and 5 more styles in supplied extension.

Creating a “Filterable� Portfolio with jQuery ( Demo | Download )
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, you can learn how to make “filtering by category� a little more interesting with just a little bit of jQuery.

Table Drag and Drop JQuery plugin ( Demo | Download )
Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

List Reorder ( Demo | Download )
List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.

ENHANCED TABLE, JQUERY-UI THEME ROLLER READY ( Demo | Download )
Author have written this jquery plug-in to improve basic usability for a common html table element, which can be the foundation for a larger control or functions applied to the table. This includes the ability to navigate through the rows of a the table by using either the mouse or the keyboard and select one or many rows.

DRAGTABLE ( Demo | Download )
Maybe you want to sort the columns ascending/descending by clicking into the table-head. No problem! Use a handle to drag the rows.

Table Pagination ( Demo | Download )
This jQuery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

ColumnHover ( Demo | Download )
A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

uiTableFilter ( Demo | Download )
jQuery plugin for filtering table rows:

PicNet Table Filter ( Demo | Download )
The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

NReco jSquared ( Demo | Download )
This plugin allows you to organize advanced search user interface like in Google Squared.

HeatColor ( Demo | Download )
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

Expand table rows with jQuery – jExpand plugin ( Demo | Download )
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

DataTables ( Demo | Download )
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Scrollable HTML table plugin for jQuery ( Demo | Download )
This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary.

Flexigrid ( Demo | Download )
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.

JQTreeTable ( Demo | Download )
With this plugin you can have a treeview in your table, users still get the plain table even thought they disable Javascript.

Ingridd ( Demo | Download )
Datagrids don’t have to be difficult to use anymore – say Hi to Ingrid! Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

jQuery ColumnManager plugin ( Demo | Download )
A jQuery-plugin that toggles the visibility of table columns as well as supports the tables with colspans and rowspans.

FireScope Grid ( Demo | Download )
FireScope Grid is an open source (GNU Public License, v2) jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used. Included in the plugin is a navigation bar that is automatically appended at the beginning or end of a table that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.

jqGrid ( Demo | Download )
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

TableFilter ( Demo | Download )

TinySort ( Demo | Download )
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of its children.

Table Drag and Drop JQuery plugin ( Demo | Download )
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Fixed Header Tables ( Demo | Download )
a jQuery plugin by Mark Malek:

KeyTable ( Demo | Download )
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

TableEditor ( Demo | Download )
TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

GraphTable ( Demo | Download )
The graphTable plugin lets you take a simple HTML table and turn the data in it into a graph using jQuery and flot.

jGridEditor ( Demo | Download )
This jQuery plugin allow you to add on-the-flight cell editing functionality in your table You may configure it to perform AJAX queries and returning changed content or error messages.

HTML Table to CSV ( Demo | Download )
This is a small JQuery utility which allows you to export any HTML table as CSV file. It’s a very handy tool to use specially during development of reporting projects. It is also useful when you have some 3rd party JQuery table search plugin attached to your table.

FLOATING HEADER PLUGIN ( Demo | Download )
A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by the settings forceClass and markingClass.

kiketable.rowsizable ( Demo | Download )
This plugin, applied to a number of HTML tables, provides the behaviour of resizing their rows by clicking over a handler/ helper.

Animated table sort ( Demo | Download )
This plugin allows you to animatedly sort a table based on a column’s s, or on the content/value of a child/descendant element within those s. The various s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

READABLE TABLES ( Demo | Download )
A little plugin to highlight rows and columns on tables making them easier to use if you have large amounts of data… So something small for something large!

pfSelect – click drag select for huge datasets ( Demo | Download )
This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class “selectable”) and doesn’t calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.

Sortable Tables ( Demo | Download )
jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).

jQuery Thead – Visible table headers ( Demo | Download )
The jQuery Thead plugin simplifies the navigation in tables that have lots of rows and require scrolling. It enforces the visibility of the table header and ensures that the column names are always accessible for the user.

(ik)