Internetski generator ravnih ikona: Jednostavni AppWeb koji stvara ravne ili ravne ikone

Za početak ću reći nešto što mnogi možda znaju ... ali nema veze: HTML5 + CSS3 + JS ... jednostavno savršeno 🙂

Korisnik mi je napisao e-mail pitajući me o vodiču za njega kako bi stvorio ravne ikone, one ravne i to je nova moda na webu. Točno traži Inkscape o širit gumb u stilu chata ili nešto što bi služilo (ili referenca) Snapchat.

Kako sam užasan s Inkscapeom, a također stvaram sadržaj ispočetka čak i sa Gimpom bez veze ... Sjetio sam se da sam maloprije vidio malu web aplikaciju (indeks.html s nekoliko css-a i js-a) koji su nam omogućili da lako i brzo stvaramo ravne ikone u trenutnoj modi, znate, ravne dizajne.

Generator ravnih ikona

mrežni-stan-ikona-generator

Ima niz unaprijed definiranih ikona, na primjer ikona prijenosnog računala, mobilni uređaji (onaj koji prikazujem na snimku zaslona), poklon, bicikl ... uff, ima ih poprilično puno, zaista velika raznolikost:

online-flat-icon-generator-ikone

Ali nije pitanje samo stavljanja ikone i sada ... veličinu ikone ili veličinu slike kao takve (ikona + pozadina) možemo definirati pomoću dvije vodoravne crte. Očito vidimo kvadratnu veličinu u pikselima ... 256 ... 512 ... itd

Sljedeća opcija omogućuje nam odabir boje pozadine, kao i boje ikone. Prema zadanim postavkama ikona je bijela, a pozadina plava, tako da se ne sukobljava puno.

Konačno, u toj traci lijevo od opcija omogućuje nam da definiramo jesu li granice ikone četvrtaste ili, s druge strane, želimo da konačni rezultat bude kružan.

Ostavljam vam snimak zaslona ovih opcija:

mrežne opcije za generiranje generatora ikona

S druge strane, u gornjem dijelu prikazuje nam informacije o ikoni koja se generira i mijenja u stvarnom vremenu. Drugim riječima, ako se poigrate s veličinama i bojama, vidjet ćete da se ove informacije uvijek mijenjaju u stvarnom vremenu:

mrežni-stan-ikona-generator-vrh

Kao što vidite, imamo i gumb Preuzmi ikonu, koji bi nam pokazao ikonu koja je već generirana u PNG-u na drugoj kartici, u kojoj možemo kliknuti desnom tipkom + Spremi i to je to, imat ćemo ravnu ikonu koju generiramo u željenoj mapi na našem računalu.

Preuzmite Generator ravnih ikona

Ako želite sami isprobati (što pretpostavljam neka bude haha), evo poveznice:

Generator ravnih ikona

Ovim se nadam da ću udovoljiti onome što me korisnik pitao e-poštom, iako nije vodič za stvaranje gumba s Gimpom ili Inkscapeom, pa, i dalje mislim da će služiti onome što želite. U stvari, ne možete samo generirati gumb za vezu od preuzmi snapchat, ali čak bi mogao generirati veliku većinu ikona ili gumba za vašu web lokaciju ili što god već radite 😀

Pozdrav i nadam se da vam je bilo zanimljivo.


Ostavite svoj komentar

Vaša email adresa neće biti objavljen. Obavezna polja su označena s *

*

*

  1. Za podatke odgovoran: Miguel Ángel Gatón
  2. Svrha podataka: Kontrola neželjene pošte, upravljanje komentarima.
  3. Legitimacija: Vaš pristanak
  4. Komunikacija podataka: Podaci se neće dostavljati trećim stranama, osim po zakonskoj obvezi.
  5. Pohrana podataka: Baza podataka koju hostira Occentus Networks (EU)
  6. Prava: U bilo kojem trenutku možete ograničiti, oporaviti i izbrisati svoje podatke.

  1.   illukki dijo

    Nisam razumio kako se koristi pueden Možete li napraviti samo opcije ikona koje daje?

  2.   Percaff_TI99 dijo

    Vrlo je dobro, napišem link.
    Obično koristim IcoMoon App (https://icomoon.io/app/#/select) što je također prilično zanimljivo i vrlo cjelovito; iako ne znam je li to potpuno isto kao ono na što se post odnosi.

    Pozdrav.

  3.   mat1986 dijo

    Svidjela mi se ideja prilagodbe ikona, svidjele su mi se veze (vaša i korisnik Percaff_TI99). Spremit ću ih u svoje favorite 😀

  4.   eliotime3000 dijo

    Zanimljivi prijedlozi, iako već radije koristim Inkscape zbog lakoće izrade ravnih ikona (zapravo je praktičniji od drugog vektorskog uređivača koji sam koristio, premda se još nisam navikao izrađivati ​​napredniju vektorsku grafiku uz tu prijavu).

  5.   Ivan Garcia dijo

    Vrlo praktičan i lak za upotrebu. Te biste potrebe također mogli pokriti pomoću Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio dijo

      Hvala na dijeljenju! taj 🙂

  6.   Sergio dijo

    Budite zanimljivi, svakako da će poslužiti za mnoge projekte. Pitao sam se kakva je web aplikacija, može li se prenijeti za firefox os? Stvaranje webappa izravnim prečacem ili slično za njegovo korištenje? Oprostite, ne znam zašto pitam.

  7.   zbirka anegdota dijo

    Sad kad smo na Božiću, mnogi će roditelji svojoj djeci pokloniti pametni telefon za kraljeve. Što ćete učiniti s ovim uređajima? Bez sumnje, jedan od njih, ako ne i prvi, bit će preuzimanje snapchata, a drugi će biti opis whatsappa. Budući da su ovo besplatni programi, većina ih tinejdžera ima na svojim telefonima.

  8.   Sergio dijo

    Mislim da je jedan od uzroka uspjeha aplikacija tipa snapchat na prvom mjestu to što su besplatne, s druge strane stvorena je moda za slanje slika gotovo svega što se radi tijekom dana i konačno jer se radi o vrlo jednostavnoj aplikaciji

  9.   Snapchat svijet dijo

    Izvrsno! Ova web stranica mi je puno pomogla u procesu stvaranja logotipa za moju novu stranicu na snapchatu, podudarajući se s korisnikom koji je poslao upit. Šaljem vam zagrljaj iz Paragvaja, stranica je jako dobra 😉 Pozdrav.