Expression Blend and Design

The team blog of the Expression Blend and Design products.

April, 2009

  • Expression Blend and Design

    Deep Zoom Composer Updated to Support Publishing to DeepZoomPix!

    • 17 Comments

    Hi everyone,
    We have just released another preview of Deep Zoom Composer, and you can download it from the following location:


    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    Quick Intro to DeepZoomPix
    This release coincides with the recent launch of the DeepZoomPix technology preview: http://deepzoompix.com/default.aspx If you haven’t seen DeepZoomPix, it is a technology demo where you can upload and view your images using the Deep Zoom technology found in Silverlight:

    dzp_ss2

    A key part of DeepZoomPix is the viewer through which you can browse and interact with your images. Within the viewer, you have the ability to dynamically change how your images are arranged, play a slideshow, view a thumbnail of all images, as well as tag/filter:

    filtering_ability

    There are a lot of cool things you can do in DeepZoomPix, and you can learn more about DeepZoomPix by reading their FAQ as well watching a video interview with Rado and Matt on how the site was actually created. Janete will have a blog post with more information on DeepZoomPix in the near future.

    Deep Zoom Composer and DeepZoomPix
    As many of you know, not too long ago, we added the ability for you to be able to publish your photos online to PhotoZoom. Based on a lot of requests and feedback many of you have provided about PhotoZoom and the integration with Deep Zoom Composer, we closely followed the evolution of PhotoZoom into DeepZoomPix and were excited to help make Deep Zoom Composer work better with the new service.

    The biggest change is that Deep Zoom Composer will only allow you to upload to DeepZoomPix:

    dzp_ss

    The workflow and the UI are largely the same, so if you have used the PhotoZoom functionality before, everything should look familiar to you with the exception of a few name changes.

    Our primary motivation for moving to DeepZoomPix was to address the large amount of feedback many of you provided us about PhotoZoom. We hope you all find DeepZoomPix to be more reliable and more fun to use.

    Do note that DeepZoomPix is just a technology demo. It is something that we are only planning on keeping until the end of the year (Dec 31st), and after that, we are not sure what will happen to the service. Please do not use this location as a permanent storage location for your photos.

    Before I wrap up this post, a huge thanks to Matt (who you can see in the video interview above) for helping unwind some gnarly technical issues associated with changing Deep Zoom Composer to use DeepZoomPix.

    As always, please send us  your feedback by posting on the forums or commenting below.

    Cheers!
    Kirupa & Janete

  • Expression Blend and Design

    Creating and Editing Gradients in Expression Blend 3 Preview

    • 6 Comments

    One of our goals for Expression Blend 3 is to provide better tools and user experience for visual designers. At a high level, we prioritized features that allow the designer to keep their focus on the artboard more often. This translated into an improved selection model, predictable layout, familiar and efficient keyboard shortcuts and a flexible and powerful gradient editing experience. This blog post is the first in a series that will highlight features and improvements targeted to the visual designer. Let’s start with the new gradient editing tools. The UI is subject to change for the final release but this overview should give you an idea of the features available in the Preview.

    GradientToolUI

    For Blend 3 we have separated out the Brush Transform tool into two different tools, Gradient and Brush Transform. The Gradient tool allows you to create and edit the properties of linear (LinearGradientBrush) and radial (RadialGradientBrush) gradients on the artboard. The Brush Transform tool allows you to transform any brush type by modifying the translation, rotation, scale and skew. These values are stored as a part of the RelativeTransform property on the brush. Separating out these tools gives you greater control and predictability of which properties are edited, creates cleaner XAML, and makes it easier to animate and bind gradient properties.

    All you have to do to create a gradient is select the Gradient tool in the Toolbar or press the ‘G’ keyboard shortcut and click and drag to define the start and end points.  This creates a gradient for the selected object and sets start and end point to the same positions that you clicked and released the mouse.

    The Gradient tool adorner shows the start point, end point, individual stops and the selected stop. Now you can use the adorners to edit the start (StartPoint) and end (EndPoint) of the gradient by rotating and dragging the adorner. To add a new stop press Alt and click anywhere on the line (Note: In the final release you will not have to press Alt, just click and release). To change the position of a gradient stop (Offset) just click and drag it along the line. To remove a gradient stop click and drag it off the line. To edit the color just double click on the stop and a color picker is displayed where you can select a color for the stop.

    ColorPopup

    Another really useful feature for editing gradients is the Gradient eyedropper. This is located in the color editor in the Brushes panel when you have an object with a gradient selected.

    GradientEyedropperUI

    Just select the Gradient eyedropper and click and drag anywhere inside or outside of Blend to grab a gradient.  For example, if I have a picture displayed in my browser with a nice gradient I can easily apply this gradient to my shape using the Gradient eyedropper by clicking and dragging:

    selecting_my_gradient

    Once the gradient has been selected, you will notice that your selected element in Blend now features the range of colors you selected earlier:

    selected_gradient

    The range of colors I picked in the above example was pretty simple, so you are able to see the four gradient stops and the colors they represent. For more complicated source images, you may have stops that are located close to each other. To adjust these stops, just zoom in to create more visual space between the stops on the artboard so that it is easier to select and edit them.

    Closing Tips
    By using the Gradient eyedropper, it can be easy to get some pretty complex gradients. Have you ever wondered how to reset the gradient back to the black to white default?  Blend uses the gradient from the object that was last selected. 

    1. Set your object to No brush in the Brushes panel.
    2. Select none by clicking on an empty area of the artboard or pressing Ctrl + Shift + A.
    3. Select your object and then select the Gradient brush tab.

    There are also a few additions in the Brushes panel that will help you create and edit gradients.

    • Use the Offset editor to specify a value numerically.
    • Reverse the order of your gradient stops with the Reverse gradient stops button.
    • Select the previous or next gradient stop using the gradient stop iterator. This is useful for selecting stops when you have two stops with the same or very similar values.
    • Hover over a stop to get a tooltip of its offset and color value.

    Finally, there is also an Advanced properties section for the Brushes panel that includes other brush properties like MappingMode, SpreadMethod and RelativeTransform:

    brushesPanel2

    Well, that’s the overview of the new gradient editing features in Expression Blend 3 Preview! I hope you find it easier to work with gradients.

    Joanna

Page 1 of 1 (2 items)