The release of the Nikon D90 and the Canon EOS 5D Mark II saw the introduction of video capture to digital SLRs. This convergence of media acquisition has a lot of people wondering what the future will hold for these kinds of hybrid photo/video devices. A glimpse into a possible future direction for this new category of devices has been announced by RED Digital Cinema. RED is the brainchild of Oakley Sunglasses founder Jim Jannard, and until this announcement, was primarily considered to be a technology company that was focused on revolutionizing the video and cinema industries with its RED ONE video camera. The RED ONE camera was unique because it could shoot video at a resolution of 4,000 pixels (much higher than HD) in a very compact and modular unit. Now it looks like the company has their eye on the digital photography market with their DSMC system (Digital Still and Motion Cameras) that they’re looking to begin releasing in Spring/Summer of 2009.

If I only had a brain
The whole DSMC system revolves around two new camera systems named Scarlet and Epic. Combined, these two systems have a choice of using one of eight different sensors as the “brain” of each device. Conventional wisdom suggests the larger the sensor, the less noise and shallower depth of field you’re likely to have. The 2/3″ sensor is capable of a pretty average 4.9 megapixels. The S35 sensor can do 13.8 megapixels. The FF35 can do 24 megapixels. The Epic 645 sensor can capture 65 megapixels. And the Epic 617 sensor tops out at 261 megapixels—and no, that’s not a typo!

While going through all of the tech specs, I found that the various sensors had a dynamic range of up to 13 or more stops. That’s huge and I think redefines the term high dynamic range (or HDR for short). Right now we can only accomplish HDR by combining multiple exposures, or on the film side, by scanning color negative film (a process I don’t fully understand). These sensors basically capture all of that information right inside the camera from the moment you take a picture or record a piece of footage. In practical terms, it means you’ll never have blown-out highlights again!

Piece by piece
As impressive as the sensors may be, it’s the modularity of the two systems that has most people excited. You start with one of the sensors as your central module and then build the rest of your camera around it, from the handle to the view screen to the lens mount, and everything in between. The cameras are said to be able to take any Nikon and Canon lenses, as well as a special line of RED camera lenses, and Mamiya, Linhof, and ALPA cinema mounts on the high end. This means that your existing investment in lenses is reusable with this system, and if you ever want to trade up to a larger sensor, all you have to do is swap out the central “brain” module while keeping all your other accessories and modules intact. However, none of this will come cheap, with base configurations starting around $3,000 and easily going over $100,000 for the largest sensor with appropriate modules. (You can see a full set of images and tech specs by going to: www.red.com/epic_scarlet.)

With the modular RED DSMC system, you can go from a digital SLR to a high-end cinema camera.

The Adobe workflow
Adobe has announced a long-term partnership with RED Digital Cinema and has released an importer plug-in (currently in beta) bringing native support for RED R3D files to Adobe Premiere Pro CS4, Adobe Encore CS4, and Adobe After Effects CS4. This allows 4K resolution native R3D video files to be dropped straight onto the timeline without transcoding or rewrapping. I would expect (although I don’t have any specific knowledge) that by the time CS5 comes out, all of the other programs (such as Photoshop, Flash, and maybe even Lightroom) will have direct access to the Redcode RAW format that RED uses to capture all of its images for both stills and video. That would certainly make the format easier to work with.

With photography, videography, and cinematography being siblings of the same art form, it was bound to happen that someone would eventually bring all the components of the various disciplines under one roof. While we’re not quite there yet, I’m betting that 10 years from now these types of devices will be common in the hands of artists all over the world. Here’s to an exciting and ever-changing future!

“I don’t think, I feel.” That’s what Keith Richards said about playing guitar onstage in Shine a Light, the Martin Scorsese film of the Rolling Stones’ performance at the Beacon Theatre in New York City. A must-see, in my book!

I like that philosophy and have thought about photography the same way for years. I feel that a photographer must know exactly what all the buttons, knobs, dials, and settings do on a camera so that when he or she sees a shot, the process becomes more about feeling than thinking about the technical side of photography (this must become second nature).

In this column, I’ll share a few of my favorite philosophies about feelings and photography that I’ve gathered over the years. So sit back and don’t think about RAW versus JPEG, white balance, ISO settings, etc. Instead, think about the feel of a photograph.

The camera looks both ways…
When it comes to photographing people, the most important photo tip I can share with you is this: “The camera looks both ways—in picturing the subject, we’re also picturing a part of ourselves.” “Every picture is a self-portrait” is another way of conveying that point. Let me explain:

When you’re looking through your camera’s viewfinder, viewing and framing a subject, if you realize that the feeling, emotion, attitude, and energy you project will be reflected in your subject’s face—and eyes—you’ll get a higher percentage of pictures that you like. That’s because, by your actions, you’re subconsciously directing the subject to mirror the way you feel.

I don’t have to tell you what I was feeling at the moment when I snapped the photo of the Buddhist monk that opens this column. Well, even though I don’t have to tell you, it was a feeling a great respect.

Make pictures, don’t just take pictures
Rather than simply taking pictures—pointing you camera, composing the scene, setting the exposure, and focusing—take your time and make pictures.

Making pictures is not only fun, it’s part of the creative photography process. When you take control, you become the director of the shoot, just as a movie director takes control of the scenes he or she shoots.

In this cowboy portrait, look closely and you’ll notice the reflection of a horse in the cowboy’s sunglasses. That, of course, was no accident. The horse and the cowboy were carefully placed in such a way as to capture the horse’s reflection. The relatively plain background was also no accident. I selected the side of the red barn so that the subject stood out prominently in the scene.

Be aware of body language
Sometimes we get so caught up in the technical aspects of photographing people and their facial expressions that we forget how body language affects how we feel about the subject. Compare these two photographs of a woman I photographed in Marrow Bone Springs, Texas. In the dressed-down photograph, the woman is gripping the post with “man hands.” In the other photograph, she’s holding it in a feminine manner. By the way, the woman is a model, and is actually the person who taught me about man hands.

Portrait vs. environmental portrait
Basically, when you take pictures of a person, you have two choices: You can choose to take a portrait (head or head-and-shoulders shot) or an environmental portrait (a picture that shows the subject in his or her environment). Both types of portraits can be effective, and I often photograph a subject both ways.

The first picture of Taraino women, taken in Amazonas, Brazil, is my favorite environmental portrait from my brief photo session in the village, which lasted only about an hour. Looking at the photograph, you can see the surrounding rainforest, and you also get an idea of the women’s clothing and body painting. Those elements help tell the viewer something about them, where they live, and what it might feel like to live in the location.

Check out this shot. It’s a nice portrait of the woman on the right in the first photograph; however, because we can’t see the environment, we don’t feel as though we’re “on location,” so to speak, with the photographer.

Convey the feeling
Compare these two pictures of some dancers at the Columbia Restaurant in Ybor City, Florida. For one picture, I set my camera on the Program mode and used a flash. It’s not a very creative photograph. But more importantly, it doesn’t convey the beautiful movement of the dancers. Insert G2.jpg

Check out the other shot. Here, I set my camera on Manual, set the shutter speed to 1/6 (a relatively low shutter speed), turned on a flash, and shot. The combination of using a slow shutter speed and the flash helps the viewer to feel the emotion of the scene.

Be there and be aware
Most of the photographers I know agree with this expression: The hardest place to take pictures is in your own backyard. That’s why we travel to different locations around the country and the globe: to get inspired—to feel an affinity with the subject.

I took this picture in Kingdom of Bhutan, which sits on the right shoulder of India. How can you not get inspired and be driven to taking the best possible pictures when experiencing a scene like this one?

So being there in a new, interesting, and inspiring location is important for many photographers. If you can’t get to places like Bhutan, go someplace that’s new to you where something interesting is happening—something that will motivate you to take pictures.

Being aware of everything that’s going on around you is important, too. You must have your radar activated, not only looking for interesting subjects but for interesting scenes. What’s more, you need to anticipate what might happen.

This photograph of the Buddhist monks was the result of my anticipating what might happen. Moments before I took this picture, all the monks were praying inside the temple. I was observing quietly. A bell rang and they all jumped up quite quickly and put on their sandals. I anticipated that they would be outside in a flash, so I dashed outside and grabbed this shot. Being there and being aware will help you get good pictures.

Be yourself—enjoy the moment
I’m sure you’ve heard the expression, “Stop and smell the roses.” When it comes to photography, we need to keep that expression in mind. We need to totally enjoy the moment; however, that usually comes when we have a total and complete understanding of our cameras, so we don’t have to think about the technical side of the creative process (as I mentioned and as Keith Richards suggests). This picture of school children in Lombok, Indonesia, helps convey that point, which is basically to have fun and to enjoy the moment.

Over the past decade, we’ve seen a revolution in the way in which we interact with sites on the Web. A great deal of these changes has been fueled by Flash and other rich media technologies. These days, we think nothing of being on a site that seamlessly incorporates audio, video, and textual content. The traditional, mainstream ideas about user experience and interaction are constantly being challenged, or out-and-out ignored, by a new breed of designers and developers.

The revolution that has taken place on the World Wide Web stands in stark contrast to the world of desktop applications, which has been somewhat stagnant for many years. Desktop applications, for the most part, look and behave very similar to one another. Most consist of different groupings of form elements and menus, and they usually share the same default look and feel for whatever operating system they’re being viewed on. Now let me first say that this is usually preferable so the user has a consistent experience, no matter what they’re doing on the computer. However, there are times when users don’t get the full experience that could be possible if developers had the ability or desire to think outside the box. Apple is probably the best at providing nicely designed, original desktop experiences, but it has been extremely hard for most developers to create similar applications. That is until now.

The world of desktop application development is one that typically required many years of advanced study in languages such as C++, Java, or Objective-C. This put it out of reach for most Web designers and developers, who have a whole set of skills and languages of their own to learn. Adobe recognized that their own community already possessed the potential for creating the next generation of applications for the desktop. This led to the development of Adobe AIR, which sole purpose is to allow the Web design and developer communities to build desktop applications using the skills that they already have.

It’s in the AIR
Adobe AIR is a cross-platform runtime allowing designers and developers to create desktop applications using their existing Web development skills. Okay, so what does that mean? It means that if you’re a Flash developer, you can now build desktop applications using Flash that run exactly the same on Windows, Mac, Linux, and eventually mobile devices. This also holds true for traditional HTML and JavaScript developers. There’s a misconception that AIR requires the use of Flash technology. This is absolutely untrue, as developers have the ability to create desktop applications using nothing more than HTML. Of course, there are advantages to using Flash in your AIR applications, but more on that later.

The other important thing to note about AIR development is that it doesn’t cost you a penny to use it. AIR is simply a runtime that allows you to run Web applications on the desktop and doesn’t require you to buy any additional tools. If you already use Flash for Web development, you can simply use Flash to create your AIR desktop applications. Using Dreamweaver for Web design? No problem. You can simply continue using it to do all of your AIR development. The same holds true for Flex developers using Flex Builder. In fact, you can download the free AIR SDK (software development kit) and write your applications in Notepad or TextMate if you wish, although to make development easier, it’s highly recommended that you use a tool with built-in support for AIR.

After developing your application, just publish it from whatever tool you’re using to an AIR file, then distribute it to the public so that users can install it. There’s no need to provide different versions for different operating systems, as the AIR file can be installed anywhere. The only requirement for installing your application is that the user has the AIR runtime installed on their system. If they don’t, they’ll be prompted to do so during the installation of your application—a very seamless experience.

Limitations of browser-based apps

At this point, you may be wondering why you’d ever want to build a desktop application. It seems that nowadays everything is moving into the browser, so what benefits can be gained by being on the desktop? If we take a look at some of the problems that are encountered when an application runs in a browser, we can discover some of the benefits of AIR applications.

Branding limitations:
No matter how great your brand’s experience is within the browser, it’s still confined within the walls of that browser. Your message will always be enclosed by an unknown number of browser features and chrome. It could be viewed in Firefox with a very minimal set of browser controls, but it also could be viewed in Internet Explorer with a myriad amount of toolbars and buttons infringing on your brand. AIR solves this by breaking out of the browser, allowing you take full control of the look and feel of your application.

Only available online:
This is a huge limitation of Web-based experiences. Your application may be great when the user is connected to the Internet, but as soon as they disconnect or close their browser, your app is no longer available to them. A classic example would be that of airline travel. Your application works nicely while the traveler is in the terminal connected to the free airport Wi-Fi. But as soon as the flight attendant closes the door to the plane, your application is unreachable until the plane lands and another Internet connection can be found. AIR doesn’t suffer this same fate, as your applications work seamlessly regardless of Internet connection.

No operating system integration:
Apps that are run within the browser have very limited access to the user’s operating system. They don’t have the ability to easily read and write files, receive things via drag-and-drop, or accept the full spectrum of keyboard commands. They do what the browser says they can do—and nothing more. With AIR, you’re creating a fully trusted desktop application with the power needed to interact with the user’s operating system, regardless of whether it’s Windows, Mac, or Linux. This often leads people to think that AIR is a security concern. Yes, it’s true that an AIR application could be built that maliciously deletes files from your hard drive; but this is just as easy to do with other desktop technologies such as .NET and Cocoa. So just as you shouldn’t install a traditional desktop application from sources you don’t trust, you should have the same vigilance when it comes to AIR applications.

Limited desktop presence:
This is similar to the first limitation regarding branding. When you run your message in the browser, not only are you surrounded on all sides by the browser, but you also have very limited options when it comes to placing your brand in other areas of the user’s computer. AIR addresses this by allowing you to place your brand in places such as the Dock on Mac systems, the System Tray on Windows, and of course, the user’s desktop. You can set your applications to run at system startup as well as being able to run in the background with no user interface whatsoever.

Now that you’re aware of some of the benefits that can be gained by running outside the browser on the desktop, I want to make it clear that AIR isn’t trying to replace browser-based experiences. AIR is meant to enhance that experience by allowing greater integration with the user’s desktop. As an example, take a movie website. The site is the central place for viewing the trailer, reading the synopsis, and perhaps playing some games associated with the movie. A site like this could take advantage of AIR by allowing users to watch the trailer and play those games while they’re offline. Perhaps the application would pop up a branded desktop alert when the movie begins playing in theaters. The possibilities are endless.

How about some examples

I can write all day long about the benefits of building AIR applications, but let’s take a look at some examples that back up what I’ve been saying. Adobe AIR was officially released in early 2008, and already the community has created a ton of great applications. They range from more-traditional enterprise applications to completely wild branding experiences. Here are just a few of my favorites:

TweetDeck (www.tweetdeck.com)
There are many, many Twitter clients built on AIR but this one is unique. If you’re not familiar with Twitter, it’s a social networking site that allows you to keep track of what your friends are doing right now—a kind of micro-blogging. Even Layers magazine is on Twitter (www.twitter.com/LayersMagazine). With TweetDeck, you can set up various columns of Twitter content, giving you a broader overview of your Twitter feeds. This allows you to stay informed about not just what you and your friends are up to but also the technology community in general—a great way to track current developments. For instance, I can set up a column that shows me every message someone writes with the word “Adobe” in it. Sometimes it’s painful to read, but it’s actually great, uncensored feedback from the community.

DestroyFlickr (www.destroytoday.com/index.php?p=Project&id=DestroyFlickr)
Despite the scary name, this application delivers an amazing experience for viewing your Flickr photos. This application can run in full-screen mode, is very well designed, and includes some really nice transitions between screens. The really cool part of this application is that when you view either your own photos or those of your contacts, you’re actually creating virtual workspaces. At any time, you can zoom out to see a high-level view of all your workspaces and then zoom back in to the one you want to see. Insert

Desktop Keeley (www.thesun.co.uk/desktopkeeley)
This application is a great example of taking a fresh approach to branding. The Sun is a popular British newspaper that’s quite a bit more risqué than the papers I’m used to reading in America. One such risqué feature is the “page 3 girl” that shows scantily clad women in various poses and provides celebrity gossip and other pieces of lighter “news.” The Desktop Keeley AIR application combines a simple RSS newsreader with video clips of Keeley Hazell walking around your desktop in various outfits ranging from conservative to, um, less conservative. At anytime you can Control-click (PC: Right-click) on the application’s icon to make Keeley come out for a visit.

Getting started with AIR

Hopefully, you’re now ready to go right out and start building your own AIR applications, so let’s focus on getting started. One thing you’ll definitely need in order to build AIR applications is the ability to do basic programming in either HTML/JavaScript or ActionScript 3.0. Having said this, you don’t have to be a hardcore developer to build some really cool applications. There are essentially three routes you can take to create AIR applications. Which route you take is primarily based on your existing skills as well as the tools that you’re currently using.

Building HTML and JavaScript AIR applications: If you’re currently a Web designer or developer who uses tools such as Dreamweaver to build HTML-based websites, then you can continue that same workflow to build AIR applications. You don’t have to know or use Flash to create applications with AIR. Dreamweaver users can download a free extension from Adobe at www.adobe.com/products/air/tools that adds support for creating AIR applications.

Once you have the extension installed, creating your first AIR application couldn’t be easier. Let’s say you already have some existing HTML content that you’d like to package into an AIR application. All that’s required is to select Preview in Adobe AIR from the File>Preview in Browser menu. All of the settings for your application can be accessed by choosing AIR Application Settings from the Site menu. Now obviously you’ll more than likely want to take advantage of some of the AIR-specific functionality so that you can better integrate your application with the user’s desktop. For more details on programming AIR applications using Dreamweaver, make sure to visit the Adobe Developer Center (ADC), which focuses specifically on this topic. You can find that by going to www.adobe.com/devnet/air/ajax.

Building AIR applications using Flash:
If you’re currently building Web experiences using Flash, then you’ll be happy to know that Flash is one of the best tools for creating AIR applications. If you’re using Flash CS4, then you already have built-in support for building AIR applications right out of the box. If you’re using Flash CS3, then you’ll want to download a free extension at www.adobe.com/products/air that enables the same functionality.

Much like the Dreamweaver extension, you can turn an existing Flash project into an AIR application by simply changing the publish settings to target Adobe AIR instead of the browser-based Flash Player. New AIR projects can be created by simply choosing Flash File (Adobe AIR) from the Flash Welcome screen. All of the details about how you want your application to look, such as window chrome and icons, can be set by launching the AIR settings dialog from the Flash CS4 Properties inspector.

It’s important to note that you must use ActionScript 3.0 to build AIR applications in either Flash or Flex. This is yet another good reason to upgrade your skills to the new language. To learn more about Flash-specific techniques for building AIR applications, be sure to check out www.adobe.com/devnet/air/flash at the ADC.

Building AIR applications using Flex:
The Flex framework allows developers to quickly create Rich Internet Applications (RIAs) using Flash technology. You can essentially think of Flex as “Flash for developers.” Typically, developers aren’t very comfortable inside Flash because of the abundance of drawing tools and the timeline-based approach to animation. Flex and Flex Builder, which is the Eclipse-based IDE (integrated development environment) for creating Flex applications, are meant to appeal directly to developers who come from backgrounds such as Java and .NET. Flex applications will look and behave more like traditional applications and can utilize an advanced set of components for things such as charting and data visualization.
Adobe AIR is a first-class citizen within Flex Builder 3. When creating a new project, you simply choose Desktop Application (Runs in Adobe AIR) from the New Flex Project dialog. To find out more about building AIR applications with Flex, check out www.adobe.com/devnet/air/flex at the ADC.

Regardless of which route you take, you’ll have the ability to create powerful, unique, desktop applications without the need for learning yet another language. AIR applications can range from simple widgets to full-blown enterprise applications. If you’ve ever said something along the lines of, “I wish someone would make an application that did this,” well you can stop sitting around waiting and just build it yourself.

Client: Mikee – www.mikee.com

There’s nothing wrong with having a history, but you don’t want to be stagnant either.

Mikee makes sauces. According to current VP Sales Adam Kaufman (representing the fifth generation in the food business), the line started in his father’s butcher shop in Queens, New York. The elder Kaufman loved Chinese ribs and was determined to come up with his own recipe. When he delivered food to local Chinese restaurants, he’d peer around their kitchens and make note of the ingredients he saw on the shelves. Then he’d buy the same ingredients and start experimenting with different combinations.

Once he came up with a recipe he liked, he started selling meat already marinated in the sauce. His customers began asking if they could just buy the sauce, and the light bulb went off. He started bottling the sauce, designed a label, and named the new company Mikee, after his nickname. Since that time—about 30 years ago—the line has grown to include more than 30 items, from the original sauce through other Asian sauces (the number one seller is their terriyaki sauce, says Adam Kaufman) to more standard marinades and barbecue sauces. In Adam Kaufman’s words, “It took us 30 years to become an overnight success.”

The product distribution is still primarily retail, but about five years ago, Mikee started selling their sauces over the Web. The purpose of the website, however, is less to build up a mail-order business than to continue to serve loyal customers who may have moved out of their retail distribution area but still want their Mikee marinades. Nevertheless, Kaufman says, he recognizes that the site has to be attractive and functional even if it’s just serving repeat business.

The main thing Kaufman likes about the current site (designed by his wife, who is a designer but not a Web designer) is the underlying concept of a “family” of sauces: Asian, Fisherman’s, Terriyaki, and Specialty. But the site is incomplete, he says, and he’s not sure that it really communicates the nature and character of the business. He’d like a site that’s interesting, fresh, and modern: “There’s nothing wrong with having a history,” he says, “but you don’t want to be stagnant either.” With that in mind, we challenged three designers to whip up a new site to meet Mikee’s tastes.

AFTER

DESIGNER: Ryan Sorenson -www.bozell.com
The main focus of our redesign was usability. There’s nothing worse for a consumer than running into difficulty finding the information they need. Besides the functional problems (much of the navigation didn’t work), the original site is hard to navigate, the homepage only shows portions of the product labels, the images on the product pages are all very small, and the layout distracted from the goal of purchasing. We set out to create a site that’s easy to navigate and puts the product first.

First, we moved the navigation bar to the top of the site, where customers can find it easily, and added a tab to tell visitors exactly where they are. Because the consumer’s first encounter with the product is through the packaging, we featured the bottles large and on a background that complements all the various package designs. We updated the site’s color palette, using a yellow that combines the old yellow and orange and adding a teal to replace the dated bright green. This new palette of yellow, teal, and grays gives the site a more modern feel, complemented by the use of the clean Frutiger font.

We highlighted a few areas with gradients to add to the energy of the design and added a subdued stripe pattern to break up the solid gradient.

Our vision of the product page continues to focus on the sauces and buying. To update the product page, we clearly identified the families of sauces and added shadows behind each product area to give dimension. With a clean design that also shows a little “sauce” of its own (via the vector graphic of a splash in the background), the new Mikee.com site showcases the product—which is what people are looking for.

Because the consumer’s first encounter with the product is through the packaging, we featured the bottles large and on a background that complements all the various package designs.

ABOUT THE DESIGNER

Ryan Sorenson – Bozell
Ryan has always been a winner. At the early age of seven, his soccer team made it to the semifinals of the 1986 Cornhusker State Games. And then in high school, his mom gave him a ribbon proclaiming him “World’s Best Son.”

Ryan holds a Bachelor of Fine Arts from the University of Nebraska and is currently putting his winning attitude to good use as an Art Director for the worldwide advertising firm Bozell in Omaha, Nebraska. He has held several previous art director positions, working for national clients such as Blue Cross Blue Shield, Sue Bee Honey, Gateway, Compact Power, Leupold, First National Bank, and countless regional and local clients.

Ryan’s hobbies include wasting time, playing Nintendo Wii, solving his Rubik’s Cube, and looking through paper sample books. He loves his job, his mom, and tiny puppies.

APPLICATIONS USED: Adobe Photoshop CS3 and Adobe Illustrator CS3

AFTER

DESIGNER: Beth Berst-Gregory – www.sunberst.com
The overwhelming black color of the current site dominates the beautiful packaging design of the product. Additionally, the homepage doesn’t convey that there are four main product lines, each with a distinct theme. Overall the site feels heavy, unbalanced, and without a focus.

My first goal was to create an immediate recognition of what Mikee is: award-winning kosher sauces from Long Island. I also wanted to bring a clean and modern look to the Mikee brand and really let the product stand out against a predominantly white backdrop. I placed a map of Long Island behind the simple product shot to serve both as a design element and a reference to the company’s roots.

The secondary goal was to make it easier to find and buy the product. I highlighted the four main lines within the Mikee sauce collection and added direct product links under each category. Each category is color coded, using colors that harmonize with the product packaging. I set the family names in Present, a font similar to the one used in the logo. Too much Present can be overwhelming, so for my secondary typeface I chose the beloved sans serif Helvetica. Everyone loves Helvetica (just watch the documentary film by Gary Hustwit), and it displays well in most browsers.

For a bit of interest and elegance, I added a subtle Chinese lattice pattern to the background, a nod to Mikee’s predominantly Asian flavor. The new site feels gourmet and modern. More importantly, it communicates what Mikee’s award-winning sauces and marinades are all about.

I wanted to bring a clean and modern look to the Mikee brand and really let the product stand out against a predominantly white backdrop.

ABOUT THE DESIGNER

Beth Berst-Gregory – Sunberst
Born and raised in Illinois, Beth has embraced her artistic journey in life. A graduate of the American Academy of Art Chicago, she received her Associate’s in Commercial Art and has designed and illustrated for a variety of companies, appearing in both Web and print. While she enjoys the thrill of the digital world of graphic and Web design, she counterbalances that with old-school art techniques such as painting and printmaking.

A lover of texture, detail and imperfection, Beth recently received a Diana toy camera and has been trying her hand at experimental lo-fi photography. When she’s not designing, she’s busy cooking, drawing, crafting, and fixing up her tiny Italianate home with her art teacher husband Chad and Blaine, the super mutt.

APPLICATION USED: Adobe Photoshop CS3

AFTER

DESIGNER: Ryan Wagner www.visualrush.com
My goal for the Mikee redesign was to give the website some unique character and make it fun. After hearing about how Mikee got started in the family-run butcher shop, I felt the company history could provide a rich backdrop over which to feature their sauces. Several hours of brainstorming and concepts eventually led to a rustic wood surface with dripping sauce. The deep red, gold, and black color scheme was sampled from Mikee labels across all the lines, and it helps pull the various members of the family together. Actual Mikee bottles were traced in Illustrator to create the silhouette menu running down the left, which offers the visitor a quick, visual way to jump to the four varieties of sauce. I chose to set the main navigation items in Trajan Pro for its sleek condensed look.

Integrating a show/hide menu at the bottom of the homepage that slides up and features all the Mikee sauces gives the site some Web 2 usefulness while gaining SEO points with Google and other search engines.

An occasional newsletter is a great way to communicate with customers, so we added an easy signup box. The photo is part of a rotating Flash banner that would feature delicious dishes made with Mikee sauces, then links to the Recipes area. In this part of the site, customers can upload their own recipes made with Mikee sauces.

The product page was simplified to feature just the sauces. Users can jump directly to any category in the slideout menu to the left, or move through the sauces individually by clicking on the smaller photos. Mikee’s current Zen Cart shopping cart system could be revamped and integrated using a custom CSS template that matches the rest of the new design.

The deep red, gold, and black color scheme was sampled from Mikee labels across all the lines, and it helps pull the various members of the family together.

ABOUT THE DESIGNER

Ryan Wagner – VisualRush
Ryan Wagner is the owner and creative director of VisualRush website and design solutions, a graphics and Web design studio located in Evansville, Indiana.
Using his degree in Advertising and Graphic Design from Murray State University, he has gained diverse graphic experience in newspaper print advertising, Web design, magazine publications, logo design, billboards, and identity branding. His strength lies in keeping his clients focused on maintaining their brand integrity.
After working in the corporate world, Ryan realized his potential as a freelancer and pours every ounce of his creative energy into VisualRush where he helps clients promote their services all over the world.
Owning his own successful company at 32 has allowed him the freedom to spend more time with his wife Heidi and their four beautiful girls.

APPLICATIONS USED: Adobe Photoshop CS3 and Adobe Illustrator CS3

Of all the creative features in Photoshop, there are few that offer the possibilities that the brush engine does. Introduced back in Photoshop 7, this extremely versatile feature has become the indispensable tool for photographers and artists alike. With its wide array of features, you can spend hours just creating special effects brushes in this one panel. Here we’ll examine this small, yet powerful feature and get into creating and modifying our own custom brushes.

All features in all brushes
At first glance, the Brushes panel (Window>Brushes) can seem daunting, but in actuality, it’s pretty straightforward. It’s remarkably intuitive and once you start playing with the settings, I think you’ll agree. First off, Adobe has managed to put all the features related to all brushes in one convenient panel. I say all brushes because not only can you modify the behavior of the standard Brush tool, but also all other tools that use brushes, such as the Clone Stamp, Eraser, Dodge, Burn, Blur, and Smudge, to name a few. You simply select the desired brush tip in the Brushes panel, activate the features you like, and modify the parameters within each option.

When we think of brushes in Photoshop, we tend to think of simple round, hard-, and soft-edged brushes but that’s only the tip of the iceberg: You have the ability to take a simple brush and make it something totally different; you can select from the standard set of brushes or load a number of specialized brushes that come with Photoshop (more on this in a moment); and you can define your own custom brushes using artwork. Once you have a better grasp of how the brush engine works, I guarantee you won’t look at brushes the same way.

A word on presets
As mentioned above, Photoshop comes with a variety of built-in brushes called “presets.” To access any preset, simply open the Brushes panel, click on “Brush Tip Shape” near the top of the list on the left of the dialog, and choose any of the available brushes. Select any size brush tip and then modify its behavior by clicking on the various options in the list on the left.

To load a specialized group of brushes, click on the flyout menu (at the top right of the panel) and toward the bottom of the menu choices, you’ll see several “effects” brushes separated into various categories. Just click on the desired set and a dialog appears where you have the option to either Append that set of brushes to your existing set or Replace the current brushes with these brushes.

When you select a brush, the preview at the bottom of the panel shows the brush on a simple linear path as if someone painted a smooth, continuous stroke. This is because the preset was saved only as a brush tip and its behavior hasn’t been modified using the options at the left of the panel. It’s up to you to modify the brush for your needs.

Another type of preset is known as a “tool preset.” Unlike brush tips, which are only the actual shapes of the brush tips, tool presets are a little more involved. They not only include a defined brush tip but also all of the other parameters set up in the Brushes panel options. It’s important to remember the difference between these two types of presets as they’re handled in different ways.

To access your tool presets, look for the icon of the tool you’re using at the far left of the Options Bar. Click on the down-facing arrow beside the icon and the Tool Preset picker opens—it’s a menu of built-in tool presets. Click on one and you’ll see its various properties in the Brushes panel.

Even though a tool preset has built-in properties, you can modify it even further to your liking and then save it as a New Tool Preset. This gives you the option of creating a custom brush using either a tool preset as a starting point or from scratch.

Custom brush tips
Sometimes you’ll encounter a scenario that demands a special type of brush or perhaps a specific behavior for a brush. Creating a custom brush is simple enough but it’s important to understand how Photoshop defines brushes. And it’s also important to keep in mind that pretty much any graphic element can be defined as a brush—you can even define an entire image as a brush, if you want!

When you tell Photoshop to define a brush it’s going to look at the entire range of tones in your image to determine its overall density. The white areas of your defined brush will be completely transparent and the black (or darkest) areas of the defined brush will be 100% opaque. Any in-between gray tones will have varying degrees of transparency. This is also the case when you define a brush based on a color image. All gray tones closer to black will be more opaque and any tones closer to white will get progressively more transparent. I’d encourage a little practice with this so that you get used to how Photoshop analyzes the pixels when creating a brush.

Brushes in action

So let’s put what we’ve learned into action by creating a custom brush and then applying some specialized properties and then creating a tool preset.

STEP ONE: Create a new document (File>New) with a white Background. For this, I recommend creating a square-shaped document, say 5×5″ inches. What we’re going to create is a stylized scatter brush that will give us a sort of fairy-dust effect. (It’s based on a tutorial I did recently on the NAPP member website.)

CREDIT: ©ISTOCKPHOTO.COM/CEVDET GOKHAN PALAS

STEP TWO: Click on the Create a New Layer icon (at the bottom of the Layers panel) Grab the Lasso tool (L) from the Toolbox and draw a very abstract shape on this layer.
Tip: Draw your “brush” fairly large and then after you define it, size it down in the Brushes panel. If you make it too small, it can lose quality when you try to size it up later in the Brushes panel.

STEP THREE: Now that we’ve created our selection, we need to fill the shape with a color. Just so you can see how the varying tones affect the transparency of a brush, let’s apply a slight gradient to this selection. Select the Gradient tool (G) from the Toolbox and drag a simple Black, White gradient through the selection (this is the third gradient in the Gradient Picker up in the Options Bar). Press Command-D (PC: Ctrl-D) to deselect. (Note: You don’t necessarily have to deselect since you have a white background, but I did it to make a point in the next step.)

STEP FOUR: Many users will first make a selection of a shape before defining it as a brush—but it isn’t always necessary to do so. We learned earlier that when Photoshop defines a brush, it ignores the white area and leaves it transparent. Since our graphic is on a white background in this example, all we need to do is go under the Edit menu and choose Define Brush Preset. You’ll notice in the preview window that only the areas with the various tones of black have been defined as the brush. Name your brush and you’re done.

STEP FIVE: Now that we’ve created our brush tip, we need to modify its behavior in the Brushes panel. First, make sure that the Brush tool (B) is selected in the Toolbox, then open the Brushes panel by clicking the icon at the right-hand side of the Options Bar, or go under the Window menu and choose Brushes. Click on Brush Tip Shape and locate the brush you just created—it should be the last one in the menu.

STEP SIX: Click on the words “Shape Dynamics” in the list on the left-hand side of the Brushes panel to open that menu. Drag the Size Jitter all the way to 100%. If you’re using a pressure-sensitive tablet, go ahead and set the Control to Pen Pressure.

Further down the menu, you’ll see Angle Jitter and Roundness Jitter options; set both of these to 100%, as well. Notice in the preview window at the bottom how the brush changes as you adjust each setting.

STEP SEVEN: Now click on the Scattering option. Make sure that Both Axes is checked on and then just drag the Scatter slider to the right. How much is really a matter of preference, so watch the preview window as you adjust the slider.

All you need to do now is go to a new blank canvas, set your Foreground color swatch (at the bottom of the Toolbox) to the desired color, and start painting with your new brush. If you find the brush not behaving exactly the way you like, just modify the settings and continue.

STEP EIGHT: Now that you’ve applied all these modifications to your brush, there’s a good chance that you’ll want to be able to use them again later. But if you select another brush and change any of the settings in the Brushes panel, you’ll lose all your previous settings, which can be frustrating, especially if you took some time creating that brush. To make sure this doesn’t happen, click on the down-facing arrow beside the tool icon at the far left of the Options Bar to open the Tool Preset picker. Now just click on the right-facing arrow at the top right of the picker to access its flyout menu and choose New Tool Preset. In the dialog, give it a name and click OK. Now, anytime you need that brush with those specific settings, there it is.

The goal here was to give you a better understanding of how the brush engine works—and understanding how something works in Photoshop is half the battle. So now you have the tools necessary to embark on some serious exploration and create some really outrageous brushes. And if you’re feeling ambitious, why not combine your experimentation with layer styles to get some really cool effects. Here’s an example of a scatter brush I created with a modified Bevel and Emboss layer style to achieve a water splash effect—all with just a brush and little creative exploration.

CREDIT: COREY BARKER

Leading is an aspect of white-space management that gets far too little attention. Properly set leading is vital to harmonious page layouts and, more importantly, readability. It’s a key element in the even texture we call “good type color.”

Now, when I use the term, “leading,” I’m using the mainstream definition: the distance, in points, from the baseline of one character to the baseline of the line of text above it. The word comes from the lead alloy used to create the metal stamping blocks in handset type. The vertical dimension of the face of these blocks equals the point size of the type. The computer-type equivalent is the height of the bounding box that surrounds each character you set.

In computer type as in metal type, when you set lines of these character blocks one on top of another with no added intervening space, you’re setting your type solid. When you add space between lines, you’re adding lead. In a solid set, the type’s point size and leading are equal, for example, when 12-point type is set on 12 points of lead. This is typically written 12/12, pronounced “12 on 12.” Adding 1 point of lead gives you 12/13, or “12 on 13.”

Just say “no” to automatic leading
The first step to asserting control over your leading is changing the “automatic leading” value in all your programs. In the absence of a decision by you, this value determines what your leading will be, based on the size of your type. Never surrender this decision to a computer program! But since the “automatic” option exists, you may as well set it to a useful value.
Extreme leading is often used for artistic effect, as in this coffee-table book, but it’s not very useful for normal text. Here, 12-point Fry’s Baskerville is set on 24-points of lead.

In all Adobe programs, the default value for automatic leading is 120% of your type size. Sometimes this may be appropriate, but it’s like having a broken watch: It’s accurate twice a day, but useless the rest of the time. It’s far better to have “automatic” leading default to a logical integer value that’s the same as your type size.
With no documents open, open your program’s Paragraph panel, click on its menu (top right of the panel), and choose Justification. In the Justification dialog, change the Auto Leading value to 100% and click OK. Thenceforth, your automatic leading will produce a solid set. If you forget to specify a leading value, this has the merit of usually being more noticeably wrong than a 120% setting, which may be just close enough to being correct as to go unnoticed.

Getting the lead in
So what leading value should you select? Since there should be harmony among the proportions of all the white space systems on your page—tracking, gutter width, measure (and by inference, margin width)—the answer is, “It depends.” One thing to know is that in most cases, leading measured in whole- or half-point increments serves perfectly well. Using fractions finer than a half-point is really a case of splitting hairs, and is unlikely to accomplish anything.

The most important factor in determining a proper leading value is your type’s measure, or line length. Here’s a handy rule of thumb: When your type size (in points) equals your measure (in picas), a solid set usually works fine; for example, 12-point type over a 12-pica measure. When your measure (in picas) is twice your point size (in points), add 1 point of lead. When this ratio goes to 3:1, add two points of lead. This doesn’t always work, but it will get you close.
There are two reasons to increase leading as you increase your measure. First, the space between lines serves as a path to steer your readers’ eyes from the right margin back to the left so they can start reading the next line. Narrow leading makes this transit more difficult. Second, tight leading in a wide column simply makes the text block look gray and uninviting—suffocating.

The point size you choose makes a lesser difference. As point size increases, so does the amount of negative space in and around the characters. Both character and word spacing appear somewhat looser. The type appears to have more breathing room. This can allow you to use slightly tighter leading in large type. But generally, your choice of point size is related to the measure you use, which brings us back to the previous point.

A more important consideration is the choice of typeface itself. Most seriffed typefaces for text are so-called “old-style,” which have a moderate amount of contrast between their thick and thin strokes and work with the rule-of-thumb for leading outlined above. But so-called “modern” faces, such as Bodoni and Didot, have much greater contrast, with exaggerated thin strokes, giving them a brightness on the page that somewhat diminishes their readability. They also have large counters, the open spaces in characters such as o and a, which give them an airy appearance on the page. Just as these faces suffer from tight tracking, they suffer from tight leading, because this fights against the openness of the letterforms themselves. Adding lead helps.

Likewise, sans-serif faces used in text settings, as on this page, also suffer when set with tight tracking and leading. In this case, it’s because sans-serif faces are inherently somewhat less legible than seriffed faces (serifs provide visual clues for quick character recognition), so tight tracking slows reading. Along with the looser character fitting that typifies sans-serif faces must come looser leading as well.

A character attribute?
In Adobe programs, leading is nominally a character attribute set in the Character panel. But this is badly implemented. To see how badly, select a single character in the middle of a paragraph and double its leading value and you’ll see that the whole line takes on the leading of that single character. Bad! Your supposed character attribute is in fact a line attribute. If leading were properly implemented as a character attribute, doubling that character’s leading would simply push that one character down until its baseline was the specified distance below that of the previous line.

To move single characters up and down like this in Adobe programs, you have to use the Baseline Shift command, which is a half-baked implementation of true character-based leading.

Negative leading
Computerized typesetting introduced negative leading, where your leading value is less than your type’s point size. It’s rarely useful in body text, but it’s often handy in display settings. That’s because as point size increases, white space appears to grow faster than the characters themselves. As “normal” tracking looks too loose in large sizes, so does “normal” leading. As long as ascending and descending characters don’t collide, you can use negative leading to good effect in headlines and titles, especially in all-caps or caps-and-small-caps matter.

One last point: Nobody said leading has to be consistent within a single passage of display type, either. When one line of type lacks ascenders, for example, its leading will appear to be greater than other lines in the text block (as shown here). The absence of ascenders and descenders between the first two lines of the upper sample (set in 24/24 Bodoni Bold) make the leading seem wider than that between the last two lines. In the lower sample, the leading of the second line has been reduced to 22 points, creating the effect of more balanced spacing.
Negative leading in action

Likewise, a line with few or no descenders can make the leading of the following line look too slack. Don’t be afraid to select these lines and (using the so-called character attribute as a line attribute) tweak the leading until the spacing between all the lines looks even. Because in type, what looks right is right.

Key Concepts

To learn more about the following InDesign tools and commands used in this tutorial, visit www.layersmagazine.com/keyconcepts:

• Using the Character Panel: Font Size, Leading, Kerning, Tracking, Vertical Scale, Horizontal Scale, Baseline Shift, and Skew

Whether it’s a logo, a magazine page, or a website, sometimes the things you don’t design are more powerful than the things you do. This is often achieved by the use of negative space. In this article, we’ll teach you what negative space is, how it works, and what benefits it can add to your own designs along with some examples to help you along the way.

What is negative space?
When composing a piece of artwork, we generally work with three elements: the frame, the positive space, and the negative space (also called white space). The frame is the bounding size of the artwork, the positive space is the subject, and the negative space is the empty space around the subject. The three images below will give you a basic understanding of this principle.

The frame—the size in which the object is placed
CREDIT: ©SXC.HU/PAVEL JEDLICKA

The positive space masked in black

The negative space masked in black—notice how the negative space defines and implies the shape of a plane

Negative space helps define a subject, so subjectively speaking, negative space works when there’s a balance between the positive and negative spaces. Negative space also works when it draws the viewer’s eye into the subject at hand.
To show how negative space works, look at this personal logo design for Peter Ryan. Did you notice how the middle of the letter R is cleverly utilized to become the letter P? This has been achieved by reversing out the positive space of the letter P into negative space.

To put the importance of negative space and the frame into perspective, think about this: Do you ever wonder why when you watch a movie at the cinema, it’s more beautiful than if you watch it at home on a square-format TV? The cinematographer has composed the scene knowing that his frame was going to be viewed in the widescreen format of a cinema screen. However, once the movie gets cropped down to the square format of a non-widescreen TV, much of the beauty, negative space, and composition of the scene is lost, making for a less-appealing image.
The point to remember here is if the subject moves in any direction, inside or outside the frame, the shape and amount of negative space will change, so it’s always important to readjust your frame to the subject at hand.

Reproduction of Rubin’s Vase shows negative space as an optical illusion—two faces or a vase?

