Как нарисовать иконку в Фотошопе

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

Шаг 1.

Создание нового документа

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

Шаг 2.

Создание фона

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

Шаг 3.

Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 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.

Создание дополнительных элементов

Далее используем

инструмент Прямоугольник со скругленными углами (U) и создаем прямоугольник как показано на примере.

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

Шаг 23.

Промежуточный результат

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

Шаг 24.

Создание дополнительных элементов

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

Шаг 25.

Промежуточный результат

Теперь наши кнопки готовы.

Результат должен быть как на картинке.

Шаг 26.

Создание дополнительных элементов

Сделаем динамик. Нам надо создать прямоугольник со скругленными углами  под кнопками, как на рисунке. Назовем этот слой SPEAKER.

Шаг 27.

Создание дополнительных элементов

Теперь откроем Стиль слоя и применим следующие настройки.

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

Добавим Обводку к слою SPEAKER.

Шаг 28.

Промежуточный результат

Теперь наш динамик должен выглядеть так.

Шаг 29.

Создание дополнительных элементов

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

Шаг 30.

Создание марки телевизора

Добавим марку телевизора и применим к нему следующие Стили слоя, чтобы получился металлический эффект.

Также применим Тень к слою с маркой телевизора.

Шаг 31.

Промежуточный результат

Должен получиться следующий результат.

Шаг 32.

Создание антенны

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

Шаг 33.

Промежуточный результат

Результат должен выглядеть так.

Шаг 34.

Рисование тени

Далее создадим тень от телевизора.

Создаем группу слоев которую назовем SHADOW и поместим ее перед нижним фоном. Используем инструмент Эллипс (U) и создаем эллипс и заливаем его черным цветом. После этого применим размытие Размытие по Гауссу со следующими настройками.

Шаг 35.

Рисование тени

Теперь используем инструмент Ластик (E) сотрем часть тени. Затем изменим Режим наложения на Умножение и уменьшим прозрачность на 50%

Шаг 36.

Промежуточный результат

У нас должен получиться следующий результат.

Шаг 37.

Добавление тени от ножек

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

Шаг 38.

Итоговое изображение

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

Ссылка на источник

Как сделать свой первый набор векторных иконок

Статья с поэтапной инструкцией для создания вашего первого набора векторных иконок.

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

Шаг первый: Тема

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

by Oliver’s Creative Agency

by Justas Galaburda

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

by Cole Bemis

Шаг второй: Стиль

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

Все иконки можно поделить на такие классы: силуэтные или залитые, обводкой по контуру (outline icon), сложные или комплексные (мини иллюстрации). Комплексный стиль иконок может сочетать в себе залитые элементы и обводку.

Шаг третий: Образы

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

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

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

Шаг четвертый: Размер

Это вообще самое важное: определиться с минимальным размером.

Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать черные размеры иконки.

Шаг пятый: Процес

Создайте документ со значениями.

Spacing — расстояние между артбордами.

Width и Height — высота и ширина артборда.

Raster Effects — разрешение (ppi) для иконок подойдет 72

Align New Objects… — эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.

1. Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
2. Создайте квадрат под размер рабочей области.
3. Расставьте направляющие, чтобы облегчить процесс рисования.
4. Используйте Pixel Preview
5. Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
6. Придерживайтесь советов и прошлой статьи о 5-ти простых правилах создания красивых иконок.
7. Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
8. Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
9. Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky

Где можно продавать иконки

graphicriver.net — свободная площадка для торговли любым цифровым контентом.

creativemarket.com — что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.

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

icons8.com — ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.

Лекции на тему создания иконок

Тарас Шипка — «Иконочки: как делать все четко и красиво»

Дмитрий Новиков — «Основы создания иконок в Adobe Illustrator»

Источник: medium

Рисуем иконки

Ох уж эти иконки, с ними всегда куча проблем. То рисовать долго, то просто не получается, а при скачивании сложно найти набор нужных иконок в одном стиле и вообще в целом подходящие. «Что мне делать?»

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

2-ое правило — Иконки должны быть в одном стиле. Если вы выбрали однопиксельный контур, значит все иконки должны быть такими. Это сделает ваш дизайн более стильным и упрощенным. «Красота — это повтор. Красота — это когда есть ровный, предсказуемый ритм.»

Если глаз замылился и вы уже не можете отличить хорошо у вас получилось или нет, дайте себе день на отдых (займитесь другими рабочими моментами), а после посмотрите на свой дизайн и спросите «хочу ли я с ним взаимодействовать?»

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

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

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

Все циклично, особенно мода. Вы можете это увидеть на примере иконок 1985. Стиль которым мы так любим и сейчас. Дизайн «8бит».

darknet.lenta.ru

Пример сайта в стиле 8 БИТ

Минусы очевидны, неудобно, не красиво, агрессивно, рваные углы, ощущение беспокойства.

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

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

В общем все эти пиксельные времена длились довольно долго, настолько долго, что мы сейчас даже видим в них что-то красивое. Благо настали 2000-е.

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

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

К чему мы пришли? Обратимся к Apple:

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

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

Чтобы нарисовать такие иконки достаточно стилизовать реальные гаджеты.

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

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

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

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

Опубликовано: 2017-12-19

Как я рисую иконки в Photoshop (PSD бесплатно)

Статья обновлена: 18.07.2018

Автор: Мясоедов Анатолий

Иконки — один из самых распространенных в веб дизайне элементов. Сегодня я расскажу и покажу как я рисую иконки от задумки до готовой работы в Photoshop. К посту прикладываю исходник файла в PSD что бы вы могли посмотреть его «изнутри».

Каждый дизайнер для себя определяет формат работы. Кто то сразу рисует на чистовую, кто то предварительно делает эскизы и наброски в редакторе. Мне всегда было проще сначала сделать детальный набросок от руки карандашом, и только потом в чистовую отрисовывать в графическом редакторе. Нужно ли делать детальный набросок — это большой вопрос. Но в моем случае это скорее привычка, чем необходимость. Нужно ли вообще делать набросок — однозначно да, и вот почему. Набросок иконки достаточно подробно отражает идею, что позволяет легко согласовать внешний вид иконки с заказчиком заранее. А это значит, что переделок будет значительно меньше. Кроме того я как представитель «старой школы» считаю что любой дизайнер должен владеть карандашом =)

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

Я всегда рисую иконки в векторе, что бы дать максимум возможностей своим заказчикам. Только вектор в отличии от растра дает возможность масштабировать иконку, в 2-ва клика менять цвет, корректировать форму и т.д. Конечно в Illustrator векторные инструменты реализованы лучше  и более полные, но не так давно и Photoshop значительно расширил свои возможности работы с векторными формами (с 2015 года из Photoshop можно генерировать даже SVG!). Для меня это удобно: рисую иконки сразу в теле страницы сайта — у заказчика есть все исходники и при этом это не 100500 файлов, а всего 1.

Для наглядности процесса я записала видео как я рисую иконки в Photoshop. Скорость увеличенна в 20 раз.

Спасибо за прочтение

Вы можете сказать «Спасибо» 2 простыми способами:

1. Оцените статью:

   Загрузка…
2. Напишите что именно не понравилось, я не буду публиковать ваш комментарий, но обязательно добавлю информацию: Может мало фото? Может нет той информации, которую вы искали?

Напишите мне!

Как нарисовать иконку компьютера с помощью inkscape

Возможность сохранять файлы в формате svg одна из ключевых возможностей редактора inkscape. Сегодня мы нарисуем svg иконку компьютера.

Мы нарисуем иконку используя один единственный инструмент- рисовать прямоугольники и квадраты и сохраним результат в svg формате.

Для работы нам потребуются следующие инструменты

После запуска inkscape меняем размер документа в свойствах (shift+ctrl+D). В поле размеры документа вводим размеры 256 на 256 пикселей

Это вполне подходящий размер для иконки. На панели слоев удаляем слои.

Шаг 1

Начнем с экрана монитора. Для этого рисуем черный прямоугольник  инструментом Рисовать прямоугольники и квадраты (F4).

С помощью инструмента Редактировать узлы и рычаги (F2) немного скругляем углы

Для этого немного потянем мышкой за круглый маркер управления скруглением (отмечен красным).

Создаем копию прямоугольника (чтобы сохранить пропорции) и уменьшаем ее. Заливка FF6600. Это экран монитора. Выделяем оба и выравниваем объекты. Как использовать выравнивание можно почитать здесь.

 В нижней части создадим панельку с кнопками управления работой монитора. Для начала рисуем прямую линию и оконтуриваем ее: Контур- оконтурить обводку .

Толщину линии, для удобства работы с узлами, устанавливаем в 0,5 мм. Установить толщину можно в закладке Стиль обводки. Далее работаем с узлами.

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

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

Приподнимаем средний узел вверх

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

Добавим три кнопки. Их рисуем тем же инструментом Рисовать прямоугольники и квадраты.

Группируем нарисованные элементы Ctrl+G. Монитор готов.

Шаг 2

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

Уже известным способом скругляем углы. Добавляем (или дублируем) три кнопки и отсек для dvd, размещаем их под монитором

Ну и заканчиваем подставкой под монитор. Сначала прямоугольник черного цвета

Затем Контур- оконтурить объект. Теперь помощью инструмента Редактировать узлы и рычаги (F2) искривляем боковые стороны

Для этого подводим мышку к боковым сторонам и тянем, зажав левую кнопку. Группируем нарисованные элементы Ctrl+G. Ну вот и все.

Вот такая голландская иконка получилась.

А это вариант черно- белой иконки

Другие похожие и не очень похожие, но интересные записи

10 ошибок в дизайне иконок

10 ошибок в дизайне иконок

Автор: Денис Кортунов
12 февраля 2008

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

#1 Недостаточная различимость иконок

Иногда в рамках одного набора встречаются слишком похожие друг на друга иконки и очень трудно понять, «что есть что». Если не читать подписи, то можно очень легко ошибиться и перепутать значки.

Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.

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

#2 Слишком много элементов в одной иконке

Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.

Но дизайнеры компании Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали «на все деньги»:

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

#3 Лишние элементы

Иконка должна легко «читаться». Чем меньше на ней элементов, тем лучше. Желательно, чтобы значимым было все изображение, а не только его часть. Поэтому необходимо обращать внимание на контекст, в котором будут использоваться иконки.

Возьмем для примера набор иконок для работы с базой данных:

На первый взгляд все вполне прилично.

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

Смысл не потерян, но значки стали более различимыми.

Вот реальный пример использования лишних элементов в иконках BeOS 5:

Галочки тут совершенно не нужны. Кстати, почему они красные?

#4 Нет стилевого единства набора

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

Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.

#5 Ненужная перспектива и тени в мелких иконках

Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.

Для примера возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):

Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.

А вот менеджер приложений из Windows XP:

По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16х16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.

#6 Слишком оригинальные метафоры

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

Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая не корзина вовсе, а шредер.

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

#7 Нет учета национальных и социальных особенностей

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

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

Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.

Ответ можно найти в руководстве по созданию иконок для Mac OS X: используйте универсальные и легко узнаваемые изображения. Не фокусируйтесь на второстепенных аспектах элементов. Пример: для иконки электронной почты предпочтительнее будет использовать изображение почтовой марки, чем трудноузнаваемого почтового ящика.

Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.

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

Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!».

#8 Изображения реальных элементов интерфейса в иконках

Руководство по созданию иконок для Mac OS X предостерегает нас: не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:

Хочешь переключить radiobutton, а нажимается вся иконка!

Или вот интересный пример из интерфейса браузера OmniWeb:

Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!

#9 Текст внутри иконок

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

#10 Мимо пикселей

Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.

Связанные записи

Как нарисовать правильную иконку? | App2top

Иконка тоже продает. В зависимости от того, что на ней и как нарисовано, пользователь принимает решение, кликать по ней или нет, смотреть, достойное ли ему предлагают приложение. Вопрос в том, есть ли 100%-работающие правила, касаемо иконок?

То есть, можно ли гарантировать, что при качественном отображении n- объекта, по ней кликнут?

Для того, чтобы решить эту задачу, мы решили посмотреть на иконки топовых iOS-игр на рынках США, Китая и Германии. Этот выбор мы сделали, исходя из следующих предпосылок:

• США – это лакмусовая бумажка рынка мобильных игр. Большинство игроков на рынке ориентируются именно на него. 
• Китай – это ближайшее будущее мобильного рынка. Сейчас этот рынок находится на этапе становления.
• Германия – один из центральных рынков Европы. Принято считать, что немецкий ритейл серьезно отличался от мирового. Справедливо ли это для рынка мобильного?

Иконки — США

Гроссинг

Иконка Candy Crush Saga от King — вряд ли идеал. Однако она выделяется не только в топе, но и в сторе: необычная окантовка (белое с фиолетовым), страшноватые конфеты на голубом фоне. К слову, этот же фон присутствует и в Pet Rescue Saga. Только в последнем случае King решили все-таки разместить на иконке изображение одного из игровых персонажей. 

По поводу иконки Clash of Clans. Мы, возможно, путаем, но тренд на орущих на иконке мужчин запустила именно Supercell. В российской кассовом топе иногда ситуация доходила до того, что топ-5 целиком отходил играм с подобными иконками.

Иконка War of Hereoes — тоже не идеал. Она страшненькая, но зато рассчитана на строго определенную аудиторию, поклонников Marvel и героев этой вселенной. 

Платный чарт

Найти общее в платных иконках здесь очень сложно. Каждая из них обращается к своей аудитории. На иконке Angry Birds Star Wars II Rovio посчитала нужным написать только «Звездные войны»; у Plague Inc. нарисовано два символа — биологического заражения и ДНК; у Minecraft — пикселизированная текстура; Heads Up! отображает то, как проходит игра, а на иконке NFL — игрок в американский футбол.   

Бесплатный чарт

Тут тоже идет, если можно сказать, игра с символами. Уже глядя на иконки можно понять, про что игра. Исключение — Deer Hunter 2014, в которой надо не играть за оленя, а охотиться на него.

Иконки — Китай

Гроссинг

У большинства представленных в китайском топе игр — потрясающий мультяшный арт. Имена игр приводить не буду (они все на китайском), но тут немного обратная американскому рынку ситуацию. Иконки, как правило, ничего не говорят пользователю (среди представленных выше — раннер, батлер, карточная игра и ММО). Зато тут есть серьезный акцент на лица, которые занимают большую часть экрана. Их задача — послать пользователю не информацию об игре, а настроение.     

Платный чарт

Первое приложение (部落守卫战) — мобильная версия популярной в Китае MMO tower defence (да, похоже, такое бывает). Так что вполне понятно желание разработчиков разместить оригинальный логотип на иконке. В случае с приложением под номером четыре (狂斩三国) так поступили из-за говорящего названия —  «Три порезанных» (спасибо, Google). Вполне хорошее имя для слешера.  

Бесплатный чарт

В бесплатном чарте все понятно: есть приложения, чья иконка — символ, есть те, которые «про настроение».

Иконки — Германия

Гроссинг

В четырех случаях из пяти тут представлены персонажи, которые транслируют определенное настроение.

Платный чарт

Даже если бы мы не писали, что за рынки мы рассматриваем, благодаря лидерству Construction Simulator 2014 в платном чарте можно было бы с легкостью догадаться: это Германия. Хотите подняться в немецком топе?  Сделайте симулятор гражданской техники (комбайна, трактора, трамвая, строительного крана или чего-либо подобного). 

Бесплатный чарт

Самый для нас большой секрет — первые две иконки. Нам они ничего не говорят. О чем игры, для кого — секрет за семью печатями. Зато трафика на них не жалеют.

Подводя итоги

Мы не откроем Америку, если скажем про иконки игр следующее: при их создании можно исходить из двух двух предпосылок. 

1. Акцент на контент (если игра по птичек, рисуем птичек, если про гонки — рисуем машинки). Такой подход активно используется на западных рынках.

2. Акцент на настроение (мы же хотим нравиться пользователю, так почему бы не порадовать его улыбкой игрового персонажа или, если игра — хоррор, наоборот, не попробовать его напугать).

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

6 простых шагов к лучшему дизайну иконок — Smashing Magazine

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

В этой статье рассматривается набор рекомендаций по проектированию в шесть этапов. Шаги соответствуют основам дизайна звуковых иконок, включая последовательность, разборчивость и ясность. Принципы эффективного дизайна иконок подробно обсуждались дизайнером иконок Джоном Хиксом из Hicks Design в его книге «Справочник по иконкам», а также компанией Google в его рекомендациях по материальному дизайну для системных иконок.Шесть шагов, описанных в этой статье , следует рассматривать как руководство, а не как догматический список правил . Чтобы стать великим дизайнером, нужно научиться, когда нарушать правила, а когда им следовать, как мы продемонстрируем здесь.

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

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

Дополнительная литература по SmashingMag:

Больше после прыжка! Продолжить чтение ниже ↓

Встречайте Smashing Email Newsletter с полезными советами по интерфейсу, дизайну и пользовательскому интерфейсу.Подпишитесь и получите «Контрольные списки интеллектуального проектирования интерфейсов» — бесплатную презентацию в формате PDF с более чем 150 вопросами, которые нужно задать себе при проектировании и создании почти чего-либо .

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

Переделка иконы

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

На изображении слева вверху показан исходный значок. На изображении справа показан обновленный значок, который реализует принципы, изложенные в этой статье. (Изображение: Кем Бардли)

Обратите внимание, что хотя рекомендации, обсуждаемые в статье, ориентированы на веб-иконки, они, как правило, применимы и к печатным значкам. Типичные 300 точек на дюйм (DPI) печатного материала делают пиксельное совершенство практически бессмысленным.Если вы дизайнер печати и читаете это, все описанные принципы применимы, но вы можете в значительной степени игнорировать элементы совершенствования пикселей.

Три атрибута эффективного дизайна иконок

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

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

Форма

Форма — это основная структура значка или способ его создания. Если вы проигнорируете детали значка и проведете линию вокруг основных фигур, образуют ли они квадрат, круг, горизонтальный или вертикальный прямоугольник, треугольник или более органичную форму? Основные геометрические формы — круг, квадрат и треугольник — создают визуально стабильную основу для дизайна иконок.В нашем примере с корги Кем Бардли голова собаки состоит из двух треугольников и двух эллипсов. Точно так же, как если бы кто-то начал рисовать с наброска самых больших и простых форм, а затем уточнял их в сторону большей и большей детализации, можно начать иконку с самых простых форм, а затем добавить больше деталей — но только столько деталей, сколько необходимо для передачи концепции. быть представленным, будь то объект, идея или действие.

Ключевые линии на этом изображении показывают основные лежащие в основе формы, которые определяют форму дизайна.(Изображение: Кем Бардли)

Aesthetic Unity

Элементы, общие для одного значка и для набора значков, представляют собой то, что мы называем эстетическим единством. Это такие элементы, как закругленные или квадратные углы, определенный размер углов (2 пикселя, 4 пикселя и т. Д.), Ограниченный и постоянный вес линий (2 пикселя, 4 пикселя и т. Д.), Стиль (плоский, линейный, с заливкой). линия или глиф), цветовую палитру и многое другое. Эстетическое единство набора — это набор элементов дизайна и / или вариантов, которые вы повторяете на протяжении всего набора, чтобы визуально связать его в единое целое.В приведенных ниже примерах обратите внимание на то, что каждая из трех собак из набора Кема имеет общие элементы, такие как закругленные углы на 2 пикселя, обводка толщиной 2 пикселя вокруг морд собак и носы в форме сердечек.

Эти три иконки с собаками имеют общий дизайн и элементы стиля, создавая эстетическое единство. (Изображение: Кем Бардли)

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

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

Уникальные качества каждой собаки делают их индивидуально узнаваемыми, а общий дизайн и элементы стиля делают их узнаваемыми как единое целое. (Изображение: Кем Бардли)

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

Шесть шагов

Всегда начинать с сетки

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

Здесь мы видим сетку размером 32 × 32 пикселя с 2-пиксельной границей (или «запретной зоной») для передышки.

Внешние 2 пикселя сетки — это то, что мы называем «запретной зоной». Не помещайте в это место какую-либо часть значка без крайней необходимости. Запретная зона предназначена для создания некоторой передышки вокруг значка.

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

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

Выравнивание круглых значков с сеткой и ключевыми линиями (Изображение: Скотт Льюис)

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

Выравнивание и размер круглых и квадратных значков относительно сетки (Изображение: Скотт Льюис)

Внутри 32-пиксельного квадрата вы увидите вертикальный и горизонтальный прямоугольники размером 20 × 28 пикселей. Мы свободно следуем этим прямоугольникам для значков, которые имеют горизонтальную или вертикальную ориентацию, и пытаемся сделать размеры любых значков ориентированными таким образом, чтобы они соответствовали размерам этих прямоугольников 20 × 28 пикселей.

Выравнивание и размер вертикально и горизонтально ориентированных значков относительно сетки (Изображение: Скотт Льюис)

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

Выравнивание и размер диагонально ориентированного значка относительно сетки (Изображение: Скотт Льюис)

Помните, что вам не нужно каждый раз точно следовать за сеткой и направляющими.Сетка предназначена для того, чтобы помочь вам сделать значки согласованными, но если вам нужно выбирать между улучшением значка и соблюдением правил, нарушайте правила — просто делайте это экономно. Как сказал Хеммо де Йонге, более известный под псевдонимом Dutch Icon:

Сущность отдельного значка перевешивает важность сплоченности набора.

Начните с простых геометрических фигур

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

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

В цифрах: края, линии, углы, кривые и углы

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

Уголки

В большинстве случаев придерживайтесь углов в 45 градусов или кратных им. Сглаживание под углом 45 градусов равномерно ступенчатое (активные пиксели выровнены встык), поэтому результат получается четким, а идеальная диагональ этого угла представляет собой легко узнаваемый узор, который очень нравится человеческому глазу. Этот узнаваемый узор обеспечивает согласованность набора значков и единство в рамках одного значка. Если ваш дизайн требует нарушить это правило, попробуйте сделать это пополам (22.5 градусов, 11,25 и т. Д.) Или кратные 15 градусам. Каждая ситуация индивидуальна, поэтому решайте ее индивидуально. Преимущество использования половин в 45 градусов заключается в том, что сглаживание по-прежнему будет довольно равномерным.

Крупный план обычного сглаживания углов 45 градусов

Кривые

Одна из наиболее заметных областей, которые могут ухудшить качество значка и что может означать, что разница между профессиональным и любительским видом — неидеальные кривые.В то время как человеческий глаз может обнаруживать очень незначительные отклонения в точности, зрительно-моторная координация не всегда может обеспечить высокий уровень точности. Чтобы создавать кривые как можно больше, полагайтесь на инструменты фигур и числа, а не на рисование их вручную. Когда вам действительно нужно нарисовать кривую вручную, используйте клавишу-модификатор ограничений Adobe Illustrator (или вашего векторного программного обеспечения) (клавишу Shift) или, что еще лучше, используйте VectorScribe и InkScribe от Astute Graphics для еще более точного управления кривыми Безье.

Рисование углов вручную дает худшие результаты.(Изображение: Кем Бардли)

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

Эти очень точные кривые были созданы с использованием инструментов Безье Illustrator, а не рисовались вручную.

Уголки

Обычное значение закругленного угла (или радиуса) составляет 2 пикселя. В значке размером 32 × 32 пикселя радиус в 2 пикселя достаточно велик, чтобы его можно было ясно увидеть как закругленные, но он не настолько смягчает углы, чтобы изменить индивидуальность дизайна (придавая ему вид «пузыря»).Значение, которое вы выберете, будет зависеть от индивидуальности, которую вы хотите придать дизайну. Использование закругленных углов — это эстетическое решение, которое необходимо принять с учетом общей эстетики набора.

Точно скругленные углы

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

Прогресс нашей переработанной иконки Corgi.

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

Pixel-Perfection

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

Как уже упоминалось, углы в 45 градусов являются лучшими (после прямых линий), потому что пиксели, используемые для определения угла, сложены или расположены ступенчато, конец в конец идеально по диагонали.То же самое и с углами и кривыми: чем они точнее математически, тем четче будет сглаживание. Однако обратите внимание, что совершенство пикселей менее актуально, по крайней мере, для сглаживания, при больших размерах и на экранах с более высоким разрешением, таких как дисплеи «Retina».

Толщина линий

Когда дело доходит до веса лески, идеально подходят два, но иногда необходимо три. Цель состоит в том, чтобы обеспечить визуальную иерархию и разнообразие, не привнося слишком много разнообразия и, таким образом, разрушая согласованность набора.Более трех и набор может потерять связность. Преимущество 2- и 4-пиксельных весов линий заключается в том, что они кратны 2 и, следовательно, легко масштабируются вверх и вниз с равными приращениями. В большинстве случаев избегайте очень тонких линий, особенно в глифах и плоских значках. Если вы намеренно не создаете значки «стиля линии», полагайтесь на свет и тень, а не на линии, чтобы определить форму.

Этот значок iPhone демонстрирует постоянную толщину линии. (Изображение: Скотт Льюис)

Используйте единые элементы дизайна и акценты на значках

Хеммо де Йонге из компании Dutch Icon выступил с блестящим докладом на Icon Salon 2015, в котором подробно рассказал об этом аспекте дизайна иконок.В своем двухлетнем проекте системы иконок для правительства Нидерландов Хеммо и его партнер по дизайну сделали выемку в каждой из иконок. Не на каждой иконке есть выемка, но у большинства она есть. Этот вид акцента, используемый консервативно, но последовательно в наборе значков, действительно может связать набор воедино.

Использование общих элементов дизайна (Изображение: Dutch Icon)

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

Использование общих элементов дизайна с нашими значками собак (Изображение: Кем Бардли)

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

Использование общих элементов дизайна в наших пиктограммах с собаками, но в другом стиле (Изображение: Kem Bardly)

Используйте детали и украшения экономно

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

Минимальная детализация сообщает, что это за объект. (Изображение: Кем Бардли)

В приведенной выше версии мы довольно близки к завершенному, улучшенному дизайну.Черные очертания вокруг ушей превратились в покрытую мехом коричневую область вокруг ушей. Черные линии вокруг лица исчезли, но все еще видны в 2-пиксельном пространстве над белой отметкой на лице корги. Обратите внимание, однако, что у нас все еще есть некоторые элементы из «предыдущей» версии, например, простой нос. Мы рассмотрим это на следующем шаге.

Сделай его уникальным

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

Нос в форме сердца на корги делает эту икону уникальной и индивидуальной. (Изображение: Кем Бардли)

На последнем изображении «после» мы видим уникальный штрих в форме сердца, который придает дизайну нотку новизны и беззаботности.

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

На изображении слева вверху показан исходный значок. На изображении справа показан обновленный значок, который реализует принципы, изложенные в этой статье. (Изображение: Кем Бардли)

Заключение

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

У вас есть собственные методы, советы или основы, которыми вы хотели бы поделиться? Оставляйте их в комментариях ниже.

Дополнительная литература

(ах, мл, ал, ил)

Учебное пособие по рисованным иконкам

Прошло три года с тех пор, как мы запустили [icon]. С тех пор мы добавили новые функции, такие как коллекции, новые серии, такие как Hatch and Feather, и даже новых художников, таких как Ariane и Katinka.Но есть одна вещь, которую мы откладывали: серия нарисованных от руки иконок.

Почему нарисованные от руки значки — такое устрашающее занятие? Для [icon] мы стремимся создавать значки с идеальным пикселем, серии, которые внутренне согласованы, и объекты, не содержащие посторонних точек привязки. Рисованные от руки формы по своей сути не являются пиксельным префектом, а точки привязки, созданные вручную, создают сложные объекты, которые нелегко настроить или изменить. Мы также стремимся создавать серии значков, которые можно использовать вместе, что означает уравновешивание недостатков руки с помощью логики и правил для создания последовательности.

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

Примечание. Мы использовали iPad Pro, Apple Pencil и Adobe Illustrator Draw. Есть и другие инструменты, которые вы можете использовать, но мы обнаружили, что они лучше всего позволяют уловить несоответствия давления, направления и скорости руки.

1. Собрать и отследить

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

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

Измените размер всех значков по размеру сетки, в которой вы работаете. Если вы работаете с небольшим размером (32 пикселя или меньше), попробуйте установить размер базовых значков на 200%, чтобы их было легче отслеживать.

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

2. Руководство и итерация

После того, как вы проследили все формы на справочном листе, сделайте справочный лист невидимым и распечатайте свои эскизы в том фактическом размере, в котором вы хотите, чтобы значки были — например, если вы рисовали на 200%, распечатайте на 50 %.

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

Повторяйте шаги 1 и 2, пока не будете довольны набором собранных метафор.

3. Создание правил

Просмотрите свои первоначальные наброски, чтобы определить, что работает, а что не работает, и определит ряд правил для окончательной серии значков. На что следует обратить внимание:

