Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Круглый переключатель


Ресурсы урока:

Ткань с вертикальным узором
Гранжевая текстура

Создание фона
Создайте новый документ размером 1000х1000 пикселей.

Круглый переключатель


Добавление фонового узора
Создайте новую группу (Create New Group) и назовите её «Background». Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером немного больше холста и примените к ней стиль Наложение узора (Layer Style – Pattern Overlay). Используйте текстуру ткани, предоставленную в начале урока.

Круглый переключатель


Создание переключателя – Шаг 1
Создайте новую группу и назовите её «Button». Инструментом Эллипс (Ellipse Tool) создайте круг внутри неё цветом #0e0f0f. Кликните дважды на слое, чтобы открыть окно стилей и настройте, как показано ниже. После применения стилей понизьте Непрозрачность (Opacity) слоя до 2%.

Тиснение: Стиль – Внутренний скос, Метод – Плавное, Режим подсветки – Жёсткий свет, Режим тени – Умножение.
Наложение градиента: Режим – Перекрытие, Стиль – Линейный.
Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет.

Круглый переключатель


Шаг 2
Создайте ещё один круг внутри первого. На этот раз цвет #222429. Примените к нему следующие стили:

Отбрасывание тени: Режим – Умножение.
Тиснение: Стиль – Внутренний скос, Метод – Плавное, Режим подсветки – Жёсткий свет, Режим тени – Умножение.
Наложение градиента: Режим – Перекрытие, Стиль – Линейный, Градиент – от чёрного к белому.
Обводку: Положение – Внутри, Режим – Нормальный.

Круглый переключатель


Шаг 3
Откройте PSD файл, предоставленный в начале урока. Выберите слой с гранжевой текстурой и перенесите её в наш документ. Установите Режим наложения – Точечный свет (Blending Mode – Pin Light) и понизьте Непрозрачность (Opacity) до 10%. Создайте обтравочную маску (Ctrl + Alt + G).

Круглый переключатель


Шаг 4
Инструментом Эллипс (Ellipse Tool) создайте ещё один круг внутри предыдущего цветом #0d0d0e. Примените стиль Тиснение: Стиль – Внутренний скос, Метод – Плавное, Режим подсветки – Осветление, Режим тени – Умножение.
Инструментом Кисть (Brush Tool) размером 200 пикселей с мягкими краями нарисуйте белое пятно в нижней части круга. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность (Opacity) – 80%. Создайте обтравочную маску (Ctrl + Alt + G).
Создайте новый слой (Create New Layer) и чёрной кистью с мягкими краями обрисуйте нижнюю часть кнопки. Для этого слоя также нужно создать обтравочную маску (Ctrl + Alt + G).

Круглый переключатель


Шаг 5
Инструментом Эллипс (Ellipse Tool) создайте ещё один круг меньшего размера, чем предыдущий. Цвет круга - #1a1a1b. Инструментом Стрелка (Direct Selection Tool) сдвиньте нижнюю якорную точку на несколько пикселей вверх. Затем примените следующие стили:

Внутреннее свечение: Режим – Осветление.
Тиснение: Стиль – Внутренний скос, Метод – Плавное, Режим подсветки – Осветление, Режим тени – Умножение.

После применения стилей вставьте гранжевую текстуру ещё раз и установите её Режим наложения – Линейный осветлитель (Blending Mode – Linear Dodge), Непрозрачность (Opacity) – 10%.
Создайте новый слой (Create New Layer) и мягкой кистью обрисуйте нижнюю часть фигуры белым цветом. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light) и создайте обтравочную маску (Ctrl + Alt + G).

Круглый переключатель


Шаг 6
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите букву «i». Настройки шрифта показаны ниже. Примените к нему стиль Внутренняя тень: Режим – Умножение.
Тем же инструментом создайте букву «o» цветом #fefefe. Кликните правой кнопкой мыши на этом текстовом слое и выберите пункт Растрировать текст (Rasterize Type). Активируйте инструмент Свободное трансформирование (Free Transform) и, удерживая клавиши Ctrl + Shift + Alt, сдвиньте нижний левый угол влево на несколько пикселей. Затем примените стиль Внутренняя тень.

Круглый переключатель


Конечный результат:

Круглый переключатель




Обсудить данный урок на форуме




Ссылка на источник урока

написал : Ильшат

Спасибо. Хороший урок!

---------------


написал : Jack Hater

Это охрененно!

---------------


написал : Одюшк

ничего не получилось.нубу невозможно разобраться

---------------


написал : positive11

Одюшк
что именно не получается? какой шаг?

---------------


написал : Romzes7

Крутой урок. Большое спасибо. Сейчас много интересных вещей делать можно!

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: