We have a team of developers of mobile devices. In such team there are designer and programmer. At the beginning, each of them is busy with their work – a programmer develops a prototype, mechanics, and a designer makes the draft keys, backgrounds. But there is a situation when a designer has to pass his work in order to see it in the application already. And there can be difficulties.
Let’s look at an example of one menu screen. There can be 30-40 elements of graphics in it. These are keys (static, pressed), an animated logo from 10 objects, pop-up menu, animation on background. More often designer passes each file separately, and then a programmer composes it in a new way. Thus, it turns into a constructor which is folded and decomposed several times. Then the design can be changed and everything has to be repeated again.
How maximally to automatize this process ?
Here are some steps that we use in order to make the designer pass the most convenient set of the files to the programmer without losing files quality.
- output file in AI in maximal expansion (2048*1536px in my case) with the draft variant of design
- decompose and group all the objects by layers
- name them correctly (buttons – Btn, icons – Icon, lining – Underlay …)
- make all the elements of multiple size of 2px width and height
- place all the elements by XY, multiple size of 2px
- export XY-coordinates of each layer, its name and position on the sheet of a file in the format of PLIST. Script
- export each layer into a separate PNG24 file in a double size. Arcticmill
- make an atlas out of these files of the size 4096*4096 ( or less than, but necessarily a square) by using Zwoptex or Texture Packer. Necessarily put a 2 px space between the pictures
- avoid problems with transparency, that happens if you omit using the multipleness of 2px in the vector file. Fortunately, there is an action for Photoshop AlphaUnity
- reduce atlas 2 times
- convert the file into PNG8
Thus, a programmer will get a text file from me with the names of the pictures, their coordinates, position on a sheet, PLIST or XML with coordinates and turns, atlas of pictures in optimum quality and preview. It happened that nor the designer or the programmer wants to do this routine, though, a very necessary procedure.
Such algorithm of actions will be hard and long only for the first time, but then it will simplify the life of all participants of the project.
Category:All, Blog