#526 – Use Adobe Kuler to Create Color Themes

March 30, 2012 2 Comments

Adobe has created an online app, Adobe Kuler, that allows you to easily create sets of themed colors based on a starting color or an image.

You can create a set of colors starting with a single color by selecting the From a Color option and then selecting one of the rules.  (E.g. Analogous, Monochromatic, Triad, etc).

After you pick the rule, you can click and drag on the center circle (with double outline) to change the starting color.  You can also click on any of the other circles to effectively change the rule.

You can also generate a palette of colors by starting with a picture.  Here’s a set of colors based on a picture of my shed.

After Kuler generates the initial palette, you can  drag the little circles around to change which spots in the picture it uses to generate the palette.

 

Advertisement

Filed under Miscellaneous Tagged with , ,

#525 – Use the Eyedropper Tool to Copy Colors

March 29, 2012 2 Comments

You can use the Eyedropper tool  to copy colors or gradients from one control to another.

Start by selecting the control that you want to copy colors to.  In the example below, we want to copy both the background gradient and the foreground color from the top button to the bottom button.  So we start by selecting the bottom button.

Next, select the Eyedropper tool.

The cursor will change so that it looks like an eyedropper.  Move the cursor over the control that you want to copy colors from.

Then left click on the control that you are copying colors from.  Both the foreground and background colors are copied to the control that you originally selected.

Note that when you use the eyedropper tool to copy colors, all properties that have color values in the source control are copied to the target control.

Filed under Blend Tagged with , ,

#524 – Using the Zoom Tool to Zoom on the Artboard

March 28, 2012 Leave a comment

There are a number of ways to zoom in and out on the artboard.  The easiest way to zoom is to use the mousewheel, rolling it forward to zoom in or backwards to zoom out.

You can also use any of the keyboard shortcuts listed below:

  • Ctrl-+ (plus) : Zoom in
  • Ctrl– (minus) : Zoom out
  • Ctrl-0 : Zoom to fit entire window (also centers window in artboard)
  • Ctrl-1 : Zoom to actual size (100%)
  • Ctrl-9 : Zoom to fit selected control(s)

You can use the Zoom tool by clicking on it or pressing the shortcut key Z.

Once you’ve selected the Zoom tool, you can do any of the following to zoom in or out:

  • Left-click and drag to select the elements that you want to zoom in on
  • Left-click to zoom in
  • ALT-left-click to zoom out
  • Dbl-click the Zoom tool icon to zoom to 100%

 

Filed under Blend Tagged with , ,

#523 – Panning the Artboard in Blend

March 27, 2012 Leave a comment

The Pan tool allows you to change the portion of the artboard that you are viewing, by sliding it to one side or the other.

Much easier than switching to the Pan tool, you can also pan by holding the spacebar down and dragging with the left mouse button held down.  This allows dragging the artboard in the desired direction and has the advantage of not switching to a new tool.  When you’re done dragging, the original tool is still selected.

As you drag with the spacebar held down, the cursor changes to the image of a hand.

The Pan tool on the tools panel can also be used to center the currently selected item in the artboard.  Just double-click on the Pan tool icon.  The currently selected object will be re-located to the center of the artboard, with the zoom level left the same.

Filed under Blend Tagged with , ,

#522 – Keyboard Shortcuts in Blend

March 26, 2012 1 Comment

Blend provides keyboard shortcuts for a number of common operations.  Here is a list of some usefule keyboard shortcuts.

Shortcuts for Design mode on Artboard

  • V – Selection tool
  • A – Direct Selection tool
  • H – Pan tool
  • Z – Zoom tool
  • O – Camera Orbit tool
  • I – Eyedropper tool
  • F – Paint Bucket tool
  • G – Gradient tool
  • B – Brush Transform tool
  • P – Pen tool
  • Y – Pencil tool
  • M – Rectangle tool
  • L – Ellipse tool
  • \ – Line tool
  • T – Insert currently selected text or label control: TextBlock, TextBox, RichTextBox, PasswordBox, Label or FlowDocumentScrollViewer

Shortcuts for working with objects on Artboard

  • Ctrl+C – Copy
  • Ctrl+X – Cut
  • Ctrl+V – Paste
  • Ctrl+Z – Undo
  • DELETE – Delete
  • ALT+drag object – duplicate an object
  • Ctrl+G – Group objects into panel
  • Ctrl+left click – Select multiple objects

Other Artboard shortcuts

  • Space+Left mouse drag – Pan artboard
  • Ctrl+= – Zoom in (+)
  • Ctrl+- – Zoom out (-)
  • Ctrl+0 – Zoom to fit entire window
  • Ctrl+1 – Zoom to 100%
  • Ctrl+9 – Zoom to fit selected

Filed under Blend Tagged with , ,

#521 – Pen and Pencil Tools Both Generate Path Elements

March 23, 2012 Leave a comment

Whether you use the Pen tool or the Pencil tool in Blend, you’re generating a Path element, which just defines a series of line segments or curves.  Using either tool in Blend results in the Data attribute of a Path element being set to a string containing markup that represents individual drawing commands.

In the example below, the first Path was created using the Pen tool, while the second Path was created using the Pencil tool.  Looking at the Path elements in XAML, there’s no information telling you which tool Blend used to create the corresponding XAML.

You can also use the Direct Selection tool on either Path to modify individual points.  The path created using the Pencil tool will typically have more points, since it puts down a series of points as you drag your mouse pointer.

Filed under Blend Tagged with , , , , ,

#520 – Drawing a Path with the Pencil Tool

March 22, 2012 1 Comment

The Pen tool lets you create a new Path element by drawing the path as a series of line segments or connected curves.  You can also create a Path using the Pencil tool, which allows freehand drawing.

To use the Pencil tool, first left-click to select the Pencil on the tools panel.  If the Pen is currently visible, you’ll need to left-click and hold the left mouse button down until you see the popup menu showing the Pencil.

Once you select the Pencil, the cursor will change to look like a pencil and you can draw a freehand path by left-clicking and holding the left mouse button down.

Notice that this tool creates a Path element in XAML, just like the Pen tool.

Filed under Blend Tagged with , , ,

#519 – Adding Points to an Existing Path

March 21, 2012 Leave a comment

You can add points to an existing Path object in Blend by using the Pen tool.

Start by selecting the existing path.  First, click on the Selection tool in the tools panel.  

Then left-click to select the existing path.

Now, click on the Pen tool.  

At this point, you can add points to create a new Path object, or add points to the existing Path.  You’ll notice that if you hover the cursor over the existing path, it changes so that it include a little “+”, rather than an “x”.  The “+” indicates that you can add a point to the path.

If you left-click on the path, you’ll add a new point at this location on the curve.

You can also delete existing points by hovering over them and left-clicking.

Filed under Blend Tagged with , , ,

#518 – Change Points in a Path Using the Direct Selection Tool

March 20, 2012 Leave a comment

You can modify points in an existing Path object in Blend using the Direct Selection tool.

Start by using the Selection tool to select the existing Path.  

Now select the Direct Selection tool  , which then allows you to select individual points in the path.  The path object will change to show each individual points as a little square.

You can now left-click to select individual points on the path.  After selecting a point, you can left-click and drag the point to move it.

You can also adjust the curved segment on either side of the point by left-clicking and dragging the handle on either side of the point.

Finally, you can delete a point entirely by selecting it and pressing the DELETE key.

Filed under Blend Tagged with , , ,

#517 – XAML Output when Drawing with the Pen Tool

March 19, 2012 1 Comment

When you use the Pen tool in Blend to draw a path, Blend will generate a Path element in the corresponding XAML for the window or page.  The data representing the geometry of the actual path is located in the Data attribute of the Path element.

Filed under Blend Tagged with , , ,

← Older posts