1980k 2/24/15 1980k 2/24/15

25 Years of Photoshop

To celebrate the tool that has helped shape creativity, artists from all over the world contributed their most amazing dreams-and their working files with layers. These PSDs were then animated layer by layer to create a film made in Photoshop. #Photoshop25

1980k 12/10/14 1980k 12/10/14

Adobe MAX 2014 Opening Video

For the 2014 Adobe Max Creativity Conference, the design and execution team, led by Jeremy Nichols of Pix Productions, with projection mapping provided by WorldStage. The scenic plays on two periaktoi, one of the oldest known staging techniques to change a scene and utilizing motion projection mapping to display video. This was intended to bring together the oldest scenic technology with the newest projection technology to create something altogether new.

1980k 1/14/14 1980k 1/14/14

Is Photoshop Still Industry Standard?

I guess a more appropriate title would be “Should Photoshop Still Be Industry Standard?“. Like a lot of people, I’ve been an avid fan of Photoshop for quite some time now. It’s been my go-to tool for the best part of 10 years for a range of purposes, from photography to web design.

When I was in high-school, I can still remember my first introduction to Photoshop. As with most high-schools, nicknames were thrown around a lot at my school. Creatively, most of the connotations related to an animal that we best represented, either visually, characteristically, or in some cases derivative of perceived-natural body odours.

One day, I started using Photoshop to visualize these characters. I started gathering photos of my class-mates, crudely attaching their faces to the various animals they ‘represented’. They were an instant hit, met with verbal accolades of the highest order. I would print them on paper at home and bring a new one to school every week, or send them around via MSN Messenger. My classmates couldn’t wait for the next iteration.

While your introduction to Photoshop may not have been met with the same social-gratification, most designers use Photoshop for a similar reason, It’s what we’re used to and what we feel most comfortable using.

So why the long story you ask? What’s it got to do with this article? The reminiscence helps emphasise something. Photoshop, in all its glory, is still predominately a photo editing application.

The Problem

Workflows are a subjective topic, and often a highly personalized process depending on your circumstances. So there’s never a ‘one size fits all’ solution. However this doesn’t mean we can’t think critically about it.

Don’t get me wrong here, I love using Photoshop. It’s a great tool and for me, it’s been my go-to design application for quite some time. It gives me the creative freedom and tools I need to feel I have control over my designs. However, for the purposes of web design, it’s becoming more of liability and less of an asset. Here’s why.

Photoshop Is Raster Based

Although not the most important, it’s one the reasons. Why use a raster based application (which is resolution dependant) to design something that eventually won’t be. A large part of the web renders through browser-engine algorithm resulting in a fluid vector-like visualization, not bitmap or raster based where pixels are fixed.

“But Photoshop has vector tools!”. Sure it does, but they are still based on the Photoshop engine, which is pixel-based, not vector based. Not only does Photoshop have little vector-output support, but the UI (canvas) is raster based.

The web is increasingly moving away from low-resolution raster based output, with flat design being one of the biggest influences. It can be quite common these days to visit or design a website a website that (besides images) has absolutely no raster-based output at all, including icons.

Photoshop Isn’t All That “Pixels-Perfect”

The phrase “pixel perfect” gets thrown around the design community a lot. It’s a kind of “I’m a cool designer that knows what I’m talking about” buzzword. You throw it into a sentence and it looks like you know what you’re talking about. Unfortunately, it’s an often misinterpreted concept.

Traditionally, design has dictated development. The capabilities and creativity of design software have predominately eclipsed those of web language. So the attitude has always been, “The design looks like this on Photoshop, make sure it looks EXACTLY the same on the web” – Pixel Perfect.

If you’re a web developer or a ‘hybrid designer’ like me, you’ll know exactly what I mean. I can tell you Photoshop is a real pain for development. Web development is based on code that has very little room for inaccuracy. So why design on an application that not only produces visually inaccurate representations for the web, but is based on an engine that’s resolution dependant, with resolution dependant output. If you want ‘pixel perfect’, design in Illustrator.

Designing From A Different Perspective

I’ve always designed from the WYSIWYG perspective. As in design to your wildest dreams in Photoshop, and make it look the same in development. However this methodology is becoming increasingly archaic. The web has certain constraints, however like the saying goes, “Where some see adversity, others see opportunity”. Working with-the-web is a whole lot more productive than working against it. For me Photoshop is a far-cry from doing this.

Ultimately, the design will be rendered in a browser, through mostly CSS styling, which is bound by a completely different environment than that of Photoshop. The web is rendered via a device-resolution that’s dictated by the viewing device. This is most evident in flat design, in which the majority of rendering is handled server side in the browser. As the web moves towards an ever increasing browser-rendered state, raster based-design seems progressively inappropriate.

The Web is Fluid. Photoshop Is Static

This is currently a major issue for designers and one I find really important. A big part of the issue lies in the massive and rapid technological advancements that have driven major changes in both web design and development over recent years. The internet has grown from a static layout, to a highly interactive and user-experience driven collection of pages and applications.

So many designers still design from a purely visual perspective; however we need to consider a lot more than just static elements nowadays. Pages are fluid, designs are adaptive and interactivity is now a major design concern. Ultimately, we no longer use the web the way we used to, so why design it the same way?

Assets Are No Longer Assets

Traditionally, web development was design-dependant, with assets from Photoshop being an integral part of the process – images, icons, measurements and comps – all based on pixels. However this design-development relationship isn’t as reliant on design assets anymore. These days, a final product relies much less on assets from the graphics application, with most of the work being rendered through mark-up styling via CSS.

For example, let’s say I design a website in Photoshop. Very little, if any of the data is actually transferable to the web. Unless your developer slices the PSD elements, in which case I’d advise you to get a new developer.

Changing Work-flows

Having considered all this, unfortunately, it’s difficult to find a better solution, other than Adobe Illustrator. Adobe has released it’s Edge Tools, which are aimed at rapid prototype development, however they still rely on the traditional design workflow of starting off in Photoshop. Fireworks was a short-lived solution, but Adobe has discontinued any further development since CS6. There’s been a number of “rapid prototyping” applications released lately, however most of them focus on a PSD->Browser workflow. It would be nice to have an application that combines both, a browser render-engine based design in conjunction with the prototype.

Working in Illustrator has its draw backs, however being able to create multiple art-boards in one document (for responsive design and UI setup) is a big advantage. Furthermore its vector engine and output means not only the design, but the data can be transferable to the web. Unfortunately, like Photoshop, it doesn’t cater to any interactive requirements.

A traditional web design workflow might look something like this:

old_workflow

Unfortunately the process from PSD -> Web Prototype is a lengthy and largely incompatible workflow.

A proposed workflow could look something like this:

new_workflow

Use What Works

Ultimately, when it comes to design tools, there’s no right or wrong. It’s all about using what feels most comfortable and makes sense to you as a designer. If you feel more creative in Photoshop, use it. There’s no reason to change workflows just because somebody says it’s not right. That being said, I would love to see a browser-based hybrid application that incorporates the power and creative freedom of a graphic design application, with editable web-output, kind of like Illustrator with a code editor.

http://www.pencilscoop.com/2013/12/is-photoshop-still-industry-standard/

1980k 12/5/13 1980k 12/5/13

13 Quick Tips for Designers

Here’s a collection of useful tips to help save you some time. These are not big, detailed tutorials, just quick and easy tips that take a few seconds and are worth knowing – no matter how long you’ve been designing.

Tip for Sharper Circles

When working with tiny pixel shapes it’s very important to get the right sharpness on an image. This is incredibly difficult when you’re working with circles and round corners. This tip from Isaac Grant shows us one way to avoid the messy pixels. It’s simple, but I’d never considered it!

Copy Color’s Hex Code

Copy Color’s Hex Code. I only recently learnt of this feature. A very small tip that could save you a lot of time in the long-run.

Harmonious Color Schemes

Erica Schoonmaker shows us how to build Harmonious Color Schemes. She has a quick tip on Dribbble, but there’s also a 3 Minute Video that goes into a little more detail. A very useful tip for working with colour.

Enrich Colors with Gradient Maps

Enrich Color palette with Gradient Maps is a tip from Jimena Catalina that works brilliantly for photos and illustrations.

Proper Border Radius

Proper Border Radius. When placing a round corner box inside of another, it’s important that you adjust the border radius to offset the distance between them. Here’s one quick way of understanding, and doing that.

Shaping Textfields in Photoshop

Shaping Textfields in Photoshop is a tip that I wish I’d have known sooner. It’s a lot easier to do than it seems and it comes in handy a lot!

The Power of Gradient Maps

Bjango gives us a lovely run down of what Gradient Maps are, and how they can be used with a lot more accuracy and control. I’ve always loved Gradient Maps as a Photo Effect, but I find myself using them more and more lately in UI design, this post on Bjango opened my eyes for sure.

Expand and collapse all layers

A very quick tip to help you quickly tidy your layers & groups. I do this just before saving my PSD to make it easier to explore when I re-open it.

Double Exposure Photographs

How to Create Double Exposure Photographs in Photoshop. Not exactly a tip, but a very quick and easy technique to learn.

Correct Pixel Snapping

Pixel Snapping alone is helpful, but when using complex shapes, and re-sizing them, the pixel snapping doesn’t snap those transformations very well, and you get messy pixels. This simple keyboard shortcut fixes that with ease! Watch now.

Isolation Mode in Photoshop CC

A little gem that can help make your life easier when working on complex .psd files with tons of layers. Isolation Mode unclutters your Layers panel by only displaying the layers you’re currently working on.

Photoshop Tricks and Shortcuts

Photoshop Layers tricks and shortcuts is a very nice round up of time saving tips and keyboard shortcuts inside Photoshop.

Bonus: Photoshop Etiquette

Photoshop Etiquette is a complete guide of the most effective way to do things in Photoshop. Nobody likes inheriting muddy PSDs, and Photoshop Etiquette’s purpose is to help you improve the clarity of yours.

Source

1980k 11/18/13 1980k 11/18/13

Adobe Explores the Future of Responsive Digital Layout with National Geographic Content

Update (5/21/13): To see the mobile prototype, check out Creating an Installed Application Experience on Mobile With Web Technologies.

National Geographic partnered with Adobe, sharing select content for Adobe’s use to experiment with digital layout. The results mark the beginning of a technical and design collaboration that will look at innovating around layout while responding to some of the real world needs of National Geographic’s designers. By combining a National Geographic feature entitled “Forest Giant” with some of Adobe’s contributions to web standards, Adobe has created a forward-looking vision of how readers will consume web content in the very near future.

Configuration

Because some of the features the demo uses are still experimental, the article needs to be viewed in Chrome Canary with two runtime flags enabled.

Learn how to enable flags in Canary to view CSS Regions, CSS Exclusions and CSS Custom Filters.

To learn more about enabling runtime flags, see this tutorial.

Once you have Chrome Canary installed and properly configured, go check out the demo. (Note that the entire project is open source and available on GitHub.) Of course, if you’re in a hurry, you can always just watch the video above to get a feel for the experience.

Editor’s Marks

Some of the advantages of modern layout capabilities can be subtle, so we created an “editor’s overlay” mode which highlights the more noteworthy features and explains how they were implemented. To enable editor’s marks, click on the bar at the bottom of the article (or just press the tilde key).

Regions

In order to have better control over the flow of the article, we used CSS regions. At its core, regions allows you to separate your content from where and how it gets displayed. Specifically, it allows you to designate which part of your DOM is your content, and which elements your content should flow through. The flow of the content happens automatically, adjusting for things like font size changes, resizing, zooming, etc.

In the “Forest Giant” demo, we use regions to make the content flow throughout the page in interesting ways, even creating shallow columns in one instance. Without regions, the designer would have had to break the content up manually, and would have to make major adjustments to the entire page if the content ever changed. With regions, the content is automatically broken up across various elements as the source text flows through the specified region chain.

Regions are also an excellent tool for responsive design. When you change the size and/or position of your regions in response to changes in screen size, your content automatically reflows through your region chain.

Learn more about CSS Regions.

Exclusions

CSS Exclusions allow text to flow along either the inside or the outside of a shape. Take a look at the drop cap at the beginning of the article. Without exclusions, the text to the right of the “O” would be vertically aligned, creating uneven spacing. By using exclusions — and specifically shape-outside — the text is able to follow the contour of the initial letter creating a much cleaner and far more polished visual effect.

Another example of exclusions is the text at the bottom of the article. Notice how the paragraph follows the shape of the map. This type of high-end layout was not formerly possible with HTML content. Without exclusions, the best way to do this on the web would probably be through the use of images, however you then lose the ability for your text to be resized, indexed, searched, copied, and easily updated.

Learn more about CSS Exclusions.

Balanced Text

The concept of balanced text is fairly subtle, but once you’re aware of it, you’ll find that it makes a huge difference in the way your content is laid out. By default, browsers wrap text one word at a time which means you can easily end up with lines containing only one or two words while the line above it might stretch the entire length of your container. Although this is something we’re pretty accustomed to seeing on the web, it’s not a layout that would ever be permitted in print. When designers have full control over how lines of text are broken up, they will balance the text such that every line is approximately the same length.

We’re using a balanced text polyfill for both the subtitle of the article, and the pull quote between the second and third paragraphs. To see how it works, try resizing your browser horizontally. If you have a wide enough monitor, you should see the entire pull quote on one line. As you decrease the width of your window, you will see that the text always wraps in such a way as to keep the lines close to the same width.

Learn more about Balanced Text.

Custom Filters

Most of us are accustomed to applying filters to images in applications like Photoshop and Instagram. And if you’ve used SVG on the web extensively, you’ve probably also experimented with SVG filters. Now you can apply the same visual effects to any HTML elements using CSS Filters.

The advantages of filters are:

They can be applied dynamically which means you don’t have to preprocess your assets.
You can apply them to any HTML element (not just images).
They can be animated with CSS Animations.

We’re using a custom filter at the bottom of the article to allow users to “peel back” the bottom of the page and expose an interactive infographic (click on the “Explore the President Tree” text to see the filter in action). The effect is a subtle but fun way to create a sense of depth in the content, and is achieved entirely through CSS.

Learn more about CSS Custom Filters.

WebGL

Because the “Forest Giant” article is about the second largest tree in the world (but probably the biggest in terms of mass), we wanted to convey a sense of size. If you click on the “Click Here to Pan & Zoom” link below the thumbnail of the giant sequoia, you’ll see a huge image of the tree assembled tile-by-tile until you reach the top. Try scrolling around the image and note how small the three scientists appear in relation to the tree they are studying.

This effect is accomplished with WebGL (through a library called three.js). Although WebGL is not a specification or implementation that Adobe is contributing to directly, we’re a big fan, and it was the perfect technology for building a smooth 3D animation.

Learn more about WebGL.

Conclusion

Advances in technology have proven many times that convenience often trumps fidelity. For example, MP3s became popular — even at their initial low bitrates — because it was more important for us to have all of our music available wherever we were than it was to have the best possible audio quality. Similarly, digital books, magazines, and newspapers are replacing their analog counterparts at an increasing rate because convenient and instant access to content frequently supersedes aesthetics.

Now that the internet has helped to make content ubiquitous, we’re starting to see a shift back toward production value. Users want HD video, beautiful and fluid user interfaces, and they increasingly expect content to be presented in interesting and compelling ways. With features like regions, exclusions, balanced text, custom filers, and WebGL, content producers will no longer have to choose between reach and design. Working with National Geographic’s stunning visual content, Adobe has proven that the web of tomorrow will enable both.

http://blogs.adobe.com/webplatform/2013/05/06/adobe-explores-the-future-of-responsive-digital-layout-with-national-geographic-content/

1980k 11/18/13 1980k 11/18/13

Repurposing Photoshop for the Web

Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of thoseold-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

No matter which version you had, undoubtedly you know someone who can “trump” you by having adopted an earlier version. We designers take much pride in this, in case you hadn’t noticed.

One of these likely makes you nostalgic. (Image: Design You Trust)

It’s not a stretch to say that Photoshop was once regarded as the quintessential Web design tool, a sign that its fandom reached more than just photographers. Refrigerator magnets, pillows and eventattoos have shown homage to the unmistakable UI. Let’s face it: Photoshop is the software we’re identified with, and its place in Web design history is substantial.

I was careful to choose the word “history” there because that’s what it’s seemingly becoming.

(Smashing’s note: If you enjoy reading our articles, you’ll love our Smashing eBook Library. Get immediate access to all Smashing eBooks with 70% discount and vote on the topics you’d like to learn more about. You won’t be disappointed. Learn more…)

