Since not everyone has Photoshop, is there a way for someone to re-size a large picture to be used on a website or to send via email without jamming the recipient’s inbox? Yes! With Google’s image tools, Picasa and Picnik, there’s an easy way to work with your images to resize them online and then use them however you need.

Step 1: If you don’t have one already, get yourself a Google account.

I love a lot of Google’s free services. There’s gmail of course, which enables me to receive emails on my phone with no hassle and gives me over 7,000 megabytes of storage. Then there’s Feedburner which allows me to offer subscriptions to a web site via RSS. Google Analytics is also another great tool to take advantage of. For this tutorial though, we’re going to look at two media tools; Picasa and Picnik. So go to google.com and sign up for account if you don’t have one already.

Step 2: Now that you have your Google username (email) and password, sign in and get started with Picasa.

Your Google account's top toolbar as seen from Gmail window

To find Picasa, sign in and then you will see more on the far right of the top toolbar.

Click that to open a menu where the last item is “even more”.

Click on Even More down at the bottom

Under the Media section, you will see Picasa on the left and Picnik on the right.

Google's Media Products

TIP: The direct url to your Picasa account is https://picasaweb.google.com/home
You should probably bookmark this page so that you don’t have to go through Google’s admittedly convoluted click-throughs every time.

Saving a bookmark in Firefox

Now you can get to Picasa without jumping through Google’s hoops!

Easy one-click access!

Step 3: Create your album and upload pictures.
If you decide to just start to upload photos that’s fine. Just understand that Google needs to sort them into albums so if you upload a batch of images today, Google will prompt you to create an album with today’s date (you can always give it a custom name).

Step 4: Once photos have been added to an album, select one to resize.

Link to your existing albums on Picasa's home page

Click on the album to open it

Click on a photo to open it

Click on the album that contains your images to open it. Then click on the image you need to resize. Once the image is in its own window, you will see a toolbar at the top with a little landscape icon at the top. Click on that to launch Picnik.

Click landscape icon to launch Picnik

You can also click on Actions and then select "Edit in Picnik"

TIP: If you want to bypass Picasa, you can just launch Picnik right away and upload photos directly from your harddrive. I just suggest uploading to Picasa if you are fairly mobile and you want to get the whole process done on the web as opposed to being chained to whatever computer has your images. Also, once the image is resized, you can always add it to your site via its URL on Picasa.

Step 5: Edit your image with Picnik.
Go to Re-Size on the leftside toolbar. Then simply enter in the dimensions that you would like the image to be to use on your site.

Editing toolbar in Picnik

Depending on the layout of your theme, maximum size can vary, but for the sake of example, I usually save my images at 450 pixels wide as the maximum width. Make sure you choose to retain the proportions as well.

Original photo's dimensions. Too big for a blog!

Enter in the new dimensions (width and height in pixels)

Step 6: Save your image and either download or get url.
Picnik will allow you to save your edits and then you can either download the image back to your computer or, on Picasa, you can get the url of the image.

Save to your Picasa album

Now you can download the re-sized image to a folder on your computer

Then, when you add an image into your WordPress post or page, it’s simply a matter of pasting that images url into the add-image pop up window. If you choose to download the re-sized image, then all you need to do is add your images the regular way and the smaller file size will take a load off your server!

This is the previous home page:

And here is the new design, which was based on the Mystique theme by Digital Nature. I went with their theme because it offered a good choice of options, while giving a more code-minded designer like myself “under the hood” access to the template files.

I really liked their design framework for the dropdown menu at the top. I felt that the original site’s navigation didn’t include the right architecture and the user kept having to go back to the home page for links to Financial Advice and a few other items.

The original image theme of the site was lighthouses, which tied nicely into the logo and the concept of the company being a guide to financial safety. However, the photos I had originally taken now struck me as a little cold and distant; probably because I had first created the site during the winter of ’07 and I would have needed a boat to get close enough to get bigger images. So I decided to find images that seemed warmer and more engaging. I found this picture for the Long Term Care Insurance page on iStock.

The sidebar was another area that was ripe for improvement. While the old site had pages where potential clients could request a quote for whatever insurance type the page was about, Beacon decided that it would be easier all-around if they had one standard “Request a Quote” form in the sidebar where it was easy to find no matter where you are on the site. I used the CForms II plugin by Delicious Days here.

The other feature I wanted to upgrade was the location map. It’s become one of my pet peeves when a website has a static image of a map on a page when embedding a Google map of a business’s location is so damn easy. The list under “Insurance News” is a simple list of the site’s blog categories.

By converting the old site’s newsletter-style Insurance Updates pages into blog posts it killed two birds with one stone. The new site could be launched with a full blog already built in and, any new updates that a Beacon agent wanted to write would be easy to fit into the existing set of categories.

