Magic Cup Coffee in PixelmatorListThumbs

Magic Cup Coffee in Pixelmator

October 25, 2009

Pixelmator is a very powerful image editor; you can create all sorts of effects using it. Because of that I decided to recreate some images and tutorials that I previously did using Photoshop in Pixelmator. You will see that you can do pretty much everything with Pixelmator, and usually faster.

This tutorial is very useful for beginners or those users willing to learn how to use Pixelmator. You will learn how to create light effects, text effects and other nice tricks.

Step 1

Open Pixelmator and create a new document. I used 1920×1200 pixels. Then go to View>Show Gradient. Create a new gradient using Brown and Black for the colors. Also select the Radial type, then fill the background with the gradient, like the image below.

Magic Cup Coffee in Pixelmator

Step 2

Download the Office Space icon set at www.vistaicons.com and import the coffee cup icon.

Magic Cup Coffee in Pixelmator

Step 3

Using the Type Tool (T), type some texts, using white for the color. I created two layers of text.

Magic Cup Coffee in Pixelmator

Step 4

Select one text layer and go to Layer>Rasterize Type Layer, then go to Edit>Transform>Rotate 90º CCW. Move the text layer so it will be coming out of the cup. Use the image below for reference.

Magic Cup Coffee in Pixelmator

Step 5

Go to Filter>Distortion>Twirl. Use 350 for the Radius and -40 for the Angle. Use the image below to understand how to use the controllers of the filters in Pixelmator.

Magic Cup Coffee in Pixelmator

Step 6

Repeat the same technique to apply the twirl effect to the other line of the text.

Magic Cup Coffee in Pixelmator

Step 7

Add a new layer, and, using the Paint Bucket Tool (N), fill the layer with black. Select the 2 text layers and the black layer and go to Layer>Merge Layers. After that, change the Blending to Color Dodge.

One more thing that is necessary in this step is adding some blur to the text. Go to Filter>Blur>Gaussian Blur. Use 2 for the Radius. If you want, you can add more blur.

Magic Cup Coffee in Pixelmator

Step 8

Add another layer and fill it with black. Then change the Blending to Color Dodge. Select the Brush Tool(B) and, using a regular soft brush, paint some light with white. Use the image below for reference.

Magic Cup Coffee in Pixelmator

Step 9

Create another layer and fill it with black again. Change the Blending to Color Dodge and, using the Brush Tool (B), paint a sort of splash coming out from the cup. After that go to Filter>Blur>Zoom Blur. Use 65 for the Amount; that will create a nice burst effect coming from the cup.

Magic Cup Coffee in Pixelmator

Step 10

Let’s add some sparks. Pixelmator comes with a very nice set of brushes; one of them is Stars. So first add another layer and fill it with black, and change the Blending to Color Dodge. After that, using the Brush Tool (B), select the star brush and paint some sparks, using white for the color. You can add a bit of Gaussian blur to the stars as well.

Magic Cup Coffee in Pixelmator

Step 11

Create a new layer on top of the others and go to Filter>Generator>Clouds. Make sure you are using black and white for the colors and generate the clouds.

Select the clouds layer and go to Layer>Add Layer Mask. Then, using the Brush Tool (B) and black for the color, paint over the mask layer to hide some areas of the cloud. Use the image below for reference, and make sure you have smoke only over the cup.

Magic Cup Coffee in Pixelmator

Step 12

Once you have the clouds properly created and masked, change the Blending to Color Dodge. You will have a very nice light effect.

Magic Cup Coffee in Pixelmator

Conclusion

In this tutorial we covered some variations of blur filters, the twirl filter, also how to use the gradient tool, the brush tool and, of course, the Color Dodge blending mode for creating light effects. Pixelmator has really improved, and with the addition of the Brush Engine, the Clouds Filter and the Noise Filter, Pixelmator is a very complete tool for graphic designers, digital artists and enthusiasts like me :)

Magic Cup Coffee in Pixelmator

About the author

User picture

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

14 Comments

late_cow10/25/2009

great tutorial !
___________
http://lateant.deviantart.com/

arkncheeze10/25/2009

A neat effect... :) Just asking pixelmator is for mac only right? If it is so, then sad I don't own a mac. :(

Carstyler1110/25/2009

cool idea, thanks for sharing :)

http://carstyler11.deviantart.com/

Macola10/25/2009

Excelente... ! Me gusta..

zeemiDesign10/25/2009

Question for the author: Do you prefer working with photoshop or pixelmator?

ejm39910/25/2009

Great tutorial! Thanks!

http://emeyers399.deviantart.com/

WiLL >.<10/25/2009

Muito bom :D
obrigado Fabio!

ciccio91gow10/25/2009

woow! very cool!

DesignTuts10/26/2009

Great Effect...... congratulations..

__
www.designtuts.com.br

Victoria10/26/2009

Posted by John Martz on Drawn! The Illustration and Cartooning Blog |

Alexandra Sleightholme10/26/2009

A couple months back I got a Samsung NC10 Netbook. I had been on the fence for a long time, trying to decide among the an Eee PC from Asus, the MSI Wind, and the Samsung NC10. Right about the time I was going to finally do it, the ASUS Eee PC 1000HE was announced. I read a lot of reviews from folks who'd bought those netbooks and eventually settled on the NC10. The main deciding factors, in order, were:...

@don–bruno10/30/2009

Na verdade eu acho que vc esqueceu de dizer como transformar a cor das letras.
I think you forgot to tell how change the letters color.

Varcolacu11/01/2009

Hi!
It's me again, Varcolacu :D
I think it's okay now to post another video tutorial made after your excelent tutorial :D
This time, i made it a little bit longer : http://www.youtube.com/watch?v=brXKgchZlJM
I hope that i ain't pushing the limits by posting this second video.
As i did in the past tutorial, credits go to you guys :D
PS. Well done for another great tut :D

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?