Флэт иконки: Крупнейшая база данных бесплатных иконок, доступных в форматах PNG, SVG, EPS, PSD и BASE 64.

55+ лучших бесплатных наборов плоских иконок

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

В архиве «Дизайн Мании» вы найдете похожие по стилю материалы, например, те же простые или монохромные иконки. Достаточно много их встречается в подборке графики цветов и растений, в красочных иконках программ или среди аватарок лиц мужчин и женщин. У плоского дизайна есть свои характерные черты и преимущества, которые вы с легкостью сможете уловить из примеров ниже. Для скачивания кликайте по изображениям и переходите на сайты-источники.

Free Flat Color Icons

3600 Flat Icons Bundle

Громадный набор для личного и коммерческого использования. Каждый объект здесь доступен в 3-х разных размерах.

40 Flat Icon Pack by Paul Flavius Nechita

Flat Icons EPS

83 Flat Line UX And E-Commerce Icons For Free

Flat Shadow Social Media Icons

100 Free Food & Drink Icons

Flat Rectangular Europe Flag

Данный архив вы также могли видеть в статье про бесплатные изображения флагов мира вместе со многими другими. Форма картинок прямоугольная, хотя размеры при этом квадратные — от 512х512 до самых маленьких 16×16. Кроме базового формата PNG, есть отдельные файлы ICO под Win и ICNS под Мак. Использовать можно лишь для личных нужд, а если захотите добавить в софт/сайты бизнеса, придется покупать лицензию (либо смотрите альтернативы по ссылке в первом предложении).

60 Astonishing Flat Icons For Free

Modern Flat Icons

30 Icons Free

Flat Design Icons Set Vol1

Flat Design Icons Set Vol2

Small-n-Flat Icons

Meroo – A Gorgeous Free Flat-Styled Icon Set

Flat Icon Set

Free Vector Polygon Social Media Icons

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

Freebie Friday: Flat Icons

Accounting — Material icons

Free Flat Social PNG & PSD Icons

24 Flat Icons

Набор состоит из плоских иконок от талантливого дизайнера Jan Dvořák. В архиве имеется PSD так что сможете изменять исходники как вам будет нужно.

Flat Icon Set for Professionals

Если посмотреть на ссылки, то бОльшая их часть презентуется в популярных социальных сетях для дизайнеров Dribbble и Behance. Получается, что это теперь основные источники бесплатных материалов? Неужели отдельные Standalone блоги и дизайнерские онлайн-проекты утратили былую активность?

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

Metro UI Icon Set — 725 Icons

25 Free Flat Vector Icons

Free Program Icons

Flat Icons (PSD)

Free Flat Icons 2

Flat Icons PSD by Alberto Valentin

Flat Design Free IconSet

Google JFK Icons — ICO and PNG

Flat Design Icons Set Vol4

40 Valentine’s Icons

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

Graphic Design Icons Set

50 Flat Icons Pack by Martz90

@2x Flat icon set [PSD]

Freebie: Cinema Icon Set (SVG)

Flat Icons / PSD

Free Flat Icon Set by Barry McCalvey

30 Flat Shopping Icons

Flat Icons (PSD) #2 by Pierre Borodin

Social Icons Freebie by Pierre Borodin

12 Flat Icons Free by Dan Vineyard

Flat Icons Practice Set PSD

Flat Icons Practice Set PSD — это 9 простых плоских иконок. Рабочая такая подборка — дискета, письмо, лупа, папка, заметка, часы и т.п.

Flat Icons Freebie

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

Free Flat Icons

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

Flat Design Icons Set Vol3

20 Flat Icons (PSD)

Еще 20 плоских иконок размером 128х128 пикселей в PSD формате (+вектор). Вы можете изменять их как посчитаете нужным. На светлом фоне данная графика, кстати, выглядит «спокойнее», автор, видимо, специально хотел сделать иллюстрацию набора максимально яркой.

Flaticon.com

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

Ниже предлагаем немного премиальных вариантов, которые могут похвастаться достаточно крупными наборами из 200-400 и даже 800 элементов.

800 Flat Icons Web&Internet

100 Vector Social Media

Universal Flat Icons

280 Simple Flat Vector

8 Categories Flat Icon

Minimalist Flat UI Design Element

Set of Different Flat Icons

Итого. В ходе обновления заметки мы увеличили ее содержимое в 5 раз и получили более 55+ красивых плоских иконок для дизайнеров. Тут представлены разные тематики, стили реализации и форматы графики. Надеемся, вам этот пост пригодится в работе.

Бесплатные плоские иконки

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

 

 

Freebie PSD — Flat Icons 

_____________________________________________
Free Flat Icons 

_____________________________________________

Free Flat Icons 

_____________________________________________

Flat Icons Freebie  

_____________________________________________

Free Flat Icon Set  

_____________________________________________

Flat Icon Set Freebie

_____________________________________________

Free Icon Set 1.0 

_____________________________________________

20 Flat Icons (PSD)

_____________________________________________

Flat Icons: More Than 3600 Icons 

_____________________________________________

Flats 

_____________________________________________

Flat Icons — Part 2 

_____________________________________________

Free Colorful Icons 

_____________________________________________

12 Flat Icons — Free  

_____________________________________________

Flat Custom CS Icons

_____________________________________________

Flatilicious — 48 Free Flat Icons  

_____________________________________________

Cosmo mini free 

_____________________________________________

Flat Design Icons Set Vol2

_____________________________________________

Flat icons (PSD) — 3 Dribbble invites

_____________________________________________

Freebie PSD — Flat Icons 

_____________________________________________

Free Flat Social Media Icons (PNG & PSD)

_____________________________________________

FREE Flat Social Icons EPS 

_____________________________________________

Vector Feebie 

_____________________________________________

Flats 

_____________________________________________

Big Flat Icons (.

sketch) 

_____________________________________________

Simple Flat Social Media Icons (PSD & PNG)  

_____________________________________________

Flat Social Icons (Freebie) 

_____________________________________________
Flat Design Icons Set Vol4  

_____________________________________________

 

Free program icons 

 

Как создать иконки с Flat-дизайном в Photoshop

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

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

Исходя из вышесказанного, вопрос напрашивается сам собой: «Почему бы не начать переработку интерфейса уже сегодня»? Так вы сможете быть на шаг впереди остальных!

Вы можете подумать, «С чего же мне начать?» Конечно, реконструкция дизайна сайта это адский труд. Данная статья как раз и посвящена этому – она будет вашей рукой помощи в этом нелегком деле.

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

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

В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.

Вот наш конечный результат:

Откройте Photoshop. Создайте новый файл, использовав пресет «Фото» (Photo) (10×8 inch, 300 DPI, прозрачный фон, цветовая схема RGB).
Выберите инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle) и создайте новую фигуру с размерами 1736 на 1736 пикселей (px), радиусом скругления 83 пикселя и цветом #82d8b5. Можно задать и свой цвет, наиболее хорошо сочетающийся с дизайном вашего сайта.
Затем, используя инструмент «Перо» (Pen tool) и нарисуйте нечто, похожие на изображение ниже. Используйте цвет #a30d00. Это будет крышей нашего домика, обозначающего главную страницу сайта.
Далее, не переключая инструмент «Перо», создайте прямоугольную фигуру как показано на изображении ниже. При этом используйте цвет #ffffff. Также, нарисуйте маленький квадрат с помощью инструмента «Прямоугольник» с цветом #3498db.
Далее, тем же инструментом, создайте фигуру размером 248px на 396px и цветовой заливкой #fcab3a.
На данном этапе вы уже можете сохранить и использовать изображение. Оно уже достаточно неплохо напоминает иконку домашней страницы во flat-стиле. Но стоит пройти еще пару шагов и добавить длинную тень.

Далее, используя инструмент «Перо» с цветом #000000 нарисуйте фигуру. Начните её с правого угла крыши, продолжите и сделайте так, как показано на рисунке ниже:

Отправьте тень на самую нижнюю позицию и растрируйте этот слой. Используя инструмент «Волшебная палочка» (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I). Не снимая выделения, выберите слой с тенью и нажмите кнопку «delete».

Иконка готова. Чтобы сохранить её, нажмите «Файл>Сохранить для веб и устройств..» (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S). Сохраните иконку в формате PNG-24 с включенной прозрачностью.

Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.

Теперь, займемся иконкой Post:

1. Откройте Photoshop и повторите шаги 1 и 2 для предыдущей иконки:
3. Нарисуйте прямоугольник со скругленными углами размером 929px на 929px и радиусом скругления 38px. Я использовал цвет #f5ea74, чтобы имитировать цвет клейкого листочка:
5. Нарисуйте линию толщиной 1px и цветом #5d5608. Разместите её сверху клейкого листа:
7. Нарисуйте линию толщиной 15px, как показано ниже:
   
   
   Оставьте пространство между линиями. Я сделал промежутки достаточно широкими, чтобы сохранить ощущение минимализма, который является основной характерной чертой flat-дизайна.
9. Начертите прямоугольник, символизирующий изображение на клейком листике:
11. Нарисуйте тень, аналогично той, которую мы делали для иконки главной страницы выше:
13. Сохраните результат:

Ниже вы можете видеть иконки About Me и Contact Me:

Все иконки можно скачать тут.

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

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

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

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

Данная публикация является переводом статьи «How to Create Flat Icons in Photoshop» , подготовленная редакцией проекта.

Урок 12. Рисуем простую флэт иконку

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

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

Было бы слишком просто — взять готовую иконку и обработать её. Поэтому мы нарисуем её с нуля.
Чем отличаются флэт иконки? В них используются только простые фигуры, явно выраженные углы (90%, 45%) и совершенно отсутствуют любые эффекты слоя. Весь объём (если он необходим) строится на сочетании разных цветов и оттенков.

В этом уроке принцип рисования флэт иконок покажу сразу на примере 3-х видов одной очень простой иконки.

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

1. Вариант иконки на тёмной подложке
2. Вариант иконки на яркой цветной подложке
3. Вариант иконки без подложки

Воспользовавшись фигурой «прямоугольник со скруглёнными углами», нарисуем основу иконки (пока на примере одного вида):

Вновь фигурой (к примеру, прямоугольником), вычтем из только что нарисованной фигуры угол. Зажмём Alt и нарисуем прямоугольник. Затем выберем инструмент «Выделение контура» (А) и выделим новую фигуру. Выбрав «трансформирование» (Ctrl+T), повернём фигуру на 45 градусов. Enter и «Объединить».

Вновь берём инструмент «прямоугольник со скруглёнными углами» и рисуем произвольную фигуру. Она у нас находится поверх слоя с первым прямоугольником. Чтобы новая фигура приняла форму перовго прямоугольника, жмём клавиши Ctrl+Alt+G. Цвет новой фигуры меняем на светлый оттенок нижнего прямоугольника — получается загнутый уголок листа:

Добавим тень от загнутого уголка. Для этого на новом слое создадим фигуру прямоугольника, трансформацией повернём его на 45 градусов и разместим под слой с уголком (оттенок — темнее основы):

Осталось нарисовать схематичный текст на бумаге. Поверх всех слоёв просто нарисуем прямоугольник. Зажав Shift, нарисуем ещё несколько таких с равным промежутком:

Собственно, иконка готова! Выделив все слои, из которых она состоит, продублируем (правой кнопкой по одному из выделенных слоёв и во всплывающем окошке «Дубликат слоёв») и передвинем её дальше:

Центральную иконку мы сделаем более выразительной. Для этого: во-первых, сделаем её светлее по тонам; во-вторых, добавим тень.

Над слоем с круглой подложкой нарисуем фигуру инструментом «Перо». Первую точку поставим у сгиба уголка, отведём перо в сторону и удерживая Shift, кликнем за границей круглой подложки, таким образом у нас получится линия, идущая под углом 45 градусов. Продолжаем рисовать. Создаём третью точку также за границей круга и снова удерживая Shift, приближаемся к противоположному (от загнутого уголка) углу листа. Затем замыкаем фигуру и поправляем грани (точки) инструментом «Стрелка» (А), если это нужно.

Теперь вписываем фигуру в круг (Ctrl+Alt+G) и меняем цвет получившейся тени.

Вот и всё! По обыкновению вы можете скачать исходник примера, описанного в уроке, запакованный в архив весом 16 Кб

Флэт стилистика и скеоморфизм | maximsoldatkon.com

Флэт стилистика. Что это такое?

Перед тем как рассказать, что такое флэт стилистика, стоит вспомнить, что такое скевоморфизм.

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

Рис.1 Пример калькулятора

Еще один пример (рис.2). Приложение Apple Books выглядит как книжная полка, что наглядно и привычно для пользователя.

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

