psd file, one for exporting the production icon and another for a staging / dev icon. To edit the master icon, edit this Smart Object. Basically, we’ve got two groups in Photoshop that both reference the same “Smart Object”. Smart ObjectsĪnother slightly advanced photoshop technique. If you want to get really advance you can create text files in your repo like this:ġ024x1024 master_icon.png 500x500 master_icon_500.png 200x200 master_icon_200.png 100x100 master_icon_100.pngĪnd paste them into your photoshop layers to get a variety of sizes. png file at the specified resolution every time the file is saved. Photoshop will automatically generate this. The idea is that by naming a layer or group like this: Photoshop includes a little known asset generating feature that I highly recommend. What’s going on in here… Photoshop Asset Generator If all goes according to plan, this script will quickly generate all the icons you need. “makeIcons”: “node iconGenerator/scripts/make_icons.js” ĭrop this folder into your React Native project in the root directory, run ‘npm install’ or ‘yarn’.Īdd this line to your package.json file to keep things nice and easy. When pushing these apps to beta testers it’s really great to provide unique icons to distinguish staging from production.Īfter much tedium and gnashing of teeth I’ve built what I think is a very slick icon generator using Photoshop and the Sharp JS image processing library. Our projects often have a staging/dev version and a production version generated from the same codebase.
Unfortunately, and as many of you know, the process of creating these icons is tedious and frustrating.
0 kommentar(er)
