![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/ramka4.jpg)
Красивый сайт можно создать, используя контраст черного и белого. Если вы осваиваете веб дизайн, то в этом уроке получите новые навыки, полезные в этой деятельности!
Навыки для "прокачки":
- создание векторных форм в Фотошоп (кнопки и иконки)
- настройка кисти
- работа со стилями слоев, свечение
- создание векторных рисунков в Illustrator
- импортирование вектора в Фотошоп и работа с ним
• Создайте новый документ 1280 * 1024 пикселей, разрешение 72 пикселей.
• Создайте Прямоугольную форму, используя инструмент Прямоугольник с круглыми краями (Rounded Rectangle Tool).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image001.gif)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0022.jpg)
• Примените Стили слоя (Layer Style) для фигуры:
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0031.jpg)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0042.jpg)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0053.jpg)
• Создайте черную форму в верхней части страницы с помощью Rectangle Tool (2).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0062.jpg)
• Добавьте градиент/штриховку (Gradient) к этой форме.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0073.jpg)
• Создайте второй черный прямоугольник (дублируя слой) и Трансформируйте (Transform) его (3).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0083.jpg)
• Создайте новую прямоугольную Форму Rectangle Tool. Это будет кнопка (4).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image009.gif)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0103.jpg)
• Примените следующие настройки к этой Форме:
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0113.jpg)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0132.jpg)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0122.jpg)
• Нажмите Ctrl + клик на иконке слоя Формы, чтобы загрузить выделение.
• Заполните выделение белым цветом в новом слое. Непрозрачность (Opacity) 20-30%.
• Создайте овальное выделение с помощью Эллептического выделения (Elliptical Marquee) и удалите нижнюю часть белого прямоугольника. Наша кнопка готова!
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0141.jpg)
• Теперь вы можете разместить текст на свое усмотрение, а также расставить кнопки меню.
• Установим Стили слоя (Layer style) для текста меню:
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0152.jpg)
• Дублируем текст. Идем в меню Редактирование Трансформация Отразить по вертикали (Edit > Transform > Flip Vertical).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0162.jpg)
• Идем в Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur) (1,5)
• При помощи инструмента Произвольная фигура (Custom Shape Tool) создаем иконку белого цвета. Непрозрачность (Opacity) 90%.
• Дублируем слой и переносим вниз. Устанавливаем Непрозрачность (Opacity) 50%.
• Создаем овальное выделение (Elliptical Marquee) над слоем с первой фигурой и помещаем его в нижнюю часть иконки.
• Берем мягкую круглую Кисть. Непрозрачность (Opacity) 50% и ставим белый блик.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0172.jpg)
• Между иконками проводим Линию (Line tool) шириной в 2 пикселя и применяем для нее Градиент (Gradient).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0182.jpg)
• Создайте и другие линии на вашем сайте.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0192.jpg)
• Сделайте линию, используя Перо (Pen Tool). Чтобы сделать ее пунктирной, измените параметры Кисти:
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0202.jpg)
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0222.jpg)
• Далее, кликните на Линии правой кнопкой и выберете пункт Обводка контура> Имитировать нажатие (Stroke Path> Simulate Pressure), выберете Кисть (Brush).
• Чтобы создать эффект свечения текста, дублируйте слой, переместитесь в меню Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0232.jpg)
• Примените Режим смешивания (Blend mode) Экран (Screen) для этого слоя.
Ценность этого урока веб дизайна в том, что мы не призываем использовать клипарт. В этих шагах мы расскажем, как самостоятельно создать неоновую спираль в Illustrator.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image024.png)
• Создайте новый документ в Illustrator.
• Нарисуйте следующие строки (синие и белые), используя инструмент Перо (Pen Tool) и изменяя позиции точек через Инструмент преобразования Точек (Convert Point Tool).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0251.jpg)
• Выберете инструмент Переход (Blend Tool).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0262.jpg)
• Проведите им от верхней точки синей до верхней точки белой линии.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0272.jpg)
• Установите параметры наложения (Blending options), дважды щелкнув на Blend Tool или перейдя в меню Объект > Переход > Настройки Перехода (Object> Blend> Blend Options).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0282.jpg)
• Копируйте то, что получилось (Ctrl+C) и вставьте в Фотошоп (Ctrl+V).
• Для того, чтобы смягчить края, добавьте этому слою Маску и залейте ее черно/белым Градиентом с параметром Отраженный (Reflected Gradient).
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0292.jpg)
• Уменьшите Непрозрачность (Opacity) слоя и примените Gaussian Blur.
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0302.jpg)
Вот и все! Наш урок веб дизайна окончен!
![Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп Стильный черный дизайн сайта (Фотошоп + Illustrator) - уроки фотошоп](/uploads/2011/12/image0312.jpg)