Do you create your design in Photoshop or Notepad?

Wouter Bos — Wed, 06 Jan 2010 23:22:14 +0000

Recently Meagan Fisher published an article in which she discusses an alternative way to present a web design to a client: Don’t emulate it in Photoshop, but build it in HTML and CSS. There are some advantages to it. A client can see more than just the design. He/she can also see:

Behaviour of the fluid design
Interaction like hovers
How the website looks in different browsers

On top of it, she also mentions some disadvantages of using Photoshop:

It crashes, leaving you with hours of work lost.
Font rendering sucks

Photoshop is still king

Although creating a website directly in HTML has it advantages, I think designing in Photoshop is better in most cases.

Photoshop is faster

Yes, a simple design could well be created directly in HTML. But not all designs are simple. Changing a background color is easy in CSS, but dragging columns around, changing or altering visuals and all kind of other alterations are quicker in Photoshop. Designs can change dramatically before it is finally approved by the client. Those changes are quicker done in Photoshop.

Photoshop is static

Being static isn’t not just a disadvantage. A static design is in fact helpful because it helps you focus on how a website should look like and not be bogged down by browser incompatibilities. This too gives you extra speed in designing.

Photoshop is versatile

Just because CSS can do stuff like round corners and text shadows in some browsers, doesn’t mean it has become a designing tool. Photoshop can do more than just that. When designing in HTML I start to think too much in the constraints that both HTML and CSS have. In Photoshop I have much more design choices. Because of that I’m able to think more out of the box.

Crashes and font rendering

I was suprised that Photoshop crashes are mentioned as a major problem. I consider Photoshop as a very reliable product. The only problem is that saving can take a while, so not everyone saves regularly. If you don’t save regularly you’re asking for trouble. Even with stable products.

The issue with font rendering is indeed a problem, but that’s more an issue for designers. Clients don’t even know it’s an issue. They’ll only notice differences when they’re dramatic like with webfonts. Just compare this weblog between Apple Safari and IE on the PC: it’s hard not to see the difference.

My preference

Since I’m a web developer I ought to be tempted to skip Photoshop and start coding right away. But that’s not the case. I designed my blog twice last year. In both cases I chose to do the basic design in Photoshop. Only when I was happy with that basic design, I started developing and added extra elements on the fly. The current design of my blog could just as easy be built in HTML/CSS from the start, but I’m convinced it’s better to work in Photoshop first.

Differences between Photoshop web design and HTML. Part 1: line height

Wouter Bos — Sat, 26 Dec 2009 00:41:15 +0000

Photoshop is *the* tool for designing websites. To illustrate its popularity: In my 10 years in web development I hardly encountered anything else. Attempts to design websites in line drawings always failed. In those few cases a design firm did sent their webdesign in Illustrator or PDF, it would have a fair chance of being converted to Photoshop by hand before any HTML was written.

But like anything Photoshop has its weak points. And since we humans tend to focus on those tiny grains of imperfections I decided to sum up the troubles you can encounter when converting a Photoshop document into to a real website.

Line height between paragraphs

One thing that definitely can be confusing is the line height of text. When increasing the line height in Photoshop by setting the ‘leading’, the extra space is added above the text. In HTML That extra space is distributed above and below the text. Below you can see the differences next to each other.

A large line-height in Photoshop adds space above the text

A large line-height in HTML/CSS adds space above and below the text

Character" src="/article-data/images/Photoshop-3.png" alt="Activate this window in the menu throught Window > Character" width="213" height="214" />

Activate this window in the menu throught Window > Character

Many designers use line-height to create paragraphs. So if you want to know how much margin you have to set on paragraphs, you have to look at line-height of the first line in a paragraph. In short: Line-height of the first line – default line-height = the margin between paragraphs. That’s why I never look at the line height of the first line of text in a paragraph in Photoshop.

Line height of the first line in a text box

Another thing to be aware of is that the line-height has absolutely no effect in the first line of a text box. So it doesn’t matter if you set the line-height to 20px or 40px. No extra white space is added on top of the text. HTML does not follow Photoshop’s behaviour.

Because of that you have to be aware that different styles with different line heights in a website can push the whole text box up or down. That’s especially important when the first line of a text box should align with some box or image on the left or right as you can see in the examples below.

The solid box and the text box are aligned (line-height: 20px).

...but when a heading is added with 40px line-height it does not align anymore.

You could fix the problem above with this CSS:

.textBox h1:first-child {
    margin-top: -10px; /* only half of the extra line-height has to be compensated */
    font-size: 20px;
    line-height: 40px;
}

The first-child selector ensures us that the negative margin is only used on something that’s on the very top of the text-box. As already said, the line-height is distributed above and below the text. So we only have to compensate for the extra space on the upper part of the line. So:

40px (line-height) - 20px (font-size) = 10px (the value for our negative top margin).

The Bright Lines » Photoshop