Libre Designers - Do inkscape ao front-end - Introdução e exportando assets

Arquivos

final.zip

Neste vídeo foi utilizada a música Backup Plan do artista Zane Little sob a licença Domínio Público.

Segue uma visão geral do vídeo:

Introdução

Esta é uma série que eu esperava ter começado a um tempo atrás. Do inkscape ao front-end é a tentativa de mostrar o meu processo de converter interfaces desenhadas no inkscape em código front-end.

Você vai perceber que neste processo não existe mágica. Vamos seguir o seguinte roteiro (posso alterar dependendo da necessidade):

1. Inkscape - Introdução e Exportando Assets

2. Vim - Minha configuração atual, Bracey (livereload), Emmet. Aquecimento e Explorando o Vim.

3. HTML 5 - Visão Geral

4. HTML5 - Traduzindo camadas - Home

5. HTML5 - Traduzindo camadas - Single

6. CSS3 - Introdução

7. CSS3 - Estilizando página - Home

8. CSS3 - Estilizando página - Single

9. JavaScript - Introdução

10. JavaScript - Sistema de Categorias

11. JavaScript - Scroll Infinito

Importante notar que esta série não é um curso sobre Desenvolvimento Front-end. Iremos usar os recursos necessários para converter uma interface específica desenhada no Inkscape em código front-end. Esta série apenas arranha a superfície do desenvolvimento front-end, mas acredito que irá ajudar quem estiver interessado neste tema.

Exportando Assets

Veja o design da página abaixo com as 3 marcações.

Página home com pontos em destaque. Ponto 1 - ícone em svg, ponto 2 - card, ponto 3 - card maior.

Iremos exportar os mochileiros em svg. Também precisaremos das versões dos cards extendidos.

SVG

o ícone em SVG é um sticker que eu desenhei a um tempo atrás. Como se trata de um svg o seu tamanho é independente da escala. Já deixei ele separado no arquivo do projeto.