Skip to content

Home

Jump to bottom
Christopher Downer edited this page May 27, 2018 · 4 revisions

Below is a guide to creating icons for this project that maintains a consistency which can be used by anyone who wants to contribute to the project.

The software used in this guide is Sketch for Mac.

You can find the template here which you can use as a starting point.

main

You will need some experience and understanding of design, or Sketch to be able to make these I'm afraid.

Creating your icons

There are four variants of each coin, but it doesn't take any time at all to create them all once you have your first one done. I always start with the color variant.

If you want to add an icon for your coin, you need to have a vector version of your logo. If you can’t find an SVG version of it online, then you'll need to draw it. Bitmap verisons won't work because you cannot create the transparency required for all variants, nor will you be able to export it as an SVG properly.

Here's rough steps that I do to create each icon:

  • Start with the color variant, import the logo I want to use in Sketch
  • Copy and paste that logo into the document with the icons
  • Determine the main color of the logo and then apply that to the circle background. (I'll select the circle and press Control-C to bring up the color picker)
  • Next I'll select the logo/glyph and press Scale in the toolbar. I'll make either its height or its width 20px and press confirm
  • Cut-and-paste the logo into the middle of the colored circle
  • I may adjust its position a little better to optically centre it rather than mathematically. For some logos, I may need to choose Scale again and make it 18px at its largest side, or even 22px if it is a circle

Next, I'll move on to the Black and White icons

  • I'll take the 'finished' Color icon and duplicate it
  • Then select both the cirlcle and the logo then press Subtract in the toolbar
  • Depending on how complex the logo is, I might need to tweak it somewhat in the Layer List by changing the order and operations of some sub-paths
  • Change the color of the icon to Black
  • I'll then copy-paste this into the next Artboard and make it white

Finally for the icon variant

  • I'll duplicate the Color icon, and then select the oval layer and do the following:
  • Hold the Command key and press the up arrow twice
  • Then nudge the layer to the right by pressing the right arrow key (not holding Command)
  • Apply the layer styling to the layer by selecting the oval icon above, by selecting the oval layer and pressing Option-Command-C to copy the style
  • Select the oval layer I want to apply it to, and press Option-Command-V to paste the style
  • Still with the layer selected, press Command-C to pick the color used on the Color version to apply it underneath the gradient
  • Finally, I'll nudge the logo up 1px by pressing the up arrow to re-center it, and then apply the "Shadow" layer style to it.

That's the first part over.

Exporting

To export the icons, you need to first make sure the Artboards are correctly named. Say we're making a Bitcoin icon, the four Artboards should be called icon/btc, color/btc, black/btc, and white/btc respectively.

I'll use CoinMarketCap as a reference for all ticker codes.

If I'm making a lot of icons in one go, I'll use this Rename-it plugin for Sketch which allows you do Find and Replace on mutilpe selections.

All four icons should have the following Export presets applied. This means you can export the multiple sizes that are in this project in one go.

main

Just copy the same in the Preferences, and then you can apply them in the bottom right of the Inspector.

main

Once done, that's it. You're ready to export. You don't need to create any extra folders because that'll happen automatically due to the / in the Artboard name.

Addtionally, you can compress the images or optimise the SVGs with ImageOptim or SVGO.

Committing

Once you've exported all the icons to the right folders on the repo, you need to update the manifest.json with the ticker code of your coins added, and also add the ticker and coin name to Coin List.md.

Submit your PR and I'll review it before I add. It does sound like a lot but I'll need to ensure there's consistency with existing icons to make it look like it was all made by the same person.

Here's a couple of reasons why I may have rejected PR's in the past (sorry!):

  • Not all variants or sizes included
  • Glyph is too large
  • Glyph is not white
  • Multiple colors used
  • Manifest not updated

That's it! It might sound like a lot, but I've created over 300 icons this way. There's just too many coins so I appreciate the help in keeping this project alive!

Clone this wiki locally