Как сделать кнопку в фотошопе
Обновлено: 21.11.2024
Вот как создать 3D-кнопки в Photoshop вместе с состояниями "вверх" и "вниз", чтобы их можно было анимировать.
В Adobe Photoshop можно создать множество удивительных вещей, которые будут полезны в Интернете, от простых рамок для фотографий до сложных пользовательских интерфейсов. Одной из самых полезных вещей, которые вы можете создать в Photoshop, являются 3D-кнопки, которые пригодятся, если вы ведете блог или веб-сайт со специальным интерфейсом.
В этой статье мы покажем вам, как создавать 3D-кнопки с помощью Photoshop, а также визуальные состояния «вверх» и «вниз», чтобы вы могли их анимировать. (В этой статье мы не будем рассматривать саму анимацию.)
Шаг 1. Подготовьте документ
Хотя 3D-кнопки чаще всего появляются на веб-сайтах, важно отметить, что для них есть и другие приложения, например анимированные GIF-файлы, макеты товаров и мобильные игры. В зависимости от того, для чего вы создаете эту кнопку, окончательный формат файла и его размеры могут различаться.
Чтобы создать 3D-кнопку в Photoshop, вам потребуется создать для нее специальный документ. Для этого откройте Photoshop и нажмите «Создать новый» > «Пользовательский». Начните вводить свои значения.
Чтобы создать 3D-кнопку, вам понадобится горизонтальный документ. Для нашего мы использовали:
- Высота 900 x 300 пикселей.
- 300 пикселей на дюйм
- Цветовой режим RGB
Хотя эти спецификации, безусловно, не являются жестким и быстрым правилом, это гарантирует, что у вас будет более чем достаточно места для работы, а также возможность масштабировать размер кнопки вверх и вниз по мере необходимости.
Шаг 2. Настройте прямоугольник для 3D-кнопки
После того как вы настроите спецификации для своего файла, вы попадете в свою рабочую область. У вас будет горизонтальный белый холст в один слой, и именно здесь вы начнете создавать кнопку.
Чтобы создать 3D-кнопку, нажмите на инструмент "Прямоугольник со скругленными углами" в левой части экрана, выделенный здесь красным цветом. Вы также можете использовать ярлык U для доступа к нему.
Нажмите один раз на белом слое: автоматически откроется окно «Создать прямоугольник со скругленными углами». Вы будете использовать это поле для указания размеров вашего прямоугольника.
Для нашей кнопки мы выбрали:
Мы также позаботились о том, чтобы углы были скруглены на 10 пикселей. Не слишком высоко, но и не слишком низко. Затем мы нажали ОК.
Примечание. Кнопки различаются по размеру и форме, поэтому не обязательно использовать именно эти размеры. Кроме того, если вам нужна дополнительная информация о сочетаниях клавиш, вот некоторые из наиболее полезных клавиатурных команд Photoshop.
Когда вы нажмете OK, Photoshop создаст скругленный прямоугольник с этими размерами внутри вашего слоя. Вы можете изменить цвета заливки и обводки, используя раскрывающиеся меню в верхнем левом углу экрана.
Для целей этого руководства --- и чтобы проиллюстрировать, как могут выглядеть кнопки "вверх" и "вниз", мы сделаем нашу кнопку "вниз" красной.
Шаг 3. Сделайте кнопку трехмерной
После того, как вы создадите основную кнопку и выберете ее цвет, вы захотите настроить ее в диалоговом окне "Стиль слоя". Это сделано для того, чтобы он выглядел более трехмерным.
Чтобы получить доступ к диалоговому окну «Стиль слоя», выберите «Слой» > «Стиль слоя» в верхнем меню. Вы также можете дважды щелкнуть слой, содержащий вашу кнопку, чтобы вызвать его автоматически. Этот способ намного быстрее, и лично мы предпочитаем его.
После того, как поле «Стиль слоя» открыто, перейдите к параметру «Скос и тиснение». Включите его.
Это быстрый и простой способ придать краям кнопки более приподнятый трехмерный вид. В этом уроке мы использовали следующие настройки:
Структура
Затенение
Хитрость заключается в том, чтобы сделать настройки достаточно высокими, чтобы вы могли видеть некоторую разницу, но не настолько сильной, чтобы она была подавляющей.
После того, как мы закончили с Bevel & Emboss, мы перешли к Contour и включили и его. Contour делает определение Bevel & Emboss немного более сильным, и для этого урока мы выбрали настройку Cone - Inverted.
Затем включите наложение градиента. Это то, что придает кнопке округлый, слегка «глянцевый» вид. Настройки следующие:
Наконец, мы включили функцию "Тень", чтобы кнопка выглядела немного "приподнятой" над белым фоном веб-сайта или блога. Опять же, вот настройки:
Структура
Качество
Теперь пришло время сохранить эти спецификации как стиль слоя.
Шаг 4. Сохранить как стиль слоя
После того как вы закончите настройку кнопки, она начнет выглядеть трехмерной. Поскольку высока вероятность того, что вы будете создавать более одной 3D-кнопки, нам нужно найти быстрый и простой способ сделать это.
Прежде чем нажать «ОК» в диалоговом окне «Стиль слоя», нажмите «Новый стиль». Когда вы это сделаете, Photoshop сохранит этот стиль слоя, который вы создали для кнопки.
Если вы используете Photoshop CC, этот новый стиль будет сохранен в разделе «Библиотеки», как показано выше. Это очень быстро и легко получить доступ.
Шаг 5. Как использовать сохраненный стиль слоя
Теперь, когда вы разработали свою кнопку и сохранили ее как стиль слоя, давайте посмотрим, как она действует в вашем состоянии "включено". Ни слова лжи, это сократит ваше рабочее время вдвое.
Сначала давайте создадим еще одну кнопку прямо над слоем с красной кнопкой, вот так. Давайте сделаем его зеленым для акцента.
Далее --- вместо того, чтобы дважды щелкнуть сам слой, чтобы открыть диалоговое окно "Стили слоя", дважды щелкните стиль слоя на панели "Библиотеки".
Когда вы это сделаете, Photoshop автоматически применит сохраненный стиль к новому слою кнопки, сохранив его новый цвет и форму. Теперь у вас есть две кнопки — одна в верхнем положении и одна в нижнем — и это так просто сделать. Мне нравится этот ярлык.
Шаг 6. Добавьте текст на кнопку
Далее мы добавим текст на кнопку.
Чтобы добавить текст, создайте новый слой над двумя слоями с кнопками. Нажмите инструмент «Текст», чтобы начать печатать.
В этом уроке мы напишем слово "подписаться", потому что это то, что вы часто видите на веб-сайтах и в социальных сетях.
Мы также собираемся использовать веб-безопасный шрифт без засечек. Окончательный выбор того, какой из них вы используете для своей собственной кнопки, зависит от вас. Montserrat, Proxima Nova, Arial и Verdana — широко используемые альтернативы, безопасные для Интернета.
Однако после того, как это будет сделано, вам нужно будет внести еще несколько тонких изменений, чтобы этот текст стал "всплывающим".
Сначала дважды щелкните слой, содержащий текст, чтобы открыть его в диалоговом окне "Стиль слоя".
Затем нажмите «Внутренняя тень», чтобы добавить к тексту небольшое углубление (или углубление). Это создает впечатление, что буквы были выгравированы на кнопке. Точные настройки, которые мы использовали для этого руководства, приведены ниже.
Структура
Качество
Шаг 7. Завершение
После того как вы создадите этот текстовый стиль --- особенно если вы хотите использовать его снова, перейдите в раздел "Новый стиль" и сохраните его, прежде чем нажимать "ОК".
После этого вы можете быстро переключаться между двумя слоями кнопок, чтобы увидеть, как выглядят состояния "вверх" и "вниз".
Прикольно, да? Чтобы сохранить файл, выберите «Файл» > «Сохранить как» и сохраните его в формате, подходящем для любого проекта, над которым вы работаете.
Настройте свой блог с помощью 3D-кнопок и виджетов
Теперь, когда вы знаете, как создавать 3D-кнопки в Photoshop, вы можете проявить творческий подход, создав собственные 3D-кнопки в соответствии со своими потребностями. И с этими навыками в вашем арсенале вы сможете сделать продукт, который будет не только профессиональным, но и индивидуальным.
Хотите узнать о других возможностях этой программы? Вот как удалить фон в Photoshop.
Кнопки, кнопки, кнопки! Вы видите этих маленьких ребят почти везде, куда бы вы ни посмотрели в Интернете — в меню, контактных формах и на страницах продуктов (и это лишь некоторые из них). Поскольку кнопки являются неотъемлемой частью взаимодействия с пользователем, я покажу вам, как создать собственную стильную кнопку в Photoshop. Это довольно простой процесс, занимающий не более 15–20 минут.
Давайте начнем и добавим вашему пользовательскому интерфейсу немного крутизны.
Откройте Photoshop — Ctrl+N, чтобы открыть новое окно холста. Ширина и высота полностью зависят от вас, но убедитесь, что разрешение составляет не менее 72 точек на дюйм, а цветовой режим — RGB 8 бит.
Мы собираемся быстро подготовить фон — залить текущий фон серым цветом.
Затем добавьте эффект «Шум» («Фильтр» > «Шум» > «Добавить шум…»).
Большинство кнопок имеют закругленные углы, но в данном случае я хочу, чтобы они были квадратной формы. Создайте новый слой (Ctrl + Shift + N), установите цвет переднего плана на оранжевый и используйте инструмент «Прямоугольник» (U), чтобы создать новую фигуру. Обязательно выберите «Слои-фигуры» в верхнем меню.
Нарисовав базовую форму, мы добавим стили слоя. Всякий раз, когда вы хотите добавить стиль к слою, просто дважды щелкните слой (или щелкните правой кнопкой мыши слой > Параметры наложения), и появится окно «Стиль слоя».
Первый стиль, который мы добавляем, – это тень.
Пока не закрывайте палитру стилей слоя!Следующий стиль, который нужно добавить, — это внутренняя тень. Он добавит блеск верхней части кнопки, придав ей трехмерный вид.
Двигаясь дальше, выберите Внутреннее свечение, чтобы добавить объема. Это может показаться тонким дополнением, но поверьте мне, это мелкие детали, которые имеют значение.
Примените эффект «Наложение градиента» и установите режим наложения «Наложение». Возможно, вам потребуется установить флажок «Обратить» рядом с градиентом, чтобы верхняя часть кнопки была яркой, а нижняя — темнее.
Последний эффект — Обводка.
Мы хотим подчеркнуть трехмерный эффект кнопки. Мы собираемся сделать это, создав новую фигуру белого цвета и поместив ее сверху так, чтобы она закрывала половину нашей оранжевой кнопки.
Теперь создайте обтравочную маску на белой фигуре (щелкните слой правой кнопкой мыши > Создать обтравочную маску).
Затем выделите слой с белой фигурой и добавьте маску слоя — щелкните значок маски слоя в нижней части палитры слоев.
Используйте инструмент "Градиент" (G), чтобы покрыть белую фигуру градиентом от переднего плана к прозрачному.
Измените режим наложения для белой фигуры на «Перекрытие». Теперь у нас есть гладкий эффект для кнопки.
Наша кнопка должна что-то говорить, верно? Я выбрал классический шрифт, например Helvetica Neue.
Отцентрировать текст на кнопке легко:
- Сначала выберите слой «Текст». Наведите указатель мыши на оранжевую фигуру, удерживайте Command и щелкните. Вокруг оранжевой кнопки появятся линии выбора.
- На верхней панели нажмите Выровнять по центру по вертикали и Выровнять по центру по горизонтали.
Примените к тексту эффект тени, как показано ниже:
Ура, мы создали кнопку! Надеемся, что это руководство помогло добавить еще одну красивую кнопку в ваш веб-дизайн.
Здравствуйте, меня зовут Крис, также известный как thislooksgreat. Сегодня мы рассмотрим создание эффективной кнопки призыва к действию, а также проблему с изменением ее размера и дублированием.
Приступим:
< /p>
Основной частью нашей кнопки будет прямоугольник со скругленными углами, поэтому выберите этот инструмент на левой панели. Вы также можете нажать U, а затем Shift+U для прокрутки этих инструментов. Я использую Photoshop CS6, и мне доступен параметр выравнивание краев. Обязательно всегда устанавливайте этот флажок, потому что это предотвращает появление нечетких краев на ваших фигурах. Хороший радиус составляет от 5 до 10 пикселей. Квадратные кнопки действительно вышли из моды, поэтому старайтесь держаться от них подальше.
Давайте нарисуем длинную и приземистую фигуру. В идеале соотношение должно быть около 3,5 к 1, но не будем вдаваться в подробности. Хорошо, теперь перейдите в нижнюю часть панели слоев и нажмите маленькую кнопку fx. Во всплывающем окне выберите «Наложение градиента». Отсюда мы нажмем на полосу градиента, откроем новое окно и создадим собственный градиент.
Во-первых, левая сторона, нижняя область. У меня уже есть хороший код синего цвета. Это 186be7, но вы можете использовать все, что хотите. Когда все будет готово, выберите код цвета и скопируйте его с помощью Ctrl+C. Нажмите ОК, перейдите на другой конец и вставьте код, нажав Ctrl+V. Теперь поднимите палитру цветов, чтобы получить светло-синий цвет. В моем случае я установлю его точно на 0f88f9.
Отлично. Теперь несколько раз нажмите Ok, и у нас есть база. На самом деле мы можем назвать это просто так: base. Хорошо, теперь у нас есть этот красивый 3D вид. Давайте строить на этом. Перейдите к кнопке fx, снова нажмите ее и на этот раз выберите Stroke.Размер должен быть 1 пиксель, положение должно быть установлено как Снаружи, и теперь для цвета. Щелкните один раз, чтобы открыть палитру цветов, затем выберите темно-синий из основания нашей кнопки. При необходимости вы можете даже немного перетащить его вниз, если хотите получить еще более темный штрих.
Хорошо, готово. Остался еще один эффект, и это Внутреннее свечение. Выберите его, оставьте все настройки как есть, кроме размера, который должен быть установлен в 2 пикселя. Выделив базовый слой, нажмите Ctrl+J. Переместите этот дубликат под нашу основу на панели слоев, затем сдвиньте его на 3 пикселя вниз с помощью клавиши со стрелкой. Отключите как Внутреннее свечение, так и Наложение градиента, нажав на символы глаза слева от них.
Наконец, дважды щелкните миниатюру и измените цвет на темно-синий. В моем случае это 0f5dc7. Чтобы закончить все, нам нужно немного текста. Нажмите T и напишите общий призыв к действию. Загрузить сейчас — это нормально. Для настроек шрифта я буду использовать Calvert Mt, великолепный шрифт с засечками. Размер должен быть 24 пикселя, а вес шрифта должен быть нормальным. Сделать все белым.
Под ней добавьте вторую строку текста. Кредитная карта не требуется! подходит. Это должно быть меньше по размеру. Я установлю его на 17 пикселей, и цвет должен действительно выделяться. Здесь я буду использовать fbf802. Выберите оба текстовых слоя, находясь в инструменте перемещения, нажмите кнопку вверху с надписью «Выровнять левые края». Используйте Ctrl+G, чтобы сгруппировать их в папку, на всякий случай. Переименуйте его в текст.
Отличные кнопки хороши не просто так. Обычно это связано с их мелкими деталями. Здесь мы добавим к нему что-то особенное с помощью пользовательской формы. Их можно найти в Интернете, так что не беспокойтесь.
Я буду использовать стрелку вниз, потому что она хорошо сочетается с нашим текстом. Цвет, который я собираюсь использовать: 1060b2. Конечно, для этого нужны некоторые эффекты, так что давайте сделаем это сейчас. Сначала Внутренняя Тень. Настройки должны быть:
Это, конечно, будет зависеть от вашего выбора цвета. Следующий эффект, который мы добавим, — Satin. Настройки:
Последний эффект для этого предмета — Обводка. Настройки:
Это действительно добавляет очень тонкий, но видимый эффект к нашей пользовательской форме.
Чтобы отделить стрелку от текста, воспользуемся хорошей техникой. Возьмите инструмент линии на левой панели. Убедитесь, что толщина установлена на 1 пиксель, и перетащите вертикальную линию от верхней части кнопки до упора вниз. Сделайте эту линию черной. Затем используйте Ctrl+J, чтобы продублировать его, сдвиньте его на 1 пиксель вправо с помощью клавиши со стрелкой и сделайте его белым. Здорово. Теперь уменьшите непрозрачность примерно до 30 %, нажав 3 на клавиатуре. Если вы хотите, например, 35, просто введите: 35. В зависимости от яркости вашей кнопки вам, вероятно, также придется настроить черную линию. Не торопитесь с этим и найдите для него хорошее соотношение цены и качества.
Хорошо. Теперь сгруппируйте обе строки в папку, и теперь самое интересное. Перейдите в нижнюю часть панели слоев и нажмите кнопку маски. Затем нажмите G и убедитесь, что у вас выбран инструмент градиента. Взгляните на настройки вверху. От белого к черному, радиальный, непрозрачность 100 %, с включенным дизерингом и прозрачностью.
Теперь пора начинать перетаскивание. Здесь нет определенной формулы. Удерживайте Shift и перетащите несколько раз, пока не получите нужный эффект. Попробуйте короткое перетаскивание, а затем немного удлините его, чтобы вы могли ориентироваться. Важно перетаскивать из центра кнопки, а не сверху или снизу.
После нескольких подходов он должен быть готов. На этом этапе я мог бы показать вам, как сделать его еще лучше, может быть, добавить к нему реалистичную тень или, может быть, отражение, но в данном случае это не сработает из-за нашей точки зрения. Мы видим это снизу, поэтому оставим эти приемы для другого урока.
Я покажу вам несколько способов добавления к нему эффекта блеска. Первый: сгруппируйте все в одну папку. Затем используйте Ctrl+J, чтобы сделать его копию. Щелкните его правой кнопкой мыши и нажмите «Преобразовать в смарт-объект». Возьмите Инструмент "Эллипс" и перетащите вот такую фигуру. Обязательно сделайте его белым и отцентрируйте по кнопке. Вы можете использовать инструменты выравнивания вверх, выбрав оба слоя, или использовать Инструмент выделения. Что бы вы ни чувствовали себя лучше. Затем нажмите Ctrl+Alt+G, чтобы создать обтравочную маску. Это скрывает лишний белый цвет.
Хорошо. Теперь, выбрав только новую фигуру, нажмите 1 на клавиатуре, чтобы уменьшить непрозрачность до 10%, и все. Это наш первый вариант.
Позвольте мне отложить это в сторону. Второй вариант выглядит так. Вернитесь к нашей начальной кнопке и нарисуйте над ней прямоугольник. Он должен быть белым. Стремитесь к середине, более или менее. Теперь, удерживая нажатой клавишу Ctrl, щелкните миниатюру базового слоя. Важно отметить, что мы все еще находимся на новом слое прямоугольника. Теперь нажмите значок маски снизу и уменьшите непрозрачность до 10%. Вот и все.
Вот что я хотел показать вам относительно кнопок призыва к действию. Есть еще много чего сказать, но я хочу, чтобы это было как можно короче. У меня есть куча других бесплатных руководств, которые вы можете посмотреть, а также 16-часовое премиальное руководство, в котором я раскрываю все свои секреты.
Вернемся к этому руководству. Последняя часть посвящена проблеме со скругленными формами. Как вы, наверное, знаете, если мы хотим увеличить нашу кнопку, мы не можем просто использовать для нее Ctrl+T, потому что радиус угла будет искажен. Чтобы сохранить наш радиус, но при этом увеличить нашу форму, будь то кнопка, главное меню, панель поиска или что-то еще, нам нужен инструмент прямого выделения.
Ярлык A и белая стрелка на левой панели, а не черная. Итак, техника проста: нажмите и выберите 2 точки от верхнего края, затем, удерживая Shift, сделайте то же самое для нижнего края. Теперь подойдите к краю и перетащите. Мне также нравится удерживать сдвиг, чтобы он расширялся по прямой линии. Как видите, углы идеальны. Конечно, кнопка нуждается в некоторой настройке, но вы поняли идею. Проблема, которую я хочу продемонстрировать, заключается в следующем: скажем, вы хотите сделать копию, чтобы использовать ее в другом элементе, в нашем случае, возможно, в качестве главного меню. Используйте Ctrl+J, правильно? Что ж, посмотрим, что получится.
Слева у нас квадратные края, так что явно что-то пошло не так. Сколько бы раз вы это ни делали, вы получите один и тот же результат — искаженную форму. Проблема в том, что вы выбрали эти 4 точки ранее, 2 сверху, 2 снизу, и это является причиной нашей проблемы.
Чтобы решить эту проблему, у нас есть несколько вариантов. Во-первых, после того, как вы выберете эти 4 точки и увеличите свою кнопку, всегда, я имею в виду, всегда нажимайте Enter. Это зафиксирует эти точки на месте, и теперь вы можете с удовольствием использовать Ctrl+J. Поэтому помните, что после использования Инструмента прямого выделения всегда нажимайте Ввод, а затем продолжайте работу.
Альтернатива неплохая, но я считаю, что первая лучше. Итак, что вы можете сделать, это использовать Alt и перетащить, чтобы сделать копию. Теперь, даже если вы не заблокировали эти точки, дубликат выглядит нормально. Я знаю, что для некоторых из вас это может показаться не таким уж большим делом, но если вы занимаетесь веб-дизайном, вы наверняка столкнетесь с этой проблемой в какой-то момент, и, поскольку по ней нет учебника, я подумал, что должен упомянуть об этом. .
Тревин – старший директор по развитию бизнеса компании WebFX. Он работал над более чем 450 маркетинговыми кампаниями и занимается созданием веб-сайтов более 20 лет. Его работы были отмечены Search Engine Land, USA Today, Fast Company и Inc.
Предварительный просмотр
Шаг 1. Создайте документ Photoshop
Наша кнопка будет ровно 170 пикселей в ширину и 50 пикселей в высоту, но мы сделаем холст большего размера (600 x 600 пикселей), чтобы у нас была передышка во время работы (тогда мы можем просто обрезать нашу работу перед ее сохранением).
Шаг 2. Создайте базовую форму
Используйте инструмент Rounded Rectangle Tool (U) со значением Слои-фигуры и радиусом 5 пикселей, чтобы создать прямоугольник размером 170 x 50 пикселей.
Шаг 3. Придайте базовой фигуре стиль слоя
Внешний вид кнопки во многом зависит от стиля ее слоя. Такой способ дает нам гибкость на будущее, когда мы захотим изменить определенные аспекты дизайна кнопки, например ее цвет. На панели «Слои» дважды щелкните слой базовой формы, чтобы открыть диалоговое окно «Стиль слоя».
Мы применим к этому слою два эффекта: наложение градиента и обводка. Вот и все.
Наложение градиента
Инсульт
Шаг 4. Придание кнопке диагональной линии
Мы придадим кнопке узор диагональной линии. Мы создадим шаблон Photoshop с нуля. Для начала создайте новый документ Photoshop размером 4x4 пикселя (Ctrl/Cmd + N).
Используйте инструмент "Масштаб" (Z), чтобы увеличить масштаб (4 x 4 пикселя очень трудно увидеть без увеличения). Создайте новый слой и удалите белый фоновый слой по умолчанию.
Используйте инструмент "Карандаш" на панели инструментов, чтобы провести белую диагональную линию из левого верхнего угла в правый нижний угол холста, удерживая нажатой клавишу Shift, чтобы создать идеально прямую линию.
Выберите «Правка» > «Определить шаблон», чтобы сохранить нашу диагональную линию в качестве шаблона.
Вернитесь к нашему основному документу. На панели «Слои» нажмите Ctrl/Cmd и щелкните миниатюру векторной маски слоя «Базовая форма», чтобы загрузить выделение вокруг формы кнопки (выбор «Выделение» > «Загрузить выделение» делает то же самое).
Создайте новый слой поверх слоя с базовой фигурой для нашего диагонального узора. Убедитесь, что вы сохраняете выделение активным. Заполните выделенную область узором, который мы создали, выбрав «Правка» > «Заливка» и выбрав его в раскрывающемся меню «Пользовательский узор».
Мы хотим обрезать края диагонального узора на 2 пикселя, чтобы он не закрывал обводку и тонкую горизонтальную подсветку сверху (которая получается из наложения градиента). Выберите «Выделение» > «Изменить», введите 2 пикселя для параметра Контракт по, инвертируйте выделение (Выделение > Инверсия), убедитесь, что вы все еще находитесь на слое с диагональным узором, а затем просто нажмите «Удалить», чтобы удалить выделенное. площадь.
Мы хотим, чтобы линии были тонкими, поэтому давайте переключим режим наложения слоя с диагональным узором на «Мягкий свет» и уменьшим непрозрачность слоя до 20%.
Шаг 5. Добавьте текст
Шаг 6. Добавьте стрелку
Нарисуйте фигуру справа от кнопки; размер 13x13px, что соответствует высоте строчных букв нашего текста.
Используйте инструмент "Перемещение" (V), чтобы внести необходимые изменения, чтобы текст и стрелка располагались по центру кнопки по горизонтали и вертикали.
Шаг 7. Создайте состояние наведения
Наша кнопка готова. Однако мы должны создать дизайн для состояния наведения кнопки (т. е. того, как кнопка будет выглядеть, когда пользователь наведет на нее указатель мыши).
Поместите все слои, кроме фонового, в группу слоев, выбрав их на панели слоев и нажав Ctrl/Cmd + G (или выбрав «Слой» > «Сгруппировать слои»).
Продублируйте группу слоев, а затем переместите содержимое дублированной группы слоев прямо под исходную кнопку.
Дважды щелкните копию слоя с базовой фигурой (она находится внутри группы наведенных слоев), чтобы открыть диалоговое окно «Стиль слоя».
Измените эффект слоя «Наложение градиента», чтобы градиент выглядел обратным. Вам может подойти опция «Обратное», но я предпочитаю вручную настраивать точки цвета градиента для достижения лучших результатов.
Шаг 8. Обрезка и сохранение
Создайте выделение вокруг двух кнопок с помощью инструмента "Прямоугольная область выделения" (U); он должен быть точно 170x100px, потому что мы будем использовать эти значения в нашем CSS. То, что мы здесь создаем, называется спрайтом CSS; загляните в учебник моего друга Криса Койера по CSS-спрайтам, чтобы узнать о них больше.
После выбора перейдите в «Изображение» > «Обрезать».
Отключите видимость фонового слоя.
Перейдите в меню «Файл» > «Сохранить для Интернета и устройств», выберите PNG-8 с включенным параметром «Прозрачность», затем сохраните его в той же папке/каталоге, в которую вы будете помещать документ HTML (в следующий шаг). Сохраните его как web_button.jpg.
Шаг 9: HTML
Создайте документ HTML (возможно, с именем web_button.html) в той же папке/каталоге, что и ваша веб-кнопка.
Откройте HTML-документ в своем любимом редакторе исходного кода (даже если это обычный текстовый редактор вашей операционной системы, например Блокнот Microsoft).
Поместите следующий код в HTML-документ.
Предварительный просмотр HTML-документа в веб-браузере; это будет выглядеть довольно скучно.
Шаг 10. CSS
Просмотрите документ HTML в веб-браузере и убедитесь, что псевдокласс CSS :focus имеет визуальное представление; для этого несколько раз нажмите Tab на клавиатуре, чтобы перейти к кнопке, и убедитесь, что она меняется на наше состояние наведения, когда вы находитесь на кнопке.
Краткий обзор урока
В этом руководстве показан быстрый и простой способ создания гибкой кнопки веб-интерфейса в Photoshop в популярном стиле, который можно увидеть на многих современных веб-сайтах и в пользовательских интерфейсах. Поэкспериментируйте с цветами, градиентами и узорами, чтобы создать свой собственный образ.
Пожалуйста, разместите ссылку на свою работу в комментариях и включите ее в нашу группу Flickr — мы все будем рады ее увидеть!
Читайте также: