Новый год, Рождество, снег, обилие иллюминации, праздничные площадки в городах, сопутствующие мелодии на ТВ и радио, тематическое оформление всего и вся от открыток до приглашений, рекламных акций и, разумеется, дизайнов сайтов. Это именно то время, чтобы начать думать о способах украшения графических проектов (не только веб-дизайн). Казалось бы, что уже столько всего рассказано было ранее, а ведь тема из года в год себя не исчерпывает.
Мы уделим внимание в большей степени вопросам, связанным с дизайном сайтов, а также коснемся и полиграфии. Чуть-чуть, по той причине, что идеи и отдельные моменты, стили, композиционные решения всегда можно применить и на страницах сайта, в оформлении домашней странички и так далее. Фокус же кроется в том, чтобы создать нечто такое, что будет выглядеть стильно и празднично, а не безвкусно и чрезмерно. Вот некоторые интересные мысли о том, на что стоит обратить внимание, о чем задуматься и что лучше использовать.
Кроме того, мы немного «порисуем» в Photoshop праздничную картинку. Несложная она, но не сразу можно догадаться, как она делается (идея, техника). Пара шагов, а эффект волшебный! В прошлом году мы уже рассказывали, как сделать свитерную вязку и создать узор.
За металл
Нет, погибать не нужно! Наоборот всё. Ничто не способно заставить людей улыбаться и чувствовать себя празднично, как маленький блеск и искра, блик и свечение. Смело добавляйте металлический элемент или выбирайте специальные эффекты, если это уместно.
Эффекты фольги или глиттера (блески) для шрифтов и фигур могут быть одними из самых классных и впечатляющих находок в вашем распоряжении. И они совершенны для новогодних проектов. Добавьте серебра или сусального золота шрифтам, слоям, элементам. Даже без большого количества других праздничных слов или надписей, вы можете создать праздничное ощущение с этой техникой.
И вот некоторые подборки стилей 70 Free Golden Photoshop Layer Styles, Gold and Silver Styles PS, Golden Text Style. Помните, что используя готовый стиль, его всегда можно отредактировать и изменить цвет. Как сделали мы, вместо золотого -> серебро в стилях наложения.
При этом такие металлические эффекты хороши на небольших по размеру элементах. То есть, суть в том, чтобы добавить каплю праздничности, «игристости», но не превращать всю композицию в обилие блесток. Можно обойтись и без металлического блеска и просто изменить цвет шрифта на золотой или серебряный, если в обычные дни он имеет иной цвет.
Новый год не для всех
Суть в том, что в зависимости от аудитории вашего сайта, не всегда уместно оформлять дизайн на новогодне-рождественскую (второе в большей степени) тематику. Вероятно, иногда уместно оформить просто в зимнем стиле, с акцентом на зимние развлечения, совместные игры и так далее. Для этого подойдут зимние сцены, соответствующие цвета и изображения, чтобы создать праздничное настроение для пользователей, но при этом одинаково подходящее для любого события. Просто выберите сцену для данного времени года, универсальную и используйте дополнительные клипарты (снежки, человечки, катки, елки и прочее).
Это отличный вариант для веб-сайтов, интернет-магазинов (сувениры, разные товары в целом). Веб-дизайнеру не придется беспокоиться о возможном оскорблении пользователей, поскольку можно соответствующе в строгом стиле оформить и праздничные карты, которые отправляются коллегам по бизнесу и использовать рождественские мотивы в случае необходимости. Этот не секулярный подход к праздничному дизайну может быть немного более уместен, когда вы работаете с широкой или неизвестной аудиторией. И конструкции могут выглядеть так же хорошо. На примерах ниже компании как раз и использовали только зимнюю тематику, без акцента на какие-либо конкретные праздники.
Стилизованный шрифт
Рождественские проекты предлагают дизайнерам особую возможность применения и отрисовки типографики, которую они не могут попробовать в любое другое время года. Подумайте о местах, где на самом деле допустимо использовать легкие написания или стилизацию детского почерка.
Важно: очень интересный шрифт New year one (там же на форуме и иные отличные примеры). Обратите внимание, что им не пишут «свой» текст, а используют уже готовый с помощью букв латинского алфавита. Нажимаете А – надпись готова, S – другая, D – тоже и так далее. А затем уже можно у надписи менять размер, цвет, накладывать эффекты, стили и так далее.
Не нужно лишних и сложных слов. Обычные фразы: «Веселого Рождества», «счастливых праздников» и так далее – хорошо знакомы всем и постоянно на слуху и на виду каждый год. Но именно они дают возможность поэкспериментировать со шрифтом, который немного сложнее читать, зато он эмоционально корректен для использования в данный сезон.
Без акцента на красном и зеленом
Одновременно с тем, как красные и зеленые цвета связываются и ассоциируются с праздниками Рождества и Новым годом, не стоит постоянно заострять на них внимание и пытаться совместить с вашей палитрой, тем более, если вся эта совокупность не сочетается.
Начнем с палитры, особенность холодных цветов – создание атмосферы зимней прохлады, снега, метели и так далее. Таким образом, палитра включает в себя пурпурные, синие и зеленые оттенки. Отлично будет, если палитра также дополнится металлическими эффектами, если вам необходима эта техника.
Кроме того, не нужно полагать, что каждый год и каждую зиму вы вынуждены собирать совершенно новую цветовую палитру. Смешайте ваши фирменные цвета с цветами праздника. Поиграйте с оттенками, стилями. Но при этом главное – всё, что вы создаете, должно быть отражением вашего стиля дизайна.
Подводя небольшой итог, давайте посмотрим на некоторые проекты, имеющие в своем дизайне праздничную тематику. Это может быть стилизация именно для Нового года или просто зимний антураж. Речь идет о вариациях: Дед Мороз на Новый Год, dochkisinochki (тематические игры, оформление, разные палитры), korablik. (аналогично: фоны, темы, композиции, слайдер), примеры сцен 1, 2, 3, feelwelcometree, hoosierlotterymystery, Новогоднее оформление.
Photoshop и мощь бенгальских огней
Использовать металлический стиль для шрифта, эффект фольги для элементов – отлично и, наверное, самое простое. Стили найти в интернете можно без труда, текстуры тоже. Но представим, что хочется нечто более сложное и праздничное. Например то, что подойти может не только к зимним праздникам. Вот и попробуем это «нечто» создать. Условно, так как идей для вдохновения у всех может быть очень много.
Сразу отметим, что кисточки мы будем использовать готовые – бенгальские огни.
Для начала подбираем фон, пишем текст нужного размера и желаемым шрифтом. К тексту можно применить разные стили зимние, льдистые и так далее. Уже одного этого при более ярком фоне, чем у нас, будет достаточно, а если добавить огоньков или бликов, то и тем более.
НО…
Переходим на текстовой слой, зажимаем CTRL + кликаем по этому же слою и у нас появляется выделение. Теперь переходим в окно Контуры и кликаем по нижней пиктограмме «Сделать из выделенной области рабочий контур». У нас появился контур.
Скрываем текстовой слой, добавляем новый и готовим кисточку.
Выбираем обычную «круглую заостренную», берем маленький размер в нашем случае и в разделе «Передача» параметр «Колебание непрозрачности» выставляем как нравится, но мы выбрали побольше. В окне просмотра можно заметить, что кисточка будет оставлять «рваный» след.
Ничего не рисуя, выбираем слева внизу белый цвет, переходим на Перо и кликаем ПКМ по контуру. Выбираем в меню «Выполнить обводку контура», затем Кисть и имитацию нажима. Как видите, у нас получился нечеткий край, будто запорошен инеем, не полностью покрыты границы и так далее (от значения колебания непрозрачности).
Вариант нас устраивает, поэтому мы рисуем дальше.
Важно: Если вам кажется, что нужно сделать ярче или полностью создать границу, то снова кликаете Пером по контуру, выбираете Кисть, но имитацию можно уже отключить.
Добавляем новый слой, переходим на Кисть и выбираем бенгальский огонек. Размер подберите вручную, попробуйте нарисовать штучку-две на границе текста и определите, какой размер вас устроит.
Мы подобрали размер 45. Теперь открываем окно Кисти и переходим на «Динамику формы». Здесь «Колебание размера» и «Колебание угла» устанавливаем на максимум. Обратите внимание на то, что в окне предпросмотра изменится кисточка. Каждый шаг теперь становится не копией предыдущего, а самостоятельным вариантом. В разделе «Передача» параметр непрозрачности можно оставить по умолчанию, можно увеличить. Тут снова решение за художником. И остался параметр «Интервал». Его можно поставить большим, тогда огоньки будут кое-где по контуру, или малым – огоньки будут «друг на дружке».
Опять переходим на Перо, кликаем по контору и выполняем обводку с имитацией нажима. Помните, все обводки делаются на новых слоях.
Можно периодически удалять контур, смотреть результат, а затем нажимать CRTL+Z и возвращать его обратно.
Добавляем новый слой. Берем другой огонек, более крупный, «яркий» и сложный. Размер его берем также более заметный. Параметры формы снова меняем на максимум, но вот колебание непрозрачности устанавливаем на ноль, так как нам требуется, чтобы все крупные точки были четкими. Интервал шагов почти максимум. Кисточка крупная, поэтому если интервал будет маленьким, то эффекта огней попросту не будет.
Переходим на Перо и делаем обводку контура без имитации нажима. Убираем контур, смотрим, если устраивает, то и не возвращаем его более. Нам он не нужен.
Тем не менее, добавляем новый слой, берем еще крупней огонек (другой по форме) и кое-где кисточкой кликаем на уголочках.
Собираем слои в группу и добавляем к этой самой группе режим наложения «Внешнее свечение». ПКМ по папке и из меню делаем выбор.
Свечение… А какой у вас фон? Палитра какая? Можно сделать его красным, желтым, голубым или серым, зеленым или оранжевым. Решать, увы, вам. Во «Внешнем свечении» выбираем цвет и в зависимости от сочетания с фоном подбирайте режим наложения либо Экран, либо Осветление основы или Линейный осветлитель. Также подберите размер и непрозрачность.
Вот и надпись готова.
Аналогично можно добавить произвольные фигуры и их отрисовать в огоньках или иных текстурах. Создать композицию, используя отдельные объекты-фигуры (ниже Пера в инструментарии). Или попросту на титульной странице или для слайдера нарисовать небольшое изображение красивой надписью.
Вариаций много, идей неограниченно. Вариант фона позаимствовали у Steam и тоже решили украсить.
Завершение
Несмотря на то, что праздник зимы происходит в нашей жизни один раз в год, то лучше всего украшать дизайн простыми способами. Не стремитесь сразу и металлик добавлять, и рядом бенгальские огни, и шарики с векторным клипартом, фоточки – все в одну кучу. Иногда придерживаться одному стилю во всем дизайне сайта – лучшее решение. На следующий год можно попробовать что-то новое.
Хороший рождественско-новогодний дизайн отличается тем, что добавляет только капельку атмосферности, тонкую нотку, что вызывают большие и яркие ассоциации. Обратите внимание, что многие сайты не использовали соответствующей атрибутики в оформлении. Они обошлись снежинками, сугробами, бликами, блестками и не более. Это уже человеческая фантазия объединяет, сопоставляет и думает о Новом годе, либо он наступает или вот только что наступил. При этом сайты не теряют своего брендинга, общего, привычного за многие годы стиля.
Иными словами, какими бы не были чувства самого веб-дизайнера в новогодние недели, но дизайн сайта должен поддерживать целостность стиля, сочетаемость цветов и элементов. А что касается праздничного оформления, то оно вне трендов.
С праздниками!
