developerWorks 投稿图片处理

为作者提供的图形设计技巧

本文专门针对 developerWorks 作者;将展示如何为您所编写的 developerWorks 文章或教程制作和提交技术插图(例如图像和屏幕截图)。通过遵循这些技巧和原则,您将增强文章的内容并加快在 developerWorks 上的发表。本文还另外提供了屏幕截图原则,从而避免反复修改。

Ami Dewar, 图形设计师, IBM developerWorks

Ami Dewar 在 developerWorks 团队担任了三年的图形设计师。Ami 的专业背景是打印和 Web 设计,包括页面布局、插图、html 和数字动画。她已为 developerWorks 文章创作了超过 575 个特性图像以及 4000 多个技术插图。Ami 还为 Developers 的 PartnerWorld 创作图形。



Victoria Ovens (vovens@us.ibm.com), 图形设计师, IBM developerWorks

Victoria Ovens 最近加入了 developerWorks 图形设计团队。她毕业于北卡罗莱纳大学位于格林斯博罗的分校,拥有图形设计专业的学位。当她发现无法使用图形生动地表示抽象的编程概念时,她喜欢援救被遗弃的小动物,和她的爱狗玩耍,或者驾驶着她的铃木 SV650S 兜风。



2008 年 4 月 21 日 (最初于 2005 年 1 月 10 日)

在图片中应避免使用以下元素

  • 阴影
  • 直接嵌入在图片内的图题
  • 编号的标注
  • 装饰性的边界特效

如果您的图片中包含了这些元素,那么我们的编辑或图形设计师可能会要求您重新修改图片,这很可能将延迟文章的发表。

为了避免这种情况,请参考 适合所有类型图片的通用原则 以及 特别针对屏幕截图的原则

入门

  1. 浏览 developerWorks 作者指南,并按照指南中的说明提交投稿意向。
  2. developerWorks 编辑会跟您取得联系,如果您提交的投稿意向被批准了,将进一步指导您处理文章内容。
  3. 返回到本文,您将了解如何为您的内容制作有效的图片,以及如何避免反复修改。

遵循本文介绍的技巧和说明,您可以生成非常接近最终发布的图片。在发布到 developerWorks 之前,developerWorks 图形设计团队将对您提交的所有图片进行审核、修改,或者在必要时返回图片让您修改。

步骤 1. 选择可以增强内容的图片类型

有些图片会为您的文章或教程锦上添花,它们包括:技术插图、屏幕截图、照片,在某些情况下,还包括 富媒体文件。您的编辑可以帮助您确定哪些类型的图片可以增强您的内容。下面给出了一些例子:

图 1. 技术插图
技术插图
图 2. 屏幕截图
屏幕截图
图 3. 将技术插图和屏幕截图合并
将技术插图和屏幕截图合并
图 4. 作者照片
作者照片


富媒体文件包括音频、Flash、动画图像和视频。对于这些文件类型,developerWorks 有另外的标准。请联系您的编辑讨论如何在内容中包含富媒体文件。


步骤 2. 遵循适合所有类型图片的通用原则

1. 是否必要?
图片用于解释或增强内容要点,应充分利用这些图片,但同时能滥用。要考虑到读者如何应用这些内容。例如,如果您希望包含一些代码以供读者在自己的应用程序中使用,那么应该提供一个可以剪切和粘贴的代码清单,而不应提供屏幕截图,因为后者不支持剪切和粘贴操作。
2. 是否适合全世界范围内的读者?
避免使用只对某一特定地区有意义的可视化元素,或者在理解上存在争议的图片。例如,不要使用节假日符号、宗教符号、手势/图像、邮箱、特定于国家的标志和地图、喷气式飞机/飞机或者任何类型的武器标志。
3. 是否具有可读性?
所有图片都应该清晰易懂。
4. 是否包含说明或边框?
不要包含说明或边框。
5. 是否使用了适合 Web 的颜色?
如果您在图片中使用了颜色,请从 适合 developerWorks 网站的调色板 中选择颜色,您可以轻松地复制其中的 RGB 百分比。
6. 是否具有合适的高度和宽度?
如果您即将发表的是文章,那么在分辨率为 72 ppi(像素/英寸)的情况下,图片宽度不能超过 572 像素,高度不能超过 800 像素,这是适合 Internet 的优化标准。如果您即将发表的是教程,那么在分辨率为 72 ppi 的的情况下,图片宽度不应超过 500 像素,高度不应超过 800 像素。

应根据需要设置图像和屏幕截图的大小,保持内容清晰。如果您的图片宽度小于 572 像素,那么是可以接受的。如果图片宽度必须大于 572 像素才能保持清晰,那么按照这个大小提交原始图像,图形设计团队将重新调整大小以避免图像失真。

7. 格式是否正确?
以下这些格式均可以使用:jpg、gif 和 png(但是图形设计师将把 png 格式的文件转换为 jpg 或 gif 格式发布)。
8. 是否具有合适的文件名?
尽量保持文件名简单(最好少于 20 个字母和数字字符)并使用小写字母(例如 figure1.gif 和 screen1.gif)。避免使用符号和空格。

现在来了解一下特别针对 技术插图屏幕截图 的技巧和原则。


创建技术插图

除了 适合所有类型图片的 8 条通用原则 以外,还提供了以下专门针对技术插图的技巧和原则。

可以使用的程序

您可以使用 Microsoft® 画图, Adobe Illustrator、Adobe Photoshop、Microsoft Word 和其他图形程序创建技术插图。

样式

最有效的技术插图应该具有简单、直观的特性,并且避免使用大量文字说明:

  • 箭头应该使用一种常用的样式。
  • 线的粗度 1。
    图 6. 符合标准的示例箭头和粗度为 1 的线
    符合标准的图像示例
  • 外形应使用 1 像素的黑色边线。
  • 对于图片中的任何文本,例如标签和未编号的标注,应满足以下要求:
    • 英文使用大小为 12 的 Arial 字体;
    • 中文使用大小为 12 的宋体和 Arial 或 Tahoma 字体;
    • 必要时使用粗体强调重要内容,但应尽量少用;
    • 避免使用斜体,因为斜体不易阅读;
    • 使用句子形式的大写;
    • 使用公认的缩写词和产品名(与编辑协商)。

    图形设计团队将根据需要对图片中的文本样式进行调整。

  • 如有必要可包含以下集合中的 常用图像
  • 不要使用阴影、渐变或三维图像。
  • 不要在图像中包含说明或图像标题。
  • 不要使用边框包围图像。

常用图像

本文提供的标准计算机图像(例如笔记本、手机、PDA 等)分类由图形设计团队所有(避免版权纠纷)。要保持图像一致性和简单性,可以在技术插图中使用任何一种常用图像。要将它们添加到您的插图中,请 下载所有图像的压缩文件,选择需要的图像,将其插入到您的图形应用程序中。

图 7. 常用图像示例
常用图像示例

如果您没有找到符合您要求的图像,也可以使用自己的图像,但是请确保图像样式和此处的图像一样简单。


创建屏幕截图

除了 适合所有类型图片的 8 条通用原则 以外,下面还提供了特别针对屏幕截图的技巧和原则。

对与屏幕截图,最重要的考虑因素是图像尺寸、文件格式和可用的工具。

调整屏幕截图尺寸

在保持清晰的前提下,应尽量使用最小尺寸的屏幕截图(调整将被截取的应用程序窗口的大小,使其仅包含需要捕捉的信息)。不要修改原始的屏幕截图,即使它超出了 适合所有类型图片的 8 条通用原则 中指定的宽度。在提交文章或教程的底稿时,只需提交原始文件 ;编辑团队将根据需要重新设置屏幕截图的大小。

屏幕截图的文件格式

保存屏幕截图的最佳格式是 jpg 或 gif,因为它们针对高对比度图形(例如应用程序界面)进行了优化。避免使用压缩格式,例如 24 位的 bmp 和 tif 格式。

屏幕截图工具