• Уровень детализации
• Открытые и закрытые формы
• Качество линии
• Значок угловой
• Использование завитушек (точек, тире)
• Изображение света
• Представление глубины
• Повторяющиеся формы (стрелки, руки)

Когда вы будете уверены в своих правилах, пора нарисовать то, что станет вашими окончательными значками.

4. Отслеживание нескольких версий

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

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

5. Выберите лучшее

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

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

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

6. Изменить размер

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

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

7. Окончательные правки

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

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

Как создавать лучшие иконки

Изображение предоставлено студенткой Skillshare Мэгги Н.

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

Развивайте свои концепции

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

«Создание» значков в первую очередь означает понимание того, как, где и кем они будут использоваться.Это миссия стартапа, связанная с брендом, или новый инновационный продукт? Помогут ли ваши значки людям перемещаться по городским улицам или передавать потенциально жизненно важную информацию? Аудитория ваших иконок — местная, национальная или глобальная? Если вы работаете с бизнес-клиентом, внимательно слушайте конкретные слова, которые они используют для описания своей компании или продукта. Убедитесь, что у вас есть четкое представление о вашей общей миссии, а также о цели и контексте вашей работы. первый шаг к созданию оригинальных и эффективных иконок.

Изображение предоставлено студентом Skillshare Аароном С.

Положи слова на бумагу

Как только ваши концепции станут предметом внимания, вы можете найти полезным выразить словами то, что вы хотите выразить. В рамках своего курса Skillshare «Изучение идентичности бренда: создание символа бренда» ведущий дизайнер Бенни Голд выполняет живую словесную ассоциацию с блокнотом и карандашом, что демистифицирует и освещает этот процесс. Сначала создайте список ключевых слов для каждого значка, а затем перечислите слова, которые более слабо связаны с этими терминами, чтобы помочь вам более полно конкретизировать конкретные концепции.Ищите закономерности в записанных вами словах и начинайте воображать визуальные представления некоторых из самых сильных.

Изображение предоставлено студентом Skillshare Крисом В.

Использовать визуальные ссылки

Бенни Голд поделился еще одной жемчужиной дизайнерской мудрости в своем классе Skillshare: «Каждый хороший дизайн начинается с хорошего образца». В Интернете есть тысячи сайтов, на которых собраны бесплатные значки для любого воображаемого использования, поэтому продолжайте уточнять условия поиска для значков и тематики, пока не найдете именно то, что вам нужно.Сайты, включая The Noun Project, Icons8 и Swifticons, предлагают высококачественные, тщательно отобранные значки через платную загрузку или подписку, часто в форме, позволяющей легко редактировать.

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

Также важно определиться с графическим стилем, который вы хотите использовать для своих значков: плоский, нарисованный от руки, контурный и т. Д.Pinterest — отличный источник идей по стилю иконок, особенно на странице сайта «Иконки: исследование типов и стилей».

Нарисуйте свои значки

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

Изображение предоставлено студентом Skillshare Хайме П.

Векторизация ваших дизайнов

Иконки должны использоваться во всех мыслимых контекстах, от приложений для смартфонов до рекламных щитов. Использование приложения для векторного рисования позволит вам масштабировать дизайн без потери качества. Поскольку Adobe Illustrator упрощает работу с сетками, направляющими и основными элементами дизайна, такими как толщина линий, он стал предпочтительным инструментом для многих дизайнеров значков.В Skillshare есть множество классов, которые помогут вам быстрее освоить Illustrator, в том числе популярный курс Энн Брекер «Learn Adobe Illustrator: основы для начинающих». Также доступно множество бесплатных и недорогих инструментов векторного рисования для создания значков. Если вам нужен список самых популярных, TechRadar опубликовал ежегодное руководство «Лучшие бесплатные альтернативы Adobe Illustrator 2019».

Изображение предоставлено студентом Skillshare Майком

5 основных советов по лучшему дизайну иконок

Если вы хотите создавать действительно отличные иконки, есть несколько передовых методов, которые вы должны помнить во время работы:

1. Последовательность — главное. Несвязный набор значков может выглядеть беспорядочно, непрофессионально и имеет очень мало шансов передать то, что должно. Придерживайтесь единого стиля, темы и цветовой палитры, и вы не запутаете зрителей.
2. Ваша аудитория на первом месте. Значение определенных значков может радикально отличаться в зависимости от культуры, поэтому обязательно перепроверьте свои сообщения при разработке для глобальной аудитории. Своевременно обновляйте визуальные метафоры: на заре Интернета компакт-диск идеально служил символом музыки, но теперь это уже не .
3. Не поддавайтесь желанию использовать слова. Многие значки содержат одну букву для большого эффекта (яркий пример — буква «f» в Facebook), но любой дизайн, в котором используются слова, по определению представляет собой больше изображения, чем значка.
4. Попробуйте в черно-белом варианте. Яркие цвета — важный инструмент при создании значков, но вы можете проверить эффективность своих творений, удалив цвет. Если он все еще общается, вероятно, у вас есть сильный значок. Если нет, рассмотрите другую версию.
5. Проверьте и еще раз проверьте свою работу. При приближении к завершению набора значков обязательно выполните простую визуальную проверку своей работы в группе. Слегка размывайте значки или прищуривайте глаза, чтобы убедиться, что визуальный вес одинаков для всего набора. Проверьте ясность сообщения и эстетическое единство, а также убедитесь, что между элементами достаточно места, воздуха и контраста, чтобы сделать ваши значки узнаваемыми и привлекательными.

---

Хотите узнать больше о разработке иконок? Ознакомьтесь с классами Skillshare на , как создать значок и и набор значков , чтобы начать работу.

Изображение на обложке студента Skillshare Кэтрин Чан для DKNG Иллюстрирование набора значков: создание связной серии .

Как создавать эффективные иконки

Я, может быть, то, что вы назвали бы иконофилом . Я ОБОЖАЮ иконки, и я люблю делать их еще больше! Как художник, я в основном рисовал — я люблю рисовать, и рисовал всю свою жизнь (задолго до того, как я узнал, что такое графический дизайн).Я думаю, это ключ к моему пониманию создания иконок. Рисование учит вас видеть — а затем преобразовывать то, что вы видите, в линии и форму на бумаге — и именно так вы создаете эффективные значки .

Геометрия

Итак, для начала, практически все может быть сделано из комбинаций этих четырех форм:

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

Значок сердца может состоять из двух кружков и треугольника.

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

Иконки интерфейса

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

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

• 1. Выберите инструмент Прямоугольник со скругленными углами

• 2. Вытяните фигуру

• 3. Поиграйте с толщиной хода, пока не получите удовлетворительный результат.

• Я обычно выбираю одну или две толщины штриха для использования во всем наборе значков.

  Это помогает им выглядеть более последовательными и сплоченными.

• 4. Создайте крышку с другим прямоугольником с закругленными углами.

• 5.Еще один скругленный прямоугольник образует ручку крышки.

• 6. Сотрите нижнюю половину прямоугольника с закругленными углами.

• 7. Теперь добавьте полосы на банку, добавив три вертикальные линии к корпусу банки.

• 8. Вот и все! Значок корзины … если хотите, вы можете поэкспериментировать с цветом или толщиной линий

Несколько других действительно полезных инструментов, которые я часто использую при создании значков, — это поиск пути, который я использую для вырезания, соединения и выделения фигур;

Инструмент «Обводка / заливка», который помогает переключать формы с заливки на обводку.

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

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

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

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

The Sketch Handbook: Создание иконок в Sketch

Это отрывок из The Sketch Handbook из журнала Smashing Magazine, «всего, что вы когда-либо хотели знать о дизайне с помощью Sketch на 376 страницах». Подсказка: я автор.Ниже приводится подробное руководство, которое будет позже в этой книге, но если вы новичок в Sketch, не волнуйтесь. Книга начинается с основ и знакомит вас со всеми функциями Sketch.

В этом уроке мы собираемся использовать Sketch для создания первого из четырех значков. Вот все значки:

Во-первых, добавьте новую страницу для размещения всех 4 значков. Назовите его «Иконки». Каждая иконка должна иметь размер 64 × 64 пикселя и находиться на отдельной монтажной области. Добавьте первый и измените положение X и Y на 0 для четко определенной начальной точки.

Поскольку мы начинаем со значка «Морской», обязательно используйте это имя для артборда. Измените цвет фона на синий (# 55BFE1) из значка категории адаптивной статьи, но отключите Включить в Экспорт . Хорошо, что раньше мы сохранили его в Document Colors .

Первым элементом для каждого значка является белый круг, размер артборда, который также будет определять его границы и действовать как маска (рис. 10.2, слева). Нарисуйте один после того, как вы нажали O , и удерживайте Shift, чтобы зафиксировать соотношение.Круг должен начинаться в верхнем левом углу. Назовите это «Маска». Несмотря на то, что в статье значки имеют рамку в 8 пикселей, давайте пока оставим ее. Мы можем добавить это позже.

По теме: узнайте, как переключиться на Sketch, в этом бесплатном и простом видеокурсе от InVision

Так как мы хотим создать иконку с идеальным пикселем, давайте сейчас создадим сетку 2 × 2. Нажмите View → Grid Settings… на панели инструментов и введите размер блока Grid из 2 пикселей (рис.10.2, справа). Толстые линии не нужны (укажите здесь 0). Эта сетка не только позволяет нам размещать все элементы значка на полных пикселях, но и помогает избежать размытых линий, если мы придерживаемся размеров значков, кратных или половинных из 64 пикселей. Чтобы использовать эту сетку в полной мере, всегда следите за тем, чтобы фигуры выровнялись точно по линиям сетки при их добавлении или изменении. Иногда полезно оценивать качество значка без линий сетки. Вы можете нажать Cmd + G , чтобы выключить их.

Рис. 10.2: Основой каждого значка является круг, который также действует как маска. Двухпиксельная сетка гарантирует, что все элементы размещаются на полных пикселях.

Вид лучше

Чтобы лучше видеть, что мы будем делать, увеличьте масштаб до 800%. Хотя в этом увеличенном состоянии работать с деталями значка намного проще, есть опасность потерять представление об общем качестве. К счастью, здесь помогает Sketch Mirror, особенно если у вас есть второй экран компьютера.Вы можете работать с первым дисплеем в этом увеличенном состоянии в Sketch, в то время как второй дисплей показывает исходный размер.

Щелкните Mirror на панели инструментов и URL-адрес в правом нижнем углу диалогового окна, чтобы открыть дизайн в браузере. Там выберите страницу «Значки» вверху и выберите значок или выполните поиск по его имени с помощью функции поиска в правом верхнем углу, чтобы открыть его в одном окне. Каждый раз, когда вы сейчас что-то меняете в Sketch, это сразу же отражается здесь.Вы даже можете настроить текущий выбранный артборд на автоматическое отображение в зеркальном отображении: просто включите Show current Artboard на вкладке General в Preferences .

Дерево

Для вдохновения я попробовал поиск значков в The Noun Project и просмотрел некоторые термины, которые у меня ассоциируются с «приморской» темой. Я приземлился на лодке, плывущей по волнам, и дереву, изображающему природу вокруг озера. Это элемент, с которого мы начнем: он состоит из трех основных треугольников для ветвей и прямоугольника для ствола (рис.10.3). В то время как Sketch предлагает четкую форму треугольника для первого, я предпочитаю использовать вместо него прямоугольник, потому что у меня больше свободы для выбора выравнивания. Кроме того, он доступен с помощью сочетания клавиш.

Для верхушки дерева нажмите R и добавьте первый прямоугольник размером 12 × 6, выровненный по сетке. Убедитесь, что это применимо ко всем фигурам, которые вы добавляете с этого момента. Перейдите в режим векторной точки с помощью . Введите , удерживайте Cmd и щелкните верхнюю строку, чтобы добавить точку точно посередине.После этого выберите точки слева и справа щелчком Shift . Вы также можете перетащить выделение в каждую точку вместо Shift -клик, если это сложно поймать.

Теперь удалите эти точки с помощью Delete или Backspace , что даст нам желаемый треугольник, и выйдите из режима векторных точек с помощью Esc . После этого продублируйте форму либо с помощью Cmd + D , либо, удерживая Alt и перетаскивая его вниз.Если вы предпочитаете первый метод, убедитесь, что Сдвиг дублированных слоев отключен на вкладке Layers в настройках Preferences , чтобы дубликат оставался в том же положении, что и оригинал. После этого переместите треугольник вниз на 4 пикселя. Либо используйте клавишу со стрелкой вниз , либо добавьте «+4» в поле Y в инспекторе. В последнем случае нажмите Esc , чтобы выйти из поля ввода.

Этот второй треугольник должен быть шире на 4 пикселя и на 2 пикселя выше.Самый быстрый способ изменить его размер — удерживать Cmd и нажимать клавишу со стрелкой вправо , пока не добавите 4 пикселя. Удерживая нажатой Cmd , таким же образом используйте клавишу со стрелкой вниз , чтобы увеличить его на 2 пикселя. Все это тоже можно сделать в инспекторе.

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

Не снимая выделения со всех частей, выполните логическую операцию типа Union , нажав Alt + Cmd + U . Это добавит все формы в один слой и позволит вам сразу изменить цвет на такой же, как у фона монтажной области. Наконец, переименуйте его в «Дерево» и переместите в положение X , равное 4, и положение Y, , равное 10, чтобы оставить место для других частей.

Лодка

Хорошо, плывем к лодке. Сначала это может быть неочевидно, но оно также состоит из 3 измененных прямоугольников (рис. 10.4).

Сначала создайте прямоугольник размером 14 × 20 в свободном пространстве с правой стороны значка для большего паруса. Войдите в режим векторной точки, как и раньше, который выберет верхнюю левую точку, начальную точку формы. Тем не менее, буквальный интерес на данный момент находится в правом верхнем углу.Нажмите Tab , чтобы перейти к нему, а затем нажмите Delete , чтобы удалить его. Выйдите из режима векторной точки. Кусок пирога.

Хотите верьте, хотите нет, но второй меньший парус еще проще. Дублируйте большой парус, щелкните правой кнопкой мыши и выберите Transform → Flip Horizontal . Перейдите к инспектору с помощью Alt + Tab , перейдите к полю Ширина с последующими нажатиями Tab , введите 8, перейдите к Высота и введите 12. Нажмите Esc , чтобы выйти из поля.Теперь нажимайте кнопку со стрелкой влево и , пока интеллектуальные направляющие не покажут зазор в 2 пикселя от другого паруса. Кроме того, переместите меньший парус вниз с помощью клавиши со стрелкой вниз , пока оба паруса не окажутся на одной базовой линии. В конце выберите обе формы, чтобы создать еще одну логическую операцию Union .

Для корпуса лодки добавьте еще один прямоугольник размером 38 × 12 пикселей под парусами с интервалом в 2 пикселя. После входа в режим векторной точки, удерживая нажатой клавишу Cmd , щелкните нижнюю строку, чтобы добавить точку посередине.Нажмите Tab , чтобы перейти в нижнюю левую точку, нажмите Delete , чтобы удалить его, снова нажмите Tab , но на этот раз в сочетании с Shift , чтобы двигаться в обратном направлении, пока не дойдете до нижней правой точки. . Также удалите его.

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

Выйдите из режима векторной точки и выберите корпус лодки вместе с группой парусов. Отцентрируйте их по горизонтали, но затем переместите паруса на один пиксель вправо, чтобы они снова выровнялись по сетке. Наконец, выберите их все вместе и добавьте в одну группу с помощью другой операции Union . Измените цвет, чтобы он соответствовал другим частям значка. Переименуйте эту группу в «Лодка» и измените положение на 22 (X) и 18 (Y).Теперь давайте скроем его с помощью Shift + Cmd + H , чтобы у нас был беспрепятственный обзор последней части значка.

Рис. 10.4: Лодка отмечает второй элемент значка. Я временно уменьшил непрозрачность дерева, чтобы выделить форму лодки.

Волны

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

Начальная точка — одиночный овал. Нарисуйте один размером 16 × 12. Добавьте его к левому краю значка под деревом, чтобы у вас было место для последующих копий. Удерживая Alt , перетащите копию вправо, пока оба элемента не соприкоснутся и не окажутся на одной линии. Теперь нажмите Cmd + D , чтобы добавить элементы с одинаковым интервалом, пока у вас не получится 4 овала. По-прежнему не похоже на волны. Шаг в правильном направлении — выбрать все эти формы, чтобы вы могли сформировать логическую операцию Union .Убедитесь, что эта группа выровнена по центру монтажной области по горизонтали.

Один элемент все еще отсутствует, прямоугольник 64 × 28 пикселей, где мы можем вырезать овалы, чтобы сформировать окончательные волны. Перемещайте его вертикально, пока его верхняя сторона не будет отцентрирована по овалам; также отцентрируйте его по горизонтали относительно монтажной области (рис. 10.5, 1). Теперь перетащите прямоугольник в группу логических значений в списке слоев, но убедитесь, что он находится в самом нижнем положении. Наконец, снова выберите все овалы и измените их логический тип, щелкнув Subtract , маленький значок рядом со слоями в списке слоев (рис.10.5, 2). Теперь мы становимся серьезными.

Рис. 10.5: Волны образованы 4 овалами, вычтенными из прямоугольника (1). Измените логический тип с помощью маленьких значков в списке слоев (2).

Завершите волны, добавив границу Inside с толщиной 2px к объединенной форме и назначьте ей тот же цвет, что и все остальное. Как и в случае с цветом заливки, вы можете использовать палитру цветов с Ctrl + C , но сначала вам нужно будет удалить заливку с помощью F (нам она все равно не понадобится).Наконец, назовите эту логическую группу «Вершина волн» и переместите ее на позицию Y , равную «42».

Чтобы создать движение, добавьте вторую линию волн со смещением вправо на 8 пикселей, на половину ширины овала. Конечная позиция Y для этой второй линии волн — 52, и имя должно быть «Дно волны» (рис. 10.6). Если вы сейчас выберете группу «Лодка» в списке слоев и покажете ее, она будет плавно перемещаться по верхней ватерлинии.

Рис. 10.6: Готовые волны: две волновые линии, смещенные на 8 пикселей, создают некоторое движение.

Чтобы завершить его, объедините все в группу «Иконка», чтобы было легче получить весь пакет сразу. Кроме того, измените белый круг сзади на маску с помощью Ctrl + Cmd + M , чтобы обрезать все, что находится за пределами этой формы; он должен быть в самом нижнем положении, чтобы это работало. Готовую иконку смотрите на Рис. 10.1.

Это отрывок из Руководства по Sketch, на 376 страницах которого вы узнаете все, что вам нужно знать о Sketch.

Вам понравятся эти сообщения о Sketch…

10 советов по созданию идеальных иконок, нарисованных от руки

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

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

Это 10 советов по созданию идеальных рисованных иконок —

1. Всегда планируйте наперед:

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

2. Нарисуйте нарисованные от руки значки:

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

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

3. Отсканируйте нарисованный от руки эскиз и импровизируйте мелкие детали:

Когда вы рисуете нарисованный от руки значок, отсканируйте его на компьютер с разрешением около 600 dpi. Убедитесь, что все мелкие детали и штрихи пера видны, а также резкие в полном размере. Теперь импортируйте изображение в Adobe Photoshop и при необходимости поверните изображение. Теперь следующим шагом будет преобразование изображения эскиза в оттенки серого.Для этого перейдите в режим изображения и выберите оттенки серого. Теперь увеличьте уровни контрастности, используя функцию уровней. Убедитесь, что вы отметили опцию предварительного просмотра. Теперь переместите линию уровней вправо, пока линии не станут красивыми и насыщенными. Затем переместите правый маркер влево, пока страница не станет белой. Это не повлияет на линии эскиза. Сотрите все ненужные или ненужные биты с помощью Eraser Tool.

Adobe Illustrator имеет замечательную функцию, известную как Live Trace. Live Trace полезен, поскольку он преобразует растровые изображения в векторные контуры и формы.Разнообразие опций позволяет пользователю точно контролировать окончательное изображение. Он идеально подходит для преобразования черно-белых изображений в векторные. После завершения трассировки сбоку от кнопки Live Trace появится стрелка. Нажмите на эту кнопку и выберите кнопку выбора параметров трассировки. На выбор доступны различные настройки, и то, что подходит вашему рисунку, будет зависеть от стиля рисования и отсканированного изображения. Продолжайте экспериментировать с разными стилями, пока не найдете идеальный.Раздел предварительного просмотра можно использовать для просмотра результатов внесенных вами корректировок значений.

С помощью Live Trace в иллюстрацию можно внести множество изменений. Вы можете увеличить количество черных линий, которые должен распознать Illustrator, уменьшив значение Минимальная длина обводки, Угол угла и Минимальная площадь. Это поможет Illustrator создать больше линий. Вы также можете преобразовать изображение в черно-белое и в оттенках серого. Однако использование оттенков серого предоставит вам меньше возможностей. Весь логотип, сделанный вручную, имел бы более мягкую эстетику.С другой стороны, черно-белый режим позволяет больше градаций. Одна из необходимых практик — держать кнопку «Избегать белых» отмеченной.

5. В качестве альтернативы используйте инструмент «Перо»:

Live Trace может привести к созданию слишком большого количества слоев, и время от времени наведение курсора на них может быть затруднительным. В таких случаях вы можете положиться на инструмент «Перо». Инструмент «Перо» дает больший контроль над нарисованным от руки значком. Вы можете использовать точки на монтажной области. Illustrator соединит эти точки. Вы также можете управлять кривыми точек с помощью кривых Безье.Для этого вы должны импортировать свое изображение в Illustrator с помощью монтажной области. Во-первых, поместите иллюстрацию на слой с помощью панели «Слои». Убедитесь, что этот слой заблокирован. Во-вторых, создайте новый слой для группировки вещей. В зависимости от количества фигур создайте необходимое количество слоев. Используйте разные цвета, чтобы различать их.

Начните с того, что опустите точку на вершине с помощью Pen Tool. Хотя вы можете добавить много точек с помощью инструмента «Перо», лучше всего использовать как можно меньше точек.Это помогает логотипу оставаться гладким. Используйте точки, где форма меняется или изгибается. Сначала сделайте грубый путь, потому что вы можете вернуться и уточнить эти точки с помощью Direct Select Tool.

6. Будьте проще:

Иконки, нарисованные вручную, имеют непосредственное преимущество: вы можете полагаться на более простые формы и формы в дизайне. Это строительные блоки для любых логотипов и значков. Когда мы сравниваем это с компьютерными логотипами, у вас есть возможность выбрать сложные формы в качестве их основной отправной точки.Иконки, нарисованные вручную, должны отражать простоту и минимализм. Следовательно, использование базовых форм — непростой выход, это необходимость часа в рисованных иконках. Это не значит, что значки будут скучными или менее креативными.

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

7. Добавьте глубину, используя абстракцию:

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

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

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

8. Человеческое прикосновение:

Цель создания нарисованного от руки значка — отличить его от компьютерных значков.Следовательно, то же самое должно отражаться в дизайне ваших рисованных иконок. Должны быть видны различия между иконкой, нарисованной от руки и иконкой, созданной компьютером. Нарисованный от руки значок должен выглядеть так, будто в его дизайн вложено много усилий, и он сделан с особой тщательностью. Когда это отражается в создаваемых вами значках, аудитория также воспринимает значки с большим уважением и признательностью. Убедитесь, что усилие за каждым значком одинаково, хотя бы визуально, если не на самом деле. Штрихи, линии и кривые каждого значка должны что-то сообщать об этом значке.

9. Добавьте визуальную текстуру:

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

10. Использование единого элемента дизайна во всех значках:

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

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

Как создавать значки • Приложение Concepts • Бесконечное гибкое создание эскизов

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

Создание графики руки

Если вы хотите быстро начать работу с этим руководством, загрузите этот шаблон Concepts на свой iPad или iPhone.В нем есть инструменты и настройки, необходимые для создания этих значков. Коснитесь ссылки, выберите «Открыть в …» и выберите «Основные понятия». Он откроется прямо в приложении для вас.

1. Импортируйте фотографию своей руки. Дважды нажмите кнопку «Импорт» на холсте, чтобы открыть меню импорта. Выберите «Камера» и сделайте снимок своей руки. Попробуйте запечатлеть это так, чтобы это выглядело культовым.

Дважды нажмите кнопку «Импорт» в качестве ярлыка, чтобы открыть меню, выберите «Камера» и сделайте снимок своей руки.

2. Откройте меню «Слои» и коснитесь миниатюры изображения, чтобы открыть всплывающее окно выбора слоя. Используйте ползунок, чтобы уменьшить непрозрачность изображения.

Уменьшите непрозрачность фотографии с помощью ползунка во всплывающем окне слоя.

3. Создайте новый слой над слоем изображения и выберите кисть с фиксированной шириной на колесе инструментов. Эта кисть сделает контур вашего рисунка максимально простым.

Выберите кисть с фиксированной шириной и создайте новый слой над изображением.

4. Нанесите на кисть разглаживание. 0% дает четкую линию, 100% создает идеально прямые линии. Установите сглаживание примерно на 50%.

Коснитесь значка сглаживания на внутреннем кольце колесика инструментов и установите одну из предустановок с помощью ползунка.

5. Обведите контур руки на холсте.

Необязательно указывать точную схему.

6. Теперь найдите инструмент «Сдвиг» на колесе инструментов и смещайте или выдвигайте те части линий, которые кажутся неуместными.Смещение на линии будет тянуть ее, в то время как смещение с любой стороны линии будет толкать ее.

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

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

Эта рука выглядит довольно гладкой.

8. Для небольших настроек увеличьте изображение. Вы заметите, что размер инструмента «Смещение» остается того же размера независимо от масштаба, поэтому его легко редактировать, не настраивая инструмент.

Инструмент смещения остается того же размера даже при увеличении изображения.

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

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

10. Рука выглядит немного шире для значка, поэтому мы его немного уменьшим. Выберите инструмент Slice и установите его на 0 точек, чтобы сделать надрез в вашей линии.(Увеличьте инструмент, чтобы стереть, или меньше, чтобы надрезать.) Выберите срезанный большой палец и снова соедините его пальцами под большим углом.

При нулевом значении инструмента «Срез» будет казаться, что он вообще ничего не делает, он просто выглядит как крошечная красная точка. Но он разрезал ваш план на две отдельные части.

11. Если вам нужно обрезать концы линий, увеличьте размер инструмента «Срез» и сотрите их.

Удаление излишков в нижней части руки.

12.Чтобы придать контуру направление, добавьте линию ладони. Нарисуйте кривую ручкой фиксированной ширины. Вы можете активировать Snap в меню Precision, чтобы помочь вам выровнять линии. Продолжайте и улучшайте свою графику, пока она вам не понравится.

При активном Snap в меню «Точность» выберите линию ладони и защелкните ее. Если включена привязка к ключевым точкам, вы можете увидеть несколько серых «маркеров привязки». Нажмите на один, чтобы привязаться к этому месту, или проигнорируйте их и разместите от руки.

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

Выберите изображение и сожмите его. Если он становится слишком толстым, отмените его касанием двумя пальцами и попробуйте вместо этого использовать «Растягивание».

Выглядит хорошо!

Макет кнопки

1.Теперь давайте смоделируем кнопочную часть значка. Мы сделаем это, добавив кружок вокруг изображения вашей руки. Откройте библиотеку объектов Basic Shapes и перетащите ее по кругу. Измените размер и разместите его вокруг изображения.

Коснитесь меню «Импорт» один раз, чтобы отобразить объекты. Если Basic Shapes не является вашей активной библиотекой, нажмите «Еще», чтобы открыть Object Market и найти его. Затем коснитесь или перетащите круг на холст.

2. Выберите контур круга, откройте цветовое колесо и выберите средний серый цвет.Вот и все, что касается первой кнопки.

Кнопка для левостороннего интерфейса готова.

3. Чтобы создать вторую кнопку, выделите всю графику и нажмите «Дублировать» во всплывающем окне. Отодвиньте его в сторону, затем нажмите кнопку «Зеркало», чтобы перевернуть.

Правая кнопка точно такая же, только зеркальная.

4. Превратим ее в «активную» кнопку. Нажмите и удерживайте второй кружок, выберите черный цвет в качестве цвета, затем настройте толщину линии на большую толщину.

«Активный» правый значок готов к передаче в пользовательский интерфейс.

5. Если вам нужен прозрачный фон для значка, перейдите в «Настройки» и выберите «Прозрачный» среди типов бумаги.

Найдите прозрачный фон в «Настройки» -> «Рабочая область» -> «Фон».

6. Чтобы экспортировать по одному значку за раз, просто выберите значок и нажмите + удерживайте + перетащите выделенный фрагмент. Поднимите панель команд и поместите ее в файлы или другое приложение.

No related posts.