Best Practice, Method or Madness!

[mdtauk]

I am still very much a noob at making visual styles, and am still at the phase of testing ideas and messing around.  I thought it may be nice to have a place for people to detail their techniques for designing visual styles and UI elements.

My method, is to design all my elements in Microsoft Expression Design.  it has a very accurate pixel preview, and is vector so can be refined and edited quickly.  I find a colour scheme and make one or two elements using those colours, so I can copy and paste the gradients to maintain consistency throughout.  Also which is useful is the ability to select a set of objects, and export as png with all transparencies in tact, and using the pixel grid I can know the exact sizes these elements will be.

But for differing DPIs and element sizing, it isnt as easy as just scaling the element (unless that is the style you are hoping for) it is ensuring the borders and inner bevels are all a set amount of pixels in from the edge or in pixel width, but it is a great way to design these elements, and it seems very likely this is how some of the Vista/Win7 UI elements were designed this way, as it is very easy to recreate the existing elements, let alone creating new ones.


Perhaps others can post their own processes and methods for making these designs...

The following images are showing a preview of my theme I am working on, and showing how I work

[K-Johnson]

I will have to check that program out 

Right now I'm only designing for 96dpi in Photoshop, but if recreating the elements are as easy as you made it look/sound, I'll definitely recreate it in that program so I can scale it for other dpi's.  That was my initial goal, but as I was nearing completion I realized how time consuming and unrealistic it would be of me to recreate it for each part/state in other dpi's.

The way I design is to Prt Scrn a certain area, bring it into Photoshop and recreate the area.  I then export the graphics from VSB, drag all the pertaining layers into it and save.  Then I immediately do a preview to see how I like it.

[mdtauk]

When working, make sure you set the grid spacing to 1px, zoom in to about 600% so the grid becomes visible, and then set Pixel Preview to on from the view menu, so you see what the vector shapes will look like as a png image.

[K-Johnson]

Thanks for the tip!

I am not finding many Expression Design tutorials that go to the level of detail you do in ED.

In Photoshop I know how to create the engraved look, the inline stroke to give off that highlight and to set the contrast against the borders, etc.  So far I've found one tutorial that teaches how to make a button, but it looks rather amateurish.
Perhaps a site with consistent quality like PSDTUTS, but only for ED.

Where's a good place to learn?

[mdtauk]

There is nothing special to it
its just common sense really.

Its all shapes borders and gradients...

For a button, I figure out the size in pixels it needs to be...
I make the shapes I will need:

• Dark Outer Border - Black
• Inner Light Border - White
• Shimmer - Yellow
• Colour - Orange
• Button Shadow - Red

Then I add gradient fills onto the shapes I have made, and then copy the object and paste for the Hot, Pressed, Default, Pulse states and change the colours on them.  When looked at in vector, like in my image above, it looks so simple and dull, but at the right size and in pixel preview, it all blends in.

[K-Johnson]

Oh, ok.  I haven't yet used the program and didn't know how I would go about making buttons in vector as I've always done them in raster with Photoshop.  That looks simple enough.

Thanks for the explanation, mdtauk!

[mdtauk]

Where have all the posts and forums gone?

EDIT: Nevermind the forum list seems to have returned...

[K-Johnson]

Hmm, I got it working, but it looks terrible when scaled down and rasterized with anti-aliasing.
I'm a bit OCD when it comes to detail, and I feel I can do better in Photoshop at the pixel level.
But that'll take more time (but I'm already half done with the DPI entries.  You gave me the motivation to work on the other DPI's 

But for larger, solid objects, it usually turns out great.

The problem I had was the stroke on the rounded radio button.  It turned out blurry on the top side and I changed the width around and nothing really fixed it.  I am still new to this program, and vectoring, so it could very well be my fault.

For now I will stick with Photoshop.  Thanks for the explanation, though.

Also, now that I've read tutorials I understand the terminology and the workflow/layout better in ED.  How different is this to Illustrator, and is Illustrator better for vectoring?  I know in the raster world, Photoshop remains king.

[mdtauk]

Well Expression Design seems to have been created to develop UI elements for WPF and Expression Blend.  Illustrator is best for organic illustrating, but nothing has come close to the precision of Expression Design for creating pixel perfect vector objects.

If you get blurry lines, its usually because the object is a size like 300.5, and not fixed to pixels.

To get the objects to look good when exported to PNG, you need to design the object at the same size you will need it to be.  so if the Start Button is 94px by 94px, you need to make the circle in expression 94 by 94.

[K-Johnson]

Ah, gotcha.  Also, I tried searching google but I couldn't find the answer to this question...

How can I get the stroke to "stroke inside" the path?  If I make a 96 x 96 px canvas and make a 96 x 96 px circle, the stroke seems to cross the edges of the canvas because the path touches the edges of the canvas.

Does this matter?  Is there a way to get the edges of the stroke and not the edges of the path to touch the edges of the canvas?

Sorry if this sounds confusing.  And thanks for answering my questions.

[mdtauk]

Turn on Pixel Preview, and it will show you a more accurate view of what it would look like.

[K-Johnson]

Ooh, okay.  I forgot about that bit.  Thanks again 
I will remove my posts if you want as it's trashing up your thread.
Perhaps it'll be useful for others? Hehe, sorry for derailing your thread.

I should've sent you PM's instead, sorry!

[mdtauk]

No leave them...

I am hoping this wont be my thread and others will come in with their own suggestions and methods so everyone can benefit from our shared experience.

EDIT: I would also make one very large canvas and do all your UI elements in the one space.  This gives you a good opportunity to see all the elements together, to make sure they all fit together, and you can reuse the same colours and gradients.  Make sure you use layers and groups to keep the elements organised.  Then when exporting, select all the objects you want to export to PNG, and in the export options make sure anti-alias and transparent are checks, and it will save only what you have selected.

[mdtauk]

Can anyone tell me which images glyphs etc still need to be designed, except for the taskbar and start menu?

This is whats done so far, resized down by 50% here...

[satukoro]

Wow, this is actually quite intriguing. Next chance I get, I'm going to get this program and continue to work on my newest VS. Thanks for the inspiration man.

[satukoro]

Does anyone know where I can get a trial of this?

[mdtauk]

www.microsoft.com/expression

[Panda X]

Any chance we could get a template. Just outlined parts where we can make our own?

[mdtauk]

Well templates aren't really how it goes, but I will post the file I made, and you can figure it out and edit it...

http://mdta.thetvroom.com/mdta.design

This is just how I have chosen to do it, its not the only way, and its probably not the best way...


Now Windows 7 has RTMed, I want to try do a VS in the same style as the Office 2010 dark theme, but as I am still on build 7100 until I get the final Windows 7, I wont be able to test it fully...

[somethingelse]

I use fireworks atm (which is also meant for UI design) but I've been wanting to learn how to use expression for a while since I got it for free on Dreamspark.