Фигуры сценариев для блогов и технических статей
Инженерные блоги, посты в Medium / Substack, README на GitHub и технические рассылки об автономном вождении и ADAS регулярно нуждаются в чистой фигуре сценария: перекрёсток, который вы объясняете, пограничный случай, который разбираете, конфигурация полос, с которой работает ваш код. drawtonomy подходит для этих фигур, с форматами вывода, оптимизированными для веба.
Эта страница — аналог Иллюстраций для статей по автономному вождению для блогов — тот же холст, другие ограничения вывода.
Что нужно фигурам для блогов и статей
Заголовок раздела «Что нужно фигурам для блогов и статей»Ограничения отличаются от бумажной иллюстрации:
- Встраиваемая. Фигура должна вставляться в редактор Markdown / MDX / Notion / Ghost / Substack без конвертации.
- Безопасная для светлого / тёмного режима. Многие инженерные блоги рендерятся в обоих. Фигура должна быть читаемой в любом или иметь вариант для тёмного режима.
- Маленький размер файла. Растровое изображение на 4 МБ вредит загрузке страницы и SEO. SVG или сжатый PNG — правильные по умолчанию.
- Удобная для социальных карточек. При публикации поста в Twitter / LinkedIn / Hacker News OG-изображение — обычно фигура. Соотношение сторон и читаемость в маленьком размере важны.
- Повторно редактируемая. Блогеры обновляют посты. Фигуру нужно редактировать позже без перерисовки.
Настройки drawtonomy по умолчанию хорошо соответствуют этим требованиям:
.drawtonomy.svg(нативный SVG-формат drawtonomy) — это обычный SVG, встраиваемый в любой HTML / Markdown / MDX — и повторно редактируемый в drawtonomy.- Экспорт PNG доступен с высоким DPI, когда SVG не поддерживается (например, превью LinkedIn).
- Бесконечный холст позволяет рисовать широкую фигуру, которая хорошо кадрируется до размеров OG.
Рекомендуемый рабочий процесс
Заголовок раздела «Рекомендуемый рабочий процесс»- Выберите сценарий. Одна сцена, одна мысль. Не пытайтесь изобразить целый конвейер в одной фигуре.
- Набросайте на drawtonomy.com. Дороги, полосы, перекрёстки, транспортные средства, пешеходы, пути, текстовые метки.
- Настройте для светлого и тёмного режима. Используйте цвета, которые хорошо смотрятся на
#fffи на#1a1a1a. Избегайте чисто белых обводок (не видны на светлом) и чисто чёрных (не видны на тёмном). Средне-серые обводки хорошо работают в обоих. - Установите кадрирование холста. Разместите фигуру так, чтобы самое важное было в центре. Если будете использовать как OG-карточку — кадрируйте примерно 1200 × 630.
- Сохраните как
.drawtonomy.svg. Это редактируемый источник. Большинство постов обновляется хотя бы раз после публикации — и.drawtonomy.svgделает каждое обновление редактированием, а не перерисовкой. - Экспортируйте нужные ресурсы. Из той же сцены:
.pngпри 1200 × 630 для OG-карточки.- Плоский SVG для тела поста, если ваша блог-платформа предпочитает обычный SVG.
- Встройте. Вставьте в редактор блога. Добавьте подпись — поисковые системы и программы чтения с экрана полагаются на неё.
Размеры и разрешение
Заголовок раздела «Размеры и разрешение»Для SVG разрешение не имеет значения; для PNG:
| Использование | Размер |
|---|---|
| Фигура в блоге (полная ширина) | 1600 × 900 |
| Фигура в блоге (половина ширины) | 800 × 450 |
| OG / социальная карточка | 1200 × 630 |
| Карточка Twitter | 1200 × 600 |
| Изображение для LinkedIn | 1200 × 627 |
| Hero README GitHub | 1200 × 600 |
Советы по стилю для технических постов
Заголовок раздела «Советы по стилю для технических постов»- Один сценарий на фигуру. Три случая — три фигуры.
- Аннотации прямо на фигуре. Короткие метки («TTC = 2.5 с»), встроенные в фигуру, экономят глаза читателя; длинные объяснения идут в окружающий текст.
- Единый стиль эго на протяжении серии. Выберите один цвет эго и сохраняйте его во всех фигурах.
- Никаких проприетарных скриншотов. Универсальные сценарно-ориентированные фигуры из drawtonomy избегают вопроса «это из симулятора?» и дают уверенность в правах на повторное использование.
Для чего это не подходит
Заголовок раздела «Для чего это не подходит»- Фотореалистичные иллюстрации. drawtonomy — строго 2D вид сверху. Для рендеров от первого лица — используйте скриншот симулятора.
- Анимации. drawtonomy экспортирует статичные фигуры. Для анимированных объяснений сценариев экспортируйте статичную фигуру и анимируйте отдельно, или используйте экспорт OpenSCENARIO с esmini для записанного воспроизведения.