---
title: Extract for Brackets by Adobe
authors: Diego Eis
type: post
date: 2014-12-24
excerpt: Conheça o Extract, da Adobe. Esse serviço mostra, direto de um PSD, o código CSS dos elementos selecionados.
url: /extract-brackets-adobe/
categories:
  - Código
  - CSS
  - Editores
  - HTML

---
Eu sei que você deve ser um cara apaixonado pelo Sublime, eu também sou. Mas quando algo legal está sendo feito por outras pessoas, nós temos que considerar. O meu segundo editor preferido, o Brackets, tem e vai ter algumas features sensacionais. Uma dessas features você já deve conhecer que é o [PSD Lens][1], que ainda está em desenvolvimento. Mas outra feature que pode ser usada JÁ é o Extract for Brackets do serviço Creative Cloud da Adobe.

[<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2014/12/brackets-extract.jpg" alt="brackets-extract" width="1679" height="1025" class="alignnone size-full wp-image-46397" srcset="uploads/2014/12/brackets-extract.jpg 1679w, uploads/2014/12/brackets-extract-227x139.jpg 227w, uploads/2014/12/brackets-extract-400x244.jpg 400w" sizes="(max-width: 1679px) 100vw, 1679px" />][2]

Como a Adobe ainda ajuda a comunidade, ela consegue fazer coisas maravilhosas como o projeto [Creative Cloud Extract][3]. A ideia é: você sobe um PSD para o Extract, ele abre o PSD em uma interface direto do seu browser. Você clica nos elementos e o serviço te passa o código CSS… O código é bastante enxuto. Sou bastante contra coisas que fazem códigos front-end de forma automática, mas esse está indo no caminho certo e como é apenas código CSS e ele não escreve no seu projeto, você tem alto nível de controle. Ele ainda consegue extrair os assets de uma determinada Layer. Sensacional. Quer saber o mais legal? Você pode usar o serviço sem precisar do Brackets. Mesmo assim, tem que ter uma conta no Creative Cloud.

[<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2014/12/adobe-extract.jpg" alt="adobe-extract" width="1542" height="1095" class="alignnone size-full wp-image-46396" srcset="uploads/2014/12/adobe-extract.jpg 1542w, uploads/2014/12/adobe-extract-195x139.jpg 195w, uploads/2014/12/adobe-extract-400x284.jpg 400w" sizes="(max-width: 1542px) 100vw, 1542px" />][4]

Com o Extract a gente consegue explorar um PSD e ter as seguintes informações:

  * Copiar textos e CSS
  * Conseguir informações de a cor, gradientes e font
  * Medir distâncias entre os elementos
  * Salvar imagens otimizadas prontas para produção

Fiz alguns testes aqui e realmente é uma mão na roda, principalmente para tirar pequenas dúvidas sobre quanto é o valor do border-radius de um determinado elemento ou qual exatamente as dimensões de um botão.

Vale a pena conferir.

Leia mais:

  * [Página de Help da Adobe][5]
  * [Página oficial][3]

 [1]: https://creativeandcode.com/psd-lens-for-adobe-brackets/
 [2]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2014/12/brackets-extract.jpg
 [3]: https://www.adobe.com/br/creativecloud/extract.html
 [4]: https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2014/12/adobe-extract.jpg
 [5]: https://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html#extract_image_assets