Онлайн нарисовать кнопку – Кнопки для сайта — где скачать и как бесплатно сделать красивую кнопочку онлайн — Вебджем.рф

Содержание

Как нарисовать красивую кнопку для сайта

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

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

Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.

Создайте новый документ в фотошопе. Кнопку мы нарисуем с помощью инструмента Прямоугольник со скругленными углами.

Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00. А радиус углов установил

4 пикселя.

Теперь рисуем саму кнопку. Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.

Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800

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

Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента.

Необходимо выполнить настройку — угол наклона 90 градусов.

А также сам градиент, цвета — #ff8c00 и #ffcc3f.

Кнопка преобразилась.

Осталось добавить надпись. Я использовал шрифт Myriad Pro и белый цвет. Размер и цвет шрифта — также нужно выбирать исходя из дизайна где будет находиться ваша кнопка.

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

Для этого сделайте копию слоя с надписью и ту которая ниже передвиньте на 1 пиксель вниз и поменяйте цвет — #be6d00. Точно также мы делали с прямоугольниками.

Итог. Надпись на кнопке стала более читаемой.

Однако если это не устраивает, можно надпись сделать просто черным цветом. Здесь уже на ваш выбор.

Кроме того, вы можете сделать любые цвета и градиенты на кнопке. Пример разных цветов:

Скачать PSD исходник кнопки (78 Кб)

Автор урока — Александр

Рисуем кнопки для веб-сайта в Фотошоп / Фотошоп-мастер

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

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) размером 1280 x 1024 пикселов.

Шаг 2

Залейте фон цветом #СCCBCC и кистью (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

Шаг 3

Инструментом Прямоугольник со скругленными углами ( Rounded Rectangle Tool) (U) нарисуйте фигуру с радиусом скругления 180 пикселов:

Новинки Premium-раздела

— часть сайта Фотошоп-мастер, где вас ждут 16 видеоуроков и 23 экспресс-курса от профессионалов.

Вы можете покупать их по-отдельности, а можете оформить подписку на весь раздел (от 5 руб/день).

Шаг 4

К фигуре примените стиль слоя Наложение градиента (Gradient Overlay). Используйте параметры, которые показаны на скриншоте:

Шаг 5

Инструментом Овальная область выделения (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его черным цветом. Расположите его на предыдущей фигуре:

Шаг 6

Скопируйте стили со слоя с прямоугольной фигуры (кликните правой кнопкой мыши в палитре Слои по стилям слоя и выберите пункт Скопировать стили слоя. Теперь перейдите на слой с черным кругом, кликните по нему в палитре Слои правой кнопкой мыши и выберите пункт Вклеить стили слоя).

Шаг 7

Также, к слою с кругом примените стиль Тень (Drop shadow):

Шаг 8

Инструментом Овальная область выделения (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его белым цветом.

Шаг 9

Выберите инструмент

Произвольная фигура (CustomShapeTool) и нарисуйте фигуру конверта в режиме слой-фигуры.

Шаг 10

На слой с конвертом вклейте те стили слоя, которые ранее копировали:

Шаг 11

При помощи инструмента Текст (Text Type Tool) (T) напишите текст на кнопке:

Финальное изображение:

Автор: webdesign

7 крутых советов как нарисовать кликабельную кнопку

Куда не глянь, всюду кнопки – почта, сайты, мобильные приложения. Неважно что ты пытаешься продать или рекламируешь, а, как говорится: «главное, чтобы костюмчик сидел!». Создание кнопок в фотошопе осуществляется по определенным канонам.

С кнопками происходят целые эпопеи и баталии еще на стадии разработки. Веб-дизайнеры ведут активное противостояние заказчикам и у них есть на то важные причины.
Ряд исследований, путем проб и ошибок, заставил нас составить список 7-ми крутых правил, которым стоит следовать!

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

Как нарисовать кнопку в фотошопе, чтобы она привела к нажатию?

Контрастирующие цветовые палитры

Эффект Фон Рестора – явление зрения и восприятия мозга человека. Простыми словами – сканирую все что вижу, останавливаю взгляд на том, что контрастирует с окружением.

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

Советуем тебе как для новичка, окунуться в азы «цветовых контрастов» (сочетание цветов и степень их выразительности). Например, это – красный-зеленый, синий-оранжевый, черный-белый и т.д.

Кстати, Иоганнес Иттен посвятил всю свою научную жизнь изучению цвета. Результатом тому — ряд идеальных формул, которые стоит применять в любой области дизайна. Советуем тебе прочесть его книгу «Искусство цвета». И создать кнопку в фотошопе не составит особого труда.

Да сделай ты уже эту кнопку больше!

Юзеру должно быть удобно и просто осуществлять нажатие. Одинаково удобно курсором мыши или пальцами. Это очень хорошо, что бывают утонченные и тоненькие пальчики, но не забываем и о тех, кто, простите, эстетикой пальцев не вышел. Потому кнопка для сайта в фотошопе рисуется большой!

Изучением этого вопроса активно занимается компания Apple. Потому, советует выпускать кнопки минимум размеров в 44×44 пикселей, поскольку это близко к среднему размеру указательного пальца человека.

Если в твоем приложении, скажем, будет определено, что касание будет осуществляться большим пальцем, то делаем размер минимум 45×72 пикселей или не боимся и рисуем значительно больше.

Текст на кнопке просто обязан отвечать на вопрос

Существует общепринятый алгоритм, называемые «WYLTIWLT». Расшифровывается он так: «Would You Like То? I Would Like То» (досл. пер. — «Хотели бы вы? Я хотел бы»).

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

«Хотели бы вы {ТЕКСТ КНОПКИ}»

Или:

«Я хотел бы {ТЕКСТ КНОПКИ}».

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

Например:

«Какой классный сайт, хочу ПОДПИСАТЬСЯ»;

«Ух ты какой красивый продукт, хочу КУПИТЬ его»;

«Мне срочно нужно ЗАРЕГИСТРИРОВАТЬСЯ»;

«А где здесь можно перейти к разделу ОФОРМИТЬ ЗАКАЗ» и т.д.

Мы на «Ты» или на «Вы»?

Как известно по итогам тестирований разработчиков мировых корпораций, на кнопки, в которых было использовано местоимение от первого лица («Перейти к моим покупкам»), жмут куда чаще.

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

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

Призыв к действию, вместо безликого глагола

По сути, кнопка – это своеобразная метафора призыва к действию. Желательно, чтобы первым здесь шел глагол, который явно объясняет, что будет после нажатия.

Без глагола:

«Дополнительная информация»
«Загрузка»
«Подписка на рассылку»

С глаголом:

«Узнать больше»
«Загрузить»
«Подписаться на рассылку»

Опять же таки – кнопка тут отвечает на вопросы клиента: «Где здесь я могу ЗАГРУЗИТЬ книгу?», «Хочу УЗНАТЬ БОЛЬШЕ об этом продукте» или «Как же мне ПОДПИСАТЬСЯ НА РАССЫЛКУ онлайн-газеты?».

Не агитировать что-либо, словно это последний день жизни

Часто ты видишь громкие текста на кнопках с призывом сделать что-то или купить немедленно. Так вот так делать не нужно! Такие фразочки негативно влияют на психологические реакции мозга. Простыми словами – вызывают тревогу или раздражение.

Ответной реакцией человека, будет как можно быстрее избавиться от этого чувства, а значит – быстро уйти с сайта \ мобильного приложения. Потому слова-призывы не всегда бывают полезны. Конечно, они дают результат, но не такой высокий как хотелось бы.

Потому, не пиши текста кнопок, принуждающие к действию прямо сейчас, упрости до адекватного действия. Например, вместо «Начать шопинг», поставь «Открыть каталог».

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

Больше кода – меньше графики

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

Потому уделяй внимание созданию кнопок-картинок, сделанных под ссылки. Можно создавать отличные кнопки с помощью НTML и СSS, ведь они отображаются везде и всегда.

Paint онлайн – виртуальная рисовалка, рисовать бесплатно.

Paint онлайн: как рисовать с помощью этого сайта?

На данном сайте вы можете рисовать онлайн точно так же, как в легендарной программе Paint. Здесь представлена lite версия рисовалки, которая сохранила лишь самые основные художественные инструменты. Но принцип все тот же: хватайте кисть и рисуйте мышкой по экрану. Замечательное времяпрепровождение для взрослых и детей!

Основные инструменты Paint доступны в верхней панели. Первой идет кисть. Ее размер регулируется горизонтальным ползунком, расположенным в середине панели инструментов. Цвет выбирается с помощью специальной палитры, вызываемой нажатием на квадратик слева от кисти.

Рядом с кистью располагается «ластик», размер которого регулируется тем же самым ползунком.

Следующим по счету идет инструмент «заливка», который заливает очерченную область определенным цветом, который также выбирается в основной палитре.

Отменить или вернуть действия с холстом можно с помощью черных стрелочек «вправо» и «влево» расположенных в правой части панели. Если вы хотите очистить холст и начать рисовать заново, просто нажмите на крестик. Готовый рисунок можно скачать на компьютер, с помощью самой правой кнопочки, на которой изображен диск и синяя стрелка. Изображение загружается в формате png с размером 698×360 пикселей.

Виртуальный Paint для всей семьи!

Пользоваться онлайн Paint-ом могут как взрослые, так и дети. Он настолько прост, что разобраться с ним может даже самый неопытный пользователь. Если вы хотите нарисовать онлайн дом, машину или человечка, то этот сайт для вас просто незаменим. Пользоваться им можно в любое время суток бесплатно и без регистрации. Интуитивно понятный интерфейс и отсутствие лишних кнопок, позволят вам с головой погрузиться в творческий процесс и получить истинной наслаждение от рисования на виртуальном холсте.

Как сделать кнопку в графическом редакторе Фотошоп онлайн

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

Давайте подведем итоги, использовав полученные знания практически. Весь объем возможностей этого графического редактора мы конечно, за раз отработать не сможем, но кое-что все-таки сделаем. Я предлагаю Вам с нуля сделать кнопку, похожую на кнопку Фотошоп онлайн — эта кнопка на сайте pro444.ru открывает редактор Фотошоп онлайн.

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

Теперь нужно добавить рисунок для кнопки. Он для кнопки фотошопа должен быть достаточно красочным и абстрактным. Найдите соответствующую картинку в поиске Гугла, вбив поисковый запрос: узоры, абстрактные картинки, фотошоп, и еще какой-то вроде этих запросов. Выбираете пункт Картинки, и находите то, что Вам нужно. Для поиска можно использовать фильтр Инструменты поиска, с помощью которого Вы можете искать картинки подходящих размеров, цвета, типа.

Когда найдете то, что нужно, нажимаете на картинку правой клавишей мыши, и выбираете Копировать картинку.

Перейдите на графический редактор Фотошоп онлайн, и выберите пункт меню Редактировать — Вставить. Можно также нажать Ctrl + V. На палитре слои Вы увидите новый слой, который и будет содержать эту картинку.

Теперь выберите пункт меню Редактировать — Free Transform, и откорректируйте размер и расположение картинки так, как нужно, двигая его за граничные маркеры.

Окончательно расположите картинку, используя инструмент Перемещение.

Теперь давайте воспользуемся маской слоя. Нажмите на иконку Добавить маску слоя на палитре Слои. На палитре слои добавится иконка маски, правее иконки слоя.

Маска скроет слой с изображением. Чтобы изображение проявить, нужно на нем что-то нарисовать.

Сделайте активным инструмент Рисование, и выберите фигуру Закругленный прямоугольник на панели свойств этого инструмента. Опции поставьте следующие: непрозрачность 100%, режим Normal, размеры границы 0, радиус 5. Также должна стоять галочка в чекбоксе Заполнить форму.

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

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

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

Последнее, что осталось — добавить текст на кнопку. Инструментом Текст напишите его, шрифт выберите с засечками, к примеру Times New Roman, потому что простой шрифт для кнопки фотошопа мало подходит, это не тот случай, когда нужен минимализм. Подберите размер, стиль сделайте жирный. Цвет — по вкусу и чтобы подходил по дизайну к кнопке и к тому сайту, где Вы ее будете ставить.

Расположите текст на кнопке. используя инструмент Перемещение. Добавьте стили для текста, с помощью меню Слой — Стили слоев, например, выберите Drop Shadow такого же цвета, как и текст, и Outer glow белого цвета.

Вот и все, кнопка готова, остается ее только откадрировать инструментом Обрезка, сохранить в JPEG, и использовать.

Видео о том, как сделать кнопку в графическом редакторе Фотошоп онлайн

Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:

Конструктор печатей и штампов онлайн, создать печать (png,svg,pdf)

Как нарисовать круглую печать в конструкторе

Создаем треугольный штамп
Переходим к конструктору.
Кликаем по кнопке «Новая печать».
Выбираем форму печати «Треугольный штамп» и задаем размер штампа, например, 43мм. Кликаем по «Создать».
Редактируем внешнюю треугольную рамку, изменив по необходимости толщину и размер.
Добавляем элемент «Треугольник», если нам не обходимы еще рамки.
Добавляем элемент «Текст по треугольнику». Вводим и редактируем наш текст.
Добавляем элемент «Текст». Вводим и редактируем текст, который отразиться по центру штампа.
Добавляем элемент «Картинки». Выбираем изображение из списка или загружаем свое. Меняем размер и позицию.
Ваш штамп готов, теперь его можно скачать, или заказать изготовление.
Подробная статья : Как создать треугольный штамп
Видео урок : Как создать треугольный штамп видео

Создаем прямоугольный штамп
Переходим к конструктору.
Кликаем по кнопке «Новая печать».
Выбираем форму печати «Прямоугольный штамп» и задаем размер штампа, например, 47мм на 18мм. Кликаем по «Создать».
Редактируем внешнюю прямоугольную рамку, изменив по необходимости толщину и размер.
Добавляем элемент «Прямоугольник», если нам не обходимы еще рамки.
Добавляем элемент «Текст по прямоугольнику». Вводим и редактируем наш текст.
Добавляем элемент «Текст». Вводим и редактируем текст, который отразиться по центру штампа.
Добавляем элемент «Картинки». Выбираем изображение из списка или загружаем свое. Меняем размер и позицию.
Наш штамп готов, теперь его можно скачать, или заказать изготовление.
Подробная статья : Как создать прямоугольный штамп
Видео урок : Как создать прямоугольный штамп видео

Кнопка PLAY для сайта — Pixelbox.ru

Если вы хотите нарисовать свою собственную кнопку PLAY, то этот урок для вас. Я расскажу как нарисовать такую кнопку в фотошопе. Её можно использовать на сайтах, на презентациях, просто в рекламе. Запускать видео и музыку. Предназначение кнопки вы определяете сами.

Наша кнока будет выглядеть в виде подсвеченного шара, к которому идет провод.

Шаг 1. Рисование подсвеченного шара

Создайте новый документ в фотошопе.

Подготовим фон. Залейте фон черным цветом. Возьмите большу мягкую кисть и нарисуйте большое темно-синее пятно по центру фона.

Начнем рисовать шар. Создайте новый слой и нарисуйте на нем желтый круг. Цвет я использовал — FFB911.

Чтобы шар был объемным необходимо добавить свет и тень на него.

Создайте выделение этого круга, нажав на слой с кругом с зажатой клавишей CTRL на клавиатуре.

Возьмите цвет светлее желтого основного и большую мягку кисть. Нарисуйте ею на краю шара светлое пятно. Получиться блик.

Тоже самое повторите с тенью. Создайте новый слой и нарисуйте на краю шара(снизу справа) темное пятно.

Теперь необходимо нарисовать тень под самим шаром. Для этого создайте новый слой который будет ниже всех остальных (кроме фона с синем пятном). Нарисуйте на нем черной кистью большое пятно. Нажмите CTRL+T чтобы трансформировать его и сожмите его по вертикале.

На данный момент процесса наша картинка выглядит так:

Шаг 2. Треугольник PLAY (символ)

Создайте новый слой. Позьмите инструмент Многоугольник (Polygonal Tool) на панели инструментов.

Теперь настройки этого инструмента. Темно коричные цвет и 3 стороны угольника.

Рисуйте треугольник по центру шара.

А теперь примените к треугольнику следующие стили:

Внутренняя тень (Inner Shadow)

Перекрытие градиентом (Gradient Overlay)

После эффектов будет выглядеть так:

Треугольник будет светиться. Для этого создайте новый слой под слоем с треугольником. На нем используя белую мягкую кисть нарисуйте под треугольником пятно.

Продублируйте слой со свечением (CTRL+J). Транформируйте его так чтобы он сжался в полоску, разверните его и поместите относительно одной из сторон треугольника.

Повторите это еще два раза, относительно остальных двух сторон треугольника.

После этого шага картинка выглядит так:

Шаг 3. Провод к шарику

С помощью инструмента Перо (Pen Tool) нарисуйте шнур. Обводку выберите желтого цвета, а размер в 5 пикселей. Опция Имитировать нажатие (Simulate Pressure) должна быть включена.

В месте пристыковки шнура к шарику нарисуйте прямоугольник. Транформируйте его в перспективе (Perspective).

К шнуру надо добавить реалистичности. Для этого примените следующие стили к нему:

Внутренее свечение (Inner Glow)

Фаска и Тиснение (Bevel and Emboss)

Перекрытие градиентом (Gradient Overlay)

Перекрытие узором (Pattern overlay)

После этого будет так:

Шаг 4. Свечение

Как я и обещал наша кнопка будет светиться. Поэтому мы сейчас и добавим это самое свечение.

Создайте выделение шара, нажав на слой с шаром с зажатым CTRL. Создайте новый слой и на нем на краю шара нарисуйте белой мягкой кистью как показано на рисунке.

Отменяем выделение (CTRL+D). Пододвигаем слой с белым пятном немного вправо и вниз. Это можно сделать тянув слой по диагонали с зажатым SHIFT. Тогда получиться ровно.