Иллюстрирование статей и руководств для сайта developerWorks

Как создавать качественные иллюстрации

Данная статья будет полезна авторам. В ней рассказывается о том, как создавать технические иллюстрации (например, диаграммы или снимки экранов) к статьям и руководствам, которые вы пишете для сайта developerWorks. Следуя нашим советам, вы сможете улучшить качество своих материалов и ускорить их публикацию на нашем сайте.

Виктория Овенс, ведущий графический дизайнер developerWorks, IBM

Виктория Овенс (Victoria Ovens) в настоящий момент является ведущим графическим дизайнером developerWorks. Она окончила университет Северной Каролины по специальности «Графический дизайн». Время, свободное от графического оформления абстрактных программных концепций, она посвящает спасению брошенных животных, игре со своими басенджи, а также езде на Suzuki SV650S.



Эми Девор, руководитель группы дизайна developerWorks, IBM

Эми Девор (Ami Dewar) является руководителем группы дизайна developerWorks. Эта группа состоит из дизайнеров, разработчиков и архитекторов, целью которых является обеспечение того, чтобы developerWorks и впредь оставался на лидирующих позициях. До того как стать руководителем группы, Эми была дизайнером в IBM на протяжении шести лет, создав более 1200 крупных иллюстраций и более 8000 технических рисунков.



17.04.2009

При создании изображений следует избегать таких элементов, как:

  • Тени.
  • Заголовки и названия рисунков.
  • Нумерованные выноски.
  • Декоративное оформление границ.

В противном случае редактор или дизайнер может попросить вас переделать изображения, что, скорее всего, приведет к задержке публикации ваших материалов.

Во избежание подобного старайтесь следовать общим рекомендациям по подготовке изображений всех видов, а также советам по созданию экранных снимков.

Начало работы

  1. Ознакомьтесь с общими рекомендациями для авторов developerWorks.
  2. Предложите идею своей статьи редакторам developerWorks при помощи специальной формы отправки.
  3. Редактор developerWorks свяжется с вами и, если ваша идея одобрена, то вы получите дальнейшие инструкции.
  4. Обратитесь к данной статье, которая поможет вам создать качественные иллюстрации к вашему материалу и избежать задержек при публикации.

Советы и рекомендации, приведенные в данной статье, помогут вам создать изображения, максимально близкие к окончательному варианту, который будет опубликован на сайте. Перед тем как статья будет опубликована, все ваши иллюстрации будут тщательно проверены, отредактированы, либо возвращены вам для дальнейшей работы в целях приведения их в соответствие со стандартами developerWorks.

Если у вас есть вопросы, то обратитесь к нашему графическому дизайнеру Виктории Овенс.

Шаг 1. Выберите типы изображений, которые улучшат вашу статью

Иллюстрациями к вашей статье могут служить технические рисунки, снимки экрана и, в некоторых случаях, медиа-файлы. Редактор developerWorks может помочь вам решить, какого рода изображения могут обогатить вашу статью. Ниже приведены примеры иллюстраций (рисунки 1–4).

Рисунок 1. Пример технического рисунка
Технический рисунок
Рисунок 2. Пример экранного снимка
screen capture
Рисунок 3. Композиция из технической иллюстрации и нескольких экранных снимков
technical illustration with screen captures
Рисунок 4. Пример фотографии автора
author photograph


К медиа-файлам относятся звуковые и видеоролики, Flash- и анимированные изображения. Использование данных файлов в статьях developerWorks регламентируется отдельным набором правил. Если вы планируете использовать подобные файлы, то обсудите это с вашим редактором developerWorks.


Шаг 2. Следуйте общим рекомендациям при работе с изображениями любых типов

1. Необходимость.
Иллюстрации служат для объяснения и выделения ключевых моментов в статье. Не следует ни избегать их, ни злоупотреблять ими. Поставьте себя на место читателя вашего материала. Например, если вы обсуждаете фрагмент кода, который читатели могут использовать в своих приложениях, то вместо того чтобы приводить снимок экрана, поместите его в листинг, чтобы текст можно было скопировать и вставить в приложение.
2. Доступность для широкой аудитории.
Старайтесь избегать визуальных элементов, которые могут быть понятны только ограниченному (в частности, по географическому принципу) кругу читателей, или могут иметь неоднозначное или сомнительное толкование. Например, не следует использовать символы, обозначающие специфические праздники, религиозные знаки, жесты, почтовые ящики, флаги или карты, специфичные для определенной страны, самолеты, аэропланы, а также символы, имеющие отношение к оружию.
3. Легкость восприятия.
Все изображения должны быть четкими и удобочитаемыми.
4. Отсутствие заголовков, границ, теней и нумерованных выносок.
Не следует использовать заголовки и названия рисунков, окантовки, тени и нумерованные выноски.
5. Использование цветов, пригодных для отображения в Web.
При создании цветных иллюстраций выбирайте цвета из палитры developerWorks. Данные цвета пригодны для Web-изображений и сопровождаются RGB-кодами, которые позволяют легко их копировать.
6. Подходящие размеры.
В опубликованных статьях изображения не должны превышать 572 пикселя в ширину и 800 пикселей в высоту при разрешении 72 ppi. Максимальный размер изображений в руководствах составляет 500 пикселей в ширину и 800 пикселей в высоту при разрешении 72 пикселя на дюйм.

Размер снимков экрана должен быть достаточным для того, чтобы обеспечить удобочитаемость. Если при этом ширина не превышает 572 пикселя, то все хорошо. В противном случае отправьте снимок как есть, графические дизайнеры developerWorks уменьшат его, избежав искажений.

7. Подходящий формат.
Лучше всего использовать следующие форматы для изображений: jpg, gif и png (хотя изображения в формате png будут преобразованы в jpg или gif перед публикацией). Если вы хотите использовать другой формат, то проконсультируйтесь с нашим дизайнером Викторией Овенс.
8. Подходящие имена файлов.
Старайтесь присваивать короткие имена вашим файлам (в идеале – менее 20 символов), используя при этом символы в нижнем регистре, например, figure1.gif или screen1.gif. Избегайте специальных символов и пробелов.

Далее ознакомьтесь с дополнительными рекомендациями, специфичными для технических рисунков и экранных снимков.


Создание технических рисунков

Перечисленные ниже советы, специфичные для технических рисунков, приведены в дополнение к восьми общим рекомендациям по созданию всех типов изображений.

Используемое программное обеспечение

Технические рисунки можно создавать в таких программах как Microsoft® Paint, Adobe Illustrator, Adobe Photoshop, Microsoft Word и других графических редакторах.

Стиль

Наиболее удачные технические рисунки отличаются простотой, ясностью и отсутствием лишних деталей. В частности (рисунок 5):

  • Стрелки должны быть одинаково оформлены.
  • Толщина линий должна составлять один пиксель.
    Рисунок 5. Примеры правильных стрелок и линий, толщиной в один пиксель
    examples of approved images
  • Все фигуры должны иметь черную границу толщиной в один пиксель.
  • К тексту на изображении, например меткам или ненумерованным выноскам, предъявляются следующие требования:
    • Шрифт Arial размера 12.
    • Минимальное использование жирного шрифта, только в целях выделения важных фрагментов.
    • Отсутствие курсива, так как это снижает удобочитаемость.
    • Заглавные буквы должны использоваться только в начале предложения и в именах собственных (sentence-style capitalization).
    • Использование только одобренных редактором аббревиатур и названий продуктов (по этому вопросу следует проконсультироваться с редактором).

    Графические дизайнеры могут при необходимости изменять размер текста в изображениях.

  • Разрешается использовать стандартные изображения (см. ниже).
  • Не следует использовать тени, градиентную закраску и трехмерные изображения.
  • Не следует включать в изображение заголовки и названия рисунков.
  • Не следует добавлять рамку вокруг изображений.

Стандартные изображения

