Join Over 13,000 Designers and Get My Free Design Tools

Get access to my email newsletter and all of my exclusive design tools, assets, Genesis child themes and more.

Get Free Access
Get Free Access
The Essential Web Design Handbook

Learn to Design Beautiful and Simple Websites

using my simple and proven methods.

The Essential Web Design Handbook is a complete guide to designing simple websites from initial ideas to the final Photoshop project files.

Get The Ebook

Comments

  1. A couple of nice tips there, Rafal. Thanks for the post. There’s so much to forget in Photoshop, and we can definitely get stuck in our own personal work flows which are not always the most efficient. We benefited from your suggestion to use the Info Panel for measurements after selecting a rectangle with the Marquee Tool (M). No more using my screen capture utility to measure boxes and placements…(it sounds like CS6 got it right, finally, with the X and Y dimensions right next to your cursor!) Cheers, Steve & Sally

    • Yes, these are some very basic tips but I realized that some web developers don’t even know how to correctly check text font size, line-height and color in Photoshop. They often guess the numbers 😉

      If your current Photoshop works slow on your computer, you may need to upgrade your hardware before switching to CS6.

      • ^ Dude. I’m VERY guilty at guessing stuff… All the time. Bad developer, bad!! This was the article I needed. I just finished up a pair of photoshop to wp projects and I pretty much sucked at both and was pixel pushing until I was red in the face. Slicy and just the work space setup would have saved me time and same thing with the marquee tool to measure spacing. Brilliant.

  2. Thanks Rafal, posts like this caused me to endorse your ninja skill on linkedin!
    I learned about Slicy (formerly LayerCake) as well as CSSHat by stalking your Twitter feed. :)

    • Thanks Jason!

      I don’t use CSS Hat that much, it’s a bit slow and causes some strange Photoshop behaviors… but I use Slicy every single time I need to slice PSD. Slicy is a perfect app :)

  3. Keep the photoshop productivity tips coming Rafal!
    I just downloaded the CS6 trial and set up my workspace as shown.
    Shame that Slicy is Mac only though. I’ll give cutandslide.me a try though.

  4. Hi, liked the post about photoshop for developers, was curious if you could post some screen shots for the laptop version of your workspaces?

    thanks.

  5. Nice material for developers but, on typography, please don’t put kerning in 0. It looks horrible and completely trashes all the hours the type designers spent tweaking spacing between letter combinations. Use metrics or optical instead. It’s too much of a common mistake, even between designers.

    • Thanks, good point! I often use optical kerning in my designs. It’ll look nice in your Photoshop but there is no easy way to recreate this in CSS (without any tricks) on a dynamic text.

  6. I just completed up a variety of photoshop to wp tasks and I fairly much drawn at both and was pixel forcing until I was red in the experience. Slicy and just the perform area installation would have saved me time and same factor with the marquee device to evaluate area. Amazing.

  7. Rafał,
    Congratulations for all you have achieved so far! I am truly amazed and inpired by you, your work, your bold life decisions. And your tips are really great. My biggest ever thank you for time and headache saving solutions:)
    Greetings from Poland:)

  8. I think converting a .psd to html/css should be the designer’s job. The developer should not have to worry about kerning, line-heights, measurements etc. Most developers don’t have the design training to identify these things, and unless they inspect every little piece of text and layer (which very few do), the design will not transfer well to the web.

  9. It’s a useful post. Thanks a lot. 2 questens:

    1. I use Photoshop CS. when I click ruler a window come called “preference”. In the “unit” section I saw two options: “ruler” and “type”. I changed “ruler” in px. Am I need to change “type” in px? now it is in “points”.

    2. Do you write any post on measuring elements position and spacing when making a web from sratch?

    • 1. If you work on 72dpi, then px or pt for type doesn’t matter. However, if you work on 144dpi (for retina display) then you may want to use pt for type because it’ll let you see actual font sizes that you’ll be using in CSS.

      2. No but it might be a good topic. Thanks.

  10. Such a nicely written article. It’s very helpful!
    I’m trying to better myself in Photoshop… You can’t imagine how much you’ve helped me. So… thanks for the article! Keep writing :)

Leave a Reply

Your email address will not be published. Required fields are marked *