For this purpose we have another round background layer. For a special look, we want it to be on a white background this time, round like a logo. As decided, it should be a PNG sized 48x48 pixels. Faviconįirst we want to create a favicon. Add another layer for a maskable icon - it also needs to be a square background (again in our case white) and here's the trick - yes, it's outside of your page! How do I find out how much free space is needed for the maskable icon? You can see the proportions in the screenshot, or you can test your result here and adjust, or you can test it directly in the browser - see the screenshots in the Icons 2022 Summary chapter of this article. Place a background layer of the same size - the background color depends on your logo, in our case it is white. Let's startĬreate a square page and place your logo with small margins, but not large margins, otherwise you will lose a lot of space for apple-touch-icon and favicon. I show an example with open source Inkscape. However, you can find some useful tips for your own workflow. This is a fairly individual workflow and this article is mainly for personal notes. This workflow was created to make it easy to export icons for multiple websites. There are a couple of IOS 7 App Icon Template for Photoshop available, but none for Inkscape. We here at Kodira are fond of Inkscape, a great vector graphics editor to edit SVG files.This is a supplementary article to The Complete Guide to Favicons and App Icons 2022. So we created our own SVG App Icon Template for iPad and iPhone 7 Apps. You can download the SVG template and the script here.ĭownload and extract the archive.įor easy export we wrote a small script to quickly render your App icon in all sizes you will need for iOS development. The layers GRID, MASK, and BORDER help you to design your icon. Add your artwork to the Foreground and Background layer. Once you are done with designing, disable the GRID, MASK and BORDER layers. There should be no guides visible and the mask (those round corners) should disappear. No worries, the icon will be masked by Apple automatically. Next, you run the resize.sh script to create PNG files of your App icon in various sizes. Execute resize.sh from within a Terminal. Resize.sh uses Inkscape in a headless mode to export the SVG to PNGs. If you don’t have Inkscape the script will not work. If you are on a Linux box you have to change the script a bit: you have to provide the right path to your Inkscape binary. Once the script is done you will see a bunch of PNG icons in various sizes in the same directory as your SVG file resides. The PNG files follow (more or less) Apple’s naming convention. For example, the AppIconTemplate-29.png is 29×29 pixels width/height, the is 58×58, and so forth. You should read Exploring iOS 7 Rounded Corners from Manfred Schwind. Manfred did a great job analysing the new iOS 7 App Icon. We updated the graphics used in our templates according his recommendations.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |