Делаем стеклянную кнопку в Adobe Photoshop
Про кнопки я уже писала ранее «Как сделать кнопку на блог или сайт», но все равно, меня просят объяснить тот или иной вопрос на эту тему. И вот поступила еще одна просьба, на этот раз просят рассказать, как сделать стеклянную кнопку.
Нарисуем стеклянную кнопку в графическом редакторе Adobe Photoshop.
Такую кнопку сделать совсем несложно даже новичку в компьютерной графике.
Создаем документ размером примерно 800 х 600 и создаем новый слой с прозрачным фоном, с теми же параметрами и на нем рисуем фигуру кнопки.
Для этого берем инструмент «Прямоугольник с закругленными углами» (радиус устанавливаем примерно = 60 пикселей). Или берем другой инструмент, по вашему желанию.
Я возьму, для примера, инструмент «Овал». Заливаем тело кнопки любым цветом, потом в процессе работы цвет все равно поменяется.
Создаем еще один новый слой и, нажав клавишу Shift, выделяем оба верхних слоя, затем объединяем их (Ctrl + E).
Кликнув дважды на слое, вызываем палитру слоев и выбираем «Наложение градиента».
Особое внимание уделите масштабу градиента, регулируя его, вы можете делать толще или уже полоски сложных градиентов.
Кроме того, переключаясь на инструмент «Перемещение» (V), градиент можно подвинуть вверх или вниз, настраивая так, чтобы темная полоса сложного градиента приходилась на теневую часть кнопки.
Любой градиент вы можете создать сами и подобрать подходящий для вашего сайта цвет, для этого нужно кликнуть левой кнопкой мыши по определенному маркеру и задать ему какой-то цвет. Я сделала вот этот градиент — сиреневый с переливами, посмотрим, что у нас получится.
Если вам нужно сохранить созданный вами стиль, то нажимаем на значение «Новый».
Далее настраиваем «Глянец», вот примерные настройки и не забудьте убрать галочку на значении «Инвертировать».
И еще, для создания стеклянной кнопки, важное значение, имеет настройка «Контур». Для сиреневой кнопки я выбрала плавный контур, здесь нет резкого очертания краев и явной видимости выпуклости кнопки.
Вот посмотрите, это пример другой кнопки, с контуром из двух вершин, видно, как по контуру кнопки расположены две полоски и это придает ей определенный эффект прозрачности.
Просмотрите все настройки, прежде чем окончательно выбрать нужную вам.
Далее настраиваем «Тиснение».
Создаем дубликат слоя, на котором скроем все эффекты, отключив их видимость.
Нажимаем комбинацию клавиш (Ctrl + T), делаем деформацию овала.
Воздействуя на маркеры деформации, уменьшаем полученную фигуру и располагаем её в верхней части кнопки, отступив от края на 1 — 2 пиксела. Это будет будущий блик на кнопке.
Дважды кликнув внутри рамочки, убираем ее.
Далее дважды кликаем по слою с бликом и появляется панель «Стили слоя», выбираем «Наложение цвета», убрав галочки со всех других опций.
Выбираем белый цвет.
Не забудьте опять включить видимость эффектов слоя (глазок), иначе ничего не будет видно.
Применяем для этого слоя слой-маску.
Берем инструмент «Линейный градиент» черно-белого цвета и проводим этим градиентом по белому блику снизу вверх.
Инструментом «Текст» пишем нужное название кнопки и, выделив текст, деформируем его таким образом, чтобы создавалось впечатление, что текст написан на выпуклой поверхности.
Придаем тексту стили: «Тень», «Внутреннее свечение», «Тиснение» и «Наложение градиента», который вы можете создать сами.
Вот и всё. Пока слои еще не объединены, можно вернуться на любой шаг и подкорректировать то, что вам не нравится.
Самый нижний слой, слой с фоном мы удаляем, а остальные все слои можно объединить между собой.
Подпишитесь на , чтобы быть в курсе последних обновлений.
Станьте читателем моего электронного журнала -
Добавь пост в Закладки:
Спасибо большое, взяла на заметку, может быть, пригодится делать очередные кнопочки.
Попробую сделать, хотя не уверен, страшновато
Все очень просто, ничего сложного нет, попробуйте и у Вас все получится.
Ура! Мои любимые уроки!!!
Надо попробовать сделать кнопочку, спасибо.
Интересно получилось, надо попробовать!))
А я даже пробовать боюсь. Все равно у меня не получится.
Аллочка, это Вы напрасно так считаете, все у Вас получится.
Галочка, каждый раз, когда захожу к тебе, даю слово начать постигать хоть один графический редактор, но времени совсем не могу найти. А ведь так надо!
У нас всегда не хватает времени…
Смотрится такая кнопочка превосходно
Очень ценный урок по роботе с фотошопом, спасибо
Галочка, ты как всегда на высоте. Все доступно, по шагово. Спасибо.
очень красивые кнопочки получились! ну и терпения надо, чтобы их создать )))
Ты уже настоящий гуру в фотошопе!:)
Очень симпатичная кнопка. Вы — молодец, рассказываете всё так понятно.
Красиво получается, я сейчас как раз вспоминаю как работает фотошоп. Давно не работал с этим редактором, недавно снова установил
Класс, настолько всё подробно и четко, у меня всё по инструкция получилось