Skip to content

Latest commit

 

History

History
56 lines (44 loc) · 3.44 KB

HOWTO_old.md

File metadata and controls

56 lines (44 loc) · 3.44 KB

Modify Source Files

The "source" files were created using Illustrator, linked copies are used whenever possible. Update and save the source file and then manually update the links in the dependent files.

After the links of all the .ai files have been updated, you must convert the files to SVG and PNG (using ai2SvgPng.js) and then create icons.

SVG & PNG Conversion

ai2SvgPng.js is used to convert the graphics from /ai/ to SVG and PNG. Any .ai files with the word "icon" or "circle" in their names are exempted. It does not attempt to perform additional compression.

ai2SvgPng.js requires illustrator and can be run by selecting:

File -> Scripts -> Other Scripts -> ai2SvgPng.js

You will be prompted for the project directory, which is the root directory for the Git repo (/namecoin-graphics/). The script requires the following directories to be present:

/ai/name.ai
/svg/
/png/1000/
/png/500/
/png/200/
/png/100/

Icons

Generating the icons requires several steps. Pull requests automating these steps are warmly welcomed.

  1. Export namecoin-icon.ai to ./namecoin.iconset/ (File->Export, format: png, "Use Artboards" option enabled). For some reason, one must rename some files to remove some trailing dashes -.
  2. namecoin.ico and namecoin.icns are created manually using the images from namecoin.iconset. Each OS has a different icon creation app, but Apple offers Icon Composer which can generate both.
  3. Favicons are generated by uploading namecoin-logo.svg to RealFaviconGenerator.net. See the following section for details.

##Favicons RealFaviconGenerator.net offers a lot of functionality that would be difficult to replicate by hand, including favicons for iOS, OS X, Android, and Windows Phone.

  1. Upload the /svg/namecoin-logo.svg and replace the /icons/favicons/ directory with the payload from RealFaviconGenerator.net.
  2. Overwrite /icons/favicons/favicon.ico by copying and renaming /icons/namecoin.ico.
  3. Overwrite favicon-16x16.png,favicon-24x24.png, and favicon-32x32.png with equivalent files from /icons/namecoin.iconset/.

You can use the favicons on a website by placing the following in the header:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">