Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Всё о кнопках: вдохновение, бесплатные PSD-файлы, css-генераторы и фреймворки

9 марта 2012 | Опубликовано в Веб-дизайн | 4 Комментариев »

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

Ищем вдохновение в Интернете

House of Buttons

House of buttons—хороший сайт, где собрано много примеров качественных  кнопок для  интерфейса из разных ресурсов.

Ui parade

Cайт Ui  parade демонстрирует различные части пользовательского интерфейса и имеет специальную категорию для кнопок.

Dailybutton

Dailybutton—еще один блог, где собраны только красивые кнопки. Самое интересное в этом блоге, что большинство из кнопок доступны для скачивания.

Dribbble

Я думаю, что не нужно вам представлять Dribbble, этот сайт давно очень популярен в сообществе дизайнеров. В метках «кнопки» на Dribbble вы можете найти вдохновение и посмотреть на некоторые очень  хорошо продуманные кнопки.

Deviant Art Button Project

В  галерее Deviantart собраны много коллекций кнопок в одном месте. PSD-файлы  доступны для скачивания для некоторых из них.

PSD-файлы  кнопок для скачивания

Pixel Premium

Pixelpremium —это сайт Ормана Кларка, который предлагает бесплатные ресурсы для веб-дизайнеров, здесь Вы найдёте хорошую коллекцию вдохновляющих PSD- шаблонов кнопок.

365PSD

365PSD— ещё один  сайт, который предлагает бесплатные PSD-исходники. В архиве тега  «кнопки» есть огромная коллекция с различными кнопками .

Favbulous

Favbulous  демонстрирует одни из лучших кнопок, которые можно скачать в PSD-формате.

Duckfiles

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

Генераторы CSS-кнопок

Мы познакомились с замечательными ресурсами, на которых можно скачать кнопки в формате PSD, давайте теперь рассмотрим некоторые онлайн-сервисы, которые помогут нам при написании кода.

CSSButton.me

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

css3buttongenerator

css3buttongenerator предоставляет те же услуги, cssbutton.me. Здесь меньше возможностей, вы не можете, например, создать кнопку в активном состоянии и сохранить её.

CSS Tricks Button Maker от Криса Коера

CSS tricks button maker — еще один простой в использовании генератор кнопок (нельзя сохранять кнопки).

CSS3button.net

CSS3button.net— генератор CSS3-кнопок с большим количеством возможностей.

Фреймворки и уроки по созданию CSS-кнопок

CSS3 button UI от geekeries

Хороший чистый шаблон для создания простых кнопок.

Zocial CSS3

Zocial —фреймворк CSS, при помощи которого можно создавать  красивые и чистые кнопки для  социальных сетей, таких как Twitter, Facebook или G +

Bonbon

Bonbon—этот фреймворк поможет сделать ваши кнопочки  вкусными и сочными, как конфеты.

Радиоактивные кнопки

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

CSS3 анимированные кнопки

Хороший урок, который покажет, как создать  кнопки с анимированными  пузырьками.

Заключение

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

Ссылка на источник: onextrapixel.com

Возможно, вам пригодятся 40 PSD-файлов с элементами веб-интерфейса




Комментарии

  1. Евгений
    Thumb up Thumb down +4

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

  2. Freelance-Nsk.Ru
    Thumb up Thumb down +1

    Спасибо большое за данную информацию, сайт теперь в красках позитива)

  3. Zudva
    Thumb up Thumb down +1

    Спасибо! Ваш журнал лучший!