My typical process involves creating a new file—one equal in size to the document I’m working on—and then dragging all the selected layers over. Afterwards, I go through a handful of more time-consuming steps to crop it to the contents.

Thankfully, after some research, I was able to streamline the process. I recorded a Photoshop action to accomplish the task in a single click!

May 14th Update: Now includes an additional action that exports guides to the new file.

Install the Action

Download:

New File From Selected Layer529 bytes

First Step: Select Your Layers

In this case, I want to grab the red shape and the “Flying Standby” logotype.

Second Step: Run the Action

Select the “New File From Selected Layers” action, press the play button.

Voilà!

The layers open up in a new file, cropped to fit around the layers.

HTML5, like it’s predecessor HTML4, is a markup language that provides instructions to web browsers for displaying content. HTML5 contains an assortment of new “tags” or features that browsers can choose to implement. The lauded features are the video and audio tags, and also the support for vector graphics and animations. In theory, these new tags aim to supplant the need for Flash.

Flash developers appear to be making the switch to Javascript and HTML. Although I definitely agree this HTML5 switch is a great thing, there is a need for Flash on the web. I’ve compiled a list of when it’s good practice to use Flash.

Here’s when it’s OK to use Flash:

1. Video

   Flash soars with video because of hardware acceleration and active streaming, two features the HTML5 video tag does not support natively. Hardware acceleration allows Flash to take advantage of additional computing power for smooth video playback and streaming allows for selective playback and browsing in video. Lastly, while Flash works the same cross browser; the HTML5 video tag only excels in Safari and is limited in other browsers implementations.

   

   Anonymous Content - uses Flash 10 video, and HTML5 video for the iPhone/iPad.

2. Microsites

   Brands, creative agencies and movie/television promotions use microsites to create fully immersive experiences for users. Flash is the preferred medium as most of these sites are multimedia heavy and require game-like interactivity. Lastly, due to the inherent nature of Flash as graphic drawing tool, these sites allow for “boundless” design without concern for the technical limitations of HTML5 and CSS3.

   

   The Morphosis Architects microsite is the front-facing companion to their sister site, Morphopedia, which is an HTML archive of all of the studio's work.

3. Infographics

   Nearly anything designed in Photoshop can be achieved in Flash; stackable vectors, knocked-out typography, and simultaneous 2D/3D support. While the HTML5 Canvas tag and SVG libraries are powerful there are many shortcomings. For instance, layering various tag content is extremely difficult in HTML5 with limited computability cross browser (notably Internet Explorer).

   

   The Together Counts homepage uses Flash to the display recent activity of people using the site.

4. Interactive Banner Ads

   Though annoying for some, Flash ads subsidize the cost of “free” content on most websites. Ads must be eye-catching with animation and motion is a critical part of that. Flash is the best tool for this, and digital content publishers are guaranteed 99.6% of users on a desktop will see them.

   

   The Vanguard ads use algorithms in Flash to animate the datasets of the various packages.

5. Desktop Applications

   With Adobe Air and Flash, developers can build applications that run in operating systems (OS X, Windows 7, Ubuntu) without the need for a browser. Certain products that require heavy file transfer (like FTP) perform better outside of a browser, Flash with Air does this quickly and effectively. Lastly, with Air, developers have access to hard components (audio/video devices, drives and inputs) that would be out of reach within a HTML5 browser.

   

   Built with Flash, our clients can use an Adobe Air app to batch upload to their CMS.

6. Multimedia and Audio

   Flash supports both webcam and microphone access, as well as manipulation of the two. An example of this functionality in production is a multitrack audio recorder. A user records music while simultaneously listening to the playback, which demonstrates the power of Flash’s input/output functionality.

   

   My Song To You utilizes the Audio Capabilities of Flash 10.1

7. Games

   Some criticism of Flash games is that the browser was never meant to be a gaming platform—however, there are countless successful games to emerge from world of Flash: Bejeweled, Canabalt, Farmville to name a few. Flash games also have the ability to reach an unprecedented amount of users as a result of social gaming through Facebook.

8. Special UI Elements

   There will always be circumstances where HTML/Javascript won’t cut it. With the recent emergence of game mechanics on the web, certain websites will need to have effects and an animation throughout. When these effects are translated into UI elements, it’s sometimes not feasible to create complex keyframe animations and sound-playback with Javascript. Flash makes it simple for developers to rapidly build out UI elements and be confident that those elements are cross-browser compatible.

   

   Together Counts uses Flash for custom UI

The Grey Area: Full Flash Websites

Most websites don’t need to be entirely Flash. Occasionally, there will be the branded experience that needs to resonate emotionally with users. With the current state of HTML/CSS/Javascript, the technology is limited in what can be built with it. Sometimes these limitations can only be overcome by Flash.

There are still some great and innovative uses of Flash websites on the FWA, but even entries on there are moving to HTML/Javascript. Right now the features in HTML5 are too young to do everything that Flash does, and if web designers aren’t willing to budge and embrace the limitations of HTML5, Flash websites won’t be going anywhere any time soon.

I recently found an article floating around in the design community titled “Why wireframes can hurt your project“. It’s by Sacha Greif, who lists a handful of reasons why the common web designer shouldn’t worry about creating wireframes. To sum it up, he basically states not only do wireframes waste time, they also can negatively affect the designer’s ability to make revisions, therefore hurting the website.

Greif goes on to state that there are new technologies and movements that push wireframes into irrelevancy. He explains that with jQuery, the lean startup movement, and 37Signals, it isn’t necessary anymore to wireframe. What this means is, you should jump into developing and worry about problems when they arise, because you can’t predict how people will be using your website or app. Fair enough, but I still disagree.

When you wireframe before delving into the design, you can quickly map out your website, pages, and pieces of functionality. It ends up being the blueprint. At Use All Five, every project begins with building wireframes. It’s the easiest way to set expectations with the client. Wireframes also allow our development team to commence work before a design is in place.

If we were to jump into design phase immediately, trivial things such as color can hold up the entire process from being signed off by the client. The wireframe brings focus to the functionality, without having to worry about design. The whole idea is to remove subjectivity completely while mapping out the site—we tend to keep design separate from the wireframe phase.

Wireframes give you a clear focus and vision. It’s a manifesto and a todo-list. It can be tempting to dive into a project immediately, but without a clear definition of what the website is, it can end up in production purgatory, with no end in sight.

You shouldn’t also base your website off of a specific technology, it should be designed around an idea. If you use JQuery or Rails without any sort of plan, you’re going to work your design around what technologies can do, rather than finding what technologies will work best for your idea.

Greif’s wireframe alternative is to create a bulleted site map. I think this is an OK idea, but the depth we put into the functionality, page-flow and navigation is worth the extra hours.

Don’t be lazy, plan your website out fully, wireframe, and then get to the fun stuff.

Dan Mall from A List Apart wrote a wonderful post that explains the differences between design and art direction. He gives a clear definition between the two practices: “Art direction gives substance to design. Art direction adds humanity to design.” Basically, art direction is the overall feeling a person experiences when they interact with a touchpoint (such as a website or a magazine). In order to build successful interactions, one must posses the talent of art directing. Art direction is the vision, the story and strategy behind the design. It’s the defined set of rules before one can begin designing.

A great example of where art direction and user experience meets is the Ben the Bodyguard website. The creatives behind the site took the very basic user experience task of a page scroll, and guided a story along with it. As you scroll down the page, Ben the Bodyguard guides you through a grimy street. Text bubbles appear that describe situations that are definitely relatable if you or anyone you know has had anything stolen. When you reach the bottom of the page, it asks for your email address to get notified when the product launches. After being involved in the narrative, it’s difficult to say no to filling out the form. This is the epitome of art direction applied to user interface, which definitely yields a pleasurable user experience.

Another example of a user experience and art direction convergence is the website we built for AIA Los Angeles. Rather than being simply a content driven calendar website of all the architecture spots and events, the site plots everything on a giant google map. The idea is to invoke the feeling of “localization” to the user or member of the association. People recognize roads and landmarks which greatly contextualizes the event listing.

Art direction is about bringing emotion, vision, and clarity to design. When it’s combined with user interface and user experience, it’s a dangerous weapon.

Nebul.us is a social network that serves as a way to visualize and share how you’re spending your time online. It allows people to track their browser history privately and also share content to friends. Feel free to read about the details on the UA5 Nebul.us page. Nebul.us was officially announced by Jason Kincaid on TechCrunch just this past Tuesday (11/3). Other online publications such as Infostetic have since posted their own favorable reviews.

