Кнопка для фотошопа: Как нарисовать кнопку в фотошопе

Как создать металлическую кнопку в Photoshop

Прежде всего хочу сказать, что подобную работу рентабельнее выполнять в векторном редакторе, наподобие Adobe Illustrator или CorelDraw, чем в растровом редакторе Photoshop.

Но что делать, если под рукой нет векторного редактора, а работу надо выполнить прямо сейчас? Другого выхода, кроме как применить старый добрый Photoshop, нет. Но и в Photoshop нарисовать кнопку, имеющую эффект металлической поверхности, вовсе не трудно.

Вот что получилось у меня за пять минут работы:

Нарисовать металлическую кнопку с эффектом нажатия мне понадобилось для создания интерфейса бесплатного андроид-приложения «Фонарик», установить которое вы можете по этой ссылке, заодно и посмотреть, как на практике можно применить созданное в Photoshop изображение. Описание приложения здесь.

Давайте приступим.

Открываем Photoshop, создаём новый документ размером 500 на 500 пикселей или какой вам больше нравится. Размеры документа в последствии можно будет изменить без потери качества, т.

к. для создания мы будем использовать векторные инструменты и стили слоя.

Ставим две направляющие точно по центру документа. Берём инструмент «Эллипс», задаём режим «Фигура» (Snape), цвет заливки серый #8f8f8f. Наводим курсор точно в перекрестье направляющих, зажимаем левую клавишу мыши и начинаем тащить курсор в любом направлении от центра. После того, как вы начали протаскивать курсор, зажмите клавиши Alt и Shift, центр построения эллипса переместится в перекрестье курсора, а сам эллипс станет геометрически правильным кругом. Таким образом постройте фигуру в форме круга. Когда закончите, сначала отпустите левую клавишу мыши, и только потом

клавиши Alt и Shift. Таким образом, у нас должно получиться что-то вроде этого:

Построение фигуры эллипса.

 

Это будет передняя плоская поверхность кнопки. Чтобы она была похожа на металлическую, необходимо добавить стиль слоя «Наложение градиента» со следующими настройками:

Обращаю внимание, что стиль градиента — «Угловой» (Angle). Цвета чередуются — чисто белые с серыми разных оттенков.

 

Результат:

Металлический градиент на кнопке.

 

Дублируйте слой с эллипсом и переместите полученный дубликат под исходный слой (у меня дубликат назван

Эллипс 1 копия). Примените к дубликату команду «Свободное трансформирование» (Ctrl+T), зажмите клавиши Alt+Shift и несколько увеличьте диаметр фигуры, потянув за любой из углов рамки:

Создание основы кнопки.

 

Примените к нему также стиль слоя стиль слоя «Наложение градиента», но настройки в этот раз будут другими, стиль градиента — зеркальный, чередуются чёрный и белые цвета:

Добавление зеркального градиента к основе кнопки.

 

Результат должен быль следующим:

Две слой-фигуры с градиентами.

 

Дублируйте слой Эллипс 1 копия, у меня он назван Эллипс 1 копия 2 и переместите его под

Эллипс 1 копия. Увеличьте его диаметр «Свободным трансформированием», чтобы документ выглядел примерно так:

Дублирование слой-фигуры.

 

К этой слой-фигуре мы добавим два стиля слоя — «Тиснение» и «Обводка» со следующими настройками:

    

Результат:

В следующем уроке мы нарисуем значок включения/выключения и зададим кнопке текстуру.

Скачать материалы к уроку:

1 PSD, 1 PNG | 1,54 Мб

Скачать с Яндекс.Диск

Топ-20 горячих клавиш Photoshop CC

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

Я попробовал сделать выборку самых, на наш взгляд, востребованных в работе комбинаций клавиш для Photoshop, и составил этот топ-лист 20. Список получился очень удачным, и сейчас мы рекомендуем его на наших курсах по работе с Adobe Photoshop для дизайнеров и для фотографов.
Проверьте себя — что из этого списка вы используете также часто, как и я?

1. Меняем масштаб

Первую строчку хит-парада занимают комбинации увеличения и уменьшения масштаба изображения — Ctrl (Cmd) + «+» и Ctrl (Cmd) + «-» 

2. Увидеть всё

Пожалуй чуть реже, но максимально часто приходится возвращать масштаб изображения в режим «Fit on Screen», так, чтобы можно было увидеть его целиком — Ctrl (Cmd) + 0 (ноль). Надо сказать, что этой же комбинацией клавиш мы пользуемся и еще в одном случае — предположим вы поместили в свой файл другое изображение и хотите его трансформировать, а это другое изображение оказалось значительно больше, и рамка трансформации оказалась где-то за пределами видимости. В этом случае нажатие Ctrl (Cmd) + 0 увеличит масштаб изображения так, что эта рамка станет видна.

3. У шамана три руки

При работе в увеличенном масштабе для того, чтобы сдвинуть картинку в сторону, мы удерживаем клавишу Space (пробел), это временно активирует инструмент Hand (рука). Таким образом можно выйти из ситуации, когда инструмент, с которым вы работаете, не позволяет вам выбрать «руку» в панели инструментов.

4. Рассмотрим подробнее

Аналогично инструменту «рука» можно временно включить и инструмент «лупа» — для этого нужно удерживать клавиши Ctrl (Cmd) +Space (пробел). При этом пользователям МаcOS будет удобно нажимать в этой комбинации сначала клавишу пробел, а потом Cmd, так как обратное будет переключать раскладку клавиатуры.

5. Путешествие в прошлое

Ctrl (Cmd) + Z — отмена последнего действия. Повторное нажатие отменяет предпоследние действие. Следующее нажатие отменит еще более ранее, и так далее. По умолчанию программа помнит 50 последних действий. Как жаль, что эти воспоминания исчезают при закрытии файла!

В старых версиях программы за эту опцию отвечала другая, не такая удобная комбинация клавиш Ctrl (Cmd) + Alt + Z.

6. Что это было?

Бывает сделаешь что-то, а потом хочется посмотреть, как было, а потом опять как стало. Для сравнения двух последних состояний изображения можно было бы сначала отменить действие, потом отменить отмену, то есть сначала нажать Ctrl (Cmd) + Z, а потом Shift + Ctrl (Cmd) + Z, но есть и другой способ, комбинация Ctrl (Cmd) + Alt + Z.

7. Разгон муравьев

Ctrl (Cmd) + D — универсальная команда, позволяющая снять выделение. Не все инструменты выделения позволяют снять его простым кликом.

8. Скоростное размножение слоев

Самый быстрый способ продублировать слой  —  это убедиться, что у вас ничего не выделено, и нажать Ctrl (Cmd) + J. Если же в этот момент все же было что-то выделено, то в новый слой перейдет лишь выделенная область.

9. Меняем размеры кистей на лету

Левая и правая квадратные скобки — «[» и «]». Универсальная команда для изменения размеров кисти для всех инструментов, у которых есть параметр Width (толщина). Незаменимые клавиши при рисовании, ретуши и работе с маской. А если эти клавиши нажимать вместе с клавишей Shift, то это даст нам изменение жесткости кисти (Hardness), если у выбранного инструмента такой параметр есть, конечно.

10. Свобода трансформации

Вызов опции Free Transform (свободная трансформация) осуществляется комбинацией Ctrl (Cmd) + T. А если в этом режиме кликнуть правой клавишей мыши, то можно получить доступ ко всем опциям меню Transform.

11. Залить сразу

Если зайти в меню Edit и посмотреть, какими клавишами выполняется команда Fill (заливка), то мы увидим Shift + F5. Не знаю как вам, а мне так выворачивать руку страшно неудобно, а жать горячие клавиши двумя руками как-то несерьезно. Но выход есть — мало кто знает, что эту же команду можно выполнить более гуманным сочетанием клавиш, а именно Shift+Backspaсe (это та самая кнопка, которой мы стираем последнюю букву при наборе текста). Надо сказать, что есть еще две похожие комбинации клавиш: Alt + Backspaсe выполняет заливку цветом Foreground, а Ctrl (Cmd) + Backspaсe, как легко можно догадаться — цветом Background.

12. Не забываем сохраняться

Ctrl (Cmd) + S — клавиши, о которых никогда не стоит забывать. Даже в наше время, когда электрификация уже давно охватила всю страну, электричество все же иногда неожиданно отключается, и в этот момент мы внезапно вспоминаем, что файл мы не сохраняли ни разу. Для того, чтобы не было мучительно больно за потерянные часы работы, выработайте привычку нажимать Ctrl (Cmd) + S, всякий раз, когда такая возможность предоставляется. Конечно вы знаете, что современные версии программы делают резервное сохранение, и вообще-то после сбоя файл должен восстановиться. Но практика показывает, что далеко не всегда программа сохраняет именно ту версию, что была у вас на момент выключения компьютера.

13. Магические пассы при работе с маской

Тринадцатое место одновременно заняли две клавиши, которые используются при работе с маской, в первую очередь — это клавиша X, которая меняет местами цвета Foreground и Background, а также клавиша D, которая делает эти цвета черным и белым, наиболее востребованными цветами при работе с маской.

14. Быстрый негатив

Для того, чтобы сделать негатив применяют команду Image—>Adjustments—>Invert. Казалось бы — часто ли мы делаем негатив? Я пользуюсь этой командой постоянно — инвертирую маску, и, чтобы сделать это быстрее, пользуюсь комбинацией Ctrl (Cmd) + I.

15. Материализация выделенной области

Чтобы быстро поправить или уточнить форму выделения, мы пользуемся режимом временной маски — Quick Mask, который вызывается клавишей Q.

16. Секретный способ слияния слоев

Часто, при работе с коллажами или при ретуши, возникает необходимость слить все слои в один, да желательно так, чтобы сами слои остались невредимыми, а результат слияния был представлен в виде отдельного слоя. Попробуйте сделать это известными вам средствами. Довольно хлопотно, не так ли? Тем не менее, это можно сделать одной-единственной командой — зажать сразу четыре кнопки — Ctrl (Cmd) + Alt + Shift + E.

17. Move it!

Сразу несколько позиций подряд у нас занимают клавиши вызова инструментов, в первую очередь инструмента Move — клавиша V.

18. Быстрокисть

Инструмент «кисть» — B. Просто «B», без всяких cmd, alt. B, от слова “Brush”.

19. Просто выделение

Инструменты примитивного выделения — прямоугольного и эллиптического — M. Если вам понравилось так быстро и просто вызывать инструменты, то могу порекомендовать воспользоваться специальными заставками на рабочий стол. С их помощью вы сможете в любой момент подсмотреть быструю горячую клавишу в Photoshop, Illustrator или InDesign.

20. Те самые кривые

Пусть вас не удивляет, что горячая клавиша для вызова самой популярной команды цветокоррекции — Curves — оказалась в конце списка. Дело в том, что коррекцию я обычно применяю в виде корректирующих слоев, так что кривыми в «чистом виде» я пользуюсь редко. Но тем не менее: Ctrl (Cmd) + M.

Приходите учиться на наши онлайн-курсы!

Пройти курс!

Другие курсы

Комбинации клавиш по умолчанию в Adobe Photoshop

Результат	Windows	macOS
Загрузить прозрачность слоя как выделение	Миниатюра слоя, удерживая нажатой клавишу Control	Щелкните миниатюру слоя, удерживая клавишу Command
Добавить к текущему выбору	Control + Shift щелкните миниатюру слоя	Command + Shift щелкните миниатюру слоя
Вычесть из текущего выбора	Control + Alt-клик по миниатюре слоя	Command + Option, щелкните миниатюру слоя
Пересечение с текущим выбором	Control + Shift + Alt-щелчок миниатюры слоя	Command + Shift + Option, щелкните миниатюру слоя
Загрузить маску фильтра как выбор	Миниатюра маски фильтра, удерживая нажатой клавишу Control	Удерживая нажатой клавишу Command, щелкните эскиз маски фильтра
Новый слой	Control + Shift+ N	Команда + Shift+ N
Новый слой через копию	Управление + J	Команда + J
Новый слой через разрез	Shift + Control + J	Shift + Command + J
Группа слоев	Управление + G	Команда + G
Разгруппировать слои	Контрол + Shift + G	Команда + Shift + G
Создать/снять обтравочную маску	Контрол + Alt + G	Команда + Опция + G
Выделить все слои	Контрол + Alt + А	Команда + Опция + А
Объединить видимые слои	Control + Shift + E	Команда + Shift + E
Создать новый пустой слой с диалоговым окном	Удерживая нажатой клавишу Alt, нажмите кнопку «Новый слой»	Удерживая нажатой клавишу «Option», нажмите кнопку «Новый слой»
Создать новый слой ниже целевого слоя	Удерживая клавишу Control, нажмите кнопку «Новый слой»	Удерживая нажатой клавишу Command, нажмите кнопку «Новый слой»
Выбрать верхний слой	Alt + . (период)	Опция + . (период)
Выбрать нижний слой	Alt + , (запятая)	Опция + , (запятая)
Добавить к выделению слоя на панели «Слои»	Shift + Alt + [ или ]	Shift + Option + [ или ]
Выбор следующего слоя вниз/вверх	Alt + [ или ]	Опция + [ или ]
Переместить целевой слой вниз/вверх	Управление + [ или ]	Команда + [ или ]
Объединить копию всех видимых слоев в целевой слой	Control + Shift + Alt + E	Команда + Shift + Опция + E
Объединить слои	Выделите слои, которые хотите объединить, затем нажмите Control + E	Выделите слои, которые вы хотите объединить, затем Command + E
Переместить слой вниз или вверх	Control + Shift + [ или ]	Команда + Shift + [ или ]
Копировать текущий слой на слой ниже	Команда Alt + Merge Down из всплывающего меню панели	Параметр + команда «Объединить вниз» из всплывающего меню «Панель»
Объединить все видимые слои в новый слой над текущим выбранным слоем	Команда Alt + Merge Visible из всплывающего меню панели	Опция + команда «Объединить видимые» из всплывающего меню «Панель»
Показать/скрыть только этот слой/группу слоев или все слои/группы слоев	Щелкните правой кнопкой мыши значок глаза	Щелкните значок глаза, удерживая клавишу Control
Показать/скрыть все другие видимые в данный момент слои	Удерживая нажатой клавишу Alt, щелкните значок глаза	Удерживая нажатой клавишу Option, щелкните значок глаза
Переключить прозрачность блокировки для целевого слоя или последней примененной блокировки	/ (косая черта)	/ (косая черта)
Редактировать эффект/стиль слоя, параметры	Эффект/стиль слоя двойного щелчка	Эффект/стиль слоя двойного щелчка
Скрыть эффект/стиль слоя	Alt-двойной щелчок эффект/стиль слоя	Option-двойной щелчок эффект/стиль слоя
Редактировать стиль слоя	Дважды щелкните слой	Дважды щелкните слой
Включить/выключить векторную маску	Миниатюра векторной маски, удерживая клавишу Shift	Миниатюра векторной маски, удерживая клавишу Shift
Открыть диалоговое окно «Параметры отображения маски слоя»	Дважды щелкните эскиз маски слоя	Дважды щелкните эскиз маски слоя
Включение/выключение маски слоя	Миниатюра маски слоя, удерживая клавишу Shift	Миниатюра маски слоя, удерживая нажатой клавишу Shift
Включение/выключение маски фильтра	Миниатюра маски фильтра, удерживая нажатой клавишу Shift	Миниатюра маски фильтра, удерживая нажатой клавишу Shift
Переключение между маской слоя и составным изображением	Миниатюра маски слоя, удерживая нажатой клавишу «Alt»	Миниатюра маски слоя, удерживая клавишу Option
Переключение между маской фильтра и составным изображением	Миниатюра маски фильтра, удерживаемая при нажатой клавише Alt	Миниатюра маски фильтра, удерживая клавишу Option
Включение/выключение режима рубилита для маски слоя	\ (обратная косая черта) или Shift + Alt-щелчок	\ (обратная косая черта) или Shift + Option-щелчок
Выбрать все типы; временно выберите инструмент Type	Миниатюра текстового слоя с двойным щелчком	Миниатюра текстового слоя с двойным щелчком
Создать обтравочную маску	Удерживая нажатой клавишу Alt, щелкните линию, разделяющую два слоя	Удерживая нажатой клавишу Option, щелкните линию, разделяющую два слоя
Переименовать слой	Дважды щелкните имя слоя	Дважды щелкните имя слоя
Изменить настройки фильтра	Дважды щелкните эффект фильтра	Дважды щелкните эффект фильтра
Изменить параметры наложения фильтра	Дважды щелкните значок смешивания фильтров	Дважды щелкните значок смешивания фильтров
Создать новую группу слоев ниже текущего слоя/набора слоев	Удерживая клавишу Control, нажмите кнопку «Новая группа»	Удерживая нажатой клавишу Command, нажмите кнопку «Новая группа»
Создать новую группу слоев с диалоговым окном	Удерживая нажатой клавишу Alt, нажмите кнопку «Новая группа»	Удерживая клавишу Option, нажмите кнопку «Новая группа»
Создать маску слоя, которая скрывает все/выделение	Удерживая нажатой клавишу «Alt», нажмите кнопку «Добавить маску слоя»	Удерживая нажатой клавишу «Option», нажмите кнопку «Добавить маску слоя»
Создать векторную маску, показывающую всю область пути	Удерживая клавишу Control, нажмите кнопку «Добавить маску слоя»	Удерживая нажатой клавишу «Command», нажмите кнопку «Добавить маску слоя»
Создать векторную маску, которая скрывает всю или отображает область контура	Control + Alt-щелчок по кнопке «Добавить маску слоя»	Удерживая нажатой клавишу Command + Option, нажмите кнопку «Добавить маску слоя»
Показать свойства группы слоев	Щелкните правой кнопкой мыши группу слоев и выберите «Свойства группы» или дважды щелкните группу	Удерживая нажатой клавишу Control, щелкните группу слоев и выберите «Свойства группы» или дважды щелкните группу 9. 0009
Выбор/отмена выбора нескольких смежных слоев	Щелчок с нажатой клавишей Shift	Shift-щелчок
Выбор/отмена выбора нескольких несмежных слоев	Удерживая нажатой клавишу Control,	Command-щелчок

Примечание:

Если для ввода японского языка используется Kotoeri, ярлык «Включить/выключить режим рубилита для маски слоя» запускает действие в Kotoeri. Пожалуйста, переключитесь в другой режим (например, «США»), чтобы активировать этот ярлык.

Кнопка Photoshop psd скачать бесплатно 653 редактируемых файла .

psd

Сортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные Запросить дизайн

кнопка кнопки пользовательский интерфейс facebook синий твиттер зеленый серый psd простой поделиться 3d темное яблоко чистый дизайн пользовательского интерфейса социальные кнопки ios ipad желтый красный облачные огни фиолетовый переключатель ползунок интерфейс черный магазин приложений хэштег

[ Psd ] Кнопки App Store ( 2,61 МБ )

[Psd] Кнопки ( 116.92KB )

Ян Ву Нам

[Psd] Кнопки с рисунком ( 322.73KB )

Мэтт Краучер

[Psd] 3D кнопки (2.10MB)

[Psd] Простые кнопки ( 266,93 КБ )

Мартин

[Psd] Программные кнопки и ползунки ( 2,54 МБ )

Джузеппе Северо

[Psd] Поделиться кнопками социальных сетей (79,12 КБ)

Бояна Чакич

[Psd] Плоские кнопки пользовательского интерфейса ( 324,82 КБ )

Алекс Вандерзон

твит пользовательский интерфейс кнопка твиттера социальные чистые кнопки кнопки шума кнопки пользовательского интерфейса андроид магазин Apple iphone окна телефон бар меню шаблоны приложение кнопки приложения прогресс элементы пользовательского интерфейса загрузить пользователя ретро купить тень сетка стили фотошопа удивительные кнопки css3 пример большой стеклянный белый фон стрелки btn четкая халява шум шаблон форма уникальная доступность ux, кнопка переключения цвета, раскрывающийся список, мягкий, футуристический

[Psd] Обновлена ​​кнопка «Твитнуть» ( 23,52 КБ )

Вин Томас

[Psd] Добавить в корзину кнопки ( 491. 68KB )

Бхарат Шарма

[Psd] Простые кнопки приложений ( 377,79 КБ )

Джесси Уоллес

[Psd] Кнопки, свет и тени ( 779.31KB )

Фернандо Маклен

[Psd] Скачать кнопку PSD ( 299.56KB )

Ян Эрик Вайдер

[Psd] Темный раскрывающийся список и кнопки ( 36,76 КБ )

Александр Нод

[Psd] Кнопки и ползунки ( 4.60MB )

Гэри Киллер

[Psd] Кнопка входа в Facebook ( 35,08 КБ )

Сергей Лойша

[Psd] Кнопки включения/выключения ( 761.75KB )

РавиндраЧандна

[Psd] Интерфейс простой кнопки (PSD) ( 2,02 МБ )

Алессио Атцени

[Psd] Желтые кнопки загрузки ( 117,54 КБ )

3bсоздатель

[Psd] Кнопка загрузки ( 101,85 КБ )

Роман Булах

[Psd] Удивительные кнопки (с CSS3) ( 1,75 МБ )

Крис Уоллес

[Psd] Уникальные зеленые и синие кнопки (2. 04MB)

Франтишек Кривда

[Psd] Пользовательский интерфейс кнопки загрузки (181,91 КБ)

Рене Рид

[Psd] Коренастые кнопки PSD ( 567,43 КБ )

Мацей Кончевски

кнопка фотошоп кнопка фотошоп набор веб-кнопок синие веб-кнопки светло-голубые веб-кнопки кнопки 3d кнопки стрелка фотошоп фоны домашняя кнопка текстовые эффекты кнопки аудиоплеера фотошоп 3d кнопки бесплатная кнопка psd бесплатно скачать фотошоп границы числовые кнопки фотошоп 7 стилей оранжевые кнопки psd

[ Psd ] Кнопки социальных сетей ( 1,88 МБ )

Барт Эббекинк

[ Psd ] Кнопки строки меню PSD и CSS ( 179,61 КБ )

iThief Graphix

[Psd] Простая кнопка «Купить» ( 923,62 КБ )

Джузеппе Северо

[Psd] Большая бесплатная фиолетовая кнопка ( 293.36KB )

Клэй Макилрат

[Psd] Кнопки переключения (4. 00MB)

[Psd] Металлические кнопки социальных сетей (1,10 МБ)

@Joel_Siddall

[ Psd ] Простые стильные кнопки ( 592,83 КБ )

Николас Крейг

[Psd] Кнопки «Поделиться» ( 498,37 КБ )

Саша Грайф

[Psd] Кнопка подключения FB (4,82 МБ)

Вирджил Пана

[Psd] Простые кнопки призыва к действию ( 40.94 КБ)

Джо Джойнер

[Psd] 4 стиля кнопок ( 318.12KB )

Джеймс Ноубл

[Psd] Темные кнопки доступности ( 68.76KB )

Бенджамин Натан

[Psd] Кнопки мобильного банка ( 708.67KB )

Эндрю Форрестер

[Psd] Грязная кнопка PSD (305,93 КБ)

Йонно Риквель

Загрузка дополнительных элементов, пожалуйста, подождите…

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