Shiny buttons and Blend's interface options

Posted on

I’m going through chapter 11 of Victor Gaudioso’s book on Expression Blend 2, and he is stepping his readers through the creation of a glassy button.

I’ll summarize what we’ve done so far.

First, we created a rectangle with beveled edges.  He directs his readers to use the visual controls to create the curve.  I prefer to have a bit more control over it, and so I enter into the properties pane in the RadiusX and RadiusY.  Either way works.

He then instructs the readers to duplication this – or in Blend 2 terminology, its a simple copy-paste (Photoshop!  Get out of my brain!), shrink the size of the rectangle, set both gradient stops to white (#FFFFFFFF) then turn the right-most gradient stop’s Alpha channel to 0%.

I’ve seen people do this in 3 ways.  Either by clicking and moving the mouse up/down or left/right (its somewhat like a dial – click and drag will increase or decrease the percentage), type directly in the 100% field to the prefered modifier, or by programming it directly in the color code.

A bit on that last option, you may notice that the color code has 2 more characters than usual.  I promise, that is not a typo.  The addition of the 2 are specifically related to the Alpha chanel, and those are placed as the first 2.  Most colors will remain solid.  So if you’re modifying color hex by hand, just pay attention to the last 6 and ignore the first 2.  If you’re wanting to adjust the alpha and change it to 0%, just replace the first to FFs with zeroes.  The result will be this: #00FFFFFF

This will often help when you’re neck-deep in XAML and don’t want to switch to design view.

The last thing I wanted to mention was the use of the white gradient – to – 0% alpha.  This is a commonly used thing for designers who work in photoshop or illustrator with one exception – the “layers” are exactly the opposite.  Instead of the top item being “on top” its more like painting – you start with the backing and for each additional color, you add to the existing one.  I had to “reprogram” the way I thought about these orders and because I move between photoshop and blend, it continues to throw me off.

In blend, the bottom-most object is the one in the forefront.

So the shiny button, I’ve described the first 2 layers – the base gradient, and the shine which has been shrunk and has had half of the gradient modified to being transparent.  The 3rd step is to take the resized 2nd layer, duplicate it (copy-paste) and then flip it.

Victor (the author) has you go into the properties pane to the bottom and transform it by rotating by 360º.  I prefer using the last tab which will exactly flip it either vertical or horizontal.  This being so similar to a tool that I use QUITE frequently in photoshop – this is much more comfortable for me to use than a full 360º rotation.  From there, you just need to hit the down arrow a few times to make this 3rd rectangle closer to the bottom.

The result is something like this:

Not too bad – working with Blend is really not all that different than working with Illustrator or Photoshop, but the differences can be tough to overcome at first.  Blend is a whole lot more like Illustrator than photoshop in the matter that you’re dealing with vector based images and can modify things like the bevel radius on the fly – after its been put onto the canvas.  In photoshop, its not really much trouble, but you do often end up having to just delete a layer or an object and add it back on if the radius on a vector(path) based image isn’t quite right.

Handyman Toolkit

Posted on

By the end of Chapter 5 of the book, I’ve discovered that yes, you can learn how to use this software without the assistance of a book, but had I been able to obtain this book a year ago when I started tinkering with Blend during my spare time, I would have greatly benefited from having this “in my back pocket” sort to speak.

The biggest confusion factor which I had when cutting myself off of Adobe products, cold turkey, to force myself to learn how to use Design and Blend, was the “when do I use the stackpanel over wrap panel?” or “Should I make this a canvas or a grid?”. Plus there was the creation of something primarily vector instead of part raster and part vector – that bit is something that illustrator gurus will likely not have any problems with, but most who design for the web tend to take preference to Photoshop – and only on occasion delve into primarily vector bases.

Now, the intent of this chapter was to get you familiar with the Layout elements and the unique attributes each layout element presents, however, there are underlying instructions which would assist a raster-based designer into being more comfortable with the ideas and ease when using vector shapes. They’re not that different to create and have the added scalability that raster(bitmap based) images just cannot do due to their innate nature.

In any event, the entire chapter is essentially “This is what X is, how about we apply this to give you hands-on experience with X”. We went over the following: Border, Canvas, DockPanel, Grid, Scroll Viewer, StackPanel, UniformGrid, ViewBox, and WrapPanel layout elements.

By the end of the chapter, the application is like a circus of vendors in graphical format. Victor is sure to mention in his book that he’s well aware of the lack of space towards the end.

Without further ado, I present my circus:

Click to view full sized image
Click to view full sized image

Chapter 3 – The Pan Tool

Posted on

I’m nearly through chapter 3 and I feel the need to take note here in the blog of a few points which I keep finding, forgetting, and finding again – which he mentions in this chapter.

The double-clicking of the Pan tool.

Far too often when I’m working on UI, I zoom in very closely on my objects to make sure that everything is lining up, every detail is perfected, and often I find the answer to the, “I’m not quite sure why, but that doesn’t look quite right – can’t put my finger on it, I just know that its not right.” by zooming in.

All of that sounds great – detail oriented being a rule of thumb of mine, however, there’s 1 issue with zooming in: It often is difficult to get to OTHER objects without zooming out, locating item, and the zooming back in.

Well Expression blend has a nifty thing with their pan tool.  When you double-click on it, your view will center on whatever object it is that you’re clicked upon in you objects bar.

When I’m not remembering that this functionality is there, it drives me nuts trying to remember what it is that I did in the past to make quick moving w/o zooming out.  Hopefully making note of it here will keep it more permanently in my mind.

Btw, if you’re lost – I’m going through Victor Gaudioso’s book on Microsoft Expression Blend and blogging as I go.

HTML on coffee, monster energy drink, with lots of vegetables

Posted on

What is the title talking about?


There are many impressions of the experience from being a XHTML CSS Raster-based web designer to moving onward and upward to more User Experience technologies that I’ve skipped along the way.  Now that I have a blogging system in place that allows for more easy publication, I’m going to try to fill in the blanks.

So my first impression of XAML once I really got my feet wet was a strong familiarity.  XAML is like someone took HTML and fed it lots and lots of vegetables, gave it training on the track, music lessons, and then packed it full of coffee and monster energy drinks.  By the end of the day, you have the result of something more akin to Hal Milton, the hyperactive thoroughly intense, highly sarcastic and witty guy who works at the Sony Online Entertainment office leading the team creating the new PS3/PC game, The Agency.

Yes, I’m comparing XAML to Hal.

For those who have no clue what I’m talking about, but do know coding and markup enough to be reading this blog – I want you to take HTML, couple the base of HTML with some AJAX and wrap in lovely lovely CSS, and move back to the world of pretty formating, and you have XAML – sort of.  You could also say that its like flash only way slicker and easier.

For the HTML CSS markup designer, your wrist was slapped for using capitol letters.  Your elbow was flicked REALLY hard for using the enter key too often for spacing, and the back of your head popped for tabbing each child element out to make it easier to see… all in the name of quicker load times and most likely a UNIX based server.

XAML is going to – at first – appear to be fingernails on a chalkboard after these web standards have been beaten into you.

CamelCase naming (capitolizations, no spaces, no underscores unless creating an alt command, no numbers… what?!) schemes, tabbing to indicate parent and children (if you don’t, it won’t even run – and I mean run as in the application form of “run”) – aka ORGANIZATION and the app.xaml being your friend for those who are comfortable with CSS.

Moving backwards so we can move forward – you start out with Page.xaml as your root and App.xaml for sharable elements.  They may not be shared w/ anything else, but for organizational purposes, the same way that you would have your html set up as “index.html” and “style.css” – XAML brings you “Page.xaml” and “App.xaml”.  So you put your structures in place within your Page.xaml and tell the structure to look at some name which has the visual atributes defined within App.xaml.

The awesome part about xaml is that you are able to do a whole heck of a lot more.  We’re not working with raster-based (bitmap/pixel based) images (unless you want to).  We’re working with vector based shapes.  This gives a whole lot more flexibility in the visual attributes, what they do, how opaque they are, gradient scales, their x-y coordinate placing, and also allows one to do key frame animations.

Much like Flash, the versatility of silverlight utilizing XAML is only hindered by your abilities to be creative.

Puts me in a warm happy place.