Falling Out Of Love

Yes, unlike anything else in the realm of Web design, we collectively have a love-hate relationship with Adobe’s flagship software. While we love it for the common aptitude and experience we share, we hate it for its shortcomings. The pain points of using Photoshop to design for the Web are well documented and support the staunch anti-Photoshopian’s cause to remove it from their process. In fact, complaining about Photoshop has become so commonplace that it’s not just a rite of passage, but rather the signature of a true Web designer.

As our needs changed, Photoshop couldn’t quite keep up. (Image: Derrick Diemont)

THE SOFTWARE’S PAIN POINTS

Crashes
True story: about 95% of instances of Mac OS X’s beach ball (or, as I affectionately refer to it, the pinwheel of doom) occur while using Photoshop. OK, so I can’t back that up with actual data, but I venture to say this is a common experience, especially for those of us attempting to “Save for Web.” Familiar with that nauseous feeling you get when the program hangs and you haven’t saved in a long time? Yeah, that alone makes you rethink using Photoshop.
Text rendering
I’ve always found rendering the most basic of fonts as anything like the browser ends up doing to be incredibly difficult for Photoshop. Helvetica ends up looking like a mess, and coming close usually takes much tinkering with a few settings. This wouldn’t be problematic, except that the goal of comping is to show an accurate representation of what a website will look like.
Lack of interactivity
At the end of the day, designing static comps doesn’t adequately translate how elements are intended to behave through interaction. When presenting comps to the client, discussing these points is possible, but that’s less than ideal for complex interaction. I’ve found myself using terms like “If you can imagine…” far too often in an attempt to show something as simple as a hover state.
Expense
While we hem and haw over whether to buy an icon set for $5, realize that Photoshop is far and away the most expensive piece of software in the common Web design toolset. A new purchase of it will run you $700 USD. Upgrades help, and Creative Cloud has been nothing short of genius, but the investment in Photoshop is still monstrous compared to that of wireframing tools, code editors and FTP clients.

THE PROCESS’ PAIN POINTS

Expectations
The environment of Photoshop provides complete design control, because every pixel we manipulate can be exported to our expectations. When we actually develop for the Web, browsers aren’t as predicable (I can think of one in particular that’s none to kind, but I digress). No manner of fixes or hacks will produce an exact match of our Photoshop comp.
Presentation
When attempting to convey responsive Web design, presenting static comps of full pages is less than ideal. The options are few and difficult: create numerous sizes of a single page, or try to explain verbally how a design will shift. I find neither to be practical or completely accurate, because innumerable device sizes are in the wild.
Double the effort
A Photoshop comp is a visual representation of what a website or app could be, but not a functional one. This becomes problematic in the scope of effort required, with a comp being produced and then reproduced through Web technology (HTML, CSS and JavaScript). Additionally, the detail of the production is quite considerable — static comps are typically pixel-perfect and fully fleshed out, and front-end development carries the same goal.
The big reveal
Ever worked hard on a design, spent hours polishing that last drop shadow on a button, exported a JPEG and then gotten nervous five minutes before a meeting because you have no assurances on whether the client will even understand the comp, much less like it? That’s true with many presentations, but the Big Reveal exacerbates this feeling. When your design process doesn’t include sharing any work in progress when comping, naturally it will lead up to a huge moment when you finally tell them to open a file or click a link. Wouldn’t it be nice if the client was involved in style-related decisions earlier than this?

Photoshop Misunderstood

Is it really a battle between tools?

OK, I think we’ve thoroughly bashed Photoshop enough at this point, although it’s important to realize where your tools fall short so that you can adapt (if you haven’t already). While there are plenty of jimmy-rigged workarounds to the aforementioned pains, and the right combination of settings will potentially ease those pains, there should be an easier way.

The most significant response has been to design directly in the browser. CSS3 provides many of the style elements that we had in Photoshop (such as rounded corners, drop shadows and gradients), and preprocessors such as LESS and Sass are great ways to speed up our workflow. These have become so popular, in fact, that there’s been much clamoring about trashing Photoshop altogether and using HTML and CSS exclusively, from start to finish.

Let’s not go overboard, right?

