I was recently commissioned by Web Designer magazine here in the UK to produce a two part tutorial to create and prepare an interface in Photoshop ready for Flash Catalyst.
I expected the design to port straight across from Photoshop without any problems but there are a couple of design features that didn’t make it across. I thought it would be a good idea to share with you what they are so you can get up to speed quickly. Once you are familiar with the workflow everything is very smooth.
The main problem I had was with text that that had layer styles. Keeping the text as ‘editable’ caused Catalyst to lose any layer styling. Flattening the layer to a bitmap worked okay, but if there was a semi-transparent region – with a drop shadow for instance, then this merged with elements of any layers below. This becomes a problem when layers turn off and on as you move from one page/state to another. The solution – flatten the layer in Photoshop first before importing to catalyst. While this loses the editability of text, visually the design remains intact. So there is a trade off here depending on what you need.
The second problem was with vector shape layers that also have layer styles applied – this gave very similar problems to those found above, but the solution here was much simpler. Check the ‘editable paths and layer styles’ for that layer in the advanced import.
Once the design was into Catalyst it was very easy to apply interactivity and transitions. The main problem seemed to be importing it 5 or 6 times in order to find the right way to get the visual appearance exact. Now as I understand how the design is treated on import, I think this will be very useful software.