Как сделать векторный скриншот
Можно ли сделать скриншот веб-страницы в виде SVG-изображения?
У меня есть веб-страница, которая полностью векторная (текст, шрифты значков, SVG, но без PNGs, JPEG или GIF).
есть ли способ сделать векторный скриншот этой веб-страницы и сохранить его как полностью масштабируемый SVG-файл?
(чтобы я мог сделать скриншот на обычном ПК и чтобы он хорошо выглядел на retina)
Это должно быть возможно, но я не могу найти ничего, что сделает это.
дополнительный кредит: если у него есть несколько растровых изображений, я хочу SVG со встроенными растровыми изображениями.
5 ответов
CSSBox WebVector преобразует HTML страницы в SVG. Это приложение командной строки java, и вы можете увидеть пример его вывода здесь.
не совсем скриншот, но если страница печатается хорошо, вы можете распечатать ее в формате PDF. Inkscape и Illustrator загружают PDF-файл (и при необходимости сохраняют его как SVG).
один подход: если вы делаете растровый снимок экрана (PNG, JPG и т. д.), затем вы можете использовать» Trace Bitmap «в Inkscape, чтобы» конвертировать » поля определенных связанных цветов на скриншоте в векторные объекты. Я уверен, что в Adobe Illustrator есть эквивалентный инструмент. Позаботьтесь о том, сколько отдельных цветов вы укажете для трассировки-результирующие векторные файлы могут быстро усложниться. Каждый цвет является отдельным векторным объектом, который перекрывает другие цветовые объекты для представления исходного растрового изображения, так что вам, вероятно, нужно будет сделать некоторые очистки.
Могу ли я сделать снимок экрана как векторную графику или с более высоким разрешением, чем у родного?
Мне нужно сделать несколько скриншотов окна приложения. Разрешение моего ноутбука низкое, и я хотел бы получать изображения высокого качества.
Есть ли способ захватить экран как векторную графику (например, EPS, PDF, SVG)? Альтернативно, есть ли способ сделать скриншот с более высоким разрешением, чем у родного?
Конечно! Да, вы можете сделать это. Вам понадобится механизм рендеринга пользовательского интерфейса с векторным бэкэндом. Gtk + 3+ имеет этот бэкэнд. Пожалуйста, посмотрите этот проект:
Но вы должны знать, что приложение должно быть в состоянии работать в Linux с помощью Gtk +. Может быть, вы можете создать макеты либо с помощью этого метода, либо с помощью Microsoft Visio для векторного вывода.
Смотрите эти образцы:
Если вы пользователь Debian / Ubuntu, для установки вы можете просто сделать
И тогда вам нужно только выбрать, какое приложение вы хотите сделать скриншот с помощью мыши. Конечно, приложение должно быть Gtk + 3 для успешного векторного скриншота. Результатом будет файл PDF в текущем рабочем каталоге.
Захватить как вектор? Нет, конечно нет. У программы захвата нет возможности узнать что-либо о геометрии фигур на экране, не имея какой-то привязки к программе (-ам), выполняющим рисование.
Что касается разрешения, то при выполнении захвата оно не может захватить больше информации, чем доступно. Вы можете изменить размер получающегося изображения, и если вы используете хороший алгоритм масштабирования, интерполированные пиксели будут смешиваться довольно хорошо, но нет способа изобрести больше информации о пикселях, чем есть.
Теоретически можно было бы реализовать какую-то систему, в которой все отображается внутри с более высоким разрешением, а затем отправляется на экран с меньшим разрешением, но для этого потребуется специальная поддержка как в ОС, так и в накопителе. вряд ли будет реализовано, так как оно имеет очень ограниченное использование и будет тратить память только в большинстве сценариев.
Возможно, вы сможете использовать панорамирование рабочего стола, чтобы получить рабочий стол с более высоким разрешением, чем экран, но опять же, это требует, чтобы ваши драйверы поддерживали его.
OS X использует Display Postscript.
Для пользователей UNIX вы можете использовать KSnapShot или GIMP. Более подробная информация приведена на графическом экране.
Чтобы установить KSnapShot, вы можете использовать эту ссылку KSnapShot
Могу ли я сделать снимок экрана как векторную графику или с более высоким разрешением, чем у родного?
Мне нужно сделать несколько скриншотов окна приложения. Разрешение моего ноутбука низкое, и я хотел бы получать изображения высокого качества.
Есть ли способ захватить экран как векторную графику (например, EPS, PDF, SVG)? Альтернативно, есть ли способ сделать скриншот с более высоким разрешением, чем у родного?
4 ответа 4
Конечно! Да, вы можете сделать это. Вам понадобится механизм рендеринга пользовательского интерфейса с векторным бэкэндом. Gtk+ 3+ имеет этот бэкэнд. Пожалуйста, посмотрите этот проект:
Но вы должны знать, что приложение должно быть в состоянии работать в Linux с помощью Gtk+. Может быть, вы можете создать макеты с помощью этого метода или с помощью Microsoft Visio для векторного вывода.
Смотрите эти образцы:
Если вы являетесь пользователем Debian/Ubuntu, для установки вы можете просто сделать
И тогда вам нужно только выбрать, какое приложение вы хотите сделать скриншот с помощью мыши. Конечно, приложение должно быть Gtk+ 3 для успешного векторного скриншота. Результатом будет файл PDF в текущем рабочем каталоге.
PS: Хорошие новости: Firefox 42 будет использовать Gtk+3.
Захватить как вектор? Нет, конечно нет. У программы захвата нет возможности узнать что-либо о геометрии фигур на экране, не имея какого-то рода крючка в программах, выполняющих рисование.
Однако вы можете сделать снимок растра и затем преобразовать его в вектор. Существуют такие инструменты, как Inkscape, которые могут выполнить это преобразование (хотя обычно вам придется вручную вносить некоторые изменения, и даже тогда вы редко сможете получить идеальные по пикселям результаты).
Что касается разрешения, то при выполнении захвата оно не может захватить больше информации, чем доступно. Вы можете изменить размер получающегося изображения, и если вы используете хороший алгоритм масштабирования, интерполированные пиксели будут смешиваться довольно хорошо, но нет способа изобрести больше информации о пикселях, чем есть.
Теоретически можно было бы реализовать какую-то систему, в которой все отображается внутри с более высоким разрешением, а затем отправляется на экран с меньшим разрешением, но для этого потребуется специальная поддержка как в ОС, так и в накопителе. маловероятно, что он будет реализован, поскольку он имеет очень ограниченное использование и в большинстве случаев будет пустой тратой памяти.
Вы можете использовать панорамирование на рабочем столе, чтобы получить рабочий стол с более высоким разрешением, чем экран, но опять же, это требует, чтобы ваши драйверы поддерживали его.
Для пользователей UNIX вы можете использовать KSnapShot или GIMP. Более подробная информация приведена на графическом экране.
Чтобы установить KSnapShot, вы можете использовать эту ссылку KSnapShot
GIMP также доступен для Windows.
Не в настоящее время. Это должно быть возможно, но это не так.
OS X использует Display Postscript.
Могу ли я сделать скриншот в виде векторной графики или с более высоким разрешением, чем родной?
Мне нужно сделать несколько скриншотов окна программы. Мое разрешение ноутбука низкое, и я хотел бы получить высококачественные изображения.
есть ли способ захватить экран как векторную графику (например, EPS, PDF, SVG)? В качестве альтернативы, есть ли способ сделать скриншот с большим разрешением, чем родной?
мое собственное разрешение 1366×768, в то время как мне нужно разрешение почти 4000×3000.
3 ответов
конечно! Да, вы можете это сделать. Вам понадобится движок рендеринга пользовательского интерфейса с векторным бэкэндом. Gtk+ 3+ имеет этот бэкэнд. Смотрите этот проект:
но вы должны знать, что приложение должно быть в состоянии работать на Linux с помощью Gtk+. Может быть, вы можете создавать макеты либо с помощью этого метода, либо с помощью Microsoft Visio для векторных выход.
Смотрите эти примеры:
Если вы являетесь пользователем Debian / Ubuntu, для установки вы можете просто сделать
и тогда вам нужно только выбрать, какое приложение вы хотите сделать скриншот с помощью мыши. В настоящее время приложение должен быть Gtk+ 3 для успешного векторного скриншота. Результатом будет файл PDF в текущем рабочем каталоге.
PS: хорошие новости: Firefox 42 будет использовать Gtk+3.
захват как вектор? Нет, конечно, нет. Там нет никакого способа для программы захвата, чтобы знать что-нибудь о геометрии фигур на экране, не имея какой-то крюк в программу(ы) делает рисунок.
Что вы можете сделать, однако, чтобы захватить растровое изображение и затем преобразовать в вектор. Есть такие инструменты, как Inkscape, который может выполнить это преобразование (хотя обычно вам придется вручную сделать некоторые настройки, и даже тогда вы редко сможете получить пиксельные результаты).
Что касается разрешения, при выполнении захвата он не может захватывать больше информации, чем доступно. Вы можете изменить размер получаемого изображения, и если вы используете хороший алгоритм масштабирования,интерполированное пиксели будут смешиваться довольно хорошо, но нет никакого способа изобретать больше информации о пикселях, чем присутствует.
теоретически, можно было бы реализовать какой-то система, в которой все визуализируется внутренне в более высоком разрешении, а затем отправляется на экран в меньшем, но это потребует специальной поддержки как в ОС, так и на диске, и вряд ли будет реализовано, поскольку она имеет очень ограниченное использование и будет только пустой тратой памяти в большинстве сценариев.
вы можете использовать desktop-панорамирование для достижения более высокого разрешения рабочего стола, чем экран поддерживает, но опять же, что требует поддержки драйверов она.
Делаем скриншоты правильно: практические советы
Устройство для снимка экрана на первых компьютерах (Command-Shift-3)
Если вы когда-либо делали хелп или мануал для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.
В этой статье я расскажу, как правильно делать скриншоты, почему это не просто “два клика” и какие подводные камни встречаются на пути неопытного скриншотера. Рассматривайте ее как чеклист или список практических советов для тех, кто документирует ПО. Надеюсь, это поможет вам избежать разочарований и порадовать юзеров красочными понятными картинками.
Что нужно скриншотить
Нужно:
НЕ нужно:
Процесс создания скриншотов
1. Настройка окружения. Выберите единый стиль окон и шрифтов в вашей ОС. Если интерфейс “резиновый”, определите ширину и высоту окна браузера или программы и не меняйте ее на протяжении съемки.
Лайфхак: Если вы случайно закроете окно, его размеры могут сброситься, и, скорее всего, вы не сможете их точно восстановить. Чтобы не “потерять” размеры, сделайте скриншот окна и всего экрана и обведите уголки окна красным, а потом установите полученный файл в качестве обоев рабочего стола.
Может, кто-нибудь знает более простой и изящный способ?
2. Подготовка данных. Наполните приложение примерами, приближенными к жизни и решающими конкретные пользовательские задачи. Можно продумать несколько случаев: простых, как “хеллоуворлд”, и посложнее, для продвинутых юзеров.
Желательно, чтобы имена объектов и настройки не менялись в пределах одного раздела. Например, в 1-й главе пользователь Ипполит создал заметку “Как готовить рыбу”. А во 2-й главе нужно рассказать о кастомизации заметок. Естественно, лучше рассказывать про то, как Ипполит применяет к уже созданной заметке красную заливку. Такой нехитрый подход напомнит пользователю о предыдущих действиях, а также обеспечит полноту картины.
Не забудьте наполнить вашу систему “реальными” читабельными данными, сделать предварительные настройки, подготовить шаблоны, сделать бэкапы и т.д.
Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.
3. Съемка. Тут все зависит от ваших инструментов, но основные рекомендации такие:
а. По возможности снимайте только значимые зоны интерфейса и делайте скриншот как можно компактнее. Так он и на лист А4 поместится, и будет иметь малый размер.
b. Как и при фотографировании, следите за композицией, не отрезайте части элементов по краям скриншота. Постарайтесь делать скриншоты одинаковой ширины и высоты в рамках одного примера.
c. Чтобы сэкономить время, делайте сразу серию скриншотов. На всякий случай можно сделать “лишние”, незапланированные скрины – вдруг пригодятся при переделках или редактировании.
4. Редактирование. Не всегда получается подготовить красивые и разнообразные данные, избежать опечаток или смоделировать определённую ситуацию (ошибка, выход из строя, большой денежный баланс). В таких случаях есть как минимум 2 выхода:
a. Править код и стили страницы в браузере (правый клик > Inspect element и поехали), если речь идет о веб-приложении.
b. Менять надписи, комбинировать блоки из разных скриншотов в графическом редакторе.
Лучше всего уметь и то, и другое и комбинировать эти подходы в зависимости от ситуации.
Хочу отметить, что хотя при редактировании можно добавить к скрину рамку, обрезанные края и тени, лучше это делать стилями в вашем редакторе справки.
5. Сохранение. Давайте скриншотам говорящие уникальные имена, придерживаясь определённого формата, например, general_settings_privacy. Лучше не использовать пробелы и прописные буквы, а также слишком длинные названия. Такой подход гарантирует универсальность и работоспособность при размещении онлайн-справки на различных серверах.
Хранить скриншоты лучше в облаке с поддержкой шаринга, тэгов и версионности. Для удобства поиска лучше разбить папку со скринами на подпапки, соответствующие структуре интерфейса программы.
6. Вставка в текст. Об этом — ниже, в разделе «Оформление».
7. Проверка. Отложите законченный раздел, проверьте его на следующий день. А лучше дайте прочитать текст и посмотреть скриншоты тестировщику или дизайнеру.
Инструменты
Десктоп-инструменты
Плагины для браузеров
Модули HAT программ
Инструменты для создания GIF анимаций
Утилиты для сжатия изображений
Оформление
Продумайте расположение скриншота относительно текста, выравнивание. Если ширина скриншота небольшая, то следует рационально использовать свободное место и настроить обтекание текстом слева или справа.
Чтобы показать динамику, можно сделать комбинированный скриншот:
Если вы вырезали часть окна, то можно показать обрезанный край с неровной кромкой или прозрачностью:
Важные элементы или мелкие детали можно увеличить, чтобы сделать акцент:
Для акцента можно также использовать выделение с помощью цвета – оставить цвет у целевого элемента (панели), а остальные обесцветить:
Добавьте рамки, тени, стрелки, подписи, размытие по вкусу. Главное – соблюдайте единообразие и придерживайтесь ваших стайлгайдов:
И ещё несколько советов.
Старайтесь не вставлять иконки и изображения кнопок в текст, так как высота строки может измениться и верстка будет выглядеть непрофессионально. Лучше подпишите кнопки и иконки цифрами на большом скрине или вставляйте иконки и кнопки в отдельный столбец таблицы.
Переиспользуйте стандартные компоненты (иконки, панели, диалоги). Хороший пример — Confluence Inclusions Library.
Разместите список основных иллюстраций (лучше — со ссылками на иллюстрации) после содержания или в конце мануала.
Если скриншот содержит слишком много данных, попробуйте заменить его прототипом, схемой, таблицей.
Если вы делаете мануал для мобильного приложения, скорее всего, у вас будет очень много скринов. Покажите навигацию между скринами. Так пользователь легче поймет взаимодействие и переходы, даже не читая текст.
Делайте скрины для всех языковых версий ПО одновременно. Тогда при локализации справки вам не понадобится просить переводчика о дополнительных услугах, а техническому писателю не понадобится учить йиксбара, например.
А еще рекомендую прочесть эту статью с очевидными, но полезными советами.
Заключение
А вообще, идеальный скриншот (и мануал в целом) — это тот, который не надо делать. При правильном подходе к UX и UI можно задействовать привычные и очевидные пользователю паттерны навигации и поведения, не нуждающиеся в описании и пояснении.
Будет круто, если в комментариях вы поделитесь своим опытом по поводу создания скриншотов. Инструменты, процесс, размеры, подписи, стили, хранение, автоматизация — интересны любые практические советы!
P.S: Спасибо за статью нашему гуру создания технической документации Александру Зинчуку
Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.