Blog Surfer

Quick Accessibility Testing
A recent project of mine required me to do a quick review of the accessibility level of a site. Nothing serious, just to show what was possible to test and where the site scored right now. I managed to assemble a small list of tools that I believe did a rather good job. This article […]

A picture is worth a thousand words, but that’s not always enough
How to add captions to images in Photoshop On the Web it is preferable to place your caption in the HTML. If that won’t work and your captions are long, you should also link to a place providing a description of the image and an alternative rendering of the text. Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those…

How to add captions to images in Photoshop

On the Web it is preferable to place your
caption in the HTML. If that won’t work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.

Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.

Establish your project parameters—size matters

Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.

As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.

Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990’s) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.

Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.

Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won’t work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.

How to add text in Photoshop

For this example I’ll walk you through the steps used to caption the image used in this entry. We’ll add text on top of the image and below.

1. Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
2. Resize your photo by going to the image menu and choosing image size. Make sure that “constrain proportions” and “resample image” are checked. Set the resolution appropriate to your project. I’m using 72 for the Web. Choose the appropriate width for your image. I’m using 240 pixels.
3. Click on the foreground color and use the picker to select a color for your type.
4. Select the type tool, click and drag on the image to create your type box, and start typing your content.
5. If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
6. Switch to the selection tool to reposition your type as desired.
7. If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words “drop shadow” to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you’re competition is “Hello Kitty.”)
8. Sometimes a drop shadow isn’t enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I’ve set the opacity of the black square to 50%.
9. If you’ve tried a few of these options and your type still doesn’t look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I’ll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I’ve added .5 inches. Now just add your type to this area. If you’ve added too much space you can crop accordingly.
10. Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose “Save for Web.” Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.

Alternative Text for Captions

Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don’t show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke’s article, Accessible alternatives, to learn more about these techniques. For this example I’ve linked to a description of the image and text and placed it here on the page:

Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans’s knee. Captions built into the image read as follows:

• Spot, can’t you find a squirrel to chase? You’ve been sitting here panting on my leg for years now.
• What, and you think this is my idea of the perfect view?
• This caption is part of the image file, but sits below the picture.

In Conclusion

As you’ve seen, it’s pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.

Our new addition
The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team.

The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team. Gina comes to us from Kent State University where, in her capacity as Senior Web/Editorial Specialist, she worked on—among other things—the award winning Kent State Magazine Web site.

Gina is just settling in right now, getting her computers configured and such, but we’ll soon have her busy building sites, answering questions, and sharing her insights here on the Web Development blog. (In fact I’ll be tagging her to follow up on a blog meme later today.)

Matt Cutts On Securing WP
Matt Cutts has published an article which highlights three different ways to secure your WordPress installation. The first tip involves locking down your Admin directory. Matt configures his .hatccess file so that only his IP address is allowed to access the WP-Admin directory. For the second tip, you should create a blank index.html file to […]

Matt Cutts has published an article which highlights three different ways to secure your WordPress installation. The first tip involves locking down your Admin directory. Matt configures his .hatccess file so that only his IP address is allowed to access the WP-Admin directory. For the second tip, you should create a blank index.html file to place into your wp-content/plugins directory. Not doing so allows your plugin folder to be wide open, giving nosy people an idea as to what plugins you have installed.

Matt’s third and final tip involves subscribing to the official WordPress development blog - http://wordpress.org/development/feed/ As we should all know by now, this is the best way to stay up to date.

Matt also offers a bonus tip where he suggest removing the line of code within your header.php file that publishes your WordPress version.

All of these are excellent tips. But what do you do to secure your WordPress installation?

Sharepoint 2007 from an interface developer’s view
Like Cameron Moll (Skinning Sharepoint and Pointedly unskinnable), I’ve been working with Sharepoint 2007 (aka MOSS) recently, and I hope you don’t mind me posting a few articles about my work here. I’ve found far too few blog posts that really go to the depth in explaining how things really work. I’ll try to do […]

Configuring WP Permalinks
Quite often, we hear of the terms (permalinks or pretty permalinks) which can also be called SEO-friendly URLs. These URLs are not only SEO friendly, but I believe they are human friendly as well. By default, WordPress uses URLs that look like a mishmash of letters and numbers with a few question marks mixed in […]

