I don't think the sizing margins work, I tried myself.  And if you made it bigger I think it would end up squishing it so it is smaller.  In short, I don't think its possible. At least not in DWM...

The top Border image is stretched by the DWM system, that is why the grey is at the top in firefox, and is normal in explorer.

The DWM stretches the image to fill the height of the top non client area.  only the top 6pixels remain unstretched so the corner curves don't get distorted.

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

I think it should be possible to open the controls test dialog at any time from within VSB not just by clicking test.

Also I think more elements should be added to the dialog, such as the sort header, the explorer list view window, Balloon notifications, command bars, toolbars, tree views, branch views, toggle buttons for error and paused progress bars, examples of the various text styles and colours, the hyperlink styles, etc.

Also the edge of the dialog window should be fixed to match the dialogs found in windows, specifically the margins between the window frame and the tab pane.

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.

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

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.

Where have all the posts and forums gone?

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

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.

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.

[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]

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

http://www.uieasy.com/blog/

This site seems to have DirectUI tools and info...

Now I am sure I am not the only one who would like to know what knowing DirectUI would accomplish?

I know it is used as a form of XML document in Explorerchrome.dll and shellstyle.dll, but what would understanding it mean to visual style designers.

what resource editor are you using panda?  I tried with 3 and they all say no resources found...

I am on X64 if it makes a difference

Where is the start button images and the back and forward explorer buttons in Windows 7?

I have been experiencing an issue with Windows 7 X64 Beta 1...

When I apply a visual style made with Vista Style Builder 1.3, and restart the computer, I am unable to login.  I enter my password, and am thrown back to the login screen.

I enter via another account, and revert my uxtheme.dll to the original version and am able to log back in.  But if I keep aero as the default with the patched uxtheme.dll I have no issues.

I have emailed the guy who patches the uxtheme to let him know, and now I have posted here.

Well I would say its the fault of the MSStyles format itself

There are lots of Aero and Basic seperations but half the Aero elements are empty, and the Aero properties are taken from the Basic entries, which means for example with Windows Frames.  All the visual elements for the DWM frames are in the Aero > DWM Window listing, but you also have Aero > Window, and Basic > Window.  3 separate entries to control the same bits, which technically are separate, but for the user/designer, is just alot of confusion.

If there were an option to hide unused entries, and for all the entries to have some kind of explaination caption, or even a screenshot, it would make it easier to find what controls what.

Also if you could re-organise the entries on the left, into your own categories, you could find all the explorer window elements, put a descriptive caption on them, and keep them all together.

The app is amazing at making sense of these msstyles file, but all the items on the left derive their name and position from the original file (I assume) but for editing and designing your own styles, can come across as confusing.

So the application shows everything in the msstyles, and the developer hasn't pieced them out and organised them?

This would explain the slightly wild formatting and organising of all the elements.


Perhaps this would be an idea for the future, find a nice arrangement for all the many elements, properties etc or even allow a designer, to re-arrange all the entries from the treeview, into categories.  I mean all msstyles are in one format...

Quicker than I ever imagined, one question however, does this include an X64 patch for the Windows 7 Theme files.

Also one other note, have you explored the possibility of integrating shellstyle.dll editing, and perhaps even the new Scenic.dll editing, for the Windows 7 Ribbons?

EDIT: Why are there entries for the Start Menu and taskbar which are from vista's MSStyles, will this export MSStyles which are compatible with Vista also, or is it too early to remove them at present?

Yes, version 1.3 is Win7 compatible and will be released soon

I should learn not to doubt you Andreas!

With the Public beta of Windows 7 being released in less than 20 hours, Will there be a release of VistaStyleBuilder for 7?

How far does the application go into editing the shellstyle.dll and the theme files associated with the msstyles?

We should have some way to edit these two files from within vista style builder.

Also screenshots showing the elements as they are in Aero Default, as it can be hard to see what these little 5px images turn out like or where they are used.  Each element should have an example screen showing what it is and how it looks by default.