Is Photoshop dead?

Default avatar.
February 14, 2013
Is Photoshop dead?.

Thumbnail

I guess a more suitable title might be ‘is Photoshop still an appropriate tool for designing typography on the web?’ But that lacks the dramatic appeal of the above.

Like many of you, I have always used Photoshop to create mock-up compositions of my designs. For as long as I can remember it has been the industry standard and the software of choice for most designers I have worked with. I have spent weeks designing pixel perfect layouts, grouping elements into hierarchical folders and labelling all of my layers to make the transition from beautiful mock up to code as smooth as possible.

I would be full of enthusiasm, energy and excitement explaining my designs to a developer, toggling layer states on and off to try and illustrate my vision through Photoshop but would always be slightly disappointed as my shiny, polished design was transformed to what I would see in the browser. Sure, it would look like my design… And I kind of recognised the typefaces but it lacked that sharpness that I remembered from my compositions. It wasn’t that the developers hadn’t coded it well, more that the typography I had created in Photoshop had not translated into code.

What you see isn’t always what you get

When choosing fonts there are few things more important than whether a font is easily legible or not. In Photoshop, that is not so much of a problem because everything looks great. It doesn’t matter what font you use, at what size or weight (within reason) as it will render perfectly on screen.

Unfortunately, this does not extend to the browser. Often when viewing my design in the browser, the relationships between elements and type were all wrong. The font sizes and line heights that I had attributed to styles in my photoshop composition would not look the same as they would in the browser. If I had designated a 20 pixel margin above the title in my designs, that distance may have changed as the line height of the header would have an effect on size of the margin, something that would not happen in Photoshop. I would then have to start the long and tedious process of the dreaded ‘design tweaks’.

Everyone hates design tweaks

Trust me it’s not just the developer that shirks at the idea of a designer sitting next to them asking them to ‘increase the body copy line height by two pixels’ then having the developer make the CSS change and commit …. Enter. ‘Actually, 1 pixel smaller’ … Enter. ‘Maybe it was better how it was’. This kind of tweaking of the CSS bit by bit to see the results in real time via the browser is time consuming and not conducive to creativity. The developers quickly get fed up spending the day repeatedly changing what they see as the smallest of details that will make no difference, and designers are not able to experiment by quickly and easily changing typefaces and styles for ones that will render better in the browser.

So what now?

For designers who have an understanding of CSS, you can use tools like Firebug to effectively make your own design tweaks in the browser, noting down all the CSS changes in one document that you can then pass on to a developer to implement. This is effectively the same as sitting with a developer and making CSS changes but far less tedious for the developer and will also allow the designer to experiment further with sizes and styles before making a decision. Although this is a good tool for inspecting and changing parts of the HTML and CSS, you will lose any changes you make as soon as the browser is refreshed, which can be very annoying if you have changed lots of elements and not noted down all your adjustments.

You can use the Firediff plug-in to save a record of all the changes that you make within Firebug, which is great as it saves you having to note every change down in a separate spreadsheet for later. The biggest issue with this method is when you begin to introduce web fonts into the equation as any chosen fonts must be installed to your type kit or they will not appear in the browser. This makes things far more difficult and less free to experiment easily with different fonts as you can’t just quickly trial fonts.

Designing in the browser

Services like Typecast make it much easier for designers to work with web fonts and I pretty much do all my typography for the web using it. It allows you to create typographical mock ups (just like you would in Photoshop) using its visual interface to assign fonts, styles, weights, colours, line height, margin, padding and more to your typography. The best thing about using Typecast is that it is all working within the browser so you are making decisions on type exactly as it will be rendered for the user. Does a certain font not look too hot at 19 pixels? Bump it up to 20 at a click of a button, back down to 19 before finally settling at 18 pixels in size, all done in seconds rather than hours sitting with a developer.

You can use any web fonts from their collections of 23,000 fonts, including Google fonts, Typekit and more in your compositions, which makes experimenting quick and easy (they have recently been purchased by Monotype who own Fonts.com and Myfonts so expect many more fonts on the way soon). Typecast in my opinion introduces a notion of playfulness back into typography as it encourages you to try font variations, which you may never have discovered if they were not so readily available and easily interchangeable as they are.

Another very useful feature of typecast is the ability to view and edit the CSS of your type. You can add background colours and images, hover states, or even transitions by simply editing the CSS panel. Once you are happy with your creation, you can easily export and save the CSS code, which can then be uploaded to your site or sent to a developer and because everything has been designed in the browser it will appear exactly as you intend it to.

You lost me at CSS

Photoshop isn’t the industry standard for nothing, and there will be some of you out there hyperventilating at the thought of dropping it to design in the browser, after all we are creatives not coders. Well, put down the paper bag as there is still a way you can create beautiful typography using web fonts in Photoshop. Extensis have created a plug-in which can be installed to Photoshop versions CS5 and higher that will give you access to all WebINK and Google Web Fonts to use for free, directly inside Photoshop.

This means that you can use any of WebINK or Google’s web fonts in your design compositions as you would any fonts that are installed on your system and they will display roughly the same as it should look in the browser. The plug-in will only give you access to WebINK and Google web fonts at the moment but on the plus side it will automatically update new fonts as they are added to WebINK and Google’s library of fonts.

Photoshop power up

Another valuable plug-in that helps ease the transition between Photoshop compositions and browser compatible CSS is the free, cloud based plug-in from css3ps.com. One of the main reasons that many designers work with Photoshop is the control you have over layers and shape elements. Being able to easily and quickly experiment with shadow, glow, colour, texture, rounded corners and more is almost second nature to most and something that even experienced designers struggle to replicate exactly in the browser. For those, this plug-in is perfect as it lets you create your compositions in the way that you know best but then let's you easily convert your shape's styles into browser compatible CSS3. This method is ideal for designing buttons, navigation or anything else that you may have styled a shape for.

Maybe there still is a role for Photoshop as a tool for designing web layouts but as far as designing typography for the web, applications like Firebug and Typecast have overtaken it. The time it takes to update static compositions just can’t compare with the speed and ease of which you can make changes in the browser. For those of you who just can’t even entertain the idea of designing in the browser, the plug-ins above should at least give Photoshop the boost it needs to stay relevant and help ease the transition.

Do you use Photoshop to design web sites? Is Photoshop going the way of Flash? Let us know in the comments.

Featured image/thumbnail, uses dead image via Shutterstock.

Javier Ghaemi

Javier Ghaemi is a multi-disciplined designer with experience in working across print, web and product design. He has worked on websites for brands such as GQ and Vogue and is excited by responsive design, web fonts and designing for touch devices. Follow him at @onlinedesigner2 or at www.javierghaemi.co.uk.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…