Top Navigation

LED Cinema Display in Fireworks

February 25, 2009 from fabiano's blog

We've been using 2 templates in our Wallpapers of the Week articles: the iPhone and the new Apple Cinema Display 24. The iPhone frame we had already shown you how to create it in Fireworks. Now it's time to make the new Apple's display in only a few steps. Take a look and let me know what you think.

STEP 1

Open a new file with the canvas 625 x 625px. Create a rectangle that fit the canvas and fill it with a Radial Gradient with the colors #000 and

LED Cinema Display in Fireworks

STEP 2

Let's start creating the monitor. Draw a rectangle (538x360px). Fill with #000 and border 2px #CCC. Add a Inner Shadow with #FFF and the values: 0 - 65% - 2. Also, set a round corner of 10%.

LED Cinema Display in Fireworks

STEP 3

To create the support of the display, we need to use the Pen Tool. Draw a shape like the picture, than apply a Linear Gradient. The colors for this gradient and the positions of them are: #494949 - #C7C8CC - #C7C8CC - #FFF - #FFF - #C7C8CC.

LED Cinema Display in Fireworks

STEP 4

Now we need to duplicate this support to create a shadow. So after duplicate it, move it a nudge down a little bit; send it to backward and apply a Drop Shadow with the values: 4 - 40% - 4 - 270º.

LED Cinema Display in Fireworks

STEP 5

We need to create the canvas of the display. Draw a rectangle inside of the rounded rectangle and fill it with a nice background image, like your own desktop. Here we're using an image from James White, you can download here if you want.

LED Cinema Display in Fireworks

STEP 6

To create the reflectin on the display, firstly, we need to duplicate the rounded rectangle and bring it to front. After that convert this rectangle to path (just ungroup!). We must create 2 new dots with the Pen Tool and after that delete other ones. See the picture below for reference.

LED Cinema Display in Fireworks

STEP 7

Now just apply a Linear Gradient from #FFF to #FFF. At the bottom of this gradient change the opacity to 0. Also use 40% opacity to the entire path. After that, just move this path 2 pixels left and 2 pixels bottom.

LED Cinema Display in Fireworks

Final Result

We can put an Apple's logo at the bottom and a very small circle at the top to simulate the camera. Now we have a beautiful vector Apple Cinema Display to play with some backgrounds, wallpapers or website layouts. It's definitely an awesome way to show off your work or present them to clients.

LED Cinema Display in Fireworks

Download the Fireworks file

Click here to download the Fireworks file.

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

More articles about:

Comments and Reactions

Featured Tutorial

Photoshop Quick Tips #10: Using Pattern Overlay
Today I am going to be showing a real simple tip on Photoshop that a lot of people don't know about and it can be very useful. Creating patterns and making patterns overlay can save you a lot of work and also can look really good if you know how to use it right.

Try this Wallpaper

Wallpaper of the Week 20
Wallpaper of the Week 20
Another week and another great wallpaper for you. This week is very special because it's a another fantastic design created by Guilherme Marconi, this time however he designed the wallpaper with the user needs in mind, it's darker and with less elements, simply perfect. For more information about Marconi's work, visit his new website with an updated portfolio and much more at http://marconi.nu

Book Suggestion

Book Suggestion: Visual Complexity - Mapping Patterns of Information
Book Suggestion: Visual Complexity - Mapping Patterns of Information
The book of this week is a book I just got from a friend. It was in my wish list for a long time. The book is called Visual Complexity: Mapping Patterns of Information and as the reviews says, it's about our ability to generate information now far exceeds our capacity to understand it.