Online Flat Icon Generator: Enkel AppWeb som skapar platta eller platta ikoner

Jag börjar med att säga något som kanske många vet... men det spelar ingen roll: HTML5 + CSS3 + JS... bara perfekt 🙂

En användare skrev ett mejl till mig och frågade mig om en handledning för att han ska kunna skapa platta ikoner, de som är platta och det är det nya modet på webben. Jag ville specifikt igenom Inkscape o gimp en knapp i chattstil eller något som tjänade (eller refererade till) en Snapchat.

Eftersom jag är usel med Inkscape och dessutom, att skapa innehåll från grunden även med Gimp, jag suger... ja, jag kom ihåg att jag för ett tag sedan såg en liten webbapplikation (en index.html med lite css och js) som gjorde det möjligt för oss att enkelt och snabbt skapa platta ikoner på det nuvarande modet, du vet, platta mönster.

Platt ikongenerator

online-flat-ikon-generator

Den har en serie fördefinierade ikoner, till exempel bärbar datorikon, mobila enheter (den jag visar på skärmdumpen), present, cykel... uff, det finns en hel del, verkligen en stor variation:

online-platt-ikon-generator-ikoner

Men det är inte en fråga om att bara sätta ikonen och det är allt... vi kan definiera storleken på ikonen eller storleken på bilden som sådan (ikon + bakgrund) med hjälp av två horisontella staplar. Uppenbarligen visas kvadratstorleken i pixlar... 256... 512... etc

Nästa alternativ låter oss välja bakgrundsfärgen såväl som ikonfärgen. Som standard är ikonen vit och bakgrunden blå, så det krockar inte mycket.

Slutligen, i den stapeln till vänster om alternativen, låter den oss definiera om kanterna på ikonen är fyrkantiga eller om vi å andra sidan vill att det slutliga resultatet ska vara cirkulärt.

Jag lämnar en skärmdump av dessa alternativ:

online-platt-ikon-generator-alternativ

Å andra sidan, överst visar den oss informationen om ikonen som genereras och ändras i realtid. Med andra ord, om du leker lite med storlekarna och färgerna kommer du att se att denna information alltid ändras i realtid:

online-platt-ikon-generator-topp

Som ni ser har vi även en knapp Få ikon, som skulle visa oss ikonen som redan genererats i PNG i en annan flik, där vi kan Högerklicka + Spara och det är det, vi kommer att ha den platta ikonen som vi genererade i den önskade mappen på vår dator.

Ladda ner Flat Icon Generator

Om ni vill prova själva (vilket jag inbillar mig är fallet haha), här är länken:

Platt ikongenerator

Med detta hoppas jag kunna följa vad användaren frågade mig via e-post, även om det inte är en handledning för att skapa knappen med Gimp eller Inkscape, ja, jag antar att detta fortfarande kommer att vara användbart för vad du vill ha. Faktum är att du inte bara kan skapa knappen för länken ladda ner snapchat, men det kan till och med generera de allra flesta av ikonerna eller knapparna för din webbplats, eller vad du än gör 😀

Hälsningar och jag hoppas att du tyckte det var intressant.


Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   illukki sade

    Jag förstod inte hur man använder den 🙁 Kan du bara göra ikonalternativen som den ger?

  2.   Percaff_TI99 sade

    Den är väldigt bra, jag noterade länken.
    Jag brukar använda IcoMoon App (https://icomoon.io/app/#/select) vilket också är ganska intressant och mycket komplett; även om jag inte vet om det är exakt samma som det inlägget syftar på.

    Hälsningar.

  3.   mat1986 sade

    Jag gillade idén med att anpassa ikoner, jag gillade länkarna (din och användarens Percaff_TI99). Jag kommer att spara dem i mina favoriter 😀

  4.   eliotime3000 sade

    Intressanta förslag, även om jag redan föredrar att använda Inkscape på grund av hur lätt det är att göra platta ikoner (det är faktiskt mer praktiskt än en annan vektorredigerare jag har använt, även om jag fortfarande inte är van vid att göra mer avancerad vektorgrafik med det Ansökan).

  5.   Ivan Garcia sade

    Mycket praktiskt och lätt att använda. Du kan också täcka dessa behov med Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio sade

      Tack för att du delar med dig! det 🙂

  6.   Sergio sade

    Wow, vad intressant. Det kommer säkert att fungera för många projekt. Jag undrade hur en webbapplikation ser ut, kan den portas till firefox OS? Skapa en webbapp en direkt genväg eller liknande för att använda den? Ursäkta mig, det är därför jag frågar.

  7.   Ana sade

    Nu när vi är på jul kommer många föräldrar att ge sina barn en smartphone för kungar. Vad är en av de första sakerna du kommer att göra med dessa enheter? Utan tvekan kommer en av dem, för att inte tala om den första, att ladda ner snapchat och en annan kommer att ladda ner whatsapp. Eftersom dessa är gratisapplikationer har de flesta ungdomar dem på sina mobiler.

  8.   Sergio sade

    Jag tror att en av orsakerna till framgången med applikationer av snapchat-typ är för det första att de är gratis, å andra sidan har modet att skicka bilder av nästan allt som görs under dagen skapats och slutligen eftersom det är en väldigt lättanvänd app

  9.   snapchat världen sade

    Excellent! Denna webbplats har hjälpt mig mycket i processen att skapa logotypen för min nya sida på snapchat, av en slump med användaren som ställde frågan till dig. Jag skickar en kram från Paraguay, sidan är väldigt bra 😉 Hälsningar.