Notions

I was recently playing around with my family photo blog, trying to give the photos a bit more pizzazz.

I found some interesting tutorials for making CSS borders here at mandarindesign.com and a very nice looking drop shadow like this one from 1976design.com. The problem is that they either require nesting <img> tags within <div> tags or are a bit bland. Nesting tags would have required me to go through all my old blog posts and wrap every <img> with a <div>.

After some experiments I came up with a very cheap pseudo drop shadow that is quite effective using nothing but simple CSS style.

All I’ve done is center the image and add padding of 8 pixels surrounded by a border. The trick is that the top and left edges of the border are only 1 pixel wide, while the right and bottom are 2 pixels. Also, the top and left sides of the border are a slightly lighter colour than the bottom and right.

Since it is intended for all thumbnail images in my WordPress blog posts, the following is what I added to my theme style. It is applied to all <img> tags within <a> tags within a <div> of the class “post”.


.post a img {

/* This adds the border */
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
background-color:white;
}


It is really just a bevel but the width and colour differences trick the eye into seeing something that more closely resembles a drop shadow.

CSS Border Sample

Above is a stand alone example page and sample image.

This is the step by step process that I use to create portrait pumpkins of my family each year.

Getting Started

First you need good image editing software. I used Photoshop Elements 3.0 to make this tutorial. Any good image editing software should work, such as the free tool Gimp, though the instructions may be a bit different.

Next, you need a good photo or image of your subject. For the purposes of this tutorial we are making a portrait of a person from a photgraph. The lighting is important as the lightest parts will be carved out of the pumpkin so the dark parts must all connect with the border. It is best is if the primary light source is off to a side and not directly behind the photographer so there are some shadows that connect the dark parts of the face.

This is the original photo I chose for Matthew’s portrait.

Simple Instructions

• Start with a good photo
• Make the photo grayscale
• Add a levels layer
• Add a posterize layer with 3 levels
• Adjust the black, white, and midtone levels layer sliders
• Do any required touchup to the background layer

Detailed Instructions

Step 1. Start with a good photo as described above. I cropped the photo to just include Matthew’s face.

Step 2. Make the photo grayscale

Step 3. Add a levels layer.

Step 4. Add a posterize layer.

When prompted, select 3 levels. You can carve a pumpkin with three brightness levels by removing just the outer skin over some areas. This area will glow when lit from inside, but is not as bright as where all the flesh is removed. You can see how this works by looking at some of the examples at the end.

Now you should have three layers including the background.

Step 5. Adjust the levels layer sliders

Open the levels window by double clicking on “Levels 1″ in your layer view. There are three sliders under the histogram to adjust the Input Levels. Each one corresponds to each of the three levels of the posterize layer.

If you want to increase the black area move the left arrow to the right. If you want to increase the white area move the white arrow to the left. Moving the center arrow left and right will change where the grey level is calculated for the posterization. This will take some adjustment.

Remember, a white area cannot surround a dark area since the white area will be removed. You should make sure that all the dark areas are connected to each other and to the edges of the image.

This is what I got with the level values above (84, 1.08, 212)

Step 6. Do any required touchup.

Make sure to select the Background layer before making any changes.

In the image above Matthew’s left eye is a bit too dark but adjusting the sliders to brighten it up made the rest of the image too bright. I decided to leave it dark with the levels and brighten it up manually since all the detail is in the original image.

To brighten just a small area of the image select the “Brush Tool” and set the Mode to “Lighten” with an Opacity of 10%. I select the softest brush to blur the changes as much as possible and choose a brush size that is just a bit bigger than needed. You should also set the brush draw colour to white.

I used this around the eyes to bring out some of the highlights by very carefully clicking where the whites of his eyes should be to lighten them just enough to change their colour from black to grey. Just single clicks over the areas I want to lighten until it looks good.

I also lightened up other areas of the face to increase the cut area. I made the brush larger and set the opacity to 3% to cover larger areas very quickly.

Notes:

You can get a similar but reversed result if you set the brush mode to “Darken” and the colour to black. Any areas you draw over will darken.

You may find that it helps to look at the original layer by disabling the levels and posterize layers. This allows you to see what areas will benefit the most.

Blurring the Background layer will also help smooth some of the edges in the final output. This makes the pattern a bit more crisp with clearer lines separating each section. Using the Blur Tool keeps the changes localized to the areas that need it.

Conclusion

Once the pattern is complete you just need to print it out to use as a pattern. You can save yourself some ink if you create a new Levels Layer above the Posterize Layer and drag the black “Output Levels” arrow to the right to lighten the entire image. All you need to do is be able to see the difference between the three levels while transfering the pattern to the pumpkin, it doesn’t have to be solid black. You should also use the lowest quality level of your printer since the details are not important and will be lost during the transfer.

Now you just need to get that onto your pumpkin. The three colours of the pattern represent three states of pumpkin. The black is where you do not cut the pumpkin and leave the skin intact. The grey areas are where you remove the outermost layer of skin, but leave some meat – you can adjust the brightness of those areas by adjusting the thickness of the remaining pumpkin. The white area is where you cut out and remove the pumpkin, like you are used to. While you are carving the pumpkin will look odd until you get it into the correct lighting. The pumpkin should be viewed in the dark with a light source inside. This makes the white areas of the pattern the brightest and the black areas the darkest.

The most common way to transfer the pattern is to tape the pattern to the pumpkin and poke holes along the borders of each coloured area through the paper. You can find other patterns and tools at many stores around halloween and instructions online.

Here is the pattern carved into a pumpkin.

Examples

Here are some previous patterns and pumpkins that I have made using this technique.

So I played around with the Google Earth integration in Picasa and it is neat. It is very useful if you don’t have a GPS or GPS data for your photos, but it does not automatically correlate the photos with any sort of GPS information.

The best I could do was load my GPS track (GPX file) and view it in Google Earth while I was tagging a photo. It doesn’t correlate the time, but at least you can match the photo with some point on the GPS track. Unless you are in the ocean with no reference points, you can probably get the point within the accuracy of the GPS signal. Unfortunately, it is still a manual process.

I hear a rumour that Google Earth 4 (which I was using) has some sort of time support for tracks but I didn’t see anything with my GPX file. It may require a track that is in a KML format. If that was the case then maybe there is a way to manually find the point in the track that correlates to a specific time (when the photo was taken). This would at least be as accurate as the automated process, but still manual.

Let’s hope the next version improve this functionality.

Picasa 2.5 has recently been released with a few new features. I like the new screen saver that just cycles through your photos (I like the option to view all starred photos). I dislike the prominent placement of the “Save Changes” button that backs up your originals and replaces them with the edited copy. I don’t ever want to use that option but it is too easy to accidentally click on.

The most exciting new option is the addition of geotagging support. I have not yet had time to explore it but it appears to support geotagging of photos from within Google Earth and it recognizes geotagged photos inside Picasa. Unfortunately it looks like the geotagging is limited to manually placing the photos and there is no GPS coordination yet, but at least geotagging was important enough for them to include and takes it one more step into the mainstream. In theory I can view the GPX files in Google Earth and the photos, but I don’t know how useful or automated that will be.

Pros

• Geotagging support
• Picasa Web (for those who might use it)
• Direct ftp upload export
• New Picasa screen saver

Cons

• “Save Changes” button cannot be hidden or removed and is much to prominent.
• There is still no opposite of the “fill light” option in the quick edits. There is nothing equivalent to reducing the exposure, only brightening to increase the exposure.

I’ve updated the Blogger Image Import plugin with the ability to find images with spaces in the name. I had never noticed before, but any images hosted by blogger with spaces in the name were simply ignored because the %20 in the URL was being excluded from my regular expression.

Heather discovered that there was a problem and reported it here. I did some tests and realized that the % character was not being accepted as part of the URL and so any files with space (%20) were being ignored.

After a bit of trial and error I have fixed the plugin so that it correctly copies the files with %20 in their name and puts them on the local server with a space in its place. I have lifted some of the restrictions of the URL matching but it hasn’t caused any problems yet. Please test each import carefully looking for bad conversions and let me know if you find any.

http://notions.okuda.ca/wordpress-plugins/blogger-image-import/