Last but not least was one feature that I really love to use on sites: the Subscribe via Email form provided by Feedburner.

A lot of clients want to have some way to contact their client base/readers without a lot of fuss. Unless they really have the resources to manage a full html newsletter service such as Mailchimp or Constant Contact, this is really an elegant solution. While some readers might understand what the orange rss icon means, there are so many still unconverted to the wonders of feed subscription that offering them a way to sign up to receive an email whenever a blog is updated with new content can be very handy.

It’s nice to come full circle with a client and re-visit an earlier job. I needed to come up with a fresh approach and I hope the new site will work well both for Beacon and their customers!

Step 1: In your Webmail account, go to your Settings folder and select Compose. Then,create your webmail signature with interactive links in the compose window and save the changes.

Tip: Make those links as user-friendly as possible. Luckily my Doteasy webmail GUI lets me include tooltips in a link. That way people will have some idea of what they are going to see when they click the link.
Step 2: Go to your webmail mailbox and send a message to your Gmail account with that new signature.
Step 3: Go to your Gmail account and open up the message you just sent and give it a test drive.
Step 4: Now you can keep that message handy and copy and paste your signature from there when you want to include it in a Gmail message. When you want to include that signature, simply view that message with your signature, highlight the signature and then copy and paste it into the new message.
Please Note: This only works if you launch Gmail in its own window. (top left corner of inbox window;”Launch Full Gmail”)
Easy!

Links: Quality over quantity. Don’t go for those “pay for us to link to you” services. Google prefers a few links to your site on well established web sites rather than a ton of links on spam sites.

Domain Age: Spam sites tend to be fly-by-night operations and the longer your site has been around, the better. However, just letting your site sit there on the server isn’t enough. Google also notices the freshness of your site’s content.

Click Through Rate: Google checks on how people find your site and how they get there, whether via a search engine or from a bookmarking site.

Trends, fads and seasons: Keywords have trends too. So you can probably stop typing in “Paris Hilton Video” into your meta-tags now. ;^}

Posting Frequency: Like Alex the Lion says in Madagascar “You know, keep it fresh!”. The more you reward your loyal visitors with useful new information, the more they will visit and recommend your site via incoming links.

Keywords: There are a few areas where it’s really important to place the words that you think people will use to search for your site. Titles, as in the title that shows up at the top of your browser when you view a page, links, headings and tags.

Traffic: How heavily your site is visited, which pages people go to and how long they spend clicking around.

Code: It’s important to keep your site’s code clean and easy to scan through. Hiding your text in a fancy animation or burying important info under tons of scripting makes the engine work harder. I tend to think of code as being like motor oil, the cleaner it is, the smoother your site runs.

I also recommend using a browsing program that allows you to open up multiple tabs since you will need to click back and forth between tabs.

The Google Picasa/Map method:

Step 1: In your image editing program, create an image that is at least 144 pixels wide.

Save on your computer as a jpg image. Make a note of its measurements in pixels for Step 8.

Step 2: On the web, go to your Google account and on the home page, go to More>Photos. On your Picasa page, select New Album on the right.

Step 3: Upload your jpg image. Then go back to your album and click on the image. After the image loads into its own page, you will see a link entitled “link to this image” in the 4th box down on the right. Click on it.

Step 4: Choose the “HTML to embed in website” option by clicking in the text box. This will highlight the code. Go to the top toolbar in your browser and under Edit click Copy.

Step 5: Now open a new tab in your browser (File>New Tab), and go to your Google homepage again. Click on Maps in the upper left corner of the page. Once that page opens, go to My Maps and select the map that you have created and saved.

Step 6: Once the map you want to work on is loaded into the window on the right, Click on the Edit button. This will enable you to make changes to your map. With your map in Edit mode, click on an area or marker to edit its contents.(see image below for example)

Step 7: Here’s the fun part! Switch to edit HTML and click at the top of the window to place the cursor there. Then, go to the top toolbar again and hit Edit > Paste. This will paste the URL that you copied from your Picasa page. You actually only need part of the pasted code. You will need to find the part that says img src= and delete the code that comes before it.(see the example code below for this and the next step)

Step 8: After you have deleted the a href tag, go to the end of the pasted code and delete the closing tag. (). Then, directly after the URL of the image in the remaining code, but before the closing bracket (>), type: width=(width in pixels)px height=(height in pixels)px. (see image below)

Step 9: Click Save on the left, and then click on the marker or area again. Check to make sure everything is OK by switching to the Rich Text choice in the pop-up window.

If everything looks OK, click Done.
Note: if it doesn’t look right at first, make sure the code for the image reads img src=”url for image” and then the width and height.