Screen capture, images & tags
Grab a screen image with any computer
(well, Macs & PCs anyway)
- When you are writing about computers and websites, pictures of the screen come in very handy, but you don't need a camera to shoot them..
- On any Macintosh going back to 1984 or so you can take a picture of the whole screen with the shortcut keys COMMAND-SHIFT-3.
- You also can capture part of the Mac screen -- like the snapshot of the Dock on the right -- with COMMAND-SHIFT-4. The picture appears as a numbered image file on your desktop, in PNG format (or PDF format with older versions of OS-X).
- With Windows, you can do almost the same thing: To copy the entire screen, press the PRINT SCREEN key. (Using Windows with a Macintosh keyboard, "F14" is "PRINT SCREEN.") The picture is stored in the Windows clipboard. Open a new or existing document in Photoshop or another imaging program and choose "EDIT... PASTE" to see and save your captured image.
- Both computers systems now have accessory or utility screen capture programs -- "Grab" on the Macintosh, "Snipping Tool" on Windows. Grab saves captured images in the TIFF format. Snipping Tool gives you a choice of formats and permits some annotation of the image. (See the text labels in the Taskbar image below.)
- The keyboard commands are good enough for simple captures and work on older systems -- even Window XP and Macintosh OS-9. See Wikipedia's page on Screenshots.
- When in doubt, get help! On either kind of computer, go to the help system and search for "screen picture" or "screen picture shortcut."
- If you use Grab or Snipping Tool, add
it to your Dock (right) or Taskbar
(below).
Prepare all images with Photoshop's "Save for Web"
- Use Photoshop or another image editor to crop, resize and annotate the screen-captured image
- Use "Save for Web" to convert the image to a smaller file size, as a JPG, PNG or GIF file. (Usually photos are better as jpg; lots of solid colors as gif.)
- For simplicity's sake, give your image files and folders short but clear names in lower-case letters, with no spaces or symbols but the hyphen and underscore. Finish the image name with a period and the three-letter abbreviation for the image type, also in lower-case. Examples: usatoday-home.gif, usatoday-sports.jpg
- If you save an image in more than one size, add a reminder of the size to the filename: usatoday-sports100w.jpg, usatoday-sports500w.jpg, or "usatoday-thumbnail.gif" and "usatoday-big.jpg."
- To make your pages load faster, use
the smallest file that doesn't show
signs of deterioration on screen.
- Repeat: JPG is usually the best format for detailed photographic images with subtle shifts in color; GIF or PNG is better for graphics with large areas of solid color. You can preview both in the "save for Web" four-panel display in Photoshop.
- While testing your page, you can use
"height" and "width" settings in an HTML
"img" tag to preview what an image would
look like at different sizes. BUT don't
rely on HTML to permanently resize
images. Before your page is finished,
use Photoshop to resize the image to fit
your space exactly, and use "Save for
Web" to reduce the file size at the same
time.
- Just altering image dimensions in HTML has no affect on the size of the file downloaded by your users; big file sizes can slow down your site dramatically.
- You also can add highlights or text notes to your captured images with Photoshop.
- Need a Photoshop refresher? Brush up your "digital imaging" skills by creating a graphic banner for the top of your page. One of our textbook authors has a handy banner-making tutorial using a recent version of the program.
Pix on pages: With Links, Captions, "Alt" Text & Tooltips
- Putting an image on a page is simple. If you are writing your own HTML, the basic image tag is simple: <img src="filename.jpg" /> More info at the img page at w3schools. (That simple intro assumes the HTML page and the image are in the same folder. For more about file and folder locations, see my links page.)
- With Dreamweaver, it's even simpler: There's an "Insert" menu at the top of the screen to do most of the job for you.
- Don't just put an image on your page without giving credit to its creator, linking back to its source, and writing a caption, if that will help the viewer. Don't use other folks' creative work without permission.
- Any significant image on your website, such as a screen snapshot in a site review, should have "alt text" in its "img" tag to give some information to users of non-graphical browsers. This is most important when you use a text-image to deliver essential information, such as a graphical logo that gives the name of your site. Search engines can't read JPG files, but they do read "alt text" included in the tags.
- You also can include a "title" inside the image tag to provide more information; it will appear as a "tooltip" when a visitor rolls a mouse over the image. (Roll over the two images above for a demo.) Sometimes this "title" can be the same content as the "alt text." Titles are especially useful if the image has no caption or is a link. Use a title to tell the user what will happen if they click the link. Peek at the source code of this page for examples.
- An image will appear "in line," just
like a series of text characters, unless
you position it. The old HTML img
attributes "align=left" or "align=right"
still work, but CSS styling is more
powerful. See below.
Learn to Float & Center with style
- To position images on your pages, use
Cascading Style Sheets (CSS)
-
See
the CSS
"float" tutorial at
W3schools.com and my own page on floating
boxes. You can make text flow
around an image like the smiling
graduate on the right. Just add this
style="float:right;
margin-left:10px;" to the
image tag or do more
sophisticated positioning with
CSS, including centering.
(Avoid using the older HTML tag
<center>; it is being phased
out in favor of CSS.) You also can
use a stylesheet to create float and
margin combinations for groups of
images or boxes containing them. - Dreamweaver includes a handy bit of CSS in its page layouts to combine the float attribute with a margin so that text doesn't bump into a floated image. Dreamweaver calls the combinations ".fltrt" and ".fltlft" for "float right with a margin on the left" and "float left with a margin on the right." I used one of those on the Dock picture at the top of the page.
- The CSS float property also can be used to position page elements, turning "div" page sections into text columns, menu boxes and more.
- Note: W3Schools has an html images section that may help. In the past, designers used an HTML "align=" attribute to push an image to the right or left of the text. It still works and can be a handy solution on a simple page, but that technique is being phased out in favor of "float."
-
- Getting centered
- There is no "float:center" command, but CSS can be used to center things in various ways.
- See this W3.org "center things" page and my exercise on centering a whole page.
- More than one way to center an image. If you have started peeking at HTML code and learning about styles, compare these two:
Hello!
Be inspired by other sites
- Reminder: You can use "View... Source"
or "View... Page Source" with any
browser to peek at the HTML code of any
page, including this one, to see how the
tags work. (You may have to check your
browser's help screen to find the View
Source command or menu. Some new
browsers hide it, but it's there.)