Стильный черный дизайн сайта (Фотошоп + 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

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика