Screenshot Studio: бесплатный инструмент для украшения, редактирования и создания макетов скриншотов

Бесплатная студия снимков экрана: делайте снимки экрана, добавляйте градиентные фоны, рамки окон и наклон 3D, комментируйте с помощью стрелок, шагов, размытия и прожектора, создавайте макеты iPhone и MacBook, превращайте код в изображения, сшивайте скриншоты с прокруткой и удаляйте строки состояния. PNG, JPG, WebP или SVG экспортируются в вашем браузере в размере до 4×, 100%.

Создан и поддерживается Shehzad Munir. ·

Студия скриншотов
Loading Screenshot Studio
Share

Полная студия скриншотов в вашем браузере

Screenshot Studio — это бесплатное универсальное приложение для создания снимков экрана, которое запускается в вашем браузере. Снимайте экран, украшайте снимки градиентом, сеткой или размытым фоном, оконными рамами и трехмерным наклоном, а также комментируйте их стрелками, пронумерованными шагами, подсветкой и постоянным редактированием. Вы также можете разместить их в макетах iPhone, iPad и MacBook, превратить код в тематические изображения, сшить снимки прокрутки и очистить снимки экрана телефона. Экспортируйте PNG, JPG, WebP или SVG без загрузки, водяных знаков и регистрации.

Screenshot Studio заменяет собой набор одноцелевых приложений, с которыми работает большинство людей. Сделайте снимок экрана, окна или вкладки браузера; украсьте его градиентом, сеткой или размытым фоном, рамкой MacOS, Windows или браузера и 3D-наклоном; аннотируйте его стрелками, пронумерованными шагами, текстовыми метками, размытием, прожектором и лупой; поместите его в макет iPhone, iPad или MacBook; сшить кадры прокрутки в одно длинное изображение; или превратите фрагмент кода в изображение, которым можно поделиться. Каждый режим передает результат следующему с помощью функции «Отправить», поэтому снимок можно обрезать, аннотировать, украшать и оформлять в одном потоке. Все работает локально на Canvas API, поэтому снимки экрана никогда не загружаются, а водяные знаки и регистрация отсутствуют.

Функции

  • Захват: захватите экран, окно или вкладку браузера с задержкой 3/5/10 секунд и выберите регион.
  • Вставьте (Ctrl/⌘+V), перетащите или загрузите в любой режим, а также встроенный образец, чтобы попробовать
  • Отправить: передать результат между Capture, Beautify, Annotate, Mockup, Stitch и Crop в одном потоке.
  • Украшение: 18 градиентов, 8 сетчатых градиентов, сплошной фон, обои или размытый фон из снимков экрана с зернистостью.
  • macOS, Windows, браузер (с URL-адресом), стеклянные и контурные оконные рамы
  • Отступы, вставка с автоматическим цветом края, радиусом угла, 5 стилями теней, наклоном и вращением трехмерной перспективы.
  • Предварительные настройки холста для социальных сетей: X post, Open Graph, LinkedIn, YouTube, Product Hunt, Dribbble, 1:1, 4:5, 9:16 и нестандартные размеры.
  • Текст заголовка, подзаголовка и водяного знака, 8 быстрых стилей, запоминаемый стиль и пакетный экспорт в ZIP-файл.
  • Аннотации: редактор на основе объектов, в котором вы можете выбирать, перемещать, изменять размер, стиль, дублировать, изменять порядок и удалять метки.
  • Конические, классические и двойные стрелки, прямоугольники, эллипсы, линии, текстовые метки, шаги с автоматической нумерацией и штампы-эмодзи.
  • Редактирование с помощью пикселизации, размытия или черной полосы, встроенных в экспортированные пиксели.
  • Прожектор, увеличительная лупа, поле выделения, маркер и ручка с возможностью отмены/повтора и сочетаниями клавиш.
  • Макеты устройств: iPhone 16 Pro/15/SE, Pixel 9, Galaxy S24, iPad Pro/mini, Galaxy Tab, MacBook Air/Pro, iMac и монитор.
  • Шесть вариантов отделки устройства, ландшафтный режим, блики экрана, 3D-наклон и адаптивная сцена MacBook + iPad + iPhone.
  • Планировщик области просмотра с областью просмотра CSS каждого устройства, соотношением пикселей и собственным размером скриншота.
  • Код для изображения: 19 автоматически определяемых языков, 10 тем, номера строк, выделенные строки, разные цвета, PNG и SVG.
  • Сшивайте вертикально, рядом или в виде сетки с возможностью удаления перекрытия прокрутки с точностью до пикселя и обрезки липкого заголовка.
  • Обрезка и очистка: точное удаление строки состояния и домашнего индикатора для размеров iPhone/iPad, автоматическая обрезка границ, поворот и переворот.
  • Экспортируйте PNG, JPG или WebP в размере 1–4× и копируйте прямо в буфер обмена без водяных знаков и без загрузки.

Как использовать Студия скриншотов

  1. 1

    Принесите скриншот

    Сделайте снимок экрана, окна или вкладки в Capture, нажмите Ctrl/⌘+V для вставки, перетащите файл или нажмите «Попробовать образец».

  2. 2

    Выберите режим

    Выберите «Украсить», «Аннотировать», «Мокап», «Код», «Сшить» или «Обрезать и очистить» на вкладках. Ваша работа в каждом режиме сохраняется при переключении.

  3. 3

    Редактировать

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

  4. 4

    Режимы цепочки

    Используйте «Отправить», чтобы продолжить результат, например «Захватить» → «Обрезать и очистить» → «Аннотировать» → «Украсить».

  5. 5

    Экспорт

    Выберите PNG, JPG или WebP и масштаб 1–4×, затем «Загрузить» или «Копировать». Все обрабатывается на вашем устройстве.

Распространенные случаи использования

  • Превратите простой скриншот в публикацию X, LinkedIn или Product Hunt с градиентным фоном и заголовком.
  • Аннотируйте отчеты об ошибках стрелками, пронумерованными шагами и отредактированными личными данными.
  • Напишите руководства для справочного центра и руководства по адаптации с выделенными пошаговыми скриншотами.
  • Покажите приложение или веб-сайт в макетах iPhone, iPad и MacBook для целевой страницы или портфолио.
  • Делитесь фрагментами кода в виде тематических изображений в социальных сетях, на слайдах или в документах.
  • Сшейте длинную прокручиваемую страницу или чат в одно изображение без дублирования строк.
  • Очищайте строки состояния и индикаторы дома со снимков экрана телефона для App Store и просматривайте изображения.
  • Создавайте сравнения до и после, а также таблицы для примечаний к выпуску и журналов изменений.

Подробное руководство

Beautify: скриншоты, готовые для публикации в социальных сетях, в один клик

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

ПредустановкаВыходной размерЛучшее для
Х пост1600 × 900 pxТвиты и темы
OG-изображение1200 × 630 pxПредварительный просмотр ссылок (открытый график)
LinkedIn1200 × 627 pxСсылки на LinkedIn и сообщения в ленте
Ютуб1280 × 720 pxМиниатюры видео
Охота за продуктами1270 × 760 pxЗапустить галерею изображений
Дриббл1600 × 1200 pxДизайнерские снимки
1:1 · 4:5 · 9:16Соотношение вашего скриншотаЛента Instagram, портретные посты, истории и ролики

Аннотируйте как редактор снимков экрана на рабочем столе

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

ИнструментЯрлыкИспользуйте его для
Выбрать/переместитьVПереместите, измените размер, стиль или удалите любую аннотацию
СтрелкаAНаведите курсор на кнопку или настройку (Shift фиксируется на 45°)
Прямоугольник/ЭллипсR / OСоздайте область (Shift рисует квадрат или круг)
ТекстTМетки и подписи, Shift+Enter для новой строки
Номер шагаNПронумерованные пошаговые руководства, которые подсчитываются сами по себе.
Размыть/отредактироватьBПикселизация, размытие или выделение электронных писем, ключей и имен черными полосами.
ПрожекторSЗатемните все, кроме важной области.
ЛупаZУвеличьте небольшой текст или значки пользовательского интерфейса.
Коробка для выделения / Маркер / РучкаH / M / PВыделение в стиле маркера и заметки от руки
Эмодзи/штампEБыстрые реакции, такие как ✅ ❌ ⚠️
ОбрезатьCОбрежьте экспортированное изображение, не теряя аннотаций.

Добавляйте стилизованный текст или подписи к любому изображениюУдалите скрытые метаданные EXIF ​​перед отправкой.

Макеты устройств и планировщик области просмотра

В режиме «Мокап» вокруг вашего снимка экрана рисуются реалистичные рамки устройств: iPhone 16 Pro, iPhone 15 и 15 Pro Max с динамическим островом, iPhone SE с кнопкой «Домой», Pixel 9 и Galaxy S24 с перфорированной камерой, iPad Pro, iPad mini и Galaxy Tab, MacBook Air, MacBook Pro, iMac и настольный монитор. Он имеет шесть вариантов отделки: портретную и альбомную, дополнительные блики экрана, 3D-наклон и адаптивную сцену, в которой показаны MacBook, iPad и iPhone вместе. Для каждого устройства планировщик области просмотра показывает реальную область просмотра CSS, соотношение пикселей устройства и собственный размер снимка экрана, а также предупреждает вас, если форма снимка экрана не соответствует экрану.

УстройствоОбласть просмотра CSSСоотношение пикселейРодной скриншот
айфон 16 про402 × 8743×1206 × 2622
айфон 15/15 про393 × 8523×1179 × 2556
айфон 15 про макс430 × 9323×1290 × 2796
айфон SE375 × 6672×750 × 1334
Гугл Пиксель 9412 × 9232.625×1082 × 2423
Самсунг Галакси С24360 × 7803×1080 × 2340
iPad Про 11 дюймов834 × 11942×1668 × 2388
Макбук Эйр 13″1470 × 9562×2940 × 1912
Макбук Про 14″1512 × 9822×3024 × 1964

Код для изображения: бесплатный генератор скриншотов кода в стиле Carbon

Вставьте фрагмент, и Code to Image преобразует его в чистое изображение, которым можно поделиться. Он автоматически определяет 19 языков, включая JavaScript, TypeScript, JSX, Python, HTML, CSS, JSON, SQL, Go, Rust, Java, Kotlin, Swift, C/C++, C#, PHP, Ruby, YAML и оболочку. Вы можете выбрать одну из 10 тем редактора (Дракула, One Dark, Tokyo Night, Night Owl, Monokai, Nord, GitHub Dark and Light, Solarized Light и Paper). Номера строк, настраиваемая начальная строка, выделенные строки и красный/зеленый цвет различия делают его полезным для документов и проверок кода, а в строке заголовка macOS или Windows отображается имя файла. Экспортируйте PNG с увеличением до 4× для четких публикаций в социальных сетях или векторный SVG, текст которого остается четким при любом размере.

Сшивайте скриншоты с прокруткой и очищайте снимки телефона.

Stitch объединяет скриншоты вертикально, рядом или в виде сетки. При прокрутке снимков он сравнивает соседние снимки попиксельно и удаляет повторяющиеся строки, а вы можете вырезать прикрепленный верхний или нижний колонтитул и точно настроить каждый шов. Этикетки позволяют быстро сравнивать результаты до и после. Crop & Clean распознает распространенные размеры снимков экрана iPhone и iPad и удаляет точную строку состояния и домашний индикатор для этой модели. Для телефонов Android он оценивает полосы и привязывается к ближайшему реальному краю. Он также автоматически обрезает пустые границы и имеет предустановленные соотношения сторон, поля обрезки с точностью до пикселя, поворот и переворот.

Измените размер окончательного изображения до точных размеров.Конвертируйте снимки экрана в WebP, JPG или PNG

Часто задаваемые вопросы

Как украсить скриншот фоном?

Откройте Beautify и вставьте, вставьте или сделайте снимок экрана. Выберите градиент, сетку, сплошной цвет, обои или размытый фон, отрегулируйте отступы, радиус угла, тень и наклон 3D, добавьте рамку macOS, Windows или браузера, если хотите, и экспортируйте PNG, JPG или WebP с увеличением 1–4×.

Как склеить несколько скриншотов в одно изображение?

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

Можно ли удалить рамку телефона и строку состояния со скриншота?

Да. Crop & Clean распознает распространенные размеры снимков экрана iPhone и iPad и удаляет точную строку состояния и домашний индикатор для этой модели одним щелчком мыши. Для Android он оценивает полосы и привязывается к ближайшему краю, а автоматическая обрезка удаляет пустые границы или границы в виде почтового ящика.

Как пометить снимок экрана стрелками и цифрами?

В режиме «Аннотации» нажмите A для стрелок, N для значков шагов с автоматической нумерацией, T для текстовых меток и R для полей. Каждую метку можно редактировать: переключитесь на «Выбор» (V), чтобы переместить, изменить размер, изменить стиль, дублировать или удалить ее с полной отменой и повтором действий.