An important distinction is made by some designers that’s worth noting: the browser is the delivery vehicle of our designs, while image editors serve the purpose of creative exploration. Just because we have the ability in code to replicate what an image editor can output doesn’t mean it’s always the best environment for it. Those of us who learned Web design through Photoshop (or Fireworks) find value in being able to transform design elements without the abstraction of a text editor and, for the most part, have gotten quite good at it.

“As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation.”

– Designing in the Browser Is Not the Answer written by Andy Budd.

The notion that image editors have no place in our workflows is also faulty in this regard: we’ve purposed them to have a particular and quite heavy focus in our workflow. We’ve used Photoshop as the canvas for our design, when it’s apparent that the browser is better suited because it’s ultimately where the design will live. However, Photoshop still has worth, and arguably much worth, in our processes, just not as the canvas. Confused? That’s OK. I’ll explain.

A workflow you may be familiar with is such: sketch, wireframe, produce the visual design in a graphics editor, develop said design in HTML and CSS. Skipping Photoshop assumes that we “design” in the HTML and CSS phase. The tricky part in doing that is determining what a suitable design deliverable is, which we’ll get to momentarily. Naturally, the question becomes, What do we do with Photoshop, now that we’re in the browser?

PHOTOSHOP AS A HIGH-FIDELITY SKETCH PAD

What if Photoshop were used as a high-fidelity sketch pad? (Image: Kyrie Eleison)

I propose that an image editor is still handy when executing design via HTML and CSS, and it has everything to do with sketching. An essential part of the “old” way, where we produced the design comp in Photoshop, is that we were allowed to experiment in a “visual” environment. Photoshop allows you to directly manipulate the very foundations of design: line, shape, text and color.

While HTML and CSS are great for executing the design, experimentation is abstracted because code isn’t directly manipulating any design foundation. It’s a layer removed. This isn’t to say that good design can’t come from a code-only approach; rather that the experimentation of design finds a natural home in an image editor, which may be helpful to many of you who, like myself, prefer such an arena.

Consequently, I’m in favor of a yin and yang approach, leveraging Photoshop for what it’s good for (experimentation), and code for what it’s good for (implementation). For me, leaving one out of the party makes it difficult to be creative and practical when designing. Avoiding code and producing full-page comps in Photoshop, while great for some, gives me headaches when considering responsive Web design and having to reproduce entire pages again in HTML and CSS. However, skipping Photoshop altogether puts me face to face with the browser for design, which works for some elements (navigation bars, blocks of text), while other elements pose a creative stumbling block (“hero graphic” banners and their headlines, sidebar calls to action).

It’s a balancing act. I don’t think you can say, “Design everything in the browser,” just like you can’t say, “Never get into the code.”

– Jason VanLue

For today’s Web design process, I view Photoshop as a high-fidelity sketchpad: expensive, I realize, but it does everything we need it to and we’ve used it for ages. It’s a tool that we’re quite proficient and efficient at. Whereas it used to be our literal canvas, Photoshop can now become our “palette,” as the browser becomes the canvas. We prototype designs in the browser, but turn to Photoshop every so often to ideate, and eventually implement those quick creations in code, concurrently.

Are you still using Photoshop as a canvas? Try using it as a palette.

“I still use Photoshop, but I use it differently. It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation.”

– Where to Start written by Trent Walton.

Getting Responsively Unstuck With Page Layers

A far too familiar situation is designing in the browser and getting stuck figuring out what to do in those strange in-between widths. Confining the content to a single column works for the narrowest width, and your hypothetical wider four-column design gets really squished at 500 pixels or so. I continually find myself in this mode of coding a bunch of potential solutions, none of which looks intentional. Same for you?

Here’s an idea: use Photoshop. I know that everything probably exists in the browser, instead of the full-page comps that we said were so problematic. Who would ever want to build a website only to have to make a version of the semi-finished product in Photoshop? Well, what I’m about to suggest will sound completely backwards. Hang tight!

Page Layers is a unique app that could find its way into your workflow.

I’ve gotten used to a tool named Page Layers to do the work for me. I’m sure you’ve heard of PSD-to-HTML tools, but this one is HTML-to-PSD! At first, I had no idea what I would ever use this for. Then it dawned on me that those moments when I’m stuck designing in the browser and would be better off using Photoshop to directly manipulate some things (i.e. without fiddling with CSS) is a perfect use of Page Layers.

