Кнопки для фотошопа png: Иконки кнопки — 154,576 бесплатных иконок

08.07.2023 alexxlab

Содержание

Программы для создания кнопок для сайта

Очень часто при создании сайта необходимо создать кнопки для того или иного элемента.

Однако не все умеют или хотят создавать эти кнопки при помощи программы Photoshop.

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

#1. Crystal Button.

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

Сохранить готовую кнопку можно в форматах GIF, PNG, JPG, BMP, а также в прозрачном формате GIF и PNG. Хотя в бесплатной версии программы опция сохранения не доступна, вы можете сделать скриншот готовой кнопки в окне программы, а затем при помощи программы Photoshop вырезать ее и задать необходимый размер. Главный плюс данной программы то, что даже в бесплатной версии существует огромное количество готовых шаблонов. А инструментов для редактирования достаточно для того чтобы создать уникальную кнопку.

Вот некоторые шаблоны кнопок из данной программы.

#2. Agama Web Buttons

Данная программа для создания кнопок позволяет создавать кнопки со стеклянным, пластиковым, металлическим, 2D и 3D эффектом. Программа содержит более 700 шаблонов кнопок. Правда в бесплатной версии большая часть их недоступна. При помощи инструментов программы можно изменять размер, цвет кнопки, редактировать размер и цвет текста. Кроме этого доступна возможность создания кнопки которая при наведении курсора изменяет свой вид. Оба вида кнопок настраиваются.

Из дополнительных функций следует выделить то что при редактировании кнопки, возможно задать ссылку для этой кнопки, а также то что при сохранении кнопки кроме графического файла, с самой кнопкой, в формате GIF, PNG, JPEG или BMP, возможно создать еще и HTML станицу в которую вставляется эта кнопка.

Таким образом, если вы создали изменяющуюся при наведении курсора кнопку, вы сможете просмотреть, как она будет работать. А открыв данный файл при помощи HTML редактора, вы сможете скопировать код, при помощи которого она вставляется и работает. Это может пригодиться тем, кто не разбирается в HTML и CSS. В программе возможно создание как статических так и анимированных кнопок.

Вот некоторые шаблоны кнопок доступных в данной программе.

Файлы для скачивания

Название: Agama Web Buttons
Ссылка: Скачать с Depositfiles
Резервная ссылка: Скачать с Letitbit
Размер: 5,92 Мб
Фрмат: RAR
Совместимость: Windows XP, Vista, 7

#3. Free Web Buttons

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

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

Вот некоторые шаблоны кнопок из данной программы.

Файлы для скачивания

Название: Free Web Buttons.
Ссылка: Скачать с Depositfiles
Резервная ссылка: Скачать с Letitbit
Размер: 10,53 Мб
Фрмат: ZIP
Совместимость: Windows XP / Vista / 7

Рекомендуем ознакомиться:

Подробности: Опубликовано: 11 Январь 2011; Обновлено: 16 Октябрь 2013; Просмотров: 31603

30 «горячих» клавиш Adobe Photoshop для скорости и творческой активности

2015-11-13 0 ∞

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

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

«Горячие» клавиши для работы с «Кистью»
- «Горячие» клавиши для работы со слоями и выделением
- «Горячие» клавиши для контроля состояний
- «Горячие» клавиши просмотра
- Настройте свои клавиши

В Photoshop кисть — инструмент номер один. Комфортная работа с кистью является одним из лучших способов получить быстрый и точный результат в работе с Photoshop. Эти сочетания также работают на других инструментах, подобных кисти: «Ластик», «Восстанавливающая кисть» и инструмент «Штамп»:

Кнопка	Действие
B	Активный инструмент «Кисть»
D	Сброс цвета переднего плана по умолчанию и цвет фона (черный и белый)
X	Переключение между основным цветом и цветом фона
[	Уменьшить размер кисти
]	Увеличить размер кисти
	Переключение в режим «Быстрая маска»

Вот еще один быстрый способ для изменения размера кисти. Удерживайте Alt (Option), щелкните правой кнопкой мыши. С зажатой кнопкой мыши перемещение курсора вверх и вниз уменьшает или увеличивает жесткость кисти, а перемещение курсора мыши влево и вправо изменяет ее диаметр.

Сочетание клавиш	Действие
Ctrl-T	Свободное трансформирование текущего слоя
Ctrl-A	Выделить все (относится только к текущему слою)
Ctrl-D	Снять текущее выделение
Ctrl-H	Скрывает «шагающих муравьев», сохраняя выбранную область
Ctrl-F	Повторить действие последнего фильтра
Ctrl-Shift-U	Уменьшить насыщенность текущего слоя
Shift-F5	Заливка с учетом содержимого

Важно быть организованным при работе с более крупными проектами. Вот клавиши для управления рабочим процессом:

Сочетание клавиш	Действие
Ctrl-Z	Отменить (это действие вернет вас из текущего состояния в последнее действие в истории)
Alt-Ctrl-Z	Вернуться назад (в отличие от предыдущего действия, эти клавиши помогут вам вернуться на несколько действий назад)
Ctrl-Shift-E	Объединение в один всех видимых слоев
Alt-Ctrl-Shift-E	Объединить все слои через копирование
Ctrl-G	Создать новую группу слоев со всеми выбранными
Ctrl-J	Создание копии слоя или группы слоев
Ctrl-S	Сохранить
Ctrl-Shift-S	Сохранить как
Ctrl-Shift-Alt-S	Сохранить для Web

С трудом работаете с большим фото или документом? Вот несколько клавиш, чтобы сделать навигацию и отображение немного легче:

Сочетание клавиш	Действие
F	Переключение вариантов в полноэкранном режиме
Ctrl-+	Увеличить
Ctrl- (-)	Увеличить
Ctrl-1	Увеличить до 100%
Ctrl-0	Подогнать документ под текущий размер окна
Пробел	Удерживайте, чтобы временно активировать инструмент «Рука» (Н)
Ctrl-R	Включить или выключить «Линейки»

Если существуют действия, которые вы используете чаще всего, вы можете настроить для них свои сочетания клавиш. Для этого нужно в палитре «Операции» выбрать вкладку «Команды»:

Чтобы изменить действующие сочетания клавиш, нужно перейти в Редактирование> Клавиатурные сокращения.

Сергей Бензенкоавтор-переводчик статьи «30 Keyboard Shortcuts for Speed and Creativity in Adobe Photoshop»

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

В этом уроке Photoshop показано, как создать простой и чистый спрайт кнопки в стиле Web 2.0 с состоянием прокрутки. Вы также узнаете, как настроить спрайт, используя некоторые базовые приемы CSS (фоновый спрайт CSS и замену текстового изображения CSS). Кнопка в этом руководстве была создана по образцу веб-интерфейса Campaign Monitor . Следуя далее, вы узнаете, как создать очень похожую кнопку.

Окончательный результат

Нажмите на следующее изображение, чтобы увидеть работающую демонстрацию (наведите указатель мыши на кнопку, чтобы увидеть состояние прокрутки).

Загрузка исходных файлов

Если вы хотите загрузить исходные файлы, используемые в этом руководстве, продолжайте. Следующая ссылка для скачивания содержит PSD-файл Photoshop, готовый спрайт изображения CSS в формате PNG и демонстрацию HTML с исходным кодом HTML и CSS.

кампания-монитор-кнопка.zip (ZIP, 58 КБ)

Давайте приступим к обучению?

Настройка документа

1 Размер кнопки будет 250px в ширину и 50px в высоту. Чтобы разместить как состояние ожидания, так и состояние прокрутки, удвойте высоту ( 100px ). 2 Перетащите направляющую к отметке 50px , чтобы четко разграничить верхнюю и нижнюю половины документа.

Убедитесь, что линейки включены (Ctrl + R), проверив, что флажок «Просмотр» > «Линейки» установлен. Перетащите горизонтальную направляющую от линейки вниз до половины документа (маркер 50px).

Создание фигуры

3 Активируйте инструмент Rounded Rectangle Tool и установите радиус закругленных углов на 3px .

4 Перетащите фигуру на верхнюю половину документа. Цвет формы не имеет значения, как вы скоро увидите. Размеры этой формы должны быть 250px в ширину и 50px в высоту.

5 Создайте выделение вокруг прямоугольника со скругленными углами, нажав Ctrl+щелчок по слою с фигурой. 6 Не снимая выделения, создайте новый слой (Ctrl + Alt + Shift + N). Назовите это Простой .

При активном новом слое залейте выделение, выбрав «Правка» > «Заливка» (Shift + F5). 7 Удалите слой Shape прямоугольника со скругленными углами, он больше не нужен.

Добавление стилей слоя

8 Дважды щелкните (или щелкните правой кнопкой мыши > Параметры наложения…) слоя Idle, чтобы открыть диалоговое окно «Стили слоя». 9 Добавьте наложение градиента.

Дважды щелкните Gradient, чтобы открыть диалоговое окно Gradient Editor. Для левой точки Color Stop используйте темно-зеленый цвет 9.0005 #618926 , а для правой точки цвета используйте светло-зеленый цвет: #98ba40 . Переместите среднюю точку цвета на 35% .

10 Добавьте внутреннюю тень. Измените режим наложения на Нормальный . Измените цвет на светло-зеленый, #c6d894 .

Установите непрозрачность на 100% . Задайте Distance и Size значение 2px . См. рисунок ниже для используемых настроек.