Как размыть или отредактировать важные части снимка экрана?

Нажмите B, выберите «Пиксельирование», «Размытие» или «Черная полоса» и перетащите курсор на адрес электронной почты, имя или ключ API. Редактирование записывается в экспортированные пиксели, поэтому исходный текст не сохраняется в файле. Используйте черную панель для паролей и секретов.

Что такое зум-лупа и когда ее следует использовать?

Лупа (Z) — это круглая лупа, которая показывает увеличенную копию небольшой детали, например крошечной настройки, значка или сообщения об ошибке, поэтому зрители могут прочитать ее, не открывая полноразмерное изображение.

Как Планировщик видового экрана помогает оперативному контролю качества?

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

Есть ли водяной знак или мне нужна учетная запись?

Нет. Screenshot Studio бесплатна, не добавляет водяных знаков и не требует регистрации.

Загружены ли мои скриншоты на сервер?

Нет. Захват, редактирование и экспорт выполняются локально в вашем браузере с помощью Canvas API. Изображения хранятся в памяти только на время вашего сеанса и никогда никуда не отправляются.

Как сделать красивый скриншот с фоном?

Используйте быстрые стили Beautify («Чистый», «Полночь», «Стекло», «3D-наклон», «X-пост», «Жесткий», «Размытый» или «Минимальный») для создания законченного образа одним щелчком мыши, а затем настройте фон, рамку и тень.

Могу ли я создать красивый скриншот кода?

Да. Откройте код, вставьте фрагмент, и язык определится автоматически. Выберите тему, стиль окна, фон и параметры линии, а затем экспортируйте PNG или векторный SVG.

Это бесплатная альтернатива Carbon для изображений кода?

Да. Code to Image выполняет ту же работу, что и Carbon или ray.so, с 10 темами, 19 языками, подсветкой строк, различными цветами и экспортом PNG/SVG. Он запускается в вашем браузере без регистрации и водяных знаков.

Могу ли я сделать скриншот прямо с этого сайта?

Да, на настольных компьютерах Chrome, Edge, Firefox и Safari. Откройте Capture, при необходимости установите задержку в 3, 5 или 10 секунд, затем выберите экран, окно или вкладку в средстве выбора браузера. Перетащите результат, чтобы сохранить регион, а затем отправьте его в любой режим. Телефоны и планшеты не позволяют веб-страницам захватывать экран, поэтому сделайте снимок экрана на устройстве и вставьте или загрузите его.

Могу ли я вставить скриншот вместо того, чтобы загружать его?

Да. Скопируйте снимок экрана (например, с помощью Win+Shift+S, Cmd+Ctrl+Shift+4 или Print Screen) и нажмите Ctrl/⌘+V в любом месте страницы. Он открывается в том режиме, который вы используете.

Какие размеры следует использовать для скриншотов в социальных сетях?

Используйте пресеты холста Beautify: X post 1600 × 900, Open Graph 1200 × 630, LinkedIn 1200 × 627, YouTube 1280 × 720, Product Hunt 1270 × 760, Dribbble 1600 × 1200 или соотношения 1:1, 4:5 и 9:16 для ленты Instagram, портретной и Истории.

Как поместить скриншот в макет iPhone или MacBook?

Откройте Mockup, вставьте свой скриншот и выберите устройство. Он автоматически предлагает телефон, планшет или ноутбук по форме изображения. Выберите отделку, портретную или альбомную ориентацию, фон, тень и наклон или переключитесь на адаптивный режим, чтобы отображать MacBook, iPad и iPhone вместе.

Могу ли я применить один и тот же стиль ко многим скриншотам?

Да. Настройте стиль в Beautify, нажмите «Пакетная обработка» и выберите столько снимков экрана, сколько захотите. Каждый из них визуализируется с одинаковым фоном, рамкой, тенью и размером и загружается вместе в виде ZIP-файла.

Какие форматы экспорта и разрешения поддерживаются?

PNG (сохраняет прозрачность), JPG и WebP с ползунком качества: 1×, 2×, 3× или 4× в зависимости от режима. Code to Image также экспортирует векторный SVG. Очень большие результаты автоматически масштабируются, чтобы оставаться в пределах холста браузера, и инструмент сообщит вам, когда это произойдет.

Из журнала

All articles →