Why use negative space?
If you work with negative spaces rather than on the subject (positive space), you’ll often end up with a more accurate and aesthetically pleasing design and balanced composition. Let’s look at this picture of a toucan, as it’s an excellent example of negative space. The positive space of the photograph is at the forefront of the design, as you can see in the image where the toucan is masked in black. The positive space consists of not only the bird but also the railing that it’s perched on. The negative space is all the other space that’s not at the forefront of the image.
Did you notice the negative space is actually shapes within a frame? Negative space isn’t the absence of space but rather the space that defines the positive space. These shapes are even easier to see when you turn the negative space upside down.
Take one more look at the image where the positive space is masked in black. Notice how the line of the railing leads us into the image of the toucan. The positive space of the railing guides your eyes to the main subject of the image, the toucan, and then continues on to exit the image. This is achieved because of the relationship of the positive spaces of the railing and the toucan to the negative spaces of the environment in which the photograph was taken.

Frame CREDIT: ©SXC.HU/RONNEY GUIMARAES

Positive space (in black)

Negative space (in black)

Negative space flipped (in black)

Concentrate on the unfamiliar
More often than not when we’re designing something, we start from what we have in our memories. This focus on the positive space rather than the negative space can leave a design that’s not entirely balanced. The best way to take advantage of negative space is when we have to design something that’s difficult or something that’s not very familiar to us. Pretend that you have the lovely task of drawing your grandmother’s beautiful, wrinkly feet. Rather than focusing on the details, such as the wrinkles, toes, and nails, start looking at the unfamiliar negative spaces, such as the spaces between her toes, the distance from the ground of each toe, and the relationship with the edge of the frame (i.e., the piece of paper you’re drawing on).
If you concentrate on the unfamiliar, you’ll stop working on autopilot and become more focused. The result will be a much more accurate and polished illustration. This doesn’t work just for illustration, but all forms of design, so let’s take a look at how to use negative space in a variety of mediums.

Negative space in photography
In photography you’re dealing with aperture, shutter speed, lighting, and focus at every moment, and whether you know it or not, you’re also dealing with negative and positive space. As we discussed earlier, we define negative space as being the empty space around the subject of the image. It’s this space in photography that’s the most crucial aspect in nearly all compositions—having too much or too little negative space can completely ruin a potentially good photograph.
If you’ve been taking photos with your camera and everything is right technically but you feel something is missing, then it could well be your composition. Pay close attention to the negative space around your main subject, as changing the slightest thing can improve or reduce the quality of your photos. Consider this example: The two compositions use different amounts of negative space. The generous use of negative space in the image on the right makes it a much more pleasing image, as it draws the viewer to the subject and stabilizes the image.

Less negative space

More negative space

The best method to learn how to master the use of negative space in photography is to practice. Remember that negative space is always related to the edge of the image (i.e., the frame) and it’s not constant, so you must continually readjust, just as you would your aperture, shutter speed, and lighting. You can also observe the images and designs of others. Have a look through this magazine and see how the photos and ads are put together. How have they used negative space in their designs? Does the cropping (i.e., framing) of the photos add impact to the design? If not, how could you improve them?

Observe shapes around the subject
As touched on earlier, when we compose a drawing, we often create objects based upon our existing knowledge and memories. When we outline something that doesn’t look correct, it proves difficult to change because we keep coming back to the same method of observation: We’re trying to make the drawing look as we remember it, not how the object looks in reality.
To solve this problem we have to observe the negative space, which is something that we’re not normally prone to do. If we observe the shapes around the subject, then this will help us fix our false interpretation of the subject. In theory, if we focus on what doesn’t exist (the negative space), we can more accurately define the boundaries of what does exist.
In this example, we can see a chair even though the chair hasn’t actually been drawn? If you focus on the negative spaces first and then fill in the details, your final illustration will be much more realistic. Another tip for creating more lifelike illustrations is to look at your design mirrored—this will make you look at things in an unfamiliar way, helping you to spot flaws in your design.

Negative space drawing of a chair

Negative space drawing of a chair reversed

Design your website with negative space
In between columns, images, copy, and just about everything else on a website, there’s negative space. It’s our job as designers to maximize this space to its greatest potential so as not to crowd a website. We must use negative space to intelligently organize text and graphics to give visual relief to the user’s eyes, and we can do this by treating negative space as a crucial design element. Take notice of how much spacing is between your margins, columns, images and lines of text to effectively de-clutter your website.
For example, in this mockup website for a watch, generous amounts of negative space convey a sense of good taste and refinement. This amount of negative space may not be appropriate for your design. To guide you in your own designs, take the time to study how other good webpage layouts use negative space.

CREDIT: ©SXC.HU/MELISSA RAMIREZ

It’s creative and cost-saving in logo design
The use of negative space in logo design is probably one of the most cost-saving and creative techniques available to logo designers. Negative space reduces the amount of colors needed to produce a logo, which in the long run means you’ll pay less, as you’re not using as many colors in your print jobs.
The use of negative space in logo designs can also give logos a subtle third dimension, creating a layered look. The best example of this would have to be the FedEx logo. Visit www.fedex.com and take a close look at their logo. Have you ever seen the hidden arrow found in between the letters E and X? If you haven’t noticed it before, then you’ll never look at this logo the same way again. The hidden arrow portrays the speed and precision of the delivery service in a creative, simple, and clever manner.
How could you use negative space in your next logo design? Try turning the company name or part of the symbol into negative space by dropping the color out of that area. Usually, you’ll need some sort of background shape to do this. For example, in the Peter Ryan logo we showed earlier in this article, the letter P has used the letter R as the background to create the negative space.
Finding a creative solution for a logo that incorporates the use of negative space takes a lot of experimentation and sketching; however, it can really pay off, as the finished result will certainly stand out.

Use “white space” in print design
The use of negative space in print design is often called white space—it’s the space that doesn’t hold any content and it’s usually the key aspect of what makes or breaks a design. It’s also worth mentioning that white space doesn’t have to be white. Your background can be any color you wish; however, be sure to leave empty space. The effect will be the same as if the empty space was actually white.
White space in print design is used purely for semiotic value: a presentation that transcends economic values by insisting that the presented image is more important than the paper it’s printed on. For example, take this DL flyer for a fashion product. Straight away you can tell that the edgiest and most valuable fashion product would be the third design. This is achieved by using an unpredictable, asymmetrical balanced composition with a lot of white space, showing that the image is more valuable than the paper itself.

CREDIT: ©SXC.HU/SCOTT SNYDER

Although the other two designs are acceptable examples, they don’t communicate as much prestige and class as the third image. This shows just how much power white space can give to a design.

Although there are numerous ways to apply negative space to a design, the best way to come to grips with the concept is to practice. In the same way martial artists have to spend hours and hours practicing simple techniques, graphic designers have to do the same.