13

I see that many designers create beautiful web design works in Photoshop, but now with the arrival of CSS3, when they want to change that to HTML & CSS, they simply start from scratch and create something around 80% of the final design using CSS3.

For example, they use border-radius, opacity, background gradient, box shadow and text shadow, and other CSS3 rules to get what they've created in Photoshop. Many times they only import an image from Photoshop, which is more like a brush work or a logo, or anything like that.

My question is, should web designers still use Photoshop for creating something, from which only 20% would be useful to them?

Can a web designer create the entire design directly in HTML & CSS without bothering to add another middle layer of creating a design in Photoshop, and then simply create the remained elements there?

Improve this question
2
  • Designing the interface of the site vs. designing the look are two different topics. Photoshop makes a terrible wire frame tool; however, products like MockFlow make a terrible visual tool. 99% of my clients CAN NOT accurately interpret a wire frame as to how a shadow effect, or color scheme will work together (or countless other visual dependent situations).
    – Dawson
    Commented Sep 7, 2011 at 6:07
  • This should be a in chat or at least meta. It does not have a finite answer.
    – b01
    Commented Sep 21, 2011 at 20:07

4 Answers 4

Reset to default
17

Gotta disagree with everyone. Photoshop is not a tool for designing a web site. It's a tool for sketching out a web site. The web site should still be designed in the medium that it's in--which tends to be CSS, HTML and JS.

That doesn't mean you don't use Photoshop. But you certainly don't have to.

I'm a huge fan of not ever showing web site designs in photoshop to clients. It's not the medium the site will live in. Photoshop comps offer no ability to communicate interaction, device differences, browser idiosyncracies, clickability, responsiveness, etc.

Admittedly, in reality, a lot of the time you still need to show JPG mockups. Fine. Use Photoshop for that. But don't then take that PSD file and slice and dice it into a web site. That made sense in 1999. No so much today. Instead, take that PSD, and just use it as a guide. This is 'roughly what the site should look like but take into account the fact that it's being built in CSS/HTML/JS and accomodate as needed.

So, to answer the question:

Can a web designer create the entire design directly in HTML & CSS without bothering to add another middle layer of creating a design in Photoshop, and then simply create the remained elements there?

Yes. One can certainly do that. I've seen that done in parallel with PSD designers. The biggest problem with the PSD approach is when you're working on an agile team. Heavy files used for documentation (such as PhotoShop) become rather large burdens to the Agile process and end up adding more issues than they solve. We tend to then work in reverse...we sketch in PS as needed, and then design and build in HTML/CSS/JS. When we then need to make quick visual updates for meetings, we'll just screen-shot the working presentation layer markup, and slap it in PhotoShop and tweak quickly.

Improve this answer
5
  • I'm with you @DA01. +1.
    – Saeed Neamati
    Commented Sep 5, 2011 at 18:24
  • 1
    +1 great article (okay maybe it's not an article), but you sure summed it up well! I totally agree with just about everything you said. I personally make it a point to provide my clients with live HTML and CSS mockups with full design functionality so they can 'experience' the design!
    – Web_Designer
    Commented Sep 11, 2011 at 5:37
  • 2
    +1 for "screen shot the working presentation layer markup". Until I read this answer, I was thinking of saying something like this in my own answer, but I wouldn't have much to add, so just I upvote this instead...
    – Aᵂᴱ
    Commented Oct 10, 2011 at 6:27
  • +1 I started doing most of my design work in the browser using css3 a year a go and rarely even open Photoshop any more.
    – Chris_O
    Commented Dec 2, 2011 at 3:02
  • 1
    +1! Photoshop is primarily a bitmap manipulation programme. For lightweight, well controlled code, there is no better way than direct html and css. There will always be things that have to change from PS to web, and as I see it; PS only adds a complicating layer for the client.
    – benteh
    Commented Nov 23, 2013 at 0:31
7

** EDIT **

New Client?

Absolutely - If you're pitching a design for a NEW client/site. Lay-folk generally have a hard time seeing what's in your(my) head. Wireframes, drawings, etc. don't always cut it either - scratch that - they don't cut it. I hear more, "I thought it was going to do X" from clients when all they have is a WF, or sketch than I do when they're given a mockup with their logo, photos, corporate fonts, and a UI.

Any other scenario:

Maybe not - If can use existing HTML/CSS/JS that matches the job requirements, or you're editing content of an existing client, you'll be better off working just in the code. If not, you're probably going to waste a gross amount of time in Photoshop for very little return. There are those instances (like @DAO1 mentioned) where a screenshot and tweak-via-Photoshop can really speed up an approval process, or hammering out an idea, or three.

** end **

I say yes -

It's a lot easier to sell your designs (and much quicker to create comps) with a visual - even if it's simplified. That's where PS is most helpful for my jobs.

I also incorporate a layer with a grid system, so I can see how things are laid out, and quickly drag them to where I need them. Again, this helps with comps, and client-requested changes.

If you keep a Photoshop library of your commonly used elements: vector based rounded corner input boxes, your grid(s), "logo goes here" box... all in layers of a single file, or multiple files (your choice) - you'll be able to build home pages and interior pages in a fraction of the time it takes to code them.

Keeping a common CSS file (with popular settings) will also help when it comes time to code, but I don't see the value of eliminating PS from the work flow - regardless of how robust CSS becomes.

Improve this answer
2
  • "in a fraction of the time it takes to code them" that really depends on a whole number of things--including the skillset of the designer. I find that it's often quicker to make client changes/tweaks directly in CSS/HTML/JS than going back into Photoshop. But it depends on a lot of factors.
    – DA01
    Commented Sep 5, 2011 at 18:24
  • DA01 - absolutely. My work flow changes as the project matures. After launch, the PSDs aren't touched.
    – Dawson
    Commented Sep 7, 2011 at 6:02
3

Can you guarantee that 100% of your users have browsers which will see your site exactly the way you (or more importantly, the client) intend it to be seen? No? Then what percentage? 90%? 80%?

Can you make sure it degrades nicely, so that the alternate version seen by the remaining 10% (20%? 40%?) is acceptable?

If either or both of those issues is a problem, you need some Photoshop.

Improve this answer
5
  • Sorry; why is that? Can you explain what you mean?
    – benteh
    Commented Nov 23, 2013 at 0:32
  • @boblet Please be specific in your question. Explain what?
    – Lauren-Clear-Monica-Ipsum
    Commented Nov 23, 2013 at 0:48
  • Ah, sorry; I was wondering why you say you need some PS because of lack of browser consistency? Somehow does not make sense to me.
    – benteh
    Commented Nov 23, 2013 at 0:53
  • @boblet What I mean is that with some effects (e.g., rounded corners) you can create it in CSS or Photoshop. But older browsers can't handle CSS rounded corners; they come out like regular box corners. So if the round corner is really important, you must use Photoshop to create it as a graphic so that all browsers can see it.
    – Lauren-Clear-Monica-Ipsum
    Commented Nov 23, 2013 at 12:37
  • Aha! That makes a little more sense. I see now, though, that this is an old post, and these days css rounded corners, shadows etc is not really a problem anymore. I was just concerned with the practice of creating delightful mockups in PS, and then bumping into problems translating that in to sensible code. It is often hard for clients to swallow that; as they often do not understand the bridge that needs to close the gap between bitmap and code. Thanks for explaining.
    – benteh
    Commented Nov 23, 2013 at 12:47
2

Things to think about:

  • A lot goes into putting those fancy designs on the web. At least for the more complex ones. Photoshop helps makes seeing the end result happen faster.

  • For a designer at his job, doing a mock-up in Photoshop is usually faster, justified, as you won't spend all day hacking away at html and CSS3.

  • As you mentioned they can do 80% of it in CSS3, but then they'll eventually need Photoshop form some part.

  • I would argue that you forego doing a mock-up in Photoshop if your're the designer and developer and it would save time, otherwise always do a mock-up in Photoshop.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.