LED Cinema Display in Fireworks

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.


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


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


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


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


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


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


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.

fabiano's picture
Fabiano Meneghetti

I’m a UX / Web designer and manage business and projects at Zee. Also I love to spend some hours on our main projects Openjobs and as a writer and contributor here on Abduzeedo..

Sponsored Ads


Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple