Как сделать кнопку на блог или сайт
Очень часто, на блог нужна специальная кнопка и сделать ее можно самому, даже не имея навыков работы с графическими редакторами. Если у вас на компьютере закачан редактор Adobe Photoshop, то вы можете воспользоваться набором стилей. Стили находятся на панели опций в инструменте «Фигура». Стандартные образцы есть в редакторе по умолчанию, другое дело, что выбор не очень большой. Многие мастера сами делают разнообразные красивые стили и выкладывают их в интернет, так что подкачать их можно всегда, если самим лень делать.
Форму кнопки, ее размер вы выбираете сами, шаблон «Стиль» лишь заливает определенным рисунком и цветом то, что вы нарисуете.
Вот пример применения стилей. Меня попросила Ирина Красикова, автор блога «Мир здоровья», чтобы я сделала очень яркие кнопки на ее блог, после недолгих подборов, вот что у нас получилось.
Сегодня мы с вами сделаем самостоятельно простую кнопку на блог на графическом редакторе Adobe Photoshop. Это для того, чтобы понять принцип создания таких кнопок, ведь все они рисуются по одному и тому же принципу, лишь с незначительными различиями в процессе работы.
Я буду очень подробно все описывать, чтобы даже начинающий пользователь Adobe Photoshop смог все повторить.
Открываем новый документ — «Файл», «Открыть». Размер документа возьмем примерно — 300х200, можно и меньше.
С помощью инструмента «Элипс», при нажатой кнопке Shift строию круг. Ну а вы можете любую другую форму придать кнопке.
Растрируем изображение. Меню «Слои», затем — «Растрировать», «Фигуру».
Затем, правой кнопкой мыши нажимаем на нашем слое и выбираем вкладочку «Параметры наложения».
Открывается табличка стиля слоя, вот с ней мы и будем работать.
Первым настраиваем «Наложение градиента», щелкаем по этой вкладке, она активируется (синий цвет), появляется галочка и слева — настройки наложения градиента.
Щелкаем по ленте, открывается редактор градиентов. Выбираем градиент. Если градиент вам не подходит, то нажав на маркер ползунка вызываем палитру цветов.
Ну а если у вас не получается, то проверьте какой режим настроен у вас «Изображение», «Режим». Если он настроен в градациях серого цвета, то ваша кнопка не окрасится, а останется серой. Настройте в RGB.
Вот так примерно настроим градиент.
Теперь, не закрывая табличку стиля слоя настраиваем «Внутреннее свечение».
Затем – «Тень».
Настраиваем «Тиснение».
Ну, и по желанию – «Контур» и «Текстуру». Но я не буду применять их.
У меня получилась вот такая пуговица. На этом мы закончим работу с табличкой стиля слоя, нажимаем справа «ОК».
Можно еще добавить блики, но мы не будем усложнять работу, для этого урока достаточно. Что получилось, то пусть и будет, главное для нас сегодня понять принцип работы при создании кнопки.
Создаем новый слой, поверх нашего слоя.
Заходим в инструмент «Текст», настраиваем его и подписываем кнопку. Выбираем цвет, шрифт, размер шрифта, наклон и т. д.
Если надпись состоит из двух строчек, то лучше для каждой открыть свой новый слой.
После редактирования надписи, открываем табличку стиля слоя и настраиваем для нашей надписи — «Тень», точно так же, как мы настраивали ее для изображения. А если надпись находится на двух слоях, то тень настраиваем для каждого слоя по отдельности.
Вот и все, можно сохранять.
Еще один урок на эту тему в этом блоге:
«Делаем стеклянную кнопку в Adobe Photoshop»
Подпишитесь на , чтобы быть в курсе последних обновлений.
Станьте читателем моего электронного журнала -
Добавь пост в Закладки:
Да, кнопки бывают часто нужны. И обращаться к кому-то — как-то не серьезно. Так что пригодится любому блогеру!
Что-то случилось с блогом. Не могу подписаться на RSS. Поправьте пожалуйста.
Проверила, все нормально, подписка на feedburner открывается и можно подписываться.
Какой же у вас интересный и полезный сайт! Подписалась на обновление, чтобы быть в курсе.
Кнопка — вещь полезная. Очень оживляет дизайн сайта.
Какой хороший урок Очень полезный Спасибо
Здравствуйте Галина!
Как раз осваиваю помаленьку фотошоп.
Очень хотелось бы узнать как сделать кнопку как будто она лаком покрыта, на подобии как красная овальная, та что без надписи, очень нравятся такие кнопки, а делать пока не научилась…
Хорошо, Татьяна, сделаем с Вами кнопку, овальную. Какого цвета Вы хотите ее сделать?
Спасибо Галина за урок! Оечнь приятно было найти ваш сайт перед началом изучения Фотошопа, он мне очень пригодился.
Галина ваш блог мне сейчас как раз и нужен, спасибо что вы есть, все понятно и подробно написано!
Читал я это в фотошопе, но вот нужды в кнопках пока нет.
Здорово тут у Вас все описанно, мы только вчера занимались кнопками для сайта и особо не знали что и куда. А вот и ваша нужная статья подвернулась. Спасибо за поленые советы чайникам! Будем заходить к Вам в гости почаще.
Очень нужная информация, попробую сделать сама кнопку.
Спасибо за полезную информацию!
Совсем не дружу с графикой. Раньше не требовалось, а сейчас некогда. Но начинать все равно надо. Буду заглядывать к Вам, учиться.
Давно хотел сделать кнопку для сайта, но не знал как это все делается. Благодаря этой статье одной проблемой станет меньше
Спасибо, очень полезно и главное нужно . а описано так подробно, что только выполнить и все получится.. еще раз благодарю..
А у меня вот пропала кнопка ретвита, и не пойму как ее восстановить, была, исчезла и все. Плагин установлен, все настроено…
Очень понравился ваш сайт Галина. Хороший МК. Только вот вопрос у новичка назрел, а как после эту кнопку разместить у себя на блоге? Она же еще и функционировать должна.
Татьяна, загружаете так, как и любое изображение, но помещаете на нее Вашу ссылку ( значок звена цепи). Все это проделываете в черновике в разделе записи. А уже код готового изображения переносите в любое место.
Сколько для меня нового. Надо еще расти и расти. Подписалась на Вашу рассылку. Спасибо за полезную информацию.