Красивые WEB 2.0 иконки в фотошопе. Урок

урок создание значков иконок web 2.0 фотошопКогда мы делаем Web-проект, нам довольно часто необходимы кнопки/значки/иконки, чтобы показать такие команды, как добавить, удалить, редактировать и прочие. С приходом Web 2.0, использование значков/иконок и  3D стиля стало очень популярно. В этом уроке по фотошопу, мы научимся, как создать очень простой и очень красивый 3D-эффект, который будет использоваться в любой кнопке и иконке или элементах, которые требуют некоторой глубины.

Шаг 1

Создайте новый документ и выберите Ellipse Tool (U). Не имеет значения, какой цвет вы используете, поскольку он будет заменен позже стилем слоя.

урок создание значков иконок web 2.0 фотошоп

Шаг 2

Дважды щелкните на слое с эллипсом, чтобы открыть диалоговое окно Layer Style. Затем выберите Gradient Overlay и используйте градиент с синим #00619f и светлым #9ee2ff  оттенком синего цвета. Используйте типа заливки Radial. Затем добавьте эффект Bevel and Emboss, как на скриншотах.
урок создание значков иконок web 2.0 photoshop

урок создание значков иконок web 2.0 photoshop

урок создание значков иконок web 2.0 photoshop
Совет: переместите градиент ближе к верхней части круга. Для этого в открытом окне Layer Style выберете вкладку Gradient Overlay, нажмите и удерживайте кнопку мыши и начните перемещать градиент.

Шаг 3

Продублируем слой с кругом и изменим его размер, чтобы сделать его немного меньше, как на скриншоте, для этого нажимаем Ctrl-T и удерживая клавиши Alt+Shift тянем за край выделения немного вниз.

обучение создание значков иконок web 2.0 фотошоп

Шаг 4

Дважды щелкните на новом слое, чтобы открыть диалоговое окно Layer Styles. Отмените  предыдущий эффект Bevel and Emboss. Теперь выберите Stroke и тип заливки выберите Gradient. Цвет выберите белый с обоих концов градиента и изменения непрозрачность до 0% вначале и 100% в конце.

обучение создание значков иконок web 2.0 фотошоп

обучение создание значков иконок web 2.0 фотошоп

Шаг 5

Выберите Horizontal Type Tool (T) и создайте текстовый слой. Убедитесь в том, что этот слой самый верхний. Теперь откройте окно стилей слоя и изменения Color Overlay до белого, выберите Inner Shadow и использовать параметры, как на скриншоте.

обучение создание значков иконок web 2.0 фотошопlesson создание icons web 2.0 photoshop

lesson создание icons web 2.0 photoshop

lesson создание icons web 2.0 photoshop

Шаг 6

Сгруппируем три слоя и назовем группу синий круг.

Шаг 7

Выберите Polygon Tool (U) и изменить некоторые параметры, как показано ниже, чтобы создать звезду. Продублируйте слой и измените его размер, как мы делали на шаге 3.
урок создание значка sale web 2.0 photoshop

урок создание значка new web 2.0 photoshop
Вместо того, чтобы снова применять отдельные стили слоя, просто скопируем стили из предыдущих значков которые мы создали и вставим их в наш новый слой. Для этого, выберите слой, стиль из которго Вы хотите скопировать, щелкните правой кнопкой мыши и выберите Copy Layer Style. Затем выберите слой, к которому вы хотите применить стиль, щелкните правой кнопкой мыши и выберите Paste Layer Styles.

Единственное, что нам придется менять, это градиент цвета — Gradient Overlay.

урок создание значка buy web 2.0 photoshop

Заключение

Это один из самых простых способов создать красивый 3D стиль Web 2.0 кнопки в фотошопе. Вы можете изменить некоторые настройки, такие как stroke’s или   gradient color для создания различных 3D стилей.

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*

*