Espaço de design (visualização)

Importante: o Espaço de design (visualização) requer o sistema operacional Mac OS X 10.10 ou Windows 8.1 de 64 bits ou superior.

O Espaço de design (visualização) é uma experiência associada ao Photoshop para os designers de Web e aplicativos. Tecnicamente, o Espaço de design (visualização) é uma camada HMTL5/CSS/JavaScript construída sobre o Photoshop. Separar essa nova experiência de Photoshop padrão torna mais fácil ter uma interface de usuário atual, interações mais inteligentes e um fornecimento mais rápido de recursos superiores solicitados. 

O Espaço de design atualmente é uma Visualização da tecnologia. Para ajudar a desenvolver o Espaço de design (visualização) do jeito que você deseja; dê-nos a sua opinião @psdesign.

Para uma lista de problemas conhecidos nesta versão, consulte Principais problemas conhecidos.

No Photoshop, execute um dos procedimentos a seguir:

• Selecione Janela > Espaço de design (visualização).
  
• No menu pop-up de seleção da área de trabalho no canto superior direito da tela, escolha o Espaço de design (visualização).
  

• Se necessário, é possível maximizar as propriedades da área de trabalho e de exibição, camadas e bibliotecas em uma única coluna. Selecione o modo Janela > Modo de uma única coluna.
  

• Se você confiar bastante em atalhos do teclado, você pode optar por ocultar a barra de ferramentas. Desmarque Janela > Fixar barra de ferramentas.
  

Há várias maneiras de criar um documento utilizando o Espaço de design (visualização).

1. Selecione Arquivo > Novo ou use o atalho de teclado Cmd/Ctrl+N. O Espaço de design (visualização) cria rapidamente um documento com uma única prancheta que usa o modelo do iPhone 6.
2. Selecione Arquivo > Novo… para abrir a caixa de diálogo Novo. Especifique os detalhes necessários e clique em OK.
   
   Para mais informações, consulte Criar uma imagem e Criar documentos de prancheta.
3. Selecione Arquivo > Novo a partir do modelo e selecione um dos seguintes modelos:

1. Na interface do Espaço de design (visualização), siga um destes procedimentos:
   

• Selecione Camada > Criar nova prancheta. O Espaço de design (visualização) adiciona uma prancheta das dimensões padrão ao documento.
  
• Para adicionar uma prancheta para um dispositivo específico, selecione Camada > Nova prancheta e, em seguida, selecione uma predefinição. Por exemplo, selecione Camada > Nova prancheta > iPad Pro.
  

2. Adicione seus elementos de design à nova prancheta.

As seguintes ferramentas estão disponíveis no Espaço de design (visualização):

O Espaço de design (visualização) apresenta a funcionalidade detalhada da pesquisa que permite a pesquisa por meio dos seguintes itens entre outros:

• Comandos de menu
  
• Abrir documentos
• Documentos recentes
• Camadas, camadas de pixels, camadas de ajuste, camadas de grupo, camadas de vetor e camadas de texto
• Pranchetas
• Bibliotecas - toda ou específica
  
• Objetos inteligentes
• Estilos
• Gráficos
  
• Predefinições

Ao fazer uma pesquisa, você pode filtrar seus resultados de pesquisa para que eles incluam somente um tipo específico de itens.

Siga estas etapas:

1. Selecione Editar > Pesquisa para chamar a funcionalidade de pesquisa. Opcionalmente, pressione Ctrl/Cmd + F ou clique no ícone Pesquisa à esquerda da barra de títulos.
   

O Espaço de design (visualização) torna a criação de máscaras para imagens em seu projeto realmente simples.

1. Selecione uma camada no painel Camadas.
   
2. Clique no ícone Modo de máscara () na barra na parte superior do Espaço de design. Opcionalmente, pressione M para usar o atalho de teclado. Quando o modo da máscara é ativado, a seta da ferramenta Selecionar fica vazia () e o ícone do Modo máscara fica azul.
3. Usando as ferramentas como a ferramenta Caneta e a ferramenta Retângulo, desenhe uma máscara para sua imagem.
4. Quando você terminar de criar a máscara, saia do Modo máscara de uma das seguintes maneiras:

• Clique no ícone Modo máscara ().
• Pressione Esc.
• Pressione o atalho do teclado Modo máscara -M.

Crie guias na área de trabalho do Espaço de design (visualização) para trabalhar com precisão com elementos de design.

1. Certifique-se de que Exibir > Mostrar guias estejam selecionados.
   
2. Clique na ferramenta Selecionar e passe o ponteiro do mouse sobre a borda da área de trabalho. Observe o realce azul indicando que a criação da guia está disponível.
   
3. Clique e arraste a guia.
   
   Se uma prancheta ou uma camada em uma prancheta estiver selecionada, uma guia específica da prancheta será criada. Essa guia só é exibida quando a prancheta ou suas subcamadas são selecionadas. Se uma prancheta ou uma camada em uma prancheta estiver selecionada, uma guia específica do documento será criada.

1. Selecione três ou mais camadas.
2. Selecione Organizar > Distribuir objetos e selecione um comando. Como alternativa, selecione um botão de distribuição nos painéis Distribuir e Alinhamento.

• Horizontalmente    Aplica um espaçamento uniforme entre as camadas, a partir do centro horizontal de cada uma.
• Verticalmente    Aplica um espaçamento uniforme entre as camadas, a partir do centro vertical de cada uma.

1. Selecione duas ou mais camadas.
2. Selecione Organizar > Alinhar objetos e selecione um comando. Como alternativa, selecione um botão de alinhamento nos painéis Distribuir e Alinhamento.

• Esquerda    Alinha o pixel esquerdo das camadas selecionadas com o pixel esquerdo da camada mais à esquerda
• Centro    Alinha o pixel central horizontal das camadas selecionadas com o pixel central horizontal de todas as camadas selecionadas
• Direita    Alinha o pixel direito das camadas selecionadas com o pixel mais à direita de todas as camadas selecionadas
• Superior    Alinha o pixel superior das camadas selecionadas com o pixel mais acima de todas as camadas selecionadas
• Média   Alinha o pixel central vertical das camadas selecionadas com o pixel central vertical de todas as camadas selecionadas
• Inferior    Alinha o pixel inferior das camadas selecionadas com o pixel mais abaixo de todas as camadas selecionadas

1. Escolha Camada > Transformar e escolha um comando.
   

• Girar 180   Gira o item em 180 graus
  
• Girar à direita   Gira o item em sentido horário em 90 graus
  
• Girar a esquerda   Gira o item em sentido anti-horário em 90 graus

2. Você também pode girar um objeto diretamente na tela. Com um objeto selecionado, passe o mouse sobre o canto e o widget mudará para permitir a rotação.

• Selecione um comando de flip no menu Organizar.  
  • Virar horizontalmente   Vira o item horizontalmente
  • Virar verticalmente    Vira o item verticalmente
    
  • Trocar posição   Troca a posição das duas camadas ou grupos selecionados

É possível alterar o objeto modificando as opções disponíveis no painel Aparência.

A opacidade geral de uma camada determina em que grau ela obscurece ou revela a camada abaixo dela. Uma camada com 1% de opacidade aparece quase transparente, enquanto uma com 100% de opacidade aparece completamente opaca.

1. In No painel Camadas, selecione uma ou mais camadas.
2. Especifique um valor para opacidade no painel Aparência.

O modo de mesclagem de uma camada determina como seus pixels são mesclados com pixels subjacentes da imagem. Você pode criar vários efeitos especiais, usando os modos de mesclagem.

1. No painel Camadas, selecione uma ou mais camadas.
2. Escolha um dos seguintes modos de mesclagem no painel Aparência:

• Normal
• Dissolver
• Escurecer
  
• Clarear
• Divisão
• Sobrepor
• Multiplicação
• Superexposição de cor
• Superexposição Linear
• Cor Mais Escura

Ao utilizar qualquer outro modo de mesclagem no Photoshop padrão, o modo de mesclagem funciona também no Espaço de design (visualização).

Para mais informações sobre o que cada modo de mesclagem faz, consulte Modos de mesclagem.

1. No painel Camadas, selecione a camada de texto.
2. Especifique as seguintes configurações no painel Aparência:

• Família tipográfica   Ajusta a fonte a partir do menu suspenso.
• Espessura   Ajusta a espessura com base na fonte selecionada.
• Cor do texto Selecione a cor do texto de uma das seguintes formas:
  • Selecione a cor no seletor de cores.
  • Especifique um valor para a cor. Consulte Valores de cores legais CSS para uma referência imediata de valores de cor.
  • Especifique um nome comum para a cor, como tomate ou magenta. Para obter uma lista de nomes aceitos, consulte Palavras-chave de cores estendidas.
• Tamanho   Ajusta o tamanho de texto selecionado.
• Letra    Ajusta o espaçamento entre letras.
• Linha   Ajusta o espaçamento entre linhas.
• Alinhar   Alinha o texto à esquerda, à direita, centralizado ou justificado.

Com a ajuda das ferramentas vetoriais, é possível utilizar as opções Adicionar, Subtrair, Fazer intersecção ou Excluir para alterar as formas atuais em camadas ou combinar uma ou mais camadas de formas selecionadas.

1. No painel Camadas, selecione as camadas de texto que deseja combinar.
2. Selecione Camadas > Combinar e execute um dos procedimentos a seguir:

• Unir forma    Adiciona a nova área às formas ou ao demarcador existentes
• Subtrair forma    Remove a área em sobreposição das formas ou demarcador existentes
• Fazer intersecção da forma    Restringe a área à intersecção da nova área e as formas ou demarcador existente
• Diferenciar forma    Exclui a área sobreposta nas áreas existentes e novas consolidadas

1. No painel Camadas, selecione uma ou mais camadas.
2. Abra o seletor de cores de preenchimento no painel Aparência e especifique uma cor de uma das seguintes maneiras:

• Clique em uma cor no seletor de cores.
• Especifique um valor para a cor. Consulte Valores de cores legais CSS para uma referência imediata de valores de cor.
• Especifique um nome comum para a cor, como tomate ou magenta. Para obter uma lista de nomes aceitos, consulte Palavras-chave de cores estendidas.

3. Especifique o valor alfa para ajustar a opacidade da cor de preenchimento.

1. No painel Camadas, selecione uma ou mais camadas.
2. Abra o seletor de cores de traçado no painel Aparência e especifique uma cor de uma das seguintes maneiras:

• Clique em uma cor no seletor de cores.
• Especifique um valor para a cor. Consulte Valores de cores legais CSS para uma referência imediata de valores de cor.
• Especifique um nome comum para a cor, como tomate ou magenta. Para obter uma lista de nomes aceitos, consulte Palavras-chave de cores estendidas.

3. Especifique o valor alfa para ajustar a opacidade da cor de traçado.
4. Especifique o tamanho do traçado.
5. Especifique o alinhamento do traçado como Interna, Centro ou Externa do menu suspenso.

1. No painel Camadas, selecione uma ou mais camadas.
2. No painel Efeitos, clique no ícone + para adicionar um traçado, uma sobreposição de cores, uma sombra projetada ou uma sombra interna.

3. Especifique as configurações de necessárias do efeito. 

• Para sobreposições de cores, você pode especificar um modo de mesclagem. Para obter informações sobre o que cada modo de mesclagem faz, consulte Modos de mesclagem.
  
• Para sombras e sombras internas, você pode especificar as seguintes configurações:
  • Modo de mesclagem
  • As coordenadas X e Y da sombra
  • A extensão na qual deseja que a sombra seja desfocada
  • A distribuição da sombra. A configuração Página espelhada expande os limites da sombra antes de desfocar.

Agora você pode usar as Bibliotecas da Creative Cloud para organizar, acessar e compartilhar seus ativos diretamente da interface do Espaço de design (visualização). Você trabalha com as bibliotecas no Espaço de design (visualização) de forma semelhante no Photoshop padrão. Para mais informações, consulte os seguintes recursos:

• Bibliotecas da Creative Cloud no Photoshop
• Compartilhar arquivos, bibliotecas e muito mais

Você pode exportar pranchetas, camadas, grupos de camadas ou documentos inteiros como ativos PNG, JPEG, SVG ou PDF diretamente a partir da interface do Espaço de design (visualização).

1. No painel Exportar, clique no ícone + para especificar as configurações de exportação para as camadas selecionadas a partir das quais você deseja gerar itens.
2. Especifique a Escala, o Sufixo e o Formato para o ativo que você deseja exportar.
3. Se necessário, clique no ícone + para especificar as configurações para mais ativos.
4. Clique no ícone para salvar os itens gerados em seu computador.
   

• Inserir um valor de transformação negativo para um Objeto inteligente vinculado à biblioteca resulta em um erro. Inserir um número negativo no campo Largura ou Altura coloca o Espaço de design (visualização) em um estado do erro interno no qual a camada não pode mais ser selecionada ou não está visível na tela e os controles não respondem.
  
  Solução/solução alternativa: Selecione Janela > Retornar ao Photoshop padrão e Proceder uma etapa no histórico até que a camada se torne visível na tela.
• Usando a ferramenta Classificador uma segunda vez no mesmo Objeto inteligente vinculado à biblioteca após a primeira tentativa de Desfazer resulta em um erro.
  
  Solução/solução alternativa: desfazer duas vezes antes de tentar a segunda amostra.
• Abrir um arquivo do Illustrator (Importar PDF) resulta em erro.
  
  Solução/solução alternativa: Selecione Janela > Retornar ao Photoshop padrão. Agora, retorne ao Espaço de design (visualização).
• Às vezes um Objeto inteligente vinculado à biblioteca tem a funcionalidade Alternar ativada quando apenas uma camada está selecionada.
  
  Solução/solução alternativa: clicar no ícone Alternar corrige o problema.
• Criar uma forma no Photoshop padrão e selecioná-la ao entrar no Espaço de design (visualização) altera as configurações de Preenchimento e Traçado da forma.
  
  Solução/solução alternativa: desmarque a forma antes de entrar no Espaço de design ou Desfazer após digitar o Espaço de design.
• Tentar exportar estando no modo de edição de Tipo falha e desativa o ícone do painel Exportar.
  
  Solução/solução alternativa: use o comando de menu ou o ícone de exportação no cabeçalho do documento. Retornar ao Photoshop padrão e novamente ao Espaço de design (visualização) ativa novamente o ícone Exportar painel.
• Quando nenhuma camada for selecionada, criar uma forma com a ferramenta Caneta coloca-a para fora da prancheta no painel Camadas, mas dentro da prancheta na tela.
  
  Solução/solução alternativa: depois de criar a forma, clique na ferramenta Selecionar e ajuste (pressione uma tecla de seta no teclado).
• Desfazer depois de criar uma máscara de camada revela uma máscara aplicada à camada. Isso faz com que a camada pareça como se não houvesse nenhuma máscara aplicada. Entretanto, o ícone do painel Camadas ainda mostra erroneamente que a camada tem uma máscara.
  
  Solução/solução alternativa: execute a operação Desfazer duas vezes.
• Os caminhos são criados sem teclas modificadoras após o primeiro caminho. Quando você remove o primeiro caminho desenhado, a ação atua como uma subtração.
  
  Solução/solução alternativa: mantenha pressionada a tecla Shift antes de desenhar.
• Problemas de realce da camada. Se nenhuma camada estiver selecionada, passar o mouse sobre as camadas não as realça. O modificador Cmd/Ctrl não funciona. Se uma camada for selecionada, o modificador Cmd/Ctrl mostra apenas guias inteligentes, mas não o realce do Espaço de design (visualização) (azul).
  
• (Somente no Windows) Você não pode fazer uma panorâmica da tela rolando com um trackpad no Windows.
• As coordenadas X e Y estão incorretas depois de movimentar a prancheta na tela.
  
• Mover uma camada para fora da prancheta e novamente para dentro corrompe as coordenadas X e Y para a camada.
• Excluir a primeira máscara em uma situação de várias máscaras resulta em uma máscara invertida/subtraída.
• Os números não estão localizados corretamente. A vírgula nos números é exibida como um ponto.
• Exportar ativos a partir do estado da ferramenta modal resulta em um erro.  

• Você pode alterar rapidamente a cor do fundo para a área de trabalho. Clique com o botão direito do mouse fora das pranchetas/outro conteúdo na área de trabalho e, em seguida, selecione uma cor.
  

• Utilize os seguintes atalhos de teclado para alternar entre a interface padrão do Photoshop e o Espaço de design (visualização):
  • Cmd+Ctrl+` (Mac)
  • Alt+Ctrl+` (Windows)
• Clique duas vezes no nome de uma camada do painel Camadas para renomeá-la.
• Clique duas vezes sobre a tela para passar pela hierarquia de camadas. Pressione Esc para voltar na seleção de camadas e desmarcar as camadas do nível superior.
• Clicar duas vezes em uma camada única da tela (texto ou vetor) abre o modo Editar. Pressionar Esc encerra o modo Editar.
• As camadas/grupos ativos têm um realce azul em torno.
• Clique no ícone de + ao lado de uma prancheta selecionada no documento para adicionar uma nova prancheta.
  
• As camadas de vetor e de pixels apresentam alças de transformação para redimensionar e girar; camadas de texto não exibem as alças.