Все посты
Обновлено 9999+ 7 Знания

Гигантская подборка сервисов для веб-дизайна. 🖼 Логотипы, фотобанки, иконки, шрифты и прочее

Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен — только актуальные ссылки.

При разработке или редизайне сайта понадобятся элементы оформления. Копирование изображений, иконок или всего дизайна с другой площадки чревато проблемами: например, с авторским правом или с жалобами регистратору сайта.

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

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

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

  • Logoza — русскоязычный сервис для создания лого с помощью большого выбора клипартов в цвете и графике. Регистрации не требует.
    Скачать можно бесплатно, полный набор в хорошем качестве с прозрачностью, фавиконом для сайта, PDF-документом, мокапом и файлом шрифта стоит 250 рублей.
Процесс создания логотипа
  • Turbologo — русскоязычный генератор логотипов, сам предлагает готовые варианты после настройки.
    Покупка большого файла обойдется в 790 рублей, маленький можно скачать просто так.
как недизайнеру сделать логотип
  • Renderforest — похожий конструктор. Предлагает немного вариантов, но довольно красивых, их можно доработать под себя.
    Небольшой файл для некоммерческого использования можно получить бесплатно. Если нужен большой файл с коммерческой лицензией, придется купить один из тарифов от 499 рублей.
разработка логотипа самостоятельно
  • Logo maker от Wix — конструктор от платформы для создания сайтов Wix, позволяет настроить рекомендации по тематике и предпочтениям, выбрать готовый лого и отредактировать его.
    Пакет файлов в высоком разрешении с правами на использование стоит 1500 рублей. Есть спецтарифы для тех, кто собирается делать сайт на Wix.
разработка фирменного стиля своими руками
  • Canva — простой редактор для логотипов, листовок, баннеров для соцсетей, сторис, обложек и изображений. Часть графических элементов открыта, все возможности доступны на тарифах от 500 рублей в месяц.
бесплатный сервис для создания логотипа
  • Logoshi — здесь с вариантами помогает система. Вы вводите название и слоган по желанию, выбираете цветовую гамму и смотрите готовые. Лучше справляется с латиницей.
    Итог обойдется в $5 или $20 в зависимости от нужных форматов.
    редактор логотипов онлайн

    • Logogarden — конструктор логотипов с помощью комбинирования готовых клипартов и текста.
      В маленьком размере картинку можно скачать бесплатно, а пакет с большими размерами и правами стоит $12.

    онлайн инструмент для дизайнеров
    • GraphicSprings — из разных тематических клипартов и элементов можно собирать простые цветные лого.
      За готовый файл в высоком разрешении со всеми правами на использование нужно отдать $19.99.

    онлайн конструктор лого
    • Logomaster — русскоязычный сервис для полуавтоматического конструирования логотипов.
      Скачивание требует единоразовый платеж.
      Базовый тариф — 1500 рублей, в него включен файл с разрешением 1024px на белом или прозрачном фоне. Более дорогие тарифы дают скачать файл в большом разрешении для печати, дорабатывать лого после оплаты и сохранять в векторе.
    сделать брендбук самостоятельно
    • Logomakr — сервис с возможностью составить логотип из клипартов и текста. Маленький файл для размещения на сайте можно скачать бесплатно, пакет больших с лицензией стоит $19.
    интерфейс конструктора
    • Onlinelogomaker — конструктор без готовых решений, позволяет делать логотип с нуля с помощью комбинирования и изменений клипартов и текста. С кириллицей работать не умеет.
      Готовый логотип для коммерческого использования можно скачать за 29$, маленький для некоммерческого — бесплатно.
    редактор лого онлайн
    • Tailorbrands — сервис для автоматизированного создания логотипов с простыми пользовательскими настройками цвета и типа готового изображения.
      Тарифы с подпиской на месяц начинаются от $9.99.
    создание фирстиля с помощью сервисов

    Графические онлайн-редакторы, конструкторы инфографики и мемов

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

    • Easel.ly — для работы с инфографикой;

    • Canva — для создания инфографики, флаеров, обложек и других картинок;

    • Online-fotoshop, Pixlr, Sumopaint — для работы с изображениями: позволяет кадрировать, вырезать фон, выполнять цветокоррекцию, объединять изображения и накладывать фильтры;

    • Online-image-editor — стандартный редактор, работает также с форматом gif;

    • PixBuilder Studio — редактор растровой графики, позволяющий создавать и web-графику;

    • Editor.pho, Fotor — фоторедактор с бьюти-инструментами для обработки кожи и добавления макияжа на фото;

    • Meme Generator, Iloveimg, Risovach, Mr-mem, 1001mem — генератор мемов онлайн.

    Еще полезное по теме:
    Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

    Подборка CSS- элементов для дизайна сайта

    Сервисы, где представлены интересные решения для оформления интерактивных элементов на сайте, можно скопировать в HTML, CSS, JavaScript.

    • Подборка CSS для вкладок — стили для оформления меню и других вкладок на сайте, у элементов есть код для копирования и внедрения на сайт.
        код CSS для меню
        • Подборка CSS для слайд-шоу — стили для оформления просмотра изображений в слайд-шоу, можно скопировать и вставить на сайт. Есть HTML, CSS и JavaScript.
        CSS, JavaScript, HTML для оформления слайд-шоу

        На сайте designyourway.net есть еще подборки с красивыми решениями оформления сайта.

        • CodyHouse Framework — библиотека интерфейсных компонентов HTML, CSS, JavaScript, позволяют настроить фон, кнопки, навигацию и другие функции. Все адаптированы под мобильные.
        готовые меню для сайта
        • Freebbble — бесплатные элементы дизайна из Dribbble: иконки, мокапы, паттерны, кнопки, шрифты. У многих указана лицензия для бесплатного коммерческого использования.
        паттерны для сайта бесплатно
        • Dribbble — тоже подборки бесплатных элементов для дизайна: иконок, меню, персонажей, мокапов и других.
        интерфейсные готовые решения
        • Free Section of Creative Market — площадка с бесплатными работами, которыми делятся дизайнеры. Пополнение набора каждый понедельник.
        идеи для создания сайта

        Сервисы с бесплатными иконками

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

        Фотостоки и фотобанки для скачивания бесплатных изображений

        На многих сайтах указана лицензия для коммерческого использования, но советуем перепроверять перед скачиванием.

        • Stock Up — картинки с разных сайтов в одном месте.
        коллекции фото на сайт
        • Pexels — русскоязычный сайт, разные тематики.

        подборки визуального контента
        • Mazwai — не только фото, но и видеоклипы, и футажи.

          бесплатные видеоклипы для сайта
          • Foodie's Feed — продукты, готовые блюда и процесс приготовления.

            стоки с фото еды
            • All The Free Stock — изображения, иллюстрации, иконки и видео.

              дизайнерские элементы для веба
              • Jéshoots — тематические категории.

                фотобанки с лицензией
                • Pixabay — фотографии, иллюстрации и векторная графика.

                  фоны для веб-дизайна
                  • Unsplash — работы фотографов, можно скачивать в большом размере.

                    фотоработы бесплатно
                    • Picjumbo — скачивание в большом размере.
                    сайты с фотографиями для дизайна
                    Как еще можно найти изображения для сайта, в том числе фотографии людей, к которым не применяется авторское право — решения в статье

                    Инструменты для подбора цвета

                    Помогут найти нужную палитру сочетающихся цветов для оформления сайта. 

                    • New Flat UI Color Picker — подбор цветов в стиле flat с кодами для копирования.
                      цветовая веб-палитра онлайн
                      • Flat UI Colors — сайт с похожей системой, позволяет подбирать палитры цветов по насыщенности и яркости.
                      цветовая палитра сочетаний
                      • Color Extraction Effect — инструмент для определения цветовой гаммы с картинки. Он сканирует изображение, определяет все ее цвета и из них выбирает небольшую палитру удачно сочетающихся друг с другом оттенков. Требует скачивания.
                      подобрать цвета по веб-странице
                      • Coolors — генератор цветовых схем для дизайнеров, можно подбирать сочетающиеся оттенки и копировать коды цвета.
                      цветовые схемы для дизайна
                      • Couleurs — простое приложение для определения цветов на экране. Требует скачивания, бесплатно.
                      определение цветов
                      • Material UI Colors — палитра для веба, Android и iOS в разных стилях.
                      коды цветов для веба
                      • Brand Colors — коллекция цветов, которыми пользуются знаменитые бренды.

                        цвета известных брендов

                        Сервисы для подбора шрифтов на сайт

                        На этих площадках можно найти интересные шрифты для веба. Большинство из них с лицензией на бесплатное коммерческое использование:

                        Если вам понравился шрифт на чужом сайте, с помощью этих инструментов можно попробовать узнать его название.

                        • WhatTheFont — определяет шрифт по тексту на скриншоте, работает только с латиницей;

                        • Typ.io, Type Sample — расширение для Google Chrome;

                        • Font Finder, Font Inspector — для Opera;

                        • WHATFONT — для Chrome, Firefox и Яндекс.Браузера.


                        Пишите в комментариях, подборки каких инструментов вам было бы интересно видеть в блоге!

                        Возьмите под контроль продвижение своего сайта
                        Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
                        🔍 Подпишись на @prcynews в телеграм — оставайся в курсе последних SEO новостей и свежих материалов.

                        Теги поста или какие разделы почитать еще:

                        Комментарии (7)
                        sixbeeru   17.03.2017 16:27
                        Админы, сделайте пожалуйста у себя на сайте закладки, чтоб не потерять интересную статью, к примеру эту...
                        Inna_S   17.03.2017 16:32
                        Спасибо за идею :)
                        enoren   18.03.2017 16:31
                        Поддерживаю, хорошая идея
                        Denys Melnyk   28.09.2021 14:58
                        от еще бесплатный сервис gogeticon.com
                        Alexander Bsp   28.09.2021 22:42
                        Битая ссылка на подборку CSS элементов.
                        Сергей Чипак   29.09.2021 10:04
                        Подтверждаю https://prnt.sc/1u1ywbb
                        Elena_Zhmurina   01.10.2021 12:44
                        Спасибо, действительно куда-то ее переместили на том сайте. Убрали и поставили две ссылки на подборку вкладок и слайд-шоу.
                        К данной записи нельзя добавлять комментарии, т.к. она очень старая.
                        🔥 Внутренняя оптимизация сайта — большой гайд по самостоятельной проверке
                        🍕 Юзабилити сайта — что это такое, примеры, самостоятельный анализ
                        🔥 Где брать картинки для сайта: много ссылок на нейросети и фотостоки