Урок: кнопка |
пример создания таких кнопок
0. Перед тем как начать этот урок нам необходимо будет создать одну текстуру, которая пригодится вам в будущем, и вабще будет очень полезной.Все просто.Создаем новый документ, фон прозрачный, 3на3 пикселя. увеличиваем его максимально лупой+.Берем инструмент карандаш(находится там же, где и кисть) и ставим три точки в следующем порядке.
Далее сохраняем как текстуру-для этого:
Теперь поехали.
1. Создаем новое изображение. Фон-прозрачный, размер должен быть немногим больше размера предпологаемой вами кнопки. Я брала например высота70 на 133ширина пикселей.
2. Далее создаем прямоугольник с закругленными края со следующими параметрами:
3.Растировать слой.
4.Правой кнопкой по названью слоя--->Параметры наложения.
задаем следующее:
Обратите внимание узор(текстура) та, что мы рисовали в начале. При правильном моотношении масштаба и глубины(просмаривайте, крутя полозок возникакет узор из полосок., что так популярен сейчас.
5.На новом слое создаем фигуру-элипс(например) белого цвета с непрозрачностью слоя около 40 процентов(В окне "слои" в правом верхнем углу).Вот примерно так:
6.Теперь нужно удалить лишнее(за рамками кнопки) белое.Для этого для начала надо растировать слой с фигурой-эллипсом. Далее выделить слой с кнопкой, и используя волшебную палоку нажать на прозрачную область. Выделится пространство вокруг кнопки. Теперь переходим на слой с эллипсом и нажимаем Del.
7. Можно поиграться с параметрами наложения блика. Например наложить почти прозрачный цветной градиент.
8. Делаем надпись.
10.Сохраняем в PNG. Извините у меня работает только PNG-24, так что Вот что получилось у меня.
11. Возникает законный вопрос. Kак же сделать что бы при нажатии она нас куда то посылала?
Ответ очень прост. Для ли ру для этого нужен код. Я напишу его со звездочками, дабы он не преобразовался в кнопку посылающую вас, вы должны будете удалить эти звездочки перед тем как использовать его.
Код самой кнопки:
<a hre*f="ссылка куда должна привести кнопка" target="_blank"><img** title="название кнопки" s*rc="ссылка на рисунок кнопки" bo*rder="0" /></a*><*br />
Хотим показать всем ее код? Пожалуйста.
<text*area><a h*ref="вооот сюда копируем код"></textare**a></di**v>
12. например вОт.
Хотим показать всем ее код? Пожалуйста.
Несколько советов для вас.
1. Если масштабируете то для сохранения пропорций держите зажатой клавишу шифт. елси хотите провести прямую линию горизонтально или вертикально например кисть то тоже зажимайте шифт.
2. Увидели сделнной что то с помощью кода? Хотите его узнать его. Открываете брайзер Опера и берете исходный код страницы...ищете вней код..думаю соориентируетесь по названиям например...
автор:добрых дел мастер
Рубрики: | Уроки |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |