One of my Photoshop students brought these to my attention. The original inspiration for this series seems to be an installation by Salvador Dali:
Be sure to look closely. (Click on an image for an enlarged view.)
The attribution for these is ambiguous. The watermark is apparently a URL which is the “Iranian Progressive Group” hosted by a server in Seoul, Korea.
Some of my best clients are realtors and architects but if they present me with their own photography, I can count on the need to spend a little more time in Photoshop than usual. Why? Because invariably photography of architectural elements appears distorted. The effect, known as "keystoning" or "parallax distortion", is when the camera lens is tilted with respect to the subject. For instance, if the subject is a tall building, the tendency is to look up. Tilting the lens up results in the top of the building appearing farther away. Similarly, when using a wide-angle lens to shoot close-in interiors results in the walls appearing tilted toward the focal center.
This is a very quick tutorial to demonstrate how to recognize and correct this type of distortion.
The white lines drawn on these examples indicate the degree of distortion. These are extreme but it helps to view architectural images using a grid to check for distortion.
In Photoshop, the grid color and size are set in Preferences (Preferences > Guides, Grid, & Slices) Display the grid with View > Show > Grid (which also toggles the grid off).
Or, use guides to indicate true vertical or horizontal angles. Click on the vertical (y-axis) ruler and hold down the mouse button to drag a vertical guide. If you need the horizontal guides, click and drag from the horizontal ruler. The guides are shown in red:
The choice now is whether to use the Lens Correction filter (Filter > Distort > Lens Correction…) or Free Transform (Edit > Free Transform). I prefer Free Transform mainly because it’s a little faster, especially for simple distortion.
Command-click (or Control-click for PC) and drag a corner handle outward until the the distorted edge lines up to the grid or guide.
Repeat for the opposite corner.
This may affect the first alignment, so repeat the first corner, if necessary.
When the alignment appears to be correct, double-click the image or press the Return (Enter) key.
Simply correcting the vertical alignment may result in horizontal distortion where the aspect ratio is no longer correct (objects appear wider than they should). Once again, choose Free Transform and increase the height of the image by clicking (without Command this time) the center handle and pulling it up. To avoid tilting the image, hold down the Shift key as you pull.
Double-click the image or press the Return (Enter) key.
Compare before and after in these 3 images:
The challenge: I had designed a printed page layout with a different visual element on each page to help to break up rather long narrative. The client wanted this to be a template for her website, including the text-wrapped image. Below is a (different) page mock-up using a similar visual element in the lower left corner:
To make the page look similar to the printed version, the text to had to wrap around the image, not just squarely around an image with float:left styling. However, this is not as easy as it seems. I was familiar with the “sandbox’ technique, in which a series of sandbox DIVs is defined that block out the image so that the text can flow around them. This is cumbersome and a little time-consuming. However I stumbled upon a relatively simple technique that takes advantage of the <canvas> element.
By way of explanation, the <canvas> element “creates a fixed size drawing surface that exposes one or more ‘rendering contexts’, which are used to create and manipulate the content shown.” The term “rendering context” merely refers to either a 2D or (sometime in the future) a 3D image. To “draw” something, the <canvas> element is called by a script. In this case, Jacob Seidelin has developed a script, known as prettyfloat.js (download here).
Using this small script you simply give your image a CSS class of either “sandbag-left” or “sandbag-right”, depending on how your image should float. If the browser does not support <canvas> and image data access, a fallback mechanism simply sets the CSS float property to “left” or “right”, degrading to the old rectangular text wrap.
First, save the script with your project files (in this example to the same directory as the HTML file).
The image needs to be either .png or .gif to work properly, meaning it must have transparent pixels in which the text block will flow up next to the opaque pixels. To achieve this, the open the image in Photoshop, then:
Save for Web & Devices using the PNG-24 presetNow for the code:
In the <head> section of the HTML file, call the prettyfloat.js script:
<script src=”prettyfloat.js” type=”text/javascript”></script>
(Change the URL if you store your scripts in a separate directory)
The <body> section with just the wrapped text segment of the page is as follows:
<body>
<div class=”container”>
<div style=”position:relative; width:550px; height:450px;”> <img class=”sandbag-left” src=”flowers.png”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida.</p>
</div>
</div>
</body>
A test of how this renders in different browsers (using Adobe BrowserLab–more about that later) reveals that Firefox 2.0 on Mac OS X looks as intentded:
Chrome on Windows XP renders properly:
However, as expected, IE7 on Windows XP does not, though the results are acceptable (sort of):
Most newer browsers now support the <canvas> element so this is really is a relatively painless way to achieve a layout that has the look of a printed page.