boxst

Hello

A slightly misleading title. I know how to design websites, but I've been given some photoshop templates and I don't really know where to start. Do people really use Photoshop to design everything and then just cut things out?

Seems like a pain to me. I'm used to creating templates in Dreamweaver and the basing pages on those.

Thanks!

Steve

dynamix

iTrader: (3)

yes is the simple answer

yes is also the more complicated answer just design and then cut chunks out of the photoshop or make it looks like that in DW or whatever else you use.

Dreamweaver templates only do straight lines so you need photoshop or fireworks etc to do design work.

bob269

Photoshop CS has a nifty cutting tool designed to give you bitesized web chunks, webdesign is a lot easier than people think.

Chop it up then slap it in some tables in dreamweaver.

boxst

Hello

Mmmm. Okay. It just seems that everything is in Photoshop, so would have to split everything including text boxes etc...

I use Fireworks, but not for everything just borders and roll-overs really.

Oh well, off to chop things up then.

Steve

dynamix

iTrader: (3)

you can use the fireworks export to dreamweaver function but it writes appalling html

SJ_Skyline

Steve,

When I design I run a few sketches on paper, get a clear idea of what I am after in my head with a handle on colour and then mock up a single page that contains the main page elements in photoshop. I then tweak the colours and space so the mock fits together well.

The trick however is to use as few images as possible. You can easily recreate mouseover and bevel effects using CSS which is not only creates a lighter page but also creates a page that will degrade gracefully acoss multiple browser and platform cocktails.

Make sure you use plenty white space, I always use far too little and end up having to revisit the site to increase padding. When you use white space, use the padding and margin properties of CSS rather than using a transparent "dot.gif" resized to force a size.

The second stage after the mock is to take the minimal images portions and built them into a working html mock page with CSS. The code is laid out in a manner that is easy to chop up into "include" files and the rest is functionality.

Some useful sites are:
http://www.w3schools.com/
http://www.4guysfromrolla.com/
http://www.w3.org/


Hope that helps!

Rich

angrynorth

I design in Photoshop, slice it (renaming all the bits I'm not going to use with names like "delete"). Export the page as HTML and images.

I'll then use a text editor and come up with completely new CSS and XHTML code for it.

Thats it, and thats how most of the other designers in my office work it too.

RichB

"webdesign is a lot easier than people think."

GOOD webdesign is a lot harder than people think !
Building a good website from a good design is also quite tricky and in my view, you get what you pay for.

Angry - sounds like you and I do it the same way. Except I am not a designer, I work with one who can't do CSS/HTML etc....

Rich

kilo_4que

My technique is, full design in Photoshop. Get your grid lines in right places for disection or slicing as we call it. Once lines are in place you need to flatten everything so you are left with a single image with grid lines still in place.

Then all you do is using the rectangular marquee tool, select each section, copy and past in new photoshop doc. Save image in what ever format you want i.e. jpg, bmp, gif. I use jpg as its a smaller file n decent quality. Once all sections have been saved seperately. You build the site back up in dreamweaver in tables.

I hope thats enough even though its not in great detail

O and someone mentioned, a good idea is have decent amounts of white and my personal tip would be pale colours on the white canvas.

boxst

Hello

Mmm, okay. From a Photoshop file: http://www.sadandlonely.com/index.html diced and sliced in Fireworks.

Steve

kilo_4que

isnt that a template

boxst

Hello

Yes. Sliced, diced from a psd file into a template in DreamWeaver.

Steve

SJ_Skyline

Images portraying text

Text portraying text

kilo_4que

O and didnt see the ending of the initial post of yours. Yes many professional web designers use photoshop first. Im a web designer and have used photoshop as my first source as have all other designers ive known.