Blog Adobe Brasil | Tudo que um usuário de Photoshop precisa para começar no Adobe XD
Tudo que um usuário de Photoshop precisa para começar no Adobe XD
Se você é um usuário de Photoshop e ainda não experimentou o Adobe XD, agora é a hora para começar, já que a versão do XD deste mês fornece uma capacidade intuitiva e fácil de usar para conectar seus projetos de Photoshop e transformá-los em aplicativos interativos e protótipos para web. Sua interface intuitiva faz o trabalho em ambos os aplicativos com um poderoso e eficaz fluxo de trabalho, que também inclui opções para compartilhar seus projetos e coletar feedbacks rapidamente.
Com a ajuda do Evangelista Sênior da Creative Cloud, Paul Trani, nós estamos orgulhosos de apresentar alguns passos simples para inserir seus arquivos de Photoshop no Adobe XD e criar o melhor fluxo de trabalho multi-app. Veja o que você precisa saber para elevar seus trabalhos no Photoshop a outro nível.
Começando: Traga seus arquivos PSD para o Adobe XD
Faça o download do Adobe XD ou experimente a versão de teste
Comece um novo projeto e clique em Arquivo > Abrir. Localize seu arquivo PSD e clique em Abrir
O Adobe XD irá importar seu arquivo de Photoshop com alta fidelidade, trazendo automaticamente as camadas, efeitos, grupos e máscaras. Essa alta fidelidade de importação permite que você manipule o .PSD no Adobe XD e use-o para planos de fundo, ícones, etc. Aqui você tem uma lista para recursos suportados quando você abre um arquivo de Photoshop no XD.
Use as ferramentas do Adobe XD para desenhar seu aplicativo ou website. Troque para modo protótipo e, então, conecte as telas para criar um protótipo totalmente interativo.
Veja seus projetos de Photoshop ganharem vida, como um aplicativo totalmente interativo e protótipos para websites.
http://blogs.adobe.com/brasil/files/2018/03/PSDtoXD_3_1-converted-with-Clipchamp.mp4
"É tão simples quanto, basicamente, abrir o PSD diretamente no XD e começar. Quando você tiver seu projeto do Photoshop no XD, leve-o para o protótipo e junte algumas telas. A partir daí, todas as camadas serão camadas individuais, assim, tudo ficará agradável e organizado", afirma Trani.
Copie e Cole Seus Projetos de Photoshop no Adobe XD
Para um jeito ainda mais fácil de trazer seus projetos do Photoshop para o Adobe XD é, simplesmente, copiar e colar seu trabalho no aplicativo. O fluxo de trabalho "copia e cola" permite que você coloque todas as camadas individuais de uma imagem do Photoshop ou todo o seu trabalho como uma única imagem com todas as camadas juntas. Confira os passos para copiar e colar seus trabalhos de Photoshop no Adobe XD:
Use a Ferramenta de Seleção no Photoshop e selecione o conteúdo que você gostaria de copiar para o XD.
Clique em Editar > Copiar no Photoshop para copiar o conteúdo da camada atual ou selecione Editar > Cópia Mesclada para copiar todo o conteúdo de todas as camadas da área selecionada.Abra o Adobe XD e clique em Editar> Colar para colar a camada copiada ou todo o projeto no XD como um bitmap.
Abra o Adobe XD e clique em Editar> Colar para colar a camada copiada ou todo o projeto no XD como um bitmap.
Importe Seus Ativos do Photoshop para o Adobe XD Usando as Bibliotecas da Creative Cloud
Um dos modos mais fáceis para trabalhar com o Photoshop e Adobe XD é importar seus trabalhos de Photoshop para a Biblioteca da Creative Cloud. Use essa mesma biblioteca para acessar seus projetos no Adobe XD. Você não só pode reutilizar seus ativos do Photoshop no seu aplicativo ou nos protótipos de website no XD, como também pode editá-los no Photoshop e ter essas mudanças automaticamente atualizadas no Adobe XD. Veja os passos para importar seus ativos do Photoshop para sua Biblioteca Creative Cloud e acessá-los no Adobe XD:
Selecione o conteúdo que você gostaria de importar no Photoshop. Do lado direito da sua tela, embaixo de Bibliotecas, clique no botão +. Tenha certeza que o gráfico está selecionado antes de clicar em Adicionar.
No Adobe XD, clique em Arquivo > Abrir Bibliotecas CC. Clique e arrastes seu ativo de Photoshop para seu projeto Adobe XD.
Você agora está trabalhando com um ativo conectado. Quaisquer mudanças feitas nele no Photoshop irão refletir automaticamente no Adobe XD.
"A razão pela qual eu usaria as Bibliotecas da Creative Cloud é porque são um link. Assim, eu posso ir até minha biblioteca, clicar diretamente em "selecionar", editar no Photoshop para ajustar o plano de fundo, e, em seguida, eu posso voltar ao XD, depois de ajustá-lo. É uma conexão direta ao vivo. E, se você tem 15 artboards diferentes, isso simplifica muito a vida" diz, Trani.
Saiba mais sobre as Bibliotecas Creative Cloud no XD
Crie Rapidamente Experiências Multitela com seus Ativos Photoshop
Se você trabalha muito no Photoshop, você provavelmente gasta muito tempo fazendo pequenos ajustes em diversos elementos visuais. Quando você traz esses ativos para o Adobe XD, você é capaz de usar o poderoso recurso Repeat Grid para economizar tempo. Com o Repeat Grid, você, basicamente, cria um grupo de objetivos, que pode incluir seus projetos de Photoshop. Mudanças feitas em uma artboard serão, automaticamente, aplicadas a todas as outras.
"Quando se trata de criar um novo design, ter pequenos ícones ou botões, usando ferramentas como o Repeat Grid é realmente muito simples. Se eu tenho que ter uma tela com cinco diferentes itens e todos precisam ser iguais nas artboards, é muito tempo copiando e colando no Photoshop. No XD é muito fácil criar experiências consistentes entre muitas artboards usando seus ativos do Photoshop", conclui Trani.
Para um tutorial detalhado sobre como usar o Repeat Grid no Adobe XD, confira o nosso post no blog Explorando o Repeat Grid no Adobe XD, e depois experimente nos seus próprios projetos.
Tenha um Feedback Rápido dos Seus Projetos de Photoshop
Uma grande vantagem do usuário de Adobe XD para desenhar e criar protótipos interativos é a capacidade de facilmente compartilhar suas criações via links e ter um feedback. Isso também pode ser muito útil para garantir um feedback dos seus projetos no Photoshop.
Para começar a compartilhar um protótipo interativo, depois de você criar e conectar suas artboards, basta clicar no botão de compartilhar no canto direito superior do Adobe XD e depois em Publicar Protótipo. A partir daí, você pode clicar em Criar um Link Público para gerar uma URL que você pode compartilhar com os outros. Assim, qualquer pessoa com a qual você compartilhar o link pode comentar e destacar aspectos específicos de um trabalho.
"Se eu tenho esse link e quero dar um feedback sobre um trabalho de Photoshop, eu posso fixar comentários em determinadas partes, uma vez que o projeto de Photoshop está dentro do Adobe XD. O cliente pode dizer 'ei, deixe isso verde' e fixar esse comentário no lado esquerdo superior, onde eles querem que algo fique verde. Tudo isso está sendo rastreado e você pode resolver isso como designer; especialmente se esses recursos estiverem conectados, aí você pode facilmente abrir o Photoshop de volta e atualizar esse link mais tarde". diz Trani.
Isso também pode ser uma ótima ferramenta para trabalhar com desenvolvedores, à medida que eles podem acessar informações de dimensionamento de todos os elementos a partir de um link específico do trabalho publicado.
Há muitas vantagens em trabalhar no Photoshop e no Adobe XD. Usar as ferramentas em conjunto torna mais fácil a criação de projetos incríveis que se transformam em impressionantes e interativos protótipos de aplicativos web. Veja mais alguns recursos para te ajudar a começar a usar o Adobe XD:
Uma semana com Adobe XD: Tudo que Você Precisa para Desenhar um Aplicativo Mobile – Um guia fácil de entender, com vários dos nossos melhores tutoriais, com tudo que você precisa para colocar seus projetos de Photoshop para andar para começar a criar, prototipar e compartilhar agora.
Cinco UI Kits Grátis para Adobe XD criado pelos Melhores UX Designerss – Quando você estiver pronto para arrebentar nos projetos com novos UI kits, esses recursos, feitos pelos melhores UX Designers, te ajudarão a arrasar nas funcionalidades que você está procurando para seu aplicativo ou site.
Guia do Usuário Adobe XD
"Eu acho que o XD é muito fácil para qualquer usuário do Photoshop entender. As ferramentas são realmente simples. Se você conhece o Photoshop, você conhece o XD", afirma Paul Trani.
Kits de Ícones Grátis
Nós liberamos 3 kits de ícones exclusivos e gratuitos criados pelos famosos designers Anton & Irene, Büro Destruct e Lance Wyman. Leia no blog e faça o download dos kits de graça.