Tag Archives: tutorial

Creating an avatar image with gravatar

Heather Goff

Ever wonder why images or photographs sometimes appear next to people’s comments on blogs?  Those images are called avatars, and it is really easy to create an avatar image for yourself. You, too, can have a photograph or icon that will follow your comments around the internet.

Why would you want to do that? For branding, and to call attention to your comments. You don’t need to use a portrait. You could use your logo, for example.

Below, I am going to walk you through, step by step, how to create your custom avatar image using gravatar.com.

  1. The first thing to do is to have an image on your computer that you want to use. I used a photograph taken of me by Lynn Christoffers – a Martha’s Vineyard Photographer.It doesn’t have to be square. Gravatar will let you crop it once you upload it.
  2. Step two: Go to http://www.gravatar.com
  3. Step 3: Click on the “Sign up now” link. (view image below)gravatar12

  4. Step 4: Enter the email address that you want your avatar image associated with. (see image below)gravatar21
  5. Step 5: They will send you a confirmation email.
    Click on the link in the confirmation email to activate your account. (see images below)
    gravatar3

    gravatar4

  6. You will then be directed to a page that will ask you where the image is that you want to upload.gravatar51

  7. Choose where it is. Search for the image and upload it.
  8. You will then be able to crop it to be the perfect avatar image.

    gravatar7

  9. When you’re done cropping, you will be asked to rate it based on the image content.gravatar8

  10. The final step is to assign the image to your email address. Just check the box next to the email address that you want to associate with the avatar, and click on the “use for selected address” button. Then you’re done. It is that easy.
    gravatar9

You can log into gravatar at any time to update your avatar images or add new email addresses.

preparing images for the web using photoshop elements.

Now that you have the ability to upload images to your website, do you have questions on how to prepare them for the web? I have put together some tutorials using adobe photoshop elements which show the how to of resizing, cropping and some quick color correction. I have chosen adobe photoshop elements because it is a relatively inexpensive software ($80) and it is cross platform.

  • Adobe Photoshop Elements for Windows – My image editing tutorial use adobe photoshop elements. This is a relatively inexpensive software that allows you to prepare images for the web. It is a paired down version of Adobe Photoshop (which costs over $600) adobe photoshop elements runs around $80 depending where you purchase it.
  • Adobe Photoshop Elements for Mac – My image editing tutorial use adobe photoshop elements. This is a relatively inexpensive software that allows you to prepare images for the web. It is a paired down version of Adobe Photoshop (which costs over $600) adobe photoshop elements runs arounc $80 depending where you purchase it, and is cross platform.
  • Resizing and Cropping Images – This tutorial walks you through how to resize and crop images in adobe photoshop elements – to prepare them for your content management interface.
    YouTube Preview Image
  • Selecting and changing line images – This tutorial shows you how to remove a line image from its background in Photoshop Elements. This is useful if you have a line drawing or signature that you want to upload to your website and have it match your website’s color.
    YouTube Preview Image
  • Preparing Graphics for the web – An article with tips on preparing your graphics for the web. It addresses the issue of why photographs uploaded to the web might appear less vibrant than on your computer, how to compose portraits and tips on taking product shots.
  • Quick color correction using levels – Do your photos need a little color enhancement before you post them to the web? Here is a quick tutorial on how to easily polish up those images, bringing up or down the lights, the darks and adjusting colors.
    YouTube Preview Image
  • Cutting the background away from an image – This Tutorial takes you through removing the background from an image in photoshop elements, leaving you with the object in the image surrounded by a transparent field.
    YouTube Preview Image

Tutorial – Editing text in your intuitive-website CMS

PART 1: Copying and Pasting from WORD

It is beneficial to compose your text first in Word or Appleworks or another software that has spellcheck, and then copy and paste the text into the CMS text editor interface. Please view this tutorial before doing so.

Part 2: Web Site Structure

Basic overview of how content on a website is structured.

Part 3: Creating bulleted and ordered lists

Below are instructions on how to add a bulleted or ordered list to your intuitive-website content with the text editor.

Part 4: Linking to other websites and Email Links

How to create hyperlinks to other websites and also how to create e-mail links.

Part 5: More Text Formatting

How to change font styles, alignment and colors.

Part 6: Uploading Images to your content

How to embed an image into your intuitive-website pages using the text editor.