Initial commit

README.md

@@ -0,0 +1,46 @@
+# The problem
+
+Designing glyph icons often requires us to make a compromise between pixel-precision and scalability. Pixel-perfect icons optimized for present day screens tend to come at the expense of visually balanced, future-proof vector shapes. Meanwhile, icon fonts and vector glyphs end up looking  like a mishmash of pixels in smaller sizes due to subpixel rendering.
+
+# The solution
+Glyfons is an icon set that attempts to address this problem by providing both retina-ready vector icons (SVG) as well as their pixel-optimized counterparts (PNG). It comes also with an Adobe Illustrator icon creation kit to make it easier for designers to create their own icons or tailor the existing ones to their needs.
+
+# The icons
+Currently the set comes with the following default icons:
+
+* Cabinet
+* Document
+* Envelope
+* Feather
+* Film
+* Heart
+* Home
+* Lab
+* List
+* Magnifier
+* Minus
+* Pencil
+* Plus
+* Ralph ([Thoughtbot](http://thoughtbot.com) mascot)
+* Trash
+
+New icons will be frequently added and contributions or requests are welcome.
+
+
+# The kit
+### Installing the template and the scripts
+- Drag the template file (glyfons.ait) into your Illustrator templates folder (usually in /Applications/Adobe Illustrator CS\<version\>/Cool Extras/\<language-folder\>/Templates).
+- Drag the *Glyfon Actions* folder into your Illustrator scripts folder (usually in /Applications/Adobe Illustrator CS<version>/Presets/\<language-folder\>/Scripts). Feel free to rename the new folder and the .jsx scripts or move them to the root level of the scripts directory. 
+Please note that you need to restart Illustrator after installing the script for it to load.
+
+
+### Recommended workflow
+- Create a new file using the provided template in *File* > *New from Template…*
+- For optimal results, you may want to change the RGB working space in Adobe Illustrator. In *Edit* > *Color Settings…* choose '*Monitor RGB*' in the RGB working space ([screenshot](http://drp.so/5e4890)).
+- Make sure that *Pixel Preview* is disabled in *View* > *Pixel preview*.
+- Start by designing the main glyph in the largest artboard.
+- Once you are done, save your work as a vector file in the location of your choice. 
+- Fill the smaller artboards by selecting the glyph (make sure it's a single compound path) then running the *Generate Smaller Sizes* in *File* > *Scripts* > *Glyfon Actions*. 
+- Turn on *Pixel Preview*.
+- Pixel-adjust the generated icons to your heart's content.
+- Once you are satsified with the outcome, run the *Export Icon Files* script. It will create a new folder with the name of the icon, export the main glyph as SVG and the smaller versions as PNG, then saves your current vector file.

kit/Glyfon Actions/Export Icon Files.jsx

@@ -0,0 +1,64 @@
+// Script by Reda Kaishin Lemeden
+// Tested on Illustrator CS5
+// March 2nd, 2012
+
+var docRef = app.activeDocument;
+
+// Grab the current icon filename (this includes full path)
+
+var originalName = docRef.fullName;
+var fileName = docRef.name;
+var num_artboards = docRef.artboards.length;
+
+// Locate the position of the final '.' before the filename extension. Your filenames should not start with s '.' for this script to work
+var finalDotPosition = fileName.lastIndexOf( "." ) ;
+
+// Remove the extension from the filename
+if ( finalDotPosition > -1 ) {
+  extensionLess = fileName.substr( 0 , finalDotPosition );
+}
+else {
+  extensionLess = false;
+}
+
+// Loop through the artboards
+if (extensionLess)  {
+
+  var destFolder = Folder.selectDialog( 'Select the parent folder where a new folder with the name of the icon will be created...');
+
+  if (destFolder) {
+    // Create the icon folder
+    var iconFolder = new Folder(destFolder + "/" + extensionLess);
+    iconFolder.create();
+
+    var destFile = new File(destFolder + "/" + extensionLess + "/" + extensionLess + ".pdf");
+
+    var pdfSaveOptions = new PDFSaveOptions();
+    pdfSaveOptions.viewAfterSaving = false;
+    pdfSaveOptions.artboardRange= "1";
+    pdfSaveOptions.preserveEditability = false;
+
+    docRef.saveAs(destFile, pdfSaveOptions);
+
+    for (var i = 1; i < num_artboards; i++ )
+    {
+      var destFile = new File(destFolder + "/" + extensionLess + "/" + extensionLess + "-" + docRef.artboards[i].name + ".png");
+      var options = new ExportOptionsPNG24();
+      options.artBoardClipping = true;
+      options.matte = false;
+
+      docRef.artboards.setActiveArtboardIndex(i);
+
+      docRef.exportFile (destFile, ExportType.PNG24, options);
+    }
+
+    // Save the file using the original fullName
+    docRef.saveAs( originalName );
+  }
+}
+
+else {
+  alert("You need to save your icon once and give it a name before running this script.");
+}
+
+

kit/Glyfon Actions/Generate Smaller Sizes.jsx

@@ -0,0 +1,29 @@
+// Script by Reda Kaishin Lemeden
+// Tested on Illustrator CS5
+// March 7th, 2012
+
+var docRef = app.activeDocument;
+
+// Get glyph
+var glyph = docRef.selection;
+
+// Disable pixel alignment to preserve shape
+glyph[0].pixelAligned = false;
+
+// Generate icons
+if (glyph.length == 1 & docRef.artboards.getActiveArtboardIndex() == 0)
+{
+    var mediumIcon = glyph[0].duplicate();
+    mediumIcon.resize (50.0,50.0);
+    mediumIcon.translate(51,-16);
+
+    var smallIcon = mediumIcon.duplicate();
+    smallIcon.resize (50.0,50.0);
+    smallIcon.translate(27,-8);
+}
+
+else
+{
+  alert("Select one vector object in the 'Glyph' artboard to generate the other icons...");
+}
+