Стартовала открытая регистрация сайтов в доменной зоне .РУС
Previous
выбрать за меня
Yota выпустила продукт для малого и среднего бизнеса
Next
веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Инструкция по созданию красивых иконок

Автор: Ия Пфанштиль24.05.2016

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

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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



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

Качественные наборы иконок отвечают следующим требованиям: форма, эстетическое единство и узнаваемость.

Форма

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

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

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



веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Теперь после знакомства с азами, перейдем к инструкции из 6 шагов по созданию эффективной иконки.

Шаг 1. Сетка

Для разных иконок подходят сетки разного размера. В нашем примере рассмотрим сетку 32х32 пикселя, которая в дальнейшем поможет создать основные формы для нашего дизайна.

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Часть формы иконки – основная фигура и ориентация. Если вы нарисуете линию по краям иконки, у вас получится определенная фигура: квадрат, круг, треугольник, горизонтальный прямоугольник, вертикальный прямоугольник или диагональный прямоугольник.

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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



веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

Шаг 2. Простые геометрические формы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Шаг 3. Пиксели

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

Наклоны

В большинстве случаев выбирайте наклоны 45°, при которых пиксели выстраиваются ровно по диагонали, что выглядит привлекательно. Если придерживаться этого правила не получается, делите наклон 45° на два: 22,5°, 11,25° и так далее, или выбирайте наклон кратный 15°. Принимайте решение в зависимости от конкретного случая.

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Изгибы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Углы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Расчет пикселей

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

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

Ширина линий

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Преимущества линий шириной 2 и 4 пикселя – кратность двум, что позволяет им хорошо выглядеть в разном масштабе. Старайтесь избегать слишком тонких линий, особенно при создании символьных и плоских иконок. Для создания формы лучше полагаться на свет и тень, а не на линии.

Шаг 4. Общие элементы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Шаг 5. Детали

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

Шаг 6. Уникальность

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

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

веб дизайн, креатив, иконки, web-дизайн, дизайн, советы

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

Реакция на статью
поделюсь
0%
интересно
400%
полезно
800%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Стараюсь радовать читателей полезным и качественным контентом.
Комментарии
Оставить отзыв

    You must log in to post a comment