Ik zal beginnen met iets te zeggen dat velen misschien weten ... maar het maakt niet uit: HTML5 + CSS3 + JS ... gewoon perfect 🙂
Een gebruiker schreef me een e-mail waarin hij me vroeg naar een tutorial voor hem om platte pictogrammen te maken, die plat zijn en dat is de nieuwe mode op internet. Specifiek gezocht door Inkscape o Gimp een knop in chatstijl of iets dat zou dienen (of referentie) Snapchat.
Omdat ik verschrikkelijk ben met Inkscape en ook, het creëren van inhoud vanaf het begin, zelfs met Gimp stinkt ... Ik herinnerde me dat ik een tijdje geleden een kleine webtoepassing zag (een index.html met wat css en js) waarmee we gemakkelijk en snel platte iconen konden maken in de huidige mode, je weet wel, platte ontwerpen.
Platte pictogram generator
Het heeft een reeks vooraf gedefinieerde pictogrammen, bijvoorbeeld laptoppictogram, mobiele apparaten (degene die ik in de schermafbeelding laat zien), cadeau, fiets ... uff, ze zijn best veel, echt een grote variëteit:
Maar het is niet een kwestie van alleen het pictogram plaatsen en nu ... kunnen we de grootte van het pictogram of de grootte van de afbeelding als zodanig (pictogram + achtergrond) definiëren door middel van twee horizontale balken. Uiteraard zien we de vierkante grootte in pixels… 256… 512… enz
Met de volgende optie kunnen we zowel de kleur van de achtergrond als de kleur van het pictogram kiezen. Standaard is het pictogram wit en de achtergrond blauw, zodat het niet veel botst.
Ten slotte kunnen we in die balk aan de linkerkant van de opties bepalen of de randen van het pictogram vierkant zijn of dat we daarentegen willen dat het eindresultaat cirkelvormig is.
Ik laat een screenshot achter van deze opties:
Aan de andere kant toont het ons in het bovenste gedeelte de informatie van het pictogram dat in realtime wordt gegenereerd en gewijzigd. Met andere woorden, als je speelt met de maten en kleuren zul je zien dat deze informatie altijd in realtime verandert:
Zoals u kunt zien, hebben we ook een knop Pictogram ophalen, wat ons het pictogram zou laten zien dat al in PNG is gegenereerd op een ander tabblad, waarin we met de rechtermuisknop kunnen klikken + Opslaan en voila, we zullen het platte pictogram hebben dat we in de gewenste map op onze computer genereren.
Download Flat Icon Generator
Als je het zelf wilt proberen (wat ik me zo voorstel, haha), dan is hier de link:
Hiermee hoop ik te voldoen aan wat de gebruiker me per e-mail heeft gevraagd, hoewel het geen tutorial is om de knop met Gimp of Inkscape te maken, nou ja, ik kan me nog steeds voorstellen dat het zal dienen wat je wilt. In feite kun je niet zomaar de knop genereren voor de link van download snapchat, maar het kan zelfs de overgrote meerderheid van pictogrammen of knoppen voor uw site of wat u ook doet 😀 genereren
Groeten en ik hoop dat je het interessant hebt gevonden.
Ik begreep niet hoe ik het moest gebruiken. Pueden Kun je alleen de pictogramopties maken die het geeft?
Het is heel goed, ik schrijf de link.
Ik gebruik meestal de IcoMoon-app (https://icomoon.io/app/#/select) wat ook best interessant en zeer compleet is; hoewel ik niet weet of het precies hetzelfde is als waar het bericht naar verwijst.
Groeten.
Ik vond het idee om pictogrammen aan te passen leuk, ik vond de links leuk (die van jou en de gebruiker Percaff_TI99). Ik zal ze opslaan in mijn favorieten 😀
Interessante voorstellen, hoewel ik al liever Inkscape gebruik vanwege hoe gemakkelijk het is om platte pictogrammen te maken (in feite is het praktischer dan een andere vectoreditor die ik heb gebruikt, hoewel ik nog steeds niet gewend ben aan het maken van geavanceerdere vectorafbeeldingen met die applicatie).
Heel praktisch en makkelijk in gebruik. U kunt ook in deze behoeften voorzien met Font Awesome: http://fortawesome.github.io/Font-Awesome/
Bedankt voor het delen! dat 🙂
Doe zo interessant dat het voor veel projecten zal dienen. Ik vroeg me af hoe een webtoepassing is, kan deze worden geport voor firefox-os? Een webapp maken met een directe snelkoppeling of iets dergelijks om deze te gebruiken? Sorry, ik weet niet waarom ik het vraag.
Nu we met Kerstmis zijn, zullen veel ouders hun kinderen een smartphone voor koningen geven. Wat is een van de eerste dingen die u met deze apparaten gaat doen? Een van hen, zo niet de eerste, zal ongetwijfeld Snapchat downloaden en een andere zal de beschrijving van WhatsApp zijn. Omdat dit gratis applicaties zijn, hebben de meeste tieners ze op hun telefoon staan.
Ik denk dat een van de oorzaken van het succes van applicaties van het type snapchat in de eerste plaats is dat ze gratis zijn, aan de andere kant is de trend ontstaan om afbeeldingen te sturen van bijna alles wat er gedurende de dag wordt gedaan en tot slot omdat het gaat om een zeer eenvoudig te gebruiken app
Uitstekend! Deze website heeft me veel geholpen bij het maken van het logo voor mijn nieuwe site op snapchat, dat samenviel met de gebruiker die de zoekopdracht heeft gemaakt. Ik stuur je een knuffel vanuit Paraguay, de site is erg goed 😉 Groeten.