articles on
Easy Camera Icon in Fireworks
A few weeks ago I decided to create a camera icon. Usually I would do that in Illustrator or Photoshop, however as I use Fireworks pretty much most of my time I chose to create the icon using it. The cool thing about Fireworks is that you have the vector features found in Illustrator with bitmaps features found in Photoshop, especially layer style filters. So in this tutorial I will show you how to create a camera icon in Fireworks. I will focus on the lens pretty much, but as you will see, to create a realistic effect it's all about playing with gradients. Reference The first thing to do is always find some references so we can learn about lighting, shadows and texture. For my icon I wanted to recreate the Sigma DP2s. Step 1 Open Fireworks and start a new document. I am using 1024x1024 pixels. You can do the same using Illustrator or Photoshop. After that with the Ellipse Tool (U) create a circle. Step 2 Start creating more circles following the photo as references. Step 3 Now it's time to create the small circles that will be the lens. When you see those lens they look quite complex but if you analyze it's quite simple to recreate that, it's all about circles. Step 4 Now we have all the circles necessary to create the lens. As you can see we are just playing with black outlines and no color. Step 5 With the Rounded Rectangle tool create the body of the camera. After that click on the yellow controller to change the type of the corner. Step 6 Now let's start making the lens looks more realistic. Select the bigger circle and apply a gradient. Use the Cone type with grey and black for the color. Use the image below for reference. Step 7 Now for the second circle just use black for the color with #333 for the stroke. Step 8 For the third circle use #1B1C1C for the color and #333 for the stroke. Step 9 Use black color for the next with the same stroke color. The for the other one use the same as the third to alternate the colors. Step 10 For the next 4 circles use #1B1C1C for the color with #333 for the stroke. The 5th you use black for the color. After that use #999 for the stroke of the 6th. We need some highlight to the center part. The add other 3 circles like the image below, with the last one using a linear gradient. Step 11 For the circle in the very center fill it with black. As you can see in the image below, until now we haven't done anything much fancy or difficult, it was just repetition. Step 12 Now add 4 new circles in the center of the document. The big one in purple (1), then another one in dark/green yellow (2), one in the very center smaller in light yellow (3) and another one in green (4). Use the image below for reference. Also change the Edge Type to Feather with 3pt. Step 13 Add 2 new circles one bigger and another smaller. The go to Modify>Ungroup. Then with the Subselection Tool (A) edit the circles to make them look more like an ellipse. Change the Fill color to Linear Gradient and use #728EA6 for the color but with 100% transparency in the beginning and 0% at the end. Make sure the total transparent part is towards the center of the lens. Step 14 Add an ellipse to use as a mask. That's important to create the refleciton in the lens. Step 15 Cut the ellipse and start selecting the colored circles. Celect the dark yellow one and go to Edit>Past as Mask. Step 16 Repeat the same thing for the other circles. Now for the big reflection select the circle like I did in the image below and copy. Select the big gradient ellipse and go to Edit>Paste as Mask. Do the same for the other small gradient ellipse. Step 17 Now lets add some effects on the body of the camera. We had the rounded retangle. To add a little bit of 3D effect just add two rectangles one at the bottom and one at the top. Apply a gradient on them so the left and right edges are transparent. Step 18 Add 2 new rectangles on the right and left edges of the camera. Then apply a gradient using white for the color but with 100% transparent at the beginning and end and 0% transparency in the middle. That will add a nice round 3D effect. Step 19 Move the lens on top of the body. You can add more effects like shadows and elements. Step 20 Here are other parts of the camera I created. They are basic rectangles with gradients and different sizes. They look very basic but when you put them to together you ger a very realistic effect. Conclusion Select all layers but the ones in the center of the lens. The go to the Add Filters button on the Properties panel. Click and select Noise>Add Noise. Use 2 Amount, that will give a nice texture to the camera. As you could see in this sort of walkthrough/tutorial, create the camera and the lens was quite simple, however you have to go all the way till the end in order to get the result you want, otherwise you want be able to see how simple colors and gradients when together can create a nice effect. Step by Step Download Fireworks File Click here to download the Fireworks file used for this tutorial
Independence Day Fireworks
Happy 4th July to all our readers, today is independence day here in America and I selected some awesome 4th July firework photos from past years so you can enjoy and get ready for tonight! If you have some firework photography from the past years, share with us on the comment area. by Rick Elkins by Bob Jagendorf by TXphotoblog by music2fish2 (eric lanning) by Elliotphotos by Tony Shi by David Gn Photography by Tony Shi by MikeJonesPhoto by Cory.Lum by Timothy K Hamilton by 1D-Photography by Tony Shi by 'Toshio' by Cynthia.Lou by TVGuy by kevinh_photos by Winfried Neessen by poopoorama
Tutorial: Case Study with Html5 + CSS3
Last month I did a talk at the Campus Party, one of the biggest technology events of the world, talking about Fireworks, HTML5 and CSS3. It was very nice, the receptivity of the audience was sensational, and thinking that many of you would also like to see the contents of the workshop, so decided to write a full case study and share here on the blog. Many people ask me about the real possibilities to start using HTML5 and CSS3 today, and I'm sure we must explore the best that the web provides us with the goal of always improving the user experience. Maybe we can not reach 100% of the users, because there are still some browsers that do not support most of these new features (we know what browser I'm talking about, right?). But I believe that working to enable the legitimacy of content and navigation to 100% of users, why not make it even easier and more enjoyable browsing for many users who use browsers that allow this? My main bibliography for this case study were two books: Html5 for Web Designers and CSS3 for Web Designers. Definetly worth the read! Preview Template - Download *This template will be best viewed at Webkit browsers, like Safari and Chrome. Layout To start our case study, I created a simple layout, but where it could apply different concepts of CSS3 and still assemble a structure using HTML5, using the major changes that have occurred on its semantic. The layout that we will build is below: From this layout we divide it into a base structure with the main areas that will make our HTML. HTML5 Having all the basic layout complete, the structure in the head and the images had already been exported, we will begin to assemble our HTML. Here we can notice some differences, even simplifications in relation to XHTML 1.0. See how easy it was to decorate the raw Html, or tell me that you knew by heart everything that should contain inside DOCTYPE for example? We have one more thing to get attention here, this script. Actually this makes that our new elements are rendered in browsers that do not yet support HTML5. <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head><body></body></html> Since the basis of Html got ready we start to insert our element. Starting at the header, the news here are quite clear, as the elements and . Not to be a long post I will not go into merits of all the new tags and serving each one, but there are very good documentation on the Internet, including the two books that I refered at the beginning of the post. <header id="main-header"> <section id="block-twitter"> <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p> </section> <section id="block-title"> <h1>Ferris Bueller</h1> </section> </header> With the header done, we should go to the content. In the left column we have a very important element to talk about here, are the forms. It has pretty cool thing about them in HTML5, using the attributes "placeholder", "type" and "autofocus". Play around with them and if you want to read a little more in this great article at 24ways.org. <div id="main-content"> <section id="content"> <section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section> <section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> <aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section> In the right column, we have the portfolio. Here are the new items and . The videos and audios are now easily inserted on html without the need to make a Flash embed for an example. Each browser has (or will have) its own player, and with a single line of code we have running our video! Of course, for browsers that do not support yet, well, just insert the embed flash and it's ready, all users affected! <section id="portfolio"> <figure> <a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a> </figure> <video controls width="380" height="210" poster="images/placeholder.jpg"> <source src="video/video-1.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4"> <param name="movie" value="player.swf?file=video/video-1.mp4"> </object> </video> </section> </div> And finally the new tag . Without much news here! <footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer> Aqui da pra ver o que temos ate agora. CSS3 With the html ready we shall start our CSS. In this picture I show the key features of CSS3 that we will test here. To start our CSS I always like to use a reset.css, download the template and you can analyze it a little better. Moreover we need to include our new HTML5 elements as display:block, so we reach all browsers, even those that do not support html5. @import url("reset.css"); /* New HTML5 elements */ article, aside, figure, footer, header, hgroup, nav, section { display:block; } /* -------- */ Well, now it's time to put the hand in the CSS, here are only the main elements that form the basis for our site. body { margin: 0; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 20px; color: #5F5E59; background: url(images/bg_body.jpg) left top repeat; } a:link, a:active, a:visited { color: #305F9B; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } /* ID's */ header { background: url(images/bg_header.jpg) left top repeat-x; margin-bottom: 25px; } #block-twitter { width: 700px; height: 60px; position: relative; margin: 0 auto; padding: 20px 200px 0 0; } #block-title { width: 900px; height: 80px; position: relative; margin: 0 auto; padding-top: 25px; } #main-content { width: 900px; position: relative; margin: 0 auto; } footer { width: 900px; position: relative; margin: 0 auto; clear: both; padding: 30px 0; background: url(images/img_star.png) left top repeat-x; } /* -------- */ The news on the CSS start here. Note that in the texts that we already use elements such as column-count and column-gap, for texts in multiple columns. Notice also the use of prefixes and -webkit and -moz, you can view this article a list of prefixes for all major browsers http://peter.sh/. /* Header */ #block-twitter p.tweet-text { color: #FFF; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 14px; text-shadow: 0 -1px 0 #000; } #block-twitter span.tweet-time { color: #E3BACA; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 12px; text-shadow: 0 -1px 0 #000; padding-left: 6px; } header h1 { width: 454px; height: 53px; background: url(images/img_ferris.png) left top no-repeat; text-indent: -9000px; margin: 0 auto; } /* -------- */ /* Text */ section#content { width: 400px; float: left; text-shadow: 0 1px 0 #FFF; padding-bottom: 40px; } section#content h3 { margin-bottom: 15px; color: #949691; font-size: 18px; font-weight: bold; } section#content p { margin-bottom: 15px; } section#content section.two-col { -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; column-count: 2; column-gap: 40px; padding-bottom: 20px; } section#content section.two-col p { font-size: 20px; line-height: 28px; } ul#social-icons { border-top: 2px dashed #AAA19F; width: 180px; height: 55px; padding-top: 20px; } ul#social-icons li, ul#social-icons li a { width: 60px; height: 55px; float: left; display: block; text-indent: -9000px; } ul#social-icons li a:link, ul#social-icons li a:active, ul#social-icons li a:visited{ -webkit-transition: background 0.3s ease-out; } #social-icons li.bt-twitter a { background: url(images/social_icons.png) 2px top no-repeat; } #social-icons li.bt-twitter a:hover { background: url(images/social_icons.png) 2px -56px no-repeat; } #social-icons li.bt-facebook a { background: url(images/social_icons.png) -59px top no-repeat; } #social-icons li.bt-facebook a:hover { background: url(images/social_icons.png) -59px -58px no-repeat; } #social-icons li.bt-linkedin a { background: url(images/social_icons.png) -121px top no-repeat; } #social-icons li.bt-linkedin a:hover { background: url(images/social_icons.png) -121px -57px no-repeat; } /* -------- */ Here we begin working on our form. Note that here we use functions like box-shadow and transition, Transition I believe it is one of the main novelties of CSS3, using with care and in some places we can enrich the user experience too. It's the kind of feature that does not affect users who do not support CSS3, and using it properly can keep the loyalty of content reaching 100% of users correctly. /* Form */ aside#form input.textfield, aside#form textarea { width: 380px; padding-left: 8px; margin-bottom: 10px; border: 1px solid #CCC; padding: 10px; color: #6C595F; -webkit-box-shadow:inset 1px 1px 2px #999; -moz-box-shadow:inset 1px 1px 2px #999; -khtml-box-shadow:inset 1px 1px 2px #999; box-shadow:inset 1px 1px 2px #999; -webkit-transition: border 0.4s ease-out; -webkit-transition:-webkit-transform .2s ease-in; } aside#form textarea { height: 100px; } aside#form input.textfield:hover, aside#form textarea:hover { border: 1px solid #999; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } aside#form input.textfield:focus, aside#form textarea:focus { outline: none; border: 1px solid #6C595F; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } #form form input.submit { background: #6C595F; font-size: 13px; font-weight: bold; color: #FFF; padding: 5px 10px; border: none; -webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; float: right; -webkit-transition: background 0.4s ease-out; cursor: pointer; } #form form input.submit:hover { background: #333; } /* -------- */ In the portfolio we have a very nice effect, using the "transform" with CSS3. Its hard anyone believe that this was done without JS or even Flash. Another news is the "nth-child", with it we have control over all elements of a repeat, as the thumbs of the portfolio, removing only the margin-right of the right elements. To learn more give a read on this article css-tricks.com. /* Portfolio */ section#portfolio { width: 410px; float: right; padding-bottom: 40px; } #portfolio figure a.link-thumbs { width: 190px; height: 156px; display: block; float: left; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; margin: 0 20px 20px 0; opacity: .6; -webkit-transition: opacity 0.4s ease-out; -webkit-transition: -webkit-transform 0.4s ease-out; } #portfolio figure a.link-thumbs:hover { opacity: 1; -webkit-transform:rotate(-15deg); } #portfolio figure a.link-thumbs:nth-child(2n) { margin-right: 0; } #portfolio video { background: #C9CEC8; padding: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; clear: both; } /* -------- */ And finally our footer, no big news;) /* Footer */ footer p { font-size: 11px; line-height: 18px; background: url(images/logo_abduzeedo.png) right center no-repeat; text-shadow: 0 1px 0 #FFF; } /* -------- */ Preview Template - Download In general I can say that we have to start using HTML5 and CSS3 today, it is possible. There is much documentation showing tips and tricks for always reach every single user on the main principle of a website: content and navigation. Allowing access to this to 100% of users, then just work to improve the experience for those who use modern browsers!
2011 Fireworks
Happy New Year to everyone! 2011 is here and to celebrate that I selected some beautiful fireworks photography from the moment that the new year was born. These photos are from all over the globe, enjoy the view and share your photo as well. Click on each photo to find out more about the location and the artist who took the shot.
Game Center Layout Style in Fireworks
This tutorial was inspired on the new Apple Game Center design. Besides to teach you guys how to make all the effects we will use the whole work spent on that to create a cool wallpaper. So check out the resolution of your computer and let's get started! Step 1 Here I create a 1440x990 pixels canvas. After that we can start with a rectangle, fill with #34884B. Also check out the texture we need to apply. Step 2 Now we will create other 2 rectangles. First one fill with #27693F and the last one with #286B3C. Check out the image of each effect and texture applied. Also check out the order of the layers until now. Step 3 Let's start a red rectangle now. We will make some nodes to model this rectangle, so I have a tip, just ungroup the rectangle, you will convert it to a path. With the pen, create the nodes, and also delete some others as I show in the image below. After that use the Subselection Tool "A" to select some points and model the rectangle until you have a draw like the last on the image. Step 4 Now we will apply a dirty style on this path using a texture. Just duplicate the path you've just created, place the texture bellow the path and use this path as a mask on the texture. Also apply an overlay 70% on this mask. Step 5 Now we need to put some light onto this texture. Duplicate again the red path and create an ellipse with light pink color fill. Don't forget to apply a feather on this ellipse. Use this other path you've just duplicated to mask this ellipse. Step 6 Here you will just create a new path inside the our draw. Duplicate again the red path, go to Modify > Alter Path> Inset Path, and use the values I showed on the image. Step 7 The part of the top and the bottom of the badge we will draw using the pen tool and adjusting the nodes with the "A" tool. Also we will write something inside that. Here we have another tip, draw a curve line and select this line and the text. Then go to Text > Attach to Path. Maybe you will need to make some adjusts with the "A" tool until you have exactly the shape you want. Step 8 To draw the bottom and top wood bars, we will use simple rectangles and use the Wood texture on Fireworks. You can adjust the saturation and color of this wood if you want, do it with filters. After that, draw a half height rectangle over the wood with alpha 16%. Step 9 We're close to the end! Fill the layout with new elements, you can follow the PNG file if you need some inspiration! Final Result Also put some round rectangles the the both sides of the layout, like Game Center does, this way you can place your desktop icons over those! Download the Fireworks File Click here to download the Fireworks file used for this tutorial
The Abduzeetles Rockband Website in Fireworks
What's up guys, this tutorial is a kind of special for me, since I saw for the first time this site I was amazed with the colors, the shapes and the real life that it appears to be. I'm talking about The Beatles Rockband's website, it's simply wonderful. And thinking on it I decided to redesign it in Fireworks, but now our own site, that we'll call the Abduzeetles Rockband! We're going to use nice commands on this tutorial, and what is really cool is trying to test other values on each step, other colors, other shapes, always exploring the whole potencial from every tool. I hope all of you guys enjoy this tutorial and if you already don't know the original site, please check it out: thebeatlesrockband.com. 1 - New File Open a news file in Fireworks of 1440x1260 pixels, use the color #293965 on background. 2- Black Elispes Let's start creating the color background. To do that, draw a black elipse like the Figure 1. So apply Command > Creatie > Twist and Fade, use the values as the figure, but try to play with the values to figure out all the possibilities that this tool can do. 3- Changing the Elipses Colors Before create the Twist, we need to change the colors to have the effect we want. Apply grey scales between #000000 to #CCCCCC, like the Figure. Now we still have some details, on every elipse, apply Inner Shadow 0 - 30% - 10, and on the last 2 apply a bit of opacity. 4- Beginn the Colors Place this group we got now on the top of our canvas. After that create a new elipse, apply a Linear Gradient wit the colors like the image. Here you can change the colors if you want, feel free to do that! Doing that scale and move the new elipse to be exactly over the group of elipses. 5- Overlay Now just apply an Overlay on this color elipse with 60% opacity, then double it to get even more contrast. 6- Content Area To get this content area we will use 3 rectangles. The first one will have color #999999, opacity 66% and Drop Shadow. The second one it's exactly the same, just double and reduce 5 pixels on each side. The third one you have to reduce more 5 pixels and apply color #F5F5F5 and the Vein texture. 7- Creating the color shapes The color elements on the header will be created with the Pen tool. Draw a shape like the Figure 1, apply texture, color and Drop Shadow like the Figure 2. Then double this element and adjust size and colors like the Figure 3. 8- Placing the Color Shapes Group these shapes just created. Create others like we did in the Figure 1 then place behind the background's content. 9- Stars Let's bring life to the background! To do that just create several stars and circles with colors and different opacities. A tip is to apply Glow in some of them to have a nice effect. 10- Clouds To the clouds is a bit simple, we will make them with circles and elipses. Create the shapes you want, so go to Modify > Combine Paths > Union. After that apply a 10px white border, play with gradients and textures, and apply a Drop Shadow too. 11- Position of the Clouds Create 3 models of clouds, place them on the header, behind the content and on the footer. Also, draw some elements on the footer like the Figure, to place some texts on it.. 12- Content Elements Now, to finish let's put some elements inside of our website. LIke we did, use a main image, some boxes with contents, main menu and secondary menu, and of course, the logo, that here is our Abduzeetles Rockband! Final Result
Web Site Design Tutorial: Wellknown.as Case
Last month I met some guys that are working on a really nice project that involved an iPhone app. So they invited me to design the web site, called Wellknown.as. I loved the idea and started looking for references and inspiration so I could start the design itself. So in this tutorial I will show you a little bit of how I created it using Fireworks. Of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same. Design References Step 1 The first thing to do is of course have a concept in mind of what you want to do. In my case the guys over at Wellknow.as told me exactly what they wanted for the layout. Also I used a CSS Framework and the Fireworks template. You can download it at http://960.gs/ Step 2 With the Rectangle Tool (U) create a new rectangle with the document size. For the Color use Solid and #191D22. Then on the Properties Panel, click on the Add Icon (+) and select Add Noise. Use 1 for the Amount. Step 3 With the Rectangle Tool (U) create another rectangle but make it like a stripe starting on 200 pixels in the Y axis. For the Color use #1c202a. Step 4 Click on the Add and to to Shadow and Glow > Inner Shadow. Use 0 for the distance, 40% for the Opacity, 1 for the Blur and 270º for the Angle. Step 5 Click again on the Add icon and choose Shadow and Glow>Drop Shadow. Use 0 for the Distance, 65% Opacity, 4 for the Blur. The angle won't make any difference because the Distance is 0. Step 6 Now again let's add some noise so the rectangle won't have that solid color, but instead a nice plastic feeling. Step 7 Here I placed the iPhone image right in the center of the image as it was sitting on. They didn't want to show the interface of the app right now so that angle was perfect. Step 8 Duplicate the layer and go to Modify>Transform>Flip Vertical. Then change the Opacity to 50% and go to Modify>Mask>Reveal All. With the Gradient Tool (G) select the black and white preset and apply it on the layer mask. What is white will be visible and what is black transparent. So, create the famous wet floor effect. Step 9 Add a new rectangle with the Rectangle Tool and fill it with a gradient using white for the both colors. Just change the opacities one will be 100% (1) and the other 0%(2). Use the Gradient Tool (G) to apply the gradient in a angle of 90º. Step 10 To create the light effect it was very easy. With the Ellipse Tool (U) create an ellipse, then use white for the color and change the Edge to Feather and 100 for the value (1). After that just change the Blend Mode to Overlay (2). Step 11 Now duplicate to make the light stronger. Also add different ellipses to make the light effect more realistic. Another thing that is very important is to play with the opacities. Use 50-60% for the new ellipses. Step 11 For the slogan, I used Arial 35px for the typeface because Arial is the iPhone's font, and a gradient from a light grey to white. Also I added a shadow using 1px for the Distance, 90% for the Opacity, 1 for the Blur and 90º for the Angle. Step 12 With the Round Rectangle Tool (U) create a rectangle, fill it with grey and change the opacity to 80% (1). The with the Rectangle Tool (U) create another rectangles but beneath the grey one. Also make it smaller (2). Again with the Round Rectangle Tool (U) create another element (3). Then select the 2 round rectangles and go to Modify>Combine Path>Punch. Select all elements and group them. After that add a noise like in the first steps. Step 13 With the Line Tool (N) create a line then go to Modify>Mask>Reveal All. Select the gradient tool and the black white preset with oval for the type and paint over the layer mask. That way the edges will fade. Step 14 With the Ellipse Tool (U) add an ellipse in black and change the Edge to Feather and use 60 for the amount. Then with mask, hide the part below the line. To do that is super simple, create a rectangle with the area you want to show and go to Edit>Cut. Then select the ellipse and go to Modify>Mask>Paste as Mask. Step 15 Repeat the same process to mask the Id Card. Step 16 Now let's add the lanyard. Again repeat the same process to mask it. Also add a little shadow to the card and lanyard. Step 17 Place some icons on the left column and it's time to add the content. Step 18 Make the guides visible so we can have a visual reference to create the columns and place the content. That will be really important when you code the CSS. Conclusion The layout is done, I need to do a few adjustments to make the slicing process a little bit easier but we have the whole home-page created. The design process was quite simple even the tools and filters we used, the most important thing was to define the concept before going to the tool. The same thing could be done in Photoshop or a different tool, however, with Fireworks we have the super useful vector capabilities and the non-destructive filters that make the process much easier. Also the way we can play with gradients in Fireworks is simply unbeatable. Click the image to visit the web site
Reader Tutorial: Fireworks - Interactive Prototypes in PDF
This is my first tutorial and I really want to explain to you how to generate interactive prototypes directly from Fireworks in a PDF format. This kind of prototype can be very useful for layouts approval with clients or just to make the communication between the design development team easier. As the first version of the tutorial was in Portuguese, so you will find some portuguese/english translations here. In case you have any questions let us know!! Step 1 The whole process is pretty simple, we just need to focus on the preparation of the file that will be exported. For that I will use a wireframe sample for an institutional website. The PNG file that I'm using is available here. The file must be organized in pages, the links that will be created work from page to page. Step 2 Let's start to create the Hotspots, which are the marks for the "clicking" areas of each page. We will begin with Home, that will also be initial page from the PDF. Step 3 Select the Rectangle Hotspot Tool (J) at the web tool bar. Step 4 Add the shapes to all areas where you wish to create the links. Make sure to give the proper dimension to the hotspot shapes when needed. Step 5 After we create the shapes, we will set the properties for each of them. An important detail: verify every shape to make sure they are all Rectangles, not Polygons, or the links won't work. Usually when we re-dimension the shapes they go back to the polygon state, that's why we need to verify it. Step 6 Now we will set the links to the pages where the shapes will be directed. In the above image we have the shape news (noticias) selected, so we will select the page news.htm that will be the place that the link will direct. In the next field, under the link option, we can add an alternative text for the image, but that is not necessary. And following these steps we create the links for all the shape from the initial page. Step 7 Now we will go to the next page. At the Products (produtos) page we will copy and paste the same shapes from the menu. They work the same way. Now we will create a shape for the maximized picture of the product. So we direct the link to the page Produtos_ampliação.htm (maximized product). At the Produtos_ampliação page we have the window that is the maximized picture and the Close button, where we will apply a new shape to return to the previous page, Products. And that is the logic of this, we link the pages and create the relations between it. Step 8 Now we will export the file. To do that go to the File> Export. Now you just need to save it to the destination folder as bellow. Now you just need to test all the links from the PDF and use them as you want. You can check out the PDF I created here. I hope you liked the tutorial!! About the author My name is Marcon Zanin and I`m a 26 years old interface designer from Chapecó/SC, Brazil. If you want know more about my work visit my portfolio (www.hidrocolor.net) or you can also Follow me on twitter (twitter.com/marconz)!
Creating an amazing Palm Pre icon on Fireworks
This last saturday we saw the release of the awesome new phone Palm Pre. A lot of people already bought their gadget, but if you want one, at least a icon one, we made that for you. This tutorial will show you how to create in Fireworks the icon for the Palm Pre frame. Step 1 First of all, create a rounded rectangle with a dark gray gradient. Now we need to edit the path, so ungroup it and edit the points with the "Subselection Tool" tool (A) until you get a great shape. After that, apply a Inner Bevel with the values like the image. Step 2 Now, duplicate the first rectangle, make a little bit small and apply the color #000. Duplicate this last one and do the same, turn it smaller on the height and width and apply a very dark gradient and 2 Inner Shadows like the image. Step 3 Now we will create the phone part. On this step we draw 4 elipses, each one with a diferent style, size and position. Look the image and set all the values for each one like I did. Step 4 To create the button, we need 2 elements: one elipse and one circle. The circle will be the mask for the elipse. So first draw the circle, apply a Linear Gradient like the image 2, also it must have a border with 2px. After that draw the elipse with a dark Linear Gradient. To do the mask, cut the elipse (CTRL or Cmd + X) and paste inside the circle (select the circle and CTRL or Cms + V). Step 5 Almost done, take a look on the image to see the other elements we should create to reach the details like the gadget. The PNG file have all the elements already drawn for you. Final Result Here's the result. The process is simple, but we should have attention on every detail, because that makes the difference on this kind of project. To get even more real, we place the Palm's interface over the icon. And stay tunned, this interface will be the next tutorial I will make! Download PNG file
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. 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 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%. 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. 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º. 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. 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. 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. 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. Download the Fireworks file Click here to download the Fireworks file.
Fireworks Quick Tips #1 - How to use QuickMask
One of the best functions we can use in Fireworks is Mask. It's a basic command that can make our life easiser when working with images or when we need to hide some part of an object. In this tutorial we will create a Polaroid photo using amazing and inspirational illustrations from Adhemas. We already talked about him, but if you don't know the work of this Brazilian artist yet, please check out his site after the tutorial! But for now, let's take a look at how this command works. STEP 1 - Open a new file Open Fireworks and choose a 600x600 size for canvas. STEP 2 - Creating the paper Our first element will be a Rectangle with 400x500px and color #DDDDDD. After creating it apply some shadows and a texture like the image. STEP 3 - Creating the canvas Now you will create another rectangle. This will be the limit of our photo. So draw a white rectangle with 345x370px and place like the image. Apply some shadows to create depth in the paper. STEP 4 - Choosing the image As I said before, we choose work with Adhemas images (that is bringing a lot of value to the tutorial). Select the image you want and place inside the file. We will now use 2 techniques to make the mask. They both are very easy and will take us to the same result. STEP 5A - Applying mask In the first one, first select the image, place above the white rectangle, and Cut it (Ctrl+X or Command+X). Now select the white rectangle, and paste pressing Shift (Ctrl+Shift+V or Command+Shift+V). You will see the image inside the rectangle and at the same position that it was before. STEP 5B - Applying mask In this method, we will first place the image inside the file. After that, move the image layer above the white rectangle (just to see the rectangle to select it!). Now let's cut the rectangle (Ctrl+X or Command+X). With the rectangle in the clipboard, select the image, go to Modify > Mask > Paste as Mask. You will see that the rectangle made a mask in the image, the same way that we made it before. STEP 6 - Playing with the mask This step is mostly a Tip! If you look at your layers, note that the layer of the image has a mask. If you unlock this mask you can move the image and the mask separately. This way you could place your image with the exact focus you want. FINAL RESULT Now you can play with the mask. Use your imagination, explore backgrounds, textures and whatever else you want.
Photo Inspiration: New Year's Fireworks
It's a new year and no better way to celebrate it than watching some really good fireworks, so if you missed out or you just can't get enough here is a selection of New Year's Fireworks photos from all over the world, Enjoy and Happy New Years! If you took some photos of the fireworks on your town or if you know some good photos please post them up on you comments, lets make this list really big. Brazil Rio de Janeiro - Brazil Rio de Janeiro - Brazil London - UK London - UK London - UK Singapore Singapore Singapore Scotland Australia Australia Finland Hawaii - USA San Diego - USA Hong Kong - China Hong Kong - China Portugal Lisbon - Portugal Croatia Austria Costa Rica Czech Republic Poland
Awesome Light Effects in Fireworks inspired by the James White's O series
I'm sure that pretty much everyone of you guys loves the art of James White, at least, we here over at abduzeedo do. Then, a few days ago we featured on the Wallpaper of the Week an image created by him entitled The O Series, he has even created a tutorial showing how to create that effect in Photoshop. As I'm a huge fan of James, I've decided to do the tutorial and reproduce his style, this time however using Fireworks. The process is simple, just playing with some circles, blend modes and a bit of color! So let me know guys what do you think and show us your experiments as well! STEP 1 - THE O To start up, just create a simple white circle in the middle of the canvas. STEP 2 - RADIAL GRADIENT Now set a radial gradient for the circle. Use the color #000 for the center and #FFF for the borders. Note that we move the black color near to the white. Also use an opacity of 55%. STEP 3 - START PLAYING WITH CIRCLES We're going to start to repeat the cricles now and change the blend modes. The first one, copy and paste the original circle. Move a bit to the top and to the left. Set the blend mode to Overlay. STEP 4 Another circle, copy and paste the last one, move a bit to the right and change to Color Dodge. Use the opacity in 40%. STEP 5 Copy the last one, scale down a little bit and change the Blend Mode to Soft Light. Bring the opacity back to 100%. STEP 6 Copy and paste this last circle and move to the right. STEP 7 - ADD SOME LIGHTS We've created all the circles. Now draw an irregular polygon like the image. Apply a Feather 40 and change to Overlay. Duplicate this layer to enhance the lights. STEP 8 - MORE LIGHTS Now, create 3 small white circles, place them in the parts where are the lights. Change the Feather 20 and the Blending Mode to Soft Light. If you want to make it even shiner, duplicate these 3 circles. STEP 9 - COLOR 1 Create an ellipse with the color #CC9900, Feather 39 and Overlay. Place it over one of the lights. STEP 10 - COLOR 2 Create an ellipse with the color #FF3366, Feather 62 and Overlay. Place it over the second light. STEP 11 - COLOR 3 Create an ellipse with the color #33CCFF, Feather 62 and Overlay. Place it over the last light. FINAL RESULT You can play with different colors and even different shapes, I haven't tried that yet but I'm sure that this incredible technique might work very well. Once again it's all about playing, James showed us how versatile the blend modes are. So now it's with you. Share with us some of your experiments and ideas.
20 Beautiful Fireworks Pictures
The best thing about festivals, new year celebrations or most of big festivals, are the fireworks!! I've never met a person that didn't like it, or that wouldn't get touched by its magic. Truly, it's magic... thank God for the Chinese. And capturing these are another great thing. Thanks to photography, we get to capture these fantastic multi-colored explosions. Thanks to that, we also get to take a closer look at the details, which are beautiful. Anyways, here's a little selection of 20 beautiful shots I've found on Flickr. Does anyone got any fireworks pictures? If you do, post it here for us!! Enjoy these! Cheers! ;)
Awesome Floral Type in Fireworks and Photoshop in 5 minutes
A few weeks ago we had a very nice Vector Packs giveway from Designious. For that article I did an image using some of the floral vectors to create a floral type. It was similar to the Frilly Bits effect, however for this one we combine the vectors with the font to create a different result. It reminds the work of Si Scott or Gingermonkey. In this tutorial we will use Adobe Fireworks and Adobe Photoshop. Actually the whole effect will be done in Firewors, then in Photoshop, we will add some textures and a old paper background effect. Step 1 Open Fireworks and type the text you want, I used GIVEAWAY. The color and size doesn't really matter because FW will use vectors. Step 2 Open the Floral Vector in Fireworks. Select the ones you like and paste it in your document. Try to align the floras with the text. After that, firstly select the text and to to Text>Convert to Paths. Then go to Modify>Ungroup. Step 3 Select the first letter and the floral vector. Then go to Modify>Combine Paths>Join. You will notice that where the intesection of the 2 elements will be negative. Step 4 Place all the florals you want for your design before combining them with the text. Step 5 Now just repeat the Join command to the other vectors and letters. Tip. Make sure that the florals don't have solid white colors. Only the black elements have to be solid, otherwise the effect won't be the same. Step 6 Now let's go to Photoshop. Create a new document, I used 1920x1200 pixels that is a nice size for wallpapers. Step 7 Select the background layer and apply some layer styles. I used Inner Glow, Color Overlay and Pattern Overlay to create a nice old paper style. The Pattern Overlay will be for the texture of the paper while the Inner Glow will be the dirty edges. Use the image below for the Layer Styles values. Step 8 Create a new layer on top of the background layer and go to Filter>Render>Clouds... Make sure you had black and white for the background and foreground colors. After that select the Eraser Tool (E) and delete a bit in the center of the image, there is going to be where we will place the text. Change the Blend Mode to Color Burn and the Opacity to 80%. You can delete more areas if you want. Step 9 Copy and paste the floral type from Fireworks to Photoshop. Or you can open the PNG file in Photoshop as well. Place the text in the center of the document. Step 10 Here let's just add a texture and some effects to give a bit of depth to our type. Select the type layer and go to Layer>Layer Styles>Drop Shadow... Use 50% for the Opacity and 90º angle. Then select the Pattern Overlay for the texture. I used another floral pattern I had, but you can use whatever you want. The last but not least is the Inner Shadow.. Use white for the Color and Normal fo the Blend Mode, it will give a very subtle highlight to the edges. Use the image below for the value. Conclusion This is a very easy effect to make but at the same time is very cool. You can add some strokes to the type and then create the effects sometime only in the stroke and some only in the letters. That will create a effect similar to what Si Scott does. Of course it's all about trying and using different elements. Also, you can do this only in Photoshop using masks and blend modes, I just wanted to use Fireworks because I think it's faster and a good way to learn a new too. Click on the image for full preview. Download the Photoshop file Download the Photoshop file used for this tutorial
Fireworks 101
Hi guys, this week we have a very nice tutorial done by a guest writer. It cover some basic functionalities and it's very useful for those willing to improve their Fireworks skills. You will learn how to play with paths, combining, subtracting and much more. Also you will end up creating a logo. And, if you want to post a tutorial or a good post, just send us an email with your article. Thanks and enjoy. First let's see what combine path objects are and what can you do with them. In Fireworks there are four main combine paths: Union, Intersect, Punch and Crop. Union You can unite two or more objects with it. Just drag the two objects onto each other (it helps if you select the same color for both shapes, this way you would see the final union), select both objects and go to the Modify menu, Combine Paths -> Union. This simple command alone creates rather complex shapes. Intersect With intersect you can create a shape whose the result of the intersection of two or more shapes. Let me show you. You can do this the same way as with Union, select the two shapes and go to Modify -> Combine Paths -> Intersect. It also helps if you decrease the opacity of the topmost shape to see the final intersected result. Punch With punch you can cut a shape from another. Just go to Modify -> Combine Paths -> Punch. I use this command the most while I'm creating my shapes. Crop I rarely use this command, although it's very powerful. It's useful if we use more than two shapes. The main idea with crop is that it creates a hybrid intersection from the two circles underneath the rectangle. The rectangle is the topmost shape. Now let me show you the real power of these commands. Let's create a complex shape without using the pen tool or a tablet. Just the plain old mouse and these four commands. Creating a Logo Let's create a logo with two leaf shapes and some fancy text. First the most important thing is that we have to learn how to see different shapes from two or more, and what type of command to use to get those shapes. Step 1 For me the easiest way to create a leaf is from an oval. So, create the oval and draw a rectangle shape on top of it like this: Now just Punch the rectangle from the oval and the result will be this: Dublicate this shape (CMD+C; CMD+V) and flip it horizontally (Modify -> Transform -> Flip Horizontal). Match the two shapes and apply the Union command to get this shape: Step 2 Ok. Now rotate this shape a little bit and duplicate it twice. Draw a rectangle under the duplicated shapes like this (note that the blue oval shape is the top most, the green one is in the middle and the rectangle is at bottom): The idea is to get that shape in the middle (dark blue): We achieve this by selecting all three shapes using the Crop command and then selecting the remaining shapes and using the Punch command. You will get this shape: Now we go back to our original 'leaf like' shape. Duplicating it again and shrinking a by 80% (CMD+SHIFT+T), then punch the smaller shape from the original. Step 3 Align the remaining shapes and apply the Union command, like this: Duplicate the final shape and color it differently. Flip it horizontally and align the two shapes therefore the duplicated shape goes under the original one, like so: Duplicate the red shape one more time and drag it out, we will need it later. And now you guessed it select the two shapes and Punch the red shape and mask the rest like this: Punch the oval from the green shape. Align it with the remaining red shape group it together (CMD+G) and shrink it to 30%. Final Result Voila, we got a leaf logo. You can write a 'web 2.0' name and you got your company :-) Also, you can play a little bit and create some crazy shapes like that! Guest post by: Gyorgy Fekete
Abduzeedo Job Board banner in Fireworks
A short time ago Fabio wrote a tutorial showing us how to create an image inspired by Andy Gilmore's work. I really liked that technique and decided that it would be cool to do something like that in Fireworks as well. In this tutorial I will show you how to create a nice effect for banners, and we will use this technique for the Abduzeedo Job Board banner. We released the Abduzeedo Job Board a few days ago, and now we will start promoting it. The idea of this banner is exactly that; to demonstrate why you should post your job in our job board and also the new price. I hope you enjoy this new Fireworks tutorial. Feel free to send suggestions for new FW tutorials. STEP 1 - OPEN FILE First open a new file with dimensions of 480 x 180px and fill the background with black #000. STEP 2 - CREATING THE FIRST ELIPSE Now we're going to create the main element of the tutorial, an elipse. Draw a simple elipse, then apply a Linear Gradient from the color #003734 to #000. Note that we have a border of 2px with some style. The color is #098191, the type is Graphite, and it has a Grain Texture of 15%. Also, we will use a Noise Filter set at 2. STEP 3 - THE ELIPSE GROUP We've just created the first elipse; now let's draw the others. We're going to do that by just duplicating and changing the colors and shadow of each one. See in the list below how each should be styled: Elipse 1- Gradient: #125A5F to #000 - Border: #33CCCC - Shadow: 28, 100%, 35 Elipse 2- Gradient: #025F4E to #000 - Border: #33CCCC - Shadow: 27, 100%, 32 Elipse 3- Gradient: #2C5777 to #000 - Border: #0099FF - Shadow: 26, 100%, 32 Elipse 4- Solid #000 - Feather: 85 - Shadow: 30, 100%, 30 STEP 4 - STARTING THE EFFECTS We're almost there. Now you must group all five elispses we've made. Just duplicate this group, and in the top layer group apply a Color Dodge filter. See in the image how the layers are through this step. STEP 5 - MIRRORING In this step you will select one of the groups, duplicate it, and go to Modify > Transform > Flip Horizontal. After that apply the Color Dodge filter to this group. Now for the last duplication duplicate the group you just mirrored and change the filter to Screen. Take a look at the image and you will see all the groups and their own filters. STEP 6 - ADD ELEMENTS Ok, we're there! The effect has been created. Now just place your unique elements, your logo, some text, etc... FINAL RESULT The effect is quite simple, isn't it? Yet with this simple effect we can create great images. Choosing the right fonts and paying close attention to placing text in the best position relating to the other elements is key to allowing you to make great layouts! Now share your experiments with us! Editor: David Parrott