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).
Warning: The remainder of this post is graphics heavy.
- 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.
- Open the photo you wish to use in the photo editing software of your choice.
- Make sure that the photo is on a fully adjustable layer:
- Photoshop – right click on layer, select layer from background, click ok.
- Paint Shop – right click on layer, select promote background to layer.
- Make any color, contrast, or other adjustments you wish to make.
- 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.
- Paint Shop – Select Image-Resize – make sure Lock Aspect Ratio is checked, set width.
- 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).
- Paint Shop – Select Image-Canvas Size – type in new height and width, make sure it is set to center (each side shows 100px).
- 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.
- Paint Shop – Select Image-Picture Frame – select the corner tape (or frame of your choice) from drop down.
- Merge tape frame layer down onto photo layer:
- Photoshop – Select Layer-Merge Down.
- Paintshop – Right click on frame layer, select Merge-Merge Down.
- 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.
- Paint Shop – Select Image-Rotate-Free Rotate – enter the amount and choose your direction, make sure the Rotate Single Layer…. option is selected.
- If you would like a drop shadow now is the time to do it.
- 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.
- Paint Shop – Select Crop Tool – select Crop to Layer Opaque – click checkmark to apply.
- 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.
- 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.
- 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.
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.