Web Design to Implementation

shlippy

Hi all,

I have a JPEG image of a web page. The JPEG was provided by a web designer.

What steps do developers take when converting a design ( in this case the JPEG) to objects that can be used to make a web page?

Placebo

depends
You can use slice tool to slice out the parts needed

header
body

footer in the header for instance, the logo, perhaps a gradient background ? [in which cause you would only need a think strip which you can repeat x or y ways] it really depends, it could be simple and plain for which you can just use background-colours. etc

shlippy

Thanks,
I've been looking at tutorials (that describe slicing and other photoshop techniques),

Another way of stating the question might be this:
If you were given a screen shot of an active web page (i.e. the boards.ie splash page)
and then asked to reverse engineer (for want of a better term) the image into web page elements.... slicing is the way to go?
or would you be looking at trying to create table / CSS Divs layouts....
or all of the above?
or something completely different?

Placebo

well technically speaking, you could call it reverse engineering, as a vague term.The site itself doesnt exist, its just an image, so it needs to be created.

things you mentioned, yes it will be all of the above, a mixture.
Any thing that can be converted into an HTML object/element [i.e background, borders, text, etc] will be coded.
Anything that cant [gradient, special buttons, any other images] will be images themselves.

so it will be a mixture.

The 'screenshot maker' is the designer
the 'reverse engineer' would be the developer
sometimes in bigger companies, theres a sweeper, that takes both their work and put its together.

using the terms above for explanation purposes, i wouldnt use them outside of this.

lil_lisa

That looks like an ideal job, given the chance to create a website when given an image is so much easier than trying to come up with creative ideas to suit the customer and their needs IMO!

Also, depending on the functionality of the site (if there is much) you may require server side programming as well as CSS and HTML. You can't always figure this out from an image.

tricky D

Is there a reason why the mockup hasn't been provided in a non-lossy format? Would prefer a psd or similar instead of having to do stuff like cleaning artifacts and such like (if you're bothered).

shlippy

Thanks for Replies....
The company that provided the design ceased trading maybe 2 years ago.

I've been asked to pick up the project, and all thats really left over from the orginal project is a screenshot of the home page....

to Lil Lisa, in the brief from the company that want the site built, they want some elements that will require server side programming.... I may be back with more questions on that

lil_lisa

Ask away (just let us know where to pick up our cheques )

Trojan

The problem you'll face is that you're working off a flat screenshot. The way I'd go about it is give the screenshot to a graphic designer, get them to replicate individual elements (buttons, headings, logo, etc) as a layered PSD (Photoshop file). Then you can slice that up to make your html page.

It's more work to get them to make an exact copy than it is to do a new design based on the old screenshot. Talk to a designer.