Category: Graphics


When I was redesigning my site recently I looked for a super-fast little tute on how to do this. I didn’t find one, so I wrote one myself. Enjoy (and I’m in CS2, but that shouldn’t make any difference).

1. Open a photo in Photoshop.

2. Duplicate the layer and name it ‘image.’ Turn off the background layer for safekeeping.

Merged layers

3. Create a photo border – I found that if I just stroke the image using layer styles, it gets all pixelated when you twist and distort the photo. This seems to work much better:

  • Increase the canvas size for your photo by 125% to give yourself room to work.
  • Create a new layer – no need to name it – and put it behind the ‘image’ layer.
  • Draw a rectangle in white on the new layer, making it a little bigger than the image as shown (mine has a green background so you can see better).
  • Merge the ‘image’ layer and this border layer together by selecting both layers in the Layers palette and right-clicking; choose ‘merge layers’ to combine them.

4. Duplicate the image layer and name it ‘image2.’ Turn off ‘image.’

5. Double click the ‘image2′ layer and add a drop shadow with the following settings:

  • Opacity 40%
  • Angle 90%
  • Distance 2
  • Size 0
  • Spread 2
Distorted image

6. Now take ‘image2′ and rotate it in a way that looks good to you.

7. Now the fun part – go to ‘Edit > Transform > Distort’ and adjust your image however you like (shown at right). You might also play with the Perspective and Skew transforms in this menu.

Warping

8. Go to ‘Edit > Transform > Warp.’ Select the bottom-right anchor and drag it out and up a bit to make it look like it’s curling upward, then do the same with the bottom left anchor. Drag the top-right anchor up and out just a little too if you like (see image at right).

9. In the Layers palette select your ‘image2′ layer. Right-click on the dropdown arrow to the right and select ‘Create Layer’ near the bottom. Click OK on the warning screen that pops up.

10. Select the layer ‘image2′s Drop Shadow.’ Change the fill to 45%.

Final image

11. Go to ‘Edit > Transform > Warp’ with the shadow layer selected. Drag the bottom-right and bottom-left anchors down and out a little bit, then drag the top-right anchor out to the right as shown.

And that’s it. You can play with the shadow settings, degree of distortion and warping to make your curls more or less extreme. I hope this helps!

I was searching for a slideshow script with captions and discovered Slideshow2 this week – it’s a Javascript/Mootools application and I’ve just installed it on a new site.  Not working in IE yet but I know this is due to a mistake I’ve made – the demo works fine.

This script has options to do justabout everything; nice captioning, fade-ins, slide-ins, thumbnails in various positions, the zoom-in effects… I foresee a lot of use of this script. Here’s the demo site.

I’m always interested in finding new ways to make footers more useful and attractive. Christian Watson had a nice article featuring 76 (!) examples of approaches to footers. A lot of good ideas here.

An inspiring look at some really cool pixel-based designs.

Found a nice color tool this morning – it extracts multiple color palettes from any image you upload or from a random image it pulls from Flickr.

I found a nice online color tool today – a full Pantone chart with RGB and HTML conversions.

© 2012 position: relative; All rights reserved. Powered by WordPress.