Нарисовать иконку: Нарисовать иконку — Kwork

Как нарисовать правильную иконку? | 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. Акцент на настроение (мы же хотим нравиться пользователю, так почему бы не порадовать его улыбкой игрового персонажа или, если игра — хоррор, наоборот, не попробовать его напугать).

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

Как нарисовать офисные иконки в Иллюстраторе

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

Пример HTML-страницы

Рисуем базовые фигуры

Начнем с создания документа в Adobe Illustrator со следующими параметрами:

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

Начнем с чашки. Создайте два прямоугольника с толщиной обводки в 4 pt при помощи инструмента Rectangle/Прямоугольник (M). Размер первого прямоугольника — 48x51px, второго — 48×48 px.

Теперь нарисуем ручку для кружки. Создайте ее из трех прямоугольников, объединив которые получится фигура буквой C. Затем объедините все три прямоугольника инструментом Shape Builder/Создание фигур (Shift+M) или в палитре Pathfinder/Обработка контура. Скруглите углы при помощи функции Живые углы для ручки и нижней части чашки.

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

На очереди стакан с карандашами. Создайте прямоугольник размером 43x60px и еще один размером  50x7px. Составьте из них стакан. Для создания карандаша нарисуйте прямоугольник размером 70x7px и еще один поменьше в качестве ластика (скруглите два правых угла). Нарисуем еще один карандаш — с грифом, а также линейку из прямоугольника размером 100x15px. Нарисуйте два деления инструментом Pen/Перо (P) и дублируйте их на всю линейку. Поверните объекты, чтобы поместить их в стакан, и скруглите углы нижней части стакана.

Теперь возьмемся за создание папки.

Создайте прямоугольник размером 14x67px и скруглите нижние два угла при помощи инструмента Direct Selection/Прямое выделение (A). Копируйте фигуру и вставьте копию на передний план (CTRL+C & CRTL+F). Создайте еще один прямоугольник (83x50px) и выровняйте его по первому, как показано ниже. Выделите оба прямоугольника и, при помощи инструмента Shape Builder/Создание фигур (Shift+M) сотрите левую часть. Скруглите нижний левый угол.

Продолжаем работать над папкой. Создайте прямоугольник, который станет задней стенкой папки. Объедините его с левой фигурой (копию которой мы создали в прошлом шаге) в палитре Pathfinder/Обработка контура. Затем пошлите получившуюся фигуру на задний план. Немного скруглите верхние углы фигуры. Инструментом Pen/Перо добавьте несколько опорных точек, чтобы создать форму папки как на картинке ниже. Для завершения инструментом Pen/Перо нарисуйте линии, которые украсят папку.

Перейдем к созданию компьютера.

Нарисуйте прямоугольник размером 75x50px и скруглите углы. Инструментом Line/Отрезок линии (\) проведите черту, отделяющую четверт прямоугольника снизу. Инструментом Shape Builder/Создание фигур (shift+M) разделите прямоугольник на две разные фигуры по линии. Теперь нарисуем подставку из прямоугольника размером 18x20px. Трансформируйте его при помощи инструмента Free Transform/Свободная трансформация (E). И простым линиями создайте плоскую подставку и несколько строк на мониторе.

Создание ноутбука начнем с прямоугольника размером 80x10px  со скругленными углами. Нарисуйте еще один прямоугольник шириной в 25 px (высота не важна). Выделите оба прямоугольника и нажмите Minus Front/Минус верхний в палитре Pathfinder/Обработка контура. Снова скруглите углы.

На заднем плане создайте новый прямоугольник (69x51px, скругленные углы). Создайте еще один прямоугольник (61x51px, скругленные углы), который будет экраном ноутбука. И наконец нарисуйте несколько прямых линий на самом мониторе.

Рисуем смартфон. Начнем с прямоугольника размером 37x66px и скругленными углами. Нарисуем еще один прямоугольник (23x39px), который будет экраном, и линию с круглыми концами, которая будет динамиком (используйте инструмент Pen/Перо). Наконец инструментом Еllipse/Эллипс (L) нарисуйте маленький круг с радиусом в 2px (это кнопка), и добавьте несколько строк на экран смартфона.

Возьмемся за принтер. Начинаем с прямоугольника размером 75x45px со скругленными углами. Нарисуйте еще один прямоугольник размером 40x31px — это будет распечатанный лист. Нарисуйте прямоугольник размером 25x31px — это будет вставленный в принтер лист бумаги. «Загните» уголок этого листа кликнув инструментом Direct Selection/Прямое выделение (A) по верхней правой точке, удерживая Alt.

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

Теперь нарисуем обычную бумагу. Начните с прямоугольника размером 55x70px, затем дублируйте его (Ctrl+C> Ctrl+B). Переместите переднюю копию ниже и левее, создайте для нее загнутый уголок, как в прошлом шаге, и нарисуйте несколько строк.

Последняя иконка — книга. Создайте прямоугольник размером 50x10pх и скруглите два левых угла. Дублируйте фигуру. Создайте еще один прямоугольник размером 50x70px — это будет обложка. Выровняйте обложку по низу предыдущих фигур, и инструментом Shape Builder/Создание фигур (Shift+M) удалите нижнюю часть (дублированную фигуру и низ обложки. Скруглите нижний левый угол обложки.

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

Иконки готовы!

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

Закрасьте иконки следующим образом:

Автор урока HECTOR HEREDIA

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

Уроки Illistrator. Уроки Adobe Illustrator. Уроки Иллюстратора. Adobe illustrator уроки. Уроки adobe illustrator для начинающих. Adobe illustrator уроки на русском. Видео уроки adobe illustrator. Adobe illustrator уроки для начинающих на русском. Adobe illustrator уроки с нуля. Уроки adobe illustrator cc для начинающих. Adobe illustrator cc 2019 уроки. Уроки adobe illustrator скачать торрент. Уроки по adobe illustrator cc. Adobe illustrator уроки вектор гайд. Уроки рисования adobe illustrator. Adobe illustrator уроки вектор гайд. Уроки векторной графики в adobe illustrator. Adobe illustrator cc 2018 уроки. Adobe illustrator логотип уроки. Уроки adobe illustrator cc 2018 для начинающих. Бесплатные уроки adobe illustrator. Урок 01 что такое adobe illustrator. Уроки работы в adobe illustrator. Adobe illustrator урок. Видео уроки adobe illustrator торрент. Adobe illustrator видео уроки скачать торрент. Adobe illustrator 3d уроки. Уроки adobe illustrator cc 2019 на русском. Интерфейс в adobe illustrator cc 2019 уроки. Уроки иллюстрация adobe illustrator. Adobe illustrator уроки рисование плашками.

Пример HTML-страницы

дизайнов, тем, шаблонов и загружаемых графических элементов Draw Icons на Dribbble

1. Просмотр значков Crypto

   Иконки шифрования

2. Значок просмотра

3. Посмотреть вазу

4. Посмотреть 3 значка

   3 иконки

5. Просмотр эскизов нового набора

   Новый набор эскизов

6. Просмотр значков рисования вручную для приборной панели

   Значки для рисования от руки для приборной панели

7. Просмотр классных значков приложений

   Классные значки приложений

8. Посмотреть иллюстрированные рисованные иконки для приложения

   Нарисованные от руки иконки для приложения

9. Посмотреть дудлы

   Каракули

10. Просмотр набора значков инструментов рисования

    Набор значков инструментов рисования

11. Меню просмотра значков

    Меню значков

12. Просмотр Vertbase — Иконки

    Vertbase — иконки

13. Посмотреть векторный вызов Хэллоуина

    Векторный вызов Хэллоуина

14. Посмотреть альфа-иконки / дизайн персонажей

    Альфа-иконки / дизайн персонажей

15. Посмотреть векторный характер плоского дизайна, простой 2D-аватар

    Иллюстрация векторного персонажа в плоском дизайне, простой 2D-аватар

16. Посмотреть новый набор иконок для частного клиента

    Новый набор иконок для частного клиента

17. Посмотреть основы дизайна иконок

    Основы дизайна иконок

18. Просмотр новых эскизов в стиле рисования пером

    Новые эскизы в стиле рисования пером

19. Посмотреть концепцию иконы потомства

    Концепция иконы Procreate

20. Посмотреть как значки Doodle

    Значки Like a Doodle

21. Просмотр иконок Super Naive Drawings

    Иконки Super Naive Drawings

22. Посмотреть обратно в школу — набор иконок

    Снова в школу — набор иконок

23. Просмотр элементов инфографики

    Элементы инфографики

24. Посмотреть Ce Bude WIP

    Ce Bude WIP

Зарегистрируйтесь, чтобы продолжить или войдите

Загружается еще…

Руководство для начинающих по рисованию иконок | Medium

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

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

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

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

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

Итак, что именно я имею в виду, когда говорю иконки ? Значок — это графический символ в цифровом мире, представляющий объект или функцию.

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

А почему для нас так важны системные значки?

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

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

Теперь, когда мы находимся на одной странице, я думаю, пришло время перейти к разделу «С чего, черт возьми, мне начать?»

Шаг 1: Знакомство со стилями значков

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

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

Контурные значки
Также известные как линейные значки, они простые, чистые и современные, и часто сочетаются с плавные толстые линии. Этот стиль тесно связан с Apple OS.

Значки с глифами
Монохромные значки состоят из простых форм и легко узнаваемы. Google использует стиль значков глифов в качестве основного стиля значков в Material Design.

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

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

Шаг 2: выберите размер значка

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

Самый распространенный размер значка — 24px , это почти значение по умолчанию во всех крупных дизайн-системах, и этот размер отлично работает независимо от того, разрабатываете ли вы дизайн для веб-сайта или для мобильных устройств. Обычно это мой размер. Чтобы помочь вам принять правильное решение, я создал эту памятку, которая должна дать вам представление об идеальном размере значка на основе компонентов, которые вы уже установили.

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

Шаг 3. Настройка сетки

Чтобы значки выглядели четкими, выровненными и цельными, рекомендуется использовать сетку значков. Есть несколько типов сеток, и моя основана на Google Material Design.

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

• Пиксельная сетка — Промышленный стандарт обычно составляет 1 пиксель. Это помогает идеально выровнять фигуры по одному пикселю и правильно измерить расстояние между линиями и фигурами. Делая это, мы гарантируем, что значок не будет пиксельным и идеально выровнен.
• Область обрезки — Область обрезки — это область, в которую не следует помещать какой-либо контент; пространство, оставшееся внутри, называется безопасной зоной.
• Keyline Shapes — Чертежи трех основных фигур: прямоугольника, квадрата и круга. Это основные геометрические фигуры, которые мы будем использовать для создания значков, и эти чертежи помогут нам выровнять все значки в одинаковое положение и размер в сетке.
• Ортогональный — Ортогональные линии — еще один инструмент, который помогает нам выравнивать значки под разными углами, например, на 45* или 90*.

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

Шаг 4. Найдите свою метафору

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

• Значки сходства — когда вы копируете форму значка из реального объекта, например. , корзина для удаления.
• Справочные значки — эти значки вдохновлены ссылками или аналогиями с физическими предметами или процессами, например, значок подарка для кода купона.

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

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

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

Так как же все-таки найти вдохновение?

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

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

Пример значка архива: от метафоры к значку

Шаг 5: Создайте свой значок с помощью геометрических фигур

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

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

Нарисуем дискету вместе!

Следуя нашим предыдущим шагам, на данный момент я уже выбрал стиль для своих иконок (контур), я определил базовый размер (24px, как обычно 🤷‍♀️), моя сетка готов, и я погуглил и сохранил несколько изображений для подобия , теперь я готов начать рисовать.

1. Упрощение — Я проделываю в уме упражнение по упрощению, о котором упоминал ранее — я вижу, что после упрощения дискета состоит из одного большого квадрата и двух прямоугольников.
2. Эксперимент — Затем я свободно рисую нужные мне фигуры; Я не сосредотачиваюсь на деталях, потому что сначала хочу получить общее представление о вещах и быстро поэкспериментировать с различными структурами и идеями.
3. Выравнивание — После того, как я примирился с тем, что у меня есть, я выравниваю значок по сетке и убеждаюсь, что он точно соответствует пикселям с ключевыми формами; если нет, я корректирую соответственно.
4. Тонкая настройка — Добавление мелких деталей для придания большей выразительности, сглаживание при необходимости и проверка моего результата без сетки и в небольшом масштабе, чтобы убедиться, что он работает в нормальном размере.

Во-хо! Если вы дошли до этого места и следовали всем инструкциям, я, вероятно, могу поздравить вас с рисованием вашей первой иконки! 👏👏👏

Итак, давайте посмотрим, как просто рисовать иконки:

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