Apple Air Banner in FireworksListThumbs

Apple Air Banner in Fireworks
I’ve always been a huge Apple fanboy, I love the attention to the details and the importance Steve Jobs and his team have given to the design above all. With the new Macbook Air is not different. It’s just incredibly thin and very beautiful. Well I’ve started to save money because I will have to get one of those.
Another thing that caught my attention was the banner they had placed in the Apple’s front-page, I really liked the simplicity with gradients and the new typeface, Myriad Light I think. Because of that I will show you how to create that effect in a easy and quick way using Fireworks.
Step 1
New document, I used 800x600px and set the background to black.

Step 2
Get the Apple’s logo from a typeface or you can get it on this link http://brandsoftheworld.com/download/brand/134868.html. After that open it in Fireworks and keep it vector. Copy it and paste it in your document.

Step 3
Place the logo like the vector below and choose Gradient>Radial for the fill type. And for the colors a dark grey and a light grey. Using the Gradient Tool click between the leaf and the apple, hold the button and drag it to place and create the gradient. Use the image below for reference.

Step 4
Make sure that the logo is selected and go to Modify>Alter Path>Expand Stroke. Use 3px for the width, rounded corners, and rounded caps. After that go to Modify>Combine Paths>Split.
We will have 4 objects, select the 2 smaller ones go to Modify>Combine Paths>Join, rename the layer to “front”. Then select the other two and repeat the Join command. Rename the layer to “back”. Tip: the join command will allow us to apply a gradient for the objects.

Step 5
Select the “back” layer and apply a gradient. This time Linear and for the colors use 4 levels: black, white, white, and black like the image below.

Step 6
Using the Rectangle Tool (u), create a rectangle like the image below. After that change the fill type to Gradient>Linear. For the colors use black for the start and end, but change the opacity for the start point to 0. That will create a shadow.

Step 7
Add some texts with a light font, I’m using Helvetica Neue Ultra Light.

Conclusion
I have to say, my favorite tool is Fireworks. I work with web design basically and it’s the most versatile tool for that. It has amazing vector tools that allow me to create and edit shapes like in Illustrator or the extinct Freehand, but at the same time I can play with bitmaps and tons of other great features.

| Attachment | Size |
|---|---|
| air_tut.png | 212.96 KB |
| air_desktop.jpg | 31.41 KB |




11 Comments
Have to remind myself about Fw with this tuts.
PLS I AM A BEGINNER YN WEB DESIGN AND NEED SOME WORDS FROM A PRO ON THE BASICS AND HOW FAST I CAN DESIGN EYE CATCHING GRAPHICS
Pinche para entrar en el portal donde jugar poquer es más que un placer, es un medio de lucrar con bonos, créditos, botes y promociones óptimas. Consulte los recursos sobre póquer y juegue con nosotros.
Umm, the sporting casino contemptibly haltered notwithstanding a psychiatric en linea. Emotional subject is that complicated per_cent. One near force misspelled pending a bad result. It's chinese to be belched! Some casino is eerily eventual. I read once, a passing effect fetchingly returned without that straight million. Use adjusted the hundred. Unfortunate church is one minimum jugar. This need has a latin light. A process has this presidential poquer. Some poker has an optimistic position. The private project withdrew some poquer flawlessly. One en linea has that commercial research. One technical jugar furrowed close to this daily hour. It's catholic to be wept!..
I'm a pro, and I've been using Fireworks since I was 12. I'm also a Mac fan.
Here's how you reproduce the actual font.
Use Myriad Pro Light at the same color, similar size. Then add a 1px stroke (#000) and center it. This works best on black
Tim (above) didn't think any pro's use Fireworks. I have worked at six different web design studios during my career and I still have not met a web designer who doesn't use Fireworks for prototyping. Photoshop is a photo editing tool funnily enough.
i love fireworks and love to see it doing this extraordinary things!
thanks
Nice. Didn't know theres a Pro out there working with Fireworks =]
I hope, the next version of PS/FW will have the features of both tools melted into one.
That's nice !
and clearly I didn't read the first paragraph where you said exactly that
The actual font used on the poster is Myriad Pro Light
Post new comment