Создать «нажатую» версию изображения кнопки?

Самый простой и простой способ - затемнить кнопку при ее нажатии. Применение 30% черного слоя поверх добьется цели.

Образец макета кнопки

Чтобы сэкономить время и обеспечить переходы между состояниями, важно создавать эффекты кнопок на языке стилей для любого пользовательского интерфейса, который вы создаете , а не создавать изображения для каждого из них . Это позволит повторно использовать эффект, когда у вас другой текст, размер и т. д.

Возьмем, к примеру, дизайн для Интернета или что-то, что понимает HTML/CSS:

Элемент HTML <button>поставляется с состоянием нажатия по умолчанию, которое затемняет внутреннюю часть тенью. Скорее всего , он не так красиво оформлен, как вам хотелось бы, но мы можем довольно легко стилизовать его сами, используя :activeсостояние CSS.

Используя язык стилей, мы также можем переходить из одного состояния в другое, а не просто резко меняться.

В этой демонстрации я покажу, как применить изменения к цвету фона, добавить тень и контур при использовании перехода из каждого состояния. Сами эффекты должны быть более тонко настроены на практике, но это показывает, как это можно сделать.

_{Чтобы узнать, какие префиксы вам нужны transition(если они есть) , посмотрите здесь или на caniuse ).}

Для более сложных переходов между состояниями иногда требуется фактический ключевой кадр или анимация JavaScript. В этом случае анимация обычно переключается, и ее необходимо завершить, прежде чем ее можно будет запустить снова.

Подобные эффекты могут быть созданы с использованием тех же методов, если вы работаете над реальным приложением Java, приложением iOS или чем-то еще, но реализация будет другой.

Что касается самого стиля, в справочнике по дизайну материалов Google для кнопок приведены более точные рекомендации. Они предлагают изменить цвет фона только для второстепенных кнопок, но изменить фон и тень для более важных кнопок.

Для неважных жизненно важных кнопок, которые являются дополнительными (например, кнопки «Поделиться»), они рекомендуют что-то похожее на следующее.

Для более важных, жизненно важных кнопок они рекомендуют «поднять» его, то есть использовать тени, чтобы передать большую важность.

Они также рекомендуют использовать переходы/анимации между состояниями и имеют несколько отличных примеров на странице, указанной выше.

Если то, что вы пытаетесь сделать, не должно быть плоским, я бы порекомендовал вам просто добавить внутреннюю тень, подобную этой.

Однако, если это должен быть плоский дизайн, я рекомендую изменить цвет (темнее) или инвертировать:

Это действительно зависит от того, насколько сложной вы хотите сделать кнопку. Простую кнопку можно сделать с помощью всего одной формы с несколькими свойствами для представления нормального состояния и состояния нажатия.

В Illustrator вы можете проверить свойства формы на Appearanceпанели, они аналогичны слоям и могут отображаться и скрываться для переключения состояний кнопки. На рисунке я использую две заливки: светло-серую для обычной и темно-серую для прессованной.