Observação:
Este recurso não está mais disponível na versão atual da Photoshop CC. As informações contidas neste artigo se aplicam às versões anteriores do Photoshop.
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.
Observação:
Você pode localizar o código-fonte do Espaço de design (visualização) em github.
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).
Observação:
O Espaço de design (visualização) está ativado por padrão. No caso improvável que as opções alternadas para a área de trabalho do Espaço de design estejam indisponíveis, certifique-se de que Ativar Espaço de design (visualização) em Preferências > Visualizações da tecnologia está selecionado.

Observação:
Depois de acessar a área de trabalho do Espaço de design (visualização), selecione Ajuda > Introdução ao Espaço de design para uma rápida descrição de suas funções e funcionalidade. A introdução é exibida automaticamente ao alternar para o Espaço de design (visualização) pela primeira vez.

A. Barra de ferramentas B. Propriedades C. Camadas e bibliotecas D. Contrair ou expandir colunas
Observação:
Os ícones Cmd/Ctrl + clique marcados como D para alternar rapidamente entre as colunas Propriedades e Camadas e bibliotecas.

- 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).
- 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.
- 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. - Selecione Arquivo > Novo a partir do modelo e selecione um dos seguintes modelos:

- 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.
Observação:
Você também pode adicionar pranchetas como seu documento clicando nos ícones + que aparecem ao lado das pranchetas atualmente no documento. Esses ícones + são exibidos sempre que uma prancheta existente está selecionada, e a tela pode acomodar pranchetas adicionais.

Observação:
A primeira letra indica o atalho para usar a ferramenta. Por exemplo, o atalho para usar a ferramenta Retângulo é R.
Selecionar
Com exceção das tarefas regulares de seleção, a nova ferramenta Seleção é especial ao permitir que você navegue rapidamente em hierarquias de camadas e pranchetas.
- Para entrar em um grupo ou uma hierarquia de camadas aninhado, clique duas vezes com a ferramenta Seleção ativada.
- Pressione Esc para subir um nível na hierarquia.
Retângulo e elipse
Desenhar formas. Essas ferramentas funcionam de forma semelhante ao Photoshop padrão.
Observação:
Ao modificar largura, altura ou outras propriedades numéricas de um objeto, você pode inserir operações matemáticas para obter valores precisos. Por exemplo, 500/3 ou 20*4.
Classificador
Ferramenta Classificador avançado. Permite copiar cores, efeitos e outros atributos. Siga estas etapas:
- Selecione o objeto para o qual você deseja copiar um atributo. Por exemplo, selecione um retângulo.
- Selecione a ferramenta Classificador.
- Execute a seguinte ação com o objeto do qual deseja copiar o atributo:
Clique: copiar a cor
Shift + Clique: copiar efeitos
Barra de espaços: chamar exibição que revela os atributos disponíveis que podem ser usados como amostra. Sempre que aplicável, esses atributos incluem a face de tipo.
.jpg)
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:
- 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.
- Selecione uma camada no painel Camadas.
- 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.
- Usando as ferramentas como a ferramenta Caneta e a ferramenta Retângulo, desenhe uma máscara para sua imagem.
- 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.
- Certifique-se de que Exibir > Mostrar guias estejam selecionados.
- 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.
- 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.
- Selecione três ou mais camadas.
- 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.
- Selecione duas ou mais camadas.
- 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
É possível aplicar transformações a uma única camada ou várias camadas. Para fazer uma transformação, primeiro selecione um item a ser transformado e depois escolha um comando de transformação. Ao modificar largura, altura ou outras propriedades numéricas de um objeto, você pode inserir operações matemáticas para obter valores precisos. Por exemplo, 500/3 ou 20*4.
- 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
- 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
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.
- In No painel Camadas, selecione uma ou mais camadas.
- 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.
- No painel Camadas, selecione uma ou mais camadas.
- 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.
- No painel Camadas, selecione a camada de texto.
- 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.
- No painel Camadas, selecione as camadas de texto que deseja combinar.
- 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
- No painel Camadas, selecione uma ou mais camadas.
- 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.
- Especifique o valor alfa para ajustar a opacidade da cor de preenchimento.
- No painel Camadas, selecione uma ou mais camadas.
- 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.
- Especifique o valor alfa para ajustar a opacidade da cor de traçado.
- Especifique o tamanho do traçado.
- Especifique o alinhamento do traçado como Interna, Centro ou Externa do menu suspenso.
- No painel Camadas, selecione uma ou mais camadas.
- No painel Efeitos, clique no ícone + para adicionar um traçado, uma sobreposição de cores, uma sombra projetada ou uma sombra interna.
- 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:
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).
- 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.
- Especifique a Escala, o Sufixo e o Formato para o ativo que você deseja exportar.
- Se necessário, clique no ícone + para especificar as configurações para mais ativos.
- Clique no ícone
para salvar os itens gerados em seu computador.
Observação:
Clique no ícone para adicionar rapidamente todos os tipos de ativos disponíveis relevantes para dispositivos iOS. Da mesma forma, clique no ícone
para adicionar rapidamente todos os tipos de ativos relevantes em telas HiDPI.
Observação:
Ao exportar vários objetos como ativos, para facilitar o uso, o Espaço de design segue a ordem dos objetos da tela em vez da ordem Z no painel Camadas. Você também pode especificar as configurações de exportação por meio de várias seleções de camada diferente e exportá-las de uma vez selecionando Arquivo > Exportar ou clicando no ícone Exportar na barra de títulos superior.
- 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.