A picture is worth a thousand words, but that’s not always enough
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.
- Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
- 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.
- Click on the foreground color and use the picker to select a color for your type.
- Select the type tool, click and drag on the image to create your type box, and start typing your content.
- 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.
- Switch to the selection tool to reposition your type as desired.
- 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.”)
- 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%.
- 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.
- 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.
47+ Excellent Ajax CSS Forms
Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.
Calais Offers WordPress Plugin Bounty
Calais which is a metadata generation web service that is powered by Reuters is offering up a $5,000.00 bounty to anyone who can develop a plugin that meets the following criteria. Tag auto suggestion: Using the content of the blog entry the plugin will provide a list of suggested semantic tags. For example, if the post […]
Calais which is a metadata generation web service that is powered by Reuters is offering up a $5,000.00 bounty to anyone who can develop a plugin that meets the following criteria.
- Tag auto suggestion: Using the content of the blog entry the plugin will provide a list of suggested semantic tags. For example, if the post talks about company “a” buying company “b” the plugin would suggest “Acquisition”, “Company A” and “Company B” as potential tags
- Semantic cloud: We all love tag clouds and we’d like to take it a step further. The plugin should support the generation of a configurable semantic tag cloud of entities and facts derived from the blog’s content
- GUID Incorporation: The Calais web service returns a Globally Unique Identifier (GUID) for each document submitted. The plugin should modify the RSS feed for the site to incorporate the GUID in a TBD location.
Calais looks like they will be holding future bounties. However, they have yet to post any information as to what those future projects might be.Calais has opened up a forum where you can discuss the bounty and contest programs. Good luck!
101 CSS Techniques Of All Time- Part 1
101 CSS Techniques designers use all the time to make their web pages just look right.
WordPress Theme Releases For 1 / 23
Two Column Themes Orange and Black This is a widget ready two column theme with contrasting colors. It makes use of orange and black colors. Content area is quite big allowing to fit in more content, sidebar is to the left of the page. Sidebar comes built in with Recent Entries and Recent Comments so you do not […]
Two Column Themes
Orange and Black
This is a widget ready two column theme with contrasting colors. It makes use of orange and black colors. Content area is quite big allowing to fit in more content, sidebar is to the left of the page.
Sidebar comes built in with Recent Entries and Recent Comments so you do not have to install those plugins.
Demo | Release Page | Download
Simpleton
Simpleton is a two column theme which makes use of simple colors. The theme comes built in with recent comments and recent themes. The sidebar is big enough to fit in two rows of information.
The theme is widget ready.
Demo | Release Page | Download
UnGrid
UnGrid is a three column theme based on grids which is widget ready. The theme features an integrated banner management and a featured about section.
Font color is a bit light and could do better with a darker shade. Features a extended footer section to display more information. Comes in Greenish / Pink and Blue colors.
Demo | Release Page / Download
Three Column Themes
iPhone Theme
Widget Ready theme with vast use of rounded corners for headers. The main header area is a bit small which makes it hard to have a custom logo. Makes good use of gray color throughout the theme.
Sidebar is divided into two columns with additional space to show off 125 X 125 banners.
Demo | Release Page | Download
MackOne
A fluid theme based on dark colors consisting of red and black. The background and graphics are appealing. Makes use of white text for better visibility on the dark background.
The theme is widget ready and comes built in with related posts, Flickr support, recent comments, WordPress native tags and Socializing options.
Demo | Release Page | Download
Blue Iris
Blue Iris is a fluid three column theme with widget ready sidebars. Colors are mostly made up with variations of blue. The theme has a wide content area making it easier to add wider images.
The header section and sidebars can do with a bit of improvement. Sidebars are fitted in too close together.
Demo | Release Page | Download
CaseLearns: 2008 Spring Semester Classes
Registration is now open for spring classes at CaseLearns. Whether you’re building your first Web site, adding a podcast to your blog or just want to learn something fun, CaseLearns has a number of options available.
Classes take place in Kelvin Smith Library
Registration is now open for spring classes at CaseLearns. Whether you’re building your first Web site, adding a podcast to your blog or just want to learn something fun, CaseLearns has a number of options available.
The classes listed below may be of particular interest to those developing or maintaining Web sites.
If you are new to Web design and want to learn Dreamweaver, I recommend reading I’m not going to teach you XHTML/HTML, but you should learn it anyway and doing the homework assignment before taking your first Dreamweaver class.
All CaseLearns classes are open to current Case faculty, students and staff, emeriti faculty, alumni, and Senior Scholars. Case affiliates may register if openings are available. Class schedules are subject to change. Please visit the CaseLearns Web site for the most current information.
- Audio Recording and Editing
- Feb 13, 3:00 p.m.
Feb 13, 6:00 p.m.
Mar 20, 3:00 p.m.
Apr 9, 3:00 p.m. - Digital Images I: Introduction & Basic Photoshop
- January 16, 3:00 p.m.
Jan 27, 1:00 p.m.
Feb 7, 3:00 p.m.
Mar 5, 3:00 p.m. - Digital Images II: Advanced Photoshop
- Jan 30, 3:00 p.m.
Jan 30, 6:00 p.m.
Feb 3, 1:00 p.m.
Feb 14, 3:00 p.m.
Mar 26, 3:00 p.m.
Apr 17, 3:00 p.m. - Digital Images III: Even MORE Advanced Photoshop
- Feb 20, 3:00 p.m.
Feb 20, 6:00 p.m.
Apr 24, 3:00 p.m. - Dreamweaver CS3: Introduction
- Feb 12, 1:00 p.m.
Feb 12, 4:00 p.m. - Dreamweaver CS3: Intermediate
- Feb 29, 9:00 a.m.
Feb 29, 12:00 p.m.
Mon, Apr 7, 1:00 p.m. - Dreamweaver CS3: Advanced
- Apr 22, 9:00 a.m.
Apr 22, 12:00 p.m. - Dreamweaver CS3: New Features
- Jan 22, 10:00 a.m.
Jan 22, 12:00 p.m.
Mar 17, 1:00 p.m. - Macromedia Flash: Introduction
- Jan 31, 9:00 a.m.
Jan 31, 12:00 p.m. - Photoshop CS3: New Features
- Feb 28, 3:00 p.m.
Feb 28, 5:00 p.m. - Video Workshop I: Introduction to Digital Video
- Jan 17, 3:00 p.m.
Jan 17, 6:00 p.m.
Feb 6, 3:00 p.m.
Feb 24, 1:00 p.m.
Mar 6, 3:00 p.m.
Apr 2, 3:00 p.m. - Video Workshop II: Advanced Digital Video
- Jan 31, 3:00 p.m.
Jan 31, 6:00 p.m.
Feb 27, 3:00 p.m.
Mar 2, 1:00 p.m.
Mar 27, 3:00 p.m.
Apr 23, 3:00 p.m. - Understanding RSS Feeds
- Apr 9, 1:00 p.m.
Apr 9, 3:00 p.m.