Blend Candy – Popcorn

Sub Heading 5

Anyone want popcorn? Here’s my Blend version of it!


Using Blend 2 this is how I made it.

1. Start with a plain old rectangle, were going to make the front face of the container.


2. To give the rectangle a 3-D effect

i ) Object > Path > Convert to path

ii) Choose the “direct selection” tool in the left hand toolbar  (second from the top)

iii) Move the 4 corners of the rectangle, at the dots, to points where you feel will give it the look you want. 


3. Were going to do the top of the container, again very similar to step 2 in that we convert it to a path then through direct selection we will move the corners to the positions we want.


4. Now were going to go give the front face some shading. The yellow highlighted areas are the major factors that define the gradient.



a) #FF4C4A4A

b) #FF817D7D

c) #FF817D7D

d) #FFC1B6B6

5. Next were going to tackle the blue stripes. Take note of the yellow highlighted areas.

The stripe is made using the Pen tool. I easily plotted the 4 corners of the blue area taking care that the edges lay on the edges of the parent container. 


The gradient for the stripe is a “Linear gradient” that is configured as follows


a) #FF0254B3

b) #FF03C0F7

6. Next repeat step 5 four more times to get all the stripes. At this point I grouped them into there own canvas to make the layout clean.


7.Next were going to do the front face lighting effect.

a) Create a white rectangle with a width the size of the area we want the reflection to overlay. (look at the width edges of my rectangle)


b) Next convert the rectangle to a path – using “convert to path”. Then fix up the bottom edges so that they are positioned to where you want them, giving that 3-D effect.


c) Next turn the fill into a “Gradient brush” of type “Linear gradient”. Make both gradient points white. On the left gradient point give it an “alpha” value of “33%”. Finally give the overall appearance an “Opacity” of “58%”. This gives it that glass/lighting effect.


8. For completeness add the word “Popcorn”. That’s the front face done.


9. Next we work on the top. Create another copy of the top shape. This is going to be used to give the top a 3-D look.


10. The shape on the right will be the inner part of the top container. Following the yellow highlights give it a “Gradient brush” of type “Radial gradient”. If you click on the “brush transform” tool on the left you will be able to play with the gradient positioning and lighting, get it looking the way you want.


11. Now working on the other shape on the left we will do a similar job of giving it a “radial gradient” but what we want to do is give it a lighter shad of gray. Why we do this will hopefully make sense in the next 2 steps.


9. Now we overlay the right shape over the left shape. Make sure they are perfectly overlapped.


10. Next we use the “direct selection” tool from the left tool bar to make the top shape a fraction smaller then the shape it sits on. This will give it the 3-D top-to-bottom look for the popcorn box. It’s not perfect 3D lighting but because we will be adding popcorn to this container it will suffice.


11. Now we make 1 leaf of the popcorn.

a) Add an ellipse

b) give it a stroke thickness of 4 and stroke color of #FFEAC332

c) give it a “gradient brush” fill of type “radial gradient”. The left point should be this color “#FFFCF8E6” the right point of the gradient should be this color “#FFEDCD50”. Using the left “brush transform” tool will let you position the lighting on the ellipse the way you want, play around with it to get the desired effect.


12. Next make the ellipse a path by using the “convert to path” option under “object > path”. Then play with the points to get the desired effect.


13.  Next make 3 copies of the above shape and make another ellipse shape. Play with the ellipse to get an effect similar to the one in the picture. This ellipse will form the center of the popcorn. Lastly group all 4 shapes into a single canvas.


14. Next assemble these 4 shapes into a popcorn. Yippee we made a single popcorn!


15. Now make a dozen or so copies of this popcorn. Lay them out on the parent canvas then individually resize and rotate them to give them a unique look!


16. Lastly lay each popcorn into the popcorn container making it look like the popcorn is falling out of the popcorn box! You will need to use a combination of “Order > Bring to front” , “Order > Send to back”


That’s it. Get your copy of the popcorn here!

6 responses to “Blend Candy – Popcorn

  1. Thanks for detailed explanations here and for your entire really priceless job on your site.
    This one was my guide to Expression Blend use,
    it was my first time when I opened it and created your popcorn (real fun).

    Can you please explain how did you “clean” Bland xaml. Using my example I tried to remove window and grid tags but still was getting errors like: “Unknown attribute Margin on element Path.” Can you provide me with some recommendations how to do it properly?


  2. Hi oksana and thanks for your statements. What do you mean by “clean” your xAML? Did i mention that somewhere in my post? If so i’ve completely forgotten what i mean by that statement.

    If i interpret correctly cleaning xAML is difficult without intellisense on the code pages. The only way i’ve been able to get clean xAML is to use the blend application only (not hand written xAML).

    Similarly if i did need to hand type xAML i would have the help files readily available.

    My appologies if i’ve misinterpreted your question.

  3. Hi, sorry couldn’t answer earlier.

    By “cleaning the xaml” I meant removing the tags like Window, Grid, est. we get in Blend xaml.
    May be my trial version of Bland doesn’t have enough project types? I can select only Standart.exe while creating the project and get Window object with Window tag as main canvas and grid inside it.
    Path object I created had Margin attribute and while running that xaml with my .Net application’s page I got error “Unknown attribute”. Many other attributes were “unknown” as well.
    When I copied xaml from Blend I removed Window and Grid tags and inserted the rest of xaml into the canvas object on my xaml page.
    I think I missed something here.
    If your popcorn xaml was taken directly from Bland it looked different than mine.


  4. Kemiskinan bukan hal yang memalukan Tetapi kemalasan dan pesimisme barulah menjadi hal yang memalukan

  5. Jangan yakinkan diri bahwa dia menyukaimu hanya karena dia bersikap manis padamu Kadang kamu hanya sebuah pilihan ketika dia bosan

  6. Science is the most useful legacy in a life Science is more useful than treasure No one got lost because science while many people lost because of treasure

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s