Космические Темы В Веб-Дизайне И Photoshop

Космические Темы В Веб-Дизайне И Photoshop

Когда вы думаете о пространстве, одна из первых ассоциаций, что приходит на ум — «космос». В 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 кликаем по слою с планетой. Таким образом, на новом пустом слое у нас появляется выделение. Заливаем его черным цветом и добавляем слой-маску. Снимаем скрепочку и сдвигаем сам слой чуть ниже. Это позволяет нам создать тень от света на обратной стороне планеты.

И теперь по отдельности для слоя с планетой, тени и маски применяем эффекты наложения Внешнее свечение, Внутреннее свечение и Размытие по Гауссу. Это нужно для того, чтобы четких краев на изображении не было, а было всё плавным, градиентным.

Можно добавить блик, наложить отдельные облака или вспышки и многое иное. По факту, наше изображение космоса готово.

Заключение

Мы смогли немного задеть ваше любопытство? Космический дизайн – довольно модная концепция в последние несколько лет и, скорее всего, таковой останется еще какое-то время. С точки зрения же веб-дизайна – это твердая и устоявшаяся концепция с акцентом на большое количество пустого пространства, минимализм и контраст цветов. Это отличная возможность для применения синемаграфов, неона, параллакса, каллиграфии, фотографий и видео. Иными словами, космос – одна из тех идей, что очаровывает всех повелителей и позволяет достаточно сильно привлечь их внимание к самому сайту или даже контенту.



Сохрани статью себе в соцсеть!




Комментарии ( 0 )
    Оставить комментарий

    Ваш электронный адрес не будет опубликован. Обязательные поля помечены *