Все стандартные изображения компьютерных объектов (ноутбуков, мобильных телефонов, карманных компьютеров и т. д.) являются собственностью графических дизайнеров developerWorks, поэтому не стоит беспокоиться о соблюдении авторских прав. Вы можете использовать их в своих изображениях в целях упрощения и обеспечения согласованности. Для этого загрузите архив zip, содержащий все изображения, выберите нужное и добавьте его в свой рисунок, используя возможности вашего графического редактора (рисунок 6).

Рисунок 6. Примеры стандартных изображений
Примеры стандартных изображений

Если вы не обнаружили нужного вам стандартного изображения, то не стесняйтесь обращаться к нашим дизайнерам. У них могут быть другие изображения, не вошедшие в коллекцию. Вы также можете создать свое собственное изображение, но постарайтесь следовать тому же простому стилю, что и в стандартном наборе.


Создание снимков экрана

Перечисленные ниже советы специфичны для экранных снимков и приведены в дополнение к общим рекомендациям по созданию всех типов изображений.

Наиболее важными факторами при создании снимков экрана являются их размер, формат и используемый инструментарий.

Подбор подходящего размера

Старайтесь сделать ваши снимки минимально возможного размера, обеспечивающего приемлемую четкость. Этого можно добиться, сужая окно браузера таким образом, чтобы включить только ту часть страницы, которая должна попасть в снимок. При этом не сжимайте изображение, даже если его размер превышает максимально допустимый (см. общие рекомендации по созданию изображений). Просто отправьте снимок редактору вместе со статьей или руководством; его уменьшат наши дизайнеры.

Форматы файлов для экранных снимков

Предпочтительными форматами для экранных снимков являются jpg и gif, потому что они оптимизированы для высококонтрастной графики, такой как интерфейсы приложений. Старайтесь избегать форматов со сжатием, например, 24-разрядного bmp и tif.

Программы для создания экранных снимков

Программы, позволяющие делать снимки экранов, доступны для большинства платформ. Например, в Windows популярностью пользуется приложение SnagIt (см. Ресурсы). Кроме того, вы можете воспользоваться встроенными функциями операционной системы. Их вполне достаточно при работе с Microsoft® Windows®, Apple Macintosh и Linux® (при этом вам может понадобиться дополнительное приложение для создания снимка специальных объектов, например, курсоров или указателей). Далее мы приведем советы по оптимальному созданию снимков.


Улучшение экранных снимков

Перед тем как сделать снимок, отключите все панели инструментов. Например, если вы работаете с PC, то выберите последовательно пункты меню View > Toolbars > Unselect all toolbars. В случае использования Mac выберите View > Collapse Toolbars.

Использование SnagIt

Пользователи Windows могут делать снимки экранов при помощи приложения SnagIt (см. Ресурсы). Ниже приведены рекомендуемые настройки; они гарантируют, что получившиеся снимки будут соответствовать стандартам developerWorks, минимизируя тем самым необходимую доработку.

  • Стрелки.
    В редакторе SnagIt выберите пункт меню Paint Tools > Arrow Tool. Нажмите на кнопку Style и выберите первый тип стрелки. Установите для свойства Width значение 1, а для Opacity – 100 (это значение по умолчанию), поставьте галочку напротив Antialias и снимите ее напротив Drop shadow (рисунок 7).
    Рисунок 7. Настройки SnagIt для установки правильного стиля стрелок
    Стрелки в SnagIt
  • Области выделения.
    В редакторе SnagIt выберите пункт меню Paint Tools > Shape Tool. Выберите нужную фигуру, желательно прямоугольник или круг. Установите для свойства Width значение 1, а для Opacity – 100 (это значение по умолчанию), поставьте галочку напротив Antialias и снимите ее напротив Drop shadow (рисунок 8).
    Рисунок 8. Настройки SnagIt, относящиеся к областям выделения
    snagit shape
  • Выноски.
    В редакторе SnagIt выберите пункт меню Paint Tools > Callout Tool. В качестве категории (свойство Category) выберите стрелки (Arrows) или облачка (Balloons). В данном примере мы используем облачка, но те же настройки работают и для стрелок. Установите для свойства Opacity значение 100 (значение по умолчанию) и отключите свойство Drop shadow (рисунок 9).
    Рисунок 9. Настройки SnagIt, относящиеся к выноскам
    Настройки SnagIt, относящиеся к выноскам
    В качестве цветов выносок должны использоваться серый (для переднего плана) и белый (для фона). Для текста должен использоваться шрифт Arial, размер 12. Пример показан на рисунке 10.
    Рисунок 10. Настройки SnagIt для задания цвета выноски
    Настройки SnagIt для задания цвета выноски

Использование встроенных средств Windows для создания экранных снимков

В Windows существуют две комбинации клавиш для создания снимков экрана и помещения их в буфер обмена. При помощи приведенных в таблице 1 комбинаций клавиш вы можете вставить снимок из буфера в документ редактора Microsoft Paint или другого графического приложения, а затем сохранить его.

Таблица 1. Создание снимков экрана в Windows
Сочетание клавишРезультат операции
Alt+PrtSc (Alt + PrintScreen)Снимок активного окна вместе с рамкой
PrtSc (PrintScreen)Снимок экрана полностью.

Если вы хотите сделать снимок меню, то нажмите левую кнопку мыши, не отпуская при этом клавиши Alt+PrtSc или PrtSc. В разных приложениях данные комбинации обрабатываются по-разному, поэтому попробуйте оба сочетания.

Использование встроенных средств Macintosh для создания экранных снимков

Для создания снимков можно использовать три различных комбинации клавиш (таблица 2).

Таблица 2. Снимки экрана в Macintosh
Сочетание клавишРезультат операции
CMD+SHIFT+3Снимок экрана полностью
CMD+SHIFT+4Позволяет выделить мышью область экрана для снимка
CMD+SHIFT+4, затем "пробел"Снимок окна, меню и других панелей (выделите область снимка при помощи курсора и нажмите кнопку мыши)

Сделанные снимки можно сохранить в виде документов PDF, а также вставить их в графический редактор или документ.

Кроме того, для Mac OS X существует программа для создания снимков под названием Grab, которая также работает под системами OSX и выше.

Использование встроенных средств Linux для создания экранных снимков

Большинство дистрибутивов Linux включают в себя несколько утилит для создания снимков. Среди них есть как программы с графическим интерфейсом, например GIMP (GNU Image Manipulation Program) и ksnapshot, так и утилиты командной строки, такие как import от компании ImageMagick.

Если вы работаете с GIMP, то выберите пункт File > Acquire > Screen Shot... В появившемся диалоговом окне можно выбрать режим снимка (полноэкранный либо снимок конкретного окна). Такими же функциями обладает и ksnapshit. Обе эти программы позволяют установить определенную задержку по времени, чтобы вы успели перевести фокус на нужное окно или раскрыть необходимое меню (таблица 3).

При работе с ksnapshot не забудьте сохранить изображения сразу после снятия. Если вы используете утилиту import от ImageMagick, то задержку можно установить при помощи команды sleep.

Таблица 3. Создание снимков экрана в Linux
КомандаРезультат
sleep 5; import -frame snapshot1.png5-секундное ожидание, затем снимок активного окна (вместе с рамкой)
sleep 7; import -frame -window 0x1e00079 snapshot2.png7-секундное ожидание, затем снимок окна с идентификатором 0x1e00079. Для определения идентификатора нужного окна служит команда xwininfo.
sleep 3; import -window root snapshot3.png3-секундное ожидание, затем полный снимок экрана.

Размер получившихся снимков можно проверить при помощи утилиты identify от ImageMagick.


Подготовка фотографии автора

Если вы хотите, чтобы ваша фотография была помещена после заключительного раздела статьи или руководства, то пришлите ее в неретушированном виде. При этом желательно, чтобы фотография включала лицо и туловище до середины груди, была сделана анфас на однотонном светлом фоне. Размер фотографии должен быть не менее 200 на 250 пикселей, чтобы ее можно было редактировать. При публикации фотография будет преобразована к черно-белому виду и уменьшена до размера 64 на 80 пикселей. Название файла должно быть составлено из вашего имени и фамилии.


Шаг 3. Отправка ваших изображений редакторам developerWorks

Перед отправкой

Непосредственно перед тем как отправить изображения, проверьте следующее:

  1. Тема вашего материала была одобрена редактором developerWorks.
  2. Для всех изображений был выбран подходящий формат графических файлов.
  3. Все изображения, необходимые в данной статье, понятны широкой аудитории и легко читаемы. Они не содержат подписей и рамок, используют цвета, пригодные для Web, удовлетворяют ограничениям на размер, сохранены в правильном формате и имеют подходящие имена файлов. Для проверки обратитесь к общим рекомендациям для всех типов изображений, а также специальным советам по созданию снимков экрана.
  4. Все изображения выполнены в простом и понятном стиле.
  5. В иллюстрациях используются только стандартные компьютерные изображения, предоставляемые дизайнерами developerWorks (коллекция бесплатных изображений доступна для скачивания).
  6. Вы прочитали руководство по отправке изображений.

Изображения должны быть отправлены редактору developerWorks вместе с окончательным вариантом вашей статьи или руководства. При этом следуйте приведенным ниже рекомендациям.

  • Не редактируйте файлы изображений, в частности, не уменьшайте их размер.
  • Всегда отправляйте изображения, в частности экранные снимки, отдельными файлами, даже если ваш текстовый редактор позволяет вставлять иллюстрации непосредственно внутрь документов.
  • Если суммарный размер файлов изображений превышает 10 МБ, то поместите их в архив zip/stuffit/infozip перед отправкой по электронной почте.
  • Напишите все необходимые пожелания на тему последующего редактирования изображений, например, вырезания фрагментов, добавления меток, изменения цветов, перерисовки и так далее. Если вы не хотите, чтобы ваши изображения редактировались, например в случае, если они были созданы автоматически на основе UML, то сообщите нам об этом.
  • Если вы хотите совместить несколько видов изображений (фотографий и экранных снимков) на одной технической иллюстрации, например как показано на рисунке 3, то отправьте все исходные фрагменты по отдельности, а также всю композицию целиком, чтобы мы могли редактировать ее без потери качества.

После отправки

Редактор developerWorks, занимающийся вашей статьей, просмотрит все изображения и перешлет их графическим дизайнерам. Последние могут изменять цвет, размер и формат изображений, вырезать фрагменты, редактировать, а также вернуть их на доработку. Этот процесс обычно занимает от 5 до 7 дней.

Цвет

Палитра цветов developerWorks, пригодных для использования в Web, показана на рисунке 11. При необходимости замены цвета в изображении дизайнер developerWorks сделает все возможное, чтобы новый цвет максимально точно соответствовал исходному.

Рисунок 11. Палитра цветов developerWorks
Палитра цветов developerWorks

Свяжитесь с нами

developerWorks стремится публиковать новые материалы максимально быстро. Если у вас возникнут любые вопросы на тему иллюстрирования вашей статьи или руководства, то свяжитесь с графическим дизайнером Викторией Овенс. Ждем от вас новых статей!


Загрузка

ОписаниеИмяРазмер
Стандартные компьютерные изображенияtecharticons.zip109 KБ

Ресурсы

Научиться

Получить продукты и технологии

  • Загрузите редактор SnagIt от компании TechSmith, который позволяет делать снимки экрана, произвольной его части и даже прокручиваемого окна. Вы можете загрузить пробную версию или купить данное приложение. (EN)
  • Приложения GIMP и ImageMagick включаются в состав большинства дистрибутивов Linux. Существуют их версии и для других платформ, таких как Microsoft Windows и Apple Macintosh. (EN)

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=383209
ArticleTitle=Иллюстрирование статей и руководств для сайта developerWorks
publish-date=04172009