Be sure to look at other guides in this series:

Meetup Guides

• Grant's Guide to Message Board Formatting.
  
• Grant's Hilary's Guide to Images.
  
• NEW! Chris C's Guide to Animating Images.
  
• NEW! Dean's Video Posting Guide.
  
• Grant's Guide to Meetup Smilies.
  

---

Basics

Step 1: Your Image

First you need an image. It can be something you created yourself on your computer, or something you saved from another website.

Finding images

The easiest images to find are ones you have created yourself. But, if you are not that kind of visual artist, here are some other options:

• Search for images on the web using clip art sites or a more specific google image search. Most images on webpages can be saved by right clicking on the image and saving it to a file on your computer.
  
  
• Popular Sites
  These have been mentioned on the Meetup Message Boards again and again:
  
  
  • emoticons4u -- lots of really fun emoticons in one place
    
  • bestsmileys.com, which has a very different selection (and divides it into more categories) than emoticons4u
    
  • cooltext -- create free logos and buttons
    
  • istockphoto -- Not free, but incredibly cheap and wonderful stock graphics, costing between $1 and $5. Membership is free, so join and search!
  
  
  
  
• Ask photography meetups if any of their members have a picture of "x" that they would be willing to let you use in exchange for credit and a link back on your about pages.
  
  
  An image requested from the organizer of a photography meetup.
  
  

Those pesky copyright issues

Before taking an image from the web, please check to see if you can use it. If the website says that it's free clip art, go for it. If it does not, you might want to contact the site and ask for permission to use the image. My own experience has been that many copyright holders freely give this permission so long as you give them credit and link back to them.


Please do not take images from other about pages without prior permission!

• It's not polite.
  
• They may have spent hours making those images, or they have purchased the rights from somewhere else.
  
• It is a violation of Meetup's Terms of Service.
  
• For more details on why this is a bad idea, please see this discussion on about page copycatting.

Step 2: Image Hosting

Before your images can show up on your About Page, you must get your images on the internet. So how do you get them there, and where do you put them?

Option A: Your Meetup Group's Photo Albums

Many images can reside in the photo albums of your meetup groups.

• Linking to images in your Photo Albums. If you have it saved in your meetup gallery, you can link to it from there.
  
  (Note these images are automatically resized when uploaded into these galleries, take consideration of this when wanting a larger or higher quality image.)
  
  Right click on the image. If you are using firefox, choose "copy image location." If you are using IE or another browser, save the property of that photo, and from that you paste that link within the [img] [/img] tags.
  
  Here's an illustration, courtesy Mary Pinson:
  
  
  
  
  
• When NOT to Use Your Meetup Group's Photo Albums.
  
  
  
  • Large or oddly shaped images. Meetup will automatically shrink images to fit in the photo albums. If your image needs to be a specific size, don't upload it to Meetup's photo albums.
    
    
    
    A lovely divider (and header) image, not in a standard size.
    
    
    
    
    
  • Anything that is not a JPG file. There are an awful lot of cute gif files -- especially dancing emoticons -- that just won't upload to Meetup's photo albums.
    
    
    Yup, a gif image.
    
    

Option B: Your Meetup Group's Files

Many image files that cannot be stored in the Meetup photo albums can be uploaded as files in the files section of your Meetup group. You can right click on the link to the file and then copy link location.


Some groups may not want to have their image files be visible... In that case, try out third party image hosting websites.


Save the image files so that they are visible to everyone! If you save the image files so that only group members can see them, prospective members will see a bunch of broken links on your page!

Option C: Image Hosting Websites

Here are two of the most commonly recommended sites from the Meetup message board:

• Flickr -- Allows images to easily be resized, rotated, etc. And it has a lot of other cool features too.
  
• Photobucket -- Very popular!
  

Step 3: Editing the About Page

Step 3A: Copy the URL of the image.

• Photobucket will list it for you right under any picture you have uploaded.
  
• If you have it saved in your meetup gallery, click on "Link to this photo" and then copy the address in your browser. Or you can right click on the link that says "Link to this image", and then copy link location.

Step 3B: Use the Image Button (or code by hand)

• Once you have the URL copied, click on the "Image" button at the top of your message post, or the top of the page when you are editing your "about" page, and paste it in where it says enter image address.
  
• You can also make your pictures "clickable" by adding another website address to direct people to another webpage when they click on the image. Do this by entering the address where it says optionally enter a link address.
  
• An example of an image and code:
  
  
  
  
  
  Coding for just the image:
  
  [img]http://members.dsli.com/aldiaz305/M%20of%20the%20month.jpg[/img]
  
  
  Coding for image as a link:
  
  [url=http://bellydance.meetup.com/55/about/]
  [img]http://members.dsli.com/aldiaz305/M%20of%20the%20month.jpg[/img][/url]
  
  
  

Step 3C: Preview Your Work!

The more complex your image use, the more the preview button will be your friend.

---

Advanced Tips and Aesthetics

Creating & Manipulating Images

A step-by-step guide on how to create and manipulate images is beyond the scope of this guide. My goal instead is to give you ideas so that you can explore your own programs.

Getting Started

First, check your own system to see what you might have available for image software. Most microsoft or mac program packages include basic paint and photo editing programs.


With most basic programs you can:

• crop -- include only the parts of the image you want
  
• rotate -- turn your image until it looks best
  
• resize -- very important to prevent horizontal scrolling (see below)
  
• move elements -- select parts of the picture and reposition them

this image was created using only: cooltext, a basic photo editor and a basic paint program

A Step-by-Step Example of Image Creation

Pat Finegan explained how to create an image using common microsoft products in response to a question by Steve Savicki.

Graphics

You can do a lot of font manipulation without resorting to using images. For more information on this, please check out Grant's Guide to Message Board Formatting.


However, graphic images can add spice to a page. One great source for free Logos and Navigational buttons is the cooltext generator.

Here is an example of navigational buttons created using cooltext:



each of these buttons leads to a different part of this Meetup group

Other Ideas to do with Custom Images

Include "white space" in your image to position it properly on the page

There are currently only two ways to position images:

• Default -- Image is positioned in the left margin
  
• Centered -- Image is centered
  

However, all Meetup about pages have white backgrounds. If your images also have white backgrounds, you can position individual elements within the image to create pretty much any effect that you want.

Creating Custom Maps

And here's how it was created.

Including Text in the Image

By including text in the image, you can:

• vary the look of your page
  
• integrate images and text
  
• control where these elements are positioned

an example:

The Downside of Including Text in Your Images

To paraphrase Walter:

Search engines can't see the words in images. And search engines bring new members to your group.

• Some headings in images -- okay.
  
• Some buttons in images - okay.
  
• But try to avoid putting the highly descriptive main text of the page in images, especially if key words that describe your group (your town's name, the type of group you are) only appear in that image and not in plain text anywhere on the page.

Photo Collages

You can easily create a simple grid photo collage using picasa, a free program from Google:





But here are some other lovely examples of pages with photo collages that are more advanced. See this discussion for more information on software to make photo collages.

Animated Images

There is freeware out there to create animated images, if you really want to do so.


motion photography

and an explanation of how to create it



okay, this isn't from an about page, but I couldn't resist including it:

and here's an explanation of how it was created.

A Slideshow

Trying to choose which of your best photos to feature on your about page? This technique lets you show them all in a single slot.



This was created with Nano Webtools. The program is not cheap, but the slideshow is really cool.

Tips to remember

Prevent horizontal scrolling! It's ugly! It makes your pages hard to read!

• Keep images on the your Main About Page less than 540 pixels in width!
  
• Keep images on your subsequent pages less than 800 pixels in width.
  

When Images are Too Much

Too many images can be overwhelming, and make your pages hard to download. If you have lots of animated images together, the effect can be especially nauseating and cluttered. Use images like spice, and try to achieve a balance.

Free Programs

gifworks -- make images transparent, change the resolution, or simplify the color scheme. Simplifying the color scheme will compress the image and make it load faster.

picasa -- image organization and processing software.

---

Sunnie wrote the first version of this tutorial. Hilary did a subsequent version, with more examples and formatting. Mary offered revisions, images and many insights.

The images here are taken from actual about pages, and link back to those pages.