Web designing has evolved along with the web in the recent years. Many design programs have been developed and acclaimed, but none have been able to achieve the popularity and adulation as Photoshop. Surveys have time and again noted that even though many web designers have gone ahead to create mockups in Adobe Fireworks and Dreamweaver, no design program have succeeded in giving you quite so much control as Adobe Photoshop.
There has been a constant debate on whether Photoshop still rules the roost when it comes to web design – to which some agree that it is still a ‘go-to’ design tool, while some believe that Photoshop is no longer the ‘king of design tools’. Here in this article we will make a detailed study of the various aspect of Photoshop in web design.
Demystifying Photoshop
Photoshop from Adobe is perhaps one of the basic design tools that helps you create graphics from scratch – be it shape, vector, type, fills and effects and much more that offer to building great graphic layouts. However, critics have often referred it as an application that help designers ‘manipulate imagery’. But, what makes them depict that way?
Photoshop lovers have been quick to defend themselves as they reiterate the fact that web browsers were incompetent of directly generating these kinds of effects themselves in the recent past; even though they could display bitmap images impeccably well. So, it was at that time that web designers in their bid to explore graphic design within a browser reached for Photoshop to create visuals, save them as images and use them within a web page. More so, no other design tools makes it so easy to create gradients, shadows, patterns, angles, etc. as does Photoshop.
Photoshop: Then and Now…
Building for the web in the recent times is much more streamlined than earlier (when you had to battle with the relatively complex Dreamweaver); and so also is mocking up a layout in Photoshop much easier. But, what stops you from designing in a graphics application, get approval from the client, and then truly build for the web?
Well, the answer is obvious. Designers today are more comfortable using Photoshop because it offers the fastest way to visualize a hi-fidelity design concept. So, it was more about gauging the final output. Photoshop, unlike its counterparts adapted to the winds of change and understood the design (er) requirements thus ratifying it as the graphic designer’s best friend.
Photoshop – Not Without Limitations
Like any other thing that changes over time, Photoshop’s role in the web designing process is also changing, courtesy the rapid technological developments which have driven enormous change in web design over the recent years. While network providers have expanded to every corner of the world, the advent of smartphones, tablets, and now smart watches have revolutionized the web in a way that considerably transformed our insight as to how we should be designing for it.
Dealing with a Fluid Web
It is a common practice with print designers that they begin with the fixed dimensions of a page, and then design within them. Same when initially designing for the web, it is more like establishing a fixed canvas and then move on working inwards. Then was initiated the approach of ‘responsive web design’ that focused on utilizing fluid layouts that is not fixed, flexible images that can grow and shrink with the layout and CSS Media Queries that allow layouts to change based on the screen size and other factors.
The limitation with Photoshop is that this tool inherently works to fixed boundaries. So, the problem was in presenting a fluid layout as a static snapshot effectively; because in Photoshop shapes, type and objects within its layouts are fixed, while web pages aren’t.
Dealing with Pixel Problem
Every browser a user uses empowers them to set their default type size. While some prefer smaller font size, others might prefer comfortable reading experience with a larger size. Now, this typography is something which Print designers trying to force onto end users as constraints. It is true that browsers (by default) usually set type at 16px; thereby unless stated otherwise by the designer or a user alters the default, the body copy size will remain as such.
This can be prevented by locking down the font-size within a web design (through CSS), but it is found not to be user-friendly. One of the best practices considered in the recent times is to size page elements and typography using ‘ems’ instead of ‘pixels’. They are in fact relative units of measurement that are based on the default font-size. So, in case a browser happens to have a different default font size the whole design can flex in response to that.
Another Pixel problem involves browsers that are rapidly developing these days and it is seen that images are no longer required for many effects on the web. CSS is in fact found to be adept of producing accurate gradients, curves, skewed objects, shadows, alpha transparency, etc. Also, to ensure that websites maintain their sharpness, graphic designers are having to rely more and more on what the browser can render itself. This however, takes an massive portion of what Photoshop actually does out of the equation – producing bitmaps.
Is Flexible Workflow Possible with Photoshop?
Well, we are here discussing is not about an application that fails to fit web design, but a workflow that is no longer appropriate. Here we make an attempt to introspect the fundamental flaws in the Photoshop web design process where we witnessed a penchant to create pixel perfect renderings of web pages before building could even begin.
While there is a natural obsession to get everything going perfect with Photoshop, it is most seen that the ‘real’ serious with perfection arises particularly with the involvement of the client – in their unrelenting demand of making pixel-pushing suggestions – ultimately losing sight of the big picture. So, what you need to do is adopt a modular approach to web design and Photoshop can play an integral part in that.
Start first with the planning stage – gathering information and content, sketch relationships between areas of the website as a whole. This is an essential part of the modular process, but is best carried out away from Photoshop. It is fact that Photoshop compliments better to aesthetics; but cannot really deliver when it comes to describe layouts fluidly. It however works great when it comes to exploring colors, textures, individual element styles, typography, atmosphere and mood.
Choose Whatever Works Best!
So, it is evident that flexible workflow is possible with Photoshop and it offers the best control as well. However, it has to be understood that no design process is inscribed in stone – what works for you might not necessarily work for someone else.