Moving from comp to CSS web layout?

[Joseph...@adobeforums.com]

I'm doing some research on how designers take their Photoshop comps to a CSS-based layout. With CSS-based layouts, web pages are composed of a combination of foreground (standard) and background (CSS) graphics. I'm curious how designers get those images out of Photoshop and into a web authoring environment (be it Dreamweaver, GoLive or Notepad :-).

1. Do you make a selection, copy, create a new file and use the Save for Web feature?
2. Do you slice up the comp for both foreground and background images and then choose Save for Web?
3. Do you use a combination of 1 and 2?

Or none of the above?

If you have a moment to explain your workflow, I'd greatly appreciate it. TIA.

Best - Joe
Joseph Lowery
Author, Dreamweaver CS3 Bible (and beyond... :-)

[Bart_...@adobeforums.com]

Joe: "web pages are composed of a combination of foreground (standard) and background (CSS) graphics". This is not so, I just did a site for two motivational speakers, their foreground image floats over the background, both images are done in CSS. Essentially I started with their image over a background, the front image also contains the background image and the background image is a slice from their image.

[Myle...@adobeforums.com]

Joe, I think your logic is reversed. I can create the nicest things in PS, but the hard part is then to define all those tables, DIVs and styles to actually have the browser render it neatly... The only thing that really matters to me when designing stuff is the areas to set aside for graphical elements, not so much how they wil lactually be cut up or placed.

Mylenium

[Bart_...@adobeforums.com]

I know some people comp their designs in PS, but I don't do that, I start creating in DW for layout and reach for PS when I need graphics for the design.

[Don_Mc...@adobeforums.com]

If I comp a design (seldom) I will then pick the minimum areas that need to be graphic, and slice those parts out. The balance of the page will be created in my text editor (I still like Homesite, even though Adobe doesn't know what to do with the product). I object strongly to the principle that all parts of a CSS web page must be graphics.

[Bart_...@adobeforums.com]

Don: "I object strongly to the principle that all parts of a CSS web page must be graphics." I would like to know the idiot that posited that one.

[Joseph...@adobeforums.com]

Don - That's the process I was asking about: how do folks get the graphics they need from an overall comp, which will include a good deal of content that can and should be created as text and CSS properties.

How do you do it?

[Bart_...@adobeforums.com]

Joe: You got it backwards, you do the design and then place the graphics. I recently finished a site for a music conservatory, the introductory paragraphs have a gradient to the left of that part of the copy. This was to bring the web-site in line with the print material that I designed. This is a case where the graphic did not come from a comp for the web design, the site was designed to replicate the print material. It is only possible with CSS.

I think you are being too rigid about the composition process, sometimes the 'comps' are rough page layouts supplied by the client along with graphics. The design comes from that and 'extra graphics' are created in Photoshop and exported with the 'Save For Web' function.

You might want to rephrase the question. I do not seem to be the only one confused by the question as posted.

[Silkr...@adobeforums.com]

Something that I have noticed over the past couple of years is there are two camps of thought on designing web sites. First is the old school thought of creating the website with the code first then apply any graphics. Works great for those using notepad. Then there is the camp that I'll call Macromedia/Adobe that want users to create the comps slice it dice it and then generate any extra code if necessary.
The problem I see with the latter camp is that the code is not always up to snuff. For example some of the programs do not include the DTD or are tables only. But I do believe that once code is up to par more users will start to follow Adobe's idea. The way I look at it now, is a comp is being created in photoshop or fireworks, then the design is recreated in dreamweaver. double the work. If photoshop and fireworks are able to generate true CSS/XHTML code then the comp should easily be ported to dreamweaver where other features can be added. Similar to the way Flash works. Or will work with CS4(saw the demo). Where the design can be created in Indesign then ported to Flash for added functionality.
I think part of the issue has to do with how the document is displayed in the browser. Some prefer a fluid design that can change according to the monitor's size. While others prefer a rigid fixed format that can not change no matter what size monitor it is displayed on. Which one is right. I think both are. Just depends on the material that needs to be presented.
OK enough rambling on...

[Myle...@adobeforums.com]

The problem I see with the latter camp is that the code is not always
up to snuff.

But then again, neither is that of the "code monkeys"... Anyone who ever had to adjust a Wordpress template or manually futz around with other CMSs, surely can tell a story... :-|

Mylenium

[dave_...@adobeforums.com]

, neither is that of the "code monkeys"...

i'll give you code monkeys in a minute you design monkey! :P :)

[Bart_...@adobeforums.com]

Well I've been using DW since v1, it now has a code/design view and I have never used a comp from PS or FW to generate a site, a good site is way more complicated and needs lean code which neither of them can generate. I guess this style of creating a website is for newbies who are still working to understand how code works.

The designer also has to be aware of the limitations of each software used in the process, for instance Flash is a complete failure when using large amounts of formatted text, it wasn't created for that, but designers/clients still fail to understand that.

I'm a code/design monkey and proud of it.

Don: I still use Homesite for working with PHP code.

[Don_Mc...@adobeforums.com]

Joe:

I guess I fit into the code monkey side. One thing I like about Homesite is that there is a validate button that I can press to see how many code errors or alerts there are on the page.

As I mentioned, when I do a mockup (less than 10% of the time) I will determine which objects must be graphics, and which can be done through CSS text. This is usually the banner and perhaps rollover buttons (although I am using CSS more and more for those). Perhaps a main image as well. Those get sliced and those slices given meaningful names. Then a save for web to save the slices. I throw away the crap slices and keep the ones I need. Integrate this into a flexible layout that works in different sized windows (as much as possible) using Homesite.

Is that what you are looking for?

[Myle...@adobeforums.com]

i'll give you code monkeys in a minute you design monkey!

Oh no. I don't consider myself a designer. If at all, I'm a tech-nerd/ geek who happens to know his way around a few programs, has a keen interest in some technologies and happens to understand some of the technobabble and programming slang, but on the other hand has some artistic education and skills that prevent him from making the most distasteful designs and on occasion even allow him to do something realyl good, design-wise. Beyond that - I'm just who I am. Some kind of guy who shares what little knowledge he has to offer, but constantly clashes with people because he does not feel at home with designers nor with coding people, because he can't manage to keep his (biased) opinions to himself and thus pisses everyone off. ;-)

Mylenium

[Danny_...@adobeforums.com]

can someone please answer the question?

[Free...@adobeforums.com]

Don't worry Mylenium. You're doing fine.