Творческая работа веб-дизайнера включает в себя множество разных этапов и нюансов. Это не только разметка сетки, расположения элементов, отрисовка кнопочек, линий, размещение заголовков и картинок. Это также и поиск вдохновения, поиск не просто градиентов, но интересных цветовых сочетаний; это долгие изучения большого числа наборов иконок и шрифтов и прочее, и прочее. И если честно, то как раз последнее бывает сделать сложнее всего.
Согласитесь, обычно мы быстро продумываем, где и что будет располагаться на странице, но вот каким это все «нарисовать», как «разукрасить» – становится уже сложнее придумать. Хотя о том, что новое – это хорошо забытое старое, тоже вспоминается не всегда, а если вспоминается, то нет представления в мыслях, как «обыграть» посовременнее.
В этом материале мы посмотрим на некоторые ресурсы и инструменты, которые не только используются веб-дизайнерами в разной степени частотности, но также и позволяют найти вдохновение, интересные решения для дизайна, может даже попробовать что-то новое для себя. Это и возможности по работе со шрифтами, подборы иконок, фонов и прочее, и прочее. Рабочий процесс не всегда заключается только в том, что есть Photoshop, плюс аналог или дополнительное приложение и ресурсы с работами разных дизайнеров (Awwwards, Behance, cssdesignawards и др.). Очень и очень не лишними бывают и разного рода инструменты для более частной работы.
Font Playground
Занятный шрифтовой инструмент, что позволяет веб-дизайнерам «играть» с разными параметрами шрифтов и даже экспортировать программный код CSS. Все шрифты и их изменения ведут себя так, словно дизайнер работает с каждым параметром через отдельный файл, когда как в действительности все изменения сохраняются в одном общем файле конкретного шрифта.
Поэкспериментировать в этом инструменте, как минимум, интересно. Можно, например, таким образом подобрать интересные начертания, вариации, увидеть результат в режиме реального времени и гораздо быстрее перенести понравившийся результат в свой проект. И подготовить данные стиля CSS, с тем, чтобы шрифт верстальщик мог правильно описать. Если выделить текстовое поле, то можно ввести текст на родном языке, и уже для него подбирать соответствующий шрифт и начертание.
Pair & Compare
Видоизменять шрифт это одно, как и менять его параметры, придумывать интересные начертания. Но совсем другое – видеть, как такой шрифт будет выглядеть непосредственно в дизайне, насколько текст будет читабельным и визуально воспринимаемым.
Pair & Compare как раз и позволяет подобрать нужный шрифт. Причем выбирать можно из тех шрифтов, что установлены на РС пользователя (вашем) и из базы Google Fonts. Кроме того, существуют и отдельные настройки размера, курсивности, веса, межстрочного интервала, цвета.
Существуют также и глобальные настройки цвета, стиля абзаца, размера текстового блока и прочего. И можно выбрать редактируемый текст: заголовок, основной контент. Получившийся результат можно скопировать в CSS код.
И самое важное для читателей – текст можно набрать свой (на русском языке) и, тем самым, подобрать нужный кириллический шрифт. Для этого выделите существующий текст, удалите и наберите свой. И заголовок тоже можно менять. И тогда откроется режим редактирования шрифта отдельно для каждой секции.
Необычно, но главное – наглядно. Да, времени занимает такой подбор немало, но зато есть возможность в режиме реального времени увидеть качество получаемого текста.
Цветовое колесо
О цвете и его подборе мы рассказывали много, но вот и еще один вариант подбора цветов. Возможно, некоторым он покажется более удобным, чем множественные его аналоги.
Итак…
Мы имеем само колесо из разного количества цветовых кружочков. В центре вы можете написать сами число количества нужных вам цветов, например 1, 3 или даже 256. Мы для примера выбрали 23.
Слева ползунками можно настроить Яркость, Насыщение, Оттенок цветов в целом. Затем нам требуется подобрать интересный голубой цвет. Мы кликаем ЛКМ по кружочку и появляются справа дополнительные настройки исключительно для этого цвета. Манипулируем ползунками и получаем насыщенный синий.
Кроме того, все цвета, с которыми вы работаем в круге, автоматически описываются в формате hex и показываются рядом в столбике. Если у вас 256 цветов, то и значений в столбике будет столько же (список длиннющий будет).
Итог: необычно и удобно. Можно все это проделывать ив Photoshop, но тут уж кому как удобнее и нагляднее.
Шкала
Необычное название для данного инструмента. Тем не менее, суть инструмента Scale в том, что веб-дизайнеры получают возможность увидеть цветовую шкалу от темного к светлому оттенку в пределах выбранного цвета.
Например, мы выбрали сиреневый цвет #9A64E4 и видим, что при 14 цветах до исходного оттенки расположились на линии. Но мы можем выбрать параметры: насколько темнее будут конечные тона, какой будет сдвиг в сторону ближайшего цвета, насколько светлыми будут оттенки справа и сколько их будет. Вот такая необычная шкала цветового оттенка была создана.
Все параметры настаиваются либо ползунками, либо путем вписывания чисел в соответствующее поле. Уже затем к выбранному оттенку можно подвести курсор и увидеть hex-код цвета.
CoolHue
Разносторонний инструмент по подбору градиентов. С одной стороны – это библиотека coolhue.json, которая пригодится верстальщикам. Но все эти же готовые наборы можно внедрить и в Photoshop. На страничке проекта есть ссылка на файл *.grd.
После этого, достаточно выбрать инструмент «Градиент» в Photoshop, перейти на панель управления, кликнуть по шестерёнке и добавить загруженный файл. Новые градиенты появятся автоматически и можно их применить.
Как говорится: градиентов много не бывает. Вообще, в веб-дизайне всего много не бывает, в чем есть выбор. Разумеется, что каждый такой градиент в отдельности можно отредактировать, немного осветлить, например, или чуть изменить оттенок и прочее. Но сами заготовки подобраны очень красивыми и приятными визуально.
Gradient Joy
Еще один ресурс по работе с градиентами. Здесь интересен даже не тот факт, что есть очень много разных градиентов в базе. Инструмент позволяет выбрать его размер.
Например, в дизайне страницы, в макете, уже известно, что некоторая область размером 350х600px будет залита градиентом. Можно создавать прямоугольники, отдельно их заливать, и другие варианты. Но! Можно перейти в базу, выбрать градиент, а затем указать нужный размер. И готово.
Соответствующий адрес градиента потом указывается в коде страницы, а во время работы сайта сам градиент автоматически будет подгружаться из интернета. Примеры ниже.
UnDraw
Если попробовать описать ресурс в двух словах, то это большая база изображений в SVG-формате. Но особенность в том, что все изображения здесь бесплатные и без авторства. Можно настроить у всех изображений цветовую гамму: вверху страницы есть цветной квадратик, кликнув по которому и выбирается выбор цветовой темы.
Если же кликнуть по понравившейся картинке, то можно либо загрузить вариант PNG для использований в блогах или творчестве, либо кликнуть ПКМ по все той же зеленой кнопке и выбрать «Открыть в новой вкладке». Тогда само SVG-изображение откроется в соответствующем формате (SVG), но оригинальное по цвету.
Free Illustrations
Еще одна большая база бесплатных векторных иллюстраций на разные темы и для разных задач. Все картинки разбиты на темы, загружаются архивом и еженедельно обновляются. Но вот художник у них один – Лукаш Адам (Lukasz Adam).
Внутри архива находится одно изображение в формате PNG (для изображений) в очень и очень большом разрешении. Поэтому масштабировать, редактировать, перекрашивать, вырезать и удалять что-то не составит труда. Все крупно, четко и аккуратно.
В коллекции можно найти иконки (форматы PNG и SVG), логотипы, узоры (pattern), отдельные композиционные изображения на разные темы, картинки и многое иное. Что же касается стилистики, то немного графики, линейности, художественности и ярких красок – все, что сейчас в тренде и не устареет еще долгое время.
Free Icons
Эльмира Гокорян представила на Behance свою коллекцию линейных иконок на разные темы. Загрузить их можно бесплатно и использовать так, как нравится. Некоторые иконки анимированы, некоторые нет. Имеются внутри форматы для каждого изображения AI/EPS/PNG и три цветовые темы (черно-белое, цветное, монохромное). Всего в коллекции 150 разных иконок для сайтов, приложений и прочих проектов.
В свою очередь, Хенрик Остергаард создал коллекцию из 200 векторных иконок для Adobe Illustrator.
А если требуются совсем уж по конкретной тематике, то существует, например, подборка иконок на медицинскую тему. Всего их 60, представлены в трех различных стилях, подписаны, что обозначают, имеют два формата PNG и SVG. На сайте автора все подробненько рассказано и показано.
Pixelify
Постоянно обновляемая коллекция дизайнерских работ от шрифтов до фотографий, изображений, узоров, psd-макетов и прочего, и прочего. Таких ресурсов-баз много, но это относительно новое и работы зачастую здесь уникальные.
Вы можете загружать свои работы, использовать чужие. Существуют платные и бесплатные. И все работы очень красивые.
Завершение
В веб-дизайне «в дело отправляются» самые разные инструменты и ресурсы. Дизайнеры используют практически все, что можно только себе вообразить, даже возможности по анализу эффективности UI и психологические аспекты влияния цветов на состояние человеческой души и эмоций.
Мы рассмотрели только самое необходимое, что может пригодиться в работе с практически любым приложением/веб-сайтом. Хотя, впрочем, если вы создаете только графику или готовите фоновые изображения, фотографии, то и эти ресурсы вам подойдут. Сочетания и подборы шрифтов, настройка их параметров, цвета и градиенты, иконки, базы с изображениями и фонами – то самое и главное, что всегда приводит в ужас любого дизайнера. Ведь сайты могут быть похожими по структуре, но отличаться такими, казалось бы, на первый взгляд, мелочами, как иконки или количество векторных рисунков, их стилем, тематикой. Иконки для меню и навигации тоже можно частенько увидеть похожими друг на друга на разных сайтах, но цвет, толщина линий, даже отдельные элементы изображения могут быть разными или вовсе отсутствовать. А уже одно это меняет восприятие дизайна в целом.
Создание сайтов, как и рисование карандашами на бумаге, очень творческое занятие, которое редко хочется делать по шаблону. Но приходится всегда помнить, что в одни проект всего и сразу не «запихнешь».