Как создать кнопку: Урок для новичков

Автор DarkSim, 2010 Сен. 13, 23:42

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

Ключевые слова [SEO] кнопкаweb дизайнadobe photoshop

DarkSim

Урок простой и понятный, рассчитан на новичков.

Сложность урока: 1/10

Требования:
- Adobe PhotoShop от CS2 (9.0) и новее.
(Желательно оригинальный, на Английском языке а не на Русском).

Цель урока - научится использовать стиль и смешивание слоёв.

Конечный результат урока:
Спойлер
[свернуть]
[/size]

Шаг 1.
1. Создаём новый файл размерами 300x300.
(File>New>Name: Кнопка; Width: 300; Height: 300;> OK).

2. Создаём новый слой, называем его "Фон", заливаем его любым цветом.
(Shift+CTR+N>Name: Фон>ОК => Paint Bucket Tool ()>Тыкаем ЛКМ по слою "Фон">Заливаем картинку).

3.
Создаём новый слой, называем его "Форма".

4. Отмечаем слой "Форма" (ЛКМ по слою), делаем форму для кнопки (полу-овальную).
(Rounded Rectangle Tool () >
Спойлер
[свернуть]
>ПКМ>Make Selection...>Feather Radius: 0>OK>Paint Bucket Tool ()>Заливаем выделение
Спойлер
[свернуть]
>Снимаем выделение).[/size]

Шаг 2.
И так, у нас теперь есть форма для кнопки, осталось только создать для неё стиль и поместить текст, в этом шаге я попытаюсь как можно больше заменить картинками.

1. Создаём стиль для кнопки.
(ПКМ по слою "Форма">Blending Options...>Переходим на вкладку Gradient Overlay>
Спойлер
[свернуть]
>Кликаем по Градиенту>
Спойлер
Выбираем цвет градиента для кнопки
[свернуть]
>OK>Переходим на вкладку Stroke>
Спойлер
[свернуть]
>Кликаем по Градиенту>
Спойлер
Выбираем цвет градиента для обводки
[свернуть]
>ОК>Переходим на вкладку Inner Glow>
Спойлер
[свернуть]
>OK)[/size]

2. Создаём новый слой под названием "Свет", выделяем слой "Форма", заливаем слой "Свет" белым цветом, отрезаем вертикальную половину белой заливки и изменяем режим смешивания на Overlay, Opacity: 35%.
(Shift+CTR+N>Name: Свет>ОК => CTR+ПКМ по слою "Форма"
Спойлер
[свернуть]
>ПКМ по слою "Свет">Paint Bucket Tool ()>Заливаем выделение белым цветом>Снимаем выделение>Берём инструмент Rectangular Marquee Tool ()>Отрезаем вертикальную половину белой заливки
Спойлер
[свернуть]
>Меняем режим смешивания на Overlay, Opacity: 35%)[/size]

3. Берём инструмент Horizontal Type Tool () и наносим текст, после этого делаем стиль для текста.
(Horizontal Type Tool (>ПКМ по слою с текстом>Blending Options>Переходим на вкладку Drop Shadow
Спойлер
[свернуть]
>Переходим на вкладку Color Overlay и делаем белый цвет>OK)[/size]

Вроде бы и всё. После этого можно украсить кнопку эффектом сепии (Noise), но это уже на вкус и цвет. Кидаем результаты и пишем комментарии, почти уверен, что допустил множество ошибок в уроке, поэтому пишем где, что не понятно.

Урок: DarkSim

[P4F]v1ru5

#1
во, появились хоть дизайнеры на форуме

DeSSower

Цитата: v1ru5 от 2010 Сен. 14, 00:02  во, появились хоть дизайнеры на форуме :lol:
пополиз , залогинься

8BitCore


[P4F]v1ru5

Спойлер
Цитата: DeSSower от 2010 Сен. 14, 00:58  пополиз , залогинься
а че у тебя phpmyadmin открыт кст до сих пор??
[свернуть]

Похожие темы (2)