tips Archives - Successful Blog

Sandy’s Great Graphic Tip: Re-sizing Graphics in an Editor

March 11, 2007 by Liz

What Happened to that Picture?

Sometimes you see photos on websites that look funny – too wide or narrow, tall or short. In other words, out of proportion. Some other terms used are scale, perspective and aspect ratio. One common way to re-size a graphic is using a WYSIWYG editor. WYSIWYG is pronounced wiz-e-wig and is short for what you see is what you get.

Hover over the corner of a graphic, click and drag. Depending on the program, it’s possible to lose perspective, so keep this little tip in mind.

Hold down the shift key while clicking and dragging. It will keep the picture looking square.

Another Option to Re-Size a Graphic

Another option is to right-click the graphic and choose format. In the window, you usually have a choice to re-size the graphic by pixel size or percentage of original. You will probably see a check box for preserve aspect ratio or uniform scale. Selecting the box means when you enter the horizontal or vertical size, the other dimension is automatically selected to keep the graphic in perspective.

Here’s a visual example of what I mean:

It’s also a good idea to re-size and edit graphics before uploading them. When you upload a large graphic and only want to display a small graphic, it can increase the file size and make the page load slowly. Let’s talk more about that another time.

Remember, a good-looking graphic makes your webpage look interesting and professional.

See you next time!

–Sandy, Purple Wren

Sandy’s Great Graphic Tips: Selecting File Types

February 11, 2007 by Liz

Which graphic file type is best? It depends . . .

A lot of people wonder what the difference is between file types. HereÃ¢â¬â¢s a quick description of three common types. To learn more, follow the links for examples and detailed explanations.

.jpg or .jpeg = Joint Photographers Experts Group

Superior for photographs, computer game screenshots, blends or gradients (including metallics)
Allows compression options (removes information to make the file smaller)
Can be used as an image map (single image with clickable areas)
Does not support transparency
Supports millions of colors

.gif = Graphics Interchange Format

Superior for simple shapes, line art, diagrams, or flat colors (think cartoons, icons, logos, buttons)
Supports animation
Supported by most browsers
Allows transparent backgrounds (for round or irregular shapes)
Can be used as an image map
Supports 256 colors maximum

.png = Portable Network Graphics

Designed to improve/replace .gif file but does not support animation
Supports transparency
Preserves sharp edges
Not all browsers support it but it’s gaining in popularity
Supports RGB or greyscale (does not support CMYK for print)

How do you know if you have the right file format?

If itÃ¢â¬â¢s too grainy, too fuzzy, or the file size is too large, you might want to review the descriptions above or check out Pat Kalbaugh’s GIF vs JPG page at The Sirius Web. Experiment a little – save it as a different file type and see what happens.

See you next time!

–Sandy, Purple Wren

Sandy’s Great Graphic Tips: Why Use Graphics?

February 4, 2007 by Liz

What Does Learning Style Have To Do With Graphics?

We each have a different learning style. The three basic styles are visual, auditory, and kinesthetic (VAK). Approximately 60-70% (depending on the source) of the general population are predominantly visual learners. They need visual aids to fully grasp a concept or idea.

Graphics are a huge reason people flock to the web. Humans are generally more receptive to things we see compared to things we hear. That means a well-placed graphic on your post can make a world of difference to their experience.

The term ‘graphic’ describes visual elements like photographs, drawings, illustrations, diagrams, charts, maps, symbols, fonts, etc. Graphics can be a very effective method to express a concept. Remember the proverb, “a picture is worth a thousand words”? Sometimes you can use a graphic to express an idea that may otherwise take pages.

Graphics:

add color and depth
tell a story
catch the eye
retain reader interest
express a concept

What’s Your Learning Style?

What type of learning style do you have? Visual, Auditory or Kinesthetic? Find out with the Learning Style Survey.

Here’s my results. The graphic says it all…

Stay tuned… in upcoming weeks we’ll talk more about graphics. Let me know what you think. If there are specific things you want to discuss, feel free to leave a comment and we’ll start there.

Here’s some ideas I thought of:

Using graphics effectively
Selecting graphic file types (.gif, .jpg)
Sizing and optimizing graphics
Editing image tags in html
Using white space
Cropping photos
File naming conventions
Placing images in text
Using a scanner to create graphics
Finding graphics
Using special effects
Locating books and resources
Using color, grayscale, or duotone

See you next time!

–Sandy, Purple Wren