Уроки фотошопа, графика, дизайн
arrow

Иконка переключателя

В этом уроке фотошопа вы научитесь создавать стильную иконку переключателя для своих веб-проектов. Эта иконка отлично впишется в любой тёмный дизайн. Этот урок открывает тему создания пользовательских интерфейсов, а это значит что вас ждёт ещё много интересных уроков по рисованию различных иконок, кнопочек и менюшек. Но довольно болтовни, давайте приступим к созданию иконки переключателя!

Вот финальный результат:

Иконка переключателя

Иконка переключателя

1. Создайте новый документ с размером 600x600px (Ctrl+N) и залейте его серым цветом (#343434).

2. Теперь поработаем с направляющими. Для начала нужно установить единицы измерения в пиксели, для этого идём в Edit (Редактирование) -> Preferences (Предпочтения) ->Units & Rulers (Единицы и линейки) и выставляем все значения в пикселях:

Иконка переключателя

3. Ставим направляющие: View (Вид) -> New Guide (Новая направляющая):

Иконка переключателя

И ещё одну горизонтальную и вертикальную направляющую в 300px. Теперь получилась вот такая сетка:

Иконка переключателя

Для скрытия сетки нажмите на клавиатуре сочетание клавиш Ctrl+H

4. Возьмите инструмент Rounded Rectangle Tool (Скруглённый прямоугольник) с радиусом 2px и создайте с его помощью форму в центре нашей сетки:

Иконка переключателя

Для этой формы установите чёрный цвет, затем кликните 2 раза по ней в панели слоёв, появится окно настройки стиля слоя. Выбираем Stroke (Обводка) и ставим такие параметры:

Иконка переключателя

5. Возвращаемся к инструменту Rounded Rectangle Tool, создаём новый слой и рисуем ещё одну форму, на этот раз белого цвета и размещаем её в левой половине сетки:

Иконка переключателя

6. Возьмите Direct Selection Tool (Направленное выделение):

Иконка переключателя

Выделите им 2 крайние правые точки:

Иконка переключателя

И удалите их. Теперь с помощью Pen Tool (Перо) соедините оставшиеся 2 крайние точки. Если появится нежелательный угол, уберите его инструментом Convert Point Tool, просто кликнув на точку:

Иконка переключателя

7. Итак, сейчас заготовка переключателя должна выглядеть так:

Иконка переключателя

8. Пододвиньте 2 правые точки на 2px вправо (До центральной направляющей) с помощью всё того же Direct Selection Tool (Если помните, мы удалили 2 точки, выдающиеся на 2px вправо, поэтому теперь нужно закрыть получившееся расстояние):

Иконка переключателя

9. Скопируйте этот слой (Ctrl+J), а затем отразите его по горизонтали (Edit -> Transform -> Flip Horizontal), далее смените цвет на серый (#e2e2e2) и поставьте форму в правую часть сетки:

Иконка переключателя

10. Выделите 2 правые верхние точки, и переместите их на 1px вверх, тоже самое сделайте с правыми нижними, но их нужно переместить вниз:

Иконка переключателя

11. Теперь выделите и верхние, и нижние правые точки и сместите из на 4px влево. Таким образом, мы почти создали объём:

Иконка переключателя

12. Создайте новый слой под тем, с которым только что работали, возьмите Pen Tool и нарисуйте примерно такую форму:

Иконка переключателя

Цвет установите #7c7c7c. Теперь у нас есть объёмная правая часть переключателя:

Иконка переключателя

13. Ну чтож, форма у нас есть, пришло время для работы со стилями слоя. Дважды кликните по слою с левой частью иконки переключателя, откроется окно редактирования стилей слоя. Установите такие настройки для Gradient Overlay (Перекрытие градиентом):

Иконка переключателя

И для правой части:

Иконка переключателя

Сейчас иконка переключателя выглядит так:

Иконка переключателя

14. Для формы, созданной с помощью Pen Tool такие настройки:

Иконка переключателя

15. Создайте копию левой стороны иконки переключателя (Ctrl+J). Возьмите Rectangle Tool (Прямоугольник) в режиме вычитания и сделайте им дыру в форме, оставив лишь по 2 пикселя по краям:

Иконка переключателя

Устанавливаем Gradient Overlay:

Иконка переключателя

Получаем такой эффект:

Иконка переключателя

15. Тоже самое делаем для правой части, но т.к. она у нас в перспективе, придётся использовать Pen Tool:

Иконка переключателя

Настройки градиента:

Иконка переключателя

16. Дублируйте правую сторону иконки, установите непрозрачность 20% и поместите этот слой поверх всех. Теперь установите такие настройки градиента:

Иконка переключателя

Это добавило правой стороне больше глубины.

17. Скорректируем немного градиент для слоя с объёмом (тот, который мы делали с помощью Pen Tool):

Иконка переключателя

18. При помощи Pen Tool нарисуйте такую фигуру:

Иконка переключателя

Примените стиль слоя  — перекрытие градиентом:

Иконка переключателя

Иконка переключателя теперь выглядит так:

Иконка переключателя

19. Тем же способом нарисуйте на правой части иконки крестик:

Иконка переключателя

Стили слоя для крестика:

Иконка переключателя

Иконка переключателя

Иконка переключателя

20. Создаём новый слой поверх всех, берем мягкую кисть светло-зеленого цвета и рисуем пятно:

Иконка переключателя

Непрозрачность 25%, режим смешивания Soft Light (Мягкий свет). Зажимаем Ctrl и кликаем по миниатюре левой части иконки, появляется выделение, инвертируем его сочетанием клавиш Shift+Ctrl+I и нажимаем Delete:

Иконка переключателя

Тоже самое делаем для правой части:

Иконка переключателя

21. Остался последний штрих — тень. Создайте новый слой под всеми слоями с иконкой переключателя. С помощью Pen Tool нарисуйте такую чёрную форму:

Иконка переключателя

Растеризуем слой (правая кнопка мыши по слою -> Rasterize), непрозрачность устанавливаем 90% и применяем Filter -> Blur -> Gaussian Blur с радиусом 2px. Вот и всё, иконка переключателя готова:

Иконка переключателя

На этом урок по созданию иконки переключателя в фотошопе закончен. Желаю вам успехов и побольше творческих идей!

Иконка переключателя

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Оставить комментарий

Имя: *

Сообщение: