6

I'm confused about the relationship of Photoshop (and any other image processing software) in web designing. I can see countless tutorials anywhere teaching on how to make web layouts from scratch, and most of them include the whole contents of a real web page. But it stops there. No further instructions are included on how to implement the designs as a real web page/site (aside from those slice-n-dice approach which I know that you treat as a thing of the past.)

I'm sure my question isn't open-ended since I will list more definite questions here.

My assumptions are:

  • Photoshop is intended to be only used for logos, banners, etc. to be export exactly to web pages.
  • Creating web layouts using Photoshop is used only as a mock-up of the real site (only a guide?)
  • After finishing constructing it, you should implement the design by hand-coding them using CSS, HTML, etc.

If all of my assumptions are correct, my most important questions are:

Why are people fond of creating web layouts using Ps if they cannot build it into a real site (I'm referring to those who can't code.)? I can see that their designs are too detailed that it would seem impossible to make it using tools/frameworks like Twitter Bootstrap and JQuery UI (afaik).

PS:(Post Scriptum not the other one) I am originally a student of programming and have no idea about how you do web graphics design. Also, I don't want to argue about using Illustrator or Frameworks(phased out by Adobe) instead.

6 Answers 6

5

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.

1
  • My confusion must be because I have still a traditional point of view in web page construction. Distinguishing the present(with CSS3) from the past approach is an excellent explanation to my dilemma. Thank you.
    – Arman
    May 12, 2013 at 17:51
2

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.

1
  • I never thought that Ps can also be used as a great measuring tool. Nice to hear that even a pro web designer like you tries to avoid those too complicated designs. Thanks.
    – Arman
    May 12, 2013 at 17:31
2

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.

1
  • I almost previously thought that web designers are obligated to have a fair knowledge in using HTML and CSS. Thanks for the clear distinctions.
    – Arman
    May 12, 2013 at 17:40
2

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.

1
  • The separation of concerns is a perfect idea. The last paragraph pertains to the tasks of freelancers isn't it?
    – Arman
    May 12, 2013 at 17:44
1

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).

0

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.

2
  • "...designers would make them(gradients) with photoshop slices." But how? The first thing that comes to my mind is to make those slices as backgrounds embedded in HTML. Is it?
    – Arman
    May 11, 2013 at 20:29
  • 2
    Take a pixel wide and as much as the height as is the gradient long and the repeat them using CSS. To slice in PS use slice tool. To repeat in Html/CSS use background repeat property.
    – user8795
    May 11, 2013 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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