Drawing Icons - Xenon257R/blue-archive-rainmeter GitHub Wiki
If you want to draw adaptive icons, this step-by-step guide should help you do so. A vector-based software such as Inkscape or Adobe Illustrator is recommended, though other image editing software such as Adobe Photohop can work in a pinch.
Step 1: Drawing the Image
NOTE: If you don't want to bother with Adaptive Icons, you only need to do Step 1. At the end of this step, export the result as a .jpg and you're already done! Just make sure you are using an AppSimple template and not the App0 template.
- Get a reference of the icon you wish to draw and plan out how you will deconstruct it into (up to) 4 layers.
- Create a square canvas. All of the icons present in the suite uses a
200x200pxcanvas, but if you are using a vector-based software, any square canvas will work - you can scale it up and down in post as desired. - Draw your icon on the canvas. Draw it as you want it to appear as the final result, plus a shadow layer. Limit yourself to only 1 color per layer. If it helps, the "default values" for the layers top-to-bottom are as follows:
- Top layer:
#188ed5, no stroke - Second Layer:
#27cbfc, no stroke - Third Layer:
#a7f8ff, no stroke - Bottom Layer:
#ffffff, no stroke - Inner Border:
#2f506d, A combination of the top-to-bottom layers with a20pxStroke Border (10pxwill be visible) - Outer Border:
#ffffff, A combination of the top-to-bottom layers with a30pxStroke Border (5pxwill be visible) - Shadow: A combination of the top-to-bottom layers with a Gaussian Blur Filter
- Top layer:
:speech_balloon: I cannot provide any concrete guidelines on how to draw an icon as tools will differ from software to software. However, I can provide some tips that I think can apply no matter what software you use.
- Inkscape has a tool called "Trace Bitmap", which allows the user to feed it a reference image and it will do its best to trace over it. Photoshop may have a similar tool you can use.
- Remember, these layers are going to be stacked on top of each other. Don't think you have to "cut up" one image - take advantage of higher layers obfuscating parts of the lower layers to hide messy parts.
- While the final result will always assume 4+2+1 layers, you don't have to "use" all of them. For layers you do not use - say, the second layer - insert a fully blank layer during Step 2 so that nothing gets drawn for said layer.
- To draw the Inner/Outer Border layers, combine the primary 4 layers into one object, then give them a border stroke with the widths provided above. THIS METHOD WILL ONLY WORK IF YOUR PRIMARY LAYERS HAVE NO BORDERS/STROKE WIDTH OF ZERO.
Step 2: Splitting It Up
Once everything is drawn to your liking, split the layers horizontally side-by-side with no gaps inbetween each of them. The left will be the topmost layer and the right the bottommost, i.e. the shadow. It will help a lot to have a temporary square backdrop at the very bottom of the icon so you can perfectly arrange them flush to each other with no gap in between using vertex snapping in your software of choice. If you did it correctly, the final result should be a 1400x200px image, or any other 7:1 ratio depending on your square canvas dimensions as shown above. REMEMBER TO LEAVE GAPS FOR THE LAYERS YOU DID NOT UTILIZE.
Step 3: "Bleaching" Everything
images/tutorial/spritesheet.png
Once split appropriately, make everything white. The skin expects a colorless sprite to paint over with the suite's color themes.
If you feel creative, you can use shades of grey to gain finer control over colors. You can play with transparency levels too and even color mixing, but remember that these layers are stacked on top of each other - transparent upper layers will "blend" with its lower layers and may create undesirable colors and adding predetermined colors may have disastrous results with various color themes.
Once everything is done, export the final result as a .jpg (make sure the background is transparent and not white!), and you've got your ready-to-use icon.