От автора: в данной статье мы рассмотрим примеры и способы того как оживить 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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.