Кнопки, градиент

Кнопки штука такая, вроде ни чего сложного. Но с другой стороны, иногда умучаешься. Проще всего их делать, используя градиент. Это такая примочка у фотошопа. Один край изображения делается темнее другого. Это свойство конечно можно использовать в различных случаях. Ну а сейчас просто коснёмся кнопок.


Градиент в основном используется для того, что бы создать вид объёмности у кнопок. Немножко подправил фон и объёмная кнопка готова.

Меню

Закруглил углы, и вообще красота.

Кнопка

Так сильно закруглять не обязательно, тут дело вкуса. Это просто для наглядности.


Можете закруглить углы в фотошопе. Можете при помощи таблицы стилей. Можете прямо на страничке. В фотошопе можно конечно конкретно поизголяться над углами. Но всё время их переделывать, это жестоко. Нет, есть конечно люди, которые один раз сделают и довольны всю жизнь. Им лучше делать в фотошопе. А есть люди типа меня - всё время всё не нравится, всё хочется получше сделать. То один угол закруглишь, то другой. Иногда до чего доделаешь - взглянешь, обалдеешь и уничтожишь творение рук своих. Так что сильно не увлекайтесь. В общем лично в моём варианте лучше сделать в таблице CSS. Или прямо на страничке:

border-radius:10px 10px 10px 10px;/* Это код для таблицы стилей. */

style="border-radius:10px 10px 10px 10px;"/* Это прямо в свойствах таблицы, прямо на страничке. */

Это пример:

<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" align="center" valign="middle" background="http://seozar.ru/images/sozdanie-raskrutka-sajta/fon1.1.png" style="border-radius:10px 10px 10px 10px;">Кнопка</td>
</tr>
</table>


Что то я отдалился от фотошопа :) Но что делать, что делать, надо было показать примеры :) Градиент устанавливается в слоях, в правой части программы фотошоп. Просто щёлкните два раза по вашему изображению в слоях. Всплывёт окошко, там и будет градиент. В случае с кнопками, как и в случае с фоном сайта, изображение для них можно сделать полупрозрачным. Что бы было проще задавать любой цвет кнопкам.

Дело в том, что градиент - это по сути что то чёрно-белое. То есть его невозможно подкрасить в какой либо цвет. Но можно сперва сделать, а потом покрасить. Но можно сделать хитрее. Разделить изображение на слои. На один слой наложить градиент, на другой - цвет. Как цвет, так и градиент можно будет сделать полупрозрачными. Цвет накладывается прямо в свойствах слоя. Не надо ни каких заливок - это я просто, на всякий случай, мало ли кто не заметит :)

Кстати на счёт слоёв. Проще всего разбить изображение на слои - выделив сперва изображение. Можно с помощью инструмента на левой панели. Он там почти на самом верху. Или с помощью верхнего меню. Там есть пункт - выделение. Затем наводите курсор на изображение, щёлкаете правой кнопкой мыши. И во всплывающем меню - скопировать на новый слой. Всё, теперь можете закруглять углы, баловаться с прозрачностью и т.д.


Просто совет. Куда я без него :) Когда вы сделаете меню, или кнопку, нажимайте - сохранить как. И заливайте на хостинг, что бы посмотреть, что получилось. Но фотошоп при этом не закрывайте. У него есть такая штука, как история - можно в любой момент откатить сделанные изменения. Что то потихоньку подделать. Например, добавлять понемногу цвета, или уменьшать прозрачность, или ещё что то. Это для более хорошего сочетания с фоном сайта. Сперва ведь делается фон, а всё остальное (подбираешь изображения, краски), не как получится, а как красивее :)

Опять - кстати :) В верхней правой части фотошопа есть вкладка - стили. Там можно подобрать неплохой стиль для кнопок. А потом поэкспериментировать с прозрачностью, слоями и т.д. Можно ведь наделать кучу полупрозрачных слоёв и на каждом слое что то изобразить. А потом слепить и посмотреть что получилось. Тут конечно всё зависит от фантазии человека :)

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP