RSS
 

Archive for the ‘Graphic Design’ Category

User Interface Animation

19 Jul

Designing User Interfaces has always been more exciting to me than traditional Art or traditional Print Design. The reason being, User Interfaces (U.I.’s) combine Graphic Design with Interactivity and Animation. Subjects I’ve studied, worked with, and loved for years. In my new article, I talk about my recent observations in the field of User Interface Animation and cover applying the traditional Principles of Animation to User Interfaces in a few experiments using Flex Builder and Flash. Click here to read the full article.

 

Pre-viz for Chat Application UI/User Experience (Login/Inbox)

28 Dec


(Play Quicktime Movie) Pre-viz for Chat Application User Interaction v01 by Dolores Joya 08

The practice of making a Pre-viz (lookup definition) to map out and think thru a complex sequence of events prior to executing them, has been around in Hollywood for awhile. Emerging RIA technologies like Adobe Flex and Silverlight are finally bridging Design and Development pipelines to blend 3D, Interaction, Animation and Applications into a rich seamless user experience.

This example is my creative thoughts on how the user experience for a Chat Application could be when a user is alerted to take an action and logs in to receive new messages. The bouncing icon indicates user action is required. Potentially, I believe the user would already be logged in. The background should really be the user desktop. I removed all the traditional chrome of the browser and application window (which I think may become a standard practice in the future for entertainment/social networking type apps. Video players already do this.). Just in doing this short pre-viz I had many realizations of what could and probably could not be done. Also, I had many more new ideas to wow and lull the user into interacting more with an interface.

With the help of Maya and After Effects, I’m finally able to get these thoughts down on screen. I did try to execute this concept with keyframed SWC’s embedded in Flex components, thru timeline animation in Photoshop and Flash. In the end, the Maya/After Effects combination seemed to offer the most direct route to executing my concept.

I believe the future of User Experience Design, Interactivity, RIA’s, User Interface Design and other interactive mediums will have the Designer move into pre-vizing the interactivity after or parallel to Photoshop mock-up stage. In my experience the static Photoshop mock-up doesn’t reflect the life or UX of the application and pre-viz can fill that void. Currently, many teams already do a pre-viz prior to development usually in Powerpoint or After Effects. The addition of Autodesk Maya will come into play when more user experiences are built Papervision 3D. Now that Flash Player 10 supports more 3D and Photoshop and After Effects support more 3D and Maya supports Photoshop files the pipeline seems to be linking up nicely.

 

Flex + Flash + Maya + zBrush

14 Nov

Here’s an experiment I did with some of my favorite Computer Graphics tools mashed up to together. I’ve been working heavily in Pixologic’s zBrush (Awesome 3D Sculpting) and Maya 2009 (Out of Control Animation) when I’m not creating out Flex UI Designs and Flash Skins. Ultimately, I want to push everything together to create innovative and inspirational user interface widgets and what-not. So here is the output from those pipelines melded into a wicked skull.

 

Flex + Flash + Maya + zBrush

Flex + Flash + Maya + zBrush

Here is the original zBrush Sculpt. This is the version I intended to use in my Maya Animation but I’m still figuring out Displacement Maps in Maya/zBrush.

zBrush Sculpt of Skull by dolores joya moore

zBrush Sculpt of Skull by dolores joya moore

 

Launched my new Brand/RIA Design Portfolio

20 May

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…

RIA/Brand Design Portfolio Snapshot

 

Adobe Bridge is a great example of a Web/Desktop App in use.

20 Apr

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.

Adobe Bridge Home Header

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)

Top Nav

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

Content Box

Minimized Slider Navigation (Flash with Custom component)

Full Screen View (Photoshop)

Photoshop Content Screen

 

Free Flex Application Icons for Developers

27 Mar

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 

Flex Application 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.

 

Working with 3D Layers in Photoshop

29 Nov

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

 

How to Simulate Light, Color and Dimension with Gradients

03 Nov

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.