: What is the exact role/relationship of photoshop in web design? I'm confused about the relationship of Photoshop (and any other image processing software) in web designing. I can see countless

@RJPawlick971

The reason PhotoShop is still predominant in the industry is a bit history, a bit big-business, and a bit about laziness/stubborness.

At one time, 'web design firms' were mainly traditional graphic design/print design firms and ad agencies. Creative staff were primarily print design folks who happened to know PhotoShop. Hence any 'design' they did tended to be visual in nature and since the tool they know was PhotoShop, it's what was used.

Adobe has done their fair share in keeping in that way, as well. Buying out competition and the like. And, to be somewhat fair to Adobe, they've done some nice improvements to the tool to make it a bit better for web designers.

But the main reason it's still used today is simply that we're human and humans are often slow to change their ways. A lot of web development shops/firms/companies still are stuck in waterfall software methodologies. In those situations, there's still a desire to have some sort of visual blueprint officially signed off before the coding team even begins to touch code. As such, you still see a lot of monolithic bloated PSDs out there.

To fight that, many newer models of development have cropped up such as Agile Development or Lean UX. The ides is to not spend nearly as much time in PhotoShop making 'mockups' and do much more of that in either wireframes (on the planning side) or in actual code (on the iterative development side).

Vote Up Vote Down

@Merenda852

I think you can get a better understanding of the role of graphic design software in web design if you take a closer look at the service process of a professional agency. First of all, there are usually multiple experts involved. Responsibility for design and code is usually separated and every expert has its own specialized tools.

When working with clients it's important to define process milestones and get the client's consent before continuing work. So let's say the design work is completed at milestone number two. If you want to present completed work to the client without having started any coding work (to avoid unnecessary costs) you have to complete everything in the graphic design software.

If you make websites for yourself it is more efficient to work with graphic design software and the html editor in parallel, shifting design work to the browser. But then it also depends on the complexity of your project. If an extensive and awesome design is really important for your project then working in parallel on code is too distracting (less effective). Then it is better to focus on the design work and spend a considerable amount of time (days, weeks) with graphic design software only.

Vote Up Vote Down

@Murray976

Anymore, Photoshop, Illustrator, et. al. are used for supporting web assets and not for full page/site mock ups.

Yes, there are some people who still build entire page mockup using Photoshop. And in reality if a site is very custom-image based then it may be necessary. But there's traditionally no slicing taking place anymore.

There are also developers who do not want designers doing any coding whatsoever. So they merely want a layered file so they can deconstruct it and build the code themselves. I do occasionally run into these types of developers, but they are becoming more rare in my work.

There's really no blanket answer for your question. In the end, it depends upon specific people and their desired workflow. All I can tell you is how I use image editing apps now compared to 10 years ago.

There was a time when one would build an entire page in Photoshop, slice it up, then export the slices in order to reconstruct them in HTML. This was before CSS2 (and especially CSS3) was widely supported. At that time, it was almost mandatory to do things this way because you often needed a gradient, a round corner, or a small shadow which could not easily be created otherwise. Before CSS2 was supported ANYTHING other than standard borders and background colors required an image, often a repeating image tile. There was simply no way to code a round corner without using images for the corners, same held true with gradients an shadows. If you look at web sites today, note how many gradients shadows and round corners are used. Those would have had to all be images 10 years ago.

Today, much of what used to be an image or slice can be handled via CSS. I no longer need round corners, gradients, or shadows for anything. Therefore I don't need to slice up a page to generate those tiny assets. I only need image editing software to create things which either can not be created via CSS such as logos, patterns, photographs, thumbnails, etc. or for assets which shouldn't feasibly be created with CSS in order to ensure proper display across browsers - things like some buttons or special image effects.

In reality there's very little one can't create with CSS3 anymore. The only hurdle becomes fallback for older browsers or actual photos/artwork. Images may still be required to support older browsers (mostly IE) but often you can allow CSS to degrade to a workable state.

10 years ago a web site design started with pen and paper for sketching ideas, moved to Photoshop/Illustrator for comps. Then stayed with Photohop/Illustrator for complete design approval, then moved to construction to mimic the image layout.

Today, my web site designs start with pen and paper for sketching, then move straight to HTML/CSS mock ups. I open logos or images in the appropriate app and export/save for web and apply the image to the HTML/CSS mockup. I will, at times, create patterns and some specific page areas in an image editing app merely to test some variations side by side. But these are more for my design exploration than actual construction. Mocking up directly in code offers many advantages. Text is live HTML text no more clients with the "That text looks different than the design I approved" comments. Color variations can be created in seconds with well constructed CSS. Layout alterations take minutes compared to hours if going back to Photoshop, editing, then regenerating slices and code.

Image editing software has shifted from being a building tool to a supporting tool merely due to the advances in the markup languages - primarily with Cascading Style Sheets and browser support for them. HTML is still HTML in general. jQuery et. al. has added interactivity, but not really altered layout. It's CSS which has come a long, long, way and reduced the need for full image mock ups.

And for the record, I tend to jump to Illustrator first for assets. Then may use Photoshop if needed or for actual photographs.

Vote Up Vote Down

@Speyer780

You're mostly right in your assumptions.

Some would say that Photoshop is the way to go in Web Design while others may argue it's simply a means to an end.

Fact of the matter is, mocking-up websites is much faster in Photoshop than it is by writing HTML & CSS by hand. It's much easier to play around with and changing a variety of designs using Photoshop.

There are plenty of people who enjoy designing web pages even though they do not know how to build web pages themselves. These people can go by many names, but I call them Web Designers.

That's not to say all web designers do not know how to code, but the emphasis is on the design. On the other side you have Web Developers. These are the guys who do the code but might not touch the design at all.

At my work we have one guy who designs everything in Photoshop first. He then has design iterations until he feels the design is complete. He then forwards the mock-ups to the developers who then implement the designs using HTML & CSS.

That being said there's plenty of people who are capable of both. I for instance, would always design a website in Photoshop, but I would recreate as much as I could in HTML & CSS. The only time anything from Photoshop should make it to the final design is if it's a picture (image) such as a photograph or a logo or if it's anything else that's complex enough to not be worthwhile or impossible to do in CSS.

For further reading, there is a recent article on Smashing Magazine that deals with making Photoshop easier to use for web design and talks about the history of Photoshop and web design a bit. If nothing else, it's an entertaining read.

Vote Up Vote Down

@Radia289

I'd say: Unless you are a graphic designer focused in web - but you mention you come from programming so this is not the case-, if you are going to do web development, know your code first.

I believe you have to, because you are designing for it. I come from digital design, so to say, so I struggle a little with code (JS -.-), but from the start I had to learn HTML and CSS to design for it. You mention overly complicated desings that seem impossible to develop, well, that's what I wanted to avoid. A good mockup should be also an example of usability (not necesarily a usability wireframe, but a demonstration of knowledge about who is going to be visiting the site).

Having said that, I use Photoshop for all kinds of things related to web. It's always open next to my Visual Studio. I use for icons, for quick mockups (I want to change something structural and need to see it first), for photo editing... I use it for measuring too (take a screenshot, paste in PS, use slices to measure, apply to css). It's an essential tool for me, just as essential as the Chrome code inspector. This is, in my opinion, a web developer's best friend. You just add and change the css in the inspector, and it gets applied in the site.

I think, and this is just my opinion, that web design is each day more about developement. Sites are responsive, interactive. You need to design for this dynamism, and to do that (in my opinion), a static photoshop mockup is just not enough.

By the way, welcome to GD! An excellent question.

Vote Up Vote Down

@Becky351

A Photoshop mockup is used as a guide and goal as well. You can't show interactivity with it, but it gives somewhat of a checkpoint to use your imagination.

It is easier to put down what you have in mind when you can so it in 10 seconds (rather than think about 20 limits and take 10 mins and end up using a lot more mental stamina).

In fact, the only reason anyone bothers to code in css and html every part of website or as much as possible is due to slow speed constraints and search engine's access. In the near future, when internet speeds are 1gb/s, it will make sense to not waste time on writing a 3 page code and just slab the pictures and work on only on the interactive parts. The end user doesn't care about these things, that whether gradient was done in css or photoshop.

Why people do something good? If they can't code so they should always limit their design creativity as well. Maybe by challenging themselves they will and advancement. Also, no one said you have got to do everything by yourself. Do one thing and be awesome at it.

Coders and Graphic Designer shouldn't be mainly designers. Veteran level ones are fine though. Coding takes work. Everything does. So eventually the goal for new designers/coders is to save work and not do/implement what is needed. They rather not take the extra mile but if possible leave 10 miles that they should have traveled behind as well.

Vote Up Vote Down

@Odierno310

I personnally use illustrator more (even though I started with photoshop).

Either way, theses tools are only for the creative part, afaic. As you said yourself, "layouts using Ps (...) are too detailed that it would seem impossible to [implement] it". When you create your entire layout on theses tools, you don't put constraints to your creativity.

When comes the time to code, then you'll decide how to convert all that into HTML and CSS. For exemple,


if it's a plain color/gradient, you can just use a color picker and grab the hex codes
if it's a pattern, then you'll need to cut a slice of the photoshop mockup and insert it via CSS.


No one said the PS to CSS transition is always easy. In CSS2, gradient were not available and designers would make them with photoshop slices. Same for rounded corners. Now CSS3 implements them, so it become easier to deal with them.

But even then, ajusting a sliding handle in photoshop to get the result you want is still more "straight forward" than playing around with hexcodes, and therefore, leaves more room for creativity and productivity.

Vote Up Vote Down