5 заметок с тегом

графязык

Коротко о выносках и подписях

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

Выноска спорит с порожками ладов.

Косая линия лучше отделяется от изображения.

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

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


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

Чтобы лучше отделить пунктир, положите под него сплошную противоположного цвета.

Линия выноски должна едва касаться подписи и объекта. Расстояние от литеры до выноски примерно равно расстоянию между букв надписи.

Подписи
Можно обойтись без выносок, если подписать элементы изображения.


Надпись лучше указывает на часть изображения, если следует перспективе.


Когда нужно подписать большую область, текст размещается примерно в оптическом центре этой области. Нужно избегать прямого соседства с каким-то из элементов.


Избавляемся от очевидного и бесполезного: зритель догадается, что между 6-й и 1-й струнами будут струны 5, 4, 3 и 2.


Ближе всего надпись размещается к подписываемому объекту.

29 августа   выноска   графязык   подпись

Простые и сложные градиенты

На картинке изображены три градиента: простой, сложный и сложный улучшенный.

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

В двух других использовались улучшения в виде цветной растяжки 100%→0% прозрачности с разными режимами наложения, заключенной в маску по форме объекта. Чтобы такие градиенты-в-прозрачное смотрелись хорошо, нужно их потюнить.

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

Если объект-улучшайзер сместить вовнутрь маски, то будет видна точка цвета, поэтому всегда стоит выносить объект с радиальным градиентом за пределы зоны видимости.

Файл примера для изучения.


Ссылки по теме:

https://www.behance.net/gallery/51830921/Gradient-Studies

8 августа   градиент   графязык

Шумность контура и масса фигуры

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

У приема есть и обратный эффект — фигура получается слишком сложной, теряя в массе. Это хорошо видно на примере литеры.

Человеческий глаз видит в контуре три объекта: внешний и внутренние контуры и внутреннюю фигуру. В залитой графике — только фигуру.

В некоторых случаях возникает логический конфликт при использовании контура. На примере пиктограммы с чашкой чая видно, что толщина линии — графическая сущность, которой показаны контурные элементы (нитка пакетика, ручка и пар). Значит, в этом графическом языке чашка тоже состоит из контурного каркаса с пустотой в центре, что неправда.

Правильно будет изобразить чашку и ярлык пакета заливкой.

Чтобы упростить, почистить и визуально облегчить знак, схему, иллюстрацию или пиктограмму, избавьтесь от контура.

Чтобы снизить оптическую массу объекта и увести на второй план, сделайте его контуром.

4 июля   графязык   контур

Выделение элемента

Существует несколько базовых приемов выделить объект.

Если элемент имеет белые области на границе, они пропадут на белом фоне. Будет неприятное ощущение оборванного изображения. Понизив значение точки белого, можно решить эту проблему и отделить объект от фона. Значение подбирается на собственный вкус.

Тонкая рамка или плашка чаще избыточны сами по себе. Они нужны тогда, когда требуется сильнее объединить элемент с другими объектами (фото с пояснением или элементами управления).

Раньше таким способом отделялись товары и рубрики на сайте Студии.


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



Любой из способов не исключает других методов выделить объект — версткой, отступами, цветом или масштабом.

2017   выделение   графязык   дизайн   оформление