Calico Contemplations - Over 40 Different Images - Refresh to See More!

A Tut (of sorts) For Those Tippy Taped Photos

I get a lot of comments and compliments about the photo on my blog, so I decided to share my secrets for rotated, taped, floating photos. I willl be using both Photoshop CS2 and Paint Shop Pro 9 for specific examples; but the process should work in any photo editing software that uses layers and saves/exports in png format (gif can be used but quality will be sacrificed).

Final Product

Warning: The remainder of this post is graphics heavy.

  1. If you don’t know the width of your posting area, check the code for your blog, and determine the width of your posting area; you will want to keep the final width of your photo equal or less than this amount. My blog will hold photos up to 600 pixels wide.
  2. Open the photo you wish to use in the photo editing software of your choice.
  3. Make sure that the photo is on a fully adjustable layer:
    • Photoshop – right click on layer, select layer from background, click ok.
    • Step 3 Photoshop
    • Paint Shop – right click on layer, select promote background to layer.
    • Step 3 Paint Shop
  4. Make any color, contrast, or other adjustments you wish to make.
  5. Resize photo to approximately 100 pixels narrower than the width we found in step one.
    • Photoshop – Select Image-Image Size – make sure Constrain Porportions is checked, set width.
    • Step 5 Photoshop
    • Paint Shop – Select Image-Resize – make sure Lock Aspect Ratio is checked, set width.
    • Step 5 Paint Shop
  6. Increase canvas size by 200 pixels in height and width:
    • Photoshop – Select Image-Canvas Size – type in new height and width, make sure it is set to center (each side shows 100px).
    • Step 6 Photoshop
    • Paint Shop – Select Image-Canvas Size – type in new height and width, make sure it is set to center (each side shows 100px).
    • Step 6 Paint Shop
  7. Apply tape layer over photo layer (Download PNG or PSPFrame here):
    • Photoshop – Open tapeframe.png or frame png of your choice, resize as neccessary, select all, copy and paste over image, then move into position.
    • Step 7 Photoshop
    • Paint Shop – Select Image-Picture Frame – select the corner tape (or frame of your choice) from drop down.
    • Step 7 Paint Shop
  8. Merge tape frame layer down onto photo layer:
    • Photoshop – Select Layer-Merge Down.
    • Step 8 Photoshop
    • Paintshop – Right click on frame layer, select Merge-Merge Down.
    • Step 8 Paint Shop
  9. Rotate photo in desired direction (my typical settings range from 5 to 15 degrees, and I alternate tipping them right (clockwise) and left (counterclockwise):
    • Photoshop – Select Image-Rotate Canvas-Arbitrary and enter the amount you wish to tip and the direction.
    • Step 9 Photoshop
    • Paint Shop – Select Image-Rotate-Free Rotate – enter the amount and choose your direction, make sure the Rotate Single Layer…. option is selected.
    • Step 9 Paint Shop
  10. If you would like a drop shadow now is the time to do it.
  11. Now you need to crop your photo down to just the used portion of the canvas:
    • Photoshop – Select Image-Trim – select Based On Transparent Pixels, make sure all sides are selected.
    • Step 11 Photoshop
    • Paint Shop – Select Crop Tool – select Crop to Layer Opaque – click checkmark to apply.
    • Step 11 Paint Shop
  12. Check your image’s current size, if it has expanded beyond the width your blog will hold, resize using constrained/locked porportions to the correct size.
  13. Now it is time to save/export your finished photo as a png (or gif if you must):
    • Photoshop – Select File-Save As – from the Format drop down select PNG – name your file and pick the folder you wish to save it in.
    • Step 13 Photoshop
    • Paint Shop – Select File-Export-PNG Optimizer – set your color options to 16.7 million colors and your transparency to Alpha channel transparency – click OK – name your file and choose the folder you wish to save it in.
    • Step 13 Paint Shop
Final Product

And that is really all there is to it. I know it might seem awkward or tough the first couple of times; but once you get the steps down you will be able to do it in your sleep.

The only other caution is to hand code your images in Blogger rather than using the image insert (HTML view, <img src=”yourfile.png” width=”000″ height=”000″ border=”0″ alt=”description” title=”description” />), so that it comes out size you made it and in the position where you want it.

 
Calico Crazy
 

2 comments

1 Melissa B. { 09.05.09 at 9:04 pm }

Thanks so much for sharing this…always looking for new ways to “jazz” up my bloggy space!
.-= Melissa B.´s last blog ..The Tide is High, But I’m Holding On… =-.

2 Forgetfulone { 10.06.09 at 5:20 pm }

This is an awesome tutorial! I wish I had time right now to try it, but I’m saving the info and I’ll come back to it. Thanks!
.-= Forgetfulone´s last blog ..I’d Love to Build My Dream House =-.