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

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

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

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

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

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

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

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

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

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

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

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

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

Смещения

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

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

Полутона в Adobe Illustrator

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

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

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

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

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

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

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

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

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

Автор: Alex Walker

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

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

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

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

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree