На Вашем компьютере обнаружен устаревший браузер!
(Доступ на сайт будет ограничен)
Советуем Вам скачать новую версию браузера:

Вход на сайт

Рекомендуем ознакомиться со следующими разделами Фотошопа:



Разместите здесь свою рекламу
Главная » Illustrator » Стильный черный дизайн сайта (Фотошоп + Illustrator)
07.12.2020

Стильный черный дизайн сайта (Фотошоп + Illustrator)

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Красивый сайт можно создать, используя контраст черного и белого. Если вы осваиваете веб дизайн, то в этом уроке получите новые навыки, полезные в этой деятельности!

Сложность: для продвинутых
Время: до 1 часа
Навыки для "прокачки":

- создание векторных форм в Фотошоп (кнопки и иконки)
- настройка кисти
- работа со стилями слоев, свечение
- создание векторных рисунков в Illustrator
- импортирование вектора в Фотошоп и работа с ним

• Создайте новый документ 1280 * 1024 пикселей, разрешение 72 пикселей.

• Создайте Прямоугольную форму, используя инструмент Прямоугольник с круглыми краями (Rounded Rectangle Tool).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Примените Стили слоя (Layer Style) для фигуры:
Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Создайте черную форму в верхней части страницы с помощью Rectangle Tool (2).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Добавьте градиент/штриховку (Gradient) к этой форме.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Создайте второй черный прямоугольник (дублируя слой) и Трансформируйте (Transform) его (3).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Создайте новую прямоугольную Форму Rectangle  Tool. Это будет кнопка (4).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Примените следующие настройки к этой Форме:

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Нажмите Ctrl + клик на иконке слоя Формы, чтобы загрузить выделение.
• Заполните выделение белым цветом в новом слое. Непрозрачность (Opacity) 20-30%.
• Создайте овальное выделение с помощью Эллептического выделения (Elliptical Marquee) и удалите нижнюю часть белого прямоугольника. Наша кнопка готова!

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Теперь вы можете разместить текст на свое усмотрение, а также расставить кнопки меню.
• Установим Стили слоя (Layer style) для текста меню:

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Дублируем текст. Идем в меню Редактирование Трансформация Отразить по вертикали (Edit > Transform > Flip Vertical).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Идем в Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur) (1,5)
• При помощи инструмента Произвольная фигура (Custom Shape Tool) создаем иконку белого цвета. Непрозрачность (Opacity) 90%.
• Дублируем слой и переносим вниз. Устанавливаем  Непрозрачность (Opacity) 50%.
• Создаем овальное  выделение  (Elliptical Marquee) над слоем с первой фигурой и помещаем его в нижнюю часть иконки.
• Берем мягкую круглую Кисть. Непрозрачность (Opacity) 50% и ставим белый блик.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Между иконками проводим Линию (Line tool) шириной в 2 пикселя и применяем для нее Градиент (Gradient).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Создайте и другие линии на вашем сайте.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Сделайте линию, используя Перо (Pen Tool). Чтобы сделать ее пунктирной, измените параметры Кисти:

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Далее, кликните на Линии правой кнопкой и выберете пункт Обводка контура> Имитировать нажатие (Stroke Path> Simulate Pressure), выберете Кисть (Brush).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

 

• Чтобы создать эффект свечения текста, дублируйте слой, переместитесь в меню Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Примените Режим смешивания (Blend mode) Экран (Screen) для этого слоя.

Ценность этого урока веб дизайна в том, что мы не призываем использовать клипарт. В этих шагах мы расскажем, как самостоятельно создать неоновую спираль в Illustrator.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Создайте новый документ в Illustrator.

• Нарисуйте следующие строки (синие и белые), используя инструмент Перо (Pen Tool) и изменяя позиции точек через Инструмент преобразования Точек (Convert Point Tool).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Выберете инструмент Переход (Blend Tool).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Проведите им от верхней точки синей до верхней точки белой линии.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

•  Установите параметры наложения (Blending options), дважды щелкнув на Blend Tool или перейдя в меню  Объект > Переход > Настройки Перехода (Object> Blend> Blend Options).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Копируйте то, что получилось (Ctrl+C) и вставьте в Фотошоп (Ctrl+V).

• Для того, чтобы смягчить края, добавьте этому слою Маску и залейте ее черно/белым Градиентом с параметром Отраженный (Reflected Gradient).

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

• Уменьшите Непрозрачность (Opacity) слоя и примените Gaussian Blur.

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Вот и все! Наш урок веб дизайна окончен!

Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп

Источник: http://alfoart.com/black_design_1.html

(+3 баллов, 3 оценок)
Loading ... Loading ...
Написать комментарий

Подписаться, не комментируя

.