Quite simply, you load the website that you’re working on in the app, at the width you’re having some difficulty with, drag the PSD icon to your desktop, and fire it up. The app gives you a PSD with all of the page elements on separate layers, making it easy to experiment with. I’m still getting my head around it, and it’s not without its flaws. Creator Ralf Ebert says that text and vector interpretation is tricky but hopefully on the way.

Deliverables

This might sound good in theory, but what do you show to a client for approval if you’re going to be using a combination of Photoshop “sketches” and the browser? Glad you asked.

Before we delve into methods of delivery, the important lesson in any of them is that the client should be involved in the design process much earlier than they would have been otherwise. To some extent, the Big Reveal can’t be avoided, because any time you present a visual design for the first time, a certain “unveiling” takes place. However, we can focus our clients on specific objectives if we involve them early enough, such as approving the layout in a wireframe or prototype, or approving styles in any of the formats discussed below.

STYLE TILES

Style Tiles are based on a concept pioneered by Samantha Warren, who likens them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Designed in Photoshop, they are a variety of visual “tiles,” each containing styles for headings, subheadings, link text, buttons, colors, patterns and backgrounds. In delivering Style Tiles, the focus is on approving style, independent of layout and form (for example, responsive Web design). The emphasis is on iterating to find a suitable style to become the “system” of a website, and not on a pixel-perfect layout that will need to be redone in HTML and CSS. In doing so, a significant amount of time is saved from having to edit multiple full-page comps.

Samantha Warren’s Style Tiles are a great approach, leveraging Photoshop for discussions about style.

For many, this approach keeps the ideation squarely in Photoshop, which is familiar and comfortable. If there’s a knock on this approach, it’s that Style Tiles do require a bit of vision on the part of the client. Granted, setting proper expectations will help to bridge the gap, although for some chains of approval, communicating how the tiles “represent” the final product can be difficult.

STYLE PROTOTYPES

I hinted at this approach earlier, so here’s an attempt to spell it out plainly. Referring to our wireframes, we begin by identifying which elements and content are crucial to the visual language of the website. For example, the logo, main navigation bar, hero graphic and location-finding widget may all be uniquely styled elements, whereas the main blocks of text and the sidebar links wouldn’t be as integral to the visual impact of the page, per se.

They might look like full-page comps, but Style Prototypes just leverage important brand and modular elements. (Image: Dave Rupert)

I believe this deliverable should be in the browser and should be responsive. In my experience with using Style Prototypes, I’ve tried not to get hung up on fixing small inaccuracies that occur at certain breakpoints or on cross-browser bugs, because the objective is to gain approval on a design direction. The conversations, both internally and with the client, are steered to assess style only.

The main benefit of this approach is that it generally transitions into the final build of the website remarkably well, yet providing entire pages wasn’t necessary. Photoshop is truly a sketch pad here, because the deliverable is an HTML and CSS document. That said, one disadvantage of this method is that if you don’t define how much you’ll be mocking up, it’s easy to get carried away and include elements that contribute little to the look of the website, using more time and resources than necessary.

ELEMENT COLLAGES

Arising from his recent redesign project for Reading Is Fundamental, Dan Mall has offered an interesting approach in Element Collages. Those who feel most comfortable using Photoshop to work out these ideas can simply export a JPEG, while those who feel the browser enables them to better express the ideas can make a prototype.

This format represents how I begin to think about designing a site. I often have ideas for pieces of a site in bursts. A full comp often requires ideas to be fully realized. An element collage allows me to document a thought at any state of realization and move on to the next.

– Dan Mall, “Element Collages”

What’s great about this approach is that it brings a comfortable amount of context to Style Tiles by executing those styles on particular elements. If working through ideas in the browser proves to be problematic this early in the process, then Element Collages done entirely in Photoshop are a great alternative to Style Prototypes. Any way you look at it, it’s another approach that circumvents having to make static full-page comps early on for approval.

The folks at Clearleft have employed Element Collages as a deliverable of responsive Web design.

