Web Development

Creating a website from Photoshop to CSS code

Creating a fourth slice

Since the food images overlap somewhat with the header and body backgrounds, we need to make that slice separate. Next ,we will hide those active layers and make the food image collage at the top left of the header and body sections visible, therefore creating a fourth slice for that section.

Then we will name and save the slice as we did in the steps for the first three above. I named this slice Food Images. We now have four slices that will be used to build our main sections of the header, body, and footer portions of the layout.

About

Selena has been at TechRepublic since 2002. She is currently a Senior Editor with a background in technical writing, editing, and research. She edits Data Center, Linux and Open Source, Apple in the Enterprise, The Enterprise Cloud, Web Designer, and...

3 comments
dstoltz
dstoltz

So is the food images a absolutely positioned div? Doesn't really explain how this image sits on top of the header and the body areas.....

galegopc
galegopc

I'm trying to get a grip of the whole process of taking a PSD file and make it a webpage and was very excited about this tutorial but shame on me not reading it all along before downloading files. Tutorial was great up to the moment you need the most that is the placement of the graphics to achieve the results you have there. I really don't want to get the ready product and trick it but still believe a tutorial is to learn and that has never happened. Nice effort but poor finalization made this tutorial senseless unless one doesn't care of learning the process but just copying your files and using them on another project. Sorry to be so harsh but it is the end result that killed it.