amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Дизайн сайта

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

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

Генератор иконок для сайта Сhimply

Инструмент Сhimply позволяет генерировать и редактировать разнообразные иконки и кнопки, которые можно использовать в интерфейсе сайта. Сервис отличается тем, что он бесплатный и простой. Его интерфейс настолько интуитивно понятный, что даже отсутствие русского языка не удаётся назвать его недостатком – язык вам не понадобится.

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

Итак, для начала перейдите на сайт, где находится генератор иконок  – Сhimply. Здесь обратите внимание на вкладки сверху – это группы элементов, которыми можно оперировать. Рассмотрим их:

  • Spinner Набор из вращающихся анимированных элементов.
  • Spinner Тоже самое, только более разнообразные вращающиеся элементы.
  • Animated bar. Разнообразные анимированные вертикальные и горизонтальные полосы – со стрелками, квадратиками, волнами и прочими декорациями.
  • Button. Здесь находятся кнопки разных цветов и форм. Этот генератор иконок для сайта генерирует кнопки только в статическом варианте. Так же вы можете познакомиться с продвинутым плагином кнопок для WordPress.
  • Badge. Тоже статические элементы, которые представляют собой надписи разных форм и видов.

Теперь выберите нужную вам вкладку, затем кликните на нужный элемент. Ниже вы увидите секцию «Parameters», в которой находятся основные настройки. Среди них есть опции цвета и размера. Чтобы просмотреть, как будет выглядеть иконка после тех или иных изменений, нужно нажать на кнопку «Genarate». Иконка появится в секции ниже – «Generated Images». Там же её можно будет скачать.

Среди настроек каждого элемента также есть ссылка «Show advanced options», которая открывает дополнительные опции – изменения шрифта, скорости анимации и прочее.

Адель Гадельшин

View Comments

  • Огромное спасибо за полученную информацию. Очень полезный сайт, следует задержаться на нем.

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

  • Очень поучительно и интересно. Осталось только внедрить и протестировать. Спасибо.

  • Спасибо за информацию! Обязательно попробую применить на практике.

  • Хорошо, доступно написано. Спасибо за статью.

  • Очень полезная и нужная информация, спасибо Вам большое!! Попробую применить на практике!

  • Спасибо! Очень полезная информация. Я думала, что все новые кнопки в фотошопе создаются. )

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

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

7 месяцев ago

Как сделать запуск инфопродукта

Инфопродукт - это любой продукт, который содержит информацию, полезную для потенциальных клиентов. Это может быть…

8 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

8 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

8 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

8 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

9 месяцев ago