Новогодние праздники уже в пути! Несмотря на то, что сейчас только еще середина ноября веб-дизайнеры начинают задумываться о том, как преобразить уже имеющийся сайт или каким создать совершенно новый. Начиная уже с декабря в интернете начнут, как грибы после дождя, появляться стилизованные и визуально обновленные проекты. И совершенно неважно, отмечается ли в России Рождество в конце декабря или в начале января, дизайн сайтов все равно меняется. Ибо Новый год – он общий, он для всех един. Уже в частных случаях некоторые страны отмечают его в феврале или июне.
Сегодня мы начнем ряд материалов, в которых посмотрим на то, как можно преобразовать сайт, какие элементы уже сейчас готовы к наступлению 2018 года. Возможно, вам покажется, что ничего конкретного нет или слишком все обобщено. Но наша цель – посмотреть именно на общие черты, на варианты оформления основного и главного в дизайне сайта. Вариаций снеговиков или новогодних иконок множество, но использование их все равно отталкивается от стилистики проекта. Если строгость и минимализм, то линейные варианты будут лучше, а если заказчик хочет яркости и праздничности, то придется попросту сменить их на стилизованные: обычные или даже с длинными тенями.
Как пример – большие подборки фотобанков freepik и All Free, а также и Pinterest.
А теперь…
Новогодняя страница
Очень часто сайты электронной коммерции готовят праздничные обновления. К этим датам приурочиваются и многочисленные акции: рождественские, сезонные. Таким образом, появляются рождественские лэндинги и посадочные станицы, рассказывающие о некотором продукте, товаре, скидках и прочем.
Ежегодно можно увидеть, как интернет-магазины Ozon, Boots, utkonos, Лэтуаль преображаются и создают тематические предложения. Например, британский магазин Boots уже начал понемногу готовить и загружать оформление. Так специальные предложения имеют соответствующий стиль.
Google ежегодно наблюдает за путешествием Санта-Клауса к новогодней елке santatracker. Радар открывается 24 декабря, но уже сейчас существует достаточно большая тематическая база на сайте.
Достаточно часто целевые станицы превращаются в игру, а если точнее – на них начинается обратный отсчёт дней до Нового года. Ежедневно посетители получают некий «подарок», если заходят на промо-страницу. Например, 30days.ubi.com от компании Ubisoft предлагали ежедневно, начиная с 24 декабря, зайти на промо-страницу и получить некий подарок (обои на рабочий стол, иконки, поделки и прочее). Аналогично uxmas предлагал ежедневно узнать о новых статьях на сайте, которых ранее никогда и не было вообще-то.
Польский проект polishchristmasguide решил рассказать об особенностях национального Рождества и Нового года. Так, управляя Санта-Клаусом, можно узнать о блюдах, одежде, традициях и многом другом в Польше.
Allstate Holiday Decorator до сих пор предлагает заняться новогодней декорацией дома, а затем сохранить свое творчество в виде открытки и подарить друзьям.
Непростое оформление
Создавать оформление для готового сайта или начинать с нуля – равнозначно непросто. Придется подумать о стилизованном логотипе со снеговиком или Дедом Морозом (Санта-Клаусом). Не забыть о елке, если не в явном виде, то нарисованной светящимися звездными линиями.
Фон также меняется. Это могут быть целые сюжетные новогодние фотографии и изображения; могут быть текстуры снежинок и снега; текстуры тесненного полотна. Вот, например, небольшая подборка интересных фонов: Green christmas background, Rustic vintage Christmas, Christmas-Holiday Photo, Christmas seamless patterns, Christmas Backgrounds. Да, вы будете правы, когда скажите, что многие из примеров платные. Но ведь это наборы, а не одна картинка, да и цена-то не слишком «кусачая». А если посетить банк Creative Market, то можно найти и еще множество идей, от стилизованных фотографий до шрифтов, наборов иконок, полосок, кнопочек, блоков и многого, многого иного. И, разумеется, что в любом фотобанке существуют такие тематические подборки. Или, например, здесь.
Снег. Он особенно важен. Если вы не стремитесь использовать стилизованные иконки, клипарты снеговиков и деда-мороза, то одного снега, единичных снежинок и световых фотоэффектов вкупе с элегантными текстурами фона для секций тоже будет достаточно. И вот как это уже использовали на landsend и llbean.
Несмотря на строгий дизайн в целом, чувство праздника все равно есть.
Мы рассмотрели общие черты праздничного веб-дизайна, но нужно помнить, что принцип оформления все равно остается единым. Замените фон, добавите немного снега и звездочек, золотой и серебряной пыльцы на рамки блоков, вокруг товаров, обновите немного шрифт или создайте россыпь снега вокруг больших букв. И это уже начало большого преображения.
Photoshop встречает Новый год
Несмотря на то, что в интернете много можно найти элементов для праздничного новогоднего оформления, обращаться за помощью к Photoshop все равно приходится. Частенько не хватает фотографии стилистической, сюжета или композиции, которые есть в обычном виде, но нет в зимнем оформлении. Именно поэтому сегодня мы покажем как можно, используя только один Photoshop и стандартные средства, превратить любую летнюю фотографию в зимнюю, а добавив снежинки, свечение и немного блеска, превратить её в новогоднюю. Да, и ведь полдела по оформлению будет сделано!
Для примера, возьмем самую обычную летнюю фотографию природы. Весь смысл работы сводится к удалению теплых оттенков, наложению снега и метели. И, разумеется, создавать будем максимально реалистичную фотографию.
Открываем наше изображение, делаем копию слоя и добавляем корректирующий слой «Цветовой тон/Насыщенность». Для каждого цвета из списка мы убираем ползунок насыщенности. Цель – обесцветить теплые тона и придать зимней тусклости. Красный не всегда стоит регулировать, а вот Желтый и Зеленый отвечают обычно за цветность травы и листвы. Голубые и Пурпурные позволяют отрегулировать небо. Зимой чисто голубое небо невозможно увидеть при снеге и метели. Если выбрать только параметр «Все» и убрать насыщенность, то изображение просто превратиться в черно-белое, что нам совсем не нужно. Все-таки зимой цветность существует. Небольшая, но она есть.
Теперь переходим на наш рабочий слой с фотографией и выбираем Выделение -> Цветовой диапазон. Наша задача: настроить контрастность изображения в целом. Поиграйте с разбросом и выборочно с цветами. Там, где цветовые пятна белые и серые затем появится снег.
Нажимаем Ок и видим, что на фотографии появилось выделение. Не трогая его, добавляем чистый слой между корректирующим и фотографией. И заливаем его белым цветом Ctrl+Backspace. Чудо получилось! Наше изображение полностью покрылось слоем снега! Возможно, его слишком много, может, мало. Вы можете вернуться в окно Цветового диапазона и подкорректировать данные.
Для данного белого слоя снизим непрозрачность или заливку до желаемых. Во время снегопадов и метелей вдалеке мало что видно, поэтому скрытость горных массивов, в данном случае, допустима. Добавим слой-маску и мягкой кисточкой противоположного цвета (если у вас маска добавляется белая, то кисть – черная и наоборот) с маленьким нажимом и малой непрозрачностью прорисуем те места, где сильного заметеливания не требуется. Мы обработали дальний план с горами, но сделали это, словно бы, сквозь дымку.
Теперь придадим немного контраста. Создаем копию нашего фонового слоя, перемещаем в начало всего списка слоев и выбираем режим наложения Мягкий свет. Уменьшаем прозрачность до 20% в среднем. При необходимости открываем корректирующий слой с Цветовым тоном и регулируем цвета. Задача в том, чтобы придать немного цвета изображению. Сухая трава под снегом не серая и не черная, она бежево-серая. Хвойные деревья (ели и сосны в нашем случае) остаются зеленоватыми и серовато-коричневыми. Поэтому цветность этим деталям нужно вернуть, но малую толику. На фотографии вид композиции сверху и издалека, а значит, снег будет закрывать собой большую часть композиции.
Создадим общий тон. Создаем новый слой, заливаем его нежно-голубым цветом (#7bbdf6), выбираем режим наложения Мягкий цвет и снижаем непрозрачность. В результате, у нас получилось изображение словно бы за пеленой снега, изморози, холода.
Снег. Создаем новый слой, заливаем белым цветов и переходим Фильтр -> Шум -> Добавить шум. Эффект выбираем 100%, по Гауссу и монохромный.
Добавляем Размытие по Гауссу в 1 px и ставим режим наложения данного слоя на Экран. Снегопад всё запорошил. Много его… Уменьшим.
Переходим в меню Изображение -> Коррекция -> Уровни и смешаем ползунки теней вправо, чтобы уменьшить плотность белого шума до тех пор, пока не получится легкий снегопадик.
Создадим еще один слой со снегом, как и ранее, но добавим третий фильтр Размытие в движении под углом в 60 градусов и смешением в 10 px. Режим наложения – Экран и корректируем Уровни (Ctrl+L) с тем, чтобы получился снегопад. Поскольку этот снегопад должен быть на переднем плане, то выделяем слой Ctrl+T и увеличиваем его. Снежинки становятся реже, крупнее.
Но глубины и реалистичность еще нет. Повторим все то же самое (создадим Слой 6), что делали со слоем 5, но в фильтре Размытие в движении выберем противоположный угол наклона – 32 градуса. Также корректируем уровни и выделяем снежинки.
В случае необходимости можно подкорректировать и предыдущие слои, добиваясь реалистичности снежного покрова. Можно даже немного добавить желтой листвы, ибо, возможно, это еще ранний снегопад поздней осенью. Или, наоборот, убрать так сильно, словно уже сугробы лежат.
Можно добавить надписи, снежинку, наложить эффекты, блоки с меню, информационные карточки акции и прочее и прочее… Тут уже выбор за веб-мастером остается, но принцип тонировки и создания снега мы показали.
Выводы
Рождество и Новый год – праздники, которые отмечаются во всем мире. Сказочные, волшебные, веселые для детей и взрослых, они дарят много хороших моментов в жизни. И интернет тому не исключение. Вспомните, насколько приятно посещать красивый и праздничный сайт накануне самого праздника. Насколько сильно это влияет на эмоции и настроение. А как сильно хочется заказать красиво оформленные товары и только спустя время задуматься: а они нужны?
Новогодний веб-дизайн не ставит строгой цели следовать трендам и клише. Можно оформлять промо-страницы на самый разный вкус и цвет, использовать яркие фоны или приглушенные зимние антуражи. Иконки красно-зеленые или линейные. Все это остается на выбор дизайнера. Главным остается – настроение. Зимнее, праздничное, веселое и… такое… доброе. Зачастую, даже размещения одной стилизованной фотографии и пары снежинок хватает, чтобы преобразить проект.
Идей для творчества много, а без них создать тематическое обновление попросту не получится.