Это цитата сообщения SneznyBars Оригинальное сообщение
Кнопка в фотошоп
1. Создадим новое изображение размерами чуть больше будущей кнопки:
2. Наша кнопка будет с немного закруглёнными краями, по этому лучше её нарисовать в векторном формате. Для этого выбираем инструмент Rounded Rectangle Tool, радиус закругления углов (Radius) поставим равным 4 пикселя, цвет любой, и нарисуем такую фигуру:
3. А сейчас будем добавлять к нашей фигуре спецэффекты. Сразу, для начала, нужно выставить прозрачность Fill слоя с фигурой в 0%, а затем залазим в Blending Options (правый клик на слое, и там выбираем такой пункт) на вкладку Gradient Overlay — это мы будем раскрашивать нашу кнопку. Выставим там такие параметры:
4. На вкладке Stroke (обводка или же бордюр) выставим такие значения:
5. На вкладке Inner Glow (внутреннее свечение) такие:
6. А тут добавим внутреннюю тень (вкладка Inner Shadow):
7. Наконец-то сделаем так, чтобы наша кнопка отбросила тень (вкладка Drop Shadow), и тем самым казалась более объёмной (типа она не на плоскости а в пространстве):
После этого наша кнопка примет следующий вид:
8. Сейчас добавим штриховку, блики и пару эффектов. Для этого сразу создадим новый слой и выделим нашу фигуру (зажимаем клавишу Ctrl и кликаем на слой с фигурой, затем отпускаем Ctrl):
9. Не снимая выделения кликаем на новом слое (на панели слоёв) и зальём выделение любым цветом (с помощью инструмента Paint Bucket Tool):
10. Теперь прозрачность Fill нашего нового слоя (точнее непрозрачность) выставим в 0% и вBlending Options добавим несколько эффектов. Сразу добавим внутреннее свечение (Inner Glow):
11. Затем добавим блики с помощью градиента (вкладка называется Gradient Overlay):
Вот тут вы можете увидеть более подробно какой я применил градиент (чтобы открыть данное окошко — кликните на полоске справа от надписи Gradient. Нижние квадратики определяют цвет нашего блика — кликаем по ним и в пункте Color выбираем белый цвет. Верхние квадратики — это прозрачность — выставьте значения прозрачности как я показал на рисунке ниже (кликаем по верхним квадратам и в поле Opacity вписываем соответствующее ему значение). Потом кликаем по среднему верхнему квадрату и ромбики, которые по бокам, пододвигаем как можно ближе к нему:
12. Сейчас добавим штриховку. Для этого нам сразу нужно создать текстуру штриховки (как её создавать вы можете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5)), а потом на вкладке Pattern Overlay выставить следующие значения параметров:
И как результат получаем красивую кнопку для применения на вашем сайте:
13. И напоследок было бы неплохо добавить к нашей кнопки какой-нибудь текст (шрифт, который я для этого использовал, можно скачать чуть ниже). Финальная версия моей кнопки выглядит следующим образом:
