Generator płaskich ikon online: Prosty AppWeb, który tworzy płaskie lub płaskie ikony

Zacznę od tego, co wielu może wiedzieć ... ale to nie ma znaczenia: HTML5 + CSS3 + JS ... po prostu idealne 🙂

Pewien użytkownik napisał do mnie e-mail z pytaniem o tutorial dla niego, jak tworzyć płaskie ikony, takie, które są płaskie i to jest nowa moda w sieci. Szczególnie poszukiwany przez Inkscape o żyłka przycisk w stylu czatu lub coś, co mogłoby służyć (lub odwołać się) Snapchat.

Ponieważ jestem okropny z Inkscape, a także tworzenie treści od zera, nawet z Gimpem śmierdzi ... Przypomniałem sobie, że jakiś czas temu widziałem małą aplikację internetową (index.html z pewnymi plikami css i js), co pozwoliło nam łatwo i szybko stworzyć płaskie ikony w obecnym stylu, wiesz, Płaskie projekty.

Płaski generator ikon

generator-płaskich-ikon-online

Ma szereg predefiniowanych ikon, na przykład ikona laptopa, urządzenia mobilne (to, które pokazuję na zrzucie ekranu), prezent, rower ... uff, jest ich całkiem sporo, naprawdę duża różnorodność:

ikony-generatora-płaskiego-online

Ale nie chodzi tylko o umieszczenie ikony i teraz ... możemy określić rozmiar ikony lub rozmiar samego obrazu (ikona + tło) za pomocą dwóch poziomych pasków. Oczywiście widzimy rozmiar kwadratu w pikselach… 256… 512… itd

Poniższa opcja pozwala nam wybrać kolor tła, a także kolor ikony. Domyślnie ikona jest biała, a tło niebieskie, więc nie koliduje zbytnio.

Wreszcie na tym pasku po lewej stronie opcji pozwala nam określić, czy krawędzie ikony są kwadratowe, czy z drugiej strony chcemy, aby końcowy wynik był okrągły.

Zostawiam Ci zrzut ekranu z tymi opcjami:

opcje-generatora-płaskiej-ikony-online

Z drugiej strony w górnej części pokazuje nam informacje o ikonie, która jest generowana i zmieniana w czasie rzeczywistym. Oznacza to, że jeśli będziesz bawić się rozmiarami i kolorami, zobaczysz, że te informacje zawsze zmieniają się w czasie rzeczywistym:

top-ikona-generatora-płaskich-ikon-online

Jak widać, mamy też przycisk Pobierz ikonę, który pokazałby nam ikonę już wygenerowaną w PNG w innej zakładce, w której możemy kliknąć prawym przyciskiem myszy + Zapisz i voila, będziemy mieli płaską ikonę, którą wygenerujemy w wybranym folderze na naszym komputerze.

Pobierz Flat Icon Generator

Jeśli chcesz spróbować samemu (co sobie wyobrażam haha), oto link:

Płaski generator ikon

Mam nadzieję, że dzięki temu spełnię to, co użytkownik poprosił mnie w e-mailu, chociaż tworzenie przycisku za pomocą Gimp lub Inkscape nie jest samouczkiem, cóż, nadal wyobrażam sobie, że będzie służył temu, co chcesz. W rzeczywistości nie możesz po prostu wygenerować przycisku dla linku z pobierz snapchat, ale może nawet wygenerować zdecydowaną większość ikon lub przycisków dla Twojej witryny lub cokolwiek robisz 😀

Pozdrawiam i mam nadzieję, że uznacie to za interesujące.


Zostaw swój komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*

*

  1. Odpowiedzialny za dane: Miguel Ángel Gatón
  2. Cel danych: kontrola spamu, zarządzanie komentarzami.
  3. Legitymacja: Twoja zgoda
  4. Przekazywanie danych: Dane nie będą przekazywane stronom trzecim, z wyjątkiem obowiązku prawnego.
  5. Przechowywanie danych: baza danych hostowana przez Occentus Networks (UE)
  6. Prawa: w dowolnym momencie możesz ograniczyć, odzyskać i usunąć swoje dane.

  1.   Illuki powiedział

    Nie rozumiem, jak go używać 🙁 Czy możesz ustawić tylko opcje ikon, które daje?

  2.   Percaff_TI99 powiedział

    Jest bardzo dobrze, piszę link.
    Zwykle używam aplikacji IcoMoon (https://icomoon.io/app/#/select), który jest również dość interesujący i bardzo kompletny; chociaż nie wiem, czy to dokładnie to samo, do czego odnosi się post.

    Pozdrowienia.

  3.   mat1986 powiedział

    Podobał mi się pomysł dostosowywania ikon, podobały mi się linki (Twoje i użytkownik Percaff_TI99). Zapiszę je w moich ulubionych 😀

  4.   Eliotime3000 powiedział

    Ciekawe propozycje, chociaż już wolę korzystać z Inkscape ze względu na to, jak łatwo jest tworzyć płaskie ikony (w rzeczywistości jest to bardziej praktyczne niż inny edytor wektorowy, z którego korzystałem, chociaż jeszcze nie przyzwyczaiłem się do tworzenia bardziej zaawansowanej grafiki wektorowej za pomocą tej aplikacji).

  5.   Ivan Garcia powiedział

    Bardzo praktyczny i łatwy w użyciu. Możesz również zaspokoić te potrzeby za pomocą Font Awesome: http://fortawesome.github.io/Font-Awesome/

    1.    Sergio powiedział

      Dzięki za udostępnienie! że 🙂

  6.   Sergio powiedział

    Idź tak interesująco, na pewno posłuży do wielu projektów. Zastanawiałem się, jak wygląda aplikacja internetowa, czy można ją przeportować na system operacyjny Firefox? Tworzenie aplikacji internetowej bezpośredniego skrótu lub czegoś podobnego, aby z niej korzystać? Przepraszam, nie wiem dlaczego.

  7.   Ana powiedział

    Teraz, gdy mamy Boże Narodzenie, wielu rodziców podaruje swoim dzieciom smartfony dla królów. Jaka jest jedna z pierwszych rzeczy, które zrobisz z tymi urządzeniami? Niewątpliwie jednym z nich, jeśli nie pierwszym, będzie pobranie Snapchata, a kolejnym będzie opis WhatsApp. Ponieważ są to darmowe aplikacje, większość nastolatków ma je na swoich telefonach.

  8.   Sergio powiedział

    Myślę, że jedną z przyczyn sukcesu aplikacji typu snapchat jest przede wszystkim to, że są one darmowe, z drugiej strony moda została stworzona na przesyłanie zdjęć prawie wszystkiego, co się robi w ciągu dnia i wreszcie dlatego, że chodzi o bardzo łatwej w użyciu aplikacji

  9.   Świat Snapchata powiedział

    Świetny! Ta strona bardzo mi pomogła w procesie tworzenia logo dla mojej nowej strony na Snapchacie, zbiegając się z użytkownikiem, który złożył zapytanie. Przesyłam uścisk z Paragwaju, strona jest bardzo dobra 😉 Pozdrawiam.