11 Добавить обводку. Установите Размер на 1px и Позиция на Внутри . Установите темно-зеленый цвет, как в шаге 9 ( #618926) .

Используемые настройки показаны на рисунке ниже. Вот что у вас должно быть на данный момент.

Добавление радиального градиента

12 Создайте еще один слой поверх слоя Idle, назовите его Radial_Gradient .

Переключите цвет переднего плана на # b8cf69. Сделайте выделение вокруг прямоугольника со скругленными углами, удерживая клавишу Ctrl и щелкнув слой Idle. Затем вернитесь к слою Radial_Gradient. 13. Переключитесь на инструмент «Градиент» (G).

Установите стиль градиента на Радиальный градиент . Нажмите на градиент, чтобы открыть диалоговое окно Редактор градиентов. 14 В диалоговом окне «Редактор градиентов» выберите предустановку Foreground to Transparent .

Убедитесь, что левый маркер цвета установлен на светло-зеленый цвет, #b8cf69 . 15 Убедитесь, что у вас все еще есть выделение вокруг формы прямоугольника со скругленными углами, а активным слоем является Radial_Gradient. Убедитесь, что линейки включены.

При активном инструменте «Градиент» (G) перетащите курсор от верхней части выделения примерно на 30 пикселей ниже выделения. 16. Отрегулируйте непрозрачность слоя Radial_Gradient до 9.0005 80% или до уровня, который вам нравится.

Создание формы состояния ролловера

17 Дублируйте Idle и Radial_Gradient, сначала нажав Shift + щелкнув по каждому из них, а затем щелкнув правой кнопкой мыши, чтобы открыть контекстное меню.

Выберите Дублировать > Дублировать слои… 18 Переместите оба дублированных слоя вниз в нижнюю половину документа, щелкнув их в палитре слоев, а затем используя инструмент «Перемещение» (V). Переименуйте дубликаты слоев — используйте Rollover для копирования в режиме ожидания и Radial_Gradient_Rollover для слоя Radient_Gradient.

Настройка стилей слоя состояния ролловера

19 За исключением цветов, мы оставим все как есть. Дважды щелкните слой Rollover, чтобы открыть диалоговое окно Layer Styles. Для внутренней тени измените цвет на голубой, #839dbf .

Для наложения градиента измените левый цветовой маркер на темно-синий, #0f2557 , а правый цветовой маркер на светло-синий, #245293 . Наконец, измените цвет обводки на темно-синий, #0f2557 . 20. Мы добавим стиль слоя Color Overlay для Radial_Gradient_Rollover.

Дважды щелкните этот слой, чтобы открыть диалоговое окно «Стили слоя». Добавьте стиль Color Overlay и установите синий цвет #5c737c .

Добавление текста

21 Для этого мы будем использовать простое семейство шрифтов: Arial.

Не стесняйтесь использовать все, что вам нравится, но для следующих техник рекомендуется что-то жирное/толстое. 22 Используйте Horizontal Type Tool (T), установите семейство шрифтов на Arial , стиль шрифта Bold , размер шрифта 16px , сглаживание Smooth и белый цвет ( #ffffff ). Введите текст, который вы хотите видеть на кнопке.

Создание тени для текста

23 Дважды щелкните текстовый слой, который вы только что создали, чтобы открыть диалоговое окно «Стили слоя». Установите Режим наложения на Нормальный , цвет на темно-зеленый ( #618926 ), Непрозрачность на 100% , снимите галочку Use Global Light, Angle to -60% , и, наконец, Size and Dimension до 1px .

Центрирование текста

24 Ctrl + клик по слою Idle, чтобы сделать выделение.

Убедитесь, что текстовый слой является активным слоем. 25 Отцентрируйте слой по вертикали, выбрав «Слой» > «Выровнять слои по выделению» > «Вертикальные центры». 26 Отцентрируйте слой по горизонтали, выбрав «Слой» > «Выровнять слои по выделению» > «Горизонтальные центры».

Дублирование текстового слоя для состояния Rollover

27 Когда текстовый слой все еще активен, щелкните его правой кнопкой мыши и выберите «Дублировать слой…» (или Alt + клавиша со стрелкой вниз, если активен инструмент «Перемещение»). Переместите его вниз к нижней половине.

28 Ctrl + клик по слою Rollover, чтобы создать выделение вокруг нижней фигуры. Используйте Layer Align to Selection > Vertical Centers. Если вы каким-то образом переместили дублированный текстовый слой влево или вправо, вы также должны сделать «Слой»> «Выровнять слои по выделению»> «Горизонтальные центры», чтобы центрировать его.

Изменение стиля слоя

29 Дважды щелкните текстовый слой, который вы только что создали, чтобы открыть диалоговое окно «Стили слоя». Установите темно-синий цвет (#0f2557 ), остальное оставьте без изменений.

Готово (с частью Photoshop)!

Если вы следовали инструкции, вот как должен выглядеть ваш спрайт кнопки. Теперь давайте сделаем HTML и CSS, чтобы ваша кнопка заработала. 30 Сохраните свое творение для Интернета, назовите его кампания-монитор-кнопка.png .

31 Создайте документ HTML. Сохраните его в том же месте, что и файл кампания-монитор-кнопка.png .

HTML

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

Это будет работать без тега

Нажмите эту кнопку

CSS

CSS — это простая техника замены фонового изображения спрайта CSS. Я выбрал метод text-indent , потому что он был протестирован для работы со средствами чтения с экрана; Недостатком является то, что он плохо ухудшается в сценарии CSS on / Images off (что является редкой ситуацией и обычно делается по выбору пользователя). Присвоение элементу свойства CSS контур: нет удаляет серый контур в браузерах на основе Mozilla.

 .button { дисплей: блок; ширина: 250 пикселей; высота: 50 пикселей; отступ текста:-9999px; } .button a { display:block; ширина:100%; высота:100%; background:transparent url(campaign-monitor-button.png) no-repeat вверху слева; контур: нет; } .button a:hover { background-position:0-50px; }

Базовая кнопка с тремя состояниями в Photoshop

Базовая кнопка с тремя состояниями в Photoshop — Garden Gnome перейти к содержанию

Я использую PS CS5, но его, конечно, можно использовать и в других версиях Photoshop.
Я включил пиксельную сетку, чтобы упростить задачу. Для этого нажмите «Вид» > «Показать» > «Пиксельная сетка».
Я также использую линейки из меню «Вид».