大多数软件平台都可以使用屏幕截图工具。例如,SnagIt 是一款基于 Windows 的流行工具(参见 参考资料 中的链接),也可以使用您的平台中内置的屏幕截图工具。例如,Microsoft® Windows®、Apple Macintosh 和 Linux® 中附带的工具,足以满足屏幕截图需求(如果您需要截取除屏幕以外的内容,例如游标或指针,您可能需要使用另外的应用程序)。下面介绍 如何实现完美的屏幕截图


优化屏幕截图

在进行屏幕截图之前,请先移除所有的工具栏( 例如,在 PC 上,选择 View > Toolbars,取消所有工具栏的选中状态。在 Mac 上,选择 View > Collapse Toolbars)。

使用 SnagIt

Windows 用户可以使用 SnagIt 进行屏幕截图(参加 参考资料 中的链接)。我们建议使用以下设置来获得最佳效果 — 确保您的图片符合 developerWorks 的风格并最小化重复修改:

  • 箭头
    在 SnagIt Editor 中,选择 Paint Tools > Arrow Tool。单击 Style 按钮并选择第一个箭头。将 Width 设置为 1,Opacity 设置为 100(默认值),选中 Antialias,并取消选中 Drop shadow
    图 8. SnagIt 的箭头样式设置
    snagit 箭头
  • 重点区域
    在 SnagIt Editor 中,选择 Paint Tools > Shape Tool。选择希望使用的形状,推荐使用矩形或圆形。将 Width 设置为 1,将 Opacity 设置为 100(默认值),选中 Antialias,取消选中 Drop shadow
    图 9. SnagIt 的重点区域设置
    snagit 形状
  • 标注
    在 SnagIt Editor 中,选择 Paint Tools > Callout Tool。对于 Category,选择 Arrows 或 Balloons。本文的示例使用了 callout balloon,但是也可以应用 callout arrows。将 Opacity 设置为 100(默认值),并取消选中 Drop shadow
    图 10. SnagIt 的标注设置
    snagit 标注
    对于标注颜色,将前景色设置为灰色(见图 11),将背景色设置为白色(标注中的文本设置为黑色、Arial、字体大小为 12)。
    图 11. SnagIt 的标注颜色设置
    snagit 标注颜色

使用 Windows 屏幕截图工具

Windows 使用两种不同的组合键将屏幕截图发送到剪贴板。使用以下任一种组合键,您可以将图像粘帖到 Microsoft 画图 或其他图形程序中,然后进行保存:

表 1.在 Windows 上进行屏幕截图
组合键效果
Alt+PrtSc (Alt + PrintScreen)对当前窗口截图,包括窗口的边框
PrtSc (PrintScreen)对整个屏幕显示进行截图

如果需要截取菜单显示,可以在按下 Alt+PrtSc 或 PrtSc 键的同时单击鼠标左键。不同应用程序处理这两种组合键的方式都有所不同,因此需要同时尝试这两种组合键。

使用 Macintosh 屏幕截图工具

提供了三种不同的组合键进行屏幕截图:

表 2. 在 Macintosh 上进行屏幕截图
组合键效果
CMD+SHIFT+3截取完整的屏幕
CMD+SHIFT+4允许拖拽并选择区域进行截取
CMD+SHIFT+4,然后按下空格键截取窗口、菜单栏、dock 窗口或其他区域(将指针放在上面,所选的区域将突出显示,然后单击鼠标)

将屏幕截图保存为桌面上的 PDF 文件,或者将其粘帖到一个图形应用程序或文档中。

Mac OS X 屏幕截图应用程序 Grab 还支持 OSX 及更高版本。

使用 Linux 屏幕截图工具

多数 Linux 发行版都提供了若干个屏幕截图工具。图形工具包括 GIMP(GNU Image Manipulation Program)和 ksnapshot。命令行工具包括 ImageMagick 中的导入命令。

