{"meta":{"title":"Como criar capturas de tela","intro":"Você pode ajudar os usuários a localizar elementos da interface do usuário que são difíceis de encontrar adicionando capturas de tela.GitHub Docs","product":"Contribuir com o GitHub Docs","breadcrumbs":[{"href":"/pt/enterprise-server@3.21/contributing","title":"Contribuir com o GitHub Docs"},{"href":"/pt/enterprise-server@3.21/contributing/writing-for-github-docs","title":"Escrevendo para GitHub Docs"},{"href":"/pt/enterprise-server@3.21/contributing/writing-for-github-docs/creating-screenshots","title":"Criar capturas de tela"}],"documentType":"article"},"body":"# Como criar capturas de tela\n\nVocê pode ajudar os usuários a localizar elementos da interface do usuário que são difíceis de encontrar adicionando capturas de tela.GitHub Docs\n\n## Sobre capturas de tela em GitHub Docs\n\nHá pontos positivos e negativos em adicionar uma captura de tela. As capturas de tela tornam os artigos mais visualmente verificáveis e facilitam a compreensão das instruções, especialmente para pessoas com dificuldade de leitura. Quando fornecidas com um texto Alt, as capturas de tela ajudam os usuários com deficiência visual e baixa visão a colaborar com os colegas sem deficiência.\n\nPor outro lado, as capturas de tela privilegiam os usuários sem deficiência visual, adicionam tempo de carregamento e extensão aos artigos e aumentam o volume de conteúdo que precisa ser mantido. Quando feitas em dimensões em pixel e graus de zoom diferentes dos quais o leitor está usando, as capturas de tela podem ser confusas.\n\nPortanto, só adicionamos capturas de tela a GitHub Docs quando elas atendem aos nossos critérios de inclusão.\n\n## Critérios de inclusão de uma captura de tela\n\nUse uma captura de tela para complementar as instruções de texto quando um elemento da interface do usuário for difícil de encontrar:\n\n* O elemento é pequeno ou visualmente sutil.\n* O elemento não é imediatamente visível. Por exemplo, o elemento está contido em um menu suspenso.\n* A interface tem várias opções concorrentes que podem causar confusão.\n\nNão use capturas de tela para etapas de procedimentos em que o texto sozinho está claro ou para mostrar comandos ou saídas de código.\n\n## Exemplos dos critérios de inclusão\n\nPara ajudar você a determinar se deseja adicionar uma captura de tela específica, considere os exemplos a seguir de capturas de tela que atendem e não atendem aos nossos critérios de inclusão.\n\n### Capturas de tela que atendem aos critérios\n\nAs capturas de tela a seguir atendem aos critérios de inclusão.\n\n#### O elemento de interface do usuário é pequeno ou visualmente sutil\n\nO botão Editar da imagem de visualização de mídia social de um repositório é pequeno e visualmente discreto. Pode ser difícil encontrá-lo entre as outras configurações do repositório.\n\n\n\nA captura de tela também fornece uma referência visual para a proporção requerida.\n\n#### O elemento de interface do usuário não é imediatamente visível\n\nAs opções usadas para clonar um gist estão contidas em um menu suspenso rotulado \"Inserir\".\n\n\n\nA captura de tela é útil para localizar a opção correta no menu, que só fica visível quando a lista suspensa é aberta.\n\n#### A interface tem várias opções que podem causar confusão\n\nHá três elementos que podem ser interpretados como \"configurações\" na página principal de um repositório: a guia \"Configurações\", o ícone de engrenagem na seção \"Sobre\" da barra lateral direita e as configurações de conta acessadas por meio da imagem do perfil.\n\n\n\nA captura de tela é útil para encontrar a opção correta.\n\n### Capturas de tela que não atendem aos critérios\n\nAs capturas de tela a seguir não atendem aos critérios de inclusão.\n\n#### O elemento de interface do usuário é fácil de encontrar\n\nO botão \"Criar repositório\" é visualmente proeminente pelo tamanho, pela cor e pelo posicionamento. Há poucas opções concorrentes.\n\n\n\nAs instruções de texto são adequadas para ajudar o usuário a concluir a etapa.\n\n#### A interface do usuário tem poucas opções, e elas são simples\n\nOpções simples e diretas, como selecionar ou desmarcar uma caixa de seleção, não precisam de suporte visual.\n\n\n\nAs instruções de texto são adequadas para ajudar o usuário a concluir a etapa.\n\nTambém há duas implicações de acessibilidade na inclusão da frase completa do texto abaixo da caixa de seleção na captura de tela:\n\n* A frase é difícil de ser lida para usuários com baixa visão, porque é pequena e não tão nítida quanto o texto HTML.\n* Uma pessoa que usa um leitor de tela não terá acesso às informações, pois elas não se ajustarão aos limites de caracteres do texto Alt. A inclusão do texto nas instruções corrigirá isso, mas será desnecessariamente prolixo.\n\n## Requisitos para capturas de tela\n\nAlém dos critérios de inclusão, as capturas de tela precisam atender aos requisitos a seguir.\n\n### Especificações técnicas\n\n* Formato de arquivo PNG\n* Somente imagens estáticas (sem GIFs)\n* 144 dpi\n* Largura de 750 a 1.000 pixels para imagens de coluna completa\n* Tamanho de arquivo de 250 KB ou menos\n* Nomes de arquivo descritivos, como `gist-embed-link.png` em vez de `right_side_page_03.png`\n* As imagens capturadas no macOS devem ser imagens de retina\n * No Snagit, selecione **Snagit** > **Preferências** > **Avançado** e desmarque \"Diminuir o tamanho de imagens retina ao compartilhar\"\n\n### Acessibilidade\n\nPara atender às necessidades de mais usuários, as capturas de tela precisam:\n\n* Ser acompanhadas de instruções completas na etapa de procedimentos, sem nenhuma informação transmitida inteiramente no formato visual.\n* Ter contraste total, como na própria interface, sem nada obscurecido ou reduzido em opacidade ou contraste de cores.\n* Ter um texto Alt que descreva o conteúdo da imagem e a aparência do realce, se houver. Para saber mais, confira [Guia de estilo](/pt/enterprise-server@3.21/contributing/style-guide-and-content-model/style-guide#alt-text).\n* Seja claro e nítido, garantindo que os elementos de texto e de interface sejam o mais legíveis possível.\n\n### Estilo visual\n\n* Mostrar um elemento de interface do usuário com contexto ao redor suficiente para ajudar as pessoas a saber onde encontrar o elemento na tela.\n* Reduzir o espaço negativo redimensionando a janela do navegador até o ideal.\n* Mostrar as interfaces no tema claro sempre que possível.\n * Para GitHub, selecione \"Padrão de luz\" em suas configurações de aparência. Para saber mais, confira [Gerenciar as configurações de temas](/pt/enterprise-server@3.21/get-started/accessibility/managing-your-theme-settings).\n * No VS Code, selecione \"GitHub Light Default\" na extensão gratuita [Tema do GitHub](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme).\n * Se o software necessário para fazer a captura de tela estiver disponível apenas no modo escuro, não haverá problemas em usar o modo escuro.\n* Se o seu nome de usuário e avatar aparecerem, substitua-os pelo nome de usuário de @octocat e pelo [avatar](https://avatars.githubusercontent.com/u/583231?v=4). Use as ferramentas de desenvolvedor no navegador para substituir seu nome de usuário por `@octocat` e para substituir a URL do seu avatar por `https://avatars.githubusercontent.com/u/583231?v=4`.\n* Não inclua um cursor.\n\n#### Estilo visual para menus suspensos\n\nSe o objetivo principal em mostrar um menu suspenso for ajudar o leitor a localizar o menu em si, mostre o menu fechado.\n\n\n\nSe o objetivo principal em mostrar um menu suspenso for ajudar o leitor a distinguir as opções no menu, mostre o menu aberto. Capture os menus abertos sem foco (estado de cursor ou pairar). Mostrar os itens de menu com uma tela de fundo branca garante o contraste com o contorno laranja escuro, quando presente.\n\n\n\n## Como realçar os elementos nas capturas de tela\n\nPara realçar um elemento de interface do usuário específico em uma captura de tela, use nosso tema especial para o [Snagit](https://www.techsmith.com/snagit/) para aplicar um traço contrastante ao redor do elemento.\n\nO traço está na cor `fg.severe` no [Sistema de Design do Primer](https://primer.style/design/) (HEX #BC4C00 ou RGB 188, 76, 0). Esse laranja escuro faz um bom contraste de cores com o branco e o preto. Para verificar o contraste em outras cores da tela de fundo, use o [Analisador de Contraste de Cores](https://www.tpgi.com/color-contrast-checker/).\n\n\n\n### Importando o GitHub Docs tema para o Snagit\n\n1. Para baixar o tema do Snagit, navegue até [`snagit-theme-github-docs.snagtheme`](https://github.com/github/docs/blob/main/contributing/images/snagit-theme-github-docs.snagtheme) no repositório `github/docs` e depois clique em .\n\n \n2. Abra o Snagit e selecione a ferramenta **Forma**.\n3. Em \"Estilos rápidos\", selecione **Importar**.\n4. Selecione o tema do Snagit nos arquivos do computador. Isso instalará a predefinição de forma.\n5. Opcionalmente, para adicionar o tema aos favoritos, marque com estrela o retângulo laranja escuro.\n\n### Como adicionar um realce a uma captura de tela\n\n1. Abra uma captura de tela no Snagit.\n\n2. Para definir a profundidade em pixel (resolução) e a largura em pixel, abaixo da tela da imagem, abra a caixa de diálogo \"Redimensionar imagem\".\n\n * Profundidade em pixel: 144 dpi (equivalente a \"2x\" no Snagit para Mac)\n\n * Largura em pixel: máximo de 1.000 pixels\n\n > \\[!NOTE]\n > No Windows, talvez seja necessário selecionar **Avançado** para alterar a resolução. Verifique se a opção **Usar nova amostragem** está desabilitada.\n\n3. Com o GitHub Docs tema aberto na barra lateral Formas, selecione o retângulo laranja escuro.\n\n4. Arraste e solte a imagem para criar um retângulo.\n\n5. Ajuste a altura e a largura do retângulo arrastando as bordas. O arredondamento de canto não deve ser ajustado e deve permanecer em 4 px. Ajuste o espaço entre o elemento de interface do usuário e o traço para que ele tenha a largura do próprio traço.\n\n6. Exporte a imagem para PNG.\n\n> \\[!NOTE]\n> Um bug no Snagit pode corromper o arredondamento de cantos, fazendo com que os retângulos fiquem ovais. Se isso ocorrer, exclua e reinstale o GitHub Docs tema (Windows e Mac) ou clique e arraste o ponto amarelo no canto superior direito da forma para redefinir o arredondamento de canto para 4 px (somente Mac).\n\n## Substituindo capturas de tela\n\nAo substituir uma imagem existente, a melhor prática é manter o nome de arquivo da imagem.\n\nCaso você precise alterar o nome de arquivo de uma imagem, procure no repositório outras referências a essa imagem e atualize todas as referências ao nome de arquivo original.\n\nSe a imagem for usada na documentação de versões de GitHub Enterprise Server que são encerrando, não altere o nome do arquivo.\n\n## Versionamento de imagens em conteúdo Markdown\n\nAlgumas imagens se aplicam a todos os planos GitHub (GitHub Free, GitHub Pro, GitHub Team, GitHub Enterprise Cloud e GitHub Enterprise Server). Nesse caso, nenhum controle de versão é necessário.\n\nQuando uma imagem difere de um plano para outro ou é alterada em uma versão mais recente de GitHub Enterprise Server, a imagem precisa ter controle de versão com instruções condicionais do Liquid. Talvez seja necessário adicionar esse controle de versão quando o conteúdo for criado inicialmente ou adicioná-lo quando o conteúdo for atualizado para uma atualização ou versão do recurso GitHub Enterprise Server.\n\n### Locais de imagens\n\nAs imagens estão localizadas no diretório `/assets/images`. Esse diretório tem alguns subdiretórios que podem ser usados para organizar o conteúdo por plano e número de versão.\n\n| Diretório | Uso |\n| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| `/assets/images` | Imagens que não são específicas para nenhum GitHub Enterprise produto. |\n| `/assets/images/enterprise/enterprise-server` | Imagens aplicáveis a todas as versões do GitHub Enterprise Server (GHES) ou aplicáveis à versão atual e às versões futuras. |\n\n`/assets/images/enterprise/`, como `/assets/images/enterprise/3.0/` | Quando uma imagem mudar em uma nova versão do GHES, adicione a nova imagem ao local original e mova a imagem antiga para o diretório correspondente à última versão à qual a imagem se aplica.\n\n### Exemplo: uma imagem varia entre os planos\n\nQuando houver diferenças entre planos, use os condicionais do Liquid para fazer o controle de versão das duas imagens.\n\n```markdown\n\n{% ifversion fpt or ghec %}\n\n{% else %}\n\n{% endif %}\n```\n\n### Exemplo: uma imagem é atualizada em uma nova versão GitHub Enterprise Server\n\nSe uma imagem for alterada para GitHub Enterprise Server 3.10, e a imagem atualizada for usada para todas as versões futuras de GitHub Enterprise Server, mova a imagem existente para `/assets/images/enterprise/3.10` e, em seguida, adicione a nova imagem ao local original, `/assets/images/enterprise/foo/bar.png`.\n\nA condicional do Liquid ficaria assim:\n\n```markdown\n\n{% ifversion fpt or ghec %}\n\n{% elsif ghes < 3.10 %}\n\n{% else %}\n\n{% endif %}\n```\n\nQuando a versão 3.10 for encerrando, o diretório `/assets/images/enterprise/3.10` será removido.\n\nO diretório de versão numerada deve conter imagens que só se aplicam a esse número de versão ou a esse número de versão e versões anteriores. Por exemplo, as imagens contidas em `/assets/images/enterprise/2.22` devem conter imagens que só se aplicam à 2.22 ou à 2.22 e às versões anteriores."}