A push in the right direction?

[slantednet]

Hey all,

I'm trying to get started in simple web development, and I'm wondering if I can get a push from the ol' pros here.

My question mainly is how do you go from a mockup (like your design in photoshop) and slice it up? What tool do you use to ensure the slices line up so that you can put them into your web layout?

Thanks for any input..

Mike

 

[lemmin]

I beleive it's called, "Rectangular Marquee Tool" :p.

I just select the parts one at a time, you can use the info toolbar to assure you are getting the right dimensions, then cut them and paste into a new file. Cutting over coppying allows you to make sure you dont get any part of the previous picture in the next one. Just don't save afterwards . You will want to make sure you merge all the layers down first so that you get a single flat image.

Then when you create the html, just put it all in tables with the cell set to the specific dimensions of the respective picture.

I know there's other ways of doing this and even programs, but this is simple enough for me.

 

[slantednet]

thanks for your input...

my problem with doing it that way I seem to cut into other areas of the picture, or don't cut enough, say the buttons... and my alignment was usually off but I think that's because I wasn't watching the oh-so-obvious info bar

Thanks again for your input.

 

[StudioWorks]

I think you may have to read more about slicing layouts in photoshop. U can find some good tutorials at good-tutorials.com or at tutorialized.com

SW

 

[RaptorRex]

I was just about to post a how-to on this, so I posted it early. You can see it at http://upwithabang.com/css-how-to.html

Explains how to do cross-browser compatible layouts using DIV tags instead of tables and briefly explains why tables should not be used.

One thing it does not go into (yet) is how to plan out your DIV layouts. I will do that here.

The rational I use for my technique is that the human mind can only reliably track 4 items simultaneously. It can be very confusing to try to remember the organization of 20 cells that are all different sizes and embedded within and without eachother. So I split everything into pairs.

Once I have my layout decided, and my "cuts" of my GIMP image, I put it on paper and draw out pairs of sections that go side-by-side. Usually the top pair is "menu" and "content". So they become my 2 top level DIV sections. Float each div the same direction, left or right. Their total width should equal your page width. Do not apply borders or padding, else they will not appear correct in IE.

After I have chosen my top pair, I pick one of the divs and start pairing down its contents. And I go down cutting up divs until I am done.

Of course, the world is made of more than pairs, but it is a simple start out strategy. Sometimes I may have 5 divs embedded at the same level in their parent div. That is easy enough to track.

I also generally work from the top of the page downwards, trying to make horizontal bands of div pairs.

The best part is, no more tables ! woohoo !

I think my main page at upwithabang.com has only one one small table for the login form which I think is acceptable because it is a data sheet in way.

I'll be adding more to my how-to as time goes on. And actually it isn't even publicly linked yet, but hopefully soon as I think of more topics to cover.

I hope this helps.