Очень часто на сайтах можно увидеть кнопки с текстом, словно бы вдавленным внутрь. Такой своеобразный оттиск. Есть масса способов повторить этот эффект в ФШ, используя различные стили, ембоссы, тени и свечения. Но я нашла самый простой способ добиться такого же эффекта. Принцип его прост и, вместе с тем, изящен: шрифт просто дублируется на нижележащий слой и затем сдвигается на 1 пиксель вниз и на 1 пиксель вправо. При этом цвет шрифта на этом слое меняется на белый или просто светлый различных оттенков. Получается блик, который и создает эффект оттиска.
Для начала при помощи инструмента Rounded Rectangle Tool создадим тело кнопки светло-серого цвета
Затем последовательно применим к ней парочку стилей:
Получилась выпуклая кнопка
На новом слое темно-серым цветом печатаем какое-нибудь слово
Дублируем слой с текстом. Затем переключаемся на нижележащий слой с текстом, меняем его цвет на белый и при помощи кнопок-стрелок сдвигаем текст на 1 пиксель вниз и на 1 пиксель вправо
Вот так вот просто и легко. Применять эффект можно не только для кнопок или заголовков. Очень привлекательно выглядит также просто текст абзаца. А чтобы немного сгладить эффект, можно у нижележащего слоя увеличить прозрачность.
Постовой:
Если у вас в планах не предусмотрена покупка собственной ТЭЦ, но есть желание подписаться на абонентское обслуживание компьютеров, то красивые свадебные букеты помогут создать позитивный настрой
Здравствуйте! Меня зовут Настя Манно. Я веб дизайнер и автор этого блога
Мне кажется проще, чем плодить слои, включить в стилях тень и настроить ее как нравится.
[Ответить]
:) Попробуйте настроить тень у шрифта 12pt или менее. Особенно если он с засечками. Для крупных шрифтов можно и с тенями поиграться, но на мелких оно выходит бестолково
[Ответить]
Странно, не мог отправить комментарий прошлый, выдавало ошибку, а он есть =( Так вот: http://www.fazeful.ru/temp/shadow.gif Разве есть разница?
[Ответить]
Константин, разница есть и она очевидна. У вас получилось лишь похоже, но не то. Если присмотреться, то не на всех буквах есть блики. А зачастую даже такая мелочь способна свести на нет весь эффект.
[Ответить]
Разницы нет. Способы, похоже, равнозначны.
[Ответить]
Хм… Разница? Ткните меня носом в разницу. Один из столбиков сделан моим способом другой способом описанным в этом уроке. Сравнивая в шопе не увидел разницы. Пиксели одинаковы.
Собственно спор этот не должен был случиться. Я просто предложил свой способ, который делает тоже самое. Тень это такая же копия букв, сдвинутая на 45 градусов. Так откуда взяться разнице?
[Ответить]
Хорошо. Спорить и правда не имеет смысла. Каждый использует тот метод, который ему удобнее. Константин, у меня к вам только просьба: опишите, пожалуйста, какие должны быть настройки при добавлении тени.
[Ответить]
Да не вопрос, пожалуйста: http://fazeful.ru/temp/shadow.png
Я такие настройки всегда ставлю.
[Ответить]
Окей! Спасибо! :)
[Ответить]
Ух ты! Давно искал как такие буковки делать =) Сам пробовал чего то не особо как получалось… Такие буковки кстати есть на сайте: 365 Дней астрономии или как-то так =) Кстати там буковки и цифирки побольше. Мне кажется это сложнее сделать чем здесь…
[Ответить]
[…] Суеверный ли Стас Уваров? В какие приметы верит Настя Манно? И во что верит автор блога для […]
Способы в принципе равнозначны, хотя способ автора мне нравится больше :)
[Ответить]
а меня больше интересует можно ли такие буковки в векторном редакторе сделать и чтоб на логотипе смотрелось нормально…?
[Ответить]
Di, конечно можно :) Я думаю, что в векторе это не сложнее, чем в ФШ. Другое дело, что все-равно впоследствии придется картинку переводить в растр и смягчать очертания букв, так как на крупных шрифтах часто проявляются зазубрины на изгибах.
[Ответить]
А можно урок по созданию теней? Вот у меня тетрадка как бы… и смотрим на нее спереди, чего-то не получается тени сделать хорошо =(
[Ответить]
Можно и про тени :) Постараюсь в ближайшее время рассказать и показать.
[Ответить]
Хорошо, будем ждать… Только что бы объемненько все было =)
[Ответить]
Здравствуйте
А вот мне недавно поставили задачу сделать подобный эффект только на белом фоне. Ох я промучался с этим заданием. В итоге пришлось здаться, потому как на белом фоне смотрится совершенно не так красиво (
Может кто знает как это можно сделать?
[Ответить]
Григорий, можете показать ваш вариант? Просто чтобы увидеть в чем ошибка.
[Ответить]
Вот на этой картинке наглядно показано
http://design-clipart.com/images/primer.jpg
[Ответить]
Можно попробовать задать слою с белым шрифтом эффект внешнего свечения (Outer Glow) серого цвета размером в 2 - 3 пикселя. Либо эффект тени, но с Distance в 0
[Ответить]
Оно конечно можно, но всё равно будет не похоже. Если я ошибаюсь то хотелось бы пример )
Думаю что на белом такой эффект не получится (
[Ответить]
Ясное дело.
[Ответить]
Такой эффект быстрее всего делается с помощью стиля bevel & emboss. Пример тут: http://clip2net.com/page/m0/1189009
[Ответить]
@Настя Манно, @Григорий: пример с текстом 12pt на белом фоне:
http://clip2net.com/clip/m9343/1245428082-clip-52kb.png (здесь у текста сероватая заливка, т.к. он вдавленный)
и http://clip2net.com/clip/m9343/1245428254-clip-17kb.png - то же самое но без заливки, белый текст на белом фоне. Выглядит вполне читаемо. Хотя я бы так не делал :]
[Ответить]
Добрый день, Настя!
Тема уже старая, но может Вы ответите.
Как сделать что-бы текстура вдавленного шрифта была такой же как подложка.
[Ответить]
Здравствуйте, Олег!
Самый простой способ это воспользоваться эффектом bevel & emboss, убрав затем заполнение (fill) до 0%
[Ответить]
Настя, огромное спасибо!
Если честно слегка потрясён, как оперативно помогаете.
Сейчас попробую.
Вы лучшая!!!
[Ответить]
Спасибо, Олег, на добром слове! :)
[Ответить]
Настя, спасибо вам за урок! Очень нравится этот эффект
[Ответить]
Настя Манно
@Яна, не за что! :)
[Ответить]