Vou começar dizendo algo que muitos devem saber... mas não importa: HTML5 + CSS3 + JS... simplesmente perfeito
Um usuário me escreveu um e-mail perguntando sobre um tutorial para ele criar ícones planos, aqueles que são planos e essa é a nova moda na web. Desejado especificamente por Inkscape o galão um botão de estilo de bate-papo ou algo que serviria (ou referência) Snapchat.
Como sou péssimo com o Inkscape e também, criar conteúdo do zero mesmo com o Gimp cheira mal ... Lembrei-me que há um tempo atrás vi uma pequena aplicação web (um index.html com alguns css e js) que nos permitiu criar ícones planos com facilidade e rapidez na moda atual, você sabe, designs planos.
Gerador de ícone plano
Ele tem uma série de ícones predefinidos, por exemplo, ícone de laptop, dispositivos móveis (o que mostro na imagem), presente, bicicleta ... uff, eles são muitos, realmente uma grande variedade:
Mas não é só colocar o ícone e agora ... podemos definir o tamanho do ícone ou o tamanho da imagem como tal (ícone + fundo) por meio de duas barras horizontais. Obviamente, vemos o tamanho do quadrado em pixels ... 256 ... 512 ... etc
A próxima opção nos permite escolher a cor do fundo assim como a cor do ícone. Por padrão, o ícone é branco e o fundo é azul, de modo que não colide muito.
Por fim, naquela barra à esquerda das opções, permite definir se as bordas do ícone são quadradas ou se, por outro lado, queremos que o resultado final seja circular.
Deixo-vos uma captura de tela dessas opções:
Por outro lado, na parte superior nos mostra a informação do ícone que está sendo gerado e mudando em tempo real. Em outras palavras, se você brincar com os tamanhos e cores, verá que essa informação sempre muda em tempo real:
Como você pode ver, também temos um botão Obter ícone, que nos mostraria o ícone já gerado no PNG em outra aba, na qual podemos clicar com o botão direito + Salvar e pronto, teremos o ícone plano que geramos na pasta desejada em nosso computador.
Baixar Flat Icon Generator
Se você quiser experimentar (o que eu imagino que seja haha), aqui está o link:
Com isso espero atender ao que o usuário me pediu por e-mail, embora não seja um tutorial para criar o botão com Gimp ou Inkscape, bem, ainda imagino que servirá o que você deseja. Na verdade, você não pode simplesmente gerar o botão para o link de baixar snapchat, mas pode até gerar a grande maioria dos ícones ou botões para o seu site ou o que quer que você esteja fazendo
Saudações e espero que você tenha achado interessante.