Как оживить flat дизайн сайтов точечным шаблоном (примеры). Flat дизайн примеры сайтов


Flat design примеры сайтов, дизайн флэт

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

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

https://dribbble.com/rikitanone

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

Принцип №1: долой ненужные эффекты

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

https://dribbble.com/dylanopet

Принцип №2: чем проще, тем лучше

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

Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

Принцип №4: цветовые акценты

Не только шрифт, но и цвет —существенная часть в «плоском» дизайне.

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

https://dribbble.com/fffabs

Принцип №5: выбор в пользу минимализма

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

http://www.flatvsrealism.com/

Плоский или почти плоский? Ищем компромисс!

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

Плоский дизайн и Материал дизайн: В чем их отличие

Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.

Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

https://www.behance.net/gallery/45942097/Resourse-UIUX-Tool-for-Web-Services

rpilot62.ru

5 примеров «плоского» веб-дизайна | Блог | Разработка и дизайн сайтов и мобильных приложений

Сейчас, когда тенденция создания flat или «плоского» дизайна сайтов широко распространена, мы отобрали для вас 5 отличных примеров его применения. Но для начала вспомним, почему «плоский» дизайн за последние несколько лет стал, де-факто, синонимом современного веб-дизайна.

Чем же так хорош «плоский» дизайн?

Во-первых, минимализм как неотъемлемая часть плоского дизайна предоставляет лаконичность выразительных средств и ясность композиции. Здесь уместно вспомнить главный девиз минимализма — «Ничего лишнего!». Избавившись от чрезмерного украшательства и графических эффектов, повторяющих свойства реальных обьектов, интерфейс стал более «цифровым».

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

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

Примеры «плоского» веб-дизайна

http://www.gogoro.com

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

https://www.lily.camera

Классический «плоский» дизайн: крупные заголовки, плоские кнопки и контрастные картинки. Такой дизайн отлично подойдет для вашей продающей посадочной страницы. Иллюстрации выполнены в одном стиле с использованием одинаковой цветовой палитры, что повышает целостность сайта. Благодаря скролл-анимации страницу изучать интересно и легко. Таким сайтом хочется поделиться с друзьями, это несомненный плюс для любого сайта.

https://airbnb.com

Популярная площадка для бронирования жилья Airbnb в 2014 году провела масштабный редизайн. Плоский UI веб-дизайн избавился от градиентов и теней, и теперь лучше справляется с задачей предоставления информации пользователю. На сайте используются плоские елементы форм и минимум цветов. Крупные фотографии помогают решению главной задачи нового дизайна — облегчают пользователям сервиса принятие решения о бронировании жилья.

http://dunked.com

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

http://www.vox.com

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

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

Работать с нами!

Об авторе

Руководитель отдела дизайна

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

Похожие статьи

Вернуться к списку записей К списку записей

stfalcon.com

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

29 марта 2013

С выходом Windows 8 и Metro UI все больше дизайнеров и разработчиков интерфейсов стали создавать сайты в дизайне которых используются только плоские элементы. И если пол года назад такие сайты воспринимались как что-то необычное, особенно в сравнении с другими интернет ресурсами, то сегодня их можно увидеть гораздо чаще и такого восторга они уже не вызывают. Развитие этого направления привело к появлению нового стиля — плоский дизайн (на английском он называется flat-design). О нем мы подробно рассказываем в нашей постоянной рубрике «Плоский дизайн».

Главное отличие плоских сайтов — использование минималистического подхода, при котором из интерфейса и дизайна в целом, удаляются все 3D-элементы, градиенты, тени и другие украшательства. На передний план выходят простые, строгие и понятные формы, но не в ущерб дизайну. Больший акцент уделяется тексту, меньший — графике. Такой подход позволяет устранить лишние шумы на странице, которые могут отвлекать пользователей. Главную же роль в плоском дизайне играет цвет. Его используют без боязни, выбирая по пять, шесть или более основных цветов, без учета дополнительных (например, для показа таких состояний как hover, focus, active и других). Этот выбор сделан намеренно, чтобы сайт не казался скучным.

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

womtec.ru

24 лучших примера "плоского дизайна 2.0"

На сегодняшний день плоский дизайн развился в нечто не столь… плоское. Райан Аллен, один из авторов издания Dapper Gentlemen, описывая новую модификацию старого тренда, использует термин «плоский дизайн 2.0». В недавней статье он детально изложил свое видение относительно плоского дизайна в его прежнем виде и того, во что он вылился сегодня. Также Аллен немного пролил свет на причины описываемых явлений.

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

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

Световые эффекты, тени, плавные цветовые переходы, градиенты и др.

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

Cybeer Bar

У Cybeer Bar, согласно канонам жанра, присутствует упрощенная плоская стилистика, но вместе с тем и высокая детализация объектов, чего стоит хотя бы деревянная барная стойка. Еще одна особенность — предназначение каждой детали тщательно продумано.

Christmas with Joy

Christmas with Joy с помощью иллюстраций, выполненных в плоском дизайне, демонстрирует занятные версии известных всем рождественских персонажей. Среди прочих присутствует Ded Moroz и его милая внучка Snegurochka, которые разъезжают на своей тройке и раздают подарки. Но нам придётся ещё немного подождать до Нового года.

Инструкции Dropbox

Эскизы Dropbox Guidelines можно рассматривать как заигрывание с реализмом, но, как бы то ни было, дизайн выглядит достаточно просто, чтобы считаться плоским. Ключевая особенность – сочетание ярко-синего, красного и простых шрифтов.

450 GSM

Веб-дизайн 450 GSM можно было бы назвать плоским, если бы не тень от птицы. Этот ресурс разрабатывался с помощью сервиса Startup Design Framework, который позволяет создать красивый сайт за короткое время.

Intercom  

Темно-голубой фон, стильные иконки, ненавязчивая типографика — вот основные детали плоского дизайна сайта Intercom. Характерная черта – округлые края иконок и кнопок.

Agency Survival Kit

Минимализм и пастельный красный, как правило, не согласуются с принципами плоского дизайна, но благодаря текстуре и мягким теням книгу «Набор для выживания агентства» можно отнести к направлению 2.0.

Hell‘o Baby

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

Helbak

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

Paye Ton Caps 

Графическое оформление этой онлайн-игры — самый что ни на есть плоский дизайн 2.0, с непритязательными формами предметов и приглушенными тенями.

CSS Conference EU

Традиционная цветовая палитра в сочетании со множеством деталей делают сайт CSS Conference EU ярким образчиком плоского дизайна.

Take It

Используется наложение слоев. В дизайне сайта, призванного популяризировать приложение Take It, фотографии дополняются плоскими мотивами. Городской ландшафт на заключительном слайде выполнен в типично плоской стилистике.

Google Santa Tracker

Flat 2.0, очевидно, очень подходит для рождественской тематики. Сайт Google Santa Tracker доказывает, что плоский дизайн и минимализм не всегда идут рука об руку. Множество индивидуальных деталей и беспрерывная анимация — снежные сугробы и транспорт, курсирующий на заднем плане, — делают эту страницу весьма любопытной. Размытые образы деревьев на переднем плане в сочетании с параллакс-скроллингом создают 3D-эффект.

For Better Coffee

Сайту немного не хватает теней, но множество деталей и контрастирующие цвета все-таки вынуждают отнести его к направлению Flat 2.0.

Dots

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

Quotes Magazine

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

Stash Flat Icons

Плоский дизайн сайта Stash Flat Icons рекламирует иконки для такого же дизайна. Ресурс отличает светлая цветовая гамма и обычная типографика, а равно и иконки с забавными персонажами.

Acapo

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

Liberio

Liberio — очередной пример, который можно внести в учебник по плоскому веб-дизайну: светлые цвета, скромные шрифты (за исключением названия компании), гладкое и крайне упрощенное изображение планшета.

Kaipoche

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

Team Treehouse

Team Treehouse тяготеет к старомодной интерпретации плоского стиля, и в то же время в иконках обильно присутствуют детали 2.0.

SCEATT

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

Evolve Wealth

Дизайн Evolve Wealth, как и SCEATT, отличается от сайтов других финансовых компаний теплой атмосферой и юмором.

Black Tomato

Еще одна веб-страница, в которой удачно сочетается графика и фотографии. Контраст между снимком в HD-качестве и громоздкой стилизацией в виде мультипликационной графики акцентирует внимание на главном.

Lander

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

В заключение

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

Продолжаем наблюдать за дальнейшей эволюцией Flat Design…

rusability.ru

Flat дизайн или современный подход к дизайну сайтов

Что такое Flat дизайн? Включите ноутбук и посмотрите на интерфейс Windows 8. Microsoft Metro – это и есть классический образец плоского пользовательского интерфейса.

Впервые в интернете заговорили о Flat User Interface, когда вышла пресловутая Восьмерка. И если с последней все еще ничего не ясно, то, с подачи майкрософтовских дизайнеров, Flat UI прочно вошел в индустрию веб-разработки в качестве новейшего модного тренда.

Кому это нужно?

А вы не забыли о смартфонах и планшетах? Маркетинговая статистика показывает – сегодня много больше половины пользователей заходят на сайты именно с мобильных устройств. Не говоря уже о eCommerce – порядка 70% всех покупок в интернете совершаются с переносных девайсов.

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

Инфографика

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

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

Визуальные образы воспринимаются мозгом в 50 раз быстрее текстовой информации.

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

  • Красный цвет активизирует физиологические процессы и возбуждает. Вот почему в супермаркетах активно эксплуатируются оттенки красного с целью увеличить продажи.
  • Розовый соответствует романтизму и нежности. Продаете женскую одежду и белье? Окрасьте стены модного бутика в Pink.
  • Зеленый успокаивает, вызывает доверие. Вы заметили, что в банках очень много зеленого?
  • Синий способствует мышлению и пониманию сложных вещей. Рекомендовано к применению в книжных магазинах и техномаркетах.

Почему Flat дизайн лучше

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

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

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

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

designfire.ru

Красочные примеры плоских веб-дизайнов | RUDEBOX

Плоский дизайн это новая тенденция, приглянулась сообществам в качестве веб- интерфейса с выходом всеми «ожидаемой» Metro UI. Большая часть посетителей плавно переходят на новую эко-систему, хотя сама компания признала ее запуск полным фиаско, но дизайн приглянулся веб-мастерам, а именно ее плоский дизайн, минимализм и простота решений. Если раньше такие сайты воспринимались как диковинка в интернете, то сейчас все больше разработчиков делают опору на данный интерфейс. Метро-стиль стал представителем красивых, плоских дизайнов.

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

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

1. SpellTower

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

2. Kickfolio

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

3. Lorenzo Verzini

Лоренцо итальянский арт-директор и дизайнер из Лондона, который охватил плоский стиль для дизайна очень хорошо.

4. Oak.is

Oak.is-сайт предназначен для создания шрифтов и прочих графический заплаток. Сайт выполнен в минималистическом стиле и радует глаз своей простотой.

5. Etchapps

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

6. Microsoft

Сайт компании Microsoft является отличным примером сайтов выполненных в плоском стиле, именно они начали моду на подобные сайты.

7. It’s a shape Christmas

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

8. Invoisse

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

9. Built By Buffalo

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

10. Rdio

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

11. Lowdi

Сайт притягивает взор интерактивными страницами и неординарным построением материала на сайте, выполнен сайт в хороших оттенках с интересной навигацией.

12. CottagePages

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

Читайте также:

www.rudebox.org.ua

Как оживить flat дизайн сайтов точечным шаблоном (примеры)

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

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

Сначала Microsoft применила плоский дизайн, а затем Android и iOS стали плоскими и упрощенными. И в конце концов, все это объединилось под одной теорией Material дизайна.

И в целом, это правильный путь развития веб-дизайна. Вес графических файлов снизился, что ускорило их загрузку, интерфейс стал проще и менее загроможденным. Однако вы можете возразить, что уже в нашем 2015 году множество сайтов стали «одинаковыми».Всегда ведь приятно придать дизайну ту самую теплоту (логотипы, UI, иллюстрации и т.д.), не загромождая визуальный ряд?

Надеваем ретро очки

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

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

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

Скажите привет Mr. Retro

Создатель плагина Mr Retro для фотошопа заработал себе на жизнь своим детищем. Каждый из его фильтров имитирует естественные неровности и шероховатости, как в старых бумажных распечатках. Дефекты, используемые в фильтрах:

Бумажное волокно

Точки полутона

Смещения

Чернильные капли и подтеки

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

Полутона в Adobe Illustrator

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

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

Chris Spooner (Spoon Graphics) за несколько лет собрал замечательную коллекцию ресурсов – в том числе и эти точечные шаблоны. Можете скачать себе их совершенно бесплатно.

Давайте добавим эти точки в мою иллюстрацию.

1). Откройте полутона в AI, выделите все шаблоны и вставьте их на новый пустой слой, пока что можете скрыть этот слой. В вашей палитре образцов должны появиться новые шаблоны, как на рисунке ниже:

2). Скопируйте задний фоновый рисунок на самый верх.

3). Кликните по любому образцу, и ваше изображение получит эффект полутона. Просмотрите все шаблоны и выберите понравившейся.

4). Точки в шаблоне черного цвета, поэтому я уменьшаю непрозрачность слоя, чтобы они не бросались в глаза.

5). Повторите эти действия со всеми нужными вам изображениями.

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

Автор: Alex Walker

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

webformyself.com