Рис.2 Приложение Books

Рис.3 Пример скеоморфизма

Идея о том , что компьютерный интерфейс должен воссоздавать картину привычного для нас мира –это вопрос не столько эстетический, сколько практический. Это было раньше. Сейчас люди привыкли к интерфейсам и научились ими пользоваться. Скевоморфизм с выходом iOs7 Apple посчитал, что он уже излишен. И приложения стали упрощаться ( исчезли обводки для кнопок, подложки,блики, выпуклость), то есть люди уже понимают как этим пользоваться (рис.5,6,7,8). Опять же обратите внимание, что в плоском дизайне большее внимание уделено контенту.

Кстати, рекомендую посмотреть прямо сейчас:

Рис.4 Пример

Рис.5 Twitter

Рис.6 Facebook

Рис. 7 Evernote

Рис.8 Music

Рис. 9 Пример скеоморфизма как автомобиля

И есть очень хороший пример, что сейчас скеоморфизм – это как классические автомобили.

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

Как изменились приложения, так изменились и иконки. Раньше они изображались реалистично, то сейчас достаточно фона и цвета (рис.10-18). Сейчас уклон к минимализму, символьности, упрощению. Исчезли блики и тени, а ключевой предмет — крупнее. Тем не менее концепция сохраняется.

Рис.10 Изменения в изображении иконок

Рис.11 Изменения в изображении иконок

Рис.12  Изменения в изображении иконок

Рис.13 Изменения в изображении иконок

Рис.14 Изменения в изображении иконок

Рис.15 Изменения в изображении иконок

Рис.16 Изменения в изображении иконок

Рис.17 Изменения в изображении иконок

Рис.18 Изменения в изображении иконок

Тоже самое произошло и в изображении иллюстраций (рис.19). Флэт стилистика стала так же популярна. 

Рис.19 Флэт-дизайн в иллюстрации

Есть замечательная игра Flat vs Realism (рис.20).

У власти был король Реализм. Была Империя бликов, спецэффектов и разных красивых приемов, но рационалист Флэт представил, что дизайн должен поменяться. Так началась битва. В 2013 году Флэт победил и король Реализм был изгнан и цифровой мир стал плоским. Но старый король нашел последователей  и т.д.

Рис. 20 Игра http://www.flatvsrealism.com/

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

Нарисую 3 иконки в стиле флэт, линейные, с эффектом неонового свечения

Создам интро в стиле Hi-Tech для Youtube канала

Цена: 500 ₽ в Kwork
Подробнее  Купить

Создам анимацию вашего названия в стиле Hi-tech. Могу добавить другое звуковое сопровождение либо использовать ваше. Выходной формат файла на ваше усмотрение. Разрешение 1920×1080.

Смайлики и сабки для twitch

Цена: 500 ₽ в Kwork
Подробнее  Купить

Уникальные смайлики/сабки на платформе Twitch — это не только приятный бонус для Ваших зрителей и подписчиков, но и отличная реклама для Вашего канала. Хотите выделяться, радовать своё комьюнити и привлекать новых зрителей? Тогда, Вам ко мне! Рисую смайлики и сабки для канала на Twitch. Буду рада сотрудничеству! Я работаю исключительно с индивидуальными покупателями (организациями) . Авторское право работ остается за мной, заказчику предоставляются права на использование изображения в личных целях/социальных сетях.

Бесконечная лента инстаграм. Сторис. Иконки для вечных сторис

Цена: 500 ₽ в Kwork
Подробнее  Купить

Kurri — Набор элегантных и профессиональных шаблонов пазлов для Instagram. Все полностью редактируемые. Все шрифты, цвета, текст могут быть изменены. Смарт-объекты используются для замены изображений. Также включает в себя файлы PNG для пользователей CANVA. Теперь вы можете быстро и легко создавать новые сообщения с помощью приложений на вашем смартфоне. Например: — Over — PicsArt Характерная черта: — Бесконечная лента инстаграм из 24 сообщений (PSD файлы) — 24 PNG-файла с прозрачным фоном, без текста — 6 шаблонов для Instagram историй (PSD и PNG) — 8 шаблонов для обложек истории в Instagram (PSD & JPEG) — Полностью редактируемые элементы в Adobe Photoshop — Организованные и помеченные слои — Использует бесплатный шрифт — Включает учебник PDF (Adobe Photoshop) — Инструкция по редактированию шаблонов на сайте Canva — Функциональность Smart Object — Требуется Adobe Photoshop обратите внимание: у вас должен быть Adobe Photoshop и базовые знания по его использованию для редактирования файла. Небольшой учебник в формате PDF также включен. Спасибо, что зашли!)

Нарисую линейные иконки

Цена: 500 ₽ в Kwork
Подробнее  Купить

Нарисую в векторе красивые линейные иконки. Для лендинга или сайта Гарантирую качество и интуитивно понятный интерфейс

Нарисую баннер в стиле flat — флэт, cartoon — мультяшный для сайта

Цена: 1000 ₽ в Kwork
Подробнее  Купить

Что вы получите: Стильный, оригинальный, статичный баннер для вашего сайта по вашим требованиям и пожеланиям. Работаю в таких стилях, как: flat (флэт), cartoon (мультяшный), или возьму за основу тот, который у вас на сайте. В процессе работы: Обсуждение на стадии скетча. Для меня правки — это важная обратная связь. Если нужно, отрисую в векторе ваш логотип или иконки. Окончательный вариант предоставлю на скриншоте сайта.

Создам анимацию логотипа с glitch эффектом

Цена: 500 ₽ в Kwork
Подробнее  Купить

Анимация вашего логотипа как в приведенных примерах с glitch эффектом. Формат видео на выходе на ваш выбор: mp4, mov, wmv. Разрешение видео — 1920х1080р. (Full HD). SFX эффекты включены. Длительность до 15сек.

Космические иконки в стиле FLAT дизайна в Adobe Photoshop

В статье «Особенности FLAT – дизайна» я сделала небольшой экскурс в историю появления достаточного нового направления в дизайне. Сегодня я хочу показать, как с помощью простых фигур в Photoshop можно создать элементы FLAT – дизайна. Речь пойдет о создании иконок в космическом стиле.

Выбор цветовой гаммы для flat дизайна

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

Иконка с ракетой

Шаг1. Нарисуйте на рабочей области эллипс размером 512х512 px. Цвет — #304c5a.

Шаг2. Нарисуем ракету. Для этого в центре уже нарисованного эллипса поместим еще один белый эллипс.

В группе инструментов «Перо» выберите инструмент «Угол», щелкните им по белому эллипсу, появятся направляющие точек. Щелкните инструментом «Угол» по верхней точке, чтобы образовать угол на вершине эллипса. И немного потяните направляющие, если захотите придать округленность вершине.

Шаг 3. В группе инструментов фигур выберите прямоугольник. Убедитесь, чтобы на панели свойств фигуры был выбран режим «Пересечения». Постройте прямоугольник поверх нашего эллипса как на рисунке ниже. Нижняя часть эллипса обрежется.

Шаг 4. Создайте новую фигуру прямоугольника поверх имеющейся. Цвет — #dedede. Откадрируйте ее по форме имеющейся фигуры, — для этого установите указатель мыши между слоями с прямоугольником и слоем основании ракеты так, что курсор изменился на значок с двумя пересеченными кружками и стрелочкой. И щелкните левой клавишей мыши. Получится следующее.

Шаг 5. Нарисуйте под основанием ракеты еще одну ступень. С помощью инструмента «Прямоугольник с закругленными краями».

Шаг 6. Создадим окно иллюминатора, размером 100х100px с помощью инструмента «Эллипс»

Шаг 7. Используя инструменты и фигуры такие же, как в шаге 3 создадим огонь для нашей ракеты.

Пристроим огонь к нашей ракете.

Шаг 8. Используя инструмент прямоугольника из набора фигур, на заднем плане ракеты создадим тень для нее. Цвет черный, прозрачность слоя 50%, угол наклона 45 градусов.

Отредактируем прямоугольник, используя инструмент Стрелка (А).

Шаг 9. Создадим для тени слой маску – Слои – Слой-Маска – Показать все. Зальем ее черно-белым градиентом. Режим наложения поменяем на умножение.

Сведем изображение тени под изображение круга иконки.

Шаг 10. Нарисуем красный нос ракеты.

Шаг 11. Добавим с помощью эллипсов вспомогательные элементы на иллюминатор ракеты и нарисуем звезды.

Иконка с планетой

Принцип действий остается прежним, поэтому буду краткой.

Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a. Поверх создайте эллипс планеты меньшего размера. Цвет — #ffd9a2. Поверх эллипса создайте несколько прямоугольников, подберите различные оттенки цвета планеты. Затем объедините прямоугольники в один слой и поверните на небольшой угол.

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

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

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

Шаг 4. Наклоните астероидный пояс и скройте ненужную часть за слой-маской.

Шаг 5. Создайте тень с помощью прямоугольников в два этапа.

Добавим звезды и фон.

Иконка с радиотелескопом­

Шаг 1. Создайте эллипс размером 512х512 px. Цвет — #304c5a.  Нарисуйте красный эллипс и обрежьте его с помощью слой-маски.

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

Шаг 2. С помощью инструмента «Многоугольник» из группы «Фигуры» нарисуйте треугольник. Трансформируйте его так, чтобы получилась антенна, и добавьте к ней эллипс.

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

Шаг 3. Добавьте тень и звезды.

Вот так с помощью простых фигур в программе Photopshop можно сделать креативные элементы FLAT – дизайна. Урок составлен на основании статьи — How to Create Stylish Flat Space Icons in Adobe Photoshop

Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях   и мы обязательно опубликуем для вас еще больше полезных уроков Photoshop!

(Visited 2 893 times, 1 visits today)

Почему так много компаний переходят на плоский дизайн логотипов?

Краткий ответ: потому что Apple задала модный тренд .

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

до iOS 7

Мир до iOS 7 был псевдо-3D. Это было весело.

• Сначала у наших дисплеев было 256 цветов, потом 64 тысячи, потом 16 миллионов

Как ни странно, Volkswagen сменил плоский дизайн на псевдо-3D.Я помню, как в конце 90-х создавал веб-сайт для дилера Volkswagen, затем я получил новый брендбук от Volkswagen, и меня поразило, насколько красиво выглядел градиентный логотип.

• • У нас были условные обозначения пользовательского интерфейса: активных элементов с псевдо-3D , таких как кнопки, раскрывающиеся списки и даже ввод.

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

• У нас было самых красивых изоморфных иконок , когда-либо созданных; была мода рисовать объекты квадратной формы в виде значков iOS.

Мой товарищ по команде Александр создал его в конце 2000-х. Посмотрите, какие цветы он рисовал всего несколько лет назад.

после iOS 7

Все закончилось в одночасье 18 сентября 2013 года с обновлением iOS. Магазин приложений обновил приложения. Мир стал плоским.

Глянцевый текстурированный интерфейс, казавшийся красивым еще накануне, устарел.Умерли приложения, которым не удалось обновить интерфейс.

Это было не очень хорошо для UX. Это вызвало много недоразумений.

• Что кликабельно?
• Что нет?

Я сделал этот снимок экрана в 2016 году. Спустя 3 года у вас все еще есть , чтобы знать , что кликабельно, а что нет.

Тем самым Apple стерла годы жизни пользователей, которые касались экрана не в тех местах.

Иконки

Иконки тоже стали плоскими.

• Иконки избавились от деталей и стали проще. Они стали более узнаваемыми.

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

• • Дизайнеры иконок спасли годы своей жизни, нарисовав более простые значки приложений. Таким образом, Apple спасла годы жизни дизайнера иконок.

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

Что еще?

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

Использование в различных средствах массовой информации

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

Обратите внимание, что даже полный логотип Facebook (компании), каким бы простым он ни был, не умещается на большом пальце. Вам потребуется укороченный логотип F.

Использование экрана

Упрощение использования экрана — логотипы должны распознаваться как значок 16 × 16 пикселей на дисплее с низким разрешением.

Стилизованные логотипы, оптимизированные под формат 32 × 32. Однако большинство из них нормально смотрятся в формате 16 × 16.

Просто упрощение

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

Windows Metro

Microsoft какое-то время продвигала плоский дизайн.Я точно помню, когда: мы запускали Icons8 как набор иконок для Windows 8 (Icons8 означает значки + Windows 8). Конечно, какое-то влияние.

Дизайн в стиле Metro: Эдуардо Сантос, безусловно, справился лучше, чем Microsoft.

Конечно, это имело какое-то влияние, но была ли Microsoft законодателем мод? Я так не думаю. Как операционная система для настольных ПК, мобильная платформа, платформа для планшетов и визуальный стиль — это провал. 10 лет спустя, я думаю, это больше людей ненавидит, чем нравится.

Сдвиг к векторам

В мире дисплеев высокой плотности вы либо:

• Оставить 2-3 версии для разной плотности пикселей
• Или используйте векторы

Хотя векторы могут отбрасывать тени и показывать несколько различных простых эффектов, этот набор эффектов очень ограничен; В Photoshop 3 было больше. Я бы хотел, чтобы мы двигались к чему-то вроде этого:

Кстати, спасибо за подсказку!

---

… а потом случилось 18 сентября 2013 года. День, когда мир в одночасье превратился в плоский.
—
Об авторе
Иван Бойко — основатель компании Icons8. Свою первую работу он получил после рисования баннера с CTR 43%. После многих лет создания иконок он специализируется на быстром прототипировании и обработке бэклогов.

Попробуйте бесплатные инструменты для авторов от команды Icons8

Photo Creator , бесплатное средство для создания коллажей с технологиями на основе искусственного интеллекта для создания индивидуальных фотографий для вашей истории Pichon , настольное приложение для загрузки значков и картинок и использования их в автономном режиме

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

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

Нравится вам это или нет, но плоский дизайн — это тенденция, которая останется навсегда. Сочетание пастельных тонов с минималистичным / чистым макетом кажется идеальным балансом для любой веб-страницы. И всем нам это нравится!

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

Набор инструментов для конструктора иконок и пользовательского интерфейса

Неограниченные загрузки: более 1 000 000 наборов значков, наборов пользовательского интерфейса, шаблонов каркасов, тем, плагинов и многое другое!

731 плоская иконка

от Envato Elements (731 иконка, AI, EPS, PNG, SVG и PSD)

Flat Icons

by Jan Dvorák (24 иконки, Photoshop PSD)

60 плоских иконок с персонажами

By Envato Elements (60 иконок, AI, EPS, PNG, PDF и SVG)

Простой плоский набор иконок

от Envato Elements (840 иконок, AI, EPS, PNG и SVG)

Basic Flat Icon Set

By Envato Elements (100 иконок, PSD, SVG, PNG и AI)

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

от Envato Elements (250 иконок, AI, EPS, JPG, PNG, PDF и SVG)

Meroo

(110 иконок, Photoshop PSD)

Плоский набор иконок

(60 иконок, PNG, SVG, EPS, Photoshop PSD и AI)

Плоские иконки

(20 иконок, Photoshop PSD)

Плоские иконки

(24 иконки, Photoshop PSD)

Flat Icons Pt.

1 от Pierre Borodin (12 иконок, Photoshop PSD)

Flat Icons Pt.2

by Pierre Borodin (12 иконок, Photoshop PSD)

Квасир Набор иконок

(180 иконок, PNG, Photoshop PSD)

Publicons

(12 иконок, PNG и SVG)

Flat Social Icons

by Jorge Calvo (72 иконки, AI и EPS)

Flat Social Icons

by Thiago Marques (14 иконок, Photoshop PSD)

53 Великолепные наборы иконок с плоским дизайном

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

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

Есть ли какие-нибудь наборы иконок с плоским дизайном, которые вы бы порекомендовали? Или вы создали свой собственный, которым хотели бы поделиться? Дайте нам знать в комментариях ниже.

Изображение: FlatIcons.co

FlatIcons.co предлагает великолепно оформленные плоские значки, доступные в форматах PSD, SVG, EPS и CSH, а также в четырех различных размерах. Поскольку это векторные иконки, они позволяют плавно масштабировать их до любого размера, сохраняя при этом их четкость.

Linecons — замечательный бесплатный набор иконок, который содержит 48 полностью масштабируемых векторных иконок со стилями контура. Каждый значок доступен в форматах HTML, CSS, PDF, AI, PSD, PNG и SVG.

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

Здесь вы найдете хорошо продуманный пакет из 48 бесплатных плоских иконок, доступных в формате PSD. Это полностью масштабируемые векторные иконки, поэтому их размер можно изменять в соответствии с любыми требованиями. Они идеально подходят для веб-дизайна, приложений или инфографики.

Изображение: IconShock

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

Pixeden предлагает плоский набор иконок, вдохновленный плоским дизайном, созданный в стиле минимализма с характерными деталями. Каждый значок предоставляется в формате векторной формы PSD.

Также бесплатно доступны следующие наборы: второй, третий и четвертый.

Созданные командой разработчиков Applove, эти бесплатные значки программ красиво созданы и спроектированы с исключительным вниманием к деталям.На сайте есть значки для таких программ, как Adobe Photoshop, iTunes, Chrome и Firefox, среди других.

Meteocons — это бесплатный набор значков погоды, содержащий более 40 значков, доступных в форматах PSD, CSH, EPS, SVG, Desktop Font и Web Font. Их можно использовать как в личных, так и в коммерческих проектах, а шрифт Meteocons Font предоставляется в форматах Truetype и OpenType в комплекте с набором @ font-face.

Изображение: Плоские иконки PSD

Это набор из 20 красочных плоских значков в векторном формате PSD, доступных в размере 128 x 128 пикселей, вдохновленных значками Google.Это векторные слои полной формы, поэтому их можно легко редактировать и бесплатно как для личного, так и для коммерческого использования.

Flatties от UI Parade — это супер классный набор из 100 бесплатных плоских иконок. Весь набор создается из векторных фигур с разрешением 48 x 48 пикселей и поставляется в организованных форматах PSD, AI и отдельных PNG.

Вот еще один прекрасный набор простых и тонких плоских иконок от Pixeden, доступных в форматах PSD, EPS, AI и PNG. Также бесплатно доступны следующие наборы: второй, третий, четвертый и пятый.

Эти великолепные иконки социальных сетей от Design Bolts выполнены в стиле длинной тени и бесплатны как для личных, так и для коммерческих проектов. Они доступны в размерах 32, 48, 72, 128 и 256 пикселей.

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

Это набор плоских иконок от дизайнера Севи Каргвал, великолепно созданных в уникальном индивидуальном стиле.Шесть значков включают значки Safari, Instagram и чата, доступные в виде бесплатного PSD.

Изображение: Flat Icons — Pierre Borodin

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

Майкл Долейш разработал набор бесплатных красочных плоских значков с хорошо известными значками приложений, такими как Chrome, Spotify, Skype, Evernote и другими.Он доступен в формате PSD.

Это бесплатная коллекция из 35 красивых иконок в форматах PNG и PSD, которые можно использовать как в личных, так и в коммерческих проектах. Значки включают Dribbble, Facebook, Google, HTML5, Twitter и другие.

Это набор из 16 плоских иконок от Pixeden, доступных в виде бесплатного PSD. Каждый значок имеет эффект длинной тени, который легко редактируется в PSD. В набор входят основные значки социальных сетей, включая Twitter, Behance, LinkedIn, Dribbble и другие.

Изображение: Flat UI

Бесплатный плоский UI-комплект от Designmodo включает в себя набор плоских значков для основных элементов интерфейса, включая календарь, чат, покупки, часы и список задач.

Этот огромный набор, вдохновленный плоским стилем Windows 8, включает более 725 значков, а также значки для приложений, браузеров и операционных систем. Все значки также доступны в формате .ico с разрешением 256 пикселей.

Симпатичный красочный набор плоских иконок от дизайнера Buatoom, доступный в форматах EPS и PSD.Значки включают календарь, карты, камеру, окна браузера, электронную почту, заметки и многое другое.

Изображение: Альберто Валентин

Эти великолепные маленькие иконки от дизайнера Альберто Валентина доступны в формате PSD. Они идеально соответствуют плоскому стилю, с большим использованием ярких цветов и включают, среди прочего, чат, iMac и значки часов.

Это отличный набор бесплатных минималистичных социальных иконок от дизайнера Хорхе Кальво, готовый к использованию в печатных и веб-проектах.Они имеют формат EPS, полностью масштабируемы, а дизайн основан на сетке для достижения максимальной точности. Также доступна веб-версия в HTML с анимацией CSS3.

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

Александр Шульц разработал этот прекрасный набор иконок программ, доступных в формате PSD, с иконками для многих основных приложений, включая Adobe Photoshop, Illustrator и Dreamweaver, среди других.

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

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

Изображение: Flat UI Kit PSD — Martin Knize

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

Plex — это набор значков в плоском стиле только для личного использования, включающий более 119 значков в формате PNG, от Chrome, Firefox, калькулятора и HTML до VLC, YouTube и Twitter. Также доступен Square Plex, вариант этого набора.

Cosmo Mini Icons — это бесплатная версия популярных иконок Cosmo, предоставляемых IcoJam, и включает впечатляющие 1262 иконки в идеальном формате PNG 40 x 40 пикселей.

Это превосходный набор великолепно оформленных иконок в плоском стиле в формате PSD от Стафи Анатолия из Epic Coders. Значки включают Google Chrome, Gmail, YouTube, Apple и другие.

Это набор иконок в градациях серого от дизайнера Барри МакКэлви в плоском стиле с календарем, часами, камерой, калькулятором и многим другим.

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

Это еще один плоский набор иконок от дизайнера Стафи Анатолии, на котором изображены логотипы и символы самых популярных социальных сетей, таких как Dribbble, Facebook, YouTube и другие.

Изображение: Dribbble, Thiago Marques

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

Это набор тонко созданных плоских значков от студии Visual Creative в большом формате PSD с разрешением 512 пикселей. Значки включают календарь, кнопку мультимедиа, словарь и сумку для покупок.

Eldorado Mini — это бесплатная версия значков Eldorado от IcoJams, включающая более 1262 PNG 40 x 40 пикселей. Эти значки можно использовать как в личных, так и в коммерческих проектах.

Вот подборка из пяти плоских значков кредитных карт от дизайнера Яна Силбера, использующих шрифт Open Sans для единообразия.В набор входят несколько основных поставщиков кредитных карт, включая AMEX, Visa и Mastercard.

Это набор из 24 высококачественных иконок для социальных сетей, предназначенных для работы с сетчаткой, которые имеют круглую форму и яркий внешний вид и сочетают в себе два цвета. Они доступны в формате PNG в четырех различных размерах: 256 x 256 пикселей, 128 x 128 пикселей, 64 x 64 пикселя и 32 x 32 пикселя.

Набор из 30 плоских иконок социальных сетей в векторном формате, доступных для бесплатной загрузки в формате PSD. Значки включают популярные платформы, такие как WordPress, Twitter, Skype, Evernote, Dropbox и другие.

Изображение: Design Deck

Эти значки Design Deck можно загрузить как бесплатный набор из 20 или как премиальный набор, который в общей сложности включает более 800 значков. Все значки названы и сгруппированы вместе в файле PSD, который включает размеры от 32 x 32 пикселей до 512 x 512 пикселей.

Это набор из 20 простых и понятных плоских значков социальных сетей от Graphics Fuel для ваших нужд в социальных сетях. Значки создаются в размере 114 × 114 пикселей, их размер можно легко изменить и использовать для мобильных устройств или для Интернета.PSD-файл, созданный из слоев полной формы, можно легко редактировать.

Этот бесплатный пакет значков от Натана Брауна содержит 25 векторных значков в плоском стиле в одном файле PSD. Пакет имеет уникальный стиль и содержит значки для Vimeo, календаря, Facebook, Campfire, электронной почты и многого другого.

Это набор из девяти плоских иконок от дизайнера Майка Кларка, который доступен для бесплатной загрузки в формате PSD. Значки включают папку, электронную почту, чат, загрузку, блокнот и многое другое.

Пользователь Dribbble Отман Махру разработал этот набор из шести плоских значков, которые можно загрузить в формате PSD или.Формат эскиза. Махру также разработал еще один набор плоских иконок, которые доступны бесплатно.

Изображение: Dribbble

Это набор из 15 плоских пользовательских значков Adobe Creative Suite от дизайнера Тома Ньютона. Они доступны в формате .icns, и Newton даже ссылается на видео, чтобы показать вам, как изменить значки приложений на этот новый плоский стиль.

Этот пакет из 50 плоских иконок от дизайнера Мартина Книза доступен в нескольких размерах, от 48 x 48 пикселей до 512 x 512 пикселей, и доступен в формате PNG.Надстройка пакета плоских значков от Knize содержит еще 45 новых значков, и ее определенно стоит загрузить.

Это набор из 32 плоских значков от дизайнера Аллана МакЭвоя, доступных в формате .eps, что делает каждый значок легко масштабируемым и редактируемым. В набор входят многие популярные платформы, включая Dribbble, Paypal, Flickr, Dropbox, Twitter и другие.

