Home › News

От дизайна иконок к созданию шедевров (+ бесплатный PSD)

30.09.2018

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

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

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

Как создать кампанию в warcraft 3. Что нужно для старта.

Введение

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

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

Первые иконки

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

Как вы можете себе представить, это был не самый простой из способов сладить с компьютером, и достаточно хорошо известная компания в США — Xerox — прилагала все усилия, чтобы попытаться решить эту проблему. В том же году они выпустили «Xerox Alto», который стал первым компьютером в истории, который работал, используя графический интерфейс пользователя (GUI для краткости). Не прошло и двух лет, как знаменитый г-н Стив Джобс и его друг Стив Возняк (Steve Wozniak) переняли идеи, разработанные Xerox, и разработали первую в мире коммерческую операционную систему для использования графического интерфейса. И назывлась она Macintosh. Дамы и господа, вот где зародились иконки!

Первые иконки появились в Apple, на Macintosh.

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

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

Советы по дизайну иконок

Простые и лаконичные

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

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

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

Иконка должна представлять действие пользователя.

Согласованность

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

Определите вашу целевую аудиторию

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

Ярче, громче

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

Иконки, придуманные Рамоушн (Ramotion) и Джорджем Глиддоном (George Gliddon) показывают пример того, как иконки должны привлекать внимание

Если вы создаете иконку для приложения, то на нее надо обратить особое внимание. Это ваш способ прорекламировать приложение. Люди обращают внимание в первую очередь на дизайн. У вас может получиться отличное приложение, но люди все равно не станут его покупать, если их не привлечет иконка. Подумайте: зайдете ли вы в магазин, у которого ужасная вывеска? Так и тут: не все захотят побольше узнать о вашем приложении или купить его.

Делайте скетчи – создавайте концепт!

Многие из нас начинали знакомство с искусством с Photoshop’а — он был блокнотом, а мышь — карандашом. Наверняка многие до этого никогда даже не задумывался об эскизах. Но можно с уверенностью сказать: «Вам помогут эскизы». Не нужно быть лучшим в мире иллюстратором, чтобы делать эскизы.

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

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

Изучение практики

Вот выдержка из интервью с талантливым дизайнером иконок Алексом Волковым :

Созданные Волковым иконки. Они демонстрируют прогресс в области дизайна иконок.

Что является самым важным фактором в дизайне иконок?

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

Сколько времени нужно тратить на иконку?

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

Советы

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

Правильно настройте свет

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

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

При визуализации мы можем добавить света и тени, как в реальности.

Красота в деталях

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

Признаки плохой иконки

Использование текста Слишком большое количество объектов на ограниченном пространстве Вы сразу делали дизайн иконки в необходимом размере? Нет? Плохо. Универсальна для всех стран? Например, полицейская машина в России отличается от машины в Англии.

Иконки для приложений

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

Этот пример показывает различные размеры иконок

iPhone устанавливает ограничения и обязательные требования к иконкам. Они должны вписываться в 57 х 57px поле (114 х 114px в высоком разрешении Retina-дисплеев iPhone4). Эти ограничения определяют дизайн, и в результате этого у нас теперь есть большое количество странных и удивительных иконок, которые были основаны на ограничении квадратных иконок в iPhone.

Эти ограничения даже создали новый стиль в дизайне иконок, например эти иконки, созданные Ливии Леонтидис (Livie Leontidis), Рамоушн (Ramotion) и Джеки Трэн Анх (Jackie Tran Anh).

Будущее дизайна иконок

Глядя на путь, который прошел дизайн иконок, мы можем попробовать предсказать, как иконки будут развиваться в будущем, и какие формы они могут принимать. Конечно, будущее иконок в значительной степени зависит не только от основных принципов хорошего дизайна, но и от инструментов, которые используются для их создания. Например, для каждой новой функции, которая добавляется в такие программы, как Photoshop, это могло бы помочь сформировать будущее иконок. Однако основные принципы хорошего дизайна иконки остаются прежними. И тут время представить вам человека, который знает, может быть, больше других о хорошем дизайне иконок — Роб Янофф (Rob Janoff). Роб разработал логотип яблока еще в 70-х. Вот что он говорит о хорошем дизайне.

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

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

«Супербыстрое подключение к Интернету и усовершенствование аппаратного обеспечения, что позволит всемирной паутине выдавать нам информацию в 3D».

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

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

Дополнение

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

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

Посмотрите PSD, и вы увидите, как создается иконка.

Вывод

Не осталось сомнений, что иконки сильно изменились за последние годы, и кто бы мог подумать, что дизайнеры будут тратить столько времени и усилий на такие маленькие иконки размером 16x16px!

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

До следующей встречи, счастливого дизайна!

via