Как сделать страницу космос

Неделю назад в нашем творческом инстаграме @miftvorchestvo мы запустили конкурс на рисование акварельного конкурса. Вы можете посмотреть все работы по тегу #акварельныйкосмосконкурс. Публикуем лучшие рисунки и даем пошаговый мастер-класс, как научиться рисовать космос акварелью.

Автор фото — @juleekho

Автор фото — @shagero.alled

Автор фото — @kamarkovskaya

Автор фото — @arlyapovaeireen

Автор фото — @katrin_is_art

Пошаговый мастер-класс

Если вы не участвовали в конкурсе, но тоже хотите научиться рисовать космос, сохраните себе куда-нибудь эти пошаговые инструкции, что и как делать, чтобы получились яркие и красивые переливы. Публикуем урок от Леонардо Перезнието.

Материалы

Акварельная бумага горячего прессования формата А4 или А3;
Малярный скотч;
Мольберт или деревянная доска;
Палитра;
Контейнер воды;
Кусок ткани;
Соль в крупных кристаллах.

Акварель:

оранжевый;
красный кадмий;
марганцовая фиолетовая;
делфте синий;
лазурь;
индиго;
прусский зеленый;
зеленый фталоцианин;
перманентный зеленый;
темный кобальт зеленый;
блестящий сине-фиолетовый;
хром оранжевый;
кадмий светло-желтый;
черная слоновая кость;
титановые белила.

Кисти из белки:

Кисть-швабра;
Кисть № 0;
Кисть № 2;
Кисть № 4;
Кисть № 8;
Кисть № 12.

Шаг первый. Смешиваем краски

Закрепите акварельную бумагу на деревянной доске малярным скотчем. Смешайте оранжевый со светлым красным кадмием. Должен получиться светло-алый оттенок. Далее смешайте глубокий красный с марганцовой фиолетовой и каплей индиго, чтобы получить вишнево-красный оттенок. Потом добавьте делфте синий к индиго для получения темно-синего. И последняя смесь — прусский, перманентный и темный кобальт зеленый, фталоцианин, чтобы получить средне-зеленый.

Если у вас нет всех этих цветов, задачу можно упростить и рисовать просто теми цветами, которые у вас есть. Итог все равно получится интересным.

Шаг второй. Наносим цвета на бумагу

Разместите мольберт под небольшим углом и намочите водой всю бумагу чистой водой кистью-шваброй. Ей же в верхнем левом углу нанесите темно-красный и светло-красные цвета. Правый нижний угол закрасьте синим оттенком. Кисть № 8 нанесите зеленый оттенок по диагонали — из левого нижнего угла в верхний правый угол.

Шаг третий. Добавляем детали

Работать нужно достаточно быстро, пока бумага еще влажная. Кистью № 4 усильте некоторые участки и заполнить все пробелы любой краской, какой вам захочется.

Старайтесь избегать смешивания дополнительных цветов (например, желтого и фиолетового, красного и зеленого, синего и оранжевого) друг с другом, так как это приведет к мутности цвета.

Шаг четвертый. Усиливаем цвета

Как только краска начнет высыхать, нанесите еще один слой краски сверху для усиления цвета. Не забывайте каждый раз промакивать кисточку, прежде чем брать новый оттенок.

Шаг пятый. В игру включается соль

Когда вы закончите наносить краску и будете довольны сочетанием цветов и их яркостью, посыпьте на рисунок зерна крупной соли. Она впитает воду и заберет часть цвета, оставив красивые разводы в виде туманностей. Дождитесь полного высыхания и аккуратно соскоблите соль.

Шаг шестой. Добавляем чистые цвета

Мы сделали лишь половину работы! Снова намочите всю поверхность водой и закрепите цвета их чистыми аналогами, используйте для этого кисть № 2. Чтобы получить чистый яркий цвет, добавляйте меньше воды в краску и не смешивать краски на палитре, а берите прямо из контейнера.

Шаг седьмой. Затемняем края

Пока бумага еще влажная, смешайте лазурь и черную слоновую кость. Кистью № 4 нанесите краску по краям листа, вокруг границ туманности. Только не наносите краску в виде черной рамки, вспомните как выглядят туманности — в виде вытянутого эллипса. На этом этапе нам пригодится ткань, которую можно использовать для поглощения краски, чтобы смягчить края.

Шаг восьмой. Добавляем звезды

Дожидаемся полного высыхания и используем кисть № 2 для финальных штрихов. Чтобы добавить звезды в наш космос, положите мольберт на горизонтальную поверхность. Возьмите в не ведущую руку палочку (или другую кисточку) и держите ее параллельно бумаге. Наберите на кисточку в ведущей руке титановые белила и делайте легкие удары кистью о палочку так, чтобы крошечные белые частицы краски попадали на вашу картину. Добавьте «вручную» несколько звезд тонкой кистью № 0.

Дайте рисунку высохнуть, снимите малярную ленту. И вот он, ваш космос!

Источник

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

Космический дизайн – довольно модная концепция в последние несколько лет и, скорее всего, таковой останется еще какое-то время. Как используют эту тему веб-мастера и как создать самому космос в Photoshop расскажем ниже.

12 Октябрь 2017

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

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

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

Заключение

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

Источник