入门
- 查看developerWorks作者指南 。
- 使用内容提交表单将您的想法建议给developerWorks编辑。
- developerWorks编辑将与您联系,如果您的想法得到批准,您将获得有关如何继续处理内容的进一步说明。
- 返回本文以获取有关为内容开发有效图形并消除耗时的重绘的建议。
此处的提示和说明可以帮助您生成与最终发行版本非常相似的图形。 在developerWorks网站上发布之前,您提交的所有图形都将根据developerWorks图形设计团队的需要进行检查,修订或退还给您进行返工。
有什么问题吗 联系平面设计师Anna Gilbert 。
步骤1.选择将增强您的内容的图形类型
可以改善您的内容的图形包括技术数据,屏幕截图,在某些情况下还包括富媒体文件 。 您的developerWorks编辑器可以帮助您确定哪种图形将增强您的内容。 以下是一些示例:
图1.技术图
![技术插图样本](https://i-blog.csdnimg.cn/blog_migrate/9cb584c73df10ef4f5edcae6d6ad3a97.png)
图2.屏幕截图
![屏幕截图示例](https://i-blog.csdnimg.cn/blog_migrate/366fdfa46ebb7eb413b923a376389fbe.png)
图3.技术图与屏幕截图合并
![屏幕截图的技术插图样本](https://i-blog.csdnimg.cn/blog_migrate/568aab9f6d6aeed3632ed951ae79757e.png)
图4.作者照片
![作者照片样本](https://i-blog.csdnimg.cn/blog_migrate/98b11b9c158a03433db2e1dd2f7471e9.png)
富媒体文件包括音频,Flash,动画图像和视频。 对于这些文件类型,developerWorks有一套单独的标准。 请与您的编辑联系,以讨论在您的内容中包含富媒体文件。
第2步。对于所有类型的图形,遵循9个通用准则
-
1.必要吗?
- 图形用于解释或增强内容的消息。 它们不应被未充分利用或滥用。 考虑一下读者将如何使用这些材料。 例如,如果要包括一些读者可以在其应用程序中使用的代码,请提供一个可供读者剪切和粘贴到其应用程序中的代码列表,而不是一个不支持剪切和粘贴代码的屏幕截图。 2.适合全世界的观众吗?
- 避免仅对特定地理位置有意义的视觉元素,或可能会引起争议的视觉元素。 例如,请勿使用假日符号,宗教符号,手势/图像,邮箱,特定国家/地区的国旗和地图,喷气机或飞机或任何与武器相关的符号。 3.可读吗?
- 所有图形均应清晰可见。 4.无障碍?
- 对于盲人或视力不佳的读者,文本阅读器可以阅读文本,而图像则是另一回事。 为了使视力不佳的读者可以访问图像,请确保在图像之前或之后添加文字以描述图像。 还可以在<img>标记的“ alt”属性中提供图像的简短描述。 不要从表中创建图像,也不要过分依赖图像中包含的文本。 并避免在图像中使用颜色来传达含义。 请参阅图像中这些可访问性错误的示例。 要了解有关Web内容可访问性的更多信息,请浏览《 Web内容可访问性指南2.0》以获取提示和技巧。 5.没有标题,边框,阴影或编号标注?
- 请不要添加标题,边框,阴影或编号标注。 6.网页安全色?
- 如果您在图形中使用颜色,请从developerWorks Web安全的调色板 (包括RGB百分比)中选择颜色,以便您轻松复制它们。 7.适当的宽度和高度?
-
在已发布的内容中,图像的宽度不应超过850像素,高度不得超过72 ppi(每英寸像素)800像素,这是Internet的标准优化。
使图像或屏幕捕获尽可能大以使其清晰可见。 如果您的图形宽度小于850像素,那很好。 如果您的图形必须超过850像素才能清晰可见,请以大尺寸提交原始图像,图形设计团队将调整其大小以避免变形。
8.正确的格式?
- 这些格式非常理想:jpg,gif和png。 如果您想使用其他格式,请咨询平面设计师Anna Gilbert 。 9.正确的文件名?
- 保持文件名简短(不超过20个字母数字字符)和小写(例如,Figure1.gif和screen1.gif)。 避免使用符号和空格。
现在,查看针对可访问性错误 , 技术数据和屏幕截图的其他提示和准则。
避免可访问性错误
盲人或视力障碍者依靠屏幕阅读器应用程序来收听网页的基于文本的内容。 无法访问以图像而不是XML编码的元素(<tables>)形式显示的表格信息。 如果将表格显示为图像,则屏幕阅读器无法读取表格图像中包含的内容。 最好使用XML元素对表进行编码,因为屏幕阅读器可以读取表中的文本。
图5显示了一个无法访问的图像表。
图5.以图像形式显示的无法访问的表格的示例
![无法访问的表已创建为图像](https://i-blog.csdnimg.cn/blog_migrate/d2b0ae2dc405dd27ae96d736d9225704.png)
图5还有另一个可访问性错误。图像中使用的颜色为内容增加了含义。 因为颜色的解释取决于视觉,所以颜色的表示对于盲人或视力有限的人没有意义。 此外,对颜色的提及对于色盲的人也可能是一个挑战。
图6是使用颜色的图像的示例,但是颜色不会增加图像的含义或图像中包含的内容。
图6.使用颜色的图像示例,其中颜色没有特殊含义
![有颜色的图像,其中颜色没有意义](https://i-blog.csdnimg.cn/blog_migrate/9cb584c73df10ef4f5edcae6d6ad3a97.png)
所有图像必须在<img>标记上具有有意义的“ alt”属性。 “ alt”属性之所以重要,有两个原因。 首先,它是屏幕阅读器遇到图像时所读取的内容。 因此,“ alt”属性的有意义的文本对于残障人士来说,了解图像是什么以及如何在上下文中发挥作用至关重要。 其次,不包含“替代”内容或包含不充分的“替代”内容的图像被视为不可访问。
图7包含不足的“ alt”内容。 请注意,将鼠标悬停在图像上时,“ alt”内容可见。
图7.“ alt”内容不足的图像示例
![显示的“ alt”内容不足的图像](https://i-blog.csdnimg.cn/blog_migrate/5a8da02b64306085d385e4f91e8c9385.png)
图片的“替代”内容不足以描述图片的目的。 “ Image1”没有说明图像中包含的内容或其在网页中的用途。 尽管“ alt”属性中内容的存在可能满足屏幕阅读器应用程序(例如JAWS)的要求,但仍然认为非描述性文本(例如Image1)不可访问。
图8是显示适当的“ alt”内容的同一图像的示例。
图8.具有适当“ alt”内容的图像示例
![显示具有适当“替代”内容的图像](https://i-blog.csdnimg.cn/blog_migrate/50d51c0879c6cc1e2252aea256825ae5.png)
在图8中,“替代”内容更清楚地描述了图像及其用途。
包含适当的“替代”内容只是确保内容中的图像符合可访问性标准的一部分。 图像与周围内容之间的上下文关系对于满足可访问性标准也至关重要。
整个XML模板中的注释可指导您满足内容和图像的可访问性标准。
创建技术图
除了适用于所有类型图形的9条通用准则外 ,这些准则和技巧还特定于技术数据。
您可以使用的程序
您可以使用Microsoft®Paint,Adobe Illustrator,Adobe Photoshop,Microsoft Word和其他图形程序来创建技术图形。
样式
最有效的技术数据很简单,直接,并且没有详尽说明:
- 箭头应使用一种常见样式。
- 线应为单点粗线。
图9.批准的箭头和1点线的示例
- 形状应具有一像素的黑色边框。
- 图形中的任何文本,例如标签或未编号的标注,应:
- 使用12点Arial字体
- 根据需要使用粗体突出显示,但要尽量少用
- 避免斜体突出显示,因为它很难阅读
- 使用句子大写
- 使用批准的缩写和产品名称(请与您的编辑联系)
图形设计团队可以根据需要调整图形中的文字样式。
- 根据需要从下面的集合中添加普通图像 。
- 请勿使用阴影,渐变或三维图像。
- 请勿在图像中包含标题或图像标题。
- 请勿在图像周围添加边框。
常见图片
图形设计团队拥有各种标准的计算机图像(例如笔记本电脑,移动电话,PDA等),以避免版权问题。 为了保持一致性和简化性,您可以在技术图中使用任何这些常见图像。 要将其添加到图形中,请下载所有图像的zip文件 ,选择所需的图像,然后将其插入图形应用程序。
图10.常见图像示例
![批准图像的示例,例如数据库图像,坐在计算机,台式计算机和服务器上的人](https://i-blog.csdnimg.cn/blog_migrate/d99676c1a2d15b5c60e9ffa7d00e5242.png)
没有看到您需要的图像? 随时询问图形团队-我们还有许多其他标准图像,并且可能有您想要的东西。 您也可以使用自己的一种,但请保持此处显示的图像中的简单风格。
创建屏幕截图
除了针对所有类型的图形的9条通用准则外 ,这些准则和技巧还特定于屏幕捕获。
屏幕捕获最重要的考虑因素是大小,文件格式和可用工具。
调整屏幕截图的大小
通过将浏览器窗口的大小调整为仅包含您需要捕获的信息,尝试在尽可能清晰的同时捕获尽可能小的屏幕。 即使原始屏幕截图超过了9种通用准则中为所有类型的图形指定的宽度,也请勿更改。 提交内容草稿时,只需提交原始源文件; 屏幕截图将根据需要调整大小。
屏幕截图的文件格式
保存屏幕截图的最佳格式是jpg,gif或png,因为它们针对高对比度的图形(例如应用程序界面)进行了优化。 避免使用压缩格式,例如24位bmp和tif格式。
屏幕截图工具
屏幕捕获工具可用于大多数软件平台。 例如,SnagIt是一种流行的基于Windows®的工具(请参阅参考资料中的链接),并且特定于您的平台的内置屏幕捕获工具也可以很好地使用。 例如,Microsoft®Windows,Apple Macintosh和Linux®随附的工具足以进行屏幕捕获。 (如果需要捕获屏幕以外的其他内容(例如光标或指针),则可能需要其他应用程序。)下面提供了有关完美捕获屏幕的具体建议 。
优化屏幕截图
进行屏幕截图之前,请删除所有工具栏。 (例如,在PC上,选择“ 视图” >“ 工具栏” >“ 取消选择所有工具栏” 。在Mac上,选择“ 视图” >“ 折叠工具栏” 。)
使用SnagIt
Windows用户可以使用SnagIt进行屏幕截图(请参阅参考资料中的链接)。 我们建议您使用以下设置以获得最佳效果,并确保您的图形符合developerWorks的风格并最大程度地减少返工:
- 箭
在SnagIt编辑器中,选择“ 绘画工具” >“ 箭头工具” 。 单击样式按钮,然后选择第一个箭头。 将“ 宽度”设置为1,将“ 不透明度”设置为100(默认值),选中“ 抗锯齿” ,然后取消选中“ 阴影” :图11.箭头样式的SnagIt设置
- 重点领域
在SnagIt编辑器中,选择“ 绘画工具” >“ 形状工具” 。 选择您想要使用的形状,最好是矩形或圆形。 将“ 宽度”设置为1,将“ 不透明度”设置为100(默认值),选中“ 抗锯齿” ,然后取消选中“ 阴影” :图12.重点区域的SnagIt设置
- 标注
在SnagIt编辑器中,选择“ 绘画工具” >“ 标注工具” 。 对于类别 ,选择箭头或气球。 在此示例中,我们使用标注气球,但相同的设置适用于标注箭头。 将“ 不透明度”设置为100(默认值),然后取消选中“ 阴影” :图13.标注的SnagIt设置
对于标注颜色,请选择灰色(R:192,G:192,B:192)作为前景色(见图14),选择白色(R:255,G:255,B:255)作为背景色。 (对于标注中的文本,请选择黑色(R:0,G:0,B:0),Arial,12磅字体。)图14.标注颜色的SnagIt设置
使用Windows屏幕捕获工具
Windows提供了两种不同的组合键,用于将屏幕捕获发送到剪贴板。 使用以下组合键之一,可以将图像粘贴到Microsoft Paint或其他图形程序中,然后将其保存:
表1.在Windows上捕获屏幕
按键组合 | 结果 |
---|---|
Alt + PrtSc(Alt +打印屏幕) | 捕获活动窗口,包括窗口边框 |
PrtSc(PrintScreen) | 捕获整个屏幕显示 |
如果需要捕获菜单显示,则可以在按Alt + PrtSc或PrtSc的同时单击鼠标左键。 不同的应用程序倾向于对这些键组合进行不同的处理,因此您需要尝试两种键组合。
使用Macintosh屏幕捕获工具
三种不同的按键组合可以捕获屏幕:
表2.在Macintosh上捕获屏幕
按键组合 | 结果 |
---|---|
CMD + SHIFT + 3 | 捕捉整个屏幕 |
CMD + SHIFT + 4 | 允许您拖动并选择要捕获的区域 |
CMD + SHIFT + 4,然后按空格键 | 捕获窗口,菜单栏,停靠栏或其他区域(将指针放置在突出显示所选区域的位置,然后单击鼠标) |
将屏幕快照另存为PDF文件在桌面上,或将其粘贴到图形应用程序或文档中。
Mac OS X屏幕捕获程序Grab也可在OSX及更高版本上使用。
使用Linux屏幕捕获工具
大多数Linux发行版都有几种屏幕捕获工具。 图形工具,包括GIMP(GNU图像处理程序)和ksnapshot。 命令行工具包括ImageMagick的import命令。
使用GIMP,使用“ 文件”>“获取”>“屏幕截图...”对话框捕获单个窗口或整个屏幕。 同样,您可以使用ksnapshot捕获单个窗口或整个屏幕。 这两个GUI程序均允许您在请求捕获后设置延迟,以便您可以将注意力集中在右侧窗口或打开的菜单上。
使用ksnapshot时,切记在捕获后保存捕获。 如果您使用的是ImageMagick的import
命令,则可以将其与sleep
命令结合使用,从而延迟窗口设置。
表3.在Linux上捕获屏幕
按键组合 | 结果 |
---|---|
睡5; 导入-frame snapshot1.png | 等待5秒钟,然后捕获您用鼠标单击的窗口(包括其框架) |
睡7; 导入-框架-窗口0x1e00079 snapshot2.png | 等待7秒,然后捕获ID为0x1e00079的窗口。 使用xwininfo 命令确定窗口的ID |
睡3; 导入-窗口根快照3.png | 等待3秒钟,然后捕获整个屏幕 |
要检查图像的大小,请尝试使用ImageMagick的identify
命令。
创建作者照片
如果您想在内容结尾处包含图片,请提交未经修饰的数码照片。 理想的是,从胸部向上,垂直方向,面对照相机的照片是理想的。 图片应至少为200 x 250像素,因此有调整的空间。 请用您的名字和姓氏命名您的文件。
步骤3.将图形提交到developerWorks
当您将内容的最终草案提交给developerWorks编辑器时,还请提交图形文件。 请遵循以下提示:
- 请勿以任何方式(包括调整大小)更改图像源文件。
- 如果您使用文字处理程序来开发内容并将诸如屏幕截图之类的图形插入到文档文件中,请单独提供图像源文件和文档文件。
- 如果您要在电子邮件中附加的源文件总大小超过10 MB,请在发送电子邮件之前将其保存在zip / stuffit / infozip文件中。
- 包括有关裁切,标签,颜色或重绘的任何特殊说明。 如果您的图形不应该更改(例如,它是使用UML通过计算机或程序生成的),请告诉我们。
- 如果要合并不同类型的图像(例如,向技术人员添加照片或屏幕截图, 如图3所示),请提交所有原始屏幕截图和照片以及更改后的图像,以便可以根据需要进行修改同时仍保持易读性。
图形交付后
您的developerWorks编辑器将审阅您提交的所有图像,然后将其转发给图形设计团队。 图形设计团队可以根据需要重新着色,调整大小,重新格式化,裁剪,修改或返回图像。 通常需要5到7天才能完成此过程。
颜色
图8显示了developerWorks Web安全的调色板。如果需要更改颜色,图形设计人员将尝试使其尽可能与原始颜色匹配。
图15. developerWorks调色板
![developerWorks调色板,包括每种颜色的RGB值](https://i-blog.csdnimg.cn/blog_migrate/d03cf9e5a9b6ba2895b708e8df9200c0.png)
联系我们
developerWorks希望尽快将重要内容传达给读者! 如果您对说明内容有任何疑问,请联系平面设计师Anna Gilbert 。 我们期待着与您的合作!
翻译自: https://www.ibm.com/developerworks/xml/library/i-dwgraphics/index.html