Как нарисовать иконку в фотошопе. Как рисовать нормальные иконки

03.05.2019

В том случае, когда пиктограмма будет использоваться на экране. Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.

Начнём с того, что проблема «мягкой» обводки решается настройками контура:

Теперь можно нарисовать что-нибудь. Мне как раз нужна иконка газеты.

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

Особенности подмечаю на том, что есть под рукой:

Возьму для примера первую полосу из архива Нью Йорк Таймс. Сразу подгоняю размер под другие иконки. Тут важен визуальный вес, а не математические параметры:

Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:

Cmd+k

Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным, поэтому клавиши и [k] могут быстро затереться:-)

Уже видно, что газета получается «тяжелей» остальных объектов. Немного уменьшаю:

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

Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными (У меня случайно получилось, что - да. Иначе пришлось бы сделать газету на пиксель шире.)

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

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

Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:

Наполняю газету:

Почти готово. Меня смущает количество чернил. Иконка получилась сильно плотней своих соседей. Разряжаю строки, убираю Титаник.

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

Честно говоря, мне даже просто вот так нравится:

Я ещё подумаю какой вариант выбрать. На сегодня всё.

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

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

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

Форма

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

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

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

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

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

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

Сетка

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

Стороны

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

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

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

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

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

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

УГЛЫ

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

КРИВЫЕ

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

ЗАКРУГЛЕНИЕ УГЛОВ

Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.

СГЛАЖИВАНИЕ ПИКСЕЛЕЙ

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

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

ТОЛЩИНА ЛИНИИ

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

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

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

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

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

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

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

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

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

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

Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:

легко и быстро создавать новые материалы;
придать существующим наработкам завершенный вид;
сохранять результат в разных форматах (SVG, ICO & PNG);
создавать иконки для .

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

IconsFlow

IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:

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

Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.

Вид векторного редактора IconsFlow:

Примеры работ:

FlatIcons

С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:

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

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

Launcher Icon Generator

Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

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

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.

Как нарисовать значки Warface

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

1.Вот логотип. Да, еще, кто не в курсе, картинки увеличиваются.

Надо нарисовать прямоугольник. Делаем так: рисуем прямую, делим ее пополам(опускаем вниз вертикальную линию), вниз от крайних точек отмеряем эту половину и чуть-чуть еще, проводим горизонтальную прямую, потом отступаем еще — это будет середина прямоугольника(отмечена маленькой прямой). Две прямые рисуете на глаз(я имею отступ от верха и низа прямоугольника соответственно), однако расстояние от середины справа и слева должны быть одинаковы. Можете всего этого не делать, а нарисовать на глаз.

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

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

Примитивно можно закрасить значок таким образом.

2.Значок, его разрешение очень небольшое. Хотела сделать несколько значков, но они такие маленькие, очень трудно разглядеть детали, так что имеем, что имеем. Начнем.

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

Рисуем зубы, язык и прямые, которые отходят от головы.

Рисуем гриву, если нарисованы тонкие линии, то тоже рисуете еле видно.

В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.

Шаг 1.

Создайте новый документ (File > New) с показанными настройками

Шаг 2.

Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя .

Шаг 3.

Используйте с радиусом 35px BODY , откройте Стили Слоя и примените следующие настройки.

Также добавьте Обводку с слою BODY со следующими настройками

Шаг 4.

Шаг 5.

Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.

Также добавьте Обводку к слою BODY_2 со следующими настройками.

После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.

Шаг 6.

Вы должны получить похожий результат.

Шаг 7.

BODY . Назовите этот слоя BASE . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px

Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя .

После этого необходимо исправить толщину Обводки на 3px в слое BASE.

Шаг 8.

Вы должны получить похожий результат.

Шаг 9.

Создайте новый слой и поместите его под слой BODY . Назовите этот слой FOOT . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Примените также Внутреннюю тень к слою FOOT.

Шаг 10.

Вы должны получить похожий результат.

Шаг 11.

Теперь продублируйте слой FOOT и поместите его как показано на рисунке.

Шаг 12.

Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B) и большой кистью с мягкими краями поставьте одно белое пятно.

Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%

Шаг 13.

Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.

Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN . Теперь исправьте толщину обводки на 10px в слое SCREEN .

Шаг 14.

Вы должны получить похожий результат.

Шаг 15.

В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2 . Поместите его поверх остальных слоев. Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.

Затем примените Внутреннюю тень к слою SCREEN_2 .

Затем примените Внутреннее свечение к слою SCREEN_2 .

Затем Тень к слою SCREEN_2 .

Шаг 16.

Вы должны получить похожий результат.

Шаг 17.

Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF . Затем уменьшаем прозрачность до 20%

Шаг 18.

Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно.

Шаг 19.

В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON .

Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя . После этого примените скопированный стиль на слой BUTTON .

Шаг 20.

После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.

Затем добавляем Тень .

Шаг 21.

Вы должны получить похожий результат.

Шаг 22.

Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени .

Шаг 23.

Вы должны получить похожий результат.

Шаг 24.

Мы дублируем слой BUTTON помещаем его под первой кнопкой, затем немного поворачиваем его. Также редактируем Стиль слоя Градиент второй кнопки.