Archive
Rants and Raves #1
I’m thinking of starting a regular feature called “Rants and Raves”. If I do continue this down the road, then I can always look back fondly and call this the beginning. If not, I’ll just forget it as a failed experiment. In the meantime, maybe it will make me feel better.
Rants
Expression Design and Underlined Text
I’ve been raving over Expression for a while now, which makes sense since I’ve been spending about 65% of my time in Blend. I’ve also been using Design some, as evidenced by my recent series, and I was explaining it to my boss the other day. Well, he gave it a test run and was creating a form background and discovered something I had not yet run into: Expression Design does not support Underlined Text elements. It’s still on the Design 3 wish list!
Why is it that Blend and Design appear to share so much, and yet simple things like this get lost? Blend does it, heck every other MS app does it, not to mention all of Design’s competitor products. I’m really surprised (and annoyed) that something so basic was left out when you can sub and super-script no problem. And while I’m at it, I’ll mention that the Gradient Fill tool is much nicer in Blend: and I thought Design was supposed to be the graphic design tool of choice?
Visual Studio Magazine had only 2 articles
I’ve been a VSM reader for some time now, and I always get excited when a new one comes. I can’t wait to find time to read it, but with my schedule it may sit on my desk for a while. Well, apparently that won’t be much of an issue anymore. I read the June 2009 issue in 5 minutes, and I’m a slow reader. What’s the big deal? I read it so fast because it had very little content.
I guess the first clue should have been no Table of Contents: the issue consisted of a half page Editor’s Note, a feature article, and one other article on Sharepoint (which I do not use and so did not read.) The rest were ads, with the entire center section an insert containing a series of Sharepoint ads labeled “Sharepoint Development and Deployment Guide.” And actually, the Editor’s note and the Sharepoint article were in this insert, so if you remove it the magazine was exactly 1 article. A good one, true enough, but hardly worth the cost of the magazine.
I hate to say it, but I think it’s adios come renewal time.
Raves
Microsoft Media Encoder
I’ve thought for quite a while that I would like to post some video tutorials, but I was never sure how to go about it. Well, someone on Twitter – sorry, I can’t remember who but Thanks! – posted 10 Free Screen Recording Softwares for Creating Attractive Screencasts (sic). I decided it was finally time to get this train rolling, so I downloaded a few of them and tried them.
I’m not qualified to give reviews, but the easiest one I tried was Windows Media Encoder. It only took a few minutes to download and install, and after a quick read through the online tutorial I was able to easily record a video with sound. You can expect to see some Video Tutorials posted on the site in the coming weeks!
XAMLFest Online
This is a great concept. XAMLFest was a live tour of XAML/WPF training that I wished I could attend. It was so popular, that the creators decided they would offer the same contents online, and the called it XAMLFest Online. Where do they come up with this stuff?
Anyway, this is a series of 15 hour-long training videos. The first 5 are pre-recorded and available now. The other 10 are stretched out over next week, an hour in the morning and an hour in the afternoon. The tracks are divided into Designer and Developer, so naturally I will be attending both! I’ve seen a couple of the pre-recorded videos, and they are top notch. If you have any interest in WPF and Silverlight Development, then I recommend that you check this out: you don’t get free training like this every day!
Silverlight FireStarter DC
Speaking of free training, next Saturday, June 6th, the Silverlight Firestarter DC will be held at the Microsoft offices in Reston, VA, hosted by Frank LaVigne and the CapArea.NET Silverlight SIG. I will be there giving a talk on Blend, but what I am looking forward to is Pete Brown, Silverlight MVP extraordinaire, presenting on Silverlight 3. This should be a great event, and is FREE, so if you are anywhere near Reston that weekend, register now and join the fun!
Feeling Better
Well, I’m glad to have gotten some of that off my chest! Catch you on the flip side…
Expression Design for Developers part 3 – Editing Your Art
At the end of part 2 of this series we had the beginnings of a new logo. In this article we are going to learn how to edit existing art on the artboard using Guidelines and Shape editing. We’ll also explore adding Visual Interest by using Gradients and Effects. Here is the image we left off with:
Using Guidelines
As you can see, our cross shape is pretty rough and leaves a little to be desired. Let’s start by cleaning that up. First, I want to make the edges straight. Doing this by sight requires much keener vision than I have, so I’m going to get a little help in the form of Guidelines. Guidelines are helper objects that provide straight references, like the row and column delimiters of a grid. They only show up during design and are not visible on the final image. To view a guideline, you must have “View Guides” turned on. Right click on the artboard and make sure “Show Guides” is checked. You can also find this in “View->Show->Guides” or use the Ctrl-; shortcut as a toggle. After making sure they are turned on, you can drag a horizontal guide from the top ruler or a vertical one from the left ruler: just click and drag out of the ruler and drop it on the artboard. To move a guide that has already been added, use Alt-click to grab the guide. To delete a guide grab it and move it off the artboard. Try it out by drawing a few guides over the cross sections:
Guidelines are visually useful, but in a scenario like this we can make them even more useful by enabling “Snap To Guides”. This will allow us to drag points and elements near a guideline and their position will automatically snap in place. This is going to be incredibly useful for making our cross sections straight and parallel. To turn this on, right-click the artboard and make sure “Snap to Guides” is checked. Or, like before, you can go to the View menu and check “Snap to Guides” (Ctrl-Shift-; shortcut). Now that the guides are all ready to go, let’s edit the cross shape.
Shape Editing
We can edit any shape by altering it’s individual points, adding points, or removing points. To control individual points, we need to select them using the “Direct Selection” tool. You will find it represented by the white arrowhead in the second tool group from the top of the toolbar. You can also activate it by the shortcut key ‘A’. Go ahead and select the tool and then click anywhere on the cross:
You will see that the shape is outlined (probably in Red since this is layer 1 – but more about this in the next article) and all the points are visible as colored dots. You may have also noticed that somewhere on the line is also an arrow pointing the direction of the path: that is not important for our purposes, for now I just want you to know why it is there.
To manipulate a point, click it with the Direct Selection tool activated. All the other points will change to white filled while the selected point will remain solid. You can now move the point, wither with the mouse or the arrow keys on the keyboard. Do this with one of the points close to the center of the cross, and when you drag it near the intersection of the guidelines you will see it jump to that point. It should look something like this:
You can go ahead and do this with the rest of the points: drag them to the logical locations on the guidelines. Actually, in showing this to the client (my wife), she wanted the top and bottom ends of the cross canted in the opposite direction, so you can go ahead and drag them around until they look something like this:
Skews and Rotations
So, not bad, but the cross is perfectly plumb and level while the rest of the text is italicized. To fix this, we’ll skew the cross. Skews and rotations are easily done right on the artboard. First, switch back to the Selection tool (the black arrow) and select the shape. A bounding box should appear around the shape with 8 grab points (each corner and each center). Now move your mouse over the grab points and you should see the mouse cursor change. Over the corners you will get the rotation cursor, and over the centers you will see the skew cursor. To affect either one of these, grab and move the cursor. For this exercise, grab the top cursor and skew it to the right until it appears to be at the same angle as the italicized text.
For the official version, there is one other change I made to the cross. Compare the foot of the cross to the foot of the “n” next to it and you’ll see they do not match. I want the cross to look like it fits in, so I used the Bezier tool to alter the shape of the foot of the cross to match the others. This is beyond today’s scope, but I will cover some more advanced drawing techniques in a later article. For now, remove (or hide) the guidelines, zoom back out and see where we are:
Adding Visual Depth
Now it is time to start adding some visual interest to our art. There are lots of ways to do this, but Visual Depth is one of the more effective ways. To give something the illusion of depth, we will add a few lighting tricks. An easy way to add lighting to something is to use a gradient fill.
Apply a Gradient
Select the Ellipse background shape. In the color manager, make sure you have the background fill button selected. Now select the Gradient Fill button in the Appearance tab (the one with the black and white stripes). This will probably turn your background to a black and white gradient, but we’ll fix that momentarily. You should now see the Gradient Stop bar beneath the color pallete, and it should have a black box on the left end and a white box on the right. When you select one of those boxes, that is the color fill you will be working with. Select the black box and move around the color pallete until you get back to our original background color (or reset it manually to RGB 71-135-103). Now select the White gradient stop and do the same, only this time select a lighter version of the same shade. The trick here is to be subtle: the effect we want is of light and shadow.
Now for something cool: once the gradient fill colors are selected, you can alter how they are applied by using the Gradient Transform tool. It looks like a big arrow and should be 2 tools beneath the text tool on the toolbar. Select it, and then click and drag inside your artboard to apply the gradient. Try it a few times and you’ll see that the angle, length, and placement of the gradient transform all affect how the gradient is applied. Drag it until you have a pleasing effect of lighter green in the upper left and darker green in the lower right.
Bevel Effect
We are going to give the art some depth by adding a beveled border around the ellipse. To do so, we first need to have a border: select the ellipse and click on the Stroke button above the color palette. Select a golden color (I used RBG 167-167-17) and a stroke width of 25. This will give some nice heft to the border. [Note: if you do this but still see no border, check the Stroke Style drop down under the color palette. It is probably set to None, so try changing it to a simple line.]
At this point, we can start to play with some pretty powerful stuff called Effects. Effects are like little built in routines that can add all sorts of goodies to our art. Full coverage of effects is well beyond my experience, but suffice it to say that a little experimentation will be worth your while. In this exercise we are going to use a few simple effects to really make our art shine.
With the border of the ellipse selected, you should see an Effects panel beneath the Appearance panel on the right. In the bottom border of the panel are several icons: Click “fx->Effects->Bevel” and watch as Design applies the effect to the art. Effects are drawn live (and in other software I have seen them called ‘Live Effects’) so it may take a second for the changes to complete. The more effects and more complicated the art, the longer they will take to redraw: don’t panic, all is well! Once added, you will see some options available for tweaking the bevel effect. To match my settings, do the following: Width = 2; Contrast = .3; Softness = .6; Profile = Bulge Up; Light Angle = 142. You will see that every time you change an effect setting, the art redraws. If you’ve entered my settings, you should have something like this:
Drop Shadow Effect
One last thing we’ll do to add some depth is include a drop shadow on the text. Select one of the text objects. Go to the Effects panel and select “fx->Drop Shadow”. Again, you can play around with the settings, but to match mine enter these values: Softness = 1; Offset = 1.5; Opacity = .6; Light Angle = 315. Now apply the same Effect to the other Text element and the Cross shape.
Conclusion
If you’ve been following along, we should now have a pretty decent logo with some nice visual depth:
Now, I recommend that you go and play with some of these cool features! Make some art, be wild, and have fun. In the next installment we’ll discuss Layers and Exporting to XAML. Until then, happy drawing!
Technical Presentation Tip – Be Confident but Humble
Justin Etheredge at CodeThinked has asked for people to post some tips and tricks for giving Technical Presentations. His idea is great: provide a repository of Best Practices for technical presenters written by the presenters themselves. The following is my contribution to the cause.
Confidence is King
One thing that keeps never-before presenters from becoming first-time presenters is the misconception that we (the presenters) are all experts on our given topic. The term expert is pretty specious these days, and as such has lost some of its value. [Digression: If you aren’t sure what I mean, check out The 4-Hour Work Week by Timothy Ferris. It includes a simple checklist on how to become an ‘Expert’.] Yes, most of us select topics we feel pretty comfortable about, but I know some presenters who intentionally select topics they aren’t familiar with just so they have some motivation to dig in and learn the topic.
Unless you are watching a presentation from a known authority, like ScottGu, take the presenter and the material with a grain of salt. Yes, you should rightfully expect that they know what they are talking about, but understand that this is largely because they spent the time preparing the material. They have invested the time necessary to research, learn, test, and try the particular techniques involved. They have developed a presentation with an eye towards organization, clarity, and delivery. And they have practiced giving the presentation, probably more than once. They appear to know what they are talking about because, well, after all that they probably do!
My point is, if you did this kind of leg work on a particular topic, you would be just as qualified to present. It’s not that presenters have some special power or ability, or that they have been anointed by Microsoft, it’s just that they have put in the time and learned the material. And a funny thing happens when you know the material: you have confidence, and in public speaking Confidence is King.
Be Humble: No B.S.
If you’ve ever seen a presenter try to B.S. his way out of something, then you know exactly what I mean. An audience can tell right away if you don’t know something, and it can get ugly if not handled properly. Fortunately, yours truly is here to share with you the magic phrase that will get you out of this jam. Ready? OK, repeat after me: “I… don’t… know.” You might want to practice it a few times to make sure it rolls off the tongue naturally.
All kidding aside, don’t be afraid to admit you don’t know an answer. It is OK to make an educated guess, but if you are guessing or are not completely sure of the answer, say so! I promise that everyone in the room will understand and appreciate your honesty, which will only serve to increase your credibility.
How you handle it is up to you. A lot of presenters will promise to find the answer and post it or email it. You could give suggestions for where the questioner can look, or what other person to ask. You can even volunteer to meet with the questioner after the presentation. However you choose to handle it is fine, just be prepared because it will happen. Don’t let it derail your presentation, just handle it and get back to your material.
Assuming you know your material, there is another thing that will boost your confidence: you must realize that they are there listening to you for a reason. Hopefully, the reason is that you know something they want to learn. Coming to grips with this can itself generate confidence and improve the presentation. But, don’t get cocky! Stay humble and remember the presentation is not about you, it is about the exchange of information. You are simply a conduit for that exchange.
Conclusion
To sum it up, have confidence in your knowledge and your presentation. If you have done your preparation properly, then you’ll do fine. But don’t let it go to your head: remain humble and don’t be afraid to admit you don’t know something. Now, say it with me…
Expression Design for Developers part 2 – A Quick Tour
In the first article of this series I laid out my initial impression of Expression Design. In the intervening weeks I have spent a lot more time with Adobe InDesign which is a very impressive tool. InDesign seems to be the easiest of all the tools to produce something real (and real fast). InDesign is a magazine and publication layout tool, not a graphic design tool, but I thought I’d mention it because I still view all these pieces as being in the same category. To sum up my limited experience, InDesign just seems to work. It does share a lot of the functional approach of Illustrator and PhotoShop, and so I also feel it has some of the same faults. The most interesting thing about InDesign is that it uses file links for displaying images rather than embedding the actual link in the InDesign file itself. This makes it easy to change art content without replacing them on the artboard. And since it can use both Adobe files and regular image types, you can develop your images in Expression Design if you prefer.
A Quick Tour
We’ll take a quick tour of Design for starters and then begin working on a real project. The Design experience is very similar to Blend, so if you already work in Blend then you can skim through this section.
Design has many features, and like Blend they are not always easy to find, but there are four main sections we are going to talk about today. Here is a screenshot of Design with the main parts labeled. And just for the record, I edited all the images for this article using Design.
The Toolbar
On the left is the Toolbar. This is where you will find the tools used to draw on and manipulate graphics. Unlike the Toolbox in Visual Studio, you will not see all the tools listed here at one time, and as far as I know you cannot control the layout and configuration of the Toolbar. Some of the tools are hidden: take a look at the Pen button (4th one down) and you will see a small white triangle in the lower right hand corner. This indicates that are more tools available in this grouping. To see and select them, either click and hold or right click on the button. A small pop out will appear with all the options for that tool group. Selecting one will make it the active tool in that group and update the button on the toolbar. You can return to the previous tool by reselecting it from the list, or if the tool has a hot key (like ‘P’ for Pen) you can select the tool using the hot key and it will automatically become the active tool in that group again.
The Artboard
The large area in the middle with nothing on it is the Artboard. This is where you can see and manipulate the graphics. More on this later, but suffice it to say for now that you will become intimately familiar with it.
The Properties Panel
On the right, much like Visual Studio, is a panel that holds multiple panels. The first and most prominent of these is the Properties panel. Like Winforms in Visual Studio, this is where you set the properties of the selected item. The first thing you will notice is the Color Manager: this is a first rate tool that is intuitive and easy to use. Beneath that, options and panels will appear based on the type of the selected item. For instance, if you select a Text element a panel will appear with options like Font, Size, Alignment, etc.
The Layers Panel
I find layers to be an invaluable tool when developing graphics. Some tools rely on them more heavily than others: for instance, in Illustrator they are largely unnecessary, but in PhotoShop they are essential (and mostly unavoidable.) Design makes them completely optional, meaning that you can create your entire graphic on the single default layer. You will find, however, that not only are layers great for organization, but they make experimentation a lot easier. Also, they are essential when exporting to XAML in certain scenarios. We’ll cover Layers in more detail in a future post, but for now you can just start chanting my Layers Mantra: “Layers are right. Layers are good. I love Layers.” Three times an hour should suffice for now. 🙂
Doing Something Real
OK, so enough of the boring stuff, let’s use Design to actually design something. We are going to create a logo for a new company called “Gracepoint Woodworks.” The requirements are that it use the free video poker how to play backgammon no deposit bonus online casino 888 no download casino play roulette craps game black jack download american roulette play video poker baccarat free casino game no download online casino free money on line casino wagering roulette online online casino betting free online casino slots free craps best casino roulette gambling internet casino gambling uk best casino online full pay video poker no deposit casino code best craps game black jack tournament best online casino site craps online game newest online casino free slots no download play blackjack online free dueces wild video poker black jack gambling online video poker game free casino cash no deposit video poker tutorial play free video poker how to win at black jack casino roulette casino guide how to win at roulette rules of craps casino game online real money backgammon baccarat casino online free video poker game play free video poker video poker odds video poker tournaments Vivaldi font, two specific colors (RGB 71-135-103 for the background and 229-229-22 for the Foreground), stack the two names on top of one another, and use a cross to represent the “t” in “Gracepoint”. Let’s get started!
Create a new document in Design (File -> New) and name the file appropriately. The size isn’t all that important: since these are Vector Graphics we can scale it as needed later. Our logo will be used in both Print and Web media, so we want the Resolution to be 300, which is the max available in Design. Press OK to create the file and begin designing.
The black outline you see are the outer bounds of the document size. You can always adjust your document size and resolution by going to File -> Document Size. Just remember that the art you want to save or export should be defined within these borders.
Adding Shapes to the Artboard
We are going to give our logo an oval shape and fill it with the required Background color mentioned above. To do this, right-click the Rectangle icon on the Toolbar and change the selection to Ellipse. Now drag an ellipse onto the screen. You’ll be able to see the ellipse being drawn as you drag, so you can easily control the shape and size. Size and location don’t matter that much, but make it big enough you can place a couple of lines of text inside. In the color manager, click on the Fill tab on the top left of the color palette. Enter the correct RGB values from above and the ellipse will now be filled with that color.
Adding Text to the Artboard
To place the Text inside, select the Text tool from the Toolbar. Unlike Adobe, we do not draw TextBoxes: simply click where you want to type and start typing. Since we have two lines of text, I would recommend putting each one in its own text element. Go ahead and type them anywhere on the screen. You can then use the Selection tool to drag and drop them to the desired location. You even get a preview outline of the text which helps with locating the object. You can also use the arrow keys to fine tune the location one pixel at a time.
The default color for the text should be black, so let’s change that by highlighting the text and setting the Fill color of the text to the RGB value listed above. While we have the text highlighted, go ahead and select the correct Font from the list in the Text pane of the Properties panel. Adjust the font size in the same pane until it fits pleasingly within the ellipse. Now we should have something like this):
For the final requirement, we need to replace the “t” with a cross. Double click the “Gracepoint” text object: this will put you in text edit mode. Delete the “t” and click somewhere outside the graphic. Ha ha! I tricked you! You should now have a new text object where you clicked. This happens to me a lot, so I wanted you to see it. Since the Text tool is still highlighted it created a new Text object. Ctrl-Z for undo will remove it. You could select the Selection tool first to avoid this, but a quicker way many times is to temporarily override the existing tool. You can do so by pressing Ctrl: you will see the mouse cursor change to the black arrow, so you can click outside the graphic without creating a new text instance. This is another handy feature inspired by Illustrator.
Drawing on the Artboard
Since this is a vector graphic drawing tool, let’s do some drawing! Click on the Pen tool to activate it, then use it to draw a cross shape near where the “t” was. Before you do so, let me explain the Pen tool. No wait, there is too much… let me sum up. (My apologies to fellow TPB fans)
The Pen Tool
The pen tool and its related group are enourmously functional, but it would take an entire post of it’s own to give it fair treatment. For now, I will say that there are two basic ways to use the Pen tool. The first way is to click and release a point, then move the mouse and do it again. This will create a straight line between the two points. Click somewhere else and a new line gets created between the last two points. It will also start to try and fill the as of yet nonexistent polygon: don’t let this freak you out, it will correct itself when you finish the polygon. Keep adding points to finish your shape: when you are ready to close the polygon, place the cursor over the first point and click, which will close the polygon and correct the fill. This is by far the simplest and will work for what we are doing in this project because our cross has all straight edges.
The second way, and the one most graphic designers will use, is the Bezier way. Bezier Curves are curved lines between points that you manipulate with graphical handles. They take some getting used to, but once you get a little comfortable with them you can use them to quickly and easily create virtually any 2-D shape. To try them out, click, drag and release each point. Your results should be … interesting … the first few times you try this. I’ll cover more complex drawing in a future post. For now, use whichever method you are comfortable with to create the shape.
The Eyedropper(s)
If you have created the cross it will probably have a black fill. We could enter the same RGB values we did previously in the same manner to get the same color, but instead we’ll use this as an introduction to the eyedropper tool. Actually, there are two eyedroppers we can use. There is an Eyedropper Tool on the Toolbar. Activate it and hover the mouse cursor over any color on the artboard. When you are over the color you want, drag the color to the object you want to apply it to and drop it on the object. This is pretty cool and easy, but undo that and let’s look at something even cooler.
With your object selected, find the small eyedropper icon in the lower right hand corner of the Color Pallette. Click on it and drag your mouse around the screen. Watch in amazement as your object fill immediately takes on the color of whatever object you hover over. In fact, one huge difference between the two is that with this tool you can hover over anything on the entire screen, including the desktop and other applications! To apply a color, click where ever the mouse happens to be at the time. This will also revert your tool back to the previous selection.
Where We Are
If you’ve been following along, you should have something similar to this (I’ve zoomed in on mine – notice there is no pixelation or loss of clarity:
Not bad for only a few minutes work. Of course, it isn’t ready for delivery just yet: there are lots of improvements left to make to our logo. Next time we will clean our logo up some and see if we can’t add a little graphical goodness. In the meantime, dive in a little and see what you can do, but I warn you: it can be seriously fun and addictive.
Developing For .NET 