HTML & CSS: The Good Parts

Image Production

Images that stand on their own as page content usually benefit from the application of the same composition fundamentals as any other graphics of the same type (such as fine art, commercial art, or infographics). While the original assets you receive might well be excellent, you will often want to utilize any number of simple image production techniques before uploading images to a site repository, staging environment, or production environment. The following passages about composition and production are aimed principally at readers with a strong bias toward technical experience.

Cropping

You’ll often be dealing with a folder of images that all differ with respect to aspect ratios, quality of composition, or both. To fit all of these into a design, you will likely need to perform a considerable amount of cropping.

Note

The following instructions reference detailed workflows used in Adobe Photoshop. For the sake of brevity, the transformation functions provided by the Crop Tool, Edit → Transform, and Image → Rotate Image are not included.

In this situation it’s best to use the Rectangular Marquee Tool (the uppermost item in the left column of the two-column toolbar, and the second item in the one-column toolbar) to select an area constrained to the Fixed Aspect Ratio that will be retained. If possible, the selection should be dragged so that the retained image will gain the greatest benefit from the Rule of Thirds, which is discussed on this book’s companion site.

Once ...