Dolores Moore - Flex Skinning and RIA UI Design

I finally had a chance to put together my recent RIA/UI Design and Brand projects of recent. Stayed tuned for my most exciting UI Design work to-date IORad. I current design UI’s in Flash, Photoshop or Illustrator and transfer the elements to Flex Builder 3 to do the layout, styles and skinning until Adobe releases Thermo…

I don’t know when it happened, but Adobe Bridge just got a lot cooler for me. I just noticed the total integration of Web Content: Training, Community, Exchange, News, Tutorials, and all out enormous amount of cool content being pushed down to me on my very own desktop through Adobe Bridge. I’m pretty sure they are using Flex. What a great example of utilizing Flex on the desktop.

As a Designer, I visit Adobe’s website for video training, tutorials, download photoshop brushes, illustrator patterns, and Flash and Flex info pretty much everyday. I am so stoked that the places I go, are already there organized by program, and by resource type, basically how “I” need them. No need to keep going to the bookmarks. Saves me a couple steps anyway. I think this integration is one more step towards seamlessness and I’m sure we are going to be seeing more.

Check out the vid - Flash Video (compressed)

Noted Flex Components used (correct me if I’m wrong on these):

Top level nav (TabMenu component with 2nd Level Flash Nav)

Content Box (Canvas Component with Image Slider/Text Area)
Interesting adoption of the iPhone paging dots.

Minimized Slider Navigation (Flash with Custom component)

Full Screen View (Photoshop)

For my Flex UI Design contribution to the Flex Community, I Designed this set of icons for developers to use in their Flex Applications. These are free to use in any way you wish. Hopefully these can help you spruce up your next Flex application. Download the source by right-clicking and selecting “view source”.

View and Download Free Flex Icons 

The icons are Embedded in the buttons and the background can be changed independently. I did not create .ico files but used .png’s. Have fun.

by Dolores Joya

Compositing images in Photoshop just got more exiting with the release of Photoshop CS3 Extended. “Extended” indicates a special version of Photoshop with added features such as 3D and Video layer support in Photoshop documents. In this tutorial, we are going to concentrate on the 3D layer feature now offered in Adobe’s CS3 product suite.

The use of Photoshop in the world of 3D is not new. CG Artists, 2D Digital Painters, and Texture Artists have used Photoshop as part of their workflow for several years. One application CG Artist’s employ to create a new digital illustration would be to render out their 3D model into a flat image with an alpha layer also contained in the file. They would then import that layer into Photoshop and begin compositing the image from there. If they needed the model at a different angle, they would have to render out another frame in their 3D program and re-import it into Photoshop. Now, with 3D layers the artist has the creative freedom to rotate, scale, and translate the model directly inside the Photoshop document. This ability allows the artist to mock up many different design options for their projects from a single 3D model file.

Photoshop CS3 Extended offers these 3D file import options:

• 3D Studio Max (.3DS)
• Alias|Wavefront (.OBJ)
• Google Earth 4 (.KMZ)
• U3D (.U3D)
• Collada (.DAE)

Today, we will be working with 3D Studio Max (.3DS) file format. This is a well known file format that has been around for years. There is a large 3D Studio Max community online and you can often find .3DS files for free or for purchase to suit your project requirements. For this project I will be looking for a 3D model of an airplane.

To start our project we will be using the 3D files from Turbosquid.com. Turbo Squid has a large repository of 3D files available. You only need to become a member to download FREE 3D files. Membership is free as well. At Turbo Squid I look in their products section under “Aircraft” to browse through all available Aircraft 3D models. For this project I am looking specifically for a 3D Studio Max file that contains a model with textures and is free (those are my requirements).

I find this well crafted WW2 Aircraft model (created by user Amalthea3D) file that I can work with and download the 3D Studio Max file format.

Although the drop down reads .MAX, this is a native 3D Studio file format, the zipped file contains all the textures and a .3DS model file.

Now that we have a file to work with. Let begin our Design work in Photoshop CS3 Extended.

1. Start Photoshop
2. Open a New Document. For this lesson I setup a 640×480 size canvas.
3. Save your Document. Save often, 3D files contain geometry which can sometimes crash Photoshop unexpectedly.
4. Under the Photoshop CS3 File Menu go to Layer > 3D Layers > New Layer from 3D File…
5. Locate the .3DS file in your directory and load it into the document. Once the file is loaded it will appear in a new Layer in the Layers Pallete.
6. Double click on the 3D cube icon on the 3D layer to open the 3D object menu.
7. Click on the “Rotate Object” icon in the 3D menu.
8. Begin Rotating the Airplane into a more interesting position on the canvas.
9. Use the “3D Pan Object” tool to move the object.
10. Click the “Apply Transformations” button to accept changes. The 3D Airplane contains landing gear in the down position. For our composition we need the Airplane to appear flying in the air. We can use Layer Effects and Layer Masks on 3D Layers in Photoshop to manipulate them as well!!
11. Click the “Layer Mask” icon on the Layer Palette and use the air brush tool to mask out unwanted objects.
12. To add more interest to our composition we can create a new view of the 3D Airplane by duplicating the 3D layer.
13. Double click the 3D Cube icon for the copy of the 3D layer to enter Edit 3D Object mode.
14. Rotate the 3D Airplane to be position in the side view.
15. Click the “Apply 3D Transformations” to accept changes. For this composition we want to combine a live action shot with a mechanical perspective.
16. For the action shot, we paint in smoke and fire on new separate layers to create the effect of the Airplane being shot out of the sky.

A couple more tweaks to the sky and layout and we’re on our way to an interesting composition in just a short time. Here is the final (rough) design.

But let’s not stop there. Since we’re in our creative flow why not come up with an alternate option?

1. Let’s duplicate our Photoshop document by clicking on the Image > Duplicate option of the file menu.
2. For this second composition I want to go with a more comic book illustration design. I find a comic book background on one my favorite image stock resources, istockphoto.com.
3. Import the new background into the document and begin to rearrange the objects.
4. Turn off the extra layers to clean up my canvas.
5. Double click the 3D layer to edit its position.
6. After repositioning my object the previous layer mask no longer works. So I create a new layer mask and airbrush out the landing gear again.
7. For this comp I think the strong bold backdrop needs to be balanced with a simpler foreground. So I turn off the textures for the 3D Airplane by click the “Texture Eye Icon” on the Layer Pallete.
8. To add more definition to the Airplane I add a “Stroke” Layer Effect outline to the 3D Airplane layer.
9. To complete the comp I add a comic style comment balloon and some text in the “Comic Sans” font face.
10. There’s one more thing I wanted to try. To bring in a little detail to the foreground I add one more tweak to the 3D layer.
11. In the 3D layer appearance settings I use the Appearance Settings > Render Mode > Line Illustration to have Photoshop render the wireframe mesh on top of the 3D Airplane. This adds some nice illustrative dimension to the scene. The Photoshop CS3 Appearance and Light Settings in the 3D tool are VERY cool. I suggest you play in there with all the options. You will be able to quickly create multiple layouts and compositions with this little toolbar.

Here is the final design

You can see the exciting possibilities now available with Photoshop CS3 Extended. The new 3D layer tool adds flexibility in your compositions in a unique and innovative way. If you love to design or illustrate collages in Photoshop, then 3D layers will add much more creative opportunity to your work.

Caveats:

I have tried to work with several different model types in Photoshop CS3 Extended and have come across these bugs:

• Photoshop CS3 does not like Beveled text from Maya
• 3D Models with Deformations can cause Photoshop to Crash
• 3D Studio Max .3DS files import the cleanest with the UV Texture Maps in tact
• Some .OBJ files import without the UV Texture Maps

Dolores Joya, Graphic Designer
DoloresJoya.com

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.