QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Photoshop

Создаем наш документ и заливаем его цветом #141d28.

Теперь установите основной цвет на #17202b. Выберите инструмент Rounded Rectangle Tool. Установите радиус углов на 2 px  и создайте прямоугольную форму, как на рисунке:

Это будет основой нашей кнопки. Давайте теперь применим стили к этому слою. Для этого дважды кликните по нему или перейдите Layer > Layer Style > Blending Options.

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Stroke

Вот, что должно получиться в итоге:

Теперь добавим немного деталей. Для начала создадим небольшую тень внизу кнопки. Удерживая Ctrl щелкните мышью в палитре слоев по иконке формы, которую создали в начале урока. Появится прямоугольная область выделения:

Затем установите основной цвет на #050607. Создайте новый слой. Выберите инструмент создания градиентов Gradient Tool и создайте радиальный градиент от основного цвета к прозрачному из нижней центральной части области выделения к левому или правому краю:

Затем выберите любой инструмент создания области выделения и один раз нажмите на клавиатуре стрелку вверх. Область выделения сместится на 1 пиксель вверх. Отлично, теперь нажимаем Del, чтобы удалить все лишнее. Снимите выделение Ctrl+D. Останется одна темная полоска. Теперь выберите инструмент перемещения Move Tool и, используя стрелки, переместите полоску вниз.

Создайте дубликат слоя с полоской Ctrl+J и инвертируйте изображение Ctrl+I. Также стрелками переместите дубликат слоя немного вверх, как на рисунке:

Измените режим наложения слоя Blend Mode на Overlay и создайте дубликат этого слоя Ctrl+J.

Тепер, как и в предыдущем шаге, создайте область выделения вокруг кнопки, установите основной цвет на белый и создайте радиальный градиент на новом слое от белого к прозрачному, как на рисунке:

Убираем выделение Ctrl+D и изменяем режим наложения слоя на Overlay.

Осталось добавить текст (шрифт Arial) и немного тени к нему:

Окончательный результат

P. S.

CSS3-бонус

Давайте теперь попробуем создать что-то подобное, не используя какие-либо изображения, а оперируя только средствами HTML и CSS.

<div id="wrapper">
          <a href="http://quicktuts.ru">QuickTUTS.ru</a>
</div>

И, собственно, оформление:

body {
          padding: 0;
          margin: 0;
          background: #141d28;
}
div#wrapper {
          text-align: center;
}
div#wrapper a {
          display:block;
          position: relative;
          margin:0 auto;
          top: 200px;
          width: 178px;
          cursor: pointer;
          line-height: 100%;
          padding-top:12px;
          padding-bottom:12px;
          padding-right:0px;
          padding-left:0px;
          border: none;
          font-family: sans-serif;
          font-weight: normal;
          font-size:20px;
          text-decoration:none;
          color: rgba(255,255,255,.9);
          text-shadow: 1px 1px 2px rgba(0,0,0,1);
         -webkit-border-radius: 2px;
         -moz-border-radius: 2px;
          border-radius: 2px;
         -webkit-box-shadow: 0px 6px 0px 1px rgba(0,0,0,.4),
                       inset 0px 1px 0px 0px rgba(255,255,255,.4),
                       inset 0 -1px 0px rgba(255,255,255, 0.1);
         -moz-box-shadow: 0px 6px 0px 1px rgba(0,0,0,.4),
                    inset 0px 1px 0px 0px rgba(255,255,255,.4),
                    inset 0 -1px 0px rgba(255,255,255, 0.1);
          box-shadow: 0px 6px 0px 1px rgba(0,0,0,.4),
                inset 0px 1px 0px 0px rgba(255,255,255,.4),
                inset 0 -1px 0px rgba(255,255,255, 0.1);
          background: -moz-linear-gradient(
                                           rgba(255,255,255,.1),
                                           rgba(0,0,0,.1)),
                      -moz-radial-gradient(
                                           center -20px,
                                           rgba(148,191,239,.8),
                                           rgba(0,0,0,0));
          background: -webkit-linear-gradient(
                                              rgba(255,255,255,.1),
                                              rgba(0,0,0,.1)),
                      -webkit-radial-gradient(
                                              center -10px,
                                              rgba(148,191,239,0.4),
                                              rgba(0,0,0,0) 100%);
}
div#wrapper a:active {
          top: 206px;
          width: 178px;
          padding-top:12px;
          padding-bottom:12px;
          padding-right:0px;
          padding-left:0px;
         -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4),
                       inset 0px 1px 0px 0px rgba(255,255,255,.4),
                       inset 0 -1px 0px rgba(255,255,255, 0.1);
         -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4),
                    inset 0px 1px 0px 0px rgba(255,255,255,.4),
                    inset 0 -1px 0px rgba(255,255,255, 0.1);
          box-shadow: 0px 0px 0px 1px rgba(0,0,0,.4),
                inset 0px 1px 0px 0px rgba(0,0,0,.1),
                inset 0 -1px 0px rgba(0,0,0, 0.1);
}

Демо