Efficient Photoshop for the Web

A recent post on the 37signals blog has prompted me to analyze my own approach to the design and development process of web applications. The article over at signal vs noise entitled Why We Skip Photoshop was an interesting (albeit unsurprising) declaration about the 37signals design approach. While I am inclined to agree with them, I do think that there are specific reasons why foregoing Photoshop works well for them but would not for others.

The 37signals company with their self proclaimed Fortune 5,000,000 status calls for a return to simplicity in terms of form, structure and growth and in turn places greater importance on productivity and select functionality.

In exhibiting this Thoreau-esque ideology their products and interfaces maintain an air of stripped down minimalism in terms of design and features, using very few images, design elements and custom graphics. Products over which they also posses supreme control.

While I personally support this ideology, I can’t agree that it is right for everyone, or even most. Strictly speaking in terms of freelance web design, there are far too many occasions in which Photoshop reaches beyond a mere desired tool into the realm of design necessity in order to accomplish and satisfy the project at hand and all parties involved.

Following is an inclusive and unbiased method for effectively using Photoshop for the web.

1 – Set your colors. In order to keep the mocks you create looking as similar in color to the finished site on the internet, make sure that you have chosen the appropriate color settings. Edit > Color Settings > Settings. North America Web Internet.

2 – Create a preset canvas. Creating a custom canvas preset with standard monitor display sizes can also help simulate the web in a more accurate way. You can set different presets for different projects such as Fluid Width (1100px X 1300px), Fixed Width and so on.

3 – Set up and save your workspace. Each designer has thier own unique way of doing things inside Photoshop, when you’ve established a nice workflow that demands the least amount of time and effort as possible, save your workspace. Window > Workspace > Save Workspace. If you have different preferences for different projects you can save them as individual spaces and revert to them at any time.



4 – Don’t get too caught up in the details. Contrary to popular opinion, healthy time restraints and boundaries can actually work to enhance your creativity and keep you focused. So don’t let yourself spend too significant an amount of time creating a mock in photoshop. Set a timer if you need to and use the program as a means to an end and not as the end result itself. Don’t worry about things like choosing the perfect font and spacing characters, they will most likely look very different once it’s in code anyway.

5 – Think Vector. Keep your shapes flexible and sharp by choosing to work with vectors. Not to mention the time you’ll save when asked to change all the purple flowers to pinks ones.

6 – Slice. The slicing tool can be instrumental in creating unique and distinct icons, buttons and other graphics for the web. To utilize images for the web most efficiently, you need to ask yourself a few questions before you start slicing away.
a. Does this need to be an image or can this be done purely using CSS?
b. JPEGs look alot sharper, but require longer load times. Does this image need to be a jpeg or will a gif work just as well?



A few observations of note:

Non-technical clients love mocks. From my experience most clients don’t understand web lingo and aren’t adept enough to visualize a concept that’s not yet fully realized. They want to see what things will look like before they happen and they don’t really care to see the happenings in between. They’ll have a much easier time visualizing your proposal and understanding a walk through of an illustrated mock then they would looking at a rough image-less HTML/CSS page that doesn’t appeal to them aesthetically.

Some things are just easier to change in a static layout. In some web mediums such as blogging engines, minor design details aren’t so minor when they have to be changed in code. An alteration to a custom layout that’s already integrated into Mephisto is no walk in the park if your client suddenly changes his mind about the tabbed navigation.

Whether or not you choose to use Photoshop as part of your design process is a personal preference. However, there are many designers who do use it for the sheer sake of landing the job or satisfying the particular temperament of the client. The need for this tool is dependent on a great many factors and it’s important to asses each project before jumping directly into Photoshop. It’s certainly not necessary in all situations and if you do have the luxury of foregoing it altogether then by all means do. For the rest of us, efficiency and efficacy in using Photoshop is enough to increase productivity and get the job done.