any web design gurus?

brad- · April 2009

For those of you familiar with creating web sites...here's my situation.

I'm not much of a web guy, but I'm familiar with html/css on a basic level. I have been tasked with completely redoing a portion of a website at work.

I know how I want my layout to be. Banner at the top, navigation and content split in the second row, and footer on the bottom. I could make it in a day with simple table/cell layout, but i need this to blow people away with the pretty. It will also contain asp elements for data entry, because it will be used for transactions as well.

I've sketched out on paper what it will look like.

I have started creating the background and banner in photoshop, and will bring it into VS 2008 to do some asp.net programming.

My question is this: What is the best way to get from completed graphic to a working web template? I have read about slicing, but never done it. Is slicing necessary? Is there another/better way?

Any advice about browser compatibility or image sizing?

Thanks

d00dle · April 2009

I used to do this back in college. If I have an idea what your template looks like, I might be able to help.

dynamik · April 2009

What version of Photoshop? I believe they've merged this functionality into Photoshop in the newer version(s), but Image Ready was used to do this in the past. I'm still on CS1 since that does all I need. Just grab the knife tool and click-and-drag. That's about it. It will export that into a table-based layout for you, and you can just edit that to fit your needs. It's all pretty intuitive.

There's no real worry about browser compatibility with just images and tables. As far as the images go, you'll be able to optimize each slice (image) individually. Use .gifs for images with few colors (i.e. logos) and reduce the number of colors as necessary. With photographic images (or any that have a high number of colors), use .jpgs and reduce the quality until it's noticeable and then back it off a bit.

Let me know if you have any specific questions.

Pash · May 2009

Basically what dyanmik has said, and yeh the latest versions of photoshop do allow you to slice and dice straight to HTML. Also, unless you are using embedded objects or anything like that, browser compatibility shouldn't be an issue. Id strongly recommend checking your website in a minimum of two separate browsers though as you are working on it.

Pick a good design size as well, for example 1024x768 or 800x600 (as the bare minimums). If you can and as you mentioned you know css, there are some good coding practices to actually scale your website dimensions based on the end users desktop resolution. You will need some javascript for this as well. There is a handy addon for firefox that includes browser resizing tools, css tools etc https://addons.mozilla.org/en-US/firefox/addon/60. Really awesome.

Let us know how you get on.

Bert McGert · May 2009

brad- wrote: »

I know how I want my layout to be. Banner at the top, navigation and content split in the second row, and footer on the bottom. I could make it in a day with simple table/cell layout, but i need this to blow people away with the pretty.

Whoa whoa whoa, back up...

Banner at the top and FOOTER at the bottom!? Don't worry about the pretty, man. Sounds like you're re-writing the books on web design as it is!

Ideas like this surely would've been limited to a geocities page, but with that universe gone, boy, I dunno.

These are some crazy times we're living in! It really is true that anything is possible.

any web design gurus?

Comments