Jump to content


Photo

Slicing Photoshop layout


  • Please log in to reply
2 replies to this topic

#1 chisao101

chisao101

    New member

  • New Members
  • 2 posts
  • Facebook:https://www.facebook.com/profile.php?id=100002040942723
  • LocationRaleigh, NC

Posted 15 January 2012 - 03:28 AM

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. :)

Posted Image
  • 0
"The consciousness of self is the greatest hindrance to the proper execution of all physical activity." ~ Lee Jun Fan (Bruce Lee)

#2 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,618 posts
  • LocationTexas

Posted 15 January 2012 - 10:33 AM

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.
  • 1

#3 chisao101

chisao101

    New member

  • New Members
  • 2 posts
  • Facebook:https://www.facebook.com/profile.php?id=100002040942723
  • LocationRaleigh, NC

Posted 15 January 2012 - 11:53 AM

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.
  • 0
"The consciousness of self is the greatest hindrance to the proper execution of all physical activity." ~ Lee Jun Fan (Bruce Lee)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users