[Ai] Diretrizes de ativos

Guia de ativos

1. Visão geral

Introdução

• Os ativos do tutorial são exibidos na área de trabalho do aplicativo para uso em guias instrucionais práticos e demonstram como, por que e quando usar as ferramentas e os fluxos de trabalho do aplicativo. 
• Em uma exploração guiada, os usuários conduzem um ativo “inicial” por uma série de atualizações simples. O estado final precisa ser claramente diferente do inicial e transmitir a sensação de recompensa. 
• Nossos dois objetivos com ativos de tutorial são: primeiro, eles precisam apresentar intenção instrucional e esclarecer como usar o aplicativo; segundo, precisam ajudar os usuários finais a se sentir realizados e inspirados a aplicar o que aprenderam.  
• Considere o tutorial como uma oportunidade de ajudar as pessoas a expandir o conhecimento que dominam. Adote e ensine práticas recomendadas (por exemplo, configurar um arquivo da Web em RGB versus CMYK) e demonstre o uso de princípios de design.

Público-alvo

• Novos usuários finais do Ai, a menos que especificado de outra forma.
• Nossos tutoriais precisam atrair um amplo grupo de usuários finais. O conjunto completo de tutoriais deve demonstrar uma ampla variedade de estilos e temas cobertos.

Localizador de ativos

• Esta é uma coleção em andamento de ativos de área de trabalho e do Adobe Stock usados em tutoriais do Ai. Consulte o Guia do usuário para conferir estilos de tutorial existentes e identificar oportunidades de expandi-los. Confira se o ativo que deseja usar já não foi utilizado de maneira reconhecível.
• +Localizador de ativos do Criador de Tutoriais do Ai

2. Imagens e modelos de banco de imagens 

Você deve usar ativos de sua autoria ou ter direitos para usar os ativos no seu arquivo inicial. Todos os ativos com pessoas reconhecíveis devem ter autorização de uso de imagem.  

• Se você não usar seus próprios ativos, use imagens do Adobe Stock “padrão” ou gratuitas. 
• Existem dois processos de licenciamento diferentes do Adobe Stock para Autores da Comunidade e Autores da Adobe.
• Não use outros serviços de banco de imagens. Os usuários finais terão acesso para usar, editar e baixar a imagem pelo arquivo inicial, e este caso de uso pode não ser coberto pelos termos de uso de outros serviços. 

Imagens e modelos gratuitos do Adobe Stock

Se você pretende usar imagens ou modelos de banco de imagens, priorize os ativos gratuitos do Adobe Stock. O uso de ativos gratuitos elimina a necessidade de entrar em contato com a equipe do Stock para verificar as permissões de uso no aplicativo e avaliar o vínculo com colaboradores. Ativos, especialmente modelos, podem ser usados como ponto de partida e personalizados como quiser.

•  Pesquise ativos gratuitos diretamente no site do Stock: https://stock.adobe.com/pt/free
• Você pode pesquisar algo específico ou pressionar Enter na barra de pesquisa para exibir todos os resultados de ativos gratuitos. Depois, você pode usar a barra de filtros à esquerda para selecionar:
  • Tipo de ativo: Imagens > Subcategoria: Vetores
  • Tipo de ativo: Imagens > Subcategoria: Ilustrações (observe que elas são .jpg, não .eps): 
  • Tipo de ativo: Modelos > Aplicativo: Illustrator

Licenciar imagens do Stock 

• Autores da Comunidade: licenciamento do Adobe Stock
  • Utilize apenas imagens padrão do Adobe Stock (não Premium). 
  • Você é responsável pela compra das licenças. Escolha o tipo de licença estendida/aprimorada. 
  • No campo “Créditos da imagem” do Criador de Tutoriais, dê os créditos aos colaboradores do Stock da seguinte maneira: “Adobe Stock: colaborador 1, colaborador 2, colaborador 3”.
  • Coloque nesta pasta do Dropbox as imagens do Stock que você comprar para mantê-las ao nosso alcance caso edições futuras sejam necessárias. 
  • Adicione seu nome ao nome do arquivo e coloque-o no nível superior.
• Autores da Adobe: licenciamento do Adobe Stock
  • Utilize apenas imagens padrão do Adobe Stock (não Premium).
  • Faça uma lista das imagens do Stock que deseja licenciar no documento do autor.
  • Marque o designer atribuído ao seu tutorial e o gerente do programa de design em um comentário.
  • Compraremos uma licença estendida em seu nome e localizaremos os ativos.
  • Observação: se você não tiver um Resumo do autor, envie um email para o designer atribuído a você e o gerente do programa de design para solicitar a imagem licenciada.

Dar crédito aos colaboradores do Stock 

• No campo Créditos da imagem do Criador de Tutoriais, os autores são incluídos automaticamente. 
• Para incluir os colaboradores do Stock, desmarque a caixa e adicione-os da seguinte maneira: “Adobe Stock: colaborador 1, colaborador 2, colaborador 3”.

3. Localização

Os ativos de área de trabalho e as imagens de seção não serão localizados em outros idiomas, portanto, é necessário usar palavras e frases neutras nos ativos de área de trabalho e omitir ou abstrair o texto da interface nas imagens de seção. 

• Bons lugares para procurar texto verificado anteriormente e gerar ideias: 
  • Arte de cabeçalho de pacote de fontes do Adobe Fonts
  • Adobe Spark (pesquise por tipo de projeto)

• Não inclua texto nas imagens de seção animadas. Ou seja, painéis de interface não podem fazer parte de capturas de tela para animação, apenas as ações dentro da prancheta.
• Caso suas imagens estáticas incluam painéis de interface, o texto precisa ser abstraído com barras cinzas ou texto simulado em vez de texto real. Isso pode ser feito no Photoshop, aplicando camadas vetoriais sobre a captura de tela da interface.

Exemplos:

+ PSD de exemplo de estilos de ajuste

4. Ativos de área de trabalho

• Os ativos devem ser dinâmicos e visualmente interessantes, porém acessíveis.
• Sua aparência precisa ser atual, familiar, moderna e relevante, sem apresentar um tema ou abordagem estética muito particular.
• Consulte o nosso Guia de expressão do produto do Illustrator para encontrar inspiração de estilo, projeto e cores. Observe que este é apenas um ponto de partida:  + Guia de expressão do produto do Ai (abril de 2021)
• Vincular os elementos visuais ao contexto de uso de um projeto familiar pode ajudar. 
  • Logotipos, ícones, elementos de marca, materiais auxiliares da marca 
  • Elementos de email, banners de anúncio, anúncios para redes sociais
  • Publicações nas redes sociais
  • Folhetos, cartões de visita, panfletos, cartazes
  • Sinalização
• Tutoriais mais livres pautados principalmente na arte ou na ilustração também são aceitos, desde que o valor instrucional dos ativos esteja claro.

Pranchetas

• Dependendo do fluxo de trabalho do seu tutorial, pode ser útil fornecer uma prancheta adicional para trabalhar (ou um espaço de experimento) junto ao contexto em que o usuário deve aplicar o resultado final. Limite o número de pranchetas do seu arquivo a duas.

Uso de camadas

• Os usuários devem precisar interagir com no máximo duas camadas.
• Considerando a necessidade de mostrar elementos trabalháveis dentro do contexto do resultado do projeto, garanta que haja espaço suficiente nos layouts para que o usuário selecione e trabalhe com os elementos como instruído. Bloqueie camadas de fundo e elementos adicionais de maneira estratégica, conforme necessário.
• As camadas devem ser de uma destas cores padrão: azul-claro, vermelho, verde.
• Use azul-claro para a camada principal da arte sempre que possível. Se precisar de uma segunda camada, use vermelho.

Texto

• Bloqueie ou contorne o texto dos ativos de área de trabalho, a menos que o tutorial seja sobre trabalhar com texto.
• Use apenas fontes do Adobe Fonts.
• Permita que os usuários escolham as próprias fontes e as estilizem como quiserem. Caso isso seja importante para o resultado final de um layout, forneça orientações livres e flexíveis. Os tipos de fonte para experimentar e descrições gerais como “negrito” facilitam a compreensão, mesmo sem nenhum conhecimento prévio.

Arquivos vinculados

• Para manter o tamanho do arquivo dentro do limite máximo, pode ser preciso rasterizar texturas e incluir arquivos rasterizados no Ai.
• Os arquivos vinculados devem ser incorporados ao arquivo antes que seja salvo como AIT.

5. Visão geral sobre imagens de seção

A imagem de seção é um exemplo estático ou animado de ações importantes na seção do tutorial. 

Para cada seção, você pode escolher entre imagens estáticas e animadas (MP4):

• Imagens estáticas (JPGs) são criadas a partir da combinação e edição de capturas de tela no Photoshop: 
• Use imagens estáticas para representar painéis de interface, já que o texto pode ser abstraído no Photoshop, ou quando forem suficientes para ilustrar a tarefa ou o fluxo de trabalho. 
• Imagens animadas (MP4s) são criadas a partir da gravação de capturas de tela. Isso é feito utilizando um software como Screenflow (macOS) ou Camtasia. 
  • Use imagens animadas somente se for essencial mostrar movimento. 
  • Devido às limitações para omitir todo o texto da interface, capturas de tela animadas são limitadas a ações dentro da prancheta.

Capturar e usar capturas de tela de painéis de interface

• Para ativos de seção, a escala é algo extremamente importante. Linhas, cursores, ícones etc. podem parecer pequenos ou inexistentes devido ao tamanho em que são exibidos no aplicativo.
• OBSERVAÇÃO: ao fazer a captura, use a configuração de Brilho padrão de “mais escuro”. Consulte a seção “Dicas para aprimorar a escala” a seguir.

Dicas para aprimorar a escala 

Para garantir a claridade máxima das suas capturas, faça o seguinte:

• Deixe os ajustes do macOS iguais ao exemplo abaixo em Preferências do sistema > Telas:
• Deixe as configurações da Interface do usuário iguais ao exemplo abaixo em Illustrator > Preferências:

Ícones e cursores

Biblioteca da CC

Esta biblioteca compartilhada da CC contém amostras de cores, cursores e ícones de ferramenta. Acesse-a pelo painel Bibliotecas no Illustrator, no Photoshop ou na CC para desktop. 

+ Ai-Desktop-Assets_TutorialBuilder 

• Você pode procurar as dicas de ferramenta com o nome da ferramenta para encontrá-las mais rapidamente.

Coleção do XD

• Também temos ícones de ferramenta e cursores reunidos em um só documento do XD. Exporte SVGs a partir do documento ou copie/cole no Ai, depois copie/cole no Ps como um objeto inteligente.

Cores para imagens de seção PSD (estático) e animadas (vídeo ou AE)

6. Imagens de seção estáticas (JPGs)

+ Imagens de seção estáticas de exemplo

Recriar a cena no Photoshop

Criar e trabalhar com capturas de tela de interface

Você pode usar o seguinte modelo para criar suas próprias imagens de seção estáticas:

+ Modelo de imagem de seção estática (PSD)

Confira como as imagens são criadas neste PSD de exemplo em camadas:

+ Exemplo de imagem de seção estática em camadas (PSD)

• Faça capturas de tela individuais de cada elemento/painel de interface usado na ilustração. Isso garante flexibilidade máxima ao compor a sua imagem e permite dimensionar e cortar um elemento sem afetar os outros.
  • Antes de fazer capturas de tela de um painel, arraste-o totalmente para fora do quadro/janela do aplicativo. 
  • Para capturar a tela, use o comando de teclado Cmd + Shift + 4 e pressione uma vez a barra de espaço. Isso permite capturar um painel inteiro. Você também pode pressionar a tecla Option ao fazer a captura para remover a sombra projetada.
• Se as capturas de tela do painel tiverem sombras projetadas, crie máscaras vetoriais em volta do painel para removê-las.
• Insira os painéis no Ps como objetos inteligentes para garantir a resolução máxima.
• Especificações:
  • Escala no Photoshop: 70%
  • Sombra projetada: Multiplicar, #000000, 25%, 90°, distância 3 px, expansão 11%, tamanho 9 px

Adicionar ativos de área de trabalho do Illustrator

• Use ativos vetoriais sempre que possível. 
• A arte pode ser copiada/colada diretamente do Illustrator para o Photoshop como objetos inteligentes vetoriais.
• É mais fácil recriar a interface de seleção, caixas delimitadoras etc. no Ai e copiar/colar a arte final no Ps.
• Se você importar um ativo que ocupa toda a prancheta e algum canto da prancheta ficar visível na tela, adicione um contorno preto de 1 px em volta para criar a aparência de uma prancheta.

Criar interface de seleção e caixas delimitadoras

Devido ao tamanho de linhas em capturas de tela, geralmente a interface de seleção e as caixas delimitadoras precisam ser recriadas como vetores no Photoshop. 

• Use vermelho (FF0000) para caixas delimitadoras, contornos de seleção etc. que pertencem à arte em camadas vermelhas 
• Use tons de azul (4F80FF) da biblioteca da CC, dependendo da cor da camada no Ai.
• Comece com as seguintes especificações, depois dimensione tudo proporcionalmente conforme necessário para adequar ao tamanho da arte:
  • Contorno de seleção: traçado de 1 pt
  • Caixa delimitadora: traçado de 1 pt
  • Alças dos cantos: quadrado de 3 px

Criar realces de interface

• Crie realces de interface como vetores no Photoshop.
• Pode ser um círculo, um quadrado ou um retângulo. Se for destacar vários elementos da interface, defina uma hierarquia para as formas: o retângulo é principal, o círculo é secundário etc.
• Especificações 
  • Use Ouro F7B74C
  • Preenchimento: nenhum
  • Traçado: 3 px
  • Sombra projetada: Multiplicar, #000000, 25%, 90°, distância 3 px, expansão 11%, tamanho 9 px

Adicionar cursores

• Use os cursores da biblioteca da CC ou da coleção do XD
• Escala: geralmente, 200% 

Exportar do Photoshop

• PS: selecione Arquivo > Exportar > Exportar como… e defina as configurações abaixo.

7. Imagens de seção animadas (MP4s)

+ Imagens de seção animadas de exemplo

Modelo para Screenflow com o tamanho correto (este é um arquivo zip que precisa ser descompactado)

Modelo de animação de cliques para Screenflow. Você pode abrir este arquivo de projeto do Screenflow, copiar a animação e colá-la na linha de tempo do Screenflow.

Animação de exemplo

Diretrizes gerais de gravação:

• Consulte a seção anterior “Dicas para aprimorar a escala” para definir a resolução correta.
• Não inclua texto nas gravações. Ou seja, painéis de interface não podem fazer parte de capturas de tela para animação, apenas ações dentro da janela Documento.
• Desative as Guias inteligentes (Janela > Guias inteligentes) ANTES de gravar. Isso evita distrações nos vídeos.
• Siga a seção anterior “Dicas para aprimorar a escala” para definir o tamanho dos cursores no Ai. O ideal é aumentá-los um pouco para que fique mais fácil acompanhá-los.
• Para os realces, siga a seção anterior “Criar realces de interface”.
• Remova as faixas de áudio que gravar. Estes vídeos NÃO são narrados.
• Tente mover o cursor de maneira suave.
• Ao selecionar uma ferramenta, pode ser preciso cobrir o texto com uma caixa no software de edição caso a dica de ferramenta apareça. Às vezes, é inevitável que a dica de ferramenta apareça sem mover o cursor rápido demais.
• Evite gravar menus e painéis.

Editar sua captura de tela

• A captura pode ser editada no aplicativo usado para capturar. Screenflow ou Camtasia são dois exemplos comuns.
• NÃO aplique atenuação no início e no final do vídeo
• Mostre os cliques no vídeo usando esta animação:

• Documento do Screenflow (copie e cole no Screenflow)

• Documento do Camtasia (copie e cole no Camtasia)

Especificações para gravações de captura de tela  

• Formato MP4
• 560 x 280 — tamanho-limite para CADA MP4: 4 MB
• A duração destes vídeos deve ficar entre 5 e 10 segundos, aproximadamente. Vídeos muito longos não são recomendados, pois são repetidos no painel. Em caso de dúvidas, peça orientações ao seu curador.

8. Imagens principais e de miniatura 

• A imagem principal é uma imagem estática que serve como uma prévia do tutorial dentro do Illustrator. Imagens principais são a imagem do “depois”, o estado final do tutorial.

+ PSD de modelo de imagem principal

• A imagem de miniatura é uma imagem estática e prévia do tutorial no painel de pesquisa. Imagens de miniatura são a imagem do “depois”, o estado final do tutorial.

+ PSD de modelo de miniatura

Imagens principais e de miniatura para série de tutoriais

Se você criar uma série de tutoriais que utiliza a mesma arte, as imagens principais e de miniatura para cada etapa da série devem ser variações da mesma arte. Assim elas formam um conjunto, mas continuam reconhecíveis como tutoriais individuais. Cada combinação de imagem principal e de miniatura deve oferecer uma prévia (porém de maneira abstrata) do tópico de um tutorial individual dentro do conjunto.

Ideias de maneiras de fazer isso:

• Use elementos, recortes ou pontos focais diferentes da mesma arte
• Use temas de cores levemente diferentes

Exemplos:

9. Especificações de ativos

Acesse Especificações de imagem para saber como criar ativos para o TB para Ai. 

ALTERNATIVA: imagens animadas usando o After Effects

OBSERVAÇÃO: esta seção destina-se a autores que têm experiência no After Effects e desejam criar sua própria animação de seção, ao contrário de capturas de tela ou imagens de seção estáticas.

+ Exemplos de imagens de seção animadas criadas com o AE

Adicionar cursores da biblioteca da CC: 

Escala para Ae: 140%

Adicionar ativos de arte do Illustrator:

• Use ativos vetoriais sempre que possível.
• Ae: crie um novo arquivo Ai com cada ativo de animação salvo na sua própria camada. Você pode exportar as camadas necessárias para o Ae. 
  • Se você importar um ativo que ocupa toda a prancheta e algum canto da prancheta ficar visível na tela, adicione um contorno preto de 1 px em volta da prancheta.
  • Verifique se a coluna Rasterizar continuamente está selecionada ao importar conteúdo do Ai para o Ae. Isso deixa a aparência do conteúdo vetorial limpa nos MP4s finais. (Se você não encontrar esta opção, clique no botão “Alternar opções/modos” na parte inferior da janela.)

Trabalhar com capturas de tela no Ae

• Insira os painéis como arquivos vinculados no Ae para garantir a resolução máxima.
• Especificações: 
  • Escala: 35%
  • Sombra projetada: Multiplicar, #000000, 25%, 90°, distância 3 px, expansão 11%, tamanho 9 px

Criar interface de seleção, caixas delimitadoras e realces 

Crie a interface de seleção e caixas delimitadoras como vetores diretamente no Ae (especialmente se estiver mostrando como o objeto é dimensionado).

• Para os realces, use a cor Ouro da biblioteca da CC, F7B74C
  • Preenchimento: nenhum
  • Traçado: 3 px
  • Sombra projetada: Multiplicar, #000000, 25%, 90°, distância 3 px, expansão 11%, tamanho 9 px

Atenuação

Adicione atenuação entre quadros-chave da animação para deixar o movimento mais natural.

• Aplique Atenuação simples em quadros-chave individuais onde necessário

Exportação

• Selecione Arquivo > Exportar > Adicionar à fila do Adobe Media Encoder... e use a predefinição “Adobe Learn: In-App Tutorial Assets”.

Adobe-Learn-In-App-Tutorial-Assets.epr

Pode ser baixada pelo Dropbox do CDA