Quite often, we hear of the terms (permalinks or pretty permalinks) which can also be called SEO-friendly URLs. These URLs are not only SEO friendly, but I believe they are human friendly as well. By default, WordPress uses URLs that look like a mishmash of letters and numbers with a few question marks mixed in for good measure. These types of links are frowned upon by search engine spiders and as a human being, they are also hard to read.

Fortunately, WordPress provides a way for us to change this linking structure to something understandable. WordPress calls these Permalinks. Permalink settings can be configured a number of different ways. One of the ways to quickly configure permalinks is by choosing one of the Common Options. These common options include:

Default - http://www.domain.com/?p=123

Date and name based - http://www.domain.com/2008/01/15/sample-post/

Numeric - http://www.domain.com/archives/123

There is no sense in using the default option so choose either Date and name based or Numeric if you don’t feel like tinkering with the Custom Structure.

The custom structure of the permalinks settings area allows you to customize the way permalinks are displayed by using any combination of the following permalink tags.

%year% - 4-digit year (for example, 2008)

%monthnum% - 2-digit month (for example, 01 for January)

%day% - 2-digit day (for example, 15)

%hour% - 2-digit hour of the day (for example, 20 for 10PM)

%minute% - 2-digit minute (for example, 50)

%second% - 2-digit second (for example, 24)

%postname% - Text separated by dashes which usually ends up being the post name. (for example, configuring-wp-permalinks)

%post_id% - The unique, numerical ID of the post (for example, 124)

%category% - The text of the category name that the post is filed in (for example, how-to)

%author% - Text of the post author’s name (for example, ronald-huereca)

Example of custom structure in use:

Custom Structure: /%year%/%monthnum%/%day%/

Link Output: http://www.domain.com/2008/01/16/

Make sure that you include the back slashes at the beginning of the custom structure, after each tag and at the end. This will ensure that WordPress writes the correct rules in the .htaccess file via mod_rewrite.

For my own blog, I seem to have done fairly well in the search engines by using the Custom Structure method and using the %postname% tag. I can’t say for sure which combination would do better or worst for search engines. The only thing I can suggest is that you configure your permalinks to look whats best for you.

*WARNING*

Changing the structure of your permalinks affects all of the permalinks on your blog. This is important to know because search engines will have indexed posts on your site via their permalinks. If you change the permalink structure mid stream, you will end up invalidating all of those links.

What to do if you don’t have a .htaccess file?

If you notice that you don’t have a .htaccess file within the same directory as your WordPress installation, you can create one by first creating a blank .txt file and saving the file as htaccess.txt. Upload this file via FTP to the same folder that houses your WordPress installation. Once the file is uploaded, set the permissions to the file as 666. Next, rename the file to .htaccess. Now you should have a blank .htaccess file for which WordPress can write the proper permalink rules to.

Servers That Don’t Use Apache Or mod_rewrite.

If the webhosting server you are on does not have the apache module mod_rewrite enabled, you can still use the permalink settings in WordPress by placing index.php in front of any custom permalink tags.

For example: /index.php/%year%/%monthnum%/%day%/

Equals: http://www.domain.com/index.php/2008/01/16/

Using index.php in this way eliminates the need for a .htaccess file.

I hope this little primer on how to configure your permalinks within WordPress was helpful. I’ve seen too many blogs out on the net that have yet to take advantage of this awesome feature. As I’ve said before, using any sort of permalink structure is better than the WP default. Not only is it beneficial in terms of SEO, but it also makes it easier for human beings to see at a glance, what a particular link is pointing to without having to visit the page.

If you use the custom structure aspect of permalinks, I’d be very interested in knowing which configuration of permalink tags you have chosen to use and why.

2007 Crunchies: The Winners
2007 Crunchies: The Winners: Automattic won both categories they were nominated for. I love the way “long tail” is misspelled (I hope) in the article. Congratulations to Toni, Matt and the rest of the Automattic team!

2007 Crunchies: The Winners: Automattic won both categories they were nominated for. I love the way “long tail” is misspelled (I hope) in the article. Congratulations to Toni, Matt and the rest of the Automattic team!