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.

Introdução

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.

Alternar para Espaço de design (visualização)

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.

AtIvar o Espaço de design do Photoshop
Escolha a área de trabalho Espaço de design (visualização)

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.

Primeiras impressões do Espaço de design (visualização)

Interface do usuário do Espaço de design do Photoshop
Espaço de design (visualização) Interface do usuário

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.

Painéis do Espaço de design do Photoshop
Um olhar mais detalhado sobre a funcionalidade disponível

Ajustar a interface

  • 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.
Modo de uma única coluna na janela do Photoshop
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.

Criar um documento

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:
Modelos disponíveis do Photoshop

Adicione uma prancheta em um arquivo do Espaço de design (visualização)

  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.
  1. Adicione seus elementos de design à nova prancheta.

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.

Ferramentas

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

Ferramentas do Espaço de design do Photoshop
Ferramentas

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.

Texto

Cria uma camada de texto.

Caneta

Funciona de forma semelhante à ferramenta Caneta no 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:

  1. Selecione o objeto para o qual você deseja copiar um atributo. Por exemplo, selecione um retângulo.
  2. Selecione a ferramenta Classificador.
  3. 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.

Copie um atributo do Photoshop
Clique no atributo que você deseja copiar

Pesquisar documentos, comandos e muito mais

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.
Funcionalidade da pesquisa do Photoshop
Funcionalidade detalhada da pesquisa

Pesquisa filtrada do Photoshop
Pesquisa filtrada; neste exemplo, estamos procurando dentro das bibliotecas da Creative Cloud

Criar rapidamente máscaras de vetor para camadas

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.

Gerenciar e organizar objetos

Criar guias

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.

Distribuir objetos

  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.

Alinhar objetos

  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

Transformar objetos

É 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.

Girar

  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
  1. 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.
Girar um objeto no Photoshop
Girar um objeto na tela

Virar

  • 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

Alterar a aparência de objetos

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

Opacidade

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.

Modo de mesclagem

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.

Texto

  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:
  • 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.

Vetorial

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

Preencher

  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.
  1. Especifique o valor alfa para ajustar a opacidade da cor de preenchimento.

Traçado

  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.
  1. Especifique o valor alfa para ajustar a opacidade da cor de traçado.
  2. Especifique o tamanho do traçado.
  3. Especifique o alinhamento do traçado como Interna, Centro ou Externa do menu suspenso.

Aplicar efeitos de camada

  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.

Traçado

Adiciona um efeito de traçado à camada selecionada.

Sobreposição de cores

Preenche o conteúdo da camada com uma cor.

Sombra Projetada

Adiciona uma sombra que se projeta por trás do conteúdo da camada.

Sombra Interna

Adiciona uma sombra que se projeta apenas no interior das arestas do conteúdo da camada, dando-lhe uma aparência de baixo-relevo.

  1. 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.

Integração das Bibliotecas da Creative Cloud

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:

Exportar ativos

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.

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.

Principais problemas conhecidos nesta versão

  • 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.  

Dicas e truques

  • 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.
Menu de contexto para alterar a cor do fundo do Photoshop
Alterar a cor de fundo da área de trabalho

  • 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online