Иконки Обзор.


Содержание материала:

28 бесплатных наборов иконок

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

01. Icons8

Icons8 — набор из 20 тысяч плоских иконок в любых форматах, размерах и цвете! Здесь представлены такие категории, как бизнес, одежда, еда и многие другие. Icons8 можно скачать в виде приложения для Mac или в виде ZIP-архива .

02. Freepik

Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI , .EPS и .SVG .

03. Iconfinder

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

04. 195 flat flag PSD icons

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

05. Metro UI Icon Set

Если вы фанат Windows 8 , то вам стоит познакомиться с этим бесплатным набором иконок. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.

06. Modern UI Icons

Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS . Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone .

07. 350 pixel perfect icons

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

08. 80 mini icons

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

09. Simple and practical web icon vector graphic

Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.

10. Free flat icons

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

11. Mono icons

Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.

12. Metrize icons

Бесплатная коллекция в стиле Metro , которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD , SVG , ESP и AI , но также и веб-шрифты.

13. Tab Bar Icons iOS 7

Элегантный набор иконок, разработанных под вдохновением от iOS 7 , который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD , AI и ESP .

14. Chunky Pika Icon Set

Иконки в стиле Pika , созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.

15. Iconic

Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG , SVG , SWC и других форматах, что позволит адаптировать их под собственные дизайны.

16. 44 Shades of Free Icons

Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.

17. Token icon set

Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом .

18. Flat icons (PSD)

Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.

19. Free 32px icons set

Набор, в котором вы найдете иконку PSD любого назначения: Skype , Facebook , Twitter , RSS , чашка кофе, “ лайк ” и многое другое.

20. 48 flat designer icons

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

21. Plex icons set

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

22. Vectory mini free

Набор из более чем 1000 иконок PSD , разработанных командой Icojam . Все они представлены также в формате PNG . Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.

23. Eldorado mini free

Очередная коллекция мини-иконок от Icojam , в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.

24. 2600 Flag Icon Set

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

25. Social icons

Этот набор предлагает 150 монохромных социальных иконок, которые разрабатывались с учетом простоты. Все они представлены в форматах AI , EPS , PNG и SVG , и их можно использовать в любых проектах абсолютно бесплатно.

26. Free Furry Cushions Social Icons Set

Завели себе « пушистый » сайт? Тогда скачайте « пушистые » PSD иконки социальных сетей точно заинтересуют вас!

27. Social media icons pack

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

28. Color stroked icon set

Этот набор иконок социальных сетей включает в себя 22 бесплатные рисованные иконки. Среди них представлены иконки Delicious , Flickr , Twitter , Digg .

Данная публикация представляет собой перевод статьи « 28 sets of free icons » , подготовленной дружной командой проекта Интернет-технологии.ру

5 советов по грамотному использованию иконок в интерфейсе

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

Даже после того, как вы определились с форматом (SVG или иконочный шрифт?) и создали нужный набор, могут возникнуть определённые вопросы.

Вот прекрасный пример:

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

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

1. Определитесь с форматом иконок

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

Вне зависимости от ваших предпочтений, выравнивание иконок сильно зависит от выбранного формата. Допустим, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если, конечно, вы не сделали их большими с целью дальнейшего уменьшения при помощи background-size ). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

9 ноября в 10:00, Ульяновск, 500–1600 ₽

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

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

2. Используйте иконки одинакового размера


Рассмотрим идеальную ситуацию: все иконки квадратные и одного размера, 100х100. Мы знаем размеры иконок, что существенно упрощает процесс выравнивания.

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

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

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

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

3. Размер шрифта должен подходить к размеру иконок

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

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

Топ-пост этого месяца:  Особенности взаимодействия React Router и Components возможные проблемы и их решение

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

4. Точно настраивайте внешний вид с помощью CSS

Есть один точный и простой способ выравнивания иконок в тексте:

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

5. Используйте классы для отдельных иконок

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

Так намного лучше!

Заключение

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

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

4 сайта с бесплатными иконками

За все в мире нужно платить, а иногда нет.

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

Icon8

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

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

  • Размер иконки — 100×100
  • Формат — PSD
  • Если в коммерческом проекте используете иконку, нужно поставить линк на сайт

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

Если на сайте нет нужной иконки, ее можно попросить сделать. Заполняете заявку, отправляете на голосование. У них там демократия: побеждает иконка, которая наберет больше голосов. Но демократию можно обойти — заплатите 50 баксов и вам нарисуют все что захотите.

FlatIcon

На сайте 637 тысяч бесплатных иконок в высоком разрешении. Вводите в поисковой строке запрос и выбирайте.

Форматы: SVG, PNG, PSD, EPS.

  • 192 тысячи иконок останутся недоступными
  • Иконки нельзя использовать в коммерческих проектах. Но это никто не контролирует

Подписка стоит 620 рублей в месяц.

Noun Project

1 миллион иконок для всего. Вводите в поисковой строке сферу и выбирайте. Чтобы что-то скачать нужно зарегистрироваться.

Форматы: PNG, SVG.

  • Иконки можно использовать в коммерческих проектах с указанием авторства

Снять ограничение можно месячной подпиской. Она стоит 620 рублей.

Icon Finder

На сайте 2,5 миллиона иконок. Icon Finder работает по аналогии с другими агрегаторами: вводите запрос в поисковую строку и выбираете иконку.

Форматы: SVG, PNG.

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

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

Авторское право

Каждая иконка — это труд отдельного человека или команды. Использовать иконки в коммерческих проектах и не платить можно. Но так вы нарушаете авторское право.

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

Обзор Icon Constructor — программы для создания иконок

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

Icon Constructor, программа от компании «Сибентал», предназначена как раз для создания всевозможных иконок. «Ну и зачем мне отдельная программа? — спросит пользователь. — Я и в Photoshop, Paint или любом другом редакторе нарисую. Формат-то открытый!» С одной стороны, это верно, но, с другой стороны, удобно ли? Icon Constructor позволяет не только быстро уменьшить рисунок до нужных размеров, но и наложить фильтры, применить стили, прозрачность — все это с предпросмотром в реальном времени.

Полная версия программы стоит 150 рублей, триал-версия рассчитана на 15 дней работы, плюс на всех созданных иконках будет надпись TRIAL.

Стандартная процедура создания иконки

При запуске программы предлагается выбрать один из шести режимов работы. В принципе, переключиться можно между ними и позднее, и, кроме места сохранения результатов, серьезно они ничем не отличаются (за исключением режима AIM Buddy Icon, где урезаны возможности по изменению размера готовых значков по причине ненужности).

Выбрав нужный режим, можно начать работу. В рамке Select Image Region загружаем исходное фото, из которого будем делать иконку. Что обрадовало: выбор не ограничен обычными BMP, GIF или JPG; можно загрузить также кадр из фильма или SWF-флешки.

При этом есть возможность изображение немного отредактировать: повернуть с шагом девяносто градусов, отзеркалить или применить цветокоррекцию. Арсенал последней на удивление богат: изменение тона (Hue), яркости (Brightness), контраста (Contrast); применение автоуровней и автоконтраста; наложение черно-белого фильтра или сепии.

Добившись нужного качества исходника, вырезаем из него кусок, который и будет собственно иконкой. Способ вырезания (Crop Style) выставляется двумя способами: Normal (обычное выделение, размеры которого можно изменять, потянув за край) и Fixed Size (размер выделения ограничен строго размером иконки, то есть 16х16, 32х32 или 48х48). Для каждого из размеров можно указать свою часть картинки. Для аккуратной работы с деталями есть увеличение от 5 до 400 процентов.

Теперь, когда кусок выбран, можно приступить к его оформлению. В рамке Select Style предлагается на выбор 83 обрамления, плюс около сотни можно найти на официальном сайте, плюс их можно редактировать (опять же в режиме Hue/Brightness/Constrast). Впрочем, стандартных вполне хватает.

Следующий шаг — просмотр того, что получается в итоге. Как уже упоминалось, программа создает иконки трех предустановленных размеров. К каждому из них или всем сразу (иконка All sizes) можно применить наличие или отсутствие рамки из Select Style (Apply Style) и резкость (Sharpen). Настройка уровня резкости находится в меню Tune up advanced settings, может быть как разной для разных иконок, так и одинаковой.

Однако возможности программы этим не ограничиваются. Среди преимуществ можно отметить также возможность работы с альфа-каналом (то есть градиентной прозрачностью). Это позволяет создавать более красивые и органично вписывающиеся в фон иконки. Настройка альфа-канала также находится в меню Tune up advanced settings.

Сохранение иконки

Сохранить иконку можно разными способами.

Save Windows Icon. Файл сохраняется или как .ico (при этом можно выбрать только нужные форматы — то есть сохранить, к примеру, только версию True Color или, наоборот, только 16-цветный вариант), или как изображение в формате JPG, PNG, BMP, GIF или TGA.

Create Email Shortcut. Создается ярлык на e-mail с иконкой. Клик на этом ярлыке вызовет ваш почтовый клиент по умолчанию и откроет заготовку для письма этому адресату. Если выбрать флажок Save to Desktop, ярлык будет помещен на рабочий стол.

Assign icon to Folder. Открывается диалоговое окно с деревом папок, выбрав нужную, присваиваем ей иконку.

Web Shortcut. В открывшемся диалоговом окне нужно ввести ссылку на веб-ресурс и его имя; если нужно, отметить Save to Desktop.

Save Buddy Icon. Дополнительных опций нет, требуется лишь указать место сохранения gif-файла.

Save ICQ User Shortcut. Создается ярлык с номером ICQ, клик на него откроет диалоговое окно с выбранным пользователем. Полезно, если у вас большой список контактов, но работает, к сожалению, только с официальным клиентом (Miranda, QIP и прочие не поддерживаются).

Некоторые нюансы работы

Кадр из видео можно снять только в том случае, если в Media Player, который используется для предпросмотра, выключен режим оверлея. Для этого нужно или выключить DirectDraw в свойствах системы, или, если установлено что-то наподобие ffdshow, разбираться в его настройках. Как вариант — снять скриншот средствами плеера и дальше работать с ним как с обычным JPG.


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

Резюме

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

Иконки: Обзор.

Внимание! Правила темы.

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

[size=2][b]Название:[/b][/size] Указываем оригинальное название.
[B]Описание:[/B] Иконки
[b]Размер:[/b] 72×72
[b]Количество:[/b] 10 шт.
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[size=2][b]Название:[/b][/size] Указываем оригинальное название или описание.
[B]Описание[/B]: Док бары
[b]Количество:[/b] 10 шт.
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[size=2][b]Название:[/b][/size] Указываем оригинальное название или описание.
[B]Описание:[/B] Иконки + Док бары
[b]Количество иконок:[/b] 10 шт.
[b]Размер иконок:[/b] 72×72
[b]Количество док баров:[/b] 3 шт
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[size=2][b]Название:[/b][/size] Указываем оригинальное название или описание.
[B]Описание:[/B] Иконки + Док бары + обои
[b]Количество иконок:[/b] 10 шт.
[b]Размер иконок:[/b] 72×72
[b]Количество док баров:[/b] 3 шт
[b]Количество обоев:[/b] 1 шт
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[spoiler=[SIZE=1][B]Скриншоты[/B][/SIZE]] Картинки[/spoiler]
[spoiler=[SIZE=1][B]Обои[/B][/SIZE]] Картинки[/spoiler]

[size=2][b]Название:[/b][/size] Указываем оригинальное название.
[B]Описание:[/B] Иконки
[b]Размер:[/b] 72×72
[b]Количество:[/b] 3 шт.
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[b][color=»darkblue»]Скачать:[/color][/b] архив.zip (не обязателен)

[size=2][b]Название:[/b][/size] Указываем оригинальное название или описание.
[B]Описание:[/B] Док бары
[b]Количество:[/b] 2 шт.
[b]Ссылка на оригинальную тему:[/b] желательно (ссылкой)
[b]Автор:[/b] Указываем имя автора

[spoiler=[SIZE=1][B]Док бар[/B][/SIZE]] док бары[/spoiler]

[b][color=»darkblue»]Скачать:[/color][/b] архив.zip (не обязателен)

Сообщение отредактировал Pearl — 29.08.18, 14:36

Я хочу заменить сразу все иконки:

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

Как установить иконки?

Скачиваем архив с иконками (или отдельные иконки), распаковываем их в любое место на карте памяти/памяти телефона.
Затем на рабочем столе выбираем иконку, которую нужно сменить, и делаем пальцем долгое нажатие на ней.
Выскочит меню, где помимо прочих надписей, будет пункт СМЕНИТЬ/ЗАМЕНИТЬ, ну или наподобие.
Нажимаем на этот пункт и выбираем из нужной папки, ранее распакованные, иконки.
Этот способ работает на 99% лаунчеров и им можно заменить иконки только на рабочих столах.
Если вы столкнулись с невозможностью смены иконок этим методом, задавайте вопрос по их установке в профильной теме по вашему лаунчеру.

Как установить Док-бар?

Док-бар можно заменить силами стороннего лаунчера.
Эту возможность дают 90% из них.
Подробная информация в профильных темах по Вашему лаунчеру:
Каталог лаунчеров

Где скачать иконки для сайта?

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

Топ-пост этого месяца:  Урок 4. Теория и практика адаптивной верстки. Адаптивная графика

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

Иконки используют по разным сценариям, в зависимости от задачи.

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

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

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

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

Лучшие бесплатные наборы иконок на 2020 год

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

В виде четкого графического представления, иконка естественно устраняет разрыв между веб-приложением и пользователем. Вам не нужны слова — иконка может сказать все за вас. Будь то просто минимальная пиктограмма в линейном стиле, такая как иконки от Swifticons или щедрые и яркие пиктограммы, такие как Material Icons Bundle от Iconshock, скорее всего, ваш пользователь получит правильное сообщение.

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

Линейныеиконки

Linecons представляет собой набор замечательных бесплатных векторных иконок. Набор содержит 48 полностью масштабируемых векторных иконок в контурном стиле. Эти иконки можно использовать при создании веб-и мобильных интерфейсов. Они подойдут к любой тематике сайта или дизайну.

Мы начинаем с самого популярного стиля за последние годы – полые иконки. Они повсюду. Веб-сайты, информационные панели и мобильные приложения заполнены очерченной графикой. Для начала этого пути, взгляните на Mmmicons от Mint. Имея в наличии 500 сортированных деталей представленных в различных стилях, набор преогромен.

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

Сплошные и монохромные значки

В отличие от обрисованных иконок, сплошные — лучшая альтернатива, когда речь идет об интерфейсах с плохой контрастностью или большим количеством контента. Будучи визуально тяжелыми, они легко бросаются в глаза. Кроме того, они отлично подходят для модификаций, так как массивными формами легче манипулировать. Взгляните на IOS 11 UI Elements Vol 1 от Jemis Mali и Interface Icons.

Бесплатные иконки от Jemis Mali поставляется в двух отдельных выпусках, но все же прекрасно сочетаемых. Вместе они охватывают все элементы, необходимые для интерфейсов на основе iOS.

Набор от EverydayTemplate имеет более 200 иконок, представленных в двух стилях, толстых очертаниях и сплошных. Каждый элемент доступен в трех основных форматах: AI, EPS и PNG.

Красочные иконки

Красочные иконки никогда не стареют. В зависимости от тонов и оттенков, которые доминируют в этом году, дизайнеры создают свои бесплатные иконки. Например, Dusk UI Icons и The Color Icons Set используют модную мягкую пастельную палитру, которая просто великолепна.

Dusk UI более замысловатый и утонченный, чем Icon Set от Pixeden, который имеет скромный минималистский подход. Он также игривый и веселый, а второй — деловой и скромный.

Social Media Icons и Radical Science Icons используют традиционную яркую окраску, но с некоторой изюминкой.

Набор от IconBunny порадует вас 14 стилистическими вариантами, включая как красочные, так и монохромные варианты. Каждый значок поставляется в трех форматах: CDR, EPS и PNG.

Иконки в пакете InvisionApp имеют прекрасную художественную атмосферу, очень похожую на маленькие иллюстрации. Художник подготовил иконки в шести форматах — AI, EPS, JPG, PDF, PNG и SVG — и три стилистических варианта — заполненные, плоские и очерченные.

Анимированные иконки

Анимированные иконки занимают особое место в нашей коллекции. Медленно, но верно мы привыкаем к динамическим элементам в интерфейсах, таким как зависание, параллакс и анимированные иконки. The small bundle от Icons8 предназначен для нестатической догмы. Тут вы найдете 60 динамических элементов в элегантном линейном стиле, которые идеально подходят для создания проектов, вдохновленных материальным дизайном.

Как правило, первые форматы, которые приходят на ум, — это PNG, AI, PSD, EPS и Sketch. Однако есть еще два выбора, которые не только релевантны, но и более подходят для многих проектов. Это SVG и WOFF или TTF.

Иконки SVG

Хотя SVG датируется 2000 годом, только недавно он стал популярным благодаря своей способности масштабироваться до любого размера без потери качества. Будучи XML-ориентированным форматом, его можно легко искать, индексировать, сжимать и даже анимировать. Посмотрите:

Simple Icons: пакет ориентирован на бренды. Здесь вы найдете массу известных логотипов, сделанных в четких твердых формах.

Feather Icons: пакет имеет различные иконки, которые выглядят изысканными и утонченными.

Evil Icons: это набор линейных иконок SVG, которые являются многоцелевыми. Хотя он довольно мал, но он может использоваться через Rails, Sprockets, Node.js, Gulp, Grunt и CDN.

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

Иконочные шрифты

Иконочные шрифты замечательны по многим причинам. Во-первых, вы можете устанавливать стили с помощью CSS без Photoshop или любого другого программного обеспечения для редактирования изображений. Графика будет отлично смотреться на любом устройстве любого размера. Это элегантный способ включить иконографию. Хотя решение ограничено отсутствием разнообразия и стилистических выборов. Но для многих проектов этого достаточно. В нашем списке есть несколько веб-шрифтов.

Fontisto — это профессиональный веб-шрифт, который охватывает такие категории, как доступность, валюта, оплата, транспорт, электронная коммерция и другие. Есть более 500 символов.

Jam — это еще один веб-шрифт с огромной коллекцией пиксельных значков. Он имеет 422 предмета, выполненных в тонком стиле. Он разделен на такие группы, как сеть, направления, видео/аудио, текст и социальные сети.

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

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

50 лучших сайтов с красивыми бесплатными иконками

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

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

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

01. Smashing Magazine

Smashing Magazine – один из лучших ресурсов для поиска высококачественных, эксклюзивных значков в различных форматах, в том числе SVG, PSD, PNG . Большинство комплектов не требуют обратной ссылки.

02. Freepik

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


03. Gravual

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

04. Flat Icon

Flat Icon предлагает самую обширную базу бесплатных векторных иконок. Этот ресурс создали те же люди, что Freepik. Уникальность Flat Icon в том, что можно конвертировать иконки в загружаемый шрифт. Выбирать их и сохранять в библиотеке очень просто. Указание источника обязательно.

05. Behance

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

06. Web Design Freebies

Этот сайт забит бесплатными наборами иконок со всех уголков Интернета. На Web Design Freebies легко можно просмотреть сразу все коллекции.

07. Captain Icon

Красивые векторные значки на Captain Icon доступны в форматах: EPS, PSD, PNG, SVG и иконочный шрифт. Можно настроить всё – от цвета до размера. Допускается использование иконок в личных и коммерческих проектах, указание авторства обязательно.

08. Good Stuff No Nonsense

Как следует из названия, на Good Stuff No Nonsense вас ждут лишь качественные иконки и ничего лишнего. Значки нарисованы от руки, бесплатны и не требуют обратной ссылки.

09. DeviantArt

DeviantArt – яркое сообщество художников с почти 200 000 бесплатных иконок, доступных для скачивания на разных условиях. Обратите внимание, что некоторые авторы делятся только с членами сообщества DeviantArt.

10. Dribbble

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

11. Best PSD Freebies

Best PSD Freebies предлагает бесплатно скачать наборы PSD иконок из всей сети непосредственно с их сайта.

12. Iconfinder

На Iconfinder лёгкий поиск иконок. Вы получаете доступ к полумиллиону бесплатных и платных значков. Файлы для загрузки доступны в нескольких размерах и форматах.

13. GraphicBurger

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

14. Designbeep

Чтобы не искать графику по нескольким сайтам, зайдите Designbeep. Здесь вы найдёте наборы иконок с разных ресурсов от Freepik до Behance.

15. PixsHub

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

16. Oxygenna

На Oxygenna вы найдёте уникальные наборы иконок в PNG, PSD и в AI форматах.

17. Dafont

Здесь более 50 простых в использовании иконочных шрифтов. Проверяйте правила использования.

18. Free Goodies for Designers

Free Goodies for Designers – отлично устроенный ресурс, который предлагает наборы PSD, SVG и векторных иконок для всех пользователей.

19. Freebiesbug

Freebiesbug – выбор новейших бесплатных графических элементов на разнообразную тематику.

20. Vecteezy

На Vecteezy в вашем распоряжении почти 60 страниц векторных иконок, наверняка, найдётся идеальный вариант для вашего проекта.

21. Iconmelon

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

22. PixelsMarket

На PixelsMarket вы найдете иконки со всей сети с известных и не очень сайтов.

23. GraphicsFuel

GraphicsFuel предлагает множество красочных коллекций со всего Интернета.

24. Fribly

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

25. Icojam

Очень симпатичные иконки от команды дизайнеров Icojam.

26. Blugraphic

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

27. Icon Shock

Icon Shock – это тысячи бесплатных иконок для личного использования. Чтобы применить картинку в коммерческом проекте, нужно внести разовый платёж.

Топ-пост этого месяца:  Python — популярный язык программирования

28. CSS Author

CSS Author предлагает еженедельные подборки лучших бесплатных иконок в сети.

29. Creative Tail

Хотите свежих иконок? На Creative Tail есть наборы, которых больше нигде не найти.

30. All-Free-Download

All-Free-Download предлагает лёгкий поиск и прямые загрузки PSD, PNG и векторов.

31. Ego Icons

Ego Icons предлагает более 1500 премиальных иконок и 100 бесплатных векторных значков. Посетите также дочерние сайты, кликнув по кнопкам верхней навигационной панели.

32. AlienValley

На AlienValley представлен широкий ассортимент иконок высокого качества в обмен на ваш адрес электронной почты.

33. Dreamstale

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

34. DuckFiles

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

35. 1001 Free Downloads

1001 Free Downloads специализируется на плоских иконках, представленных множеством прекрасных и причудливых вариантов.

36. GraphicsBay

GraphicsBay – отлично организованный сайт с красивыми иконками, удобным поиском и прямой загрузкой.

37. Pixeden

На Pixeden можно искать иконки в нескольких размерах. Здесь широкий выбор от 16х16 до 512х512 в формате PNG.

38. NounProject


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

39. Iconmonstr

Iconmonstr предлагает иконки в нескольких размерах без указания авторства.

40. Fusionplate

На Fusionplate проводят еженедельные обзоры свежих бесплатных иконок.

41. Dryicons

На Dryicons вы найдёте более 5000 красивых иконок в различных форматах и размерах. Для коммерческого использования предлагают оплатить стандартную или расширенную лицензию.

42. Glyphicons

Ресурс Glyphicons для всех, кто ищет минималистские монохромные иконки в формате PNG.

43. MrIcons

MrIcons предлагает большой каталог из более ста тысяч иконок от веб-интерфейса до соцсетей.

44. Entypo

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

45. Endless Icons

На Endless Icons полно простых и элегантных значков доступных для скачивания в формате PNG и SVG.

46. Iconic

Iconic предлагает более 200 иконок в SVG, растровом и шрифтовом форматах.

47. IcoMoon App

IcoMoon App – прекрасная и простая в использовании библиотека, в которой насчитывается более 4000 специально разработанных векторных иконок.

48. Fontello

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

49. IconArchive

IconArchive предлагает молниеносный поиск нужной картинки среди 2443 наборов, насчитывающих 590 918 иконок, многие из которых являются общественным достоянием.

50. Squid Ink

На Squid Ink вы найдёте две тысячи ярких, креативных, масштабируемых векторных иконок. Бесплатный доступ к 50-ти картинкам для использования в личных и коммерческих проектах.

50 сайтов с бесплатными иконками

Месяц назад мы искали иконку для поиска. Кроме Dribbble, Noun Project и Google не догадались, где посмотреть. К счастью, ребята из Canva знают о сайтах с бесплатными иконками — составили список из 50 позиций. Есть из чего выбрать.

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

  1. 1001 Free Downloads . Плоские иконки.
  2. AlienValley . Наборы иконок в обмен на email.
  3. All-Free Download . Векторы, PNG, PSD. Бесплатно.
  4. Behance . Дизайнерские иконки. Придется пофантазировать в плане поиска.
  5. Best PSD Freebies . Бесплатные иконки в PSD.
  6. Blugraphic. PSD, PNG и векторные иконки. Поиск по тегам. Еженедельная подборка бесплатных иконок.
  7. Captain Icon . Форматы: EPS, PSD, PNG, SVG и иконочный шрифт. Можно кастомизировать цвет и размер.
  8. CSS Author . Еженедельные подборки бесплатных иконок.
  9. Creative Tail . Иконки, которых больше нигде нет.
  10. Dafont . 50 иконочных шрифтов. Проверяйте правила использования.
  11. DevianArt . 200 000 иконок. Некоторые художники предпочитают делиться только с участниками DevianArt.
  12. DesignBurger . Наборы иконок от Behance, Freepik и других.
  13. Dreamstale . Бесплатные и иконки премиум-класса. Требуется ссылка на автора.
  14. Duckfiles . Иконки для персонального и коммерческого использования. В свободном доступе.
  15. Dribbble . Иконки для личного и коммерческого использования. Кстати, здесь мы берем иллюстрации для рассылки.
  16. Dryicons . 5 000 иконок, 77 наборов.
  17. Ego Icons . 1500 премиальных иконок и 100 бесплатных векторов. Посетите и дочерние сайты.
  18. Entypo . Иконки 20×20 в SVG. Требуется атрибуция.
  19. Endless Icons . PNG и SVG.
  20. Flat Icon . Форматы: SVG, EPS, PSD or PNG. Иконки можно скачать в виде шрифта. Обратная ссылка обязательна.
  21. Free Goodie For Designers . PSD, SVG и векторные иконки.
  22. Freebiesbug . Бесплатные PSD.
  23. Freepik . Форматы: PNG, EPS, SVG. Требуется указание автора.
  24. Fontello . Иконки в SVG. Выделите, чтобы скачать в виде шрифта
  25. Fribly . Наборы иконок от разных дизайнеров.
  26. Fusionplate . Еженедельные обзоры бесплатных наборов.
  27. Glyphicons . PNG. Минимализм, монохром.
  28. Good Stuff No Nonsense . Нарисованы от руки. Не требуется обратная ссылка.
  29. GraphicBurger . Если ищете милые иконки, вам сюда. Прямая загрузка, несколько форматов и размеров.
  30. GraphicsFuel . Бесплатные иконки.
  31. GraphicsBay . Роялти фри. Создатели обещают, что иконки уникальны.
  32. Gravual . Две коллекции: кухонная утварь и улица. Для коммерческого использования свяжитесь с правообладателем.
  33. IcoJam . Иконки от дизайнеров Icojam.
  34. Iconfinder . 554 437 бесплатных и небесплатных иконок. Для скачивания доступно несколько форматов и размеров.
  35. Iconmelon . Любопытная инструкция по применению . И иконки, конечно.
  36. Iconmonstr . Доступно несколько размеров. Бесплатно, без ссылок на автора.
  37. Iconic . Бесплатный набор из 223 иконок в SVG, растре и шрифтовом форматах.
  38. IcoMoon App . Более 4000 векторных иконок. SVN, PNG, PDF и шрифт.
  39. IconArchive . 590 918 иконок в 2 443 наборах.
  40. Icon Shock . Иконки собраны по категория. Чтобы использовать в коммерческом проекте, внесите разовый платеж.
  41. MrIcons . Более 100 000 иконок от веб-интерфейса до соцсетей.
  42. NounProject . Бесплатные иконки взамен на ссылку на автора. Чтобы снять ограничение, подключите тариф.
  43. Oxygenna . Наборы иконок в PNG, PSD и AI.
  44. Pixelsmarket . Иконки с известных и не очень сайтов.
  45. PixsHub . Собирает иконки по сети.
  46. Pixeden . Иконки в PNG. Разрешение: от 16×16 до 512×512.
  47. Smashing Magazine . Форматы: AI, PSD, SVG, PNG, CSH and Sketch. Большинство наборов не требуют обратной ссылки.
  48. Squid Ink . 2 000 векторных иконок в 17 категориях.
  49. Vecteezy . 60 страниц векторных иконок.
  50. Web Design Freebies . Сборник иконок с разных сайтов. Можно сразу посмотреть весь набор.

Суперполезный гайд по созданию иконок для интерфейсов

Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.

1. Используйте оптическую сетку

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

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

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

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

2. Учтите пиксельную сетку

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

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

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

Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.

3. Сохраняйте определённый уровень детализации

Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.

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

4. Контролируйте минимальный размер зазора

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

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

5. Удалите повторяющиеся части

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

Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.

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

6. Выберите определённый стиль и следуйте ему

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

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

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

7. Используйте двухмерную систему калибровки

Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.

8. Следите, чтобы силуэты были чистыми и точными

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

Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.

9. Очистка SVG от мусора

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

Смотрите, в Sketch всё выглядит хорошо.

Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.

Вы можете удалить этот мусор и пересохранить иконку.

Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Добавить комментарий