Подключение веб-шрифтов с помощью @font-face.

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

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

Bird Font – это онлайн-инструмент для создания и редактирования векторной графики. Сервис предлагает настройки импорта и экспорта для True Type Font (TTF), Embedded OpenType Font (СРВ) и Scalable Vector Graphics (SVG). На сайте можно изучить множество возможностей и инструментов для создания различных векторных изображений. Наиболее популярные среди них ориентирование кривых, контекстуальная связывающая подмена, кернинг, вращение объекта, изменение фона и многое другое.

Сайт предназначен именно для создания шрифтов и предлагает эффективную платформу для их дизайна. Ресурс станет полезным для энтузиастов, любящих экспериментировать со шрифтами и создавать новые типы. На FontStruct, можно создавать шрифты, используя различные геометрические фигуры, например, как плитка или кирпичная сетка. Кроме того тут вы можете найти уже готовые новые типы шрифтов. Шрифты, созданные на FontStruct, называются FontStructions и могут быть установлены или загружены в True Type Font (.ttp) файл. Так же они могут быть использованы в приложениях Photoshop, Mac / Windows или на веб-сайтах и в блогах. Это сайт, на который действительно стоит обратить внимание.

Glyphr Studio – это программа для дизайна и редактирования шрифтов, а так же инструмент, предлагающий множество интересных особенностей. На Glyphr Studio вы можете создавать собственные лигатуры символов и глифы, используя различные инструменты редактирования векторов, такие как ручка и пойнтер. Одно из его характерных преимуществ сервиса - импорт SVG кода из Inkscape и Illustrator.Инструмент предлагает двойной режим экрана для удобного проектирования и редактирования. Помимо всего прочего, Glyphr Studio поддерживает такие файлы шрифтов, как True Type Font (TTF), Embedded OpenType Font (СРВ) и Scalable Vector Graphics (SVG) файлы шрифтов.

Сайт является инструментом на основе браузера для проектирования и редактирования растровых шрифтов. Сервис позволяет скачать или загрузить шрифты в их галерею в файле True Type Font.

MyScriptFont - большой онлайн-инструмент для создания векторных шрифтов на основе собственного почерка. Все, что вам нужно сделать, это скачать шаблон в формате PDF или PNG, а затем распечатать его. Далее написать в нем текст от руки, отсканировать и загрузить на сайт (программа поддерживает форматы JPG, PNG, PDF и другие). Вы также можете использовать Paint для написания текста. В отличие от других аналогичных инструментов, MyScriptFont позволяет просмотреть и бесплатно скачать ваш рукописный шрифт в форматах Open Type и True Type. Рукописные шрифты могут быть использованы в графических программах, поздравительных открытках, логотипах, личных письмах и многом другом.

FontForge - онлайн-платформа для создания бесплатных шрифтов. Она имеет простой в использовании пользовательский интерфейс и встроенную программу для сравнения различных шрифтов. С FontForge, можно создавать и редактировать шрифты в различных форматах, включая PostScript, SVG, True Type, Open Type и другие. Так же, к вашим услугам полный текст учебника, помогающего в профессиональной подготовке по созданию шрифтов.

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

PaintFont.com еще один отличный инструмент для преобразования рукописного текста в векторные шрифты. Сайт имеет обширный набор готовых символов, классифицированных по категориям, таким как лигатуры, математика и знаков препинания. Инструмент предлагает глифы и символы из различных языков: японский, немецкий, турецкий, иврит, испанский и другие.

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

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

Еще несколько ресурсов, которые могут вам пригодиться:

FontPunk.com – бесплатный онлайн-инструмент для добавления стилей и визуальных эффектов, чтобы создать визуально привлекательный шрифт для рекламы, листовок или веб-сайта.

FontConverter.org – бесплатный онлайн конвертер шрифтовых файлов.

Font Squirrel – бесплатный онлайн ресурс с коллекцией веб-шрифтов, которые лицензированы для коммерческого использования.

Заключение

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

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


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

Компьютерный шрифт. Для формирования изображений букв текста на дисплее, принтере и других устройствах используются компьютерные шрифты. Компьютерный шрифт - это программа (написанная на специальном языке разметки шрифта), которая может быть использована во всех приложениях Windows / Mac OS.

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

Типы шрифтов.
По способу представления (отрисовки) букв (символов) шрифты делятся на три типа:
растровые - каждая буква представляет собой изображение из точек (пикселей), готовых для печати на принтере или отображения на экране;

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

контурные – математическое описание формы контуров символов. Контурные компьютерные шрифты являются наиболее современными и универсальными, поэтому имеют самое широкое распространение.

В зависимости от ширины символов, шрифты бывают:
моноширинные – все символы одинаковой ширины. Устаревший шрифт.

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

Учитывая все многообразие различных шрифтов, их довольно сложно (если вообще возможно) строго или точно классифицировать. Так, гарнитуры можно разделить по форме символов: с засечками и без засечек. Засечки – это элементы окончания букв: прямоугольные, изогнутые, круглые и т.п. Есть мнение, что шрифты с засечками облегчают чтение (буквы хорошо разделены и не сливаются), однако здесь, скорее всего все дело в привычности к таким шрифтам, ведь они применяются в печатных изданиях (газеты, книги, журналы). В операционных же системах большей популярностью пользуются шрифты без засечек, потому как на мониторах с низким разрешением засечки могут некорректно (плохо) отображаться.

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

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

декоративные – произвольный рисунок символов. Рассматриваются скорее как элемент дизайна;

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

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

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

Размер шрифта зависит от настроек операционной системы пользователя и разрешения экрана.

Не все операционные системы содержат одинаковые системные шрифты.

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

1. Стандартные шрифты , содержащиеся в установочных пакетах операционных систем, офисных и Интернет приложениях.

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

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

Точкой отсчета для определения «безопасности» шрифта служит, конечно же, операционная система Windows, так как является наиболее распространенной. Основываясь на шрифтах Windows (которые присутствуют и в других операционных системах) можно представить следующий список «безопасных» web-шрифтов:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Все эти шрифты можно смело использовать при создании web-сайта: вероятность их поддержки любой из операционных систем близка к 100%.

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

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

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

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

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

  • шрифты с засечками
  • рубленые шрифты (шрифты без засечек)

Шрифты с засечками — (англ. serif - засечка) шрифты начертание которых начинается и заканчивается штрихами. Например Times New Roman.

Шрифты без засечек (рубленые шрифты) — (англ.sans-serif -без засечки) шрифты со строгими ровными линиями без засечек. Например Arial.

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

Шрифты для web дизайна:

  • Arial
  • Arial Black
  • Arial Narrow
  • Book Antiqua
  • Century Gothic
  • Comic Sans MS
  • Courier New
  • Franklin Gothic Medium
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Microsoft Sans Serif
  • Palatino Linotype
  • Sylfaen
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings (различные символы и знаки)
  • Wingdings (различные символы и знаки)

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


Из стандартных шрифтов в Windows не имеют курсива:

  • Arial Black
  • Comic Sans MS
  • Franklin Gothic Medium
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Microsoft Sans Serif
  • Sylfaen
  • Tahoma

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

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

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

1. Начните с брифа

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

Разработка брифа безусловно потребует исследований и раздумий. Как будет использоваться ваш шрифт: он понадобится для специфического проекта или для личного пользования? Есть ли проблема, которую ваш шрифт решил бы? Впишется ли ваш шрифт в массив похожих дизайнов? Что делает его уникальным?

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

2. Фундаментальный выбор

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

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

3. Подводные камни на ранних этапах

Есть несколько подводных камней:

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

4. Используйте свои руки

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

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

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

5. С каких символов начать

Создание сначала определенных символов может помочь вам задать стиль своего шрифта. Ну а потом эти символы будут использоваться как направляющие. Обычно “контрольные символы”, как их называют, в латинице – это n и o, а заглавные – H и O. Зачастую используется слово adhension, которое поможет протестировать базовые пропорции шрифта (но, некоторые пишут это слово как adhencion, потому что буква s может быть очень коварной).

6. Переносим шрифт на компьютер

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

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

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

7. Выбор программы

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

Отличная программа – FontLab Studio, но новый софт, такой как Glyphs и Robofont набирают все большую популярность. Эти программы недешевые, но у Glyghs есть “мини” версия в Mac App Store с некоторыми отсутствующими функциями, что не очень хорошо, потому что эти функции важны новичкам.

8. Использование программ

Не забывайте расположить крайние точки буквенных форм (верхняя, нижняя, правая, левая), чтобы лучше контролировать процесс.

9. Слова

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

Одна из самых популярных программ для дизайна шрифтов. Доступна на Windows и Мас.

Программа доступна на Windows, имеет интуитивный интерфейс и отлично подходит новичкам.

Еще один мощный редактор шрифта от FontLab, позволяющий создавать новые шрифты или изменять существующие. Доступен на Windows и Мас.

Эта программа работает на Windows, Mac, Unix/Linux и переведена на множество языков. Также позволяет создавать новые шрифты и редактировать имеющиеся.

OpenType редактор шрифтов, доступен на Windows и Mac OS X. Довольно простой и содержит достаточное количество функций.

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

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

Еще один онлайн-инструмент (также почти 10 долларов за скачивание), который позволяет создавать шрифт из текста, написанного от руки.

Бесплатный и довольно сильный редактор шрифтов. Отлично подходит начинающим и тем, кто не хочет тратить деньги на покупку программ.

Это приложение доступно на iPad и Windows 8. Позволяет создавать шрифт из наброска и редактировать существующие шрифты.

Бесплатный ограниченное количество времени инструмент. С его помощью вы можете создавать шрифты и скачивать их.

Бесплатный онлайн-инструмент, позволяющий создавать TTF и OTF шрифты на основе рукописного текста.

Есть бесплатная и премиум-версия. Программа работает на Windows, Linux, Mac OS X и BSD.

Представляем вам подборку бесплатных сервисов для дизайнера. Это первый вариант, в дальнейшем планируем расширять, добавляя новые разделы и инструменты.

Шрифты

  • Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни.
  • 1001 Free Fonts - библиотека шрифтов. Имеет удобную навигацию – шрифты отсортированы как по алфавиту, так и по типам. Имеется раздел русских шрифтов.
  • Fontstruct – онлайн конструктор шрифтов. Очень простой инструмент, позволит создать собственный шрифт. Рисовать можно не только стандартными квадратами, но и другими фигурами – точки, закругленные углы и пр. Для начинающего идеальный инструмент, чтобы попробовать и увидеть типографику в действии.
  • Font Squirrel – одна из самых больших библиотек шрифтов. Кроме этого можно загрузить рисунок и получить названия шрифтов, используемых на нем. Есть магазин шрифтов, и даже магазин одежды с логотипами.
  • Type light – полнофункциональный редактор шрифтов. Позволяет создавать, редактировать и конвертировать шрифты OpenType, TrueType и PostScript. Необходимо скачивать и устанавливать. Бесплатная версия имеет ограниченный функцуонал по сравнению с бесплатной. Но для создания простого шрифта хватает.
  • What Font is – онлайн сервис для подбора шрифтов сайта. Загружаем файл шрифтов, указываем url сайта и выидим как загруженный шрифт будет выглядеть на сайте. Удобнцый сервис.
  • 1001 Fonts – библиотека шрифтов (более 15000). Удобная навигация – шрифт можно выбрать по размеру, типу, теме, дизайну и т.д. Меню позволяет настроить вывод, что дает возможность увидеть каждый шрифт в разных опциях: размер, начертание и т.д.
  • Font Flame – онлайн сервис подбора пары сочетаемых шрифтов. Действует очень просто – на главной странице предложен листок с двумя надписями, сделанными разными шрифтами. Понравилось – жмите «Love», нет – «Hate». Потом выбранные можно просмотреть еще раз. Клик по названию шрифта открывает Google Fonts.
  • Typecast – выбор шрифта для прототипа. Можно просмотреть как шрифт будет выглядеть на любых устройствах. Необходимо обозначить разные типы текста – заголовки, кавычки и т.д. Можно выбрать гарнитуру, размер, начертание, установить отступы. Вы увидите вашу будущую страницу в тех шрифтах, которые установили. Большой плюс – выбор макета (одна колонка или несколько, разные расположения блоков).
  • Wordmark - позволяет подобрать шрифт, установленный на компьютере пользователя, для текста, логотипа или заголовка. При вводе текста в поле показывает его различными шрифтами. Можно выбрать размер, регистр, отображение черно-белое или наоборот. Понравившиеся варианты публикуются в триттере или на фейсбуке – по выбору пользователя. Можно отправить на email.

Стоки фотографий

  • Unsplash – постоянно пополняемый сток фото. Коллекции разделены на темы. Можно найти все что угодно, от «Афроамериканцы» до «Природа». Каждая фотография имеет свою оценку, можно посмотреть лучшие или новинки.
  • FoodiesFeed – фото еды. Изображения разбиты по категориям. Можно выбрать лучшие, эксклюзивные, иконки, мокапы и пр.
  • Free Refe Photos - огромный список изображений «Real life». Главным образом пейзаж и фотографии природы. Неудобная навигация, все фото на главной странице, появляются при скроллинге.
  • Little Visuals – качественные фото ландшафтов и зданий. Можно скачать архивом лучшие фото, выложенные за неделю. Фотографии обозначены хештегами, но не разбиты по категориям.
  • Gratisography – огромная библиотека бесплатных фото. Все фото разбиты на шесть тем: люди, гримасы, города, предметы, природа и животные. Можно искать по словам.
  • Death to the Stock Photo – сток фотографий. Просто посмотреть и выбрать нельзя. Они делают подборку за месяц и дают ее скачать после ввода email. Архив весит около 11 Мб. На почту присылают лучшие фото и ссылку на скачивание.
  • Superfamous – большая коллекция фото с необычного ракурса. Набор небольшой, но интересный.
  • The Pattern Library – шаблоны и текстуры. Набор достаточно велик, шаблоны необычны. Сменяются прокруткой, причем постепенно. Можно увидеть как шаблон будет выглядеть на весь экран или на его часть.
  • New Old Stock – винтажные фото из архивов. Бесплатных фото немного, но регулярно появляются новые.
  • Pexels – большое количество фото на все случаи жизни. Разбиты по темам, очень удобно искать.
  • Jay Mantri - большой набор фотографий. Классификации как таковой нет, можно посмотреть по месяцам.

Стоки графики

  • Brusheezy – бесплатные кисти, шаблоны, текстуры и прочее для фотошопа. 12 категорий, в каждой из которых подкатегории. Выбор огромен.
  • Iconfinder – иконки, как платные, так и бесплатные. Скачать можно в форматах ICO, PNG, ICNS, SVG.
  • Brushez – большая коллекция кистей для фотошоп. Кроме них еще векторные примитивы, формы, шаблоны, стили. Каждый раздел разбит на подразделы. Например, для кистей более 20 категорий.
  • Vecteezy – бибилотека векторной графики, включая изображения и иллюстрации. Большое количество категорий и огромное – графики.
  • Iconbird - русскоязычный сервис по поиску иконок. Можно ввести тему и получить набор иконок, а можно просматривать по категориям.
  • Icons8 - русскоязычный сервис, предлагающий более 42000 иконок по разным тематикам.

Инфографика

  • Vizualize – онлайн сервис для создания инфографики «О себе». По сути, создает графическое резюме.
  • Canva – простой инструмент для создания любого дизайна. Позволяет оформить презентацию, плакат, запись в соцсетях, книги, письма, материалы и многое другое. Все делается на основании шаблонов, меняется текст. Но шаблонов очень много, есть из чего выбрать.
  • Easelly – создание инфографики на основании шаблонов. Встроенный онлайн редактор позволяет менять оформление, размещать дополнительные жлементы, менять текст.
  • Infogram – онлайн сервис для создания инфографики и интерактивных диаграмм. Не все функции доступны, придется покупать аккаунт.
  • Visage – простой инструмент для создания любого визуального контента (диаграммы, инфографика, изображения для блога и пр.). Множество шаблонов, простой редактор. Некоторые функции платные.
  • Gliffy – онлайн сервис для создания диаграмм. Редактор действует по принципу Microsoft Visio.
  • Visme – онлайн инструмент для создания презентаций и инфографики. Более 1000 шаблонов. Редактор позволяет добавлять текст (заголовки, списки, кавычки и обычный), анимированный текст и виджеты. В бесплатном аккаунте можно скачать как JPG файл.
  • Piktochart – создание высококачественной графики – презентации, инфографика или печатный материал. Выгружается PNG, JPG разных размеров.
  • Drawio – удобный онлайн сервис для создания диаграмм. Можно сохранять в dropbox и подобные сервисы, можно на диск.
  • Venngage – простое создание инфографики, плакатов, отчетов, материалов для соцсетей и пр. В бесплатной версии дает только ссылку на публикацию. За скачивание надо платить.
  • Cacoo -онлайн сервис для рисования диаграмм и карты сайта. Пожалуй, самый лучших по возможностям. Большое количество инструментов и шаблонов. Экспортировать можно в PNG, PDF, SVG, PPT и др.
  • Creately – онлайн сервис рисования диаграмм. Доступны только для публикации. Скачивание платное.
  • Lucidchart - онлайн сервис создания диаграмм и чертежей. Есть возможность импортировать диаграмму Microsoft Visio. Экспортируется в PDF, PNG и JPG. Имеется платный функционал.

Цвета

  • Color Hunt – подбор сочетаний цвета. Можно подбирать до четырех цветов. Есть готовые решения для выбора.
  • TinEye – анализирует сайт и выводит список ресурсов, на которых используется картинка с сайта.
  • ColorZilla – позволяет создавать цвета и градиенты. Выводит css свойства для них.
  • Adobe Color CC – создание цветовых схем.
  • Colicious – нажимайте на пробел и генерируйте новый цвет.
  • Colorscheme - подбор цветовых схем. Есть версия на английском и на русском. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.
  • Paletton – инструмент для создания комбинаций цветов. Ничем не отличается от Colorscheme.
  • Pictaculous – анализирует палитру изображения PNG, JPG или GIF. Загружайте изображение и получите набор всех цветов, которые в нем присутствуют.
  • Hex Color Tool – инструмент выбора цвета. Ползунками настраивается цвет, можно выбрать яркость. Затем выбранный цвет сохраняется. Можно подобрать палитру.
  • (Un)clrd – плагин для браузера, который удаляет все цвета и оставляет сайт в черно-белом цвете.
  • BrandColors - самая большая коллекция официальных фирменных цветовых кодов. Выбираете название бренда и скачиваете названия его цветов, в том числе и в css- файл.
  • Colortyper - подбор цветов с необычного ракурса. На экране показываются разноцветные символы, которые пересекаются. Результат пересечения – новый цвет. Выглядит интересно.

Вдохновение

  • Dribbble - Самое многочисленное сообщество дизайнеров. Работы, сообщества, общение – здесь можно найти все что угодно.
  • Freebbble – шаблоны и дизайны из Dribbble. Что-то можно скачать бесплатно, что-то купить. Можно найти шаблоны для CMS, конструкторов, иконки, мокапы, сверстанные шаблоны сайтов и многое другое.
  • Muzli - Ежедневное вдохновение дизайна. Ресурс для дизайнеров с примерами самых необычных работ.
  • Awwwards – лучшие разработки дизайнеров. Организован как сообщество, где можно проголосовать сайт. Выбираются сайт дня, месяца, года и пр. Большое количество дизайна, видео, разработок.
  • Design You Trust - сообщество дизайнеров, совместно использующее последние тенденции, новости, портфолио, дизайны и творческие объявления.
  • Really Good Emails - огромная коллекция хорошо разработанных электронных писем. Выбираете шаблон и получаете его код html, css и js. Можно менять текст, рисунки и пр.
  • Fubiz – публикации из области дизайна и креатива. Можно найти фотографии, дизайн, графику, видео и др. Все разбито по категориям.
  • Designspiration – коллекция дизайнов в стиле Pinterest. Огромное количество идей и примеров – типографика, логотипы, письма и многое другое.
  • Behance – коллекция портфолио от профессионалов. Можно оставить вакансию или резюме.
  • Mobile-patterns – библиотека скриншотов iOS и Android. Все разбито по разделам. Можно найти много идей.
  • One Page Love – галерея лучших дизайнов web-страниц. Можно купить шаблоны и темы. Есть и бесплатные.
  • Uispace - ресурс для дизайнеров. Можно бесплатно скачать psd, sketch, шрифты, мокапы и пр.

Графические редакторы

  • DAZ 3D - 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
  • Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым - можно скачать дополнительные плагины.
  • Blender - 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
  • Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
  • Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
  • BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
  • Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG - работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
  • IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
  • Falco GIF Animator - программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
  • Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
  • Boxy-SVG - редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
  • Photopos - многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
  • 5Dfly - бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
  • PaintStar - бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
  • PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.