Adobe
Products

Top destinations

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • SiteCatalyst
  • Students
  • Elements family

Adobe Creative Cloud

  • What is Adobe Creative Cloud?
  • Design
  • Web
  • Photography
  • Video
  • Students
  • Teams
  • Enterprise
  • Educational institutions

Design and photography

  • Photoshop
  • Illustrator
  • InDesign
  • Adobe Muse
  • Lightroom

Video

  • Adobe Premiere
  • After Effects

Web development and HTML5

  • Edge Tools & Services [opens in a new window]
  • Dreamweaver
  • Gaming [opens in a new window]

Adobe Marketing Cloud

  • What is Adobe Marketing Cloud?
  • Digital analytics
  • Social marketing
  • Web experience management
  • Testing and targeting
  • Media optimization

Analytics

  • SiteCatalyst
  • Adobe Discover
  • Insight

Social

  • Adobe Social

Experience Manager

  • CQ
  • Scene7

Target

  • Test&Target
  • Recommendations
  • Search&Promote

Media Optimizer

  • AdLens
  • AudienceManager
  • AudienceResearch

Document services

  • Acrobat
  • EchoSign [opens in a new window]
  • FormsCentral [opens in a new window]
  • SendNow [opens in a new window]
  • Acrobat.com [opens in a new window]

Publishing

  • Digital Publishing Suite

  • See all products
Business solutions

By business need

  • Digital analytics
  • Digital publishing
  • Document management
  • Media optimization
  • Social marketing
  • Testing and targeting
  • Video editing and serving
  • Web development [opens in a new window]
  • Web experience management
  • See all business needs

By industry

  • Broadcast
  • Education
  • Financial services
  • Government
  • Publishing
  • Retail
  • See all industries
Support & Learning

I need help

  • Products
  • Adobe Creative Cloud
  • Adobe Marketing Cloud
  • Forums [opens in a new window]

I want to learn

  • Training and tutorials
  • Certification [opens in a new window]
  • Adobe Developer Connection
  • Adobe Design Center
  • Adobe TV [opens in a new window]
  • Adobe Marketing Center
  • Adobe Labs [opens in a new window]
Download
  • Product trials
  • Adobe Flash Player
  • Adobe Reader
  • Adobe AIR
  • See all downloads
Company
  • Careers at Adobe
  • Investor Relations
  • Newsroom
  • Privacy
  • Corporate Social Responsibility
  • Customer Showcase
  • Contact us
  • More company info
Buy
  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers
  • Adobe Marketing Cloud sales [opens in a new window]
Search
 
Info Sign in
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Welcome,
My Adobe
My orders
My information
My preferences
My products and services
Sign out
My cart
Privacy My Adobe
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out Privacy My Adobe
Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change. Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.
Qty:
Purchase requires verification of academic eligibility
Subtotal
Promotions
Estimated shipping
Tax
Calculated at checkout
Total
Review and Checkout
Design Center / Images and graphics /

Adobe Photoshop CS6 and the interface designer

Adobe Photoshop CS6 and the interface designer

Marc Edwards is the director and lead designer at Bjango, an independent Mac and iOS developer company based in Australia. Though he's equally skilled with a range of design software, Adobe® Photoshop® is his weapon of choice for his characteristically clean and detailed icon and interface designs. As Edwards puts it, "When designing for a pixel grid, why not use a tool that's based on a pixel grid?"

We caught up with Edwards just after the release of the Photoshop CS6 public beta to gauge his reaction to the many design-centric features and tools that are part of this release.

Edwards co-hosts the Iterate podcast and speaks at conferences about interface design for mobile devices. These efforts, plus his extensive commercial work, place him in a unique position to critique Photoshop CS6 as a design tool. "Even before I became aware of the new features in Photoshop CS6, I had been blogging extensively about the features I believed should be in the release. I compiled a CS6 wish list, suggested features and tweaks on the Photoshop feedback site, and basically bugged anyone who'd listen."

Edwards is too modest to suggest that his ideas contributed directly to the extensive range of new and revamped design features in Photoshop CS6, but it's amazing how many ideas he detailed are there. "For me, it is an indication that Adobe listens to its customers," says Edwards. "I'm sure I'm not the only one suggesting these ideas, and it is terrific to see how such feedback builds a better and more usable tool."

He adds, "The killer feature for me is the way that Photoshop CS6 now handles pixel snapping." Before Photoshop CS6, designers had to employ a series of workarounds to ensure their designs stayed sharp when overlaid on the rigid constraints of the pixel grid structure that underpins design for mobile devices and the web. Edwards adds, “Being sure that your artwork stays put, locked to the grid, is critical for sharp and crisp icons. Especially when you need to create different versions of different dimensions.” When you add in the new vector shape abilities, stroke options, layer management, interface improvements, and type controls, he concludes, "If you design for screen, value your time, and can afford it, I definitely recommend upgrading."

Marc Edwards' top Photoshop CS6 features for interface designers

Layer searching

Layer searching

Edwards uses the new layer search and filtering options to quickly isolate individual layers based on layer type, name, color, effect, mode, and attribute. To speed up the process of reworking base artwork for different pixel dimensions, he colors the layers that need attention during resizing and then filters the Layers panel to display only the entries he needs to edit. "When you are dealing with complex designs consisting of many layers,” says Edwards, "being able to search for specific layers quickly and easily really helps my workflow."

Vector pixel snapping

Vector pixel snapping

A major improvement for any designer who has to create illustrations within the constraints of a fixed pixel grid is the pixel snapping feature in Photoshop CS6. There's no longer a need for the complex workarounds that were necessary in previous versions of Photoshop. Says Edwards, "These changes alone are worth the upgrade price for me."

The key features are Align Edges, which is found in the Options bar of all vector tools and can be applied on a per-layer basis, and Snap Vector Tools and Transforms to Pixel Grid, which is a general Photoshop setting you select in the Preferences panel. The features work in different ways: Align Edges snaps the edge of an object to the pixel grid, while the Preferences option snaps all newly created and edited vector content to the grid.

Layer styles for groups

Layer styles for groups

Layer styles can now be applied to layer groups as well as individual layers. This lets you quickly apply the same style across multiple layers, or create more complex designs by mixing in some individually applied styles. According to Edwards, "You can now have two or more drop shadows by nesting layers inside groups and applying layer styles to the groups."

Clipping masks for groups

Clipping masks for groups

Clipping masks can be applied to groups just as easily as to individual layers. “This allows for some pretty wild masking possibilities,” says Edwards. And when used in conjunction with group-applied layer styles, the new masking abilities can really speed up workflows.

Shape attribute copy and paste

Shape attribute copy and paste

Right-click any vector layer and choose Copy Shape Attributes from the menu to store the fill and stroke settings in a separate clipboard to your regular image clipboard. Then select one or more layers and choose Paste Shape Attributes to apply the settings to the layers.

Paragraph and Character Styles

Paragraph and Character Styles

With Photoshop CS6, you now have the same kind of text control that page layout programs like Adobe InDesign® have. Photoshop CS6 includes a new Type menu for extra text options, plus dedicated panels for creating Character and Paragraph Styles and adjusting their settings. "You can even edit the master styles and have all instances in your design update," says Edwards.

 

Stroke on paths

Stroke on paths

Designers will find the new stroke options extremely useful. "These are very handy; you can use the vector strokes in combination with the stroke layer style for stroke-on-stroke action," says Edwards. You can even create custom dashed-stroke styles and save them as a new stroke preset.

On-canvas info display

On-canvas info display

As part of the interface changes in Photoshop CS6, small information pop-ups are displayed near the cursor when using a variety of tools. The content changes depending on the current tool and action. “Far easier than watching the info panel out of the corner of your eye while you work,” says Edwards.

New Crop tool

New Crop tool

The Crop tool has been completely revamped in Photoshop CS6. The document moves and rotates beneath the crop overlay rather than the other way around. Says Edwards, "It's a little hard to explain the difference, but it's better, once you get used to it."

Multilayer Blend Mode changes

You can make quick changes across several layers at a time by multiselecting the layer entries and then choosing a new Blend Mode setting.

Other key Photoshop CS6 features for interface designers:

  • Pixel boundary alignment when pasting from Adobe Illustrator® software
  • Precise rotation of vector layers by 90◦, 180◦, and 270◦
  • A Create dialog box for generating shapes of exact sizes
  • New dithered gradient layer styles
  • Gradient layer scaling to 1000%
  • 00 shortcut to set layer opacity to 0%
  • Shift-00 shortcut to set fill opacity to 0%
  • Command/Control J duplicating
  • Better shape renaming
  • Tabbing while renaming layers
  • Merging shapes
  • Multiple layer locking
  • "Lorem ipsum" filler text
  • Automatic recovery
  • Background saving

Author info

philip-andrews-198x198

Philip Andrews

Philip Andrews is an accomplished publisher, author, technologist, and photographic professional.

Technology used
Photoshop
Adobe Photoshop
Try it now ›

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print

Related content

New and reengineered design tools in Photoshop CS6

New and reengineered design tools in Photoshop CS6 file

Learn about some of the new tools in Photoshop CS6 that will help you create superior designs faster.

Paragraph and character styles in Photoshop CS6

Paragraph and character styles in Photoshop CS6 file

Adobe Digital Imaging Evangelist Julieanne Kost explores the new type features in Photoshop CS6.

Top 10 timesaving enhancements to layers in Photoshop CS6

Top 10 timesaving enhancements to layers in Photoshop CS6 file

Adobe Digital Imaging Evangelist Julieanne Kost shares the top 10 enhancements to the Layers panel in Photoshop CS6.

All-new crop tool in Photoshop CS6

All-new crop tool in Photoshop CS6 file

Crop images faster and with greater precision using the all-new, nondestructive Crop tool.

What's new in Photoshop CS6

What's new in Photoshop CS6 file

Bryan O'Neil Hughes provides an overview of Photoshop CS6.

Products

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • Digital Publishing Suite
  • Elements family
  • SiteCatalyst
  • For education

Download

  • Product trials
  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR

Support & Learning

  • Product help
  • Forums

Buy

  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Ad Choices

Reviewed by TRUSTe: site privacy statement