Shortly after the launch, Fast Company picked it up and wrote a comprehensive review about Nebul.us. They had many kind things to say about our design:

“Though the service seems a bit complex, all of its features become intuitively obvious, the second you play with the graphic.” — Cliff Kuang of Fast Company

We’re also proud to announce that we launched a new website for the American Institute of Architects’ Los Angeles branch. The branch includes prestigious members such as Thom Mayne and Frank Gehry. We built the site on top of the Google Map API — the background is a giant map that updates its location based on where calendar or news items are located in the Los Angeles area.

In other news, our client Thom Mayne of Morphosis was recently appointed by President Obama to serve on the President’s Committee on the Arts and Humanities (Link).

There were a lot of new things we had to learn, and after many hours of production we realized we had a lot of tricks that extension developers might not be aware of. We make sure the functionality is perfect, but always focus a lot of time on UI design.

I’ve come up with a list of a few UI things we discovered with firefox that really give a lot of control to the designer, so the plugin doesn’t have to look stale and generic.

Better looking preferences, using a list instead of tabs to navigate.

Initially we build our preferences using the tabbox. This worked, but seemed cumbersome for the user. Then we looked at some of our favorite plugins — we found that the web developer toolbar does a great job with their preferences.

The web developer toolbar uses a listbox rather than tabs for their preference navigation.

They use a listbox that updates an iFrame to hold the preference pane with a little bit of javascript. To make this happen, you’ll need to get your XML to look something like this (you’ll have to do your positioning and wrap it in boxes on your own):

Then the Javascript is simply updates the frame with the selected listitem’s src attribute:

Styling the selected listitem background color

After we created our list, we needed to make it look better. We had no use for the default blue. There’s a simple css trick to adjust this:

This makes the selected and the current states have a blue background. You can add other properties, such as color and what not, but the [selected="true"][current="true"] is what’s important.

Communication between windows

We created a simple Enable/Disable button to allow the user to start and stop the plugin. This would turn a preference to either true/false. The problem was that if there was another Firefox window running, it wouldn’t be smart enough to know if the plugin changed. A simple fix was to make a timer check to see if the preference has changed.

Detect tab change

There’s a quick and easy way to check to see which tab your window is on. All you need to do is a listener on the gBrowser in your js:

Anything can be styled

Firefox gives you 100% control to customize how all of the XUL items look, therefore there aren’t any excuses why your extensions don’t have to look dull!

For further reference, here are bookmarks of Firefox links:

XUL Reference – this will be your best friend.
How to build a Firefox extension
Getting started with extension development
Firefox/Thunderbird Extension Wizard – this will generate a base template to work off of, as well as a unix file to compile it. It’s pretty awesome.
Let’s build an extension — Mozilla’s guide to building firefox extensions.
Dialogs and Prompts – excellent overview on how dialogs and prompts work. Most plugins consist of dialogs, so it’s essential to read over this.

By design, morphopedia.com is structurally transparent and simple to navigate. It adheres to a “more is more,” seemingly free-for-all content strategy that upsets the typical PR conventions of strict control. — Braulio Agnese, Architect Magazine

Read the full article at online at Architect Magazine

We use Pv3d’s MovieMaterial to texture most of our interactive 3D elements. The MovieMaterial is usually made from a sprite with children that could contain links. Pv3d doesn’t render a cursor when you hover over it, but does allow event listeners when you set interactive = true on the MovieMaterial. This gives us room for applying some unconventional methods to give us a nice pointer cursor when moving the mouse over the buttons.

My first idea was to dispatch an event and have my controller class listen and then change the mouse cursor to be an image of a mouse pointer. This ended up really clunky, especially when I have heavy 3D that slows down the frame rate. So the Faux mouse cursor moved very slowly and I axed the idea.

Then I came up with an idea that actually works very smoothly. Instead of loading in a fake cursor that replaces the mouse, I wrote a 2D sprite class that follows the mouse when the mouse hovers over the interactive sprites in 3D. This sprite would then have buttonMode = true so the mouse turns to a pointer. After that I set the sprite’s alpha to 0 so the user sees nothing happening except for their mouse cursor changing. When the user clicks, it hides the sprite so the mouse event inside the 3D material is still active. Just be sure to make your links in 3D on MOUSE_UP instead of MOUSE_CLICK

Download the Cursors.as class

Usage: