├── Icons.png ├── LICENSE ├── README.md └── Watch Icon.sketchplugin └── Contents └── Sketch ├── Watch Icon.cocoascript └── manifest.json /Icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MaxChen/Watch-Icon/131c405f2e3ddaf34fe5ecb8084fae411233b1cc/Icons.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 MaxChen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Watch-Icon 2 | ![Banner](Icons.png) 3 | 4 | Plugin for Bohemian Coding Sketch app that automatically resizes artwork for Apple Watch icon. 5 | 6 | 7 | This project is based on [AEIconizer](https://github.com/tadija/AEIconizer) in ***Apple Watch*** icon size version. 8 | 9 | ## Installation 10 | 11 | 1. [Download the ZIP file of this repository](https://github.com/MaxChen/Watch-Icon/archive/master.zip) 12 | 2. Double click on `Watch Icon.sketchplugin` 13 | 14 | 15 | ## Icon sizes 16 | Here are the icon sizes for Watch apps. All values are in pixels and listed as the width followed by the height. 17 | 18 | | Icon Assets | 38mm | 42mm | 19 | |:------------|:----------|:--------| 20 | | **Notification Center icon** | 48px | 55px | 21 | | **Long-Look notification icon** | 80px | 88px | 22 | | **Home Screen icon** | 80px | 80px | 23 | | **Short-Look icon** | 172px | 196px | 24 | 25 | Here are the icon sizes for your app when it is displayed by Apple’s Watch app on iPhone 26 | 27 | | Icon Assets | 2x | 3x | 28 | |:------------|:----------|:--------| 29 | | **App icon** | 58px | 87px | 30 | 31 | -------------------------------------------------------------------------------- /Watch Icon.sketchplugin/Contents/Sketch/Watch Icon.cocoascript: -------------------------------------------------------------------------------- 1 | // Sketch Plugin: Watch Icon (ctrl shift command i) 2 | // Source: https://github.com/MaxChen/Watch-Icon 3 | // Version: 1.0 4 | 5 | // iOS icon sizes 6 | var iconSizes = [NSArray arrayWithObjects: 512, 98, 86, 44, 40, 29, 27.5, 24, nil]; 7 | 8 | // do stuff 9 | function onRun(context) { 10 | var doc = context.document; 11 | if (originalIcon = handleSelection(context)) { 12 | if ([[originalIcon frame] width] == [[originalIcon frame] height]) { 13 | [originalIcon setName: "Icon-Original"]; 14 | removeExistingIcons(context); 15 | iconize(originalIcon); 16 | [[doc currentView] centerLayersInCanvas]; 17 | } else { 18 | [doc showMessage:"Oops, icon artboard must have same width and height"]; 19 | } 20 | } 21 | } 22 | 23 | function handleSelection(context) { 24 | var selection = context.selection; 25 | var doc = context.document; 26 | var iconArtboard; 27 | 28 | if([selection count] == 0) { 29 | if ([[[doc currentPage] artboards] count] == 1) { 30 | iconArtboard = [[[doc currentPage] artboards] firstObject]; 31 | } else { 32 | [doc showMessage:"Oops, you have to select something"]; 33 | } 34 | } else { 35 | var currentSelection = selection[0]; 36 | if (currentSelection.className() == "MSArtboardGroup") { 37 | iconArtboard = currentSelection; 38 | } else { 39 | iconArtboard = [currentSelection parentArtboard]; 40 | if (!iconArtboard) { 41 | [doc showMessage:"Oops, selection has to be inside artboard"]; 42 | } 43 | } 44 | [currentSelection setIsSelected:false]; 45 | } 46 | 47 | return iconArtboard 48 | } 49 | 50 | function removeExistingIcons(context) { 51 | var doc = context.document; 52 | var artboards = [[doc currentPage] artboards]; 53 | var loop = [artboards objectEnumerator]; 54 | while (artboard = [loop nextObject]) { 55 | var name = [artboard name]; 56 | var artboardNames = [NSArray arrayWithObjects: "WatchIcon-24@2x", "WatchIcon-27.5@2x", "WatchIcon-29", "WatchIcon-29@2x", "WatchIcon-29@3x", "WatchIcon-40@2x", "WatchIcon-40", "WatchIcon-44@2x", "WatchIcon-86@2x", "WatchIcon-98@2x", "iTunesWatchArtwork-512", "iTunesWatchArtwork-512@2x" , nil]; 57 | if ([artboardNames containsObject: name]) { 58 | [[doc currentPage] removeLayer:artboard]; 59 | } 60 | } 61 | } 62 | 63 | function iconize(originalIcon) { 64 | var originalSize = [[originalIcon frame] width]; 65 | var originalX = [[originalIcon absoluteRect] rulerX]; 66 | var originalY = [[originalIcon absoluteRect] rulerY]; 67 | var spacing = 40; 68 | var iconsRowHeight = 0; 69 | 70 | var loop = [iconSizes objectEnumerator]; 71 | while (newSize = [loop nextObject]) { 72 | if (newSize >= 512) { 73 | var iconName = "iTunesWatchArtwork-" + newSize; 74 | 75 | var newX = originalX; 76 | var newY = originalY + originalSize + spacing; 77 | 78 | // iTunesWatchArtwork-512@2x 79 | var artwork2x = scaleIcon(originalIcon, (newSize * 2), iconName + "@2x"); 80 | [[artwork2x absoluteRect] setRulerX:newX]; 81 | [[artwork2x absoluteRect] setRulerY:newY]; 82 | 83 | // iTunesWatchArtwork-512 84 | var artwork1x = scaleIcon(originalIcon, newSize, iconName); 85 | [[artwork1x absoluteRect] setRulerX:newX + (newSize * 2) + spacing]; 86 | [[artwork1x absoluteRect] setRulerY:newY]; 87 | } else { 88 | var iconName = "WatchIcon-" + newSize; 89 | 90 | var newX = originalX + (1024 + 512 + (2 * spacing)); 91 | var newY = originalY + originalSize + iconsRowHeight + spacing; 92 | 93 | if (newSize == 29 || newSize == 40) { 94 | 95 | if (newSize == 29) { 96 | // Icon-Size@3x 97 | var icon3x = scaleIcon(originalIcon, newSize * 3, iconName + "@3x"); 98 | [[icon3x absoluteRect] setRulerX:newX - (newSize * 2) - spacing]; 99 | [[icon3x absoluteRect] setRulerY:newY]; 100 | } 101 | 102 | // Icon-Size 103 | var icon1x = scaleIcon(originalIcon, newSize, iconName); 104 | [[icon1x absoluteRect] setRulerX:newX + (newSize * 2) + (spacing * 2)]; 105 | [[icon1x absoluteRect] setRulerY:newY]; 106 | } 107 | 108 | // Icon-Size@2x 109 | var icon2x = scaleIcon(originalIcon, newSize * 2, iconName + "@2x"); 110 | [[icon2x absoluteRect] setRulerX:newX + spacing]; 111 | [[icon2x absoluteRect] setRulerY:newY]; 112 | 113 | // create new row 114 | iconsRowHeight += (newSize * 2) + spacing; 115 | } 116 | } 117 | } 118 | 119 | 120 | 121 | function scaleIcon(originalIcon, newSize, newName) { 122 | var newIcon = [originalIcon duplicate]; 123 | 124 | var originalSize = [[originalIcon frame] width]; 125 | var ratio = newSize / originalSize; 126 | [newIcon multiplyBy:ratio]; 127 | 128 | [newIcon setName: newName]; 129 | [newIcon select:true byExpandingSelection:true]; 130 | 131 | return newIcon; 132 | } 133 | -------------------------------------------------------------------------------- /Watch Icon.sketchplugin/Contents/Sketch/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Max Chen", 3 | "commands": [ 4 | { 5 | "script": "Watch Icon.cocoascript", 6 | "shortcut": "ctrl shift command i", 7 | "name": "Watch Icon", 8 | "identifier": "Watch Icon" 9 | } 10 | ], 11 | "menu": { 12 | "items": [ 13 | "Watch Icon" 14 | ] 15 | }, 16 | "identifier": "com.maxnesto.sketch.watch-icon", 17 | "version": "1.0", 18 | "description": "A plugin that automatically resizes artwork for Apple Watch icon.", 19 | "homepage": "https://github.com/MaxChen/Watch-Icon", 20 | "authorEmail": "max.nesto1992@gmail.com", 21 | "compatibleVersion": 3, 22 | "bundleVersion": 1, 23 | "name": "Watch Icon" 24 | } 25 | --------------------------------------------------------------------------------