I'll start by saying something that many may know ... but it doesn't matter: HTML5 + CSS3 + JS ... just perfect 🙂
A user wrote me an email asking me about a tutorial for him to create flat icons, those that are flat and that is the new fashion on the web. Specifically wanted by Inkscape o Gimp a chat-style button or something that would serve (or reference) Snapchat.
As I am terrible with Inkscape and also, creating content from scratch even with Gimp sucks ... because I remembered that a while ago I saw a small web application (an index.html with some css and js) that allowed us to easily and quickly create flat icons in today's fashion, you know, Flat designs.
Flat Icon Generator
It has a series of predefined icons, for example Laptop icon, mobile devices (the one I show in the screenshot), gift, bicycle ... uff, they are quite a lot, really a great variety:
But it is not a matter of just putting the icon and now ... we can define the size of the icon or the size of the image as such (icon + background) by means of two horizontal bars. Obviously we see the square size in pixels… 256… 512… etc
The next option allows us to choose the color of the background as well as the color of the icon. By default, the icon is white and the background is blue, so that it does not clash much.
Finally, in that bar to the left of options, it allows us to define if the icon's borders are square or if, on the other hand, we want the final result to be circular.
I leave you a screenshot of these options:
On the other hand, in the upper part it shows us the information of the icon that is being generated and changing in real time. That is, if you play around with the sizes and colors you will see that this information always changes in real time:
As you can see, we also have a button GetIcon, which would show us the icon already generated in PNG in another tab, in which we can Right Click + Save and that's it, we will have the flat icon that we generate in the desired folder on our computer.
Download Flat Icon Generator
If you want to try it yourself (which I imagine so be it haha), here is the link:
With this I hope to comply with what the user asked me by email, although it is not a tutorial to create the button with Gimp or Inkscape, well, I still imagine that it will serve what you want. In fact, you can't just generate the button for the link from download snapchat, but it could even generate the vast majority of icons or buttons for your site, or whatever you are doing 😀
Greetings and I hope you have found it interesting.
I did not understand how to use it pueden Can you only make the icon options that it gives?
It is very good, I write the link.
I usually use IcoMoon App (https://icomoon.io/app/#/select) which is also quite interesting and very complete; although I don't know if it is exactly the same as what the post refers to.
Greetings.
I liked the idea of customizing icons, I liked the links (yours and the user Percaff_TI99). I will save them in my favorites 😀
Interesting proposals, although I already prefer to use Inkscape because of how easy it is to make flat icons (in fact, it is more practical than another vector editor that I have used, although I have not yet gotten used to making more advanced vector graphics with that application).
Very practical and easy to use. You could also cover those needs using Font Awesome: http://fortawesome.github.io/Font-Awesome/
Thanks for sharing! that 🙂
Go that interesting of sure it will serve for many projects. I was wondering what a web application is like, can it be ported for firefox os? Creating a webapp a direct shortcut or similar to use it? Sorry, I don't know why I ask.
Now that we are at Christmas, many parents will give their children a smart phone for kings. What is one of the first things you will do with these devices? Undoubtedly, one of them, if not the first, will be to download Snapchat and another of them will be the description of WhatsApp. As these are free applications, most teenagers have them on their phones.
I think that one of the causes of the success of applications of the type of snapchat is in the first place that they are free, on the other hand the fashion has been created to send images of almost everything that is done throughout the day and finally because of a very easy to use app
Excellent! This website has helped me a lot in the process of creating the logo for my new site on snapchat, coinciding with the user who made the query. I send you a hug from Paraguay, the site is very good 😉 Greetings.