fireworks https://abduzeedo.com/ en 2011 Fireworks https://abduzeedo.com/2011-fireworks 2011 Fireworks<a title="View user profile." href="/profile/paul0v2" lang="" about="/profile/paul0v2" typeof="schema:Person" property="schema:name" datatype="" class="username">paul0v2</a>01.03.11 <div class="clearfix text-formatted blog-content field__item Body Array body"><h3>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.</h3> <!--break--> <p>Click on each photo to find out more about the location and the artist who took the shot.</p> <p class="imgC"> <a href="http://www.flickr.com/photos/crwilliams/5313878715" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/00.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/56424073@N06/5316215258" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/01.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/13559836@N03/5316401479" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/02.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="link" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/03.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="link" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/04.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/massimousai/5315563081" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/05.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/56424073@N06/5315621873" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/06.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/macg0510/5315829509" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/07.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/slmka/5316241257" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/08.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/michaelfang/5316548168" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/09.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/clairechao/5319110406" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/10.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/95983889@N00/5311504592" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/11.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/eriberto/5316981963" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/12.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/diueine/5311381291" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/13.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/carregal/5312152158" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/14.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/ithappens/5316750424" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/15.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/spatialk/5316048035" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/16.jpg" alt="2011 Fireworks" /></a></p> <p class="imgC"> <a href="http://www.flickr.com/photos/emimi/5316514278" title="2011 Fireworks" rel="nofollow"> <img src="http://imgs.abduzeedo.com/files/paul0v2/2011-fireworks/17.jpg" alt="2011 Fireworks" /></a></p></div> Mon, 03 Jan 2011 15:18:07 +0000 paul0v2 48167 at https://abduzeedo.com Web Site Design Tutorial: Wellknown.as Case https://abduzeedo.com/web-site-design-tutorial-wellknownas-case Web Site Design Tutorial: Wellknown.as Case<a title="View user profile." href="/profile/abduzeedo" lang="" about="/profile/abduzeedo" typeof="schema:Person" property="schema:name" datatype="" class="username">abduzeedo</a>07.06.09 <div class="clearfix text-formatted blog-content field__item Body Array body"><h3>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 <a href="http://wellknown.as/">Wellknown.as</a>. I loved the idea and started looking for references and inspiration so I could start the design itself.</h3> <p>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.</p> <h3>Design References</h3> <p class="imgC"><a href=""><img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/inspiration.jpg" /></a></p> <h3>Step 1</h3> <p>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 <a href="http://960.gs/">http://960.gs/</a></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_1.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 2</h3> <p>With the <strong>Rectangle Tool (U)</strong> create a new rectangle with the document size. For the <strong>Color</strong> use <strong>Solid and #191D22</strong>. Then on the <strong>Properties Panel</strong>, click on the <strong>Add Icon (+)</strong> and select <strong>Add Noise</strong>. Use <strong>1 for the Amount.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_2.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 3</h3> <p>With the <strong>Rectangle Tool (U)</strong> create another rectangle but make it like a stripe starting on 200 pixels in the Y axis. For the <strong>Color use #1c202a.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_3.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 4</h3> <p>Click on the Add and to to<strong> Shadow and Glow &gt; Inner Shadow</strong>. Use <strong>0 for the distance, 40% for the Opacity, 1 for the Blur and 270º for the Angle.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_4.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 5</h3> <p>Click again on the Add icon and choose <strong>Shadow and Glow&gt;Drop Shadow</strong>. Use <strong>0 for the Distance, 65% Opacity, 4 for the Blur</strong>. The angle won't make any difference because the Distance is 0.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_5.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 6</h3> <p>Now again let's add some <strong>noise</strong> so the rectangle won't have that solid color, but instead a nice plastic feeling.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_6.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 7</h3> <p>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.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_7.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 8</h3> <p>Duplicate the layer and go to <strong>Modify&gt;Transform&gt;Flip Vertical</strong>. Then change the <strong>Opacity to 50%</strong> and go to<strong> Modify&gt;Mask&gt;Reveal All.</strong> With the <strong>Gradient Tool (G)</strong> 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.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_8.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 9</h3> <p>Add a new rectangle with the <strong>Rectangle Tool</strong> and fill it with a gradient using white for the both colors. Just change the opacities one will be <strong>100% (1) and the other 0%(2)</strong>. Use the <strong>Gradient Tool (G)</strong> to apply the gradient in a <strong>angle of 90º.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_9.jpg" width="580" height="746" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 10</h3> <p>To create the light effect it was very easy. With the<strong> Ellipse Tool (U)</strong> create an ellipse, then use white for the color and change the <strong>Edge to Feather and 100 for the value (1)</strong>. After that just change the <strong>Blend Mode to Overlay (2).</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_10.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 11</h3> <p>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<strong> 50-60% for the new ellipses.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_11.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/media_1246804086988.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/media_1246804109867.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/media_1246804117902.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/media_1246804125885.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/media_1246804146209.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 11</h3> <p>For the slogan, I used <strong>Arial 35px</strong> 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<strong> 1px for the Distance, 90% for the Opacity</strong>, <strong>1 for the Blur and 90º for the Angle.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_11_1.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 12</h3> <p>With the <strong>Round Rectangle Tool (U)</strong> create a rectangle, fill it with grey and change the <strong>opacity to 80% (1)</strong>. The with the <strong>Rectangle Tool (U)</strong> create another rectangles but beneath the grey one. Also make it smaller (2). Again with the<strong> Round Rectangle Tool (U)</strong> create another element (3). Then select the 2 round rectangles and go to <strong>Modify&gt;Combine Path&gt;Punch</strong>. Select all elements and group them. After that add a noise like in the first steps.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_12.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 13</h3> <p>With the <strong>Line Tool (N)</strong> create a line then go to <strong>Modify&gt;Mask&gt;Reveal All</strong>. 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.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_13.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 14</h3> <p>With the<strong> Ellipse Tool (U)</strong> add an ellipse in black and change the <strong>Edge to Feather and use 60 for the amount. </strong>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 <strong>Edit&gt;Cut</strong>. Then select the ellipse and go to <strong>Modify&gt;Mask&gt;Paste as Mask.</strong></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_14.jpg" width="580" height="797" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 15</h3> <p>Repeat the same process to mask the Id Card.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_15.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 16</h3> <p>Now let's add the lanyard. Again repeat the same process to mask it. Also add a little shadow to the card and lanyard.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_16.jpg" width="580" height="829" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 17</h3> <p>Place some icons on the left column and it's time to add the content.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_17.jpg" width="580" height="504" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Step 18</h3> <p>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.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Step_18.jpg" width="580" height="470" alt="Web Site Design: Wellknown.as Case" /></p> <h3>Conclusion</h3> <p>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.</p> <p class="imgC"> <a href="http://wellknown.as"><img src="http://imgs.abduzeedo.com/files/tutorials/Designing_a_Website_Wellknown.as_Case/Conclusion.jpg" width="580" height="470" alt="Web Site Design: Wellknown.as Case" /><br />Click the image to visit the web site</a> </p></div> Mon, 06 Jul 2009 11:14:48 +0000 abduzeedo 9027 at https://abduzeedo.com Fireworks Quick Tips #1 - How to use QuickMask https://abduzeedo.com/fireworks-quick-tips-1-how-use-quickmask Fireworks Quick Tips #1 - How to use QuickMask<a title="View user profile." href="/profile/fabiano" lang="" about="/profile/fabiano" typeof="schema:Person" property="schema:name" datatype="" class="username">fabiano</a>01.14.09 <div class="clearfix text-formatted blog-content field__item Body Array body"><h3>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. <a href="http://abduzeedo.com/10-photoshop-masters">We already talked about him</a>, but if you don't know the <a href="http://www.adhemas.com/">work of this Brazilian artist</a> yet, please check out his site after the tutorial!</h3> <p>But for now, let's take a look at how this command works.</p> <h3>STEP 1 - Open a new file</h3> <p>Open Fireworks and choose a 600x600 size for canvas.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask1.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 2 - Creating the paper</h3> <p>Our first element will be a <strong>Rectangle</strong> with <strong>400x500px </strong>and color <strong>#DDDDDD</strong>. After creating it apply some shadows and a texture like the image.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask2.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 3 - Creating the canvas</h3> <p>Now you will create another rectangle. This will be the limit of our photo. So draw a white rectangle with <strong>345x370px </strong>and place like the image. Apply some shadows to create depth in the paper.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask3.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 4 - Choosing the image</h3> <p>As I said before, we choose work with <a href="http://www.adhemas.com/">Adhemas</a> 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.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask4.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 5A - Applying mask</h3> <p>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.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask5.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 5B - Applying mask</h3> <p>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 <strong>Modify &gt; Mask &gt; Paste as Mask</strong>. You will see that the rectangle made a mask in the image, the same way that we made it before.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask6.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>STEP 6 - Playing with the mask</h3> <p>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.</p> <p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask7.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p> <h3>FINAL RESULT</h3> <p>Now you can play with the mask. Use your imagination, explore backgrounds, textures and whatever else you want.</p><p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask8.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p><br /><p class="imgC"><img src="http://www.abductit.com/files/tutorials/Fireworks_tips_-_Quickmask/fireworks_mask9.jpg" alt="Fireworks Quick Tips #1 - How to use Mask" title="Fireworks Quick Tips #1 - How to use Mask" /></p></div> Wed, 14 Jan 2009 18:06:04 +0000 fabiano 2050 at https://abduzeedo.com Awesome Light Effects in Fireworks inspired by the James White's O series https://abduzeedo.com/james-white-o-series-fireworks Awesome Light Effects in Fireworks inspired by the James White&#039;s O series<a title="View user profile." href="/profile/fabiano" lang="" about="/profile/fabiano" typeof="schema:Person" property="schema:name" datatype="" class="username">fabiano</a>11.27.08 <div class="clearfix text-formatted blog-content field__item Body Array body"><h3>I'm sure that pretty much everyone of you guys loves the art of <a href="http://blog.signalnoise.com">James White</a>, at least, we here over at abduzeedo do. Then, a few days ago we featured on the <a href="http://abduzeedo.com/wallpaper-week-30-james-white-o-series">Wallpaper of the Week</a> an image created by him entitled <a href="http://blog.signalnoise.com/?p=468">The O Series</a>, he has even created a <a href="http://blog.signalnoise.com/?p=484">tutorial </a>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.</h3> <p>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!</p> <h3>STEP 1 - THE O</h3> <p>To start up, just create a simple white circle in the middle of the canvas.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227724217321_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 2 - RADIAL GRADIENT</h3> <p>Now set a radial gradient for the circle. Use the color <strong>#000 </strong>for the center and <strong>#FFF </strong>for the borders. Note that we move the black color near to the white. Also use an opacity of<strong> 55%</strong>.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227724231098_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 3 - START PLAYING WITH CIRCLES</h3> <p>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 <strong>blend mode</strong> to <strong>Overlay</strong>.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227726242008_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 4</h3> <p>Another circle, copy and paste the last one, move a bit to the right and change to <strong>Color Dodge</strong>. Use the opacity in <strong>40%</strong>.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227726316280_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 5</h3> <p>Copy the last one, scale down a little bit and change the <strong>Blend Mode</strong> to <strong>Soft Light.</strong> Bring the opacity back to <strong>100%</strong>.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227726388787_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 6</h3> <p>Copy and paste this last circle and move to the right.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227726480872_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 7 - ADD SOME LIGHTS</h3> <p>We've created all the circles. Now draw an irregular polygon like the image. Apply a <strong>Feather 40</strong> and change to <strong>Overlay</strong>. Duplicate this layer to enhance the lights.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227726691240_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 8 - MORE LIGHTS</h3> <p>Now, create 3 small white circles, place them in the parts where are the lights. Change the <strong>Feather 20</strong> and the<strong> </strong>Blending Mode<strong> to Soft Light</strong>. If you want to make it even shiner, duplicate these 3 circles. </p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227727184667_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 9 - COLOR 1</h3> <p>Create an ellipse with the color <strong>#CC9900, Feather 39 and Overlay</strong>. Place it over one of the lights.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227727391363_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 10 - COLOR 2</h3> <p>Create an ellipse with the color <strong>#FF3366, Feather 62 and Overlay</strong>. Place it over the second light.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227727545432_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>STEP 11 - COLOR 3</h3> <p>Create an ellipse with the color <strong>#33CCFF, Feather 62 and Overlay</strong>. Place it over the last light.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227727746965_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <h3>FINAL RESULT</h3> <p>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.</p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_1227727845089_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_122772784508_2_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> <p class="imgC"> <img src="http://imgs.abduzeedo.com/files/tutorials/James_White_O_Series_in_Fireworks/media_122772784508_3_lg.jpg" alt="James White O Series in Fireworks" title="James White O Series in Fireworks" /></p> </div> Thu, 27 Nov 2008 16:15:20 +0000 fabiano 1487 at https://abduzeedo.com Awesome Floral Type in Fireworks and Photoshop in 5 minutes https://abduzeedo.com/awesome-floral-type-fireworks-and-photoshop-5-minutes Awesome Floral Type in Fireworks and Photoshop in 5 minutes<a title="View user profile." href="/profile/abduzeedo" lang="" about="/profile/abduzeedo" typeof="schema:Person" property="schema:name" datatype="" class="username">abduzeedo</a>11.10.08 <div class="clearfix text-formatted blog-content field__item Body Array body"><h3>A few weeks ago we had a very nice Vector Packs giveway from <a href="http://www.designious.com/">Designious</a>. 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 <a href="http://www.siscottstudio.com/">Si Scott</a> or <a href="http://www.gingermonkeydesign.com/">Gingermonkey</a>.</h3> <p>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. </p> <h3>Step 1</h3> <p>Open Fireworks and type the text you want, I used GIVEAWAY. The color and size doesn't really matter because FW will use vectors.</p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_1.jpg" width="580" height="294" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 2</h3> <p>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<strong> Text&gt;Convert to Paths</strong>. Then go to <strong>Modify&gt;Ungroup. </strong></p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_2.jpg" width="580" height="424" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 3</h3> <p>Select the first letter and the floral vector. Then go to<strong> Modify&gt;Combine Paths&gt;Join.</strong> You will notice that where the intesection of the 2 elements will be negative. </p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_3.jpg" width="580" height="732" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 4</h3> <p>Place all the florals you want for your design before combining them with the text. </p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_4.jpg" width="580" height="276" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 5</h3> <p>Now just repeat the <strong>Join</strong> 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.</p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_5.jpg" width="580" height="891" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 6</h3> <p>Now let's go to Photoshop. Create a new document, I used <strong>1920x1200 pixels </strong>that is a nice size for wallpapers. </p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_6.jpg" width="580" height="371" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 7</h3> <p>Select the background layer and apply some layer styles. I used <strong>Inner Glow, Color Overlay and Pattern Overlay</strong> 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.</p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_7.jpg" width="580" height="1261" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 8</h3> <p>Create a new layer on top of the background layer and go to<strong> Filter&gt;Render&gt;Clouds...</strong> Make sure you had black and white for the background and foreground colors. After that select the <strong>Eraser Tool (E)</strong> and delete a bit in the center of the image, there is going to be where we will place the text. Change the <strong>Blend Mode to Color Burn </strong>and the <strong>Opacity to 80%</strong>. You can delete more areas if you want.</p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_8.jpg" width="580" height="1486" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 9</h3> <p>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. </p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_9.jpg" width="580" height="368" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Step 10</h3> <p>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 <strong>Layer&gt;Layer Styles&gt;Drop Shadow..</strong>. Use <strong>50% for the Opacity and 90º angle.</strong> 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<strong> white for the Color and Normal fo the Blend Mode</strong>, it will give a very subtle highlight to the edges. Use the image below for the value.</p> <p class="imgC"> <img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Step_10.jpg" width="580" height="1548" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /></p> <h3>Conclusion</h3> <p>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 <a href="http://www.siscottstudio.com/">Si Scott</a> 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.</p> <p class="imgC"> <a href="http://flickr.com/photos/azeected/2964267882/"><img src="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/Conclusion.jpg" width="580" height="368" alt="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" title="Awesome Floral Type in Fireworks and Photoshop in 5 minutes" /><br /><cite>Click on the image for full preview.</cite></a> </p> <h3>Download the Photoshop file</h3> <p class="imgC"><a href="http://www.zee.com.br/extranet/abduzeedo/tutorials/Awesome_Floral_Type_in_Fireworks_and_Photoshop_in_5_minutes/giveaway.zip">Download the Photoshop file used for this tutorial</a></p></div> Mon, 10 Nov 2008 10:45:13 +0000 abduzeedo 1259 at https://abduzeedo.com