SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i slice this background

    how can i slice this background



    only i can do take 1px from striped background and add it to body element
    but what bout white one like a paper i take it as the whole image or something else
    plz guide me

    Thx
    judge0

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would take the edges (top, bottom, right, left) where the bottom page sticks out

    since the top page is white, it shouldn't be a problem to just make that white in the background of the table, or however you are makeing the site

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would take the edges (top, bottom, right, left) where the bottom page sticks out
    can u clarify more.
    now i think slice it just 2parts( top, bottom) but still this choice as i take it as whole image

  4. #4
    SitePoint Member cipals15's Avatar
    Join Date
    Nov 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What he/she mean is that you removed the inclined edges of the paper background. Thus, the only remaining part will be a white rectangle background.

    Take the edges: Top, Left, Right and Bottom.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What he/she mean is that you removed the inclined edges of the paper background. Thus, the only remaining part will be a white rectangle background.

    Take the edges: Top, Left, Right and Bottom.
    me too i just ask him/her to clarify more.

    but till now no one replay how can i slice this withe background

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How to slice it depends on the page it will be used for, is the width fluid or fixed, is the height too?
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fixed layout and the height around 900px but may the height increase or decrease as content required

  8. #8
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you want the white pages to slide accross that darkbackground? Then I guess you would need to make some parts transparent with gifs or something?

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Due to the angles of the lower paper, you would be limited to a fixed size - the design would not allow any sort of dynamic resizing in width or height. As such, there is little point slicing it at all - I would crop it the the minimum size possible and experiment with different graphics formats to determine which one results in the smallest file size. It can then be applied as a background to your site container, with the body background a narrow slice as you have suggested.

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this my try for white background i make only (top-bottom)



    -------------------------------

    bottom



    is there any better way than my own plz share it

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said above, I don't see the point of slicing this at all, especially not saved in two different formats. You have also chopped off some of the shadow, which would result in an abrupt outline. With one graphic cropped to around 666px wide and 800px high, a jpg format can be compressed to about 20k total size with good image quality.


  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    start like this,
    1. make the background separate
    2. slice to the red lines approximatly( save as png/gif etc. to save the transparency)
    3. use css to put those images on a white box around the edges

    saves on the huge file you have 4 smaller file

  13. #13
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by craqgerbil View Post
    saves on the huge file you have 4 smaller file
    If these smaller images are png-24 with alpha transparency, then the total size of the four would most likely be larger than the 20k jpg I posted above. You would also need three or four additional non-semantic html elements to attach the images to, as well as hacks to make it work in IE6. The image is not changing in size or moving in relation to the body background, so why complicate matters? - I like the K.I.S.S. methodology.

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by judge0
    ...
    is there any better way than my own plz share it
    As Centauri says it would be better not sliced I think.

    Maybe use the image as a "foreground" background and make the site grow in height only streching the image height, but it could maybe also be a fluid site like this test example:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    html { 
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow: hidden;
    }
    body { 
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    img {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    #wrapper { 
    	position: absolute;
    	margin: 35px 0 0 7%;
    	width: 86%;
    	height: 92%;
    	overflow: auto;
    	overflow-y: scroll;
    }
    #content {
    	padding: 1px 0;
    }
    #content p {
    	margin:200px 0;
    }
    </style></head><body>
     
    	<img src="backgrounda4tp3.jpg" alt="">
     
    	<div id="wrapper">
    		<div id="content">
    			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
    		</div>
    	</div>
     
    </body></html>
    And here is the 12 kB image:
    Last edited by Erik J; Nov 22, 2008 at 06:01. Reason: The image link
    Happy ADD/ADHD with Asperger's

  15. #15
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Egypt-Luxor city
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    start like this,
    1. make the background separate
    2. slice to the red lines approximately( save as png/gif etc. to save the transparency)
    3. use css to put those images on a white box around the edges

    saves on the huge file you have 4 smaller file
    really this nice idea i want to hear something like that but as Centaur said it's hard to reach more extra element and hack
    -
    a jpg format can be compressed to about 20k total size with good image quality.
    what software are u used to?, i reach 20k but i think the quality affected



    @erik.j

    1)may i ask why u repeat margin:0 padding:0 to the body

    2) stretching the content will be on account of the quality of the image

    3) overflow-y: scroll this harm the design even if the content not grow
    Last edited by judge0; Nov 22, 2008 at 09:06.

  16. #16
    SitePoint Member cipals15's Avatar
    Join Date
    Nov 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    If these smaller images are png-24 with alpha transparency, then the total size of the four would most likely be larger than the 20k jpg I posted above. You would also need three or four additional non-semantic html elements to attach the images to, as well as hacks to make it work in IE6. The image is not changing in size or moving in relation to the body background, so why complicate matters? - I like the K.I.S.S. methodology.
    I think you're right but never tested the size difference. The purpose of dividing the image is to actually optimize for users will slow internet connection. Loading the whole image is slower than loading the divided images.

  17. #17
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by judge0
    @erik.j

    1)may i ask why u repeat margin:0 padding:0 to the body

    2) stretching the content will be on account of the quality of the image

    3) overflow-y: scroll this harm the design even if the content not grow
    1) The browsers default margin/padding on the body could move the content but not the image. The body must not hide overflow so it need its own rule-set.

    2) Yes.

    3) It's an option.
    Happy ADD/ADHD with Asperger's

  18. #18
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cipals15
    Loading the whole image is slower than loading the divided images.
    No, it is the other way around. Adding to the images size is also the extra http requests needed.
    Happy ADD/ADHD with Asperger's

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And yet loading each image incurs a separate "handshake" between the browser and the server. Sometimes it's actually faster to load a single image instead of multiple ones. (It's also one of the reasons why CSS sprites are so popular.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •