Рекомендации к статической графике

Рекомендации к статической графике

В данном ресурсе основное внимание будет уделено статической графике. Но все описанные рекомендации могут и должны быть применены к анимации и интерактивным элементам. На основе материалов по юзабилити (usability) нами были выработаны наиболее важные рекомендации к графике.

Единство стиля

Стиль, по-крайней мере в рамках одного курса, должен быть единым. Желательно, чтобы он был хотя бы похожим в рамках всех курсов. Что под этим подразумевается? Все. И цвета, и стили стрелочек, и размеры, и качество не своих рисунков, и многое другое.

Простота

«Все должно быть настолько простым, насколько возможно, но не проще» (Альберт Эйнштейн). Стиль должен быть интуитивно понятным. Т.е. элементы оформления практически никогда не должны иметь дополнительных описаний по их назначению.

Фото, а не клипарт

Использование стандартных клипартов необходимо свести к минимуму. Хорошим вариантом является использование фотообразов, не забывая при этом о Законе "Об авторском праве и смежных правах". Из бесплатных ресурсов, содержащих качественные фото и картинки, можно порекомендовать www.sxc.hu.

Цвет

Необходимо отказываться от черно-белых рисунков. Первым делом в использовании цветов необходимо выработать систему: что означает и в каких случаях применяется конкретный цвет. При создании системы важно обращать внимание на сочетаемость цветов. Для этого можно использовать различные утилиты разработки цветовых схем. Например, Adobe kuler. В качестве примера рассмотрим систему цветов, выработанных в рамках лекций по математике.

В рисунках используются 4 цвета:

  • черный: координатные оси, надписи, сетка;
  • синий: основные исходные построения;
  • красный: дополнительные новые построения (новая информация);
  • зеленый: дополнительные новые построения (новая информация), если красный уже был использован.

В качестве заливки фигуры используется неяркий, насыщенный оттенок зеленого.

Примеры

Обратите внимание, что названия рисунков рекомендуется включать в сам рисунок. В этом случае легче сохранить форматирование и размер названия.

Кроме того, синий, красный, зеленый используются для различения фигур, если их несколько на рисунке.

Пример

Фон

Либо прозрачный, либо непрозрачный. Как получить прозрачный фон, будет рассказано чуть ниже при описании уменьшения размеров рисунков. Непрозрачный фон для рисунка или группы рисунков должен иметь неяркий оттенок цвета. При этом необходимо учитывать, что красный цвет ассоциируется с ошибкой, неправильностью; желтый цвет с предостережением, замечанием. В качестве окантовки желательно использовать более насыщенный оттенок цвета фона. Например, рисунок с фоном может выглядеть так:

Пример

Размер файла

Размещая рисунок на сайте либо используя его в анимации, необходимо стремиться к его минимальному размеру. Для этого можно воспользоваться инструментом Adobe Photoshop – Save for Web. Учитывайте при этом, что рисунок лучше изначально создавать в масштабе 100%, чтобы потом их ане надо было уменьшать. Уменьшение изображения часто дает дополнительную цветовую информацию, а значит увеличивает результирующий размер файла.

При использовании инструмента Adobe Photoshop – Save for Web рисунок может быть нарисован где угодно: в Visio, встроенным редактором Word, может быть снимком экрана.

Обрабатываемый рисунок необходимо либо скопировать через буфер обмена в Adove Photoshop, либо просто открыть в нем. Далее необходимо выбрать пункт меню File->Save for Web.

Adobe Photoshop – Save for web

Работать лучше со вкладкой 4-UP, там сразу видно четыре возможных варианта сохранения, какие настройки для этого варианта, сколько при каждом варианте файл будет весить, можно подвигать изображение (автоматически оно будет перемещаться во всех остальных вариантах) – посмотреть потерю качества. Выбрав устраивающий вариант, в таблице цветов (Color table) необходимо выделить белый цвет (он обычно самый последний) и пометить его прозрачным (Map selected colors to transparent). После этого рисунок приобретает такй же вид, как в нижних вариантах. Теперь необходимо нажать кнопку Сохранить (Save) для сохранения рисунка в нужную нам директорию.

Обратите внимание, что рядом с вкладкой Color table находится еще одна очень полезная вкладка – Image size. Это очень эффективный инструмент по уменьшению размера изображения без потери качества. Хотя с уменьшениями размера изображений необходимо быть осторожным – очень часто уменьшенное изображение имеет размер файла намного больше исходного. Обращайте на это внимание!

Размещение

Необходимо оценивать размер результирующей веб-страницы, на которой размещен графический объект. Если размер страницы получается большой, необходимо:

  • уменьшать размер файла;
  • расcматривать возможность отказа от этого (именно такого) рисунка или его исправления.
Последнее изменение: Суббота, 13 Август 2011, 10:32