Whatever approach you use for design deliverables, the idea I’m proposing is to repurpose Photoshop’s role into something that helps you have a discussion of style far removed from specific discussions of page layout and content. Multi-device design dictates that we design systems, not specific page layouts. We can use Photoshop to create reusable assets and ideas simultaneously with browser deliverables such as prototypes. But remember, without setting proper expectations with the client, any new method will become confusing compared to any previous Web design experiences they’ve had.

Tools

If the idea is to move quickly between Photoshop and the browser, then Photoshop’s default settings and interface leave something to be desired. Thankfully, a wide range of tools, extensions, actions and apps exist that will help.

SLICY

Using “Save for Web” can be an arduous process, one that doesn’t always produce usable results. I recommend getting Slicy, which exports your layers to files independently. If you’re using Photoshop to create assets for the browser, this is your tool.

WEBINK WEB FONT PLUGIN

If nothing else, WebInk’s Webfont Plugin will save you the few bucks of buying desktop fonts for comps.

Remember when we were knocking Photoshop for its type rendering? What’s worse is that there’s no way to try out fonts from your Web font subscription in anything other than the browser. Thankfully, Extensis’ WebInk service has a plugin that gives you access to its library as you experiment in Photoshop.

BJANGO IOS ACTIONS

Unequivocally “the mother lode of time-saving actions,” this list from Marc Edwards will make your life much, much easier. If it’s useful, it’s included: a panel of the most-used Photoshop tools, scaling a document by 200% or 50%, testing for color-blindness and much more. It’s free, so there’s really no reason not to have it.

CSS HAT OR CSS3PS

Until recently, Photoshop didn’t have a way to export CSS attributes for the elements you create (admittedly, Fireworks has, but I digress). If you don’t have the latest version, then CSS Hat andCSS3Ps are solid alternatives. If you do have CS6, the differences between the built-in feature and these plugins isn’t much, although the plugins might take longer to display results and are also more accurate at times.

LAYERVAULT

Famously flat designed, LayerVault boosts production through collaboration.

When Photoshop becomes your sketch pad rather than your canvas, like pages, you can bet more PSDs will be lying around. LayerVault is a great app for collaborating and sharing your ideas before they hit the browser.

WEBZAP

If you’re looking to experiment with layout in Photoshop, then the WebZap plugin makes comping incredibly speedy. You can choose from a number of predetermined layouts for elements such as headers, navigation and footers. If you work with Element Collages, WebZap is a great tool for getting down a quick baseline of each element so that you can get right into styling.

PIXELDROPR

PixelDropr is like an ammo holder for Photoshop.

Part of being fleet of hand between Photoshop and the browser is creating reusable assets.PixelDropr is a fantastic plugin that enables you to drag and drop assets (icons, buttons, photos, etc.) from a panel onto your document.

INVISION

For some, static comps are still a viable design deliverable, but they need some basic interactivity. InVision is an app that turns your static comps into “Protocomps.” Even when the comp is just a few elements, using InVision is a quick and efficient way to make it interactive.

Repurposing Fireworks, Sketch, Pixelmator, Etc.

The principle of “refining your tools” certainly isn’t isolated to Photoshop. Any image editor, when used to fit your workflow (instead of vice versa), can be a wonderfully liberating and powerful tool. All Web design apps have their shortcomings, and Photoshop perhaps most famously so.

Yet the fault lies not in our software, but rather in how we integrate it into our workflows. I suppose even when the Ultimate Web Design App comes along, most of us will find something wrong with it. Why? Because we’ve learned to be resourceful and make our tools work for us, whichever tools they are. The right tool, used for the right purpose, at the right time, is more valuable than one that tries to be too many things.

So, Is Photoshop Really Dead?

I could switch code editors, computers, wireframing tools, browser plugins, and more, but I’d be pretty sunk if I had to do a project without Photoshop.

– Dan Mall

I truly believe that, for some of us, Photoshop is an indispensable tool that still has a purpose in our Web design workflows. I tip my hat to those designers who can stay creative using only the browser, but I know I’m not one of them. Whatever tools you use, there are two takeaways I feel strongly about: don’t let anyone stop you from using them, and continue to refine them in ways that support how you work. It’s important that we share how we approach responsive design for those who, like myself, are still trying to figure it out.

Photoshop isn’t dead, but the way you used to use it might be.