Дриббл

От дизайнера Джареда Кеннеди, это подборка из 12 векторных иконок, доступных для бесплатной загрузки в формате PSD.Иконки выполнены в ретро-стиле и включают в себя проигрыватель фильмов, камеру Polaroid и пленку, а также более традиционные значки, такие как iPhone и чат.

Набор значков от дизайнера Вахида Анггара, этот набор включает 15 красиво оформленных значков социальных сетей в форме многоугольника, а также включает Twitter, Facebook, YouTube, Tumblr и другие популярные варианты.

Это огромный набор значков от дизайнера Мартина Книза, содержащий более 170 значков в дополнение к 45 значкам игр. Большое внимание уделяется деталям, каждая иконка имеет форму шестиугольника.Вы можете запросить дополнительные значки для включения в будущие пакеты.

Это пакет из 20 красочных плоских иконок в векторном PSD-файле от дизайнера Джагджита Сингха. Иконки имеют размер 128 x 128 пикселей, вдохновленные иконками Google и трендом плоского дизайна. Это полностью редактируемые векторы.

Изображение: Никки Хэмпсон

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

Изображение ведущего: Monkee-Boy.com, Никки Хэмпсон

430+ Современные плоские иконки для инфографики слайды PowerPoint для различных секторов бизнеса символы

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

• Статистика закупок
• Бюджет и инфографика опроса
• График разработки компании и продукции
• Повестка дня и списки функций
• Иконки для инфографики своими руками
• расширяемый набор плоских иконок для инфографики
• полностью редактируемый стиль, размер и цвета

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

Содержание пакета:

• Статистика закупок различных категорий товаров
• Процент бюджета
• Разноцветные значки опросов
• Иконки, показывающие количество людей
• График развития компании с этапами
• График разработки продукта с фазами
• Повестка дня с введением, презентацией идеи, подтверждением концепции и кратким описанием преимуществ
• Значки списка функций: удобство для мобильных устройств, расширенное настольное приложение, специальная версия для планшета, многопользовательские учетные записи, доступ к облаку
• Иконки для инфографики своими руками
• Символы для людей, пользователей, иерархии, организации, стратегии
• Иконки бизнес-концепций для идеи, ценности, глобуса, видения
• Обозначения процесса: редакция, серийный номер, параллельный
• Системные значки: входные, выходные, центральные, взаимные связи
• Финансы, деньги, торговля, документы, связь, символы состояния, значки для анализа данных, статистика, процентные числа
• График, время, значки календаря
• Промышленные символы, символы зданий и домов, недвижимость, типы жилых домов, символы жителей домов
• Тенденции и символы данных, значки безопасности
• ИТ-иконки: компьютер, мобильный телефон, оборудование, сеть, облако
• Навигация, карта, местоположение, цель, булавка, мир, символы направления
• Символы для презентации, экрана, флип-чарта, проекции данных
• Структуры организационных сетей: матрица, иерархия, исполнительное звено
• Иконки для открытий, поиска, видения будущего
• Символы новой техники: разработка, ракета, самолет, дрон
• Значки домашнего оборудования: водопровод, ключ, кисть, обновление, коммунальные услуги
• Домашние повреждения: плесень внутри и снаружи, влага, плесневые грибки, протечка воды
• Бизнес-иконы: партнерство, рукопожатие, конкуренция, сотрудничество
• Бизнес-показатели, индикаторы приборной панели, индикатор эффективности
• Головоломки, мозаика, элементы системы
• Значки правовой системы: символы закона, масштаба, защиты, правосудия и законодательства
• Значки энергии, аккумулятора, зарядки, времени, песочного таймера и песочных часов
• Катаклизмы: ураган, наводнение, град, молния, смерч, сильный ветер, смерч
• Иконки для новых участников, открытые двери, ввод и вывод системы, шаги и след
• Медицинские исследования, ДНК, символы рака
• Отчеты, документация, финансовые претензии, записка, личный идентификатор
• Большие данные и компьютерные сети, специалист по данным, аналитик, иконки открытия знаний
• Предупреждение, мошенничество, аноним, подозреваемый, вор, пиратство
• Знаки сертификации, награды и качества
• Коммуникационный процесс: общение, убеждение, переговоры
• Математические знаки: плюс, минус, равенство, процент, сумма, квадратный корень, бесконечность, знак Пи
• Индикаторы состояния и настроения: положительные и отрицательные
• Колебания символов: одобрение и неодобрение
• Символы продвижения: шары Харви и луны
• Пиктограммы для совместной работы: встреча команды, сотрудничество, сеть сотрудников
• Привычки людей: курить, пить
• Экология и переработка

Формат

Полностью редактируемые векторные фигуры с помощью встроенных инструментов PowerPoint (векторный формат), включая

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

См. Демонстрацию редактирования в наших обучающих видеороликах.

Автор

Контент и дизайн: Изабела Звиринска

Плоские иконки: тенденция в дизайне иконок

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

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

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

Изменение значков Gmail и Google Диска

Стиль значков Metro и пользовательский интерфейс от Microsoft, вероятно, самый популярный пример плоского дизайна и один из немногих случаев, когда Microsoft стала настоящим законодателем тенденций в дизайне интерфейса и значков. дизайн.

Изменение логотипа Windows

Новые значки в стиле Metro

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

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

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

Почти плоские иконки от «Пьера Бородена»

Большинство из нас уже видели программную презентацию от Apple, в которой они анонсировали новую операционную систему для своих портативных устройств, iOS 7.Как люди уже давно обсуждают, команда Джони Айва упростила интерфейс и сделала его более простым по ощущениям и дизайну. Apple наконец сообразила стремительный рост популярности этого тренда.

Превью iOS7, похоже, полностью разделили фанатов Apple. В то время как одни приветствуют новый более простой интерфейс, другие ругают очевидную непоследовательность и «плохо» оформленные значки.

Ищете нестандартные значки?

Ваше программное обеспечение популярно, а значки — нет? Узнайте, чем мы можем помочь

Получить пользовательские значки

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

Однако их значки стали наряднее.3D-иконки были заменены более плоскими изображениями; внутри каждого значка находятся изображения большего размера, которые меньше похожи на исходные рисунки. Все тени в дизайне Apple были устранены. Иконки выглядят крупнее из-за отсутствия украшений, а яркие цвета помогают различать разные значки. Радиусы углов также были немного скорректированы, чтобы еще больше отличить значки от более ранних версий iOS.