在 GIMP 中,可使用 File > Acquire > Screen Shot... 对话框截取单个窗口或是整个屏幕。类似地,可以使用 ksnapshot 截取单个窗口或整个屏幕。这两种 GUI 程序都允许您在请求截图之后设置延迟,以便将焦点放在正确的窗口或打开菜单。

使用 ksnapshot 时,请记住在截取图形后保存截图。如果您使用的是 ImageMagick 的 import 命令,则可以将其与 sleep 命令相结合,提供延迟以进行窗口设置。

表 3. 在 Linux 上进行屏幕截图
组合键效果
sleep 5; import -frame snapshot1.png等待 5 秒钟后截取鼠标单击的窗口(包括窗口的框架)
sleep 7; import -frame -window 0x1e00079 snapshot2.png等待 7 秒钟后截取 id 为 0x1e00079 的窗口。使用 xwininfo 命令确定窗口的 id
sleep 3; import -window root snapshot3.png等待 3 秒钟后截取整个屏幕

要查看图像的大小,请使用 ImageMagick 的 identify 命令。


创建作者照片

如果您希望在文章或教程的结束部分附上您的照片,请提交一张未经修饰的数码照片。比较理想的照片是,使用浅色或白色的纯色背景,垂直方向的胸部以上的正面照。照片的最小尺寸应为 200 x 250 像素,以便留出调整空间。发布的最终照片将为半身黑白照(64 x 80 像素)。请以您的姓名命名文件。


步骤 3. 将图片提交给 developerWorks

最终的图片清单

在提交图片之前,请检查是否符合以下条件:

  1. developerWorks 网站的编辑是否通过了您最初的写作意向?
  2. 是否为 用来增强内容的图片 选择了合适的类型?
  3. 所包含的图片是否是必需的,适合全球范围内的读者并具有可读性;没有添加说明或边框;使用适合 Web 的颜色;具有合适的大小、格式和名称?(参考 适合所有类型图片的通用原则 以及 特别针对屏幕截图的原则)。
  4. 是否使用了 简单直观的样式
  5. 只使用 developerWorks 图形设计团队所有的 标准计算机图像(可通过 下载 获得)?
  6. 是否查阅了 图片提交指南

请在向 developerWorks 编辑提交文章或教程的最终底稿时提交图片文件。请遵循以下规则提交图片:

  • 不要以任何形式修改图像源文件(包括大小)。
  • 如果您曾使用过文字处理程序编写文章,并向其中插入图片,例如将屏幕截图插入到文档文件中,请将图像源文件和文档文件分开进行提交。
  • 如果电子邮件附件中的源文件的总大小超过了 10 MB,请在发送邮件前以 zip/stuffit/infozip 文件的形式保存。
  • 附加一些特殊说明,包括裁剪、标签、颜色或重新绘制。如果您的图片不能够进行更改(例如,由计算机或程序使用 UML 生成),请提醒您的编辑。
  • 如果希望合并不同类型的图像(例如像 图 3 一样将照片或屏幕截图添加到一副技术插图中,请提交所有原始屏幕截图和照片以及修改过的图像,以便在需要时进行修改,同时仍然保持可读性。

提交图片之后

developerWorks 编辑将对所有图像进行审核,然后发给图形设计团队。 图形设计团队可能会根据需要对图片重新着色、调整大小、调整格式、裁剪、修改,或返回图像。

颜色

图 12 显示了符合 developerWorks 网站色调的调色板。如果需要修改某种颜色,图形设计师将尽量使其接近图片的原始颜色。

图 12. developerWorks 调色板
调色板

下载

描述名字大小
常用计算机图像techarticons.zip109KB

参考资料

学习

获得产品和技术

  • 使用来自 TechSmith 的 SnagIt,您可以捕捉屏幕中的任何内容,例如全部屏幕、部分屏幕,甚至是滚动的屏幕。您可以购买或下载试用副本。
  • GIMPImageMagick 是大多数 Linux 发行版附带的工具,并可用于其他一些平台,包括 Microsoft Windows 和 Apple Macintosh。

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=XML
ArticleID=269609
ArticleTitle=developerWorks 投稿图片处理
publish-date=04212008