Polaroid Gallery

Category: Code & Design
2 Comments

Polaroid Gallery is a open source flash gallery developed by Christopher Einarsrud in 2006. Using a external xml file, the script loads images and image titles then processes the data and creates an interactive flash gallery.

You can view the live demo at my Perfect Polaroids website.

You can drag images around to get to the bottom of the pile and double click on the polaroids to zoom in. The background colour can easily be adjusted by following the instructions included in the package. A large photo background can also be used.

To download the original Polaroid Gallery package, visit: http://www.no3dfx.com/polaroid/

To download Polaroid Gallery for Picasa, visit: http://www.paulvanroekel.nl/picasa/polaroid/








Watercolor Effect in Adobe Photoshop

Category: Code & Design
Comment on this Post

This my interpretation of a tutorial I came across on the Internet. I will be using Photoshop to create the watercolor effect using layers, masks and splatter brushes. You can find parchment paper texture from Google Image Search and download free splatter brushes from Brusheezy.

Open Adobe Photoshop and create a new document. I’m using 1400×1000.

Add a new layer and fill it with white. Make sure you have black and white for foreground and background. Then go to Filter → Texture → Texturize. Use Canvas for the Texture, 75% for Scaling, 3 for Relief and Top Right for the Light.

Add a nice parchment paper texture. Place the texture in the document on top of the other layers. After that, change the Opacity to 75% and Blending to Multiply.

Now let’s place a picture image in our document. I’m using a photo of us from our cruise in the Bahamas.

The image has to go beneath the texture layer. Then go to Layer → Group Layer. This places the image inside the folder. Select the folder and go to Layer → Layer Mask → Hide All. The image is now hidden because of the mask.

Now it’s time for some painting! Select a splatter brush, white for color, and paint on the layer mask of the group. You will notice that the image will start to appear.

Keep painting, using a variety of brushes, until you can see the image without losing the brush splatters.

Add a new layer under the Group folder. Using the splatter brushes, paint on the new layer with colors like pink, yellow, and blue. Your image should start to look like this:

To finish, select the image layer and go to Filter → Artistic → Smart Blur. This will blur your picture to look like brush strokes.

This is a really cool effect and really easy to achieve. Have fun creating your watercolor painting!

For more information about the Watercolor Effect, check out Abduzeedo’s Tutorial.








A Scanner Darkly Effect on Adobe Illustrator

Category: Code & Design
2 Comments

Director Richard Linklater’s A Scanner Darkly impressed audiences with a stunning 2D animation style that mixes heavy blacks lines with shapes of solid color to represent a realistic image. I used Adobe Illustrator’s pencil tool and shapes of solid color to imitate the graphic novel styling.

Here’s a photo of John and me on our vacation in Miami, Florida a few years ago. I decided to use this picture because it’s one of my favorites from our early years of dating.

First, I began by drawing thin black outlines around major forms and filled in the darkest regions.

Next, I filled in the darkest areas of the photo with black and shades of gray. Coloring my purse was a good warmup exercise because it didn’t require too much detail or time.

It took me about an hour to get comfortable with adding color to my hair and his shirt.

Then, I attempted to fill in the skin tones. This was challenging because the eye dropper tool on Illustrator kept picking up colors that were too dark compared to the actual shade. I had to play around with the colors until they meshed well.

Filling in John’s face took the entire day. I had a hard time with the shadow on the left side of his face because it was really dark compared to the right. I was really close to giving up and leaving our faces blank, hahaha.

Three days later, we have the finished product. I filled in the background relatively quick and used Photoshop to blur and lighten so we could standout in contrast.

This was my first attempt at digital inking so there’s a lot of room for improvement. However, I don’t think I’ll be working on another one of these for a while because I’m pretty burnt out from this exercise. I’m just really glad that I gained a lot of experience using Adobe Illustrator!

For full instructions on this tutorial, check out Layers Magazine.








WordPress Date & Time Formatting

Category: Code & Design
2 Comments

Call it OCD, but I’m a little anal when it comes to designing layouts because I want them to look exactly how I envision it. When I started using WordPress, I had to learn through dozens of tutorials and FAQ’s to create my current theme.

One issue I came across was the ability to display the date on all entries. I noticed that when I published two or more entires in one day, the date would only show on the more recent post of that day, leaving an empty line between the title and category. The code I originally used was:

<?php the_date() ?>

After scouring the Internet for a solution, I realized that in order to display the date on all entries, I would have to change the code to this:

<?php the_time(‘j’) ?> <?php the_time(‘F’) ?> <?php the_time(‘Y’) ?>

This is a longer, more specific code that tells the page to load the date, month, and year every time, regardless of multiple entries in one day.

I hope you find this helpful because it took me a while to figure it out! ;)

For more information on customizing the date and time, check out WordPress Codex.








WordPress Smilies

Category: Code & Design
Comment on this Post

Smilies are glyphs used to convey emotions in your writing. By default, WordPress automatically converts text smilies into graphic images. Some examples are:

‘;-) is equivalent to smile emoticon

‘:-) is equivalent to smile emoticon

‘:-? is equivalent to confused

Needless to say, they’re a great way to brighten up posts! Now how can we customize these smilies? Simple!

  1. Find your smiley image files in the /wp-includes/images/smilies directory and back them up to another directory.
  2. Note the names of each smiley file. Your files must match these names and should be in the same ‘gif’ image format.
  3. For predictable behavior, the image sizes should be similar.
  4. Upload your new files to the /wp-includes/images/smilies directory with an FTP program.

You can also find WordPress Plugins to allow you to customize your smilies. :D

For more information on using smilies, check out WordPress Codex.