Изменение значков iOS

Финальная версия iOS 7 будет доступна осенью.У разработчиков еще есть время привести дизайн пользовательских приложений в соответствие с новым внешним видом всей системы.

Например, Skype стал намного более плоским после его покупки Microsoft и некоторого изменения дизайна в сторону плиточного Windows Phone. Приложение уже хорошо выглядит для iOS 7.

Плоский пользовательский интерфейс Skype

По мере того, как все больше операционных систем переходят на плоский дизайн, легко задаться вопросом, закончены ли, по крайней мере, на данный момент более традиционные 3D-иконки. Тем не менее, мы уже видели небольшое восстание, даже в лагере плоского дизайна, с добавлением глубины и детализации в дизайн.Я не думаю, что традиционный дизайн мертв, просто есть другой стиль, из которого можно выбирать, и оба подхода будут продолжать завоевывать поклонников среди разработчиков и пользователей в будущем.

20 бесплатных высококачественных наборов иконок с плоским дизайном

Вы можете использовать этот гигантский набор из более чем 3000 иконок в стиле плоский дизайн даже в своих коммерческих проектах. Раскрытие информации: Я основатель Iconshock, сайта, который создал и выпустил этот бесплатный набор иконок.

Этот PSD-файл содержит 9 значков в популярном стиле плоского дизайна для значка вашего мобильного приложения.

12 иконок в плоском стиле в PSD-файле.

Бесплатный PSD-файл, содержащий значки популярных социальных сетей, таких как Facebook и Twitter, разработан техасским графическим дизайнером Натаном Брауном.

5. Плоский набор социальных иконок премиум-класса

Набор из 20 бесплатных плоских иконок социальных сетей в двух вариантах: «закругленные углы» и «круги».

6. Плохое

Словацкому UI-дизайнеру Лукасу Юрику понадобился месяц, чтобы создать эти 48 плоских иконок. Теперь он раздает это бесплатно.

В этом наборе 9 плоских иконок в формате PSD.

Этот бесплатный набор иконок содержит 16 бесплатных иконок с плоским дизайном. Этот набор был вдохновлен Google. Это четвертое дополнение к этой серии наборов иконок от PIXEDEN.

9. Набор иконок для сада

Этот бесплатный набор иконок с плоским дизайном содержит 12 красиво оформленных иконок веб-дизайнером из Великобритании Шоном Дона.

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

Вот еще один бесплатный пакет из 20 чистых значков с плоским дизайном в форматах PSD и PNG.

Еще один набор иконок Натана Брауна, это набор из 25 бесплатных плоских дизайнерских иконок в одном файле PSD.

13. Бесплатные плоские иконки (от Sensational Fix)

Этот бесплатный набор из 36 иконок социальных сетей с плоским дизайном находится в форматах векторных файлов EPS и AI.Вы также можете получить версию иконок в HTML / CSS / SVG здесь.

14. Бесплатные красочные иконки (PSD)

Эти 12 ярких красивых иконок в стиле плоского дизайна представлены вам в формате PSD.

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

Этот набор интересных иконок в стиле плоского дизайна создан Майклом Шульцем из Висконсина.

Этот набор из 6 значков поставляется в форматах PSD и .sketch.

Это яркий набор бесплатных иконок с плоским дизайном.

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

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

50 бесплатных, плоских и великолепных наборов иконок для современного дизайнера

Тенденции дизайна веб-интерфейса и пользовательского интерфейса изменились.Флэт внутри, скевоморфизм отсутствует. Длинные тени присутствуют, фаски нет. Мы в DigitalSynopsis.com хотим упростить жизнь вашим творческим людям. Вот 50 потрясающих современных наборов иконок для вашего следующего веб-проекта, и угадайте, все они БЕСПЛАТНЫ!

Щелкните изображение, чтобы загрузить ссылку:

1.

70 классических иконок

2.

The Elegant Icon Font — 360 бесплатных иконок

3.

16 плоских и цветных иконок

4.

47 цветных плоских иконок

5.

Плавные края 50 иконок

6.

80 иконок линий в стиле iOS7

7.

36 значков панели вкладок iOS7

8.

It’s Flat — набор из 48 иконок

9.

Набор иконок 16 лампочек

10.

48 линейных значков

11.

42 иконки социальных сетей с длинными тенями

12.

Иконки социальных сетей с длинными тенями

13.

36 тонких икон

14.

35 тонких округлых икон

15.

84 Набор дрипиконов

16.

195 бесплатных иконок плоских флагов

17.

63 крошечных значка

18.

Иконки в стиле Facebook

19.

Значок iOS7 указывает

20.

Плоские значки устройств Apple

21.

Красивый значок Facebook iOS

22.

Плоские значки мониторов устройств

23.

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

24.

Красивая иконка часов iOS

25.

80 белых иконок

26.

Красивый значок Twitter для iOS

27.

Примечательные значки социальных сетей

28.

45 бесплатных иконок iOS для iPhone

29.

24 значка колеса настроек

30.

Еда иконы

31.

306 иконок, оптимизированных для Windows Phone, Windows 8 и BlackBerry 10

32.

Значок Google Android

33.

30 рисованных икон стиля

34.

Музыкальные иконы

35.

Сенсорные значки пальцев с жестами

36.

Знаки зодиака значки

37.

Угловые иконы

38.

Иконки в стиле Doc

39.

Иконки транспорта

40.

Иконки Windows 8 Metro

41.

Кулинария иконы

42.

Темные иконки социальных сетей

43.

Иконы путешествия

44.

Иконки платформы

45.

Простые чистые иконки социальных сетей

46.

Комплект Dark UI

47.

Иконки мобильных устройств

48.

Иконки Android

49.

Социальные сети Go

50.

33 иконки электронной коммерции

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

Не пропустите:

• 39 красивых цветовых палитр для вашего следующего дизайн-проекта
• 25 великолепных бесплатных шрифтов для вашего следующего дизайн-проекта
• 36 красивых цветовых градиентов для вашего следующего дизайн-проекта (с шестнадцатеричными кодами)
• 27 Красивых бесплатно Шрифты для вашего следующего дизайн-проекта
• Преобразуйте любое изображение в стильный дуплекс с помощью этих 7 бесплатных экшенов Photoshop
• 15 отличных комбинаций шрифтов Google для вашего следующего дизайн-проекта

.