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!

Some of my thoughts as I went through the process of redesigning my business site over the last couple of days…

Red Kite site from 2007

My old design had been up for about 13 1/2 months. That was starting to seem like a very, very long time for a web designer’s site and that was irritating me that I couldn’t find time to do it, much less even start thinking about what I wanted to do. The one big thing that finally got me going was that I wasn’t showing off my work very well – I didn’t have a big bold graphic showcasing my most recent work. Wanting to make a change in that aspect of the site got me thinking.

The things that bothered me about the old site, primarily:

  • It was too narrow on the page – not an elastic layout
  • The red grid at top and bottom seemed cool when I first did it, but was looking very dated recently
  • I wanted something more bold and fresh-looking
  • I wanted to do more with graphics, show off a bit more skill and have more color and images generally

On the new site, I replaced the gradient grids with a more subtle texture and grey gradient. I replaced my old logo with the new sticker logo that I use on my documents, and removed the search feature, which saw very little use.

Red Kite site, Nov. 2008

I moved the client login link up where the old search box was, and added a button with a CSS sprite rollover. I changed the tagline from ‘beautiful sites, inside and out’ to ‘beautiful sites from the ground up’ to better suit my kite metaphor.

I replaced the code-heavy (yet 100% CSS) inverted tabs with a super-simple text menu. And, I added a big image showcasing the current/most recent work with a bit of text about my contribution to the project and a link to the rest of the portfolio.

viewworkI changed the link and button colors to a deep sky blue to contrast with the red and grey and also to again refer to the kite metaphor. For stand-alone links, I made a bullet with an arrow to attach to the left of the a tag.

And most importantly, I made a new, bold red area with large friendly text and this is where my H1 tag and introductory paragraph for each section/page now reside. This is the first thing that catches a visitor’s eye and the most important text on the page, both for visitors and for search engines.

Overall, I’m very happy with the new site. I think it’s much more open and readable and more up to date in appearance. It was well worth the 13 hours or so it took from start to finish.

Just launched the redesign of my business site, redkitecreative.com. I was very happy (and a little surprised!) to find only two errors in IE6 after launching; both taken care of with a change to the conditional comments.

I estimate it took about 12-13 hours total for the design work and switching over all the files to the new format. I still have a few things left to do, including a new WordPress template, but that can wait for a week or two.

On Thursday afternoon I drew up an idea for a website redesign for my main business site. Later that afternoon I started coding – and it was good. That night I started switching pages out, until about 1:30 Friday morning. I did this some more on Friday – all that morning and part of the afternoon.

I just finished the last page and it’s ready to upload, but we’re going to go to the gym, lunch, post office and out for a bit of shopping first because I know I’ve missed some things. But I’m excited about this new look.

Just in case my machine explodes while we’re gone, I’m going to dump all these new files onto my webserver for now…

What a great little application!

My client wanted a very simple, very sleekand Flash-like gallery for her portfolio. I installed Simpleviewer a few hours ago and just finished my first gallery (with an hour break for an Asiago cheese pretzel at Barnes & Noble) and I’m very pleased with how easy it is to use. I don’t even have to have Flash, which is convenient since my version of Flash is 5.