Блок для кнопок

Блок для рекламных кнопок 88х31

конечным итогом этого урока будет вот такой блок для рекламных кнопок, размером 88х31 рх:

Для создания такого блока вам понадобится сделать в программе Фотошоп всего лишь два элемента - рамку для кнопки и на всякий случай заглушку, которая займёт место пока не установленной кнопки.

Создаём в программе Фотошоп новый документ и с помощью инструмента "Прямоугольная область" рисуем прямоугольник, размером 94х34 рх, и заливаем его черным цветом. Вы можете заливать любым, подходящим для дизайна вашего сайта.

Поработаем со стилями слоя этого прямоугольника. Добавим ему градиент, предварительно его настроив:

Добавим стилю следующие настройки:


Градиент:

Обводка:

 У нас получится вот такой прямоугольник:

Теперь на том же холсте точно так же рисуем прямоугольник меньшего размера, а точнее 88х31 и заливаем его цветом немного светлее для контраста. Это будет заглушка, и напишем на ней какой-нибудь текст:

 Если совместить эти два элемента, то получится фрагмент блока:

Вот из таких элементов мы и составим блок для рекламных кнопок. Для этого необходимо два прямоугольника, которые делали, загрузить на сайт или блог. Остальное всё пропишется кодом HTML.

О том как из этих элементов собрать блок и вставить его на сайте, читайте в статье Блок для кнопок