Pixel perfect cropping???
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
- Is there a way to crop images in Photoshop to exact pixels?
- Is there a better way of creating a layout like this?
Since you’ve been underwhelmed with comments, I’ll throw in a few suggestions.
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.
Is there a way to crop images in Photoshop to exact pixels?
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.
Probably a number of different answers here.
Is there a better way of creating a layout like this?
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
Good points, well made.
In particular, the crop options in Photoshop are new to me, and will be useful.
Users Browsing this Thread
There are currently 3 users browsing this thread. (0 members and 3 guests)
Tags for this Thread