Всем привет, с вами Graim.
В этом уроке вы узнаете, как создать регулятор громкости.
В создании урока используются простые решения программы Photoshop, которые в дальнейшем помогут вам создавать базовые элементы дизайна.
Конечный результат:
Шаг №1
Создаем новый документ (Ctrl+N) с шириной и высотой 500 пикселей:
Шаг №2
Заливаем фон основным цветом 393e46 (клавиша G).
Шаг №3
Создаем новый слой (Shift+Ctrl+N) и выбираем инструмент «Эллипс» (клавиша U), и выставляем следующие значения:
- Заливка: 2b2d33
- Ширина: 90px.
- Высота: 90px.
Шаг №4
Кликаем правой кнопкой мыши по слою c «Эллипс» и нажимаем на «Параметры наложения». В открывшемся окне выбираем параметр «Внутренняя тень» и устанавливаем следующие характеристики:
- Цвет: 202327
- Непрозрачность: 100%
- Угол: 90 гр.
- Смещение: 3px.
- Стягивание: 0%
- Размер: 3px.
Шаг №5
Переходим к параметру «Тень» и устанавливаем следующие характеристики:
- Режим наложения: Нормальный
- Цвет: 474d57
- Непрозрачность: 30%
- Смещение: 1px.
- Стягивание: 0%
- Размер: 1px.
Шаг №6
Создаем новый слой (Shift+Ctrl+N) и делаем еще один «Эллипс» (клавиша U), и выставляем следующие значения:
- Заливка: 2b2f35
- Ширина: 84px.
- Высота: 84px.
Шаг №7
Переходим в «Параметры наложения» и устанавливаем следующие характеристики для параметра «Теснение»:
- Стиль: Внутренний скос
- Метод: Плавное
- Глубина: 100%
- Размер: 0px.
- Смягчение: 0px.
- Режим подсветки: Перекрытие
- Непрозрачность: 100%
- Режим тени: Мягкий свет
- Непрозрачность: 30%
Шаг №8
Переходим к параметру «Наложение градиента» и устанавливаем следующие характеристики:
- Режим наложения: Нормальный
- Непрозрачность: 100%
- Градиент: 1e2025 \ 2b2e36
Шаг №9
Переходим к параметру «Тень» и устанавливаем следующие характеристики:
- Режим наложения: Умножение
- Цвет: 000000 (черный)
- Непрозрачность: 66%
- Смещение: 5px.
- Стягивание: 0%
- Размер: 5px.
Шаг №9
Создаем новый слой (Shift+Ctrl+N) и выбираем инструмент «Эллипс» (клавиша U), и выставляем следующие значения:
- Заливка: 5baffc
- Ширина: 9px.
- Высота: 9px.
Шаг №10
Переходим в «Параметры наложения» и устанавливаем следующие значения для параметра «Внутреннее свечение»:
- Режим наложения: Линейный осветлитель
- Непрозрачность: 10%
- Цвет: 52acff
- Стягивание: 0%
- Размер: 5px.
Шаг №11
Переходим к параметру «Внешнее свечение» и устанавливаем следующие характеристики:
- Режим наложения: Линейный осветлитель
- Непрозрачность: 25%
- Цвет: 5baffc
- Стягивание: 0%
- Размер: 5px.
Шаг №12
Переходим к параметру «Тень» и устанавливаем следующие характеристики:
- Режим наложения: Умножение
- Цвет: 000000 (черный)
- Непрозрачность: 45%
- Смещение: 2px.
- Стягивание: 0%
- Размер: 1px.
Шаг №13
Создаем новый слой (Shift+Ctrl+N) и делаем еще один «Эллипс» (клавиша U), и выставляем следующие значения:
- Заливка: 5baffc
- Ширина: 7px.
- Высота: 7px.
И продублируйте созданный «Эллипс» 7 раз:
Шаг №14
Переходим в «Параметры наложения» и устанавливаем следующие характеристики для параметра «Внутреннее свечение»:
- Режим наложения: Перекрытие
- Непрозрачность: 100%
- Цвет: 52acff
- Стягивание: 0%
- Размер: 10px.
Шаг №15
Создаем новый слой (Shift+Ctrl+N) и делаем еще один «Эллипс» (клавиша U), и выставляем следующие значения:
- Заливка: 393e46 (цвет фона)
- Ширина: 7px.
- Высота: 7px.
Шаг №16
Переходим к параметру «Внутренняя тень» и устанавливаем следующие характеристики:
Режим наложения: Перекрытие
Цвет: 000000 (черный)
Непрозрачность: 63%
Смещение: 1px.
Стягивание: 0%
Размер: 1px.
Шаг №17
Переходим к параметру «Внутреннее свечение» и устанавливаем следующие характеристики:
- Режим наложения: Перекрытие
- Непрозрачность: 75%
- Цвет: ffffff (белый)
- Стягивание: 0%
- Размер: 0px.
И продублируйте созданный «Эллипс» 10 раз:
Регулятор громкости готов.
Надеюсь, вам понравился урок, и вы усвоили новые приемы, которые пригодятся вам в будущих проектах.
Подписывайтесь на канал, чтобы не пропустить новые уроки.
Смотрите предыдущий урок «Создаем минималистичный переключатель в Photoshop»