Ask HN: Why do designers begin with PS rather than going straight to HTML/CSS?

2 pointsbrianfryer13y ago14 comments

Web designers who know how to code.<p>I've heard a number of reasons for skipping Photoshop and jumping straight to HTML/CSS (e.g. it saves a lot of time). What are the reasons for using Photoshop first?

14 comments

9 comments · 7 top-level

senthilnayagam13y ago· 2 in thread

With photoshop you can design free style and are not limited by HTML and browser limitations. Layers transparencies masking and GUI wysiwyg tools make it easier for creative people

krapp13y ago

But you are inevitably going to be limited by HTML and browser limitations, so why not work with a tool that respects them? I can see the value in wysiwyg editors for non-coders but using photoshop itself for layout design never made a lot of sense to me.

Then again I still do most of my coding in sublime text and use ftp which is apparently terrible so what do I know?

LarryMade213y ago

Think of Photoshop as a sketchpad without the limitations/insanity of HTML and CSS... so you can be totally right brain dreaming up stuff; your mind is thinking only on the look at that point, not whether IE 8 is gonna blow it all out of the water.

Once you get the layout into something good then you fire up notepad or whatever and go into left-brain mode and hack your mock-up it into something that works.

I, myself, find Photoshop (or any freeform graphics tool) a bad tool for web mock-ups and HTML/CSS a dreadful syntax to format with... so, either way of doing those is a struggle for me. :-D

1 more reply

murz13y ago

I'm a designer who knows how to code (or more accurately: a coder who knows how to design).

When I am mocking and laying things out, it's much faster to use Photoshop because it's easier to just drag objects around instead of tweaking CSS properties (at this point I'm mostly just dragging around and resizing vectors/shapes/photos/text to get them in the right size/position).

After I'm pretty satisfied with the layout I will go into vim or Sublime Text and start hammering out the actual design in CSS. I find tweaking CSS properties and refreshing my browser to be at least as productive as editing layer styles in Photoshop (if not more productive). Features of CSS like gradients, borders, opacity, shadows, etc. actually make it a very reasonable environment for quickly iterating on designs (especially when paired with SASS/Compass or LESS). Plus it saves you a step (it's gonna need to be coded sometime anyway...). YMMV

strobe13y ago

I'm a artist/designer/developer (artist/designer who works as developer from time to time (it this year, mostly as developer)).

I think this is only about how much fast you able to translate you brain ideas to images. PS currently is a most faster way to do this (in some cases 'pencil&parer' will be more effective way ).

For example: imagine randomly curved line which is drew by child; how is way more fastest to copy it? 1) draw it's copy on different papper with pencil by your hands 2) generate it's copy by math formula.

Also, in some cases make design with HTML/CSS can be most effective way if the 'design idea' has good fit to html "visual language" (because this way is enough fast to make design by this way and it cut off psd2html part of work) (for example site with 'flat' design like HN).

michaelpinto13y ago

A really good designer might even start with a scrap of paper or a whiteboard if one is available. The reality is that what's needed is a WYSIWYG tool for HTML/CSS authoring and quite frankly it's pathetic that there isn't a great one out there. Writing HTML by hand is like the old world of specing type for a typesetter instead of using a desktop publishing program. Something coders don't get sometimes is that designers need visual design tools, not a typewriter.

rasca12313y ago

Photoshop is easier to design in because you can change everything around without having to recode it. There are less steps and some of the best designers, for better or worse, can only design in photoshop, so it's better to have them design it and then have someone translate it.

paul929013y ago

I'm a front dev who does design though I often wonder if my designs are any good.

I was going to do a Ask HN about a recent design as Im wondering if my design provides a solid explanation of what of the app does.

Anyone interested in critiquing & providing feedback?

ibudiallo13y ago

You design in PhotoShop and you implement it using css and html. Just like you would make a mock up before starting anything right ?

j / k navigate · click thread line to collapse