Опытные чуваки могут вообще не рисовать скетчей, а сделать себе список образов и сразу работать с вариациями.
Если вы рисуете иконки под заказ, рисуйте скетчи, так избежите лишней работы при отрисовке, показав предварительно свои образы заказчику.
Шаг четвертый: Размер
Это вообще самое важное: определиться с минимальным размером.
Для чего это нужно? Если вы хотите, чтобы ваши иконки были с четкими краями, pixel perfect и масштабировались правильно, нужно определиться с размером и толщиной объектов в самом маленьком размере (x1). Рекомендую использовать четные размеры иконки.
Шаг пятый: Процес
Создайте документ со значениями
Где Spacing - расстояние между артбордами.
Width и Height - высота и ширина артборда.
Raster Effects - разрешение (ppi) для иконок подойдет 72
Align New Objects… - эта галочка отвечает за привязку точек к пиксельной сетке. Советую включать, но в ходе работы, ее всегда можно выключить.
- Выберите первый артборд, в нем будет делать все иконки, а готовые будет вставлять на соседние артборды.
- Создайте квадрат под размер рабочей области.
- Расставьте направляющие, чтобы облегчить процесс рисования.
- Используйте Pixel Preview
- Отмечайте готовые иконки в списке образов, так наглядно можно следить за своим прогрессом.
- Придерживайтесь советов и прошлой статьи о .
- Не делайте свой первый сэт слишком большим, можно быстро устать и бросить это дело на половине. Нормальной скоростью будет около 20 иконок в день, потом они могут быстро надоесть…
- Оформите исходник, и не забудьте навести порядок в слоях, подготовить файл для фотошопа и sketch например.
- Подготовьте шот для dribbble и behance, оформите пост для социальных сетей. Это лучший пиар для ваших работ и выход на новые заказы. Не забудьте о хэштегах: #design #best #mamalubitmenya #kupiteikonky
Где можно продавать:
graphicriver.net - свободная площадка для торговли любым цифровым контентом.
creativemarket.com - что бы создать здесь аккаунт у вас попросят показать аккаунты на других магазинах и свое порфолио.
thenounproject.com - сайт наверно с самой большой базой иконок, они распространяются на выбор: или бесплатно или за единичный платеж, еще есть функция месячной подписки, но я бы не ставил на этот сервис если вы хотите заработать.
icons8.com - ничего не знаю про этот магазин, если у кого то есть опыт, поделитесь им в комментариях.
Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com . Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.
Три основных составляющих хорошего дизайна иконки
Хорошо разработанные иконки демонстрируют преднамеренный подход к трём основным признакам для любого дизайна – это форма, эстетическое единство и узнаваемость. При разработке нового набора иконок рассмотрим каждый из этих атрибутов по порядку.Я не буду утверждать, что для идеального дизайна требуется всего три составляющих, но этого вполне достаточно для хорошего старта. И так приступим.
Форма
Форма является базовой структурой иконки. Если игнорировать детали и просто рисовать линии, то в целом может получиться неаккуратно, без общей геометричности. Основные геометрические фигуры: круг, квадрат, и треугольник – создают визуально прочную основу для дизайна иконки. Поэтому изначально иконка должна быть создана из простейших форм и только после этого мы добавляем детали, но столько, сколько действительно необходимо для передачи концепции.
Эстетическое единство
Элементы, которые используются при создании одной иконки или наборе иконок, например закруглённые или острые углы определённых размеров (2, 4 или 8 пикселей), толщины линий (2 пикселя или 4 пикселя), стиля (flat, outline), цветовая гамма и т.д., должны быть едиными.Таким образом, эстетическое единство представляет собой набор элементов дизайна, который повторяется во всем сете. Это видно в примере ниже.
Узнаваемость
Узнаваемость является главным критерием, это сущность иконки. Узнаваемость включает в себя те свойства, которые человек обычно ассоциирует с тем или иным объектом, с той или иной идеей, но так же может включать в себя что-то неожиданное – это и создаёт уникальность, например, недоведённая обводка и округлые блики.Это были три основные составляющие эффективного дизайна иконок. Далее мы детально рассмотрим шесть шагов для решения этих задач.
Сетка
Всегда начинайте рисовать иконки в сетке. Я использую сетку 32x32 пикселя, при этом внешние два пикселя оставляю всегда пустыми. Цель этой зоны – создать свободное пространство вокруг иконки. Если вы делаете круглые иконки, то она должна затрагивать все четыре края, без выхода в зону свободного пространства, но порой, чтоб сохранить целостность иконки, какой-то элемент может выходить за пределы круга, как на картинке:Стороны
Квадратные иконки не обязательно должны заходить или касаться всех четырёх сторон. Чтобы сохранить визуальную пропорцию с круглыми и треугольными значками, большинство прямоугольных и квадратных иконок будут выровнены по ключевой средней линии.Сетка нужна лишь для того, чтобы помочь вам сделать значки ровными и последовательными, но если перед вами стоит выбор между тем, чтобы сделать значок красивым или нарушить правила, то нарушайте – но делайте это очень аккуратно.
Геометрические формы
Начните с простых геометрических форм. Даже если значок будет в конечном итоге более органичным, то всё равно начните с простых геометрических форм в Adobe Illustrator. Когда дело доходит до создания иконок, особенно маленьких размеров, то базовые геометрические формы сделают края более точными и позволят быстро регулировать относительный масштаб элементов.Цифры: Края, линии, углы, кривые
Чтобы дизайн не выглядел механическим и скучным, углы, линии, края и кривые должны быть математически точными. Другими словами, следите за цифрами и не пытайтесь нарисовать на глаз и от руки, когда дело касается деталей. Несогласованность в этих элементах может снизить качество иконки.УГЛЫ
В большинстве случаев необходимо придерживаться угла в 45 градусов или кратных ему. Сглаживание угла в 45 градусов не даёт появиться лишним пикселям, таким образом получаем чёткий результат с идеальной диагональю, создавая приятные и узнаваемые очертания для человеческого глаза. Эти очертания объединяют весь сет иконок, а так же создают единство в пределах одного значка. Если ваш дизайн заставляет нарушить правило угла в 45 градусов, то попробуйте сделать его равным 22,5 или 11,25 градусов, так как сглаживание будет более-менее ровными.КРИВЫЕ
Это самые заметные области, которые могут ухудшить качество иконки. Благодаря им можно отличить профессионала от любителя. Так как человеческий глаз способен обнаруживать мелкие неточности, то рисование от руки не поможет вам достичь целей. Положитесь на инструменты, формы и цифры, чтобы создавать кривые.ЗАКРУГЛЕНИЕ УГЛОВ
Радиус закругления углов составляет 2 пикселя. Для иконки 32x32 пикселя такой радиус вполне достаточен, чтобы угол был действительно закруглённым, и при этом не смягчает углы на столько, чтобы округлить дизайн до пузыря. Главное помните, что от выбора радиуса скругления будет зависеть дизайна самого значка.СГЛАЖИВАНИЕ ПИКСЕЛЕЙ
Идеальное выравнивание пикселей имеет важное значение для дизайна иконок маленьких размеров. Сглаживание углов на таких иконках может сделать значок размытым и нечётким. Пространство между линиями, которое не приводится в соответствие с пиксельной сеткой будет сглаживаться и станет нечетким. Как упоминалось выше, 45 градусные углы и кратные им сглаживаются лучше.Однако замечу, что сглаживание становится менее актуальным при больших размерах и на экранах с высоким разрешением, таких как retina дисплей.
ТОЛЩИНА ЛИНИИ
Вообще лучше всего использовать в одной иконке не более двух вариантов толщины линии, но иногда и три варианта просто необходимы. Ваше цель состоит в том, чтобы визуально обеспечить иерархию и разнообразие без разрушения целостности всего сета. Использование более чем трех толщин линий может разрушить структурированность и сплоченность. Что касается самой ширины линии, то лучше брать опять кратные двум и четырём пикселям, их легко масштабировать и делать ровные шаги. Старайтесь избегайте очень тонких линий, особенно в базовых значках и плоских иконках, но это правило не действует, если вы намеренно создаете иконки из тонких линий.Используйте повторяющиеся элементы дизайна и акценты в сетах иконок
Например, Хеммо де Йонг известный голландский дизайнер во всех своих иконках использует повторяющийся элемент - острый угол.Используйте детали и украшения очень аккуратно. Иконка должна быстро сообщать об объекте, идеи или действии. Слишком много маленьких деталей сделают изображение сложным и соответственно менее узнаваемым, особенно при меньших размерах.
Уровень детализации в одной иконке или наборе иконок такой же важный аспект эстетического единства и узнаваемости. Главное правило – минимум деталей, необходимых для передачи смысла иконки.
Сделайте иконку уникальной
Количество талантливых дизайнеров, которые создают высококачественные наборы иконок, многие из которых сейчас доступны бесплатно, растет каждый день в геометрической прогрессии. К сожалению, большинство из них ориентируются на тенденции и стили самых популярных дизайнеров. Поэтому очень важно чтобы ваш дизайн был запоминающимся и действительно уникальным.Все эти простые шаги следует рассматривать как отправную точку, а не как окончательное руководство. После освоения теоретических и технических основ, вы сможете сосредоточить свою энергию на том, чтобы создавать уникальные иконки, которые будут выделяться на общем фоне, благодаря вашему творческому видению.
Сет иконок, которые были использованы на
В том случае, когда пиктограмма будет использоваться на экране. Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.
Начнём с того, что проблема «мягкой» обводки решается настройками контура:
Теперь можно нарисовать что-нибудь. Мне как раз нужна иконка газеты.
Сначала я изучаю изображаемый объект. Пропорции подсказывает гугл:
Особенности подмечаю на том, что есть под рукой:
Возьму для примера первую полосу из архива Нью Йорк Таймс. Сразу подгоняю размер под другие иконки.
Тут важен визуальный вес, а не математические параметры:
Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:
Cmd+k
Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным,
поэтому клавиши и [k] могут быстро затереться:-)
Уже видно, что газета получается «тяжелей» остальных объектов. Немного уменьшаю:
При масштабировании узловые точки вылезают из пиксельной сетки. Вставляю их назад там, где нужно.
Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными
(У меня случайно получилось, что - да. Иначе пришлось бы сделать газету на пиксель шире.)
Вот тут линии противно склеиваются, образуя тёмное пятно. При увеличении этого не видно, а на предыдущем скриншоте сразу бросается в глаза:
Теперь название. В моих иконках все линии одной толщины, поэтому я не могу себе позволить вместо заголовка нарисовать толстую линию. Быстро набрасываю буквы, детали игнорирую:
Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:
Наполняю газету:
Почти готово. Меня смущает количество чернил. Иконка получилась сильно плотней своих соседей. Разряжаю строки, убираю Титаник.
Газета снизу заворачивается. Чтобы усилить этот эффект нужна тень.
Но тень использовать нельзя, так что я придумываю хитрый ход - ставлю нижние строки плотнее к краю газеты,
чтобы около края плотность линий увеличивалась, создавая кажущееся затемнение.
Честно говоря, мне даже просто вот так нравится:
Я ещё подумаю какой вариант выбрать. На сегодня всё.
То есть, можно ли гарантировать, что при качественном отображении 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. Акцент на настроение (мы же хотим нравиться пользователю, так почему бы не порадовать его улыбкой игрового персонажа или, если игра — хоррор, наоборот, не попробовать его напугать).
Также мы подготовили инфографику по тому, как различные издатели подходят к созданию иконок. Приятного просмотра.
Разработчики
программного обеспечения, стараясь не отставать от технологического
прогресса, придумали огромное количество разнообразных, мощных
графических редакторов для разных направлений графики, на разные вкусы,
для разных операционных систем, чего только душе дизайнера или фотографа
не угодно. Про преимущества PhotoShop, CorelDRAW и других, из списка
тяжеловесов, даже и говорить не стоит, про них и так все знают. В них
можно делать очень красивые значки, яркие красочные и реалистичные
такие, которые востребованы в современном обществе. А что же делать тем,
кто предпочитает пиксельную графику и дизайн в стиле ретро в интерфейсе
своей операционной системы?! Вот тут я и озадачился. Лично мне очень не удобно вырисовывать картинку по пикселю в этих монстрах. Мне
потребовался редактор, простой понятный и удобный, пусть и не такой
мощный, но чтобы он умел делать всё, что необходимо для рисования
пиксельных иконок и ничего кроме этого. Что же тогда делать...
Что умеет IconLover?
Создавать значки стандартных размеров, от 16х16 до 256х256 пикселей для разных платформ. Плюс ко всему, размер значка можно изменить вручную, сделать не квадратным, или с разрешением, намного большим 256х256 пикселей.
Старые пиксельные ярлыки для рабочего стола были в основном 16 цветными, размером 16х16 или 32х32 пикселей. Наверное, в те времена других возможностей просто не было, чтобы нарисовать их хотя бы 256 цветными. И я тоже, следуя старой школе, рисую в 32х32/16 цветов формате. Но если понадобится, то всегда можно к нарисованному значку добавить новый, с другим размером или цветностью. Наш редактор это позволяет.
По умолчанию нарисованный значок сохранится в ico расширении, но его можно очень легко экспортировать в другие форматы, в png, xpm, jpeg и многие другие. Нарисованную миниатюру я сохраняю их в ico формате для Windows (может пригодятся), а для Linux конвертирую в png.
Наш редактор позволяет найти все значки на компьютере и сделать удобную библиотеку из них, а потом редактировать и извлекать из неё понравившиеся картинки.
Ещё один важный плюс редактора - создание ярлыков программ из картинок или фотографий. Сейчас покажу пример:
Но чаще всего я рисую обычным способом, карандашом по пикселям. Кроме карандаша, есть и другие инструменты, вы можете их увидеть на последней картинке. Можно выбрать «прозрачную краску».
Что ещё в нём есть интересного? Можно создавать анимированные значки, но это мне пока не требуется.
Такой вот, интересный редактор, который позволяет создать красивые ярлычки для рабочего стола в стиле ретро. Тем, кто ищет похожую программу, или не определился с выбором - очень рекомендую. Может, кому-то нравится другое программное обеспечение - дело вкуса, но главное, чтобы заниматься непосредственно рисованием, а не тратить время на изучение сложного устройства программы, или испытывать постоянный дискомфорт от того, что инструменты неудобные, или разбросаны не понятно где. Надеюсь, что у Вас, уважаемые читатели, с этим проблем нет, и вы не тратите своё драгоценное время впустую, озадаченные вопросом - .
Постепенно буду выкладывать тематические подборки иконок в следующих статьях. А первыми в списке будут миниатюры, посвящённые
Загрузка...