O que são ativos de extração
O novo Extrair Ativos recurso do Photoshop CC 2014 straps um afterburner no fluxo de trabalho tedioso da criação de imagens para o Web Design Responsivo (RWD). Vamos dar uma olhada em como o comando Extrair Ativos pode reduzir rapidamente uma página da Web para os ativos prontos para montagem em alguns minutos.
Vamos começar com uma pergunta óbvia: O que são ativos de extração?
Em termos simples, o Extract Assets é um novo recurso do Photoshop que fornece ao recurso Gerador do Photoshop uma interface para ajudar a automatizar a criação de ativos de criação de imagens para design de web e tela a partir de seus arquivos do Photoshop. O comando Extrair Ativos permite definir a camada ou camadas para as quais você deseja criar ativos, seu tamanho físico, formato de arquivo e local salvo no disco. Esse recurso não é destinado a texto, a menos que a intenção seja transformar o texto em um bitmap, o que realmente não é uma boa ideia.
Vamos começar.
02 de 08Abra um arquivo .psd do Photoshop
O exemplo que estou usando contém um Objeto Inteligente do Illustrator, um texto, uma unidade heróica contendo texto, uma imagem e um botão e uma série de imagens externas que reforçam o tema do site. A chave aqui é organizar as camadas em grupos. Isso é necessário porque a tarefa é retirar todos esses itens da composição para que eles possam ser rapidamente adicionados a layouts da web que se adaptam a resoluções e tamanhos variados de tela.
Duas maneiras de extrair ativos
Ao contrário do Generate, que também extrai objetos através da adição de uma extensão gráfica ao nome da camada, Extrair Ativos usa uma interface que pode ser alcançada clicando com o botão direito uma camada ou selecionando uma camada e escolhendoArquivo> Extrair Ativos.
04 de 08A interface de extração de ativos
A caixa de diálogo Extrair Ativos é bastante intuitiva. Você é mostrado a camada ou seleção a ser extraída. Acima você é mostrado o tamanho dos arquivos e abaixo dele é o controle que permite ampliar e reduzir o objeto. O lado direito da caixa de diálogo é onde a mágica acontece. Os quatro botões na parte superior permitem que você selecione a resolução / tamanho do objeto. A próxima faixa mostra a camada selecionada e clicar no + sinal permite que você imprima a camada selecionada em outro formato também. o Lixo Ca n remove a camada da fila. Na próxima faixa abaixo, você pode escolher o tipo de arquivo e ajustar a largura e a altura da imagem de saída.
05 de 08Extraindo uma imagem SVG
O Photoshop não suporta imagens svg tão bem e navegadores e dispositivos não podem exibir uma imagem do Illustrator. Isso resultou no surgimento de arquivos svg sendo usados para ilustrações vetoriais, como o logotipo do Illustrator mostrado aqui. Sendo vetores, sua resolução é independente do dispositivo, o que significa que eles podem ser dimensionados sem perda de detalhes ou imagem. Para converter o Objeto Inteligente do Illustrator em svg, selecione svg a partir do pop-down e clique Extrair.
06 de 08O processo de extração de ativos
Algumas coisas acontecerão quando você clicar no botão Extrair. Você primeiro será avisado que o nome do arquivo pode mudar. Isso não é um grande problema. Então você será informado que uma nova pasta está sendo criada para manter o ativo. Quando o processo terminar, a pasta, colocada no mesmo local que o arquivo .psd original, será aberta e mostrará o novo recurso.
07 de 08O botão Configurações é seu novo melhor amigo
Clicando no Definições botão abre um Caixa de diálogo Configurações isso é seriamente útil. As configurações à esquerda são os fatores de escala. O que eles fazem é criar as várias cópias da imagem que um desenvolvedor usará nas consultas de mídia para direcionar a resolução de tela de um dispositivo específico. Por exemplo, a versão 3x seria direcionada para uma tela Retina do iPhone ou iPad, enquanto um fator de 1,25 seria apontado para um dispositivo Android. O sufixo é adicionado ao final do nome do arquivo para permitir que o desenvolvedor identifique facilmente a imagem a ser usada em uma consulta de mídia. Quando terminar, clique no Está bem botão e suas seleções se acenderão na área Extrair ativos na caixa de diálogo. Você também pode acessar a configuração clicando no ícone de roda dentada na área Extract Assets, no lado direito da interface
08 de 08Terminando
Quando você clicar no botão Extrair, todos os recursos serão criados e adicionados à pasta. Neste ponto, tudo o que você precisa fazer é enviar ao seu desenvolvedor uma cópia da pasta e passar para o próximo projeto.
