I'm back, for now.

Slicing: I personal have used two programs to do the slicing, ImageReady and Fireworks. ImageReady comes with Photoshop and Fireworks is a Macromedia product.

What is slicing?
Slicing is taking a large image and cuting it up into smaller images, plain and simple. I have a graphic artist draw a website in a photoshop document and then they pass it along to me. I take that and then "slice" it up into smaller pieces. You can then export the whole thing (code and all) and you have a website. I do not recomend doing that though (not a fan of table layouts, I prefer CSS). I take just select slices and manipulate them with CSS. Lets take the gradients in the first document. Instead of creating a slice of the whole square, I just take a slice 10px wide and then repeat it in the background with this:
Now the whole css thing is another story.

CSS uses the <div> tag to hold elements and you assign them class or id attribute to connect them to your css. (this is just one way, there are atleast 3 way to use css: inline, in the head of the document, or in an external file) There is more that I can explain here. I have been at it for a year now, and I am just starting it use it efficeintly. Check out: http://www.sitepoint.com they have some great articles on CSS. You can also check out some of my sites: http://www.rcswebdesign.com or http://www.konetainc.com/index.asp (this one is still under development) and check out the sources. You will see the div tags with class and id attributes. You can then check out the css file, if you can not find it on your own, send me an email and I will send you a link.

I hope this helps. Let me know if you have any more questions. I did a lot of research on the internet to help me learn. I would be happy to pass along some links if anyone is interested.

Yep, basically.....most designs on the internet are created in programs like photoshop. The designs are then sliced into images (many smaller images) and then put together using html/css.

Gone are the days off just html tables for design.....

It seems like you got alot of help from the replies above though! If you need any help with anything im preety experianced with photoshop and design so dont hesitate to drop an email to me.

Hey thanks folks. That clears up so much. But I still have a question. I have played with CSS and I am still big lover of using tables to format the layout. I know it is not highly appreciated, but it is easier. But I am a firm believer that easier is not necessarily better. So I want to use CSS. And maybe CSS is easier, but I find it to be an extreme pain to use for positioning, and layout. Coloring and styling CSS works great.

Thanks again.

Well paladine, I can tell you right now css is not easier (in my opinion) but, it is much more compatible across browsers and platforms. My website is designed in css and has been tested in mozilla, ie, opera and netscape and it looks identical across all those browsers, so I'm happy . It is a pain for positioning and layout but you just have to tweak it... alot until you get it. That and look up tutorials etc. I use padding and margins alot, but it depends on what you want it all for.

Sorry I couldn't be more help,

Slade

Slade, for more graphical designs this is usually not the case. I am a fan of table-less design, the code is so flexible and clean and easily managed with an external CSS file, but I dare you to get a hip top, or download an old netscape browser and find a highly graphical site that displays properly, or even close to it.

That doesn't mean you have to use tables, that just means don't do away with them just yet if you are going for a highly graphical design.


As for everybody saying Photoshop is the way to make layouts like that, I disagree a little to a point. Photoshop is the best raster image-editing program in the world, but it is not the only one. Personally I use fireworks because it slices images into perfect code much better than adobe products once you learn how to slice properly. I was a Photoshop guy for a long time until I got more web based. Now my tool of choice is a more comprehensive solution for creating compatible web sites. Took some getting used to, but I am glad I did it.


People who draw graphics instead of altering images and placing simple shapes usually use programs like illustrator, in design, and freehand (freehand sucks, one of the only MM products you will hear me say that about).

To slice images properly requires knowledge of HTML. One has to understand where lines should begin for one part of an image and end for another, and be able to visualize those elements in tables and or divs. Imagine trying to code a table or series of divs to hold your image into a site. If the code would be huge and unmanageable, rethink where you would draw that line. The one thing that I can say I have gotten really really good at in my years of using graphics programs and creating websites is learning where to draw those lines. Unfortunately, it is difficult for me to articulate. You have to be able to see the code behind when you create those slices, otherwise you are looking at a nightmare to manage when all is said and done.

Sites that look amazing like that first one the poster pointed out are often created by people with print and corporate design experience who are working with web geeks like ourselves. Sometimes it is hard for a coder to see beautiful imagery and create it, and sometimes it is hard for a designer to see clean compatible code and create it from their beautiful imagery. It just takes balance.

I meant in general

As a general rule the aim is to get your information displayed in version 4 browsers, rather than actually rendered as it would be to a modern browser. With that aim in mind the @import hack is extremely useful: http://w3development.de/css/hide_css...owsers/import/

http://www.csszengarden.com/ - check out some of the different styles you can apply to one html page to completely change it. Some of these are nearly as good as the first ones posted I think, tho you have to look around to find the best ones.

I'm not that good with CSS so I tried these examples by using tables. It came out rather good looking.
I made a frame for my page and cut out the four corners, and then a slice from all four sides(which I then repeat to fill out the space between the corners).

How is this achieved by using CSS?

Maybe this should be in a separate thread, but anyway, it's not that off-topic at least.

You'd either use a large background image and use absolute positioning to just drop the stuff over the right part of the image, or you'd break the image up into smaller pieces and use them as backgrounds, repeating and tiling where necessary, and floating the stuff into position. The second option would have the best download time, the first would take about 20mins to make.