Jump to content

Slicing Photoshop layout


chisao101

Recommended Posts

I have a layout design that I made in photoshop. I'm having trouble figuring out how to slice it correctly. The content of the site is going to be restricted to the width of the rectangle in the center at 960px. I want to make sure that the page can expand when the content exceeds the height of the actual design layout. I also want to make sure that the shadows are kept. I turned off some of the layers in this image because all the text and images will be added with the html and css. It's just the basic background stuff that is confusing me.

 

I originally though of slicing a thin strip from the center of the rectangle horizontally to get the background for the content, but if you notice, the top and bottom of the rectangle overlaps into the header and footer.

How would I slice it to be able to keep it optimized and keep it looking like this image on the site, while allowing the content area to grow as needed?

 

Thanks in advance for any help you may have. :)

 

photoshop_layout.png

Link to comment
Share on other sites

Use png transparency images for your content area using repeat-y. You only need it to be one pixel high. The top and bottom portion of the content area will use about 5-10 px high images.

 

Assuming you have a fixed width wrapper you need to adjust the width to the outer edges of the shadow. Based on your image you've provide it looks like about 900px. The html would look something like this:

 

 

<div id="wrapper">

<div class="topbar"></div>

<div class="contents">

content goes here

</div>

<div class="bottombar"></div>

 

</div>

 

CSS:

 

#wrapper {width: 900px;}

 

.topbar {height: 10px; background: transparent url('top transparent png image here') no-repeat;

 

.contents {overflow: hidden; background: transparent url('middle repeated transparent png image here') repeat-y;

 

.bottombar {height: 10px; background: transparent url('bottom transparent png image here') no-repeat;

 

 

It's just a rought draft but this should give you an idea on how to approach this and get the results you are looking for.

  • Upvote 1
Link to comment
Share on other sites

Use png transparency images for your content area using repeat-y. You only need it to be one pixel high. The top and bottom portion of the content area will use about 5-10 px high images.

 

Assuming you have a fixed width wrapper you need to adjust the width to the outer edges of the shadow. Based on your image you've provide it looks like about 900px. The html would look something like this:

 

 

<div id="wrapper">

<div class="topbar"></div>

<div class="contents">

content goes here

</div>

<div class="bottombar"></div>

 

</div>

 

CSS:

 

#wrapper {width: 900px;}

 

.topbar {height: 10px; background: transparent url('top transparent png image here') no-repeat;

 

.contents {overflow: hidden; background: transparent url('middle repeated transparent png image here') repeat-y;

 

.bottombar {height: 10px; background: transparent url('bottom transparent png image here') no-repeat;

 

 

It's just a rought draft but this should give you an idea on how to approach this and get the results you are looking for.

 

Thanks. I'll give that a try. I'll let you know how it turns out.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...