Дневник Alexey Blogoodf

+79.87
14 читателей, 29 постов

Простые правила для создания дизайна иконки


Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com. Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.

Три основных составляющих хорошего дизайна иконки

Хорошо разработанные иконки демонстрируют преднамеренный подход к трём основным признакам для любого дизайна – это форма, эстетическое единство и узнаваемость. При разработке нового набора иконок рассмотрим каждый из этих атрибутов по порядку.
Я не буду утверждать, что для идеального дизайна требуется всего три составляющих, но этого вполне достаточно для хорошего старта. И так приступим.

Форма

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


Эстетическое единство

Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными.
Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.


Узнаваемость

Узнаваемость является главным критерием, это сущность иконки. Узнаваемость включает в себя те свойства, которые человек обычно ассоциирует с тем или иным объектом, с той или иной идеей, но так же может включать в себя что-то неожиданное – это и создаёт уникальность, например, недоведённая обводка и округлые блики.
3

Это были три основные составляющие эффективного дизайна иконок. Далее мы детально рассмотрим шесть шагов для решения этих задач.

Сетка

Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:

4

Стороны

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

6_1

Сетка нужна лишь для того, чтобы помочь вам сделать значки ровными и последовательными, но если перед вами стоит выбор между тем, чтобы сделать значок красивым или нарушить правила, то нарушайте – но делайте это очень аккуратно.

Геометрические формы

Начните с простых геометрических форм. Даже если значок будет в конечном итоге более органичным, то всё равно начните с простых геометрических форм в Adobe Illustrator. Когда дело доходит до создания иконок, особенно маленьких размеров, то базовые геометрические формы сделают края более точными и позволят быстро регулировать относительный масштаб элементов.
7

Цифры: Края, линии, углы, кривые

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

УГЛЫ
В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.
8

КРИВЫЕ
Это самые заметные области, которые могут ухудшить качество иконки. Благодаря им можно отличить профессионала от любителя. Так как человеческий глаз способен обнаруживать мелкие неточности, то рисование от руки не поможет вам достичь целей. Положитесь на инструменты, формы и цифры, чтобы создавать кривые.
9

ЗАКРУГЛЕНИЕ УГЛОВ
Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.

СГЛАЖИВАНИЕ ПИКСЕЛЕЙ
Идеальное выравнивание пикселей имеет важное значение для дизайна иконок маленьких размеров. Сглаживание углов на таких иконках может сделать значок размытым и нечётким. Пространство между линиями, которое не приводится в соответствие с пиксельной сеткой будет сглаживаться и станет нечетким. Как упоминалось выше, 45 градусные углы и кратные им сглаживаются лучше.

Однако замечу, что сглаживание становится менее актуальным при больших размерах и на экранах с высоким разрешением, таких как retina дисплей.
10

ТОЛЩИНА ЛИНИИ
Вообще лучше всего использовать в одной иконке не более двух вариантов толщины линии, но иногда и три варианта просто необходимы. Ваше цель состоит в том, чтобы визуально обеспечить иерархию и разнообразие без разрушения целостности всего сета. Использование более чем трех толщин линий может разрушить структурированность и сплоченность. Что касается самой ширины линии, то лучше брать опять кратные двум и четырём пикселям, их легко масштабировать и делать ровные шаги. Старайтесь избегайте очень тонких линий, особенно в базовых значках и плоских иконках, но это правило не действует, если вы намеренно создаете иконки из тонких линий.
11

Используйте повторяющиеся элементы дизайна и акценты в сетах иконок

Например, Хеммо де Йонг известный голландский дизайнер во всех своих иконках использует повторяющийся элемент — острый угол.
13

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

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

Сделайте иконку уникальной

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

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

Сет иконок, которые были использованы на iconfinder и на shutterstock.



end

Главные цвета осени 2017 года по версии Pantone


После недели моды в Нью-Йорке и Лондоне был сделан отчёт главных цветов грядущей осени.

Отчёт о цветовых тенденциях является одним из двух полугодовых отчётов, который показывает главные цвета в области моды предстоящей осенью. Вы можете не быть модельером, но эти цвета могут влиять на более широкие тенденции в дизайне. И по словам исполнительного директора Pantone Color Institute Литрис Эйзман
Цветовая палитра склоняется больше в сторону тепла.




На первом месте топа — цвет гренадин. Мощный, вызывающий воспоминания, динамичный и несущий в себе уверенность, останавливая на себе особое внимание.

Подчёркивает его Tawny Port, глубокий и элегантный цвет.

Для любителей более мягких оттенков есть Ballet Slipper, нежный и радужный цвет.

Для прохладного осеннего вечера подойдёт Butterum, плотный и запоминающийся оттенок.

Кстати есть и более плотный цвет Navy Peony. Это основной оттенок, который легко замещает чёрный.

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

Ниже приведён полный список цветов:

Color Palette for New York



Color Palette for London



На этом всё. Подписывайтесь на канал, а я постараюсь выкладывать больше всяких интересностей.

Как вывести доллары с Shutterstock на карту Payoneer в 2017 году?



Всем привет. 16 августа 2017 года свершилось чудо и Shutterstock наконец-то ки добавил способ вывода денег сразу на карту Payoneer. Для чего это нужно вам?

Читать дальше...

Дизайн паттернов: тренды 2016 года

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

ГЕНЕРАТИВНЫЙ ПАТТЕРН

Сочетание дизайна и html кода, который используется при создании сайтов, всегда будет плодородной средой для дизайнеров, работающих с математикой и программированием. С первых дней веб дизайнеры экспериментировали с системами частиц, но в последние месяцы мы увидели растущее внимание к геометрическим паттернам, которые являются эволюцией формы, благодаря тому факту, что они так сильно опираются на сочетание дизайна и кода.
Что действительно ново, так это то, что в 2015 году выросло количество компаний, которые используют эти виды паттернов в качестве неотъемлемого элемента своего бренда.











ИНФОРМАЦИОННЫЕ ПАТТЕРНЫ

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







КРАФТОВЫЕ ПАТТЕРНЫ

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







АНИМАЦИОННЫЕ ПАТТЕРНЫ

Паттерны не просто сделать подвижными. Долгое время дизайнеры создавали анимированные gif для motion паттернов. Этот метод чаще всего используется в сочетании с SVG для создания больших циклов, то есть привлечение анимации в паттерны все еще актуально.







СЕТЧАТЫЕ ПАТТЕРНЫ

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







Эффект из сериала Настоящий детектив или как сделать двойную экспозицию в Photoshop. ADOBEышная #1


Помните эффект из заставки сериала Настоящий детектив? Он называется двойная экспозиция. Сегодня я покажу вам, как его сделать в Photoshop CC.

ADOBEышная ВЫПУСК #1
Приятного просмотра и подписывайтесь на канал, а я постараюсь выкладывать больше всяких интересностей thumbsup

Французский бульдожка в nanoline

Недавно делал логотип для кулинарного блога Underdog Chef. В качестве логотипа был выбран французский бульдог. Вдохновение пришло моментально и образ в голове пульсировал во всех красках. Я тут же приступил к работе. В качестве основного образа послужил мой пёс.



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



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



Следующий шаг — сделать логотип в векторе. Для этого я поместил бульдожку в иллюстратор (без трассировки), и начал обводить его инструментом Curvature Tool.





Вот что получилось после обводки.



А вот так выглядит финальный логотип.



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







Спасибо!