Slicing a website layout.

[SeventhVirgo]

Hmm...this is the first "actual" layout I've done. I've tried slicing it and then using it in Dreamweaver. However, I'm not adept with dreamweaver....wondering if some of you could explain to me how to slice the image in order to be able to use it in dreamweaver. To give you an idea, I want that Navigation1 to be an iframe. Can anyone help me please? :doh:

http://users.usall.com/art.us/seventhvirgo/newlayout.txt

[aenigma]

try using imageready? that'll slice it up for you and make it useable, then i would set the navigation 1 area to the bg for an iframe and have it on watermark.

[SeventhVirgo]

Yeah that's what I did aenigma...just looking for more in-depth help. What is that watermark you mentioned?

[Chuckie]

I find that Fireworks works better with slicing .. but just my preference.

[Harp2]

http://www.bhdesign.net/Virgo/Virgo.html


Not sure how to post with links, so there is the text for the URL to where I sliced up your image and made it a simple rollover sample. Use the same link to get a zip file with the images, html and .Psd file to see how it was done, just change html to .Zip.

I hope this helps out!

Harp!

[Samuel]

Seventh, I slice everything manually.

This is how I've come to understand my relationship with PS and DW in making a site.

What I design in photoshop, is not neccesarily what is going to end up in DW.

I design in PS "To" DW

That is, I take time to know how it will be sliced when designing it.

I work more production level than making "The" site, so you understand a bit more how I use the programs.

What I do with dreamweaver, is force the photoshop layout "INto" it.

Its a personal thing, so you have to practice and each time you learn different things on how to design and code.

So there lies the difference between what you may be trying to do, and what is done in other artist's minds.

Decide which way to go, and focus in that direction.

Do I want to end up with what exactly is in photoshop, or do I want there to be a balance.

Some sites I spend 20 minutes in photoshop, and then 3 hours in dreamweaver.

The technical way I slice is to have both programs open at once, open a new doc in DW, and then start somewhere in the PS document that is the easiest. I try to set my guides to the places I "Think" I will save out.

Then I start saving each image and element and build up the page one image at a time.

The reason I do it this way is a lot of my sites have includes for different parts of the actual page, so letting an automated program do the work just won't work.

I make a header.php, ten slice out the header images (In photoshop I'm thinking to myself, what will be in the header, so sometimes I copy what will be the header into a new PS image, and slice tight (Zooming on a small image is easier than the entire layout), then decide what is the left, the right and the footer, etc etc.

I am very fast, and can desgn and slice out a layout in about an hour.

www.solo-finder.com/index.php was 45 minutes in PS and about 2 hours in Dreamweaver and I ended up with just about an identical PS to DW translation.

Here is a mockup of the two images with simulated GUIDES.

Ive copied out the navigation, to show you I would seperate that into another slice that I could work with closer and more intimately.

This way I could then make mouseovers for the images by just placing a filter over the save out buttons thereby giving me a mouseover image without any work.

Example layout guide prep
http://www.sighost.us/members/Samuel/seventh/ex_layout.jpg

Focus on the navigation to get more intimate
http://www.sighost.us/members/Samuel/seventh/ex_nav.jpg

See, I would save out the elements around the Iframe, then the nav could be in the footer, to the left of the nav would be one image saved out.

As well as load time being slowed by large graphics, you also can run into a problem getting too many requests to the server.

The large the image (Of a highly graphical layout) you can make, the better it is for the viewer on how it loads (This is if you arent using any kind of preloader

[SeventhVirgo]

Wow guys....I had completely given up on this layout. Thanks so much Harp and Samuel for your time. Deeply appreciated =) Hehe funny harp =)

[Shaun]

I think this thread should be saved its very informative ;)

[Samuel]

Another trick is to use a very low resolution version as a BG image (For the far left large image), I forget what it's called "low-scr" or something, that loads first, then is filled out by the high scr (High Resolution) this helps on how it loads as it tricks the user into thinking that the site is loading faster than it actually is.

The low resolution image could be 1 or 2 kbs, while the high res could be 16 to 20 and you can get away with it.

Here is an example I banged out in under 40 minutes.

http://goodhigbee.devimg.com

[kubedawg]

holy crap harp!!! wow!!! i love the winzip tip you gave! i never knew that. nice layouts btw.:hi:

[Harp2]

Kubedawg,

It wasn't a Winzip tip, what I was saying it that I made a zip file with the same name and for ease of downloading the HTML, the sliced graphic and the .PSD file. If this is a feature in Winzip, then it's just by chance. I use WinAce. :angel: Sorry for any confusion.

Thanks,
Harp!

[tristan]

Seventh...that layout is great....shame u give up......

i do like Samuel.....lay in PS to DW..........

[Koobi]

Originally posted by Samuel
Another trick is to use a very low resolution version as a BG image (For the far left large image), I forget what it's called "low-scr" or something, that loads first, then is filled out by the high scr (High Resolution) this helps on how it loads as it tricks the user into thinking that the site is loading faster than it actually is.

The low resolution image could be 1 or 2 kbs, while the high res could be 16 to 20 and you can get away with it.

cool tip for a person like me who doesnt do much web designing :)

i used to slice manually but after i started working i really dont have the time to so i do my slicing the other way(i.e. save them all together) though i would prefer to do them manually but i hear that fireworks works better when slicing for dreamweaver so im gonna try that out sometime

[NoKY]

If you are having trouble with slicing, then just don't slice. I know this might sound stupid, but it works.

The 1st thing you do is save the layout as one pic ( usualy GIF cause its smaller size and good quality) after that just add layers. and if you want to make a roll over image just make the background transparent of what you are making and just slap another layer on top of that. Its realy easy using Dreamweaver... hopefully this will help ya out.

[yourdreamsite]

i find layers very messy and confussing. tales and slicing in defenetly a beeter way.

*off topic*
samuel is the man!!!! one of the best advice, posters artist i seen in a long time, keep up all the help samuel you are great.

[¡V¡]

i'm stuck with this same problem... im gonna give it one last shot then im gonna SCRAP it...

[Koobi]

Originally posted by NoKY
If you are having trouble with slicing, then just don't slice. I know this might sound stupid, but it works.

The 1st thing you do is save the layout as one pic ( usualy GIF cause its smaller size and good quality) after that just add layers. and if you want to make a roll over image just make the background transparent of what you are making and just slap another layer on top of that. Its realy easy using Dreamweaver... hopefully this will help ya out.

Overlapping layers arent compatible with netscape i think.....or was that mozilla?

i think it's better to slice though coz browsers retrieve information via multiple threads so it would load faster if you had slices IMO

a similar thread: http://www.graphic-forums.com/showthread.php?s=&threadid=3758

[gangsta_nerd]

U guys think u could simplyfy this for the new ppl out there? (or just me?)

[Koobi]

Originally posted by gangsta_nerd
U guys think u could simplyfy this for the new ppl out there? (or just me?)

what exactly do you want to know?
BTW..you might wanna reduce the size of your signature image. I think it's over the allowed size :)

[Stephanie]

I also slice manually with the rectangular marquee tool. And, to add to the mix, I also do NOT use tables for layout. I've learned that when you don't use tables, it is much easier to slice everything up.

I start with my layout in Photoshop as a guide to how things are going to look and also how they are going to be placed on the page. I then slice only the parts that I'm going to need sliced (If there is a solid background color on anything, for example, I do not make that an image, but use CSS instead.). While I'm slicing, I use the Info box to note the coordinates of the image that I'm slicing.

After this, I take it into my trusty HTML editor (Flavor of the Week: jEdit) and mark that sucker up using CSS. DIVs and CSS are your friends.

They then turn out a lot like the things shown here:

http://www.pleasewipeyourfeet.com/testpages

I'll post a more thorough tutorial on my way of slicing and add some visual aids when I have more time. :)

[Harp2]

Stephanie,

The link you dropped in goes to a file lists page. Once in several of the files I clicked the .thml pages and parts loaded while other parts did not. I'll check it again when I get home to check if it does it there as well.


Harp!

[System0012]

a lot of ppl are saying how fireworks is better at slicing then imageready truth is for "slicing" they are the same only FW has more hotspot options thats really about it

[Koobi]

Originally posted by System0012
a lot of ppl are saying how fireworks is better at slicing then imageready truth is for "slicing" they are the same only FW has more hotspot options thats really about it

yeah thats what I've heard too. i always assumed it was about the HTML rather than the options.
I figure theres more to it than hotspot options though coz hardly anyone uses hotspots nowadays or am I wrong there?

[NoKY]

Wait, Could someone give me a tut. on slicing in Fire Works or Image Ready.

[Koobi]

Originally posted by NoKY
Wait, Could someone give me a tut. on slicing in Fire Works or Image Ready.

/me waits for Samuel to read this

you know....i've been waiting for dreamweavercafe (http://www.dreamweavercafe.com) to put up its tutes for ages now. Its the sister site of photoshopcafe (http://www.photoshopcafe.com) i believe.

[Bebop]

Those are some nice links Bane.

[r0yksopp]

My 2 cents

I basically design my site in PS first, then jump to IR to slice it, as it's got much better optimising tools. I add hotspots etc in Dreamweaver. I also generally use CSS to control background images and i-frame contents i.e. to stop the whole i-frame scrolling etc. Check out www.viewfinderglos.org for an example.

[m_pressive]

This thread is very useful.
Thanks alot yall

[Neuntoter]

1. slice up in image ready, open all the slices in photoshop.
2. open dreamweaver and start a new doc with a frame on the right and bottom, or left and bottom.
3. start to make the frames you need, roughly.
4. set the rows to the over all size of the doc, f.ex *,500,* and *,600,*
5. then just set each frame to the size of the slices.
6. place all the slices as backgrounds to each frame.

sorry fi this has alredy been answered...

[twisted(sic)maggot]

I work like this... I basicly always get some sort of part I know I will use for text or as a "body" or "main" for the site.
After that I just slice everything up and export it.
Depends on if it is a "boxed" site or a "scrolling" (so it doesn't really have an end so you can add endless long pages) how I slice it.
Eventually I take my ImageReady exported layout, bring it into Dreamweaver so I can quickly replace the stuff with iFrames if needed and then I am done.

[adamrichman]

Could also make slices from layers in IR.

[irjoe]

can any1 tell me how, or a website concerning slicing website layout in html codings?
:D thanks

[iambennu]

Wonderful tips Samuel, Thanks
:angel:
http://emall-usa.com/iamArt/images/iambennuBanner.jpg

[DJD]

Originally posted by Stephanie

I start with my layout in Photoshop as a guide to how things are going to look and also how they are going to be placed on the page. I then slice only the parts that I'm going to need sliced (If there is a solid background color on anything, for example, I do not make that an image, but use CSS instead.). While I'm slicing, I use the Info box to note the coordinates of the image that I'm slicing.

After this, I take it into my trusty HTML editor (Flavor of the Week: jEdit) and mark that sucker up using CSS. DIVs and CSS are your friends .


Here is an example from me....
i've builded up the winXP login....

check it out...
XP-Login (http://www.djd-arts.com/files/xplogin/login.html)

its all build up and aligned by CSS :)

greetz

DJD

[elusion]

I sliced a layout in PS CS...it works fine but I'm getting a thin 1 px line between the different <tr> tags so it doesn't look connected in IE 6..whereas its connected in Netscape 7. How do I get rid of the space?

[c0rn]

Use ImageReady. Its easy if you follow this tut. > http://biorust.com/index.php?page=tutorial_detail&tutid=23

[Richard]

Hey,

im a total noob to this - moving images made in photoshop to dreamweaver. im alright at photoshop but i havent used dreamweaver before.

I was wondering how you save the image from photoshop to open in DW , at the moment it says that it cant do it.

Hope you can help

[RedRage]

i don't know how to slice either, ok so i made the guides with the slice tool, after that how do i actually slice :?, i have fire work and dream weaver, but i don't know how to use the slices. i'm very new at this :cry: :cry:

[SeventhVirgo]

Well after you slice them you need to save each slice as a different image. Then you put in into dreamweaver/fireworks in tables/cells. If you are not familiar how basic HTML and coding works, then you should probably get familiar with it first so you know how to go about it. There are some basic HTML tutorials on www.webmonkey.com that helped me out ...

[renapunx]

Originally posted by RedRage
i don't know how to slice either, ok so i made the guides with the slice tool, after that how do i actually slice :?, i have fire work and dream weaver, but i don't know how to use the slices. i'm very new at this :cry: :cry:

Actualy, you've got a button on the top-right (I think.. not to used to FW) that's says "Quick Export"... click there.. Select Export to DreamWeaver... Choose a folder, and then export... you are going to have the HTML file and the images sliced...

But what SV said is true... you better know some HTML basics...

[Richard]

Ahhh i c, so you slice it up - im using photoshop and DW, so i make the image in ps, then i slice it in ps then i export to dreamweaver?

Someone please help me out? Cheers

[SeventhVirgo]

You should slice it in image ready :D.

This tutoial should help you understand everything better and is the basics for what to do:
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/website.htm

[Richard]

ahh ok thanks alot virgo :)

[Visual]

I know how to slice, but if you're making a layout that have buttons diagonal or something, how would you slice that?

[renapunx]

Originally posted by Visual
I know how to slice, but if you're making a layout that have buttons diagonal or something, how would you slice that?

I don't recomend to do this, but if you REALLY want diagonal buttons, you can slice the menu on one img only, and map that img with a polygon... I think photoshop help file got's what you need to know to do that... If not, I'm preety sure that Dreamweaver has

[RedRage]

Originally posted by SeventhVirgo
You should slice it in image ready :D.

This tutoial should help you understand everything better and is the basics for what to do:
http://www.photoshopcafe.com/tutorials/super%20tutorial%202/website.htm
thats an AMAZING tutorial, i learned a lot with it, thanks for posting it!

[SeventhVirgo]

Hehe NP :D

[dar_chu]

Ok I have a question, alright I made a slice on my layout and I wont to make an iframe for the content on the site it there a way to make a slice in to an iframe.

[SeventhVirgo]

If it s a picture, you can just set the picture as the background of the iframe.

[gotmerunnin]

Alright, I know I'm new, so this may have been answered before, but I still don't understand it. I have sliced my layout, jumped from Photoshop to Imageready where I saved as HTML and Images, and I can open the HTML file in Dreamweaver fine. As soon as I open it in Dreamweaver, I preview it in browser, and it looks fine. After that, I delete the main image in the table, the one I want to set as background so I can put text and pictures on it and all, then I set it as background image through modify>page properties. As soon as I'm done that, I preview in the browser and all my slices are all over the place, but they look fine in Dreamweaver. Any help? I'm very new at this, so I would need a deatiled explination! :-)
Sorry for being such a newbie (I did try all the tutorials I could find, I searched on google and all, which brought me to this forum and this thread, but nothing will work)!
Any help will be appreciated.

[SeventhVirgo]

The only way we could help is if you show us the HTML code. I'm thinking that when you deleted the main image, you also delete the cell (the place where the row and column meets) so the whole layout got screwed, but looks fine in dreamweaver.

You can view the HTML source by, while having your layout opened in IE, you got to View -> Source.

Paste the code here using the PHP feature... like the quote/img/url. Because if you just simply post it, it probably wont show :S

[gotmerunnin]

Alright, nevermind that problem, I fixed that. Now I have it all set, but how do I make it so my entire layout will fit any browser in any resolution?

[SeventhVirgo]

You should ask in the webcoding section.

[White_hell]

with what width and heigth do you people make layouts? because I want to make a layout just like this that you can scroll endlessly down and not liek the picture in this thread(first)
that you only have 1 little part for text!

[dar_chu]

Huh? I dont understand your question... But most people design there layouts for every Resolution so mostly 800x600 or 1024x768 I think you might be referring to an iframe but I am not sure...

[onedarkangel_uk]

Fire works mate is awesome for slicing.

[nikoz]

if you use dreamweaver as your html editor i suggest you get fireworks it will make your life easier.

if you want to stick to photoshop then get Adobe InDesign or GoLive

[chobo321321]

I use ImageReady CS to slice the site, optimize each slice (graphic quality) then just goto output settings specify if you want image ready to output your sliced site in tables, or divs with css then go save optimized as, and give it a name. It will output an html file with all the code already done, and another folder with the images in them.

The program is extremely intuitive, and easy to learn you don't even need a tutorial, or book on it. The only two tools you need to know are the slice, and slice selection. The interface looks like photoshop, so thats another advantage to using it.

[deverhart]

very informative thread... thanks for all the info!

[fifeclub]

Old thread but I have a question about slicing in Photoshop (7) too. I hand-code everything so I don't care one bit about any other programs. I just want my images.

1) I don't want any HTML output or CSS or any other junk. Just the images only. Everytime I want to save any slices it remembers my output settings but I have to manually switch the Save as Type from HTML and Images to Images only, and Slices from All Slices to Selected Slices. Do it once and it's a minor inconvenience but do it repeatedly and it's a royal pain in the neck. How can I make these options default to what I want? (I don't like doing all slices at once because I like to work in many PS layers)

2) Less important, but is there a way to take make Photoshop save to html at every layer level? Like if I have a PS7 file with 50 layers (like different resized photos), can I tell it save all 50 layers as seperate optimized jpg or gif files, or do I need to save as HTML 50 different times (each time going through the trouble mentioned in question #1).

[Shaun]

This thread is so useful.