Please feel free to post any comments and question you may have.

ORIGINAL POST

If you need highly effictive spam protection and want to help digitze old books and manuscripts, reCaptcha is great, there is no better choice. If you are looking for a tool that allows you to configure it to match your website… thats a different story. Currently reCaptcha only offers 4 themes (red, blackglass, clean and white) which is better than nothing but can be an eyesore if none of these themes fits your site.  So to counteract this limitation we have compiled all the resources you need to create a custom reCaptcha for your website.

Below you will find all the instructions and source materials to take reCaptcha to the next level.

Before you start - When you open the PSD file included in the tutorial you will notice that the file we are working with looks nothing like the final result of recaptcha. To save time on load, all the images are grouped and flattened into what you see below.  Don’t worry about this; we have included everything you need to make this work like a charm. Another thing you will notice is that we have started out with the white theme; this is because it will be easier to add color to a lighter object than it would a darker one.

Step One -  Download all the files included. Open the PSD. We are going to change the background color of the image. It is a gradient, so to get the smoothest color we are going to want to use our color balance.

• Select the layer called ‘Sprite‘, it is in the folded named ‘Step One‘
• Next go to Image > Adjustments > Color Balance
• Using the sliders, adjust the color of your container to fit the styling of your website. For example,  I have made mine blue – take your time and experiment with the controls until you achieve your desired colors. To make the colors richer and more or less saturated use the “Hue and Saturation” and “Curves” tools in the adjustments menu.

Step Two - If you are happy with the colors you selected then let’s move on to the borders. The borders or “Stroke” may look alright to you but they also might need some adjustments, so let’s take a look at that.

• Select the layer “Border” in the folder “Step Two“. This layer has a “Color Overlay” layer effect on it, if you were to click into that you would see the basic color picker to edit that layer to match your newly created background.

Step Three – The action for this step and the next are essentially the same as Step Two. I have taken the time to isolate the reCaptcha logo, tagline and icons. Because of that, you can directly apply a color to them which will be a breeze. This step is for the Logo and Tagline.

• Note - You could change or remove these objects entirely but I would check with the TOC from reCaptcha first.

Step Four - Now go ahead and open the “Step Four” folder and change the color of the icons.  My final example is below.

Step Five – I have taken the liberty of setting up the slices for this tutorial. Export your new icons to your server. You can name them anything you like but you will have to then rename them in the stylesheet.

***UPDATE***  The icons on this main image are used as separate files, this is why you need to export these icons.

Here are the icons by name and order on the image.

• refresh.png
• switch.png
• whats_this.png
• switch_audio.png

Step Six – Clear out the slices on the image and export the entire thing as “sprite.png” – again, you can alternatively name this what you want but you will need to change the CSS. Upload your images.

Step Seven -  Add the CSS include to your site by either importing it or adding it to your main style sheet. You will have to change the paths in the document to match the location of your server.

This is the last step in the process but lets take a look at some of the CSS to examine what is happening.

Overwriting the default image

/* Overwrite reCaptcha background images */
.recaptchatable .recaptcha_r1_c1 {
background: url('../../sprite.png') no-repeat 0 -63px !important;
}
.recaptchatable .recaptcha_r2_c1 {
background: url('../../sprite.png') no-repeat -18px 0 !important;
}
.recaptchatable .recaptcha_r2_c2 {
background: url('../../sprite.png') no-repeat -27px 0 !important;
}

Hiding the default images and adding our own

/* Remove reCaptcha button images  */
#recaptcha_switch_img_btn #recaptcha_switch_img {
display:none !important;
}
/* Add user created button images */
#recaptcha_reload_btn {
background: url('../../refresh.png') no-repeat !important;
display:block;
height:17px;
width:25px;
}

Styling the input box

Change the border color value to match that of your site.

/* Style input field to match new theme */
.recaptcha_theme_red #recaptcha_response_field {
border:1px solid #92b6eb;
}

There you go, you now have a 100% custom version of reCaptcha to match your site. Enjoy.

Download source files

• reCaptcha CSS
• reCaptcha PSD

Related posts

• UPDATED: Embedding an image into Gmail (2)
• txilife is alive (2)
• Polycom Napkin Hack (1)
• Firefox Browser Chrome (0)
• Constant Contact RESTful API and Perl (4)

UPDATED

Ok, so google has stolen the thunder on my trick here as John pointed out and actually added image embedding as a function last night at around 10pm.

You can read more about it here.

Original Post

Gmail lacks this basic functionality – but with this simple little workaround you will be embedding images into gmail in no time.

1. Click on the link in the top bar that says “Documents“ (you may have to log into  Google Docs)
2. Make a new document.
3. Click on Insert and then Image – a window should appear that allows you to add an image from your computer or insert the url of your image – selected whichever method you need.
4. Your photo is now in your Document.  Highlight it – copy it – and return to your gmail window.
5. Paste it and enjoy.

Related posts

• reCaptcha reTheme – UPDATED (7)
• Polycom Napkin Hack (1)

Need to frame a mockup with Firefox? Download our free Firefox Browser Chrome in both 1024×768 and 800×600 resolutions, scrollbars,  editable URL field and page titles.

Enjoy!

• Download both PSD files in Zip format

Related posts

• txilife is alive (2)
• reCaptcha reTheme – UPDATED (7)
• Constant Contact RESTful API and Perl (4)

Shredded broccoli salad.

Related posts

• No related posts.

Beef Brochettes w/ Cracked Pepper

Garlic Sauteed Mushrooms

Bacon wrapped Dates

Arugula Salad w/Sherry Walnut Vinaigrette

Almond Crepe Cake w/ Chocolate Cinnamon Ganache

Related posts

• Bucatini alla Carbonara with Nueske’s bacon and Red Hen Ciabatta rolls (0)