Designing in Photoshop?

py2006

Hi all,

This has always been a mystery to me. I assumed it was something that was done in the early days but lately I am hearing people say they design their sites in the photoshop then convert it to html/css. Is this done a lot nowadays and if so, how is the conversion achieved?

I'm familiar with Photoshop, Dreamweaver, HTML and CSS but I never really considered designing in photoshop first.

iFergal

Not entirely sure but I'm pretty sure it's just for designing beforehand if you are skilled with Photoshop, and then building off your PS. Just speeding up the process as you have an overall idea of what to build/design with HTML/CSS.

desaparecidos

Mockups / storyboards are created with photoshp / fireworks / other. The only "conversion" is extracting images or gradients from the mockup into jpeg, PNG or gif. With some designs using the slice tool is handy.

sheesh

yeah that is the way professionals do it

remember you will have to show it to a client before you put it up too! and you can can throw a design together pretty quickly in photoshop and you can make sure that pixel wise the measurements are perfect. This design can be mailed to a client as a jpeg once he has signed off on it you now have something to compare it to afterwards when the job is completed.


how do you do it OP?

BostonB

IMO. Its really a difference in approach. Design the site first so the design its core to the site. Or build it the functional side first and add the design later. It shouldn't make much difference as the functionality of the site, the back-end should be independent of the design.

However you get programmer led sites where the design is secondary and back-end tacked on as an afterthought. Then you get design led sites where the design is more important and the back-end is tacked on.

desaparecidos

BostonB wrote: »

It shouldn't make much difference as the functionality of the site, the back-end should be independent of the design.

How the design / front-end works and behaves is going to impact on how the back-end is implemented. We'd always start off with mockups before any code is touched.

py2006

Well I don't design sites for clients. It is just a hobby really. I kind of experiment with a design as I go. Perhaps this approach is more time consuming but if you are not on a deadline it isn't a problem.

I got the impression that the final design in psd format could some how be exported as html and css. Slicing just makes one big image for a site?

BostonB

desaparecidos wrote: »

How the design / front-end works and behaves is going to impact on how the back-end is implemented. We'd always start off with mockups before any code is touched.

I would say there's give and take.

I wouldn't let a front end overcomplicate the back end. Also when they redesign the front end, or interface you shouldn't have to keep changing the back end. While you wouldn't want the back-end to dictate the design. There has to be practical limitations based on resources and budget.

It would be good practise, for any kind of project to do mock-ups and wire frames and even throughout of the user scenario's before starting work. You'd do that for the design side aswell as the development of the back end.

_ciaran_

py2006 wrote: »

Well I don't design sites for clients. It is just a hobby really. I kind of experiment with a design as I go. Perhaps this approach is more time consuming but if you are not on a deadline it isn't a problem.

I got the impression that the final design in psd format could some how be exported as html and css. Slicing just makes one big image for a site?

You slice each individual element and then use css to position each slice within a html document.

Now that CSS3 does gradients and drop shadows I wouldnt think many people bother doing it these days though.

BostonB

py2006 wrote: »

Well I don't design sites for clients. It is just a hobby really. I kind of experiment with a design as I go. Perhaps this approach is more time consuming but if you are not on a deadline it isn't a problem.

I got the impression that the final design in psd format could some how be exported as html and css. Slicing just makes one big image for a site?

IMO ( design as you go or doing it as one big image) Its not an issue for small sites, and/or sites with little traffic. You might create bloated slow pages and its time consuming. But it can be quite inefficient on large projects, sites with a lot of traffic. Or where time/cost of design/development is an issue.

strandroad

py2006 wrote: »

Well I don't design sites for clients. It is just a hobby really. I kind of experiment with a design as I go. Perhaps this approach is more time consuming but if you are not on a deadline it isn't a problem.

I got the impression that the final design in psd format could some how be exported as html and css. Slicing just makes one big image for a site?

The actual slicing is not really done anymore, you try to use CSS as much as you can to render the design. But a design is still needed to base your coding on. It's not practical to keep changing the code all the time, also as your project goes through sign off stages it's easier to demo graphics of some sort.

Typically you'd do wireframes first to map out site structure and page layouts. Then you do graphic mockups with Photoshop/Fireworks, full pages or at least style tiles to demonstrate visual identity (in recent times due to the fluidity of responsive sites full page layouts are not as important, and more work would be done with style tiles and front end coding on the fly).

It's still not back-end though - I am not familiar with projects where back-end drives the process before UX. I can see how the two can be worked on in parallel once site structure and information architecture have been established.

sheesh

py2006 wrote: »

Well I don't design sites for clients. It is just a hobby really. I kind of experiment with a design as I go. Perhaps this approach is more time consuming but if you are not on a deadline it isn't a problem.

I got the impression that the final design in psd format could some how be exported as html and css. Slicing just makes one big image for a site?

they would put each part of the site on individual layers so it would be something like

• a layer for the background color
• a layer for the logo
• a layer for nav bar
• a layer for the nav bar background#
• a layer for each div
• and so on

basically you break up the parts of the design in way that reflects how the design will be implemented in HTML or what ever way suits you as a designer. Its alot of fun.

py2006

I think were I would find it difficult is that I would do up something good in photoshop but struggle to replicate it using html and css

BostonB

mhge wrote: »

...It's still not back-end though - I am not familiar with projects where back-end drives the process before UX. I can see how the two can be worked on in parallel once site structure and information architecture have been established.

You get it a lot in developer led places. They decide what's on each screen to best suit the back end, sometimes for speed or security, but often just to make it easier to code for. You'll notice it reflected on website where you want to do something logical like search for everything in Leinster, but it only allows you pick by Country. Things like that. Lots of awkwardness in the UI. You have the flip-side too, a designer led place coming up with a design that consumes a lot of resources to code for.

As you say the best is plan development and design together. But it doesn't always happen like that.

BostonB

py2006 wrote: »

I think were I would find it difficult is that I would do up something good in photoshop but struggle to replicate it using html and css

Well it would be a bad idea to present a design that you couldn't then make work.