Gerador de ícones planos online: AppWeb simples que cria ícones planos ou planos

Vou começar dizendo algo que muitos podem 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

gerador de ícone plano online

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:

on-line-flat-icon-generator-icons

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:

opções de gerador de ícone plano online

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:

on-line-flat-icon-generator-top

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:

Gerador de ícone plano

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.


Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios são marcados com *

*

*

  1. Responsável pelos dados: Miguel Ángel Gatón
  2. Finalidade dos dados: Controle de SPAM, gerenciamento de comentários.
  3. Legitimação: Seu consentimento
  4. Comunicação de dados: Os dados não serão comunicados a terceiros, exceto por obrigação legal.
  5. Armazenamento de dados: banco de dados hospedado pela Occentus Networks (UE)
  6. Direitos: A qualquer momento você pode limitar, recuperar e excluir suas informações.

  1.   Illukki dito

    Não entendi como usá-lo 🙁 Você pode fazer apenas as opções de ícone que ele oferece?

  2.   Percaff_TI99 dito

    É muito bom, eu escrevo o link.
    Eu costumo usar o aplicativo IcoMoon (https://icomoon.io/app/#/select) que também é bastante interessante e muito completo; embora não saiba se é exatamente igual ao que o post se refere.

    Saudações.

  3.   mat1986 dito

    Gostei da ideia de customizar os ícones, gostei dos links (seus e do usuário Percaff_TI99). Vou salvá-los nos meus favoritos 😀

  4.   eliotime3000 dito

    Propostas interessantes, embora eu já prefira usar o Inkscape por causa da facilidade de fazer ícones planos (na verdade, é mais prático do que outro editor de vetor que usei, embora ainda não tenha me acostumado a fazer gráficos vetoriais mais avançados com esse aplicativo).

  5.   Ivan Garcia dito

    Muito prático e fácil de usar. Você também pode atender a essas necessidades usando Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio dito

      Obrigado por compartilhar! que 🙂

  6.   Sergio dito

    Vá tão interessante com certeza servirá para muitos projetos. Eu queria saber como é um aplicativo da web, ele pode ser portado para o sistema operacional firefox? Criando um webapp um atalho direto ou similar para usá-lo? Desculpe, não sei por que pergunto.

  7.   Ana dito

    Agora que estamos no Natal, muitos pais vão dar aos seus filhos um smartphone para reis. Qual é uma das primeiras coisas que você fará com esses dispositivos? Sem dúvida, um deles, senão o primeiro, será o download do Snapchat e o outro será a descrição do WhatsApp. Como esses aplicativos são gratuitos, a maioria dos adolescentes os tem em seus telefones.

  8.   Sergio dito

    Acho que uma das causas do sucesso das aplicações do tipo snapchat é em primeiro lugar que são gratuitas, por outro lado a moda foi criada para enviar imagens de quase tudo que se faz ao longo do dia e enfim porque se trata de de um aplicativo muito fácil de usar

  9.   mundo do snapchat dito

    Excelente! Este site me ajudou muito no processo de criação do logotipo do meu novo site no snapchat, coincidindo com o usuário que fez a consulta. Eu te envio um abraço do Paraguai, o site é muito bom 😉 Saudações.