Quick Assistance required - Dreamweaver - PS Layout

[noct3rn4l]

ay guys whats up.
i just watched the complete dreamweaver video and watched papa put together an entire site in DW, i understood everything so my problem isnt so much setting up the CSS's or making tables.

my question is this.
i constructed this layout in photoshop (following a tutorial)
and id like to make it a site, but how do i convert it into separate graphics to insert into DW? would i just crop everything and name it accordingly? or would i import it as a image into DW and then set up all my tables? and such.

Attached is a link to the layout i put together in photoshop, its flattened into a jpeg for the purpose of uploading for all to view, but i do have the .psd.

< http://img140.imageshack.us/img140/2319/orangeattempt01pw8.jpg >

any assistance is helpful,

Thanks - Jayyyyy

[noct3rn4l]

...anyone?

[DjVoyager]

It's the weekend ;)

I'm not a web designer but do know that you can make a layout from a PSD file using ImageReady. So you would import your image into ImageReady and use the slice tool to cut up buttons and links. You will "Save Optimized as" to export it as an HTML. It will neatly export the image and its slices. Then, you can open this HTML file in DW and do whatever editing and stuff there.
Hope that helps.

[danlefeb]

Nice clean design. Yes you can do as DjVoyager suggests and slice up your image - although I've done web for many years and I've never sliced up a design before. There are a couple reasons why, but the main reason is because if I want to make a change to my code in the future, I know exactly where everything is at later on if I write the code myself. Plus, it's not really that hard - just time consuming (depending on the design, of course).

So really it's up to you how you want to create your design...naturally I'd suggest you don't slice it up automatically, but in the end it's your choice :)

[papa]

One of the things you can do is bring in the image just like I did when designing your page. This will help you see what is and isn't a graphic. Thank you can use your selection tools in PS to select areas that need to be graphics and copy them. Once coppied you can move them to new images the same size as the spaces you left behind in dw.

Hope that helps,
Papa

[pininfarina]

Nice clean design. Yes you can do as DjVoyager suggests and slice up your image - although I've done web for many years and I've never sliced up a design before. There are a couple reasons why, but the main reason is because if I want to make a change to my code in the future, I know exactly where everything is at later on if I write the code myself. Plus, it's not really that hard - just time consuming (depending on the design, of course).

So really it's up to you how you want to create your design...naturally I'd suggest you don't slice it up automatically, but in the end it's your choice :)

I usually slice up my images in photoshop ONLY for the menu or nav bar as it's called in Dreamweaver, works like a charm when doing roll-overs, for the lay-out it's best to do what is explained above ^^

[noct3rn4l]

One of the things you can do is bring in the image just like I did when designing your page. This will help you see what is and isn't a graphic. Thank you can use your selection tools in PS to select areas that need to be graphics and copy them. Once coppied you can move them to new images the same size as the spaces you left behind in dw.

Hope that helps,
Papa

papa! i really enjoyed your tutorial, your way of explaining why you made certain decisions and using metaphors to compare it to a container were helpful, im also recommending my dad take a look at the video so that he gets a idea how to use the program!

anyway. Yes that's what i was thinking at first, control+Clicking (PC) on a layer which would select the area on the layer making it easy for pasting each into a separate file. thanks for confirming my suspicions, as well as all you others who recommended slicing =)..

papa on another note, since your profient in maya i have another question =), how do you accurately set up image planes in maya? (the technique to take the pics). im currently taking a intro to maya class in school (have lightwave exp), and were doing a project where we create a object we bring in, myself and a friend chose the hardest objects in the class ( me doing a transformer [robot], he's doing a lambo). but i only took a front and side pic and made it outlines in photoshop. I did so by using a coursel plate from a microwave that rotates, my dSLR+tripod and then placing the robot in the middle of plate and rotating it to the to get the side view( since its in the middle it didnt shift any to the left or right). But how would i get a accurate Top view?

here are some images for you to see my progess =)

4panel view: [ http://img337.imageshack.us/img337/2820/jlay4panelqz1.jpg ]

persp: [ http://img393.imageshack.us/img393/2352/jlayperspwf0.jpg ]

[noct3rn4l]

Nice clean design. Yes you can do as DjVoyager suggests and slice up your image - although I've done web for many years and I've never sliced up a design before. There are a couple reasons why, but the main reason is because if I want to make a change to my code in the future, I know exactly where everything is at later on if I write the code myself. Plus, it's not really that hard - just time consuming (depending on the design, of course).

So really it's up to you how you want to create your design...naturally I'd suggest you don't slice it up automatically, but in the end it's your choice :)
thanks dan, i agree with not slicing the file completely (only the navigation when appropriate), i like the idea of turning it into tables since im no code guru like you =)

[DjVoyager]

That's some wicked modeling on that transformer! :bang

[noct3rn4l]

That's some wicked modeling on that transformer! :bang

thank you sir ;D

[danlefeb]

I usually slice up my images in photoshop ONLY for the menu or nav bar as it's called in Dreamweaver...

It's all a matter of opinion and what works for you, but I've found that if I want to do something like integrate a content management syetem (they're getting extremely popular amongst clients it seems these days) or something more complex, then very often the automated nav bar/menu options in Dreamweaver, FrontPage, Expression (or whatever your HTML tool of choice) very often they start to require manual fixing to get them to work properly. In this case, I've found I can simply create something from scratch much faster than using the automated tools and fixing them to my needs. Once again, it's all a matter of opinion though :)