Jul 13, 2009

Tough Love and Techy Stuff


Get out of the house you lazy teenagers!


Charles took this great picture of the Osprey nest near the marina and I really wanted to post a nice looking version of it on my blog page. How about rounded corners and a drop reflection?

Now you're saying "Oh no! That's hours in Photoshop and I'm just not that good!" Have no fear - this image was produced in about 15 minutes with two very cool online tools! Here's how we do it:


Step 1: Find a photograph worthy of all this attention. This is the hardest step.

Step 2: Find the section on my sidebar that says "Useful blog tools" and click on Rounded Corners (or use the link <- here). Select an image (JPEG/JPG, GIF, BMP or PNG) from your local drive or the internet. Click on the (Round It!) button.
You'll get a preview on the next screen with options you can change.


Most settings are fine left 'as is'. You can increase the roundness with the slider and change the knock-out color for your rounded corners. This one is worth looking at - the default color is white (FFFFFF) and this will work if your blog background is white. Mine is black so I changed the code to black (000000). You can also set the knock-out to transparent by clicking in the check box (your downloaded file will have a PNG extension).
You can change the filename before you click (download) but be sure not to use any spaces to name the file. Example use "my_house" NOT "my house". This appears to
be a small bug which may get fixed later.
The new rounded file will now be sitting wherever your downloads normally go. Open it in your photo editor to see the rounded corners.

Step 3: Go to the Reflection Maker page (<- here or in my sidebar to the right).

Grab your newly rounded image with the (Browse) button. You can change the amount of drop down reflection here, 100 would be a full mirror image, the default is 50%. The Osprey photo setting was about 60%. The background color setting here is a little more important because there is no transparency option. Here the background color should match the background color of your blog page.

* Slightly technical tidbit here - If you want the exact color code for your blog's background color, open your blog's layout editor and click on "Edit HTML". Look for this text (or similar):
Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000"
Your color code is the 6 digit figure after value="#
You can see other hex color codes here.

Once you have your background color set, click (generate) and then (download) your image. The new downloaded image will be named "reflection maker.jpg"

You're all done! Throw your new image up on your blog and be proud!

Disclaimer: There may be a few bugs in both web utilities that I cannot fix or foresee. This exercise will not damage your original photo but may cause you to waste valuable time that might be otherwise be applied to something much more productive.

Twitter DiggIt! StumpleUpon Del.icio.us Technorati Reddit

4 COMMENTS - Click here to leave YOURS!:

Justabeachkat said...

Wow! Girlfriend, you're good! Great photo Charles took and you made it even better.

Hugs!
Kat

storybeader said...

love the rounded corner - I bookmarked it! Thanks for the link!

valerie walsh said...

How cool! Your image is beautiful!!! I am not sure I can follow this but I will try, I have zero experience :) Thanks for your kind comment and it is clay that has been fired in a kiln not polymer clay.

Jason said...

Great site man. I was wondering if we could possible exchange links. Let me know what you think about my humor blog.

Jason

Blog Widget by LinkWithin