Когда вы думаете о пространстве, одна из первых ассоциаций, приходящих на ум - «космос». В 1957 году Советский Союз вывел на орбиту первый искусственный спутник. Это стало знаковым историческим событием для всего мира, без преувеличения, не только нашей страны. Мы же, спустя столько лет посмотрим, как используется тематика космоса в веб-дизайне и как можно быстренько создать нечто фантастическое в Photoshop.
Хитрость проектирования «космического дизайна» (будем его так называть в дальнейшем) в том, чтобы избежать общих клише и ловушек. Но общий темный фон и наличие звёздных россыпей могут изменяться от проекта к проекту. Давайте для начала посмотрим на некоторые примеры космического дизайна и соберем советы, когда же такая тема может хорошо сработать для посетителей, конверсии, маркетинга.
Космические идеалы
Космос – довольно модный элемент в дизайне, особенно после того, как Дисней взялись за «новое старое» развитие франшизы Звездных войн, а очередные части Звездного пути продолжают выходить с завидной регулярностью. О космосе много говорят в новостях, особенно после открытия новой планеты (девятой). Кроме этого во многих других проектах, будь это сайт дизайнерской студии или бизнес-компании, в той или иной мере используются отдельные элементы космической тематики.
Такие дизайны содержат темные цветовые схемы в сочетании с чистым белым цветом и яркой насыщенной типографикой. Контент особенно хорошо вписывается в общую структуру, если относится тематически к космосу. Если же тематика сайта не относится к космосу, то лучше избегать явного графического оформления. Лучшим вариантом бывает использовать отдельные элементы.
Звездное небо
Совершенно не нужно долго искать или скрупулёзно создавать созвездия. В веб-дизайне куда проще использовать очертания, общую схему стиля созвездий. Создавайте сетку с помощью точек и соединительных линий и, таким образом, глаз будет цепляться именно за внешнюю похожесть. Например, сайт Британского музея использует эту идею весьма качественно. На первый взгляд, вы можете подумать, что яркие цвета и линии указывают на тематику космоса, но в действительности это временная шкала.
Анимация
Чтобы темные фоны смотрелись более интересными, не лишним бывает добавить немного анимации. Это привлечет посетителей, заинтересует их. Анимацию можно создать на отдельном слое или в виде параллакса с меньшим содержанием тематического цвета. Обычно дизайны создаются с темным фоном, включая темно-синие, фиолетовые, черные цвета. В качестве контраста применяется белый к тексту или кнопкам для привлечения внимания.
Проекты cryptarismission и inspacewetrust представляют два совершенно разных подхода к использованию анимации в космической тематике. Один из них - анимированная мультяшна игра с большими элементами и фотографиями космоса. Герой одет в скафандр, соответствующий шлем и смотрит в небо на спутник.
Другой проект выглядит более скромно, но включает в себя темную тему с легким акцентом космоса. Дополнительно же быстрое движение втягивает человеческий взор в конструкцию, которая олицетворяет собой движение со скоростью света.
Хотя оба эти проекта сильно отличаются друг от друга, они, в одинаковой степени, хорошо используют космическую тематику. А это уже, в свою очередь, подтверждает тот факт, что космическая концепция универсальна и адаптивна под разные цели и задачи.
Подсознание
С помощью концепции космического пространства в дизайне можно создать только подсознательное видение данной тематики. Существует огромное количество фотографий или объектов, фигур, которые никоим образом не связаны с космосом, но мысль о нем навеивают. Достигается это с помощью цвета, формы и звездного неба. Посмотрите на свои любимые космические снимки и перед вами ясно предстанет общая модель подачи материала и темы.
Основное изображение проекта Acerbis напоминает стилизацию и предприятия из Стар Трека. Словно из сцены открытия ангара изображение дает нам представление о том, что нас ожидает на сайте. И на других станицах сайта используются похожие изображения.
Но это не более чем ассоциация с космической тематикой, а не очевидное использование темы. И для такого подхода достаточно использовать всего несколько небольших изображений или стилизованных иконок. Надо отметить, что дизайн свеж, интересен и современен. Это одна из хороших экстатических черт космической дизайна.
Среди косметических глубин
После того как мы рассмотрели множественные способы, подразумевающие использование космической темы, есть очевидный вариант: просто нырнуть в эту тему и использовать её в неизменном виде. Начните играть с темным фоном и использовать звезды, планеты, свечения и блики, трехмерные пейзажи и невообразимое количество глубины.
Ключом к хорошему созданию дизайна служит полное соответствие графического исполнения и содержания контента, типографики. Можно ли добиться такого соответствия? Начините со слов-ассоциаций и любое слово может оказаться резонирующим для вашего проекта. Вот небольшой набор: орбита, галактика, колонии, СМИ, трансфер, солнце, технология, планеты, бесконечность, неизвестность, относительность, обширность, разведка, агентства, вселенная, станция, солнечная, линейная и прочее.
Космическая тематика, действительно, может работать в нескольких совершенно разных проектах, о которых вы раньше и не думали. Два следующих примера являются довольно разными – консалтинговая фирма и рекламное агентство.
Один использует темные фон и звездное небо только на главной странице, но уже при прокрутке страницы мы можем видеть множество людей и описание деятельности. Другой проект полностью создан в космическом дизайне и стилизованный фон есть на всех страницах. При этом каждый дизайн работает и визуально интересен, хотя и воспринимаются совершенно по-разному.
Космос в Photoshop
Не всегда при работе с космическим дизайном уместно использование фотографий космического пространства, созвездий и туманностей. Зачастую, веб-дизайнерам достаточно создать условный вид космоса. Разумеется, что для этого можно найти изображения и арты в интернете, а можно минут за 20-30 нарисовать самому.
Вариантов создания звездного неба в Photoshop много, но мы расскажем вам наиболее простой и наглядный. Откроем новый документ и выберем Фильтр - > Шум -> Добавить шум. Эффект устанавливаем максимальный, монохромный (цветность нам не нужна) и распределение по Гауссу. Создаём копию этого слоя (Ctrl+J) и её отключаем.
Для фонового слоя применяем Фильтр - > Размытие -> Размытие по Гауссу и устанавливаем значение на 0,5 пикселя. Суть в том, чтобы размыть шум, но совсем немного, едва заметно.
И теперь запускаем Редактирование - > Коррекция -> Уровни (Ctrl +L) и редактируем первые два значения слева (200 и 0,64 в нашем случае). Смысл в том, чтобы фон сделать полностью черным, а точки остались наиболее яркие, но и в немалом количестве. Иными словами, у вас должно получиться среднестатистическое звёздное небо в ясную погоду.
Возвращаемся ко второму слою (который мы отключали ранее). Включаем и размываем его по Гауссу на 2 пикселя или чтобы замыленность была более ощутимой. Открываем окно коррекции Уровней и, меняя все также два значения (169 и 1,00 у нас), добиваемся того, чтобы фон был черным, а из точек были только самые яркие. Их, разумеется, будет мало (как впрочем, и в реалии). Теперь размываем их еще раз по Гауссу так, чтобы они чуть-чуть были смазанными, не резкими.
Следующее, что нам нужно, это перейти на вкладку Каналы и выделить наши точки на слое-копии. Внизу панели есть соответствующая иконка, кликаем её и создаем еще один новый слой. Проверим, что цвета установлены у нас по умолчанию (черно-белый) и при активном слое 2 нажимаем Ctrl+Delete. Это зальет наше выделение (точки) белым цветом на новом фоне. Но по факту вы этого не заметите из-за маленького размера точек. Снимаем выделение и открываем Стиль слоя (наложения). Добавляем Внешнее свечение, белое, нормальное. А вот размер и размах подбирайте на свой вкус и цвет.
Объединяем наши слои Ctrl+E и создаем новый черный слой. Добавляем Фильтр -> Рендеринг -> Облака и делаем для этого слоя режим наложения Осветление основы. Добавляем еще один слой между облаками и нашими звёздами, делаем его активным и берем мягкую кисточку большого размера с непрозрачности в 10%. Начинаем прокрашивать звезды, как нам нравится. Меняем цвет кисти и добавляем новые мазки.
Небо с туманностями, звездами и скоплениями – готово. Слои можно собрать в группу или объединить на новый слой небо (Ctrl+Shift+Alt+E), и переходим к созданию планеты. Впрочем, можно поработать с космическим кораблем, кометой, или вспышками облаков. Тут уже зависит от вашей фантазии.
Находим текстуру поверхности планеты, обычно земля-скалы. Её размер не важен. Открываем в Photoshop и инструментом Выделение -> Овальная область создаем ровный круг (Shift зажимаем у угла и ведем выделение). Копируем на новый слой (Ctrl+J).
Переходим в Фильтр - > Искажение -> Сферизация и устанавливаем 100% искажение. Получившееся изображение переносим в наш проект со звёздным небом. Разумеется, что придется увеличить или уменьшить размер планеты или спутника.
Создаем новый слой, делаем его активным, но зажимая Ctrl, кликаем по слою с планетой. Таким образом, на новом пустом слое у нас появляется выделение. Заливаем его черным цветом и добавляем слой-маску. Снимаем скрепочку и сдвигаем сам слой чуть ниже. Это позволяет нам создать тень от света на обратной стороне планеты.
И теперь по отдельности для слоя с планетой, тени и маски применяем эффекты наложения Внешнее свечение, Внутреннее свечение и Размытие по Гауссу. Это нужно для того, чтобы четких краев на изображении не было, а было всё плавным, градиентным.
Можно добавить блик, наложить отдельные облака или вспышки и многое иное. По факту, наше изображение космоса готово.
Заключение
Мы смогли немного задеть ваше любопытство? Космический дизайн – довольно модная концепция в последние несколько лет и, скорее всего, таковой останется еще какое-то время. С точки зрения же веб-дизайна – это твердая и устоявшаяся концепция с акцентом на большое количество пустого пространства, минимализм и контраст цветов. Это отличная возможность для применения синемаграфов, неона, параллакса, каллиграфии, фотографий и видео. Иными словами, космос – одна из тех идей, которая очаровывает всех посетителей и позволяет достаточно сильно привлечь их внимание к самому сайту или даже контенту.