11 бесплатных наборов иконок для дизайнеров — Дизайн на vc.ru
Перевод оригинала
4714 просмотров
Иконки — один из самых важных элементов в хорошем дизайне пользовательского интерфейса (UI). Они не только выполняют роль символических изображений, но и передают менее очевидную информацию через эстетику своего дизайна.
К счастью, вам не нужно рисовать иконки самостоятельно — в большинстве случаев можно воспользоваться готовыми наборами. Представляем вашему вниманию несколько отличных наборов иконок, которые вы можете использовать на своем следующем лендинге. А самое лучшее в них то, что они еще и бесплатны!
1. 730+ прозрачных иконок
Этот огромный набор из 730+ иконок для UI в форматах SVG, PNG64 и Iconfont может оказаться очень полезным для многих дизайнерских проектов. Он охватывает все основные тематики: базовые (файлы, папки, Wi-Fi, батареи питания и даже значок дискеты), музыка, коммерция, ПО, стрелки, погода… Если вы ищете полный набор прозрачных иконок, это то, что вам нужно.
Скачать набор бесплатно
2. Travel-иконки
Этот набор иконок имеет различную цветовую гамму и дизайн, в том числе и простые плоские дизайны, которые гарантированно подойдут любому сайту, UI/UX или другому дизайн-проекту travel-тематики. Они станут идеальным решением для заголовков разделов, описаний преимуществ и других категорий контента, а необычный дизайн «от руки» поможет выделить ваш дизайн среди конкурентов.
Скачать набор бесплатно
3. Эго-иконки
Этот набор иконок с загадочным названием содержит набор символов, описывающих повседневную жизнь. Здесь вы найдете значки, представляющие путешествия, девайсы, продукты, лица, животных, места и многое другое. Все они выполнены в привлекательном угловатом стиле, который дизайнеры называют «радикально геометрический дизайн». Кроме всего, они доступны в голубом и черном вариантах. Используйте разные версии для эффекта наведения курсора..
Скачать набор бесплатно
4.
Набор иконок азиатской кухни
Современный, минималистичный и забавный, этот набор иконок идеально подходит для лендингов и приложений с японской или другой темой. Просто попробуйте использовать его, не заморачиваясь с прорисовкой всего разнообразия азиатских блюд.
Скачать набор бесплатно
5. Набор космических иконок
Небольшой, но хорошо продуманный набор из четырех растровых значков был создан просто для забавы (как и многие из лучших творений!). Эти рисунки из другого мира доступны бесплатно для вашего вдохновения в следующих космических проектах.
Скачать набор бесплатно
6. Иконки в мультяшном стиле поп-арт
Если вы планируете сражаться с крутыми злодеями и нуждаетесь в визуальных звуковых эффектах, или ищете коллекцию ретроиконок для своего следующего проекта, не смотрите другие наборы. Этот включает слова-действия в стиле поп-арт, мысли и текст в пузырях, а также элементы динамического взрыва и несколько фонов в полутонах.
Скачать набор бесплатно
7. Значки случайных предметов
Название говорит само за себя. Единственное, что связывает этот набор из более 120 разрозненных иконок, — это отличный дизайн. Нужна иконка яйца или видеокамеры? Пожалуйста. Делаете новогодний лендинг? Здесь этой теме посвящены около 20 иконок. Есть даже Путин! В общем, если вы еще не определились с тематикой, этот набор — то, что вам нужно. Автор предполагал, что сет заполнит пробелы, которые есть в других наборах иконок. Пульверизатор, собачья кость и пачка сигарет убеждают нас, что он преуспел в этом.
Скачать набор бесплатно
8. Концептуальные иконки
Этот набор концептуальных иконок будет хорошо смотреться на персональном лендинге как в виде буллетов, так и в качестве самостоятельных иллюстраций, благо разрешение и различная тематика рисунков позволяют.
Скачать набор бесплатно
9.
Иконки со стрелками
Вы находитесь в поисках вдохновения? Пусть эта коллекция красочных стрелок направит вас в верном направлении. Они идеально подходят для навигации и индикаторов инфографики. Или используйте их, чтобы привлечь внимание к важным моментам на посадочной странице.
Скачать набор бесплатно
10. Набор бизнес-иконок
Компактная коллекция отличается чистым, плоским дизайном с использованием штриховых рисунков и цветовых стилей. Это отличная отправная точка, если вы ищете профессиональную, но слегка игривую иконку, которая идеально подойдет для презентации Power Point или в качестве навигационных ссылок для вашего следующего дизайна. Их можно использовать как в Adobe Illustrator, так и в Sketch.
Скачать набор бесплатно
11. Адаптивные иконки
Если вам нужно создать адаптивные значки для приложений Android и iOS, этот шаблон Sketch поможет вам. Используйте предварительный просмотр в режиме реального времени для отображения разнообразных форм, что позволит аккуратно адаптировать значки к различным моделям устройств.
Скачать набор бесплатно
Изучаем основы дизайна иконок с Адрианом Коке
Узнаем о том, как создавать иконки в Adobe Illustrator, у французского графического дизайнера Адриана Коке.
Иконки, входящие в обширную коллекцию Адриана в Noun Project, выглядят дружелюбными, забавными и округлыми.
Адриан Коке — графический дизайнер из Франции, 7 лет работающий на фрилансе. Ему нравится свобода, которую дает удаленная работа, поскольку он может посвятить свободное время различным творческим проектам: от типографики до создания музыки, хотя в первую очередь сейчас он увлекается дизайном иконок. В посте мы узнаем о том, как именно Адриан создает простые единообразные иконки в Adobe Illustrator.
Привет, Адриан! Расскажи немного о себе — как ты оказался там, где ты есть сейчас?
Графический дизайнер Адриан КокеЗакончив колледж, я начал изучать фармацевтику, однако вскоре понял, что моя душа жаждет творчества. В свободное время я открывал для себя Photoshop, Illustrator и FL Studio, программу для создания музыки.
Мне кажется, что у производства музыкальных композиций и дизайна есть множество общих черт, так как в обоих случаях вам необходимо соединить множество маленьких кусочков в единое целое, чтобы достичь определенного результата.
В конце концов я решил поступить в школу дизайна, однако, поскольку это было довольно дорого, я нашел специальную программу, которая позволяла учиться и работать одновременно. 2 года я проходил обучение и работал на сайте электронной коммерции, а после окончания учебы сразу перешел на фриланс. Я сотрудничал с разными клиентами, например, с агентством, которое продает игры на Facebook.
В свободное время я разрабатывал типографику, которую выкладывал в сеть для бесплатного скачивания. Я был удивлен и тронут положительными отзывами, которые получил. Мой шрифт Panama даже был шрифтом телешоу на национальном телевидении в течение года.
Я понял, что мне нравится создавать контент для людей и наблюдать за тем, как они его используют.
Однажды я наткнулся на Noun Project и подумал, почему бы не попробовать создавать иконки?
Из всех форм искусства и дизайна, предназначенных для выражения идей или эмоций, ты выбрал именно иконки. Что конкретно привлекло тебя в дизайне иконок?
Мне нравится то, насколько простым средством коммуникации являются иконки, ведь каждая из них может заменить собой целое предложение. Кроме того, меня завораживает тот факт, что люди, которые говорят на разных языках, могут без труда понимать значение иконок.
Когда я впервые прочитал девиз Noun Project “создаем глобальный визуальный язык, который объединяет людей”, он сразу нашел у меня отклик, и я понял, что должен принять участие в этом проекте.
Как ты решаешь, какие иконки создавать, и какие темы тебя интересуют больше всего?
Я нахожу вдохновение повсюду и часто повторяю себе, что все может стать иконкой. Я всегда записываю свои идеи в телефон, если нахожусь вне дома, поскольку вдохновение может быть мимолетным и его необходимо поймать.
Мне очень нравится создавать дизайн, который показывает людей, эмоции или концепции — то, чему зачастую трудно придать материальную форму. Удивительно, но когда я делаю счастливые или грустные иконки, это определяет мое настроение. Мне всегда интересно, как люди будут использовать мои иконки: приятно осознавать, что они будут кому-то действительно полезны.
Какие инструменты ты используешь для создания иконок? Поделись какими-нибудь хитростями.
Я начинал с самостоятельного изучения Adobe Illustrator. Я думаю, что это программное обеспечение просто великолепно — оно дает так много возможностей, и я продолжаю узнавать какие-то новые приемы даже сегодня.
В процессе разработки иконок я преимущественно пользуюсь 2 инструментами — “Создание фигур” (Shape Builder) и “Обработка контуров” (Pathfinder). Вместо сеток я использую направляющие.
Расскажи нам, из каких шагов состоит процесс создания иконки.
Я сделаю скетч в Illustrator, а затем шаг за шагом доработаю его.
Я всегда дублирую иконку несколько раз, а затем сравниваю разные версии. Я сохраняю как наброски, так и промежуточные результаты, чтобы иметь возможность проследить прогресс, и в случае необходимости вернуться и откорректировать их.
Вот как я разрабатываю иконку бегущего человека:
(1) Создайте основные линии и формы, соединяя точки с помощью инструмента “Перо” (Pen Tool — клавиша P). Нажмите P еще раз, чтобы начать новую линию, или щелкните исходную точку, чтобы замкнуть контур и создать форму.
(2) Затем, выделив линию или форму, добавьте более толстую обводку со скругленными концами и углами (нажмите на кнопку “Обводка” в панели инструментов, чтобы увидеть соответствующие параметры). Это поможет понять, как в конечном итоге будет выглядеть иконка.
(3) Я также добавлю заливку того же цвета для областей вроде туловища, которые должны быть заполнены.
(4) Продолжайте корректировать каждую опорную точку с помощью инструмента “Прямое выделение” (Direct Selection), пока конечности не будут выглядеть наиболее естественно.
(5) Как только каждый из элементов фигуры оказался на своем месте, нажмите “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), чтобы получить единый составной контур.
(6) Решите, какие части следует объединить в одну фигуру. В этом нам поможет инстурмент “Создание фигур” (Shape Builder). Я хочу, чтобы передняя нога визуально выделялась на фоне остальной фигуры. Я выделяю туловище и переднюю ногу, выбираю инструмент “Создание фигур” (Shift + M), щелкаю и перетаскиваю курсор, чтобы объединить их.
(7) Затем я добавляю обводку серого цвета к получившейся форме и нажимаю “Выровнять по внешней стороне” (Align to Outside) в окне настройки обводки.
Так я смогу видеть, какую часть иконки вырезать, чтобы оставить пространство между ногами.
(8) Я снова нажимаю “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), и обводка превращается в самостоятельный контур.
(9) Чтобы “вычесть” серую форму и оставить промежуток между ногами, выберите дальнюю от нас ногу и серую фигуру, снова нажмите на инструмент “Создание фигур” (Shift + M), но на этот раз удерживайте Alt (или Option на Mac). Это позволит вычесть серый цвет, оставив нужный пробел. Вуаля!
Вот еще несколько полезных приемов, которые я часто использую в Illustrator:
Какие ошибки ты чаще всего встречаешь в дизайне иконок?
Разные толщина или стиль обводки, слишком большое количество опорных точек, там, где в них нет необходимости, нарушение пропорций или лишние детали. Я бы сказал, что именно из-за этих ошибок иконка получается неудачной.
Что должен сделать каждый дизайнер, чтобы создать более гармоничную профессиональную коллекцию иконок?
Найти индивидуальный стиль и делать иконки единообразными. Убедитесь, что иконки одного размера, имеют одинаковую толщину обводки, заливку одного цвета, а также одинаковые углы и предельный угол стыка (степень резкости или скругления в местах соединения линий).
Если вы создаете набор, разместите иконки рядом и взгляните на них как на единое целое. Мне нравится, когда иконки получаются достаточно креативными, но важно также сделать их единообразными.
Придерживайтесь определенных правил, создавая дизайн: используйте одинаковые размеры, толщину обводки, предельные углы стыка (острые или скругленные) и другие общие детали, например, блики, которые могут объединить разнородные иконки в одно целое.
Следишь ли ты за творчеством каких-то конкретных дизайнеров? Или, может быть, ты используешь другие ресурсы для вдохновения?
Мне нравится просматривать работы на Behance, ведь там можно найти множество отличных дизайнов.
Хотя это и не связано с иконками, я большой поклонник творчества Romain Trystram, особенно серии работ “Огни большого города”, где он использует яркие неоновые цвета в сочетании с темными оттенками.
Мне также очень нравятся цветные эмоциональные изображения лиц, которые создает Alberoner.
Что ты собираешься делать дальше?
Я буду продолжать творить и пытаться день ото дня улучшать свои навыки. У меня все еще множество идей, которые я должен попробовать реализовать. Я благодарен Noun Project и всем, кто поддерживает меня и присылает положительные комментарии о моей работе. Это заставляет меня двигаться дальше!
79 973 иконки графического дизайна — бесплатно в SVG, PNG, ICO
Получите неограниченный доступ к более чем 6,8 миллионам активов
Получите неограниченное количество загрузокГрафический дизайн Значок
Графический дизайнер Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Программное обеспечение для графического дизайна Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Программное обеспечение для графического дизайна Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Веб-сайт графического дизайна Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Веб-сайт графического дизайна Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайнер Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Инструмент графического дизайна Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Графический дизайн Значок
Книга по графическому дизайну Значок
Книга по графическому дизайну Значок
Книга по графическому дизайну Значок
Графический дизайн Значок
Идея графического дизайна Значок
Дом
Привет, я Ной, старший дизайнер иконок в Font Awesome.
Я всегда рисовал очень маленькими — с самого детства я рисовал очень маленькие. Тогда я не знал, почему, но после многих лет рисования крошечных картинок я, кажется, понял: наборы иконок похожи на крошечные маленькие вселенные. Благодаря тому, что они изображают и как, вы можете многое узнать о том, что представляет собой продукт, как он функционирует и как вы должны себя чувствовать при взаимодействии с ним.
Это побудило меня следить за сценой икон в целом, следуя за коллегами по всему миру, чья работа и подход к иконкам находили отклик во мне.
Бонни Кейт — первоклассный дизайнер иконок Figma. В то время как остальные из нас все еще боролись с продуктами Adobe, она проворачивала фантастическую работу, и ей было намного легче это делать! BK работал с множеством первоклассных клиентов, включая Netflix, Airbnb, Lyft, Square, Meta и Stripe. Она также написала очень полезное и подробное руководство по иконографии продукта. Но самое главное, ее работа сплоченная, веселая и продуманная до мелочей.
Первое, что привлекло меня в творчестве Мартина, — это его исследования различных материалов и их применение в иконографии и точечной иллюстрации. В его творениях так много жизни и глубины, при этом демонстрируя сплоченную сдержанность — атрибуты, к которым можно стремиться!
Я следил за творчеством Лауры с тех пор, как впервые узнал о дизайнерском и художественном коллективе Ghostly Ferns. Ее иконки и системы иллюстраций всегда на высшем уровне, с восхитительной дозой веселья и индивидуальности. Я также имел удовольствие работать вместе с Лаурой над созданием наклеек-иконок для FigJam, когда он только запустился!
Я давно восхищаюсь работой Зака, особенно его удивительным магазином иконок Flaticons. Просматривая его портфолио несколько лет назад, я решил попробовать разные стили при передаче иконок клиентам и показал, что всегда есть другой умный способ рисовать часто используемые глифы.
Хелена — кладезь вдохновения — одни только ее статьи о принципах создания иконок могли бы избавить меня от многих разочарований, когда я только начинал! Но Хелена и Тобиас Фрид также создают и поддерживают удивительное семейство иконок Phosphor, которое частично вдохновило меня на создание моего собственного проекта иконок Chunk.
Я немного знал о талантах Вик, но только когда мы оба приняли участие в показе A Gallery Far Far Away в Creative South 2016, и я встретился с ней, я действительно начал обращать внимание. Все, что она делает, пропитано индивидуальностью и очарованием ручной работы. Кроме того, если вы являетесь поклонником приложения для создания заметок Bear, то вы также являетесь поклонником Vic’s, так что добро пожаловать в клуб!
Мы можем любить Figma здесь, но это не значит, что мы не следим за тем, что делают другие замечательные инструменты дизайна. И одним из главных претендентов является Sketch, в немалой степени благодаря работе Прекеша. Нелегко найти такую возможность для значков приложений и пользовательского интерфейса в одном месте!
Если вы недавно использовали Github для чего-либо, вы, вероятно, знакомы с работой Гэвина. Он дизайнер продуктов и иконок с фантастическим портфолио клиентских и личных проектов за плечами (не говоря уже о некоторых отличных заменяющих MacOS иконках.
