{"meta":{"title":"Создание снимков экрана","intro":"Вы можете помочь пользователям найти элементы пользовательского интерфейса, которые трудно найти, добавив снимки экрана GitHub Docsв.","product":"Участие в документации GitHub","breadcrumbs":[{"href":"/ru/contributing","title":"Участие в документации GitHub"},{"href":"/ru/contributing/writing-for-github-docs","title":"Написание для GitHub Docs"},{"href":"/ru/contributing/writing-for-github-docs/creating-screenshots","title":"Создание снимков экрана"}],"documentType":"article"},"body":"# Создание снимков экрана\n\nВы можете помочь пользователям найти элементы пользовательского интерфейса, которые трудно найти, добавив снимки экрана GitHub Docsв.\n\n## Сведения о снимках экрана в GitHub Docs\n\nЕсть положительные и отрицательные последствия для добавления снимка экрана. Снимки экрана делают статьи более визуально сканируемыми и упрощают понимание инструкций, особенно для людей с трудностями чтения. При использовании замещающего текста снимки экрана помогают слепым и низкозримным пользователям сотрудничать с зрячими коллегами.\n\nС другой стороны, снимок экрана: привилегированные пользователи, добавьте длину и время загрузки в статьи и увеличьте объем содержимого, которое необходимо сохранить. При захвате в разных измерениях пикселей и масштабах, отличных от используемого средства чтения, снимки экрана могут быть запутанными.\n\nПоэтому мы добавляем только снимки экрана GitHub Docs , когда они соответствуют нашим критериям включения.\n\n## Критерии включения снимка экрана\n\nИспользуйте снимок экрана, чтобы дополнить текстовые инструкции, когда элемент пользовательского интерфейса трудно найти:\n\n* Элемент небольшой или визуально тонкий.\n* Элемент не сразу отображается. Например, элемент содержится в раскрывающемся меню.\n* Интерфейс имеет несколько конкурирующих вариантов, которые могут вызвать путаницу.\n\nНе используйте снимок экрана для процедурных действий, в которых текст очищается, а также для отображения команд кода или выходных данных.\n\n## Примеры условий включения\n\nЧтобы определить, следует ли добавлять определенный снимок экрана, рассмотрим следующие примеры снимка экрана, которые делают и не соответствуют нашим критериям включения.\n\n### Снимки экрана, соответствующие критериям\n\nСледующие снимки экрана соответствуют нашим критериям включения.\n\n#### Элемент пользовательского интерфейса небольшой или визуально тонкий\n\nКнопка редактирования для образа предварительной версии социальных сетей репозитория небольшая и визуально ненавязчивая. Возможно, трудно найти среди других параметров репозитория.\n\n\n\nСнимок экрана также содержит визуальную ссылку на необходимый пропорции.\n\n#### Элемент пользовательского интерфейса не сразу отображается\n\nПараметры клонирования gist содержатся в раскрывающемся меню с меткой \"Внедрить\".\n\n\n\nСнимок экрана полезен, чтобы найти правильный параметр в меню, который не отображается до открытия раскрывающегося списка.\n\n#### Интерфейс имеет несколько вариантов, которые могут вызвать путаницу\n\nНа главной странице репозитория можно интерпретировать три элемента: вкладка \"Параметры\", значок шестеренки в разделе \"О\" правой боковой панели и параметры учетной записи, доступ к которым осуществляется с помощью рисунка профиля.\n\n\n\nСнимок экрана полезен для поиска правильного варианта.\n\n### Снимки экрана, которые не соответствуют критериям\n\nСледующие снимки экрана не соответствуют нашим критериям включения.\n\n#### Элемент пользовательского интерфейса легко найти\n\nКнопка \"Создать репозиторий\" визуально видна по размеру, цвету и размещению. Существует несколько конкурирующих вариантов.\n\n\n\nТекстовые инструкции достаточно, чтобы помочь пользователю выполнить шаг.\n\n#### В пользовательском интерфейсе есть несколько простых вариантов\n\nПростые и простые параметры, например выбор или отмена выбора флажка, не требуют визуальной поддержки.\n\n\n\nТекстовые инструкции достаточно, чтобы помочь пользователю выполнить шаг.\n\nСуществует также два последствия специальных возможностей для включения полного предложения текста под флажком на снимке экрана:\n\n* Предложение трудно читать для пользователей с низким зрением, потому что это небольшой и не так хрустящий, как HTML-текст.\n* Пользователь, использующий средство чтения с экрана, не будет иметь доступа к информации, так как он не будет соответствовать ограничениям замещающего текста. В том числе текст в инструкциях исправит это, но будет ненужным словом.\n\n## Требования к снимкам экрана\n\nПомимо критериев включения снимки экрана должны соответствовать следующим требованиям.\n\n### Технические характеристики\n\n* Формат PNG-файла\n* Статические изображения только (без GIF-файлов)\n* 144 dpi\n* 750–1000 пикселей в ширину для полноколонок\n* Размер файла размером 250 КБ или меньше\n* Описательные имена файлов, например `gist-embed-link.png` вместо `right_side_page_03.png`\n* Изображения, захваченные на macOS, должны быть изображения сетчатки\n * В Snagit выберите \"Дополнительные параметры Snagit\\*\\*\\*\\*\\*\\* > выбор \"Уменьшить масштаб изображений сетчатки при совместном использовании\"\\*\\*\n\n### Специальные возможности\n\nЧтобы удовлетворить потребности пользователей, снимок экрана должен:\n\n* Сопровождайте полные инструкции в процедурном шаге без информации, передаваемой полностью в визуальной форме.\n* Будьте полностью контрастными, как в самом интерфейсе, без ничего не замеченного или уменьшенного в непрозрачности или контрастности цвета.\n* Укажите замещающий текст, описывающий содержимое изображения и внешний вид его выделения, если таковой имеется. Дополнительные сведения см. в разделе [Руководство по стилю](/ru/contributing/style-guide-and-content-model/style-guide#alt-text).\n* Будьте четкими и четкими, с текстом и элементами пользовательского интерфейса как можно более удобочитаемыми.\n\n### Визуальный стиль\n\n* Отображение элемента пользовательского интерфейса с достаточно окружающим контекстом, чтобы помочь людям узнать, где найти элемент на экране.\n* Уменьшите отрицательное пространство, изменив размер окна браузера, пока не будет оптимальным.\n* Отображение интерфейсов в светлой теме везде, где это возможно.\n * Для GitHubпараметра внешнего вида выберите \"Свет по умолчанию\". Дополнительные сведения см. в разделе [Управление параметрами темы](/ru/get-started/accessibility/managing-your-theme-settings).\n * Для VSCode выберите \"GitHub light default\" в бесплатном [расширении темы](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) GitHub.\n * Если программное обеспечение, необходимое для снимка экрана, доступно только в темном режиме, это нормально использовать темный режим.\n* Если появится имя пользователя и аватар, замените их @octocatименем пользователя и [аватаром](https://avatars.githubusercontent.com/u/583231?v=4). Используйте средства разработчика в браузере, чтобы заменить имя пользователя `@octocat` и заменить URL-адрес аватара `https://avatars.githubusercontent.com/u/583231?v=4`.\n* Не включать курсор.\n\n#### Визуальный стиль для раскрывающихся меню\n\nЕсли основной целью отображения раскрывающегося меню является помощь читателю в поиске самого меню, отобразится меню закрыто.\n\n\n\nЕсли основная цель в отображении раскрывающегося меню — помочь читателю различать параметры в меню, откройте меню. Захват открытых меню без фокуса (состояние курсора или наведения указателя мыши). Отображение элементов меню с белым фоном гарантирует контрастность с темной оранжевым контуром, где присутствует.\n\n\n\n## Выделение элементов на снимках экрана\n\nЧтобы выделить определенный элемент пользовательского интерфейса на снимке экрана, используйте специальную тему для Snagit[, ](https://www.techsmith.com/snagit/)чтобы применить контрастный штрих вокруг элемента.\n\nШтрих — это цвет `fg.severe` в системе[ оформления праймера ](https://primer.style/design/)(HEX #BC4C00 или RGB 188, 76, 0). Этот темно-оранжевый имеет хорошую контрастность цвета как на белом, так и черном. Чтобы проверить контрастность на других цветах фона, используйте [анализатор](https://www.tpgi.com/color-contrast-checker/) контрастности цветов.\n\n\n\n### GitHub Docs Импорт темы в Snagit\n\n1. Чтобы скачать тему Snagit, перейдите [`snagit-theme-github-docs.snagtheme`](https://github.com/github/docs/blob/main/contributing/images/snagit-theme-github-docs.snagtheme) в `github/docs` репозиторий, а затем щелкните .\n\n \n2. Откройте Snagit, а затем выберите средство \"Фигура\\*\\*\\*\\*\".\n3. В разделе \"Быстрые стили\" выберите **\"Импорт**\".\n4. Выберите тему Snagit из файлов компьютера. Это установит предустановку фигуры.\n5. При необходимости, чтобы добавить тему в избранное, вставьте темно-оранжевый прямоугольник.\n\n### Добавление выделения на снимок экрана\n\n1. Откройте снимок экрана в Snagit.\n\n2. Чтобы задать глубину пикселей (разрешение) и ширину пикселей, под холстом изображения откройте диалоговое окно \"Изменить размер изображения\".\n\n * Глубина пикселя: 144dpi (эквивалентно \"2x\" в Snagit для Mac)\n\n * Ширина пикселя: максимум 1000 пикселей\n\n > \\[!NOTE]\n > В Windows может потребоваться выбрать **\"Дополнительно** \", чтобы изменить разрешение. Убедитесь, что **изменение** размера использования отключено.\n\n3. GitHub Docs Открыв тему на боковой панели \"Фигуры\", выберите темно-оранжевый прямоугольник.\n\n4. Перетащите фигуру по изображению, чтобы создать прямоугольник.\n\n5. Настройте высоту и ширину прямоугольника, перетащив края. Не отрегулируйте угловое округление, которое должно остаться 4 пикселя. Настройте пространство между элементом пользовательского интерфейса и росчерком, чтобы он был посвящен ширине самого штриха.\n\n6. Экспорт изображения в PNG.\n\n> \\[!NOTE]\n> Ошибка в Snagit может повредить угловое округление, что приводит к тому, что прямоугольники становятся овальными. Если это происходит, удалите и переустановите GitHub Docs тему (Windows и Mac) или перетащите желтую точку в правом верхнем углу фигуры, чтобы сбросить угловую округление до 4 пикселей (только Mac).\n\n## Замена снимков экрана\n\nПри замене существующего образа рекомендуется сохранить имя файла образа.\n\nЕсли необходимо изменить имя файла изображения, выполните поиск в репозитории других ссылок на это изображение и обновите все ссылки на исходное имя файла.\n\nЕсли образ используется в документации для версий GitHub Enterprise Server , Закрытиене изменяйте имя файла.\n\n## Управление версиями изображений в содержимом Markdown\n\nНекоторые изображения применяются ко всем GitHub планам (GitHub Free, , GitHub ProGitHub Team, GitHub Enterprise CloudиGitHub Enterprise Server). В этом случае не требуется управление версиями.\n\nЕсли изображение отличается от плана плана или изменения в более новом выпуске GitHub Enterprise Server, образ должен быть версии с условными операторами Liquid. Возможно, вам потребуется добавить эту версию при первоначальном создании содержимого или добавить его при обновлении содержимого для обновления компонентов или GitHub Enterprise Server выпуска.\n\n### Расположения изображений\n\nИзображения находятся в каталоге `/assets/images` . В этом каталоге есть некоторые вложенные каталоги, которые можно использовать для упорядочивания содержимого по плану и номеру выпуска.\n\n| Directory | Использование |\n| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |\n| `/assets/images` | Изображения, которые не относятся к любому GitHub Enterprise продукту. |\n| `/assets/images/enterprise/enterprise-server` | Образы, применимые ко всем выпускам GitHub Enterprise Server (GHES), или применимы к текущему выпуску и будущим выпускам. |\n\n`/assets/images/enterprise/`как `/assets/images/enterprise/3.0/` | При изменении образа в новом выпуске GHES добавьте новый образ в исходное расположение и переместите старый образ в каталог, соответствующий последнему выпуску, к которому применяется образ.\n\n### Пример. Изображение отличается от планов\n\nПри наличии различий между планами можно использовать условные условия Liquid для версии двух образов.\n\n```markdown\n\n{% ifversion fpt or ghec %}\n\n{% else %}\n\n{% endif %}\n```\n\n### Пример. Образ обновляется в новом GitHub Enterprise Server выпуске\n\nЕсли изображение изменится на GitHub Enterprise Server 3.10, а обновленный образ будет использоваться для всех будущих GitHub Enterprise Serverверсий, переместите существующий `/assets/images/enterprise/3.10`образ в, а затем добавьте новое изображение в исходное расположение. `/assets/images/enterprise/foo/bar.png`\n\nУсловный код Liquid будет выглядеть следующим образом:\n\n```markdown\n\n{% ifversion fpt or ghec %}\n\n{% elsif ghes < 3.10 %}\n\n{% else %}\n\n{% endif %}\n```\n\nПосле выпуска Закрытие`/assets/images/enterprise/3.10` 3.10 каталог будет удален.\n\nНумерованный каталог выпуска должен содержать образы, которые применяются только к данному номеру выпуска или к номеру выпуска и более ранним версиям. Например, изображения должны `/assets/images/enterprise/2.22` содержать изображения, которые применяются только к 2.22 или 2.22 и более ранним версиям."}