9 интересных сервисов для веб-дизайнера. Специальная подборка

    В современном веб-дизайне существует достаточно много инструментов для web-дизайна. Это и классика — графические редакторы Photoshop и Sketch, и программы, совмещающие одновременно дизайн и верстку, такие как Macaw и Adobe Muse. И, как мы считаем, будущее web-дизайна — платформы для визуального дизайна сайтов в браузере, одним из примеров которых является Pixli.

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

    Ниже, мы отобрали перечень из 9 весьма интересных и полезных ресурсов, к которым веб-дизайнеры обращаются и используют довольно часто:

    Wordmark




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

    FontPair




    Позволяет подобрать наиболее подходящую пару шрифтов Google. В виде меню представлены пары различных семейств:

    • Sans-Serif/Serif
    • Serif/Sans-Serif
    • Sans-Serif/Sans-Serif
    • Cursive/Sans-Serif
    • Cursive/Serif
    • Serif/Serif

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

    Palleton




    Дизайнерский инструмент для создания цветовых комбинаций. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.

    TinyPNG, TinyJPG




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

    Boxy-SVG




    Редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape. Сделан для современной web-платформы. Позволяет создавать изображения, баннеры, макеты, диаграммы, кнопки и пр. Его можно скачать на локальный компьютер, а можно использовать как онлайн сервис и рисовать в браузере. Позволяет импортировать изображения и шрифты Google.
    Функции:

    1. Преобразования: перемещение, изменение размеров, повороты и скашивание с помощью инструментов и вручную.
    2. Группирование объектов.
    3. Заливка: линейные градиенты, радиальные градиенты и образцы. Можно редактировать их непосредственно на холсте.
    4. Символы: создание, редактирование и управление с возможностью повторного использования.
    5. Кривые: ручное рисование или инструменты для рисования Bezier.
    6. Формы: прямоугольники, треугольники, замещающие знаки, круги, звезды, n-полувагоны и кольца. У каждой формы есть доступные для редактирования свойства, такие как закругленные углы или количество рук.
    7. Логические операции: объединяют, вычитают, пересекают и исключают объекты.
    8. SVG и HTML 5: открывают и сохраняют SVG (Z) файлы. SVG — собственный формат Boxy SVG.
    9. Экспорт и импорт PNG, JPEG и GIF.
    10. Шрифты Google: импорт любого шрифта от библиотеки Google Fonts.
    11. Сочетания клавиш: более чем 100 команд с настраиваемыми сочетаниями клавиш.

    Pictaculous




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

    GetCover




    Позволяет сгенерировать превью дизайн-макета в оболочке браузера для того, чтобы презентовать заказчику. Генерирует превью не только в браузерах (Safari Mac, Safari Win, Chrome, IE, Firefox), но и в популярных iДевайсах. Это дает возможность сразу показать заказчику, как его сайт будет выглядеть на телефоне. Одновременно можно создавать несколько превью макетов — это существенно экономит время и генерации портфолио или превью для презентации крупного проекта.

    Stylifyme




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

    HEXNAW




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

    Выводы


    Для современного дизайна выбор инструментов огромен. Выбрать наиболее подходящий сложно, поэтому обмен опытом в этой области бесценен. В нашей подборке представлены только те инструменты, которыми мы активно пользуемся. Будем рады, если вы предложите свои сервисы.
    Метки:
    Pixli 18,77
    Платформа для визуального web-дизайна.
    Поделиться публикацией
    Комментарии 8
    • 0
      Вот еще сервис для подбора цветовой гаммы от adobe
      • 0
        Для подбора палеток ещё неплох Coolors.co
        Также иногда полезна библиотека цветов разных брендов BrandColors.net

        А если кто от руки рисует чистые прототипы, то может быть полезным генератор сетки для печати
        • 0
          Я недавно наткнулся на такой Dimensions

          Измеряет расстояние в пикселях между элементами на сайтах.
          • 0
            Полезный сайт для меня, много готовых градиентов, пользуюсь регулярно uiGradients
            • –2
              Ничего интересного. Все это можно сделать в люсте + какой-нибудь манагер шрифтов, чем ползать по куче сайтов.
              • 0
                Предлагаю свой:
                http://pictofon.com — альтернатива getcover (превью макетов). Есть мониторы, маки, планшеты, андроиды, айфоны, биллборды и рамки картин. Периодически добавляю новые макеты.
                • 0
                  Насчет решений для развертки макетов мне очень нравится Zeplin. Недавно начал пользоваться, есть плагин для фотошопа — классная штука
                  • 0
                    Довольно интересные инструменты! От себя хотел бы добавить, что использование композиции цветов—это хороший тон, но нельзя так просто полагаться на палитры от онлайн сервисом. Бывает очень много решений где играет роль нестандартный цветовой подход)

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

                    Самое читаемое