I'm working on a webapp that lets designers generate CSS through an intuitive interface. Right now I'm working on the Shadows panel and I can't decided which option has the most versatile usability. By "versatile" I mean the option that is easiest to learn as a beginner and quickest to use as a pro. It would be interesting to know in general if there are any studies on this kind of interaction (creating something new in a design tool) since it is hard to find any resources on the topic.
Option 1: The user is given several visual presets to create a shadow. After selecting one a dialog box with settings will appear. Each option will create a shadow with specific settings that the user can tweak. This option seems quicker because it takes one click to get closer to the type of shadow you want. This is Adobe's approach, but they use text instead of a preview image.
Option 2: The user is given two actions - add a shadow and add a preset. Clicking the + will create a basic shadow. This option seems more straightforward and simple, but also needs more clicks to get to the desired shadow.
Preview:
What seems most versatile?