This is a simple guide for all front-end web developers who are not familiar with Adobe Photoshop to help you make your job easier.
For the rest of you who already know Photoshop, I have some tips and tricks that might help you improve your entire coding process.
I think web developers should know as much about design as designers know about HTML/CSS. The designers who send you their PSD usually spend hours on choosing the right colors, designing spacing, typography and all visual effects.
You need to know what’s really important while coding the website and how to use Photoshop in order to correctly take all that information from the design projects.
Here is what I’m going to cover in this guide:
- Setting up the workspace – how to create an efficient environment for your work.
- Spacing – how to measure all spacings.
- Typography – how to take all information about used fonts and their properties.
- Colors – how to easily take any color code that you can use in CSS.
1. Setting up the workspace
Because I do both design and web development I have two different workspace setups in my Photoshop:
Creating your own workspace is super easy. First, let’s see what panels you really need as a web developer:
- Layer Comps
Now, turn off all the other panels and leave only those that you need by selecting/deselecting items under the “Window” menu. Once you’re done and have positioned all the panels the way you like, go to Window -> Workspace -> New Workspace. Next, name your new workspace, for example “Development.”
Now you can switch between the workspaces using the drop-down menu in the right top corner:
Here are some tips on how to correctly measure all the spacing.
First of all, let’s make sure we are operating on pixels. Turn on the ruler (Command + R or CTRL + R) and right click on the ruler to change the units:
Next, let’s turn on the guidelines (Command + ; or CTRL + ;) which might be very helpful. If the designer used the guidelines, you’ll see all the invisible borders that may help you to measure the spacings and define the entire website layout.
The best way to measure the spacings is to use the Rectangular Marquee Tool (M) and Info panel. You can select any area you want and then look at the Info panel to read the dimensions (in CS6 you can read X and Y right next to your cursor which is even easier and faster):
Press Command + D or CTRL + D to quickly remove the selection.
Respect the typography. Designers usually spend a lot of time planning all the font sizes and line heights. Make sure to take the right numbers and use exactly the same fonts in your CSS.
The easiest way to check the font size and line height is to use the Type Tool (T) and click on any text. Your Character panel will show you all the font info while editing the text:
In CS6 you can easily sort the layers by any kind. If you want to quickly see only the text layers, check a small “T” icon in the Layers panel:
There is only one tip I can give you to quickly pick the right hex number of the color you need:
Using the Eyedropper Tool (I), right click on any color you need and choose “Copy color’s hex code.”
Don’t worry about the “Copy color as HTML” option. You will probably never need it, unless you still use HTML 4.0…
There are two external apps/plugins that I found useful:
This app will let you quickly export single PSD layers to external files in PNG, JPG or GIF formats. It’s super easy to use and has many hidden functionalities (thanks to Brad Potter for pointing me to this app).
This is a Photoshop plugin that will let you quickly turn layer effects into CSS3 that you can copy and use in your code. The plugin is not perfect and it’ll slow down your Photoshop while using it but it’s definitely worth trying (thanks to Travis Smith for pointing me to this plugin).
The web developer’s role is to turn the design into a working website while keeping all the design elements exactly how they were designed and approved.
It’s not an easy task since there are many differences between how something is designed and how you can style it in CSS. However, you always want to make sure it’s as close as possible to the original design.
Do you have any Photoshop tips that make your job easier? Share your thoughts in the comments.