Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I will look at the ImageBrush. It is a brush which is used to paint an image on any UI element, not just the image control. For this demonstration, I've decided to use Expression Blend and I've opened a project called DecoratingElementsWithImageBrush. I am going to open this AddingBrushToProject. I find the easiest way to add ImageBrush is to import an image, which I've already done. If I look in the Images folder, I see there are two images in here; Curls.png and grapes.png. I import my image and then I drag my image onto the artboard.
When I do that, Expression Blend creates an image element and sets its source property to the image I just dragged to the artboard. To make a brush is simple. I'll go to Tools, I choose Make Brush Resource, and then choose Make Imagebrush Resource. I have to provide a key name for my brush, I'll call mine, CurlsBrush and then I have to decide where to place my brush; at the application level or in this document or elsewhere. I choose Application level and OK. Now that I've created my brush, I no longer need this image control.
So I'll select it and press Delete. That was so much fun, I think I'll do it again. Grapes, drag, Tools>Make Brush Resource, set it at the Application level, and then click OK, and delete the image. Now, let's use that image brush. I'm going to select my text block and then I am going to go over to my Brushes section. There are a number of brushes over here; for one, there is the Null brush, the Solid color brush, the Gradient brush, a section for Tile brushes, and the area I'm looking for, Brush resources.
I click here and I can see my two brushes; now I just select my CurlsBrush and instantly I've painted the foreground property of the text block. I like that. Let's put one on the border. I'll click on the border, I'll choose the Background property and then I'll select my GrapesBrush. That is hard to read. I set that back to a Null brush. You can set this one a lot of different Brush properties; let me show you. I am going to go to a place called PaintingShapes.
Here, I have an ellipse with a big fat border, custom shape called RegularPolygon, a block arrow and a shape that I created. So I'll select the Ellipse, go to the Fill property, go to my Resources and choose CurlsBrush. That fills the interior of my ellipse. I can also paint the border with the GrapesBrush by clicking Stroke>Brush Resources, and then GrapesBrush, and I can keep doing this from my custom shapes. I'll just show you one more. There is my custom shape>Brush Resources>Curls.
Oh, I did something wrong. I set the Stroke property and there is no stroke or the stroke is very small. I meant to do the Fill, so I'll click Fill>Brush Resources, and then Curl. That's what I wanted. Next, I'd like to show you how to transform the brush. To do that, I am going to choose TransformTheBrush. Here I have a rectangle that has a rotation transform applied to it. You might recall from other movies that you can rotate an item by clicking on the Selection item, choosing your rectangle, and then grabbing the edge of the rectangle near the corner and dragging it around and rotating it.
What I am going to do is I am going to paint the inside of this with my brush and then I am going to transform the brush separately from the shape. I select my rectangle, I choose Fill, I go Brush Resources and I picked this GrapeBrush. Now I want to transform it, so I can do that by going here to the Tile brush section and then I expand this part of the Property pane. Here are the transforms that are applied to the brush. Now here's how you can differentiate. I need to choose one more tool before I can continue.
I need to go over to my Toolbox where this Gradient tool is, click and hold, and choose this thing called the Brush Transform or I could use the letter B on my keyboard. Now let's look at the sizing handles. Right now, I'm transforming the brush. Ctrl+Z to undo. If I hold down the Ctrl key while the rectangle is selected; now I am transforming the shape. No Ctrl key, transforming the brush; by pressing the Ctrl key, I am transforming the shape. Now I am going to let go off the Ctrl key, I am going to go over here to this section again on my Property pane and then I am gong to choose Rotate, and then I am going to rotate the brush.
Notice I am rotating the brush, not the rectangle. Now that I am happy with that angle, I'll go to my Scale transform and I'll make it larger. Once I am happy with that, maybe I decide I want to modify the rectangle a little bit. I'll hold down the Ctrl key and make the rectangle skewed slightly, like so. The ImageBrush is a great way to decorate your UI elements with images and Expression Blend is an easy way to create and transform brushes.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97442 Viewers
61 Video lessons · 84668 Viewers
71 Video lessons · 68871 Viewers
56 Video lessons · 101326 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.