May 14th, 2012

Clipping Path nuance in WPF/Silverlight/WP7

When you’re working with clipping paths in WPF and/or Silverlight there is a little nuance that you need to know about. If the alignment of your path and the item your are masking are different you’ll get some pretty bizarre behavior. The item your masking will appear in the correct position, but the clipping path will appear offset.

The default orientation of a path is “Stretch” – this is not what you want in most cases.

Make sure that the alignment of both your Image (in this case) and your Path are set to ‘Left” and “Top”, otherwise your clipping mask will be offset.

This one stumped me for a while, so hopefully this saves someone else time.

 

 

 

 

 

You can quickly apply your clipping path to the item by selecting both the path and the item and then right clicking -> roll over PATH -> and select Make Clipping Path.

January 24th, 2011

Getting a printable image from a still-screen capture.

Getting a printable image from a still-screen capture.

    Software tools needed.

  • Adobe Photoshop (or other photo manipulation program with the ability to switch color mode from RGB to Index)
  • Windows or Mac OS

Have you ever had a client ask you to get a screen capture of some software, or a website, or anything that can appear on screen and then include that screen shot in a printed proposal? If you have, you have probably run into the following problem. When you create your screen capture and go to print it out the image become extremely pixelated and looks aweful. Here is the solution to that problem.

  1. First of all you have to know how to make a screen capture. It’s easy on both a PC and Mac. On a PC you simply hit the Print Screen key on your keyboard. On a Mac you hit Shift-Ctrl-Open Apple-4and then drag the little target around the area you want to capture. Once you’ve done this the image data is stored on your clipboard.
  2. Next, open up your image editing software (Photoshop, Photoshop Elements, MS Paint, etc).
  3. Once the program is open you want to create a new blank canvas. File > New.
  4. Once the new canvas is open hit ctrl-v or Edit > Paste and the image data you saved to your clipboard will show up in your image editing software.

At this point you can save the image but if you try to print it you’ll notice all the pixelation. The reason for this that screen resoltuion is 72dpi and Print is usually a minimum of 180dpi. That brings us to the solution. This is more of a graphics trick. What we’re going to do is trick the computer into giving us more pixel data than we actually have. It’s rather clever.

  1. First, in Photoshop go the the Image menu and select Mode and change the image to Indexed Color. Image > Mode > Indexed Color as shown in figure 1.1

    Change Color Mode to Indexed Color
    Figure 1.1

  2. Next, we’re going to blow up the image. Usually this will pixelate the image but because we’re working in indexed color mode the effects are not as severe. Go to Image > Image Size and increase the Resolution to 300. as shown in figure 1.2

    Change Resolution to 300
    Figure 1.2

  3. Finally we’re going to change the color mode back to RGB. Image > Mode > RGB and save the file. Now you have something you can work with for print.
January 21st, 2011

Santa