Как сделать страницу космос
Космические Темы В Веб-Дизайне И Photoshop
Космический дизайн – довольно модная концепция в последние несколько лет и, скорее всего, таковой останется еще какое-то время. Как используют эту тему веб-мастера и как создать самому космос в Photoshop расскажем ниже.
Хитрость проектирования «космического дизайна» (будем его так называть в дальнейшем) в том, чтобы избежать общих клише и ловушек. Но общий темный фон и наличие звёздных россыпей могут изменяться от проекта к проекту. Давайте для начала посмотрим на некоторые примеры космического дизайна и соберем советы, когда же такая тема может хорошо сработать для посетителей, конверсии, маркетинга.
Космические идеалы
Космос – довольно модный элемент в дизайне, особенно после того, как Дисней взялись за «новое старое» развитие франшизы Звездных войн, а очередные части Звездного пути продолжают выходить с завидной регулярностью. О космосе много говорят в новостях, особенно после открытия новой планеты (девятой). Кроме этого во многих других проектах, будь это сайт дизайнерской студии или бизнес-компании, в той или иной мере используются отдельные элементы космической тематики.
Такие дизайны содержат темные цветовые схемы в сочетании с чистым белым цветом и яркой насыщенной типографикой. Контент особенно хорошо вписывается в общую структуру, если относится тематически к космосу. Если же тематика сайта не относится к космосу, то лучше избегать явного графического оформления. Лучшим вариантом бывает использовать отдельные элементы.
Звездное небо
Совершенно не нужно долго искать или скрупулёзно создавать созвездия. В веб-дизайне куда проще использовать очертания, общую схему стиля созвездий. Создавайте сетку с помощью точек и соединительных линий и, таким образом, глаз будет цепляться именно за внешнюю похожесть. Например, сайт Британского музея использует эту идею весьма качественно. На первый взгляд, вы можете подумать, что яркие цвета и линии указывают на тематику космоса, но в действительности это временная шкала.
Анимация
Чтобы темные фоны смотрелись более интересными, не лишним бывает добавить немного анимации. Это привлечет посетителей, заинтересует их. Анимацию можно создать на отдельном слое или в виде параллакса с меньшим содержанием тематического цвета. Обычно дизайны создаются с темным фоном, включая темно-синие, фиолетовые, черные цвета. В качестве контраста применяется белый к тексту или кнопкам для привлечения внимания.
Другой проект выглядит более скромно, но включает в себя темную тему с легким акцентом космоса. Дополнительно же быстрое движение втягивает человеческий взор в конструкцию, которая олицетворяет собой движение со скоростью света.
Хотя оба эти проекта сильно отличаются друг от друга, они, в одинаковой степени, хорошо используют космическую тематику. А это уже, в свою очередь, подтверждает тот факт, что космическая концепция универсальна и адаптивна под разные цели и задачи.
Подсознание
С помощью концепции космического пространства в дизайне можно создать только подсознательное видение данной тематики. Существует огромное количество фотографий или объектов, фигур, которые никоим образом не связаны с космосом, но мысль о нем навеивают. Достигается это с помощью цвета, формы и звездного неба. Посмотрите на свои любимые космические снимки и перед вами ясно предстанет общая модель подачи материала и темы.
Основное изображение проекта Acerbis напоминает стилизацию и предприятия из Стар Трека. Словно из сцены открытия ангара изображение дает нам представление о том, что нас ожидает на сайте. И на других станицах сайта используются похожие изображения.
Но это не более чем ассоциация с космической тематикой, а не очевидное использование темы. И для такого подхода достаточно использовать всего несколько небольших изображений или стилизованных иконок. Надо отметить, что дизайн свеж, интересен и современен. Это одна из хороших экстатических черт космической дизайна.
Среди косметических глубин
После того как мы рассмотрели множественные способы, подразумевающие использование космической темы, есть очевидный вариант: просто нырнуть в эту тему и использовать её в неизменном виде. Начните играть с темным фоном и использовать звезды, планеты, свечения и блики, трехмерные пейзажи и невообразимое количество глубины.
Ключом к хорошему созданию дизайна служит полное соответствие графического исполнения и содержания контента, типографики. Можно ли добиться такого соответствия? Начините со слов-ассоциаций и любое слово может оказаться резонирующим для вашего проекта. Вот небольшой набор: орбита, галактика, колонии, СМИ, трансфер, солнце, технология, планеты, бесконечность, неизвестность, относительность, обширность, разведка, агентства, вселенная, станция, солнечная, линейная и прочее.
Космическая тематика, действительно, может работать в нескольких совершенно разных проектах, о которых вы раньше и не думали. Два следующих примера являются довольно разными – консалтинговая фирма и рекламное агентство.
Один использует темные фон и звездное небо только на главной странице, но уже при прокрутке страницы мы можем видеть множество людей и описание деятельности. Другой проект полностью создан в космическом дизайне и стилизованный фон есть на всех страницах. При этом каждый дизайн работает и визуально интересен, хотя и воспринимаются совершенно по-разному.
Космос в Photoshop
Не всегда при работе с космическим дизайном уместно использование фотографий космического пространства, созвездий и туманностей. Зачастую, веб-дизайнерам достаточно создать условный вид космоса. Разумеется, что для этого можно найти изображения и арты в интернете, а можно минут за 20-30 нарисовать самому.
Возвращаемся ко второму слою (который мы отключали ранее). Включаем и размываем его по Гауссу на 2 пикселя или чтобы замыленность была более ощутимой. Открываем окно коррекции Уровней и, меняя все также два значения (169 и 1,00 у нас), добиваемся того, чтобы фон был черным, а из точек были только самые яркие. Их, разумеется, будет мало (как впрочем, и в реалии). Теперь размываем их еще раз по Гауссу так, чтобы они чуть-чуть были смазанными, не резкими.
Следующее, что нам нужно, это перейти на вкладку Каналы и выделить наши точки на слое-копии. Внизу панели есть соответствующая иконка, кликаем её и создаем еще один новый слой. Проверим, что цвета установлены у нас по умолчанию (черно-белый) и при активном слое 2 нажимаем Ctrl+Delete. Это зальет наше выделение (точки) белым цветом на новом фоне. Но по факту вы этого не заметите из-за маленького размера точек. Снимаем выделение и открываем Стиль слоя (наложения). Добавляем Внешнее свечение, белое, нормальное. А вот размер и размах подбирайте на свой вкус и цвет.
Небо с туманностями, звездами и скоплениями – готово. Слои можно собрать в группу или объединить на новый слой небо (Ctrl+Shift+Alt+E), и переходим к созданию планеты. Впрочем, можно поработать с космическим кораблем, кометой, или вспышками облаков. Тут уже зависит от вашей фантазии.
Создаем новый слой, делаем его активным, но зажимая Ctrl, кликаем по слою с планетой. Таким образом, на новом пустом слое у нас появляется выделение. Заливаем его черным цветом и добавляем слой-маску. Снимаем скрепочку и сдвигаем сам слой чуть ниже. Это позволяет нам создать тень от света на обратной стороне планеты.
И теперь по отдельности для слоя с планетой, тени и маски применяем эффекты наложения Внешнее свечение, Внутреннее свечение и Размытие по Гауссу. Это нужно для того, чтобы четких краев на изображении не было, а было всё плавным, градиентным.
Можно добавить блик, наложить отдельные облака или вспышки и многое иное. По факту, наше изображение космоса готово.
Заключение
Мы смогли немного задеть ваше любопытство? Космический дизайн – довольно модная концепция в последние несколько лет и, скорее всего, таковой останется еще какое-то время. С точки зрения же веб-дизайна – это твердая и устоявшаяся концепция с акцентом на большое количество пустого пространства, минимализм и контраст цветов. Это отличная возможность для применения синемаграфов, неона, параллакса, каллиграфии, фотографий и видео. Иными словами, космос – одна из тех идей, которая очаровывает всех посетителей и позволяет достаточно сильно привлечь их внимание к самому сайту или даже контенту.
Лучшие работы для конкурса #642идеикосмос
«Если не можешь улететь в космос, сделай так, чтобы он прилетел к тебе». Автор фото — @al.ex_kv.
Автор фото — @kenza_lu
Автор фото — @iwanbakari
Автор фото — @lytvinenkoyliya_art
Автор фото — @oikkka
Автор фото — @stany_cosmosom
Автор фото — @sharokma
Автор фото — @very_shabby
«And when darkness sleeps beside you, And the morning is far away, I wanna hold your hand and guide you…» Parov Stelar ft. Lilja Bloom — Shine. Автор фото — @julia_owlie.
Автор фото — @mishkakosolapa
Кликните на картинку, чтобы проголосовать за одного из четырех финалистов:
Пошаговый мастер-класс
Если вы не участвовали в конкурсе, но тоже хотите научиться рисовать космос, сохраните себе куда-нибудь эти пошаговые инструкции, что и как делать, чтобы получилось ярко и красиво.
1. Для того чтобы нарисовать Вселенную, достаточно всего 3-4 цветов. По крайней мере, с такого количества можно начать. Важно: лист для акварели должен быть очень плотным, чтобы он не сморщивался от воды и чтобы краска красиво и равномерно растекалась.
2. Контур можно обрисовать твердым простым карандашом, чтобы обозначить пространство, которое вы будете мочить водой. Намочите часть выделенного пространства.
3. Нанесите на смоченную область краску. Постарайтесь, чтобы контуры были красивыми.
4. Намочите оставшуюся часть пространства водой и нанесите краску другого цвета. Выборочно сделайте яркие вкрапления по всему рисунку. Рисунок должен быть влажным, чтобы краска красиво растеклась.
5. После того, как рисунок полностью высох, нанесите звезды. Это можно сделать белой или желтой краской с помощью старой зубной щетки.
6. Некоторые звезды можно прорисовать тщательнее.
Если посыпать соль на невысохший рисунок, то структура космоса получится еще интереснее. Соль впитает часть краски, и стряхнув ее после полного высыхания, на месте соли будут красивые белые точки и облака.
В нашем творческом инстаграме @miftvorchestvo мы регулярно будем проводить конкурсы по блокнотам «642 идеи, что нарисовать», «642 идеи, о чем написать» и «642 идеи, о чем еще написать» (новинка!). Подписывайтесь, чтобы быть в курсе всего творчески-интересного и креативно-веселого.
Как сделать страницу космос
Неделю назад в нашем творческом инстаграме @miftvorchestvo мы запустили конкурс на рисование акварельного конкурса. Вы можете посмотреть все работы по тегу #акварельныйкосмосконкурс. Публикуем лучшие рисунки и даем пошаговый мастер-класс, как научиться рисовать космос акварелью.
Пошаговый мастер-класс
Если вы не участвовали в конкурсе, но тоже хотите научиться рисовать космос, сохраните себе куда-нибудь эти пошаговые инструкции, что и как делать, чтобы получились яркие и красивые переливы. Публикуем урок от Леонардо Перезнието.
Материалы
Акварель:
Кисти из белки:
Шаг первый. Смешиваем краски
Закрепите акварельную бумагу на деревянной доске малярным скотчем. Смешайте оранжевый со светлым красным кадмием. Должен получиться светло-алый оттенок. Далее смешайте глубокий красный с марганцовой фиолетовой и каплей индиго, чтобы получить вишнево-красный оттенок. Потом добавьте делфте синий к индиго для получения темно-синего. И последняя смесь — прусский, перманентный и темный кобальт зеленый, фталоцианин, чтобы получить средне-зеленый.
Если у вас нет всех этих цветов, задачу можно упростить и рисовать просто теми цветами, которые у вас есть. Итог все равно получится интересным.
Шаг второй. Наносим цвета на бумагу
Разместите мольберт под небольшим углом и намочите водой всю бумагу чистой водой кистью-шваброй. Ей же в верхнем левом углу нанесите темно-красный и светло-красные цвета. Правый нижний угол закрасьте синим оттенком. Кисть № 8 нанесите зеленый оттенок по диагонали — из левого нижнего угла в верхний правый угол.
Шаг третий. Добавляем детали
Работать нужно достаточно быстро, пока бумага еще влажная. Кистью № 4 усильте некоторые участки и заполнить все пробелы любой краской, какой вам захочется.
Старайтесь избегать смешивания дополнительных цветов (например, желтого и фиолетового, красного и зеленого, синего и оранжевого) друг с другом, так как это приведет к мутности цвета.
Шаг четвертый. Усиливаем цвета
Как только краска начнет высыхать, нанесите еще один слой краски сверху для усиления цвета. Не забывайте каждый раз промакивать кисточку, прежде чем брать новый оттенок.
Шаг пятый. В игру включается соль
Когда вы закончите наносить краску и будете довольны сочетанием цветов и их яркостью, посыпьте на рисунок зерна крупной соли. Она впитает воду и заберет часть цвета, оставив красивые разводы в виде туманностей. Дождитесь полного высыхания и аккуратно соскоблите соль.
Шаг шестой. Добавляем чистые цвета
Мы сделали лишь половину работы! Снова намочите всю поверхность водой и закрепите цвета их чистыми аналогами, используйте для этого кисть № 2. Чтобы получить чистый яркий цвет, добавляйте меньше воды в краску и не смешивать краски на палитре, а берите прямо из контейнера.
Шаг седьмой. Затемняем края
Пока бумага еще влажная, смешайте лазурь и черную слоновую кость. Кистью № 4 нанесите краску по краям листа, вокруг границ туманности. Только не наносите краску в виде черной рамки, вспомните как выглядят туманности — в виде вытянутого эллипса. На этом этапе нам пригодится ткань, которую можно использовать для поглощения краски, чтобы смягчить края.
Шаг восьмой. Добавляем звезды
Дожидаемся полного высыхания и используем кисть № 2 для финальных штрихов. Чтобы добавить звезды в наш космос, положите мольберт на горизонтальную поверхность. Возьмите в не ведущую руку палочку (или другую кисточку) и держите ее параллельно бумаге. Наберите на кисточку в ведущей руке титановые белила и делайте легкие удары кистью о палочку так, чтобы крошечные белые частицы краски попадали на вашу картину. Добавьте «вручную» несколько звезд тонкой кистью № 0.
Дайте рисунку высохнуть, снимите малярную ленту. И вот он, ваш космос!