Online Flat Icon Generator: Enkel AppWeb som lager flate eller flate ikoner

Jeg begynner med å si noe som mange kanskje vet ... men det spiller ingen rolle: HTML5 + CSS3 + JS ... bare perfekt 🙂

En bruker skrev til meg en e-post med spørsmål om en veiledning for ham om å lage flate ikoner, de som er flate og som er den nye moten på nettet. Spesielt ønsket av Inkscape o Gimp en chat-stil knapp eller noe som vil tjene (eller referanse) Snapchat.

Da jeg er forferdelig med Inkscape og også, ved å lage innhold fra bunnen av selv med Gimp, stinker ... Jeg husket at jeg for en stund siden så et lite webapplikasjon (en index.html med noen css og js) som tillot oss å enkelt og raskt lage flate ikoner på den nåværende måten, vet du, flate design.

Flat ikongenerator

online-flat-ikon-generator

Den har en rekke forhåndsdefinerte ikoner, for eksempel bærbar ikon, mobile enheter (den jeg viser på skjermbildet), gave, sykkel ... uff, de er ganske mange, virkelig et stort utvalg:

online-flat-ikon-generator-ikoner

Men det handler ikke bare om å sette ikonet og nå ... vi kan definere størrelsen på ikonet eller størrelsen på bildet som sådan (ikon + bakgrunn) ved hjelp av to horisontale søyler. Tydeligvis ser vi kvadratstørrelsen i piksler ... 256 ... 512 ... osv

Det neste alternativet lar oss velge fargen på bakgrunnen så vel som fargen på ikonet. Som standard er ikonet hvitt og bakgrunnen blå, slik at det ikke kolliderer mye.

Til slutt, i den linjen til venstre for alternativene, lar den oss definere om ikonets grenser er firkantede, eller hvis vi derimot vil at det endelige resultatet skal være sirkulært.

Jeg gir deg et skjermbilde av disse alternativene:

online-flat-ikon-generator-alternativer

På den andre siden viser den oss informasjonen til ikonet som genereres og endres i sanntid, i øvre del. Det vil si at hvis du leker med størrelsene og fargene, vil du se at denne informasjonen alltid endres i sanntid:

online-flat-ikon-generator-topp

Som du ser har vi også en knapp Få ikon, som vil vise oss ikonet som allerede er generert i PNG i en annen fane, der vi kan høyreklikke + Lagre og det er det, vi vil ha flatikonet som vi genererer i ønsket mappe på datamaskinen vår.

Last ned Flat Icon Generator

Hvis du vil prøve det selv (som jeg forestiller meg så være haha), her er lenken:

Flat ikongenerator

Med dette håper jeg å overholde hva brukeren spurte meg via e-post, selv om det ikke er en veiledning for å lage knappen med Gimp eller Inkscape, vel, jeg forestiller meg fortsatt at den vil tjene det du vil. Faktisk kan du ikke bare generere knappen for lenken fra last ned snapchat, men det kan til og med generere de aller fleste ikoner eller knapper for nettstedet ditt, eller hva du gjør 😀

Hilsen og jeg håper du har funnet det interessant.


Legg igjen kommentaren

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

*

*

  1. Ansvarlig for dataene: Miguel Ángel Gatón
  2. Formålet med dataene: Kontroller SPAM, kommentaradministrasjon.
  3. Legitimering: Ditt samtykke
  4. Kommunikasjon av dataene: Dataene vil ikke bli kommunisert til tredjeparter bortsett fra ved juridisk forpliktelse.
  5. Datalagring: Database vert for Occentus Networks (EU)
  6. Rettigheter: Når som helst kan du begrense, gjenopprette og slette informasjonen din.

  1.   illukki sa

    Jeg forsto ikke hvordan jeg skulle bruke den pueden Kan du bare lage ikonalternativene som den gir?

  2.   Percaff_TI99 sa

    Det er veldig bra, jeg skriver lenken.
    Jeg bruker vanligvis IcoMoon-appen (https://icomoon.io/app/#/select) som også er ganske interessant og veldig komplett; selv om jeg ikke vet om det er akkurat det samme som innlegget refererer til.

    Hilsener.

  3.   mat1986 sa

    Jeg likte ideen om å tilpasse ikoner, jeg likte lenkene (din og brukeren Percaff_TI99). Jeg vil lagre dem i favorittene mine 😀

  4.   eliotime3000. sa

    Interessante forslag, selv om jeg allerede foretrekker å bruke Inkscape på grunn av hvor enkelt det er å lage flate ikoner (faktisk er det mer praktisk enn en annen vektorditor som jeg har brukt, selv om jeg ennå ikke har blitt vant til å lage mer avansert vektorgrafikk med den applikasjonen).

  5.   Ivan Garcia sa

    Veldig praktisk og enkel å bruke. Du kan også dekke disse behovene ved hjelp av Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio sa

      Takk for at du delte! at 🙂

  6.   Sergio sa

    Vær så interessant at det vil tjene for mange prosjekter. Jeg lurte på hvordan en webapplikasjon er, kan den porteres for Firefox OS? Å lage en webapp en direkte snarvei eller lignende for å bruke den? Unnskyld meg, jeg vet ikke hvorfor.

  7.   Ann sa

    Nå som vi er i julen, vil mange foreldre gi barna sine en smarttelefon for konger. Hva er en av de første tingene du vil gjøre med disse enhetene? Utvilsomt vil en av dem, om ikke den første, være å laste ned Snapchat, og en annen av dem vil være beskrivelsen av WhatsApp. Ettersom dette er gratis applikasjoner, har de fleste tenåringer dem på telefonene sine.

  8.   Sergio sa

    Jeg tror at en av årsakene til suksessen til applikasjoner av typen snapchat er i utgangspunktet at de er gratis, på den annen side er moten skapt for å sende bilder av nesten alt som gjøres gjennom dagen og til slutt fordi det handler om av en veldig brukervennlig app

  9.   Snapchat-verdenen sa

    Utmerket! Dette nettstedet har hjulpet meg mye i prosessen med å lage logoen for det nye nettstedet mitt på snapchat, sammenfallende med brukeren som laget spørringen. Jeg sender deg en klem fra Paraguay, siden er veldig bra 😉 Hilsen.