Using Vector Gradients in Flash to Design User Interface Elements. Read more about my techniques as I take you on an in depth look into the world of gradients.
I’ve always loved repeat motif or repeat patterns since I first learned about them in my graphic design class in ‘95. That is also one of the things that caught my eye about the San Francisco inspired style and movement called “Hyphy”. The concept of repeat patterns layered with metallics is big in the Fashion scene right now and one that I employed as a recurring theme throughout this design. I dipped into this style for my 1st Flex skin theme called Green and Gold GUI Flex Skin . Below I’m going to go into my design approach to creating this unique user interface design using Photoshop, Illustrator and Adobe Flex. I call this user interface art.
Before we begin please note that this is not a technical walk-through of how to use Flash or Flex. For more in depth instructions on customizing Flex UI components I suggest you go through the tutorial by Narciso Jaramillo on Adobe’s website, he walks you through the process using Photoshop, Flash & Fireworks. Also, there’s templates for you to start with that contain all the Flex UI components layed out and named properly. He does a great job getting you started on the path to designing your own custom components. I started with these templates and also used the test files to create the design I’m discussing here.
A note on the inspiration for this design
What is Hyphy?
Some call it a movement, a style, a dance, or an evolution of culture rooted in the independent Hip Hop scene of San Francisco. I went there in Feb of ‘07 and have seen it used in many emerging fashion brands including limited edition shoes, clothing, and accessories. It’s a nice change from the gangsta look of the 90’s. Hyphy is cleaner and more preppy. The colors are brighter, poppin’ and are often used as a backdrop for silk screened graphics.
How did I deconstruct the “Hyphy” Hip Hop style and translate into my UI work?
Here’s my inspiration for the design.
Techniques I know I want to use right off the bat are:
1. Repeat pattern of simple animal shape
2. Minty green hues
3. Metallic Gold
4. Brown Plaid
5. Old English Letter Typography
Here’s the swatch palette of the design elements I developed and evolved from my inspiration.
When I look at the “Hyphy” design style I notice a combination of patterns and textures layered on top of each other, usually topped off with a bold graphic splashed over the layers. I think this creates a nice depth and so I incorporate that into my design.
For the base pattern layer
I wanted to do a repeat pattern using an animal shape. The pattern shape should be simple, not overly detailed, a flat vector and 1 color. A good resource for finding Photoshop shapes is the Adobe Exchange website. I’ve been going there for years and it is a treasure trove of styles and shapes. After I download some shapes I like, I export the paths out of Photoshop so that I can get them into Illustrator as vectors. The reason for doing this is to be able to export an SWF vector from Illustrator into Flash reduces file size and allows for your graphics to be scaled nicely.
Photoshop Export Paths to Illustrator
File > Export > Paths to Illustrator
1. Go to File > Export Paths to Illustrator
2. Make sure you have the correct path selected from the drop down menu
3. Save the path as an .AI file
4. Open Flash or Illustrator and Import the Shape Path
This is the pattern design I created in Flash from my snail vector shape.
For this pattern I use basic translation to repeat the graphic. I created 2 columns of evenly spaced copies of the shape. Column 2 is offset vertically in the positive Y direction from Column 1. I repeated copies of both columns across the page horizontally.
Something to look out for with Flex Background Styles and Repeat Patterns
This technique is a traditional approach used in website design. Create a tileable graphic to put into the background and set the CSS body tag to repeat. However, I could not locate a background-repeat attribute in Flex styles, so I was unable to make this background repeat. If anyone hears of a work around please let me know.
Now for the texture layer of graphics
Continuing the theme of repeating graphics, I began to make some of the metallic material for the main UI component element skins. I opened the Flex_Skins.Fla template I downloaded from Adobe’s site and began to think about which components I wanted to use in this design. The template contains nearly all the Flex components, which number over 200 graphical elements. For this design I knew I wasn’t going to use every component so I started with the “Panel” component in Flex.
Designing the User Interface for Flex in Flash
Repeat 2
For the panel component I wanted a metallic gold skin with metallic gold link borders. So, I start with a gold gradient created using the Flash interface. For the link I use our “repeat” theme again and tile the Gold swatch across the bottom of the panel to create a row of Gold Link bars. In this case I scale down the Gold Link to offset the larger background gradient used for the Panel backdrop.
Repeat 3
For the word “Login” I wanted to make a Diamond encrusted plaque with the title of the dialogue. I used a Diamond vector I purchased from iStockphoto.com royalty free graphics resource. They have very nice graphical elements at very affordable pricing. I take the Diamond vector and import it into Flash, make a symbol out of it and begin scaling and tiling them into the letters for the word.
Creating Dimension using Flash Gradients
For the centerpiece of my UI design I created a Gold speaker to use as a button. In order to create the illusion of depth in the speaker I rotated the gradient highlight color around the circle. This creates the appearance of light being reflected off of the surfaces that are sticking out the farthest. As you can see above layering these gradients can give a design element much depth.
After creating the basic elements, I start to lay out my page inside the Flash interface, separate from the Flex_Skin.Fla file. Once I have an arrangement that pleases me, I copy each element into its corresponding symbol in the Flex_Skin.fla file and publish the document in preparation for Flex.
UI Elements Ready for Flex
These are the elements I have customized using Flash for my Flex UI Design. Once these are ready, I save the Flex_Skin.fla to my root directory and call it from my Flex document using a stylesheet call similar to the kind you use with website CSS.
UI Elements in Flex
Using the predefined names in the Flex_Skins.fla document, I create new style calls for the components I customized. I simply point to the same Flex_Skin.swf document for each element I customized. Once, my stylesheet is saved I select the component in the design view of Flex and select my style from the “Style” drop down menu in Flex. The standard Flex component is then updated with my new Flash design.
Further customization to the standard Flex components
Since my design called for elements to be rotated as if they were dangling on a necklace, I simply used the “rotation” attribute available in Flex and type in the degree of rotation I wanted.
Caution
Rotating UI elements prevents users from typing in text inputs into the application and is not a practical technique for good usability. Doing this can also create unpredictable results in the Flash player, because I am creating an interface as art I overlook this and go with it.
Here is my final UI Design arrangement ready for Flex
View my live working User Interface Art Piece here
Recent Comments