junesiphone
patreon
How I create icon set previews
🕑 Added 2020-10-13 05:11:29 +0000 UTCA couple people have asked what tool do I use to make the previews for the icons sets.
Here is the example of the previews in question.
I looked for a tool (not very long) but nothing fit what I wanted.
The thing I wanted was simple and I figured I could make it faster then searching the entire internet. All I needed was something that displays icons in a grid (no matter how many icons) without me having to put the icons in a grid. Easy enough right.
I didn't want to upload them to a website or organize them in a design software. I wanted to have a folder with the icons and it just display the icons.
The simplest way to do this (for me) is just create an html to do it as css grid is fairly simple and adding perspective is too. So that's what I did. I could put this on a server but then i'd have to upload the icons to the server as well. Doing multiple icon sets as I plan this is not something I want.
I wanted the icons to be pulled from a folder so php was used to do this. To run php locally I would need to start a server locally to load the index.php. You can see in the image above it's running on localhost.
This is simple on my mac. All I have to do is start a server in that folder. This is how I would do this.
cd /DIRECTORY OF FOLDER
php -S localhost:9000
Then go to my browser and type in http://localhost:9000/ and it would display the html. I then just take a normal screenshot and I have the preview.
You can go one step further and make it even easier. That is just make a bash scrip that does all this stuff for you. This is how the script would look.
------
#!/bin/bash
open -a 'google chrome' http://localhost:9000
php -S localhost:9000
------
What this does is open google chrome to localhost and then start the php server. Doesn't do much here but makes it very easy to run this.
So all I have to do is replace the icons in the icon folder. Press cmd > shift > v to open current folder in terminal and I type ./nameofbashfile.sh
My browser opens and icons are displayed. Takes seconds to do compared to the other ways this can be achieved. Of course it took a little while to create the page to display this, but I only had to do it once and it will forever create these images. I can also just modify some css to get a totally different look.
This is how I setup the shortcut (cmd > shift> v) to open folders in terminal. I did this ages ago, but it's still the same in 2020.
https://www.howtogeek.com/210147/how-to-open-terminal-in-the-current-os-x-finder-location/
The script I created is linked below, feel free to use it and if you have issues let me know below.
Thanks.
Comments
VitAnyaNaked
Excellent! Thanks for these detailed clarifications. It's great that you yourself were able to create what you wanted ...
