www.webdeveloper.com
Results 1 to 3 of 3

Thread: Pixel perfect cropping???

  1. #1
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    Pixel perfect cropping???

    Moring all,
    I have a page based around a grid, as shown here: http://www.holtworth.net/tht/index.php.
    Some of the grid lines are the white background showing through spaces between the divs, some are part of the image.

    They don't line up, even though they were all created in Illustrator and cropped pretty accurately in Photoshop, and placed using CSS

    So,
    • Is there a way to crop images in Photoshop to exact pixels?
    • Is there a better way of creating a layout like this?

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Since you’ve been underwhelmed with comments, I’ll throw in a few suggestions.
    Is there a way to crop images in Photoshop to exact pixels?
    In PhotoShop, set your cropping size in the menu bar to whatever size you want your “chunks”. Then open up your “Info” palette and click the “Info” tab. Click the “Crop” tool and drag over the top of your image. In the Info tab, you will see the x and y coordinates of the starting point of the crop. So for example, if you are trying to create 100 X 100 cropped images, drag the crop top until x = 0, y = 0. Drag the crop tool to 100, 100. But notice that the dimensions are 101, 101. OK, so just drag to 99, 99.
    For me the image still looks 1 px from the edge, so nudge as needed. Then your second and following crops can be calculated exactly, according to the x,y coordinates.
    Second part:
    Is there a better way of creating a layout like this?
    Probably a number of different answers here.
    One simple way, create your whole background image in one piece in Illustrator or PhotoShop and hotmap links over the top of the background image. Perfect layout…. not the greatest way to do it.
    Second, be very precise in your measurements from cropping to layout. Use CSS as you have but be sure your image size exactly matches the <div> width and height.
    When you see a small bit of the image being repeated under the main part of the image, it’s because the image and <div> dimensions are not exactly equal. For example, the “couples” image…image is 258 X 162, fit in a <div> which is 250 X 165. Each image-<div> must match exactly or there will be a repeat of a portion of the image, as it’s now set.
    With a little work, you could get the appearance very close to perfect. You might want to try using colors other than white as background color for the <div>s since your <body> is white. This will help you ID if the problem is inside the <div> or in the CSS. Also put in no-repeat for those images just in case the your image size and <div> size is off just a bit.
    Best of luck to ya,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    Thanks Eye!

    Good points, well made.

    In particular, the crop options in Photoshop are new to me, and will be useful.

    Cheers!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles