+2  A: 

Yes. You will need to use the Slice tool to break the image up into regions. From there I believe you can "Save for Web" and it will generate table-ridden HTML and images which you yourself can convert into pages. Photoshop is only one piece of the puzzle.

Nathan Taylor
Why was this down voted?
Nathan Taylor
@Nathan Taylor: I have a feeling our good friend Jonathan Feinberg wanted to punish you for taking sides in our earlier kerfuffle. I voted you up. His insulting answer seems to have either been self-deleted or moderated.
Joe O'Driscoll
And I didn't even down vote his rude answer; I just politely suggested he be civil. Oh well... I hope this is helpful to you. :)
Nathan Taylor
A: 

Install FireBug on FireFox and inspect random image-heavy pages. Using FireBug you can easily inspect the HTML of a web page and see associated styles and images.

roosteronacid
How does this answer relate to his question? He asked about how to transform a large image down to a webpage.
monksy
This is one way to gain knowledge about how to slice-and-dice images into a web page--observe techniques "in the wild".
roosteronacid
+5  A: 

To extend on a previous comment:

  1. Use a slicing tool or do it yourself, break up the images into sections that sorround, but don't include the text.
  2. Put the text elements in the HTML [don't keep it on the images, or it can become difficult to update it later]
  3. Use an external CSS file to manage the color scheme.
monksy
+5  A: 

Unless you're interested in spending a lot of time learning CSS layout, your easiest path to success would be to send off the Photoshop file to somebody like psd2html, which does this kind of thing very quickly and for a shockingly low price. This would allow you to focus your development efforts on application functionality.

Designing a web template in Photoshop is great, because you're not constrained by any pre-existing notions of what you know how to do with CSS. But it's dangerous for this same reason. Certain layout patterns are very well-established and easy to do with CSS, while other things that might seem like they should be very easy, are not.

gravelpot
I'd agree with this. If you really don't know what you're doing at all when it comes to converting the image to a web page expect to invest a lot of time learning. In particular, there are so many little tricks needed to get designs to work in all browsers and it takes a long time to acquire this library of tricks.
wheresrhys
+1  A: 

Use an image editing tool to slice your image into the necessary images to make your page. Knowing where and what to slice comes with experience, but here are some pointers -

  1. All images are rectangular, therefore it might help to think about "columns" and "rows" when doing the slicing. But please only use tables for table data and not for layout :)

  2. If you have a repeating pattern in an image, slice the smallest size of image that will allow the pattern to tesselate and use css to repeat it.

  3. Use the right image type for the right job e.g. .gifs for small animations, .png for overlays, .jpg for photos, etc. The wiki page may be of help here

  4. Use the right image file size and dimensions for the job. I usually try to make the images file size as small as possible without losing the overall effect of the image. Remember, larger images = more bandwidth = longer to download

Once you have your images, I'd recommend looking at using Firefox with the pixel perfect plugin and Firebug to put the page together. The pixel perfect plugin allows you to overlay an image onto a web page so that you can align everything up to match the original mock-up.

Once you have a basic functioning page using HTML and CSS, I would then look at this point at introducing client-side functionality via JavaScript/ a JavaScript framework. Doing it before you've done the layout can start to get confusing, so I would get to the point where you are happy with what you have, then introduce the functionality. Doing it this way also aids progressive enhancement and encourages unobtrusive JavaScript.

Russ Cam
+1  A: 

Slicing the image is typically the way this is done, but beware that the tutorial as it's written has already painted you into a corner.

Notice that the entire image (which I assume is meant to fill the browser as a website) is only 766 x 700 pixels. That's just over half the size of a modern monitor, so you'll have an enormous amount of white space to the right of content (or on either side of centered content).

Average monitor sizes differ by geography, so become familiar with what is typical for your audience and make your background layer that size or larger. Five years ago all of my sites were sized for 800 x 600 monitors, and now they're made for 1024 x 768. But I'm watching my sites' traffic data as larger monitors are used by nearly half the visitors.

The method that you use to create the HTML to display the images and text depends on your reason for doing this. If it's a hobby or sideline, use any of the WYSIWYG site creation software packages or online tools. If you intend to learn how to do this as a career, then do yourself a favor and learn how to create sites using web standards (semantic HTML/CSS). Everyone learns by looking at other people's code, but just be careful who's code you learn from.

Check out the Eric Meyer books on CSS and the Jeffrey Zeldman book on web standards for lessons on how to make sites that will work not only in today's browser, but also on modern mobile devices and next year's browsers. While on their sites, check out their articles and postings, and take a peek at their HTML source to see how they do it.

Also, check out this article of seven different PSD to HTML tutorials to see how other designers would tackle the problem.

flamingLogos
+2  A: 

Here is what you need: http://stackoverflow.com/questions/1311494/step-by-step-process-for-css-html-layout/1311552#1311552

This is some extra guidance to reinforce the above link: http://stackoverflow.com/questions/1321097/seo-where-do-i-start/1321284#1321284

Do not slice the image, as others have recommended, if you do not have to. That is extremely inefficient. Image slicing is an outdated practice that will result many different images being sent to your users each image having its own HTTP header. That sucks up bandwidth and wastes peoples' time. Serve as few image files as possible to the user and use CSS to make them work in your layout. Look up a technique called CSS Sprites to see how many various images can be served in a single file to represent various components of a layout.

A: 

A common approach I use is to first design the page layout using photoshop, illustrator etc.

Once you have the layout examine the design from a high-level look at how the images occupy symmetrical shapes on the page.

Next determine what images can be tiled, sprited ( as previsouly mentioned) or recreated within CSS. For example in the above image you could create the tiled box primarily with CSS.

You could of course slice it as one image but then you create a lot of wasted pixels that only decrease page performance and increase load times.

Stay away from the use of tables in your design and look towards the use of div tags /layers using div tags combined with properly formatted CSS will result in a light page that mirrors the exact layout from above.

In you deign I would also consider a few items (some of which were mentioned above) Design the page for fluid presentation. If you have to lock the image down to a specific size i.e. 700px then design the page so that it is laid out in the center of the page and presents itself cleanly for larger screen resolutions.

Use CSS as much as you can and cross-test on multiple browsers (ie. safari, firefox etc) Internet explorer will render CSS differently from other browsers so you should be aware and test for this during development.

Try to create a background image that you can tile or that has a fast load time at a large resolution. For example if you site is laid out to be best viewed at 1024x768 create a background using a small color pallet that is comparable in size and gradient blends to a common background color on multiple sides. This will allow for your background to be a part of the site design but also support larger resolutions. positioning can be addressed in css for the background.

If you are new to coding out pages then I think it can help to use some of the apps like photoshop, illustrator etc to convert the image to html. Just be aware that when doing this you will get a lot of excess code that bloats the page and you will also get a lot of unnecessary images tiling in the page making up backgrounds etc.

In short there is no substitute for begin able to read, interpret and hand code the document yourself. You will gain more flexibility in design as well as gain access to a number of styles, attributes and properties that are not accessible within some of the WYSIWYG apps.

internet searches on CSS and the use of DIV tags will return to you tons of examples and starter guides. Best of luck!

randyc