Quartz Tutorial: Gradient Image Reflection 10


Quartz Tutorial: Gradient Image Reflection


As a new series that will take place over the next coming months, I am going to post tutorials on Quartz Composer. They are designed to be simple and easy to follow, and over the coming months they will get more and more complex. We will start easy and gradually get harder and harder to produce cooler effects. If you haven’t already, I would suggest you look through An Introduction To Quartz Composer, it will show you all of the basic principles to quartz, including how things work. If you haven’t already guessed this project will show you how to create a fading gradient reflection. It is very basic but it will show you the ropes. An example of what we will be creating is shown below. You can click on any of the images for larger version with more detail. All connections between Patches use double arrows, for example height on one Patch would connect to Crop on another Patch would be represented like this. Height >> Crop. If you want to learn more about Quartz Composer I recommend Learning Quartz Composer

Step 1) The first step, as always, is to make a new blank file. Pick the default option in the new pop-up window when opening Quartz Composer. The default files are good but we are making something from scratch that doesn’t fit into any of these categories.

Step 2) Once as you have opened up your new file, go to the Patch Creator pane (from the toolbar) and search for Image Downloader. This will be the first Patch that will be used to pull our image from disk. Right click on the Patch and select Published Inputs > Image Location. This will make the file path availble for use when we are running the composition. Once as you have done this click on the Patch Parameters button in the toolbar again and type in the path of a suitable image. Don’t make the image you pick massive, a nice small image is best. One is included with the source pack.

Step 3) To render out image insert the Sprite Patch. This Patch is used to render nearly anything. The other which you can use is Billboard, although it doesn’t have some features we need. Once as you have inserted join Image >> Image. The image isn’t in proportion so we will have to fix that.

Step 4) Insert the Image Dimensions Patch. This will be used to correct the dimensions of the sprite. Connect Image on the download to Image on the dimensions Patch and Aspect Ratio >> Height. Once as this is done change the Parameters of the Sprites Y Position to 0.5.

Step 5) Duplicate the first sprite by pressing Command + D. Connect Aspect Ratio >> Width. As well as this in the Parameters pane change the Y position to -0.5 and the blending to Over. The over part will be used later for the transparency.

Step 6) We now need to insert out image and flip it upside down. Insert an Image Texturing Properties Patch and connect Image >> Image from the downloader and Image >> Image from the new Patch to the Sprite. Edit: Within the Texturing patch in the Parameters add in 1,-1,0,0,1 going down the list values. This will flip the image accordingly.

Step 7) As with any programming application there are many ways to accomplish the same task. This next stage could be done very simply with a black to white gradient image, but that would be boring. This method will enable you to use a different image as well as introducing a couple of different Patches.

To make the reflection transparent insert a Linear Gradient Patch and two RGB Color Patches. Connect Color >> Colour 1 and 2 respectively. Change the first RGB Colour Patch Parameters to 1,1,1 and an Alpha to anywhere between 0.3 to 0.7. This will be used to make the reflection more subtle. The second color patch change it to 0,0,0,0.

In the Linear Gradient Patch connect Pixels High >> Point 1 from the Image Dimensions Patch. In the Parameters pane change Point 2 (X & Y) to 10 respectively. This will produce a horizontal white to black gradient. If you hover over the output colour node it will show you a small preview. The white may look a bit grey due to the opacity in the first colour.

Step 8) Currently the Linear Gradient Patch output has infinite dimensions which Quartz cannot render. This is solved using the Image Crop patch. Insert this and connect from the Image Dimensions Patch Pixels Wide >> Crop Width and Pixels High >> Crop Height.

Step 9) The final step is to insert a Clear patch. This will put a blanket of colour onto the background. You will need to change the order. This is done by clicking on the small yellow square with the number and changing the Clear Patches layer number to 1. This will but the patch at the bottom and everything else on top.

The blending mode that was changed on the second sprite when it was first inputted, enables the transparency to take full effect. It doesn’t matter so much when the background is black but if you change the clear colour in the Clear Patch to orange, for example, you will notice that the reflection is still see thru, if you change the blending mode back to Replace, as it would have been there would still be a small amount of black. These blending modes will be discussed more in the future.

Step 10) As a final step I have added notes around the various areas. It is always a good idea to add notes to what is happening. It makes it a lot clear when you come back to it what each bit means. To add a note simply right click on the grid area and select Add Note. You can then added a description. You can change the colour by right clicking on the note and selecting it from the menu.

Hopefully you have understood everything I have said, and you can complete this project successfully. If you want your can download the project files including the composition here. Any questions are comments please leave one below. In the next couple of weeks I will be writing a more advance tutorial to build on top of this one.

If you want to learn more about Quartz Composer, Learning Quartz Composer, from Amazon is a great book.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips