Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рисуем кнопку Share в Adobe Photoshop

17 октября 2013 | Опубликовано в Уроки | 1 Комментарий »

В этом уроке мы научимся создавать простую share-кнопку в Adobe Photoshop. Урок достаточно прост и подойдет тем, кто хочет научиться справляться с векторными инструментами в фотошопе. Также мы узнаем как добавлять цвет векторным объектам при помощи палитры Layer Style.

 

Финальный результат

shareButton0

Шаг 1

Откройте Photoshop и нажмите Control + N, чтобы создать новый документ. Введите данные, как на картинке ниже, и нажмите OK. Активируйте сетку (View > Show > Grid) и привязку к сетке (View > Snap To > Grid). Для начала нам понадобится сетка через каждые 5px. Далее зайдите в меню Edit > Preferences > Guides, Grid & Slices и обратите внимание на раздел Grid. Введите 5 в строку Gridline Every и 1 в Subdivision. Также задайте сетке цвет #a7a7a7. После этого нажмите OK. Не пугайтесь вида сетки, она вам поможет в работе. Откройте палитру Info (Window > Info), чтобы видеть полную картину того, что происходит на вашем холсте.

shareButton1

Шаг 2

Выберите в качестве первого цвета #dcdcdc, выберите инструмент Rounded Rectangle, обратите внимание на верхнюю панель, в котором задайте радиус округления углов в 25px. Создайте фигуру размером 90х50px и убедитесь, что она осталась выделенной. Продолжаем работать инструментом Rounded Rectangle. В верхней панели нажмите кнопку Subtract и нарисуйте фигуру размером 80х40px, как показано на картинке ниже.

shareButton2

Шаг 3

Выделите фигуру, которая получилась у вас в предыдущем шаге и возьмите инструмент Rectangle Tool. Нажмите кнопку Add в верхней панели и нарисуйте прямоугольник размером 20х15px, как показано на картинке ниже. Работаем с этим прямоугольником. Выберите инструмент Delete Anchor Point и просто кликните по правой нижней точке (на первой картинке ниже отмечена). Выберите инструмент Direct Selection, выделите им вторую нижнюю точку и перетащите ее на 10px правее. В итоге должно получится, как на третьей картинке ниже.

shareButton3

Шаг 4

В палитре Layers кликните дважды по фигуре, которая получилась в предыдущем шаге, чтобы открыть палитру Layer Style. Задайте фигуре внутреннюю тень (Inner Shadow), внутреннее свечение (Inner Glow), градиентное перекрытие (Gradient Overlay) и обводку (Stroke). Укажите параметры, как на картинках ниже.

shareButton4

shareButton4a

shareButton4b

shareButton4c

shareButton4d

Шаг 5

Выберите в качестве первого цвета #a1d8ff и возьмите инструмент Rounded Rectangle. Убедитесь, что радиус скругления углов равен 25px, и создайте фигуру размером в 80х40px. Разместите ее, как показано на картинке ниже. Откройте окно Layer Style для этой фигуры и укажите параметры, которые видите на картинках ниже.

shareButton5

shareButton5a

shareButton5b

Шаг 6

Дублируйте фигуру, созданную в предыдущем шаге (Control + J). В палитре Layers нажмите правой кнопкой мыши на этой копии и выберите Clear Layer Style. Снова выделите копию, уберите заливку (Fill) до 0%, затем откройте окно Layer Style и введите параметры, показанные на картинках ниже.

shareButton6

shareButton6a

shareButton6b

shareButton6c

shareButton6d

Step 7

Выберите в качестве первого цвета #dcdcdc, возьмите инструмент Rounded Rectangle и задайте радиус скругления углов в 5px. Создайте фигуру размером 70х40px и разместите, как показано на первой картинке ниже. Откройте окно Layer Style и введите параметры, как показано на картинках ниже.

shareButton7

shareButton7a

shareButton7b

shareButton7c

shareButton7d

Шаг 8

Используя инструмент Type Tool, добавьте надпись “Share” и разместите ее, как показано на картинке ниже. Используйте шрифт Lobster font, размером в 15pt и цвета #414141. Откройте окно Layer Style для этого кусочка текста и введите указанные на картинках ниже параметры.

shareButton8

shareButton8a

shareButton8b

Шаг 9

Для следующего шага нам понадобится сетка через 1px. Зайдите в меню Edit > Preferences > Guides, Grid & Slices и введите 1 в поле Gridline Every. Выберите в качестве первого цвета черный и возьмите инструмент Rectangle Tool. Создайте прямоугольник размером 1х38px и разместите его, как показано на первой картинке ниже. Скопируйте этот прямоугольник и подвиньте копию на 1px правее, затем замените черный цвет белым.

shareButton9

Шаг 10

В палитре Layers откройте окно Layer Style для черного прямоугольника из предыдущего шага. Введите параметры показанные на второй картинке ниже и нажмите OK. Перейдем к белому прямоугольнику. Откройте окно Layer Style и введите параметры из третьей картинки ниже.

shareButton10

shareButton10a

shareButton10b

Шаг 11

Выберите в качестве первого цвета #4865a7, возьмите инструмент Rounded Rectangle Tool, укажите ему радиус скругления углов в 3px и нарисуйте фигуру размером 9х19px. Убедитесь, что нарисованная фигура осталась выделенной и выберите инструмент Rectangle Tool. Нажмите кнопку Subtract в верхней панели и нарисуйте фигуру размером 6х16px, как показано на картинке ниже.

shareButton11

Шаг 12

Выделите фигуру, созданную в предыдущем шаге и продолжайте работать инструментом Rectangle Tool. Нажмите кнопку Subtract в верхней панели и нарисуйте два квадрата стороной по 3px, как показано ниже. Вернитесь к верней панели, нажмите кнопку Add, затем дорисуйте прямоугольник, как показано на картинке ниже.

shareButton12

Шаг 13

Выделите фигуру, которая получилась у вас в предыдущем шаге, разместите ее, как показано ниже, и откройте для нее окно Layer Style. Введите параметры указанные на картинках ниже.

shareButton13

shareButton13a

shareButton13b

shareButton13c

shareButton13d

Шаг 14

Для логотипа Twitter мы используем простой png-файл, который вы можете найти здесь. Откройте его в Photoshop, нажмите Control + A, чтобы выделить все, затем Control + C, чтобы скопировать.

shareButton14

Шаг 15

Вернитесь в файл, в котором мы работаем, и нажмите Control + V, чтобы вставить логотип Twitter из предыдущего шага. В палитре Layers кликните правой кнопкой мыши по этому слою и выберите Convert to Smart Object. Убедитесь что этот smart-объект выделен и нажмите Control + T, чтобы масштабировать его. Удерживая клавишу Shift измените размер логотипа, как показано на второй картинке ниже. Откройте окно Layer Style для этого smart-объекта и введите параметры, указанные на картинках ниже.

shareButton15

shareButton15a

shareButton15b

shareButton15c

shareButton15d

Шаг 16

Дублируйте фигуру из пятого шага (Control + J). В палитре Layers переместите копию на передний план (Shift + Control + ] ) и очистите стиль слоя (clear layer style). Убедитесь, что копия выделена, уберите заливку до 0%, откройте окно Layer Style и введите параметры, как на картинках ниже.

shareButton16

shareButton16a

Шаг 17

Теперь настройте стиль слоя (Layer Style) для логотипа фейсбука в состоянии “hover” (когда наводишь курсор на кнопку).

shareButton17

shareButton17a

shareButton17b

shareButton17c

shareButton17d

А это настройки Layer Style для логотипа Twitter в состоянии “hover”.

shareButton18

shareButton18a

shareButton18b

shareButton18c

shareButton18d

Финальный результат

shareButton0[1]

Автор урока Andrei Marius.

Перевод — Дежурка.

Смотрите также:




Комментарии

  1. Кирилл
    Thumb up Thumb down 0

    Восхитительно!

    Ответить

Оставить ответ


+ два = 11

Вставить изображение