tag:blogger.com,1999:blog-78211966930149087292023-11-16T15:58:21.415+08:00cool style graphicsNurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.comBlogger79125tag:blogger.com,1999:blog-7821196693014908729.post-50590428727847668492009-09-18T08:39:00.004+08:002009-09-18T08:52:28.618+08:00Last Design before....<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7V4BMq0xBdF497I0OgD5LPItiVzPIiPZ4sOoxepC039q7eLj9JOMticavUpIRX_Yn40beXOD_SRAmGGc1NeyVB7poRfgddgFZeHC6zSHr5mHC5FkAbOjtPE-_aBBhz_VZO9_efCkfZNnG/s1600-h/kad+kahwin.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 383px; height: 428px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7V4BMq0xBdF497I0OgD5LPItiVzPIiPZ4sOoxepC039q7eLj9JOMticavUpIRX_Yn40beXOD_SRAmGGc1NeyVB7poRfgddgFZeHC6zSHr5mHC5FkAbOjtPE-_aBBhz_VZO9_efCkfZNnG/s320/kad+kahwin.jpg" alt="" id="BLOGGER_PHOTO_ID_5382601027899942962" border="0" /></a><br />Nie design terakhir sebelum aku blik kg... Lega keje aku dh settle... Dapat la.. aku blik kg ngan tenang huhu... nk sambut raya.... hahaha.... syok nyew aku... dh lama x blik kg... rindu kt mak abh, blik, katil, tilam, bantal, selimut aku d kampung... huhuhu...<br />Dah la bln Ramadhan nie aku busy gile... nk wat poster Raya pon x sempat... Apa-apa pon aku nk ucapkan Selamat Hari Raya Aidilfitri Maaf Zahir & Batin...<br />kepada mak abh, smua kawan2, saudara-mara, jiran tetangga, bos aku dn smua umat islam la.... Semoga syawal nie beri manafaat kpd kte smua...<br /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com2tag:blogger.com,1999:blog-7821196693014908729.post-22336405386097126412009-08-12T17:52:00.005+08:002009-08-13T10:56:10.817+08:00Poster Ramadhan Al-Mubarak<div style="text-align: center;"><img style="cursor: -moz-zoom-out; width: 451px; height: 561px;" alt="http://img248.imageshack.us/img248/9483/posterramadhan.jpg" src="http://img248.imageshack.us/img248/9483/posterramadhan.jpg" /><br /><br />Nur tujukan kepada smua kawan2, sahabat2, jiran2, saudara mara, & umat islam la....<br /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com6tag:blogger.com,1999:blog-7821196693014908729.post-81337846039820799342009-07-11T15:24:00.027+08:002009-07-11T17:18:28.705+08:003D Push Pin and a Paper Note in Illustrator<div style="text-align: center;"><img src="file:///C:/DOCUME%7E1/hbe2/LOCALS%7E1/Temp/moz-screenshot.jpg" alt="" /><img src="file:///C:/DOCUME%7E1/hbe2/LOCALS%7E1/Temp/moz-screenshot-1.jpg" alt="" /><img style="cursor: -moz-zoom-out; width: 400px; height: 400px;" alt="http://img29.imageshack.us/img29/6461/82393136.jpg" src="http://img29.imageshack.us/img29/6461/82393136.jpg" /><br /></div>For the 3D Revolve Options in Illustrator, we need to create the front view outline shape of the object we want. It always goes from the center point to the outline of the object.<br /><h3>Step 1</h3> <p>Lets start with our push pin. Create a new file. Drag a vertical guide onto the artboard. Select the Pen Tool(P), set the fill color to none, and the stroke to black. Note that you can change the color at anytime later on. Then draw a line, as you see in the image below.</p> <div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img11.imageshack.us/img11/9244/13181946.jpg" src="http://img11.imageshack.us/img11/9244/13181946.jpg" /></div><h3>Step 2</h3> <p>Select the path and open the Revolve Window under Effects > 3D > Revolve.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img212.imageshack.us/img212/9937/98338898.jpg" src="http://img212.imageshack.us/img212/9937/98338898.jpg" /></div><h3>Step 3</h3> <p>As you can see, we have quite a few options to apply to our path. Select the Preview option. This will give us a live view of our object. Chose the following settings: X axis of -35 degrees, Y axis of -28 degrees, Z axis of 38 degrees, and leave the Perspective at 0.</p> <p>Click the More Options Button. Underneath the Revolve tab, you will see the Surface Options. Let's have a closer look at the options. You can see one Highlight Point that we can move around by clicking and dragging it. We can also change the intensity of the lights. If we choose to, we can add more highlight points by clicking the New light button. In our case, we don't need to change anything. But you can play around and add more highlights if you'd like.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img217.imageshack.us/img217/3166/67056653.jpg" src="http://img217.imageshack.us/img217/3166/67056653.jpg" /></div><h3>Step 4</h3> <p>Open the Swatch Palette and go to Open Swatch Library and select the Earthtone swatches. I chose a nice blue color. Select the path of the 3D pin and change the color. You can of course choose any color you prefer.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img217.imageshack.us/img217/8040/32576938.jpg" src="http://img217.imageshack.us/img217/8040/32576938.jpg" /></div><h3>Step 5</h3> <p>Let's create the metal pin. Draw a shape like you see in the image below. Make sure that the two points are vertically aligned. You can achieve this by selecting them both with the Direct Selection Tool (A), and press Ctrl + Alt + J to open the Average Palette. From there choose Vertical. Then click OK. </p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img237.imageshack.us/img237/2135/40390219.jpg" src="http://img237.imageshack.us/img237/2135/40390219.jpg" /></div><h3>Step 6</h3> <p>Select the path and open the 3D Revolve Options again. We'll choose the same settings, since the pin will have to be aligned with the head, but we will add two more highlights. Align them as you see in the image below. Make sure you have the Preview selected.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img268.imageshack.us/img268/4241/55779644.jpg" src="http://img268.imageshack.us/img268/4241/55779644.jpg" /></div><h3>Step 7</h3> <p>Move the pin upwards and behind the red pin head. The shortcut for aligning layers and paths is Ctrl + [ (behind) and Ctrl + ] (in front).</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img20.imageshack.us/img20/690/86648118.jpg" src="http://img20.imageshack.us/img20/690/86648118.jpg" /></div><h3>Step 8</h3> <p>Select the Blue head shape and choose Overlay in the Transparency Palette. This will enable us to see the pin and align it better. </p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img35.imageshack.us/img35/1174/72721442.jpg" src="http://img35.imageshack.us/img35/1174/72721442.jpg" /></div><h3>Step 9</h3> <p>The pin just looked a little too short, but since we have not expanded any of your 3D effects, we can easily transform the objects. Select the bottom path point with the Direct Selection Tool and lengthen the pin. All our 3D effects will be automatically applied. Then set the Blue head shape back to Normal.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img339.imageshack.us/img339/8793/21302601.jpg" src="http://img339.imageshack.us/img339/8793/21302601.jpg" /></div><h3>Step 10</h3> <p>Create a new layer underneath the pin layer and call it "paper." Create a rectangular shape with the Pen Tool (P). Then choose a light blue color and fill it.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img529.imageshack.us/img529/2527/67981679.jpg" src="http://img529.imageshack.us/img529/2527/67981679.jpg" /></div><h3>Step 11</h3> <p>Copy the rectangular shape underneath by pressing Ctrl + C. Then press Ctrl + B and color it with a linear gradient from black to medium grey. Transform it slightly with the Direct Selection Tool (A) by selecting the points and handles and dragging it around until the shape is a little bigger than the paper shape.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img124.imageshack.us/img124/7018/16169254.jpg" src="http://img124.imageshack.us/img124/7018/16169254.jpg" /></div><h3>Step 12</h3> <p>Select the grey pin part and shorten it so it looks like it pierces through the paper. You can do this by selecting the bottom path point with the Direct Selection Tool (A) and drag the point upwards. The 3D effect will be automatically adjusted.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img124.imageshack.us/img124/9507/82489197.jpg" src="http://img124.imageshack.us/img124/9507/82489197.jpg" /></div><h3>Step 13</h3> <p>Select the Blue pin head and make a copy. While still selected, go to Object > Expand Appearance. This will apply the 3D effect.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img8.imageshack.us/img8/474/42228320.jpg" src="http://img8.imageshack.us/img8/474/42228320.jpg" /></div><h3>Step 14</h3> <p>Keep the object selected and open the Pathfinder Palette. Choose Add To Shape Area from the Shapes Modes.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img383.imageshack.us/img383/6899/96877319.jpg" src="http://img383.imageshack.us/img383/6899/96877319.jpg" /></div><h3>Step 15</h3> <p>Fill the shape with black and go to Object > Path > Simplify. Move the cursor for the Curve Precision to 100%. This will reduce some points that are unnecessary quickly.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 399px; height: 405px;" alt="http://img32.imageshack.us/img32/5027/59702201.jpg" src="http://img32.imageshack.us/img32/5027/59702201.jpg" /></div><h3>Step 16</h3> <p>Select our shadow shape, rotate it, scale it, and skew it until it resembles the image below.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 405px;" alt="http://img161.imageshack.us/img161/5592/53336787.jpg" src="http://img161.imageshack.us/img161/5592/53336787.jpg" /></div><h3>Step 17</h3> <p>Apply a linear gradient that goes from a medium to light grey. This will make our shadow look more realistic.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 406px;" alt="http://img106.imageshack.us/img106/7949/46704503.jpg" src="http://img106.imageshack.us/img106/7949/46704503.jpg" /></div><h3>Step 18</h3> <p>Select the paper shape and make a copy on top of it by pressing Ctrl + C + F. Then open the Swatch library patterns by clicking on the Arrow on the right hand side of the Swatch Palette. In the drop down, choose Open Swatch Library > Patterns > Basic Graphics > Basic Graphic_Textures. I chose the pattern called USGS Sewage Disposal. Fill the shape with the pattern and set the Transparency to Multiply and its Opacity to 8%. Now we have lined paper.</p><div style="text-align: center;"><img style="cursor: -moz-zoom-in; width: 400px; height: 434px;" alt="http://img17.imageshack.us/img17/8401/66584234.jpg" src="http://img17.imageshack.us/img17/8401/66584234.jpg" /></div><h3>Step 19</h3> <p>Voila, your very own push pin and note paper.</p><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowlvIL1XsFxRUYqBmDaptPQOHrCSMdxGBjw_t4zC51XATUCZRAaIvZBYSvHI3Y35ZM8dozVGBHJl0iP4C9IoSL2-21x7nhqmVQlfir9dx9F9_Xm3ZM-hv97IMPB6OlsyJu1LayN9-kQX4/s1600-h/1.jpg"><img style="cursor: -moz-zoom-in; width: 400px; height: 400px;" alt="http://img29.imageshack.us/img29/6461/82393136.jpg" src="http://img29.imageshack.us/img29/6461/82393136.jpg" /></a></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com3tag:blogger.com,1999:blog-7821196693014908729.post-27915439883021013292009-06-13T11:24:00.003+08:002009-06-13T11:59:40.790+08:00Photo Strip (Photoshop Tutorial)<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtCSnbOA6mVexh-D7a_vIXbdv8jbRheS929OvCo6OgIzY_9B9cZEtSQoks8TPfWv4bBPIvQ0RML57EcpwmBLJwQ4azbiY2vqDK-J701L3Fk8zMfOicQFz1PzMuok78woorMXT-7RIJrsE/s1600-h/photo-strip-final.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 215px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtCSnbOA6mVexh-D7a_vIXbdv8jbRheS929OvCo6OgIzY_9B9cZEtSQoks8TPfWv4bBPIvQ0RML57EcpwmBLJwQ4azbiY2vqDK-J701L3Fk8zMfOicQFz1PzMuok78woorMXT-7RIJrsE/s320/photo-strip-final.jpg" alt="" id="BLOGGER_PHOTO_ID_5346648081075273410" border="0" /></a><br />The warp tool will be used to create the twisting effect (so, you need Photoshop CS2 or above to complete this tutorial). With the completion of this tutorial, you will be able build a photo strip with your own photos or artwork. Don’t miss out this fantastic feature!<br /></div><h3 style="text-align: justify;"><em>1.</em> Create a Strip (Vector Shapes)</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">First, create a strip with the Pen tool (either in Photoshop or Illustrator). We will use these shapes as a guideline and for masking purposes.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 420px; height: 375px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/stripe-outline.gif" alt="stripe outline shapes" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>2.</em> Photo Stack</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Choose 3 photos of your choice and stack them together. </p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/photo-stack.jpg" alt="photo stack" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>3.</em> Warping (Photoshop Warp Tool)</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Adjust the layer opacity to 40 or 50% so you can see the guideline underneath. Go to <em>Edit > Transform > Warp</em>. Now you should see a grid and 4 anchor points in the corner. To bending the image, simply drag the anchor points, direction points, or grid lines.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 449px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/warp-grid-1.jpg" alt="grid 1" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Repeat this step for the rest of the strip. Since this step is relatively simple and repeatitive, I’m not going to get into the details. Here are the screenshots of the steps:</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 254px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/warp-grid-2.jpg" alt="grid 2" /></p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 254px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/warp-grid-3.jpg" alt="grid 3" /></p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 257px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/warp-grid-4.jpg" alt="grid 4" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>4.</em> Masking</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Organize the layers into groups (ie. strip 1, 2, 3, 4). </p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 423px; height: 256px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/layer-group.jpg" alt="layer groups" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Load selection from the shapes you created in step 1 and add a layer mask for each group (so you get a perfect smooth curve).</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/layer-mask.jpg" alt="layer mask" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>5.</em> Shadows</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">In masked group 1, create a new layer above the strip. Use the Gradient tool and drag from the top to bottom to create a black gradient.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 272px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/shadow-1.jpg" alt="shadow" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Repeat this step for the other strips.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 450px; height: 254px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/shadows.jpg" alt="shadows" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>6.</em> Highlights</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To make highlighted and glossy areas: create a round glowing circle, compress it, and rotate it in the angle according to your strip’s direction.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img style="width: 421px; height: 286px;" src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/highlight.jpg" alt="shadow" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>7.</em> Line Strokes</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To make line strokes: load a selection of the mask, create a new layer, fill it with black, shift the selection to the left by 1 or 2 pixels, delete the selected area by pressing the Delete key.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="image"><img src="http://www.webdesignerwall.com/wp-content/uploads/2009/01/line-strokes.jpg" alt="line strokes" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><em>8.</em> Final Touches</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To make the image look more interesting, desaturated the two strips in the back.</p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com9tag:blogger.com,1999:blog-7821196693014908729.post-12403632956328825062009-06-02T14:05:00.008+08:002009-06-03T15:41:19.962+08:00Create a Face Shattering Effect<table border="0" cellpadding="0" cellspacing="0" width="610"><tbody><tr> <td><img style="width: 480px; height: 113px;" class="alignnone" title="Header" src="http://10steps.sg/wp-content/uploads/photo20/header.jpg" alt="" /></td> </tr> <tr> <td><br /></td> </tr> <tr> <td> <table style="width: 500px; height: 4239px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/1.jpg" alt="" /><br /></td> <td width="10"><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Preparations:</strong></span></p> <p><span style="font-size:11;">We will need close-up image of a nice face, prefably facing front. I’m using one of Jessica Alba wallpapers in this tutorial. You will also need the Reborn Brush created by Rubina119.</span></p> <p><span style="font-size:11;">Click <a href="http://rubina119.deviantart.com/art/Reborn-Brushes-85215802" target="_blank">here</a> to download the Reborn Brushes.</span></p> <p><span style="font-size:11;">All rights of these resources belong to their respective owners.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/2.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 1 - Setting Up Background:</strong></span></p> <p><span style="font-size:11;">Create a document of size 750×550 pixels.</span></p> <p><span style="font-size:11;">Fill the Background layer with #000000.</span></p> <p><span style="font-size:11;">Place the face at the center of the document and use Soft Eraser tool to remove the other unwanted background.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/3.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 2a - Drawing Face Grids:</strong></span></p> <p><span style="font-size:11;">Create a new document of size 20×20 pixels and create a new layer. Use Pencil tool with size 1px and color #FFFFFF, draw left and bottom border to form a "L". Hide the Background layer and click Ctrl+A. Go to Edit > Define Pattern. Name this pattern as Grid.</span></p> <p><span style="font-size:11;">Back to Jessica Alba’s document, create a new layer above the Face. Use the Paint Bucket tool and select to fill with Grid pattern</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/4.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 2b - Drawing Face Grids:</strong></span></p> <p><span style="font-size:11;">Remove those grids that cross outside of the face area.</span></p> <p><span style="font-size:11;">Go to Edit > Transform > Warp.</span></p> <p><span style="font-size:11;">Distort the grids the way shown in the diagram.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/5.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 2c - Drawing Face Grids: </strong></span></p> <p><span style="font-size:11;">Set the opacity of the grid layer to 20%.</span></p> <p><span style="font-size:11;">Right-click on the grid layer and choose Blending Options.</span></p> <p><span style="font-size:11;">Activate Outer Glow and set its Blend Mode to Color Dodge, Opacity to 100%, Color to #FFFFFF, Spread to 0 and Size to 5px. Leave the rest of the settings as default.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/6.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 3a - Shattered Blocks: </strong></span></p> <p><span style="font-size:11;">Create a new layer and name it as Holes.</span></p> <p><span style="font-size:11;">With Pen tool, path out several square holes according to the face grids.</span></p> <p><span style="font-size:11;">Go to the Paths tab, Ctrl+left click on the work path layer created. Back to Layers tab, select the Holes layer and fill the selection with #000000.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/7.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 3b - Shattered Blocks: </strong></span></p> <p><span style="font-size:11;">Ctrl+left click on the Holes layer to load selection.</span></p> <p><span style="font-size:11;">Select the Face layer and hit Ctrl+X to cut out the pixels. Then press Ctrl+V to paste and then name this new layer as Blocks. </span></p> <p><span style="font-size:11;">Drag the blocks to the right with Move tool. Go to Edit > Free Transform to reduce the size slightly. </span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/8.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 3c - Shattered Blocks: </strong></span></p> <p><span style="font-size:11;">Duplicate the Blocks layer. Shift the lower Blocks layer 1 pixel to the left. Repeat this for 10 times and you will get some sort of extruding effect. Merge these 10 layers of duplicated Blocks and name this new merged layer as Sides. Right-click on the Sides layer and choose Blending Options. Activate Gradient Overlay and set Blend Mode to Normal, Opacity to 80%, Gradient from #000000 to #D58761 and Angle to 180. Leave the rest as default.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/9.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 3d - Shattered Blocks: </strong></span></p> <p><span style="font-size:11;">Activate Pattern Overlay and set Blend Mode to Multiply, Opacity to 100% Pattern to Metal Landscape. Leave the rest as default.</span></p> <p><span style="font-size:11;">Right-click on Blocks layer and choose Blending Options. Activate Outer Glow and set Blend Mode to Color Dodge, Opacity to 75%, Color to #FFFFFF and Size to 10px. Leave the rest as default.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/10.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 3e - Shattered Blocks: </strong></span></p> <p><span style="font-size:11;">Repeat Step 3a to 3d for 2-3 more times to form more blocks floating towards the right.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/11.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 4 - Adding Depth to Holes: </strong></span></p> <p><span style="font-size:11;">Merge all the Holes layers. Right-click on the merged layer and choose Blending Options.</span></p> <p><span style="font-size:11;">Activate Bevel and Emboss, set the Style to Inner Bevel, Depth to 72%, Size to 5px, Soften to 0px, Angle to 0, Altitude to 50, Highlight Mode to Screen, Highlight Color to #DCA57E, Highlight Opacity to 100%, Shadow Mode to Multiply, Shadow Color to #000000 and Shadow Opacity to 75%. Leave the rest of settings as default.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/14.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 5 - Adding Smoke: </strong></span></p> <p><span style="font-size:11;">Create a new layer below the Blocks and name it as Smoke. Set the foreground color to #FFFFFF. Load the Reborn brushes downloaded earlier and paint a few smoke of different sizes on this layer. </span></p> <p><span style="font-size:11;">Right-click on the Smoke layer and choose Blending Options. Activate Outer Glow and set its Blend Mode to Linear Dodge (Add), Opacity to 75%, Color to #FFFFFF, Spread to 0px and Size to 5px. Leave the rest of settings as default. </span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/15.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 6 - Adding Dark Blocks: </strong></span></p> <p><span style="font-size:11;">Create a new layer and name it as Dark Blocks.</span></p> <p><span style="font-size:11;">Using Pen tool, path out few more blocks along the face grid. Fill the shapes with #000000.</span></p> <p><span style="font-size:11;">Set the Blend Mode of Dark Blocks layer to Soft Light.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/16.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 7 - Adding Light Blocks: </strong></span></p> <p><span style="font-size:11;">Create a new layer and name is as Light Blocks.</span></p> <p><span style="font-size:11;">Similar to Step 6 but this time fill the shapes with #FFFFFF.</span></p> <p><span style="font-size:11;">Set the Blend Mode of Light Blocks layer to Soft Light.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/17.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Step 8 - Adjusting Colors: </strong></span></p> <p><span style="font-size:11;">Now we need to smooth the face a little. Select the Face layer and go to Filter > Blur > Surface Blur. Set the Radius to 5px and Threshold to 15 levels.</span></p> <p><span style="font-size:11;">Create a new Levels Adjustment Layer and key in 10, 1.25, 244.</span></p> <p><span style="font-size:11;">Create a new layer and using a large Soft Brush tool with color #000000 and opacity 40%, paint some dark areas on the right to fade the blocks slightly.</span></p> </td> </tr> <tr> <td><br /></td> <td><br /></td> <td valign="top"><br /></td> </tr> <tr> <td><img style="width: 300px; height: 220px;" src="http://10steps.sg/wp-content/uploads/photo20/18.jpg" alt="" /></td> <td><br /></td> <td valign="top"> <p><span style="font-size:14;"><strong>Optional: </strong></span></p> <p><span style="font-size:11;">I merely added a barcode on her right arm to complete the design.</span></p> <p><span style="font-size:11;">This is another long tutorial and I hope you will like this effect. </span></p></td></tr></tbody></table></td></tr></tbody></table>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com9tag:blogger.com,1999:blog-7821196693014908729.post-29742191035072776302009-05-30T09:53:00.004+08:002009-05-30T10:05:06.946+08:00The Night Shooting<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGEFw4BGYsQrqsLeogd7UDlvWV_-TFI527vBJ7q24Yb6KeC1CojT33-BmZ-y_kxWVd4Lgi6sfFDISraotj1iKJSNO127jorl16JwlV16cAVXZvtwk-nLXS3C_AQgEcC8DFYpafGMHIZn7/s1600-h/night_shooting.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 330px; height: 494px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGEFw4BGYsQrqsLeogd7UDlvWV_-TFI527vBJ7q24Yb6KeC1CojT33-BmZ-y_kxWVd4Lgi6sfFDISraotj1iKJSNO127jorl16JwlV16cAVXZvtwk-nLXS3C_AQgEcC8DFYpafGMHIZn7/s320/night_shooting.jpg" alt="" id="BLOGGER_PHOTO_ID_5341429433162494450" border="0" /></a><br /><strong>The night shooting usually takes place on a long exposure that is why all the moving luminous objects leave very evident lines and flames. Let’s try making some experiments with a luminous Ferris wheel. </strong><br /><strong></strong><br /><strong>We’ll need in this case the Radial Blur filter and some of experience working with layer masks. </strong><br /><strong></strong><br /><strong></strong>1. Firstly we need to create a copy of the layer (<strong>CTRl+J</strong>).<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/001.jpg" target="_blank"><img style="width: 450px; height: 397px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/001.jpg" /> </a><br /></div><br />Select after that the next option, <strong>Filter > Blur > Radial Blur</strong>, where we have to move the slider on <strong>Amount </strong>on <strong>10</strong> selection. Choose next on the <strong>Blur Method</strong> list the<strong> Spin</strong> selection. Change after that the <strong>Quality</strong> value on <strong>Good</strong> and press <strong>OK</strong>.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/002.jpg" target="_blank"><img style="width: 450px; height: 397px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/002.jpg" /> </a><br /></div><br /><div style="text-align: center;"><img style="width: 450px; height: 547px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/003.jpg" /><br /></div><br />Make one more copy of the layer and give to the new copy the <strong>Screen</strong> blending mode.<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 536px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/004.jpg" /><br /></div><br />2. Merge down the last two layers by choosing the command <strong>Layer > Merge Down</strong> <strong>(Ctrl+E)</strong> and set for the new result the <strong>Screen</strong> blending mode.<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 554px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/005.jpg" /><br /></div><br />This layer we’ll hide with a mask, selecting in the menu the next option: <strong>Layer > Add Layer Mask > Hide All</strong>.<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 436px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/006.jpg" /><br /></div><br />Next we’ll select the <strong>Brush Tool (B)</strong> to paint the mask accurately with white color to make visible only the wheel.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/007.jpg" target="_blank"><img style="width: 450px; height: 271px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/007.jpg" /> </a><br /></div><br />3. When painting the mask, we need to try not to touch the unmoving objects, like the pavilion or the wheel’s supports. Their blurring could be very inappropriate for our final result. On the other hand, we need all the moving parts of the wheel to be painted out very accurately.<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 542px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/008.jpg" /><br /></div><br />4. Make a copy of the layer<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 536px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/009.jpg" /><br /></div><br />and select for it <strong>Filter > Blur > Gaussian Blur</strong>, having a radius of <strong>10</strong>.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/010.jpg" target="_blank"><img style="width: 450px; height: 465px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/010.jpg" /> </a><br /></div><br /><div style="text-align: center;"><img style="width: 450px; height: 519px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/011.jpg" /><br /></div><br />Make a click on the mask and fill it with black color (<strong>Edit > Fill</strong>).<br /><br /><div style="text-align: center;"><img style="width: 450px; height: 555px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/012.jpg" /><br /></div><br /><div style="text-align: center;"><img style="width: 450px; height: 535px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/013.jpg" /><br /></div><br />ext we need again to process the layer’s mask by painting the wheel’s zones with white color using the<strong> Brush Tool (B)</strong> with <strong>Hardness</strong> on <strong>45%</strong>.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/014.jpg" target="_blank"><img style="width: 450px; height: 361px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/014.jpg" /> </a><br /></div><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/015.jpg" target="_blank"><img style="width: 450px; height: 396px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/015.jpg" /> </a><br /></div><br />5. Get back to the Background’s layer and select the<strong> Eyedropper Tool (I)</strong> for select the colors of blue neon lights on the wheel.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/016.jpg" target="_blank"><img style="width: 450px; height: 395px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/016.jpg" /> </a><br /></div><br />Choose after that <strong>Select > Color Range</strong> with <strong>Fuzziness</strong> parameter of <strong>119</strong>.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/017.jpg" target="_blank"><img style="width: 450px; height: 422px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/017.jpg" /> </a><br /></div><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/018.jpg" target="_blank"><img style="width: 450px; height: 386px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/018.jpg" /> </a><br /></div><br />Copy the marked elements on a new layer: <strong>Edit > Copy</strong> and <strong>Edit>Paste</strong>.<br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/019.jpg" target="_blank"><img style="width: 450px; height: 421px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/019.jpg" /> </a><br /></div><br />Apply also for the new layer the next selection: <strong>Filter > Blur Radial</strong> with the same parameters we have used at the beginning.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/020.jpg" target="_blank"><img style="width: 450px; height: 471px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/020.jpg" /> </a><br /></div><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/021.jpg" target="_blank"><img style="width: 450px; height: 464px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/021.jpg" /> </a><br /></div><br />6. The final stage includes changing <strong>Opacity</strong> for layers with mask<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/022.jpg" target="_blank"><img style="width: 450px; height: 434px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/022.jpg" /> </a><br /></div><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/023.jpg" target="_blank"><img style="width: 450px; height: 418px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/023.jpg" /> </a><br /></div><br />Finally we’ll paste together all the picture’s layers in a single layer, choosing in the menu the next option: <strong>Layer > Flatten Image</strong>.<br /><br /><div style="text-align: center;"><a href="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/night_shooting.jpg" target="_blank"><img style="width: 450px; height: 671px;" alt="Create The Night Shooting in Photoshop CS3" src="http://www.newphotoguide.com/images/PhotographyClasses/TheNightShooting/night_shooting.jpg" /> </a><br /></div><br />Happy Night Shooting! :) <!-- This uses the GoogleAdsense468x60.html snippet -->Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com4tag:blogger.com,1999:blog-7821196693014908729.post-82750853896065285112009-05-30T09:28:00.003+08:002009-05-30T09:35:14.893+08:00Panographies: Panoramas on Steroids<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusByhyphenhyphenVMZ7_txBpphnidtmH-q6ZfmSCxwSloZXrnFdD0nr44TmwmWuTXlu2IL3o_Qm9DPsd_VTj4rgRaYmyh1ljRHANd-Ok5XGQ2K5orwDYRnEae_IVooORNV_C3gSCpaQcLLWedImO_l/s1600-h/123097045_be2fa07ce4_b.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 362px; height: 271px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusByhyphenhyphenVMZ7_txBpphnidtmH-q6ZfmSCxwSloZXrnFdD0nr44TmwmWuTXlu2IL3o_Qm9DPsd_VTj4rgRaYmyh1ljRHANd-Ok5XGQ2K5orwDYRnEae_IVooORNV_C3gSCpaQcLLWedImO_l/s320/123097045_be2fa07ce4_b.jpg" alt="" id="BLOGGER_PHOTO_ID_5341423881268243698" border="0" /></a><span align="left" class="body-text"><p>If you like Hockney, you’ll love this.</p> <p>Do you ever look up at the sky, a towering office building, or an expansive landscape and wish your photos could capture everything you can see with your eyes? We do.</p> <p>Our pal Mareen does this neat thing she calls panography. Taking dozens of photos of a scene, she assembles a patchwork of images that more accurately represents what your eyes see when you’re not looking through a viewfinder.</p> <p>Call it super wide-angle panorama or call it panography, we think it’s awesome.</p> <p>Read on to learn how you can make one yourself!</p><p><span style="font-family:verdana,helvetica,arial;font-size:85%;"><span align="left" class="body-text"><h4><span>Step 1: Setup</span></h4> <p>Go out into the world and find something interesting to shoot. Once you’ve found something, pick your point of view and make sure you can see everything you want to shoot without moving from your position.</p> <p>Manually set the white balance, focus, f-stop, and shutter speed on your camera. This ensures that it doesn’t light meter every shot and your photos aren’t all differently exposed. If you want your panography to consist of many individual photos, zoom in a bit. If it’s your first try, you may want to stay zoomed out so you’ll have fewer shots to assemble at the end. </p> <p>NOTE: The more photos you take, the more RAM your computer will need to make the panography. Also, some cameras don’t give you the option of manually setting the f-stop and shutter speed. Sometimes one of your preset modes (for example, landscape mode) will keep your settings relatively uniform. Give it a try… if all else fails, automatic mode still works, the effect is just a little different.</p> <h4><span>Step 2: Take your shots</span></h4> <p>Point and shoot. Don’t move from your position, but do move your lens in all directions. Try tilting your camera to different angles to soften the straight panorama look. And keep in mind that the more your shots overlap, the easier it’ll be to assemble your panography later.</p> <p>Make sure you cover every spot with at least one picture. We tend to only photograph the interesting spots, like lines and busy areas, and oftentimes forget to get the plain areas. Leave a shot out and you’ll be left with a hole in your final piece with no way to fill it!</p> <h4><span>Step 3: Prepare your files</span></h4> <p><a href="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-3b.jpg" rel="lightbox[screenshots]" title=""><img id="image162" src="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-3b-small.jpg" alt="Step-3b-small.jpg" align="right" hspace="5" /></a><a href="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-3a.jpg" rel="lightbox[screenshots]" title=""><img id="image161" src="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-3a-small.jpg" alt="Batch resize your images" align="right" hspace="5" /></a>Unload your camera and, using Photoshop, resize your photographs (try width or height of 800 pixels). It’s tedious to do this manually for each photo; so to expedite the process, record the resizing and saving of one photo as a new Photoshop Action. Then go to File > Automate > Batch to select the new action and apply it to your entire folder of panography photos. </p> <p>NOTE: If you want to save the originals, don’t forget to duplicate your folder before you resize.</p> <h4><span>Step 4: Prepare your Canvas</span></h4> <p><a href="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-4.jpg" rel="lightbox[screenshots]" title="Start with a large canvas. (You can always make it larger later, too.)"><img id="image163" src="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-4-small.jpg" alt="Make a large canvas" align="right" hspace="5" /></a>Create a fairly large new RGB canvas to work on. If it turns out the canvas is too small, you can always add some space later (Image > Canvas). Copy the new 800px versions of your images into your canvas–5 to 10 images at a time ought to be manageable.</p> <h4><span>Step 5: Assemble your Panography</span></h4> <p><a href="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-5.jpg" rel="lightbox[screenshots]" title="Assemble your images like a puzzle!"><img id="image164" src="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-5-small.jpg" alt="Assemble your images like a puzzle!" align="right" hspace="5" /></a>Set the opacity of each photo to about 50%. Using the Transform function (Ctrl/Apple+T), start rotating each photo to fit the ones next to it. Be careful to make sure you’re rotating (you should see a curved arrow tool when you’re near a corner) and not skewing the photographs. Now go photo by photo and assemble your panography like a puzzle. It will take a while to get it right, so be sure to save your work as you go along.</p> <h4><span>Step 6: Finalize your panography</span></h4> <p><a href="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-6a.jpg" rel="lightbox[screenshots]" title="Now that you're done assembling, flatten your image and make your final adjustments."><img id="image165" src="http://www.photojojo.com/content/wp-content/uploads/2006/07/Step-6a-small.jpg" alt="Make final adjustments to your flattened panography" align="right" hspace="5" /></a>When you’re finished assembling the photos together, make final color, contrast, and levels adjustments. Go to the layer palette and add a new adjustment layer of any kind by clicking the round black/white symbol.</p> <p>To share your panography or post it online, just combine all the layers (Shift+Ctrl/Apple+E), and resize your image. Be sure to save this file separately instead of overwriting the original, which you’ll want to keep in case you want to make changes later.</p> <p>Congratulations! You just made your very first panography!</p></span></span></p></span><br /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com0tag:blogger.com,1999:blog-7821196693014908729.post-36584408702252943852009-05-09T10:44:00.006+08:002009-05-09T10:50:50.898+08:00Photo Enhancement Tutorial - Photo Manipulation Tutorial<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFGmJL70essoj3ptIc8K1nUh7VeJSaqtdBog5uytfWytlp2JtTZB7ngavbeMNZTZuQAu-95qcgVEj16ipRp4ESaL7iVYKoq2r86gQkA7qj7wpcrQ6GvEzdHHvQ9QeAyTTr6P-PrJ7E-XN/s1600-h/step7.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 214px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFGmJL70essoj3ptIc8K1nUh7VeJSaqtdBog5uytfWytlp2JtTZB7ngavbeMNZTZuQAu-95qcgVEj16ipRp4ESaL7iVYKoq2r86gQkA7qj7wpcrQ6GvEzdHHvQ9QeAyTTr6P-PrJ7E-XN/s320/step7.jpg" alt="" id="BLOGGER_PHOTO_ID_5333649761713814898" border="0" /></a><span class="content">In this simple photoshop tutorial we will take an image of a woman and enhance photos with the use of simple photoshop tools such as the lasso, color correction, the color pallete and with the use of the air brush we will enhance the photograph using simple photo manipulation techniques. This photo enhancement tutorial will teach you how to beautify a womans face with makeup.</span><br /><span class="content"></span><br /><span class="content"></span></div><p style="text-align: justify;" class="content"><strong>Photo Enhancement / Photo Manipulation / Beautify Effect / Make up Art Tutorial </strong></p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">1. Open an image that you would like to 'picture enhance'. Make sure it is something very plain, perhaps a girl with no make up. That just makes the project all the more fun :)</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="content"><img src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step1.jpg" width="300" height="449" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">2. We will start by adding some saturation to this picture, as you can see it is really washed out and pale. Lets give the girl some color. Go to Images > Adjustments > Hue/Saturation.<br />I will be bumping up the saturation about 35%. See what looks good for your image.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="content"><img src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step2.jpg" width="300" height="449" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">3. Lets work on her lips, give her some color, to help highlight her beauty. Using the Pen tool trace around the shape of her lips. And then load the path as your selection.<br /><br /></p><div style="text-align: center;"><img style="width: 450px; height: 450px;" src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step3.jpg" /></div><p style="text-align: justify;" class="content"></p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">4. After you have loaded the path, and it is selected press "Command J" so it cuts your selection into a new layer. You can change the layername to lips.</p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">5. Now lets add some color. Adjust the hue/saturation for the lips layer, I will be using 30%. Basicly this is bumping up the natural color of her lips. </p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">6. While the lips layer is still selected, go to Images > Adjust > Color Balance. I will be using these values below. </p><div style="text-align: justify;"> </div><p style="text-align: center;" class="content"><img style="width: 450px; height: 471px;" src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step4.jpg" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">7. We are coming along now, lets add some depth to her eyes. Using the Lasso tool, go around her eyes, and again "command J" to a new layer and label it "Eyes"</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="content"><img src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step5.jpg" width="288" height="229" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">8. Using the burn tool with a small brush size of 10 and exposure of 40, highlight under and over the eyes to add definition. If you feel you might have made the eyes too dark, just drop the opacity of the "eyes" layer down. I dropped mine down to 30% </p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">9. Now lets add some rosie cheeks. Use the color picker, grab a tone from the lips and adjust it so its not too strong. I am using color #db6a6e. Select the brush tool and make sure you are using a large brush. Mine is set to 90 with 30% Opacity. Create a fresh new layer and highlight the cheek area with your brush. You won't need much. Since you are on a new layer, you can use the eraser tool to remove parts you do not like. After you are happy with your artwork, adjust brightness contrast to add depth. </p><div style="text-align: justify;"> </div><p style="text-align: justify;" class="content">You are done! </p><div style="text-align: justify;"> </div><p style="text-align: center;" class="content"><img src="http://www.photoshopcstutorial.com/tutorials/photoenhancement/images/step7.jpg" width="300" height="449" /></p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com8tag:blogger.com,1999:blog-7821196693014908729.post-41143943016651108342009-04-27T09:21:00.004+08:002009-04-27T11:36:55.156+08:00Turn A Photo Into A Collage Of Polaroids<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ddCPjU7C7RCXwPlI0j9R224G8BVaYOm1Xvbp_t3CbUiE8Zvakz_2OJys1Mk-fJnblhyphenhypheneuM0dBd7fSTogAxLicWY8FkLYgY6CzisH-kiUQARqdDipLuCbNYbhUVqJn-xjcuKexBalqS6b/s1600-h/final-result.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 355px; height: 237px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ddCPjU7C7RCXwPlI0j9R224G8BVaYOm1Xvbp_t3CbUiE8Zvakz_2OJys1Mk-fJnblhyphenhypheneuM0dBd7fSTogAxLicWY8FkLYgY6CzisH-kiUQARqdDipLuCbNYbhUVqJn-xjcuKexBalqS6b/s320/final-result.jpg" alt="" id="BLOGGER_PHOTO_ID_5329175985629165698" border="0" /></a><br /></div><h3 style="text-align: justify;"><span>Step 1:</span> Duplicate The Background Layer</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">The first thing we need to do for this effect is duplicate our Background layer. With our image open in Photoshop, we can see in the Layers palette that we currently have just one layer, the Background layer, which contains our original image: </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/photoshop-layers-palette.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: center; font-style: italic; color: rgb(51, 255, 255);" class="image-desc">The Layers palette in Photoshop showing the original Background layer. </div><div style="text-align: justify;"> </div><p style="text-align: justify;">To quickly duplicate the layer, use the keyboard shortcut <strong>Ctrl+J</strong> (Win) / <strong>Command+J</strong> (Mac). Photoshop creates a copy of the Background layer for us, names it "Layer 1", and places it above our Background layer in the Layers palette:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/background-copy-layer.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: center; font-style: italic; color: rgb(51, 255, 255);" class="image-desc">The Layers palette now showing the copy of our Background layer above the original. </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><span>Step 2:</span> Add A New Blank Layer Between The Two Layers</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Next, we need to add a new blank layer between our Background layer and the copy of it that we just created. Currently the copy is selected in the Layers palette (we can tell the layer is selected because it's highlighted in blue). Normally when we add a new layer, Photoshop places the new layer above the layer that's currently selected, but we want our new layer <em>below</em> "Layer 1", not above it. To tell Photoshop to place the new layer below "Layer 1", hold down your <strong>Ctrl</strong> (Win) / <strong>Command</strong> (Mac) key and then click on the <strong>New Layer</strong> icon at the bottom of the Layers palette:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/new-layer-icon.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: center; font-style: italic; color: rgb(51, 255, 255);" class="image-desc">Hold down "Alt" (Win) / "Option" (Mac) and click on the "New Layer" icon at the bottom of the Layers palette. </div><div style="text-align: justify;"> </div><p style="text-align: justify;"> Photoshop adds a new blank layer named "Layer 2" between "Layer 1" and the original Background layer:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/new-blank-layer.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: center; font-style: italic; color: rgb(51, 255, 255);" class="image-desc">Photoshop adds the new blank layer between the Background layer and "Layer 1". </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;"><span>Step 3:</span> Fill The New Layer With Black</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">We're going to use black as the background for our effect, so let's reset our Foreground and Background colors if needed by pressing <strong>D</strong> on your keyboard. This sets black as your Foreground color and white as your Background color, as we can see in the Foreground and Background color swatches near the bottom of the Tools palette:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/color-swatches.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: justify; color: rgb(51, 255, 255);" class="image-desc"><div style="text-align: center;"><span style="font-style: italic;">Press "D" to reset Photoshop's Foreground and Background colors to black and white if needed.</span></div> </div><div style="text-align: justify;"> </div><p style="text-align: justify;">Now with black as our Foreground color and the new blank layer selected in the Layers palette, let's fill the new layer with black using the keyboard shortcut <strong>Alt+Backspace</strong> (Win) / <strong>Option+Delete</strong> (Mac). Nothing will appear to have happened to the image itself, and that's because "Layer 1", which contains a copy of our original image, is blocking "Layer 2" from view. But if we look at Layer 2's thumbnail in the Layers palette, we can see that we've filled the layer with black:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/filled-with-black.gif" alt="Adobe Photoshop tutorial image" /></p><div style="text-align: justify;"> </div><div style="text-align: justify;" class="image-desc"><div style="text-align: center;"><span style="font-style: italic; color: rgb(51, 255, 255);">Layer 2's thumbnail in the Layers palette now shows that the layer is filled with black, even though we can't see it yet in the image itself.</span><br /></div><br /><h3><span>Step 4:</span> Add A New Blank Layer</h3> <p>With "Layer 2" (the layer we just filled with black) selected, click once again on the <strong>New Layer</strong> icon at the bottom of the Layers palette:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/new-layer-icon-2.gif" alt="Clicking on the New Layer icon once again." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">Add a new blank layer. </div> <p>Photoshop will add a new blank layer between the black-filled layer and the copy of the original image above it:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-3.gif" alt="Photoshop's Layers palette showing the new blank layer between Layer 1 and Layer 2." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">The new blank layer is added between "Layer 1" and "Layer 2". </div> <h3><span>Step 5:</span> Drag Out A Rectangular Selection As The Inside Of Your First Polaroid</h3> <p>Select the <strong>Rectangular Marquee Tool</strong> either from the Tools palette or by pressing <strong>M</strong> on your keyboard:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/rectangular-marquee-tool.gif" alt="Selecting the Rectangular Marquee Tool in Photoshop." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">Select the Rectangular Marquee Tool. </div> <p>Then, with the Rectangular Marquee Tool selected, drag out a selection inside your image which will become the inside of the first polaroid (the part which contains the photo). I'm going to drag my selection around the baby's face. It doesn't really matter where you make this selection since you'll be able to move it anywhere you like later:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/drag-selection.jpg" alt="Dragging out a selection with the Rectangular Marquee Tool." /></p> <div style="color: rgb(51, 255, 255);" class="image-desc"><div style="text-align: center;"><span style="font-style: italic;">Drag out a selection in the shape of the inside of a polaroid photo.</span></div> </div> <h3><span>Step 6:</span> Fill The Selection With Black</h3> <p>We need to fill the selection with black at this point. Technically, it doesn't matter which color we fill the selection with, but to keep things simple and since black is currently our Foreground color, let's use black. Make sure you have the new blank layer selected in the Layers palette, and then use the keyboard shortcut <strong>Alt+Backspace</strong> (Win) / <strong>Option+Delete</strong> (Mac) to fill the selection with the Foreground color, which is set to black. Again, nothing seems to have happened in the document, and that's because the image on "Layer 1" at the top is still blocking everything else from view, but if we look at the thumbnail for the blank layer in the Layers palette, we can see that the selected area has indeed been filled with black:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-3-thumbnail.gif" alt="The thumbnail for Layer 3 showing the selected area now filled with black." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">The new blank layer's thumbnail in the Layers palette now shows the selected area filled with black. </div> <h3><span>Step 7:</span> Create A Clipping Mask From The Filled Selection</h3> <p>We're going to use the selection we just filled with black to create what's called a <strong>clipping mask</strong> for the layer above it. What this means is that the layer above it, "Layer 1" which contains the copy of our image, is going to be "clipped" by our filled selection on the layer below it. In other words, the only part of the image on "Layer 1" that will remain visible is the part directly above the section filled with black. The rest of the image will become hidden from view. To create our clipping mask, click on "Layer 1" to select it in the Layers palette. Then go up to the <strong>Layer</strong> menu at the top of the screen and select <strong>Create Clipping Mask</strong>. You can also use the keyboard shortcut <strong>Alt+Ctrl+G</strong> (Win) / <strong>Option+Command+G</strong> (Mac). Either way, Photoshop "clips" the image on "Layer 1", keeping only the area above the black-filled shape below it visible and hiding the rest of the image, revealing our black background on "Layer 2" in its place:</p> <p style="text-align: center;"><img style="width: 449px; height: 300px;" src="http://www.photoshopessentials.com/images/photo-effects/polaroids/clipping-mask.jpg" alt="The image on Layer 1 is now clipped using the black-filled shape on the layer below it." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">The image on "Layer 1" is now clipped using the black-filled shape on the layer below it. </div> <p>If we look in the Layers palette now, we can see that "Layer 1" is indented to the right with a small arrow pointing downward on the left. This indicates that the layer is being clipped by the layer below it:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-1-clipped.gif" alt="The Layers palette showing Layer 1 being clipped by the layer below it." /></p> <div class="image-desc"><div style="text-align: center;"><span style="font-style: italic; color: rgb(51, 255, 255);">The Layers palette showing that Layer 1 is now being clipped by the layer below it.</span><br /></div><br /><h3><span>Step 8:</span> Add Another New Blank Layer Above "Layer 2"</h3> <p>We need to add another new layer, and we need it between the black-filled layer ("Layer 2") and the layer containing our filled selection ("Layer 3"). To do that, click on "Layer 2" to select it and then click once again on the <strong>New Layer</strong> icon at the bottom of the Layers palette:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/new-layer-2.gif" alt="Creating another new blank layer in Photoshop." /></p> <div style="color: rgb(51, 255, 255);" class="image-desc"><div style="text-align: center;"><span style="font-style: italic;">Add another new blank layer directly above the black-filled layer ("Layer 2").</span></div> </div> <p>Photoshop adds the new layer between "Layer 2" and "Layer 3" and names it, surprisingly enough, "Layer 4":</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-4.gif" alt="The new blank layer named 'Layer 4' in the Layers palette." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">The new blank layer, "Layer 4", is added between "Layer 2" and "Layer 3". </div> <h3><span>Step 9:</span> Drag Out Another Rectangular Selection As The Border Of The Polaroid</h3> <p>With your Rectangular Marquee Tool still selected, drag out another rectangular selection, this time around the outside of the original selection, which will become the white border of the polaroid. Keep in mind that polaroid photos have some extra space at the bottom of the border, so add some extra space at the bottom of your selection:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/drag-selection-2.jpg" alt="Drag a second selection around the outside of the original selection to create the border of the polaroid." /></p> <div style="color: rgb(51, 255, 255);" class="image-desc"><div style="text-align: center;"><span style="font-style: italic;">Drag a selection around the outside of the original selection to create the border of the polaroid.</span></div> </div> <h3><span>Step 10:</span> Fill The Selection With White</h3> <p>Since the border of a polaroid is usually white, let's fill our selection with white. Make sure that you have the new blank layer, "Layer 4", selected in the Layers palette. Then, since white is currently our Background color, let's use the keyboard shortcut <strong>Ctrl+Backspace</strong> (Win) / <strong>Command+Delete</strong> (Mac) to fill the selection with the Background color (white). Press <strong>Ctrl+D</strong> (Win) / <strong>Command+D</strong> (Mac) when you're done to deselect the selection. We now have our first polaroid in our image:</p> <p style="text-align: center;"><img style="width: 450px; height: 301px;" src="http://www.photoshopessentials.com/images/photo-effects/polaroids/first-polaroid.jpg" alt="The first polaroid in the image." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">Fill the selection with white to create the first polaroid. </div> <h3><span>Step 11:</span> Add A Drop Shadow Layer Style</h3> <p>We have our first polaroid, and we're going to use it to easily create as many polaroids as we want. But before we do anything else, let's add a slight drop shadow to it. We won't be able to see the drop shadow just yet, since we're using a black background, but we will see it once we start piling polaroids on top of each other. To add our drop shadow, with "Layer 4" selected, click on the <strong>Layer Styles</strong> icon at the bottom of the Layers palette:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-styles-icon.gif" alt="Clicking on the Layer Styles icon." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">Click on the "Layer Styles" icon at the bottom of the Layers palette. </div> <p>Select <strong>Drop Shadow</strong> from the list of layer styles:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/select-drop-shadow.gif" alt="Selecting 'Drop Shadow' from the layer styles list." /></p> <div style="text-align: center; font-style: italic; color: rgb(51, 255, 255);" class="image-desc">Select "Drop Shadow". </div> <p>This brings up Photoshop's "Layer Style" dialog box set to the Drop Shadow options in the middle column. I'm going to set my shadow <strong>Angle</strong> to about <strong>120°</strong> and then lower the <strong>Opacity</strong> value at the top all the way down to about <strong>30%</strong> so my shadow isn't too intense:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/drop-shadow-options.gif" alt="Changing the Drop Shadow options." /></p> <div style="color: rgb(51, 255, 255);" class="image-desc"><div style="text-align: center;"><span style="font-style: italic;">Lower the "Opacity" of the drop shadow to 30% and set the "Angle" to around 120°.</span></div> </div> <p>Click OK to exit out of the Layer Style dialog box. As I said, we won't be able to see the drop shadow just yet thanks to our black background, but don't worry. We'll see it soon enough.</p><h3><span>Step 12:</span> Rotate The Polaroid </h3> <p>I'm going to rotate my polaroid to add a bit more interest to it. In order to do that, I need to select both layers in my Layers palette which make up my polaroid. I already have "Layer 4" selected, which makes up the outside of it, but I also need "Layer 3" selected, which makes up the inside, so with "Layer 4" selected, I'm going to hold down my <strong>Shift</strong> key and click on "Layer 3", which will select both layers at once (they'll both appear highlighted in blue):</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/two-layers-selected.gif" alt="Selecting Layer 3 and Layer 4 in the Layers palette." /></p> <div style="text-align: center; font-style: italic;" class="image-desc"><span style="color: rgb(51, 255, 255);">Use the "Shift" key to select both "Layer 3" and "Layer 4" in the Layers palette.</span> </div> <p>Then with both layers selected, I'm going to bring up Photoshop's <strong>Free Transform</strong> handles around my polaroid using the keyboard shortcut <strong>Ctrl+T</strong> (Win) / <strong>Command+T</strong> (Mac). To rotate it, all I need to do is drag my mouse cursor anywhere outside of the Free Transform handles. The mouse cursor will change to a "rotate" cursor with curved arrows on either end of it. As I drag my mouse, the polaroid will rotate:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/rotate-polaroid.jpg" alt="Rotating the polaroid with the Free Transform command in Photoshop." /></p> <div style="font-style: italic; color: rgb(51, 255, 255); text-align: center;" class="image-desc">Click and drag anywhere outside of the Free Transform handles to rotate the polaroid. </div> <p>You can also move the polaroid to a new location if you wish by clicking inside of it and dragging it around the screen with your mouse. I'm going to leave mine where it is for now and simply rotate it. As you drag, you'll notice that the border of the polaroid moves and rotates but the image inside of it does not, and that's because we're not moving the actual image. It remains fixed in place. The only thing we're moving is the polaroid itself, and this is what's going to allow us to create our final effect, as we'll see.</p> <p>When you're happy with the location and angle of the polaroid , press <strong>Enter</strong> (Win) / <strong>Return</strong> (Mac) to apply the transformation.</p> <h3><span>Step 13:</span> Group All Three Layers Which Make Up The Polaroid</h3> <p>We have our first polaroid created and rotated into place. Now we're going to use it to create as many polaroids as we want. Before we can do that though, we need to <strong>group</strong> all three layers which make up the polaroid , which are the top three layers in the Layers palette. "Layer 1" contains the image itself, "Layer 3" contains the inside of the polaroid , and "Layer 4" contains the outside of it. In order to group them, we need them all selected. We already have "Layer 3" and "Layer 4" selected, so once again hold down your <strong>Shift</strong> key and click on "Layer 1" to add it, so all three layers are selected and highlighted in blue:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/select-three-layers.gif" alt="Selecting the three top layers in the Layers palette at once." /></p> <div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;" class="image-desc">Select the three top layers in the Layers palette at once. </div> <p>Then, with all three layer selected, use the keyboard shortcut <strong>Ctrl+G</strong> (Win) / <strong>Command+G</strong> (Mac) to group them. You'll see all three layers disappear from the Layers palette and be replaced by a layer named "Group 1", which contains a folder icon to indicate that it's a <strong>Layer Group</strong>. If you click on the right-pointing triangle to the left of the folder icon, the group will open and you'll see your three layers inside of it:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/layer-group.gif" alt="The three layers are now inside a Layer Group." /></p> <div style="text-align: center; font-style: italic;" class="image-desc">The three layers which make up the polaroid are now inside a Layer Group. </div> <h3><span>Step 14:</span> Duplicate The Layer Group</h3> <p>We're going to use this Layer Group to create our second polaroid , and we're going to do that by duplicating the group. First, click once again on the triangle to the left of the folder in the Layers palette to close the group so your Layers palette doesn't get too cluttered. Then simply click on the group and drag it down onto the <strong>New Layer</strong> icon at the bottom of the Layers palette:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/drag-group.gif" alt="Duplicating the Layer Group by dragging it down onto the New Layer icon." /></p> <div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;" class="image-desc">Duplicate the Layer Group by dragging it down onto the "New Layer" icon. </div> <p>When you release your mouse button, you'll see the copy of the Layer Group appear above the original:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/group-1-copy.gif" alt="The Layers palette in Photoshop showing the copy of the Layer Group at the top." /></p> <div class="image-desc"><div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;">Photoshop Tutorials: The copy of the Layer Group appears above the original.<br /><br /></div>We now have our second polaroid.<br /><h3><span>Step 15:</span> Move And Rotate The Second Polaroid With The Free Transform Command</h3> <p>Just as we did with the original, we're going to move and rotate this second polaroid using Free Transform (I didn't actually move my first one, but you may have, so let's pretend I did as well). First, twirl open the newly created copy of our Layer Group by clicking on the triangle to the left of its folder icon. Just as before, you'll see all three layers inside of it which make up the polaroid . We need to select the bottom two layers which make up the inside and outside of it, so click on one, then hold down <strong>Shift</strong> and click on the other to select them both:</p> <p style="text-align: center;"><img src="http://www.photoshopessentials.com/images/photo-effects/polaroids/group-1-2-layers.gif" alt="Selecting the bottom two layers inside the Layer Group copy." /></p> <div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;" class="image-desc">Select the bottom two layers inside the copy of the Layer Group.</div> <p>Then with both layers selected, press <strong>Ctrl+T</strong> (Win) / <strong>Command+T</strong> (Mac) to bring up the Free Transform handles around the polaroid . At the moment, it looks like there's only the one polaroid in the image, and that's because both of them are directly on top of each other. Click inside the polaroid and drag it to move it to a new location, and you'll see that you do in fact have two. Drag this second one to wherever you like in your document, and then rotate it just as before, by moving your mouse anywhere outside of the Free Transform handles and dragging your mouse to rotate it left or right. You'll see that once again, we're only moving the polaroid itself. The image inside of it remains fixed in place, and now that we've added a second polaroid , we're displaying more of the full size image:</p> <p style="text-align: center;"><img style="width: 449px; height: 346px;" src="http://www.photoshopessentials.com/images/photo-effects/polaroids/drag-second-polaroid.jpg" alt="Moving and rotating the second polaroid." /></p> <div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;" class="image-desc">Use Free Transform to move and rotate the second polaroid .</div> <p>You'll also notice that with the second polaroid overlapping the original, we can now see the drop shadow, which gives the image a bit of depth. When you're happy with the location and angle of your second polaroid , press <strong>Enter</strong> (Win) / <strong>Return</strong> (Mac) to apply the transformation. We now have two polaroids completed:</p> <p style="text-align: center;"><img style="width: 450px; height: 301px;" src="http://www.photoshopessentials.com/images/photo-effects/polaroids/two-polaroids-added.jpg" alt="Two polaroids have now been added to the image." /></p> <div style="text-align: center; color: rgb(51, 255, 255); font-style: italic;" class="image-desc">Two polaroids have now been added to the image.</div> <h3><span>Step 16:</span> Add, Move And Rotate More Polaroids As Needed</h3> <p>At this point, we just repeat the exact same process over and over until we've added enough polaroids to reveal enough of the original image. First, drag the top-most Layer Group down onto the <strong>New Layer</strong> icon at the bottom of the Layers palette. This will create a copy of the last polaroid you made. Then twirl the new Layer Group open by clicking on the arrow to the left of its folder icon and select the two bottom layers which make up the inside and outside of the polaroid. Press <strong>Ctrl+T</strong> (Win) / <strong>Command+T</strong> (Mac) to bring up the Free Transform handles, click inside them and drag the image into a new location to reveal more of the overall image, then move your mouse outside of the handles and drag to rotate the new polaroid. Press <strong>Enter</strong> (Win) / <strong>Return</strong> (Mac) to accept the transformation, then repeat the process again until you've added enough polaroids that you're happy with the results. There's no "right or wrong" placement of the polaroids , so don't be afraid to play around with it, and you can always go back and move or rotate any of the polaroids at any time by selecting its Layer Group, twirling it open, selecting the two bottom layers, then using Free Transform to move and/or rotate it again.</p> <p>I'm going to add, move and rotate more polaroids here with my image, and after creating about 16 polaroids, moving and rotating each with the Free Transform command, here is my final result:</p> <p style="text-align: center;"><img style="width: 450px; height: 301px;" src="http://www.photoshopessentials.com/images/photo-effects/polaroids/final-result.jpg" alt="The final result." /></p> <p style="text-align: center;">And there we have it!</p></div> </div></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com9tag:blogger.com,1999:blog-7821196693014908729.post-91545766706880355192009-04-23T13:29:00.003+08:002009-04-23T13:40:57.866+08:00Selective Sepia<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LM1eDLmJ2fdbOkJqRRzdXnnf4alCNx7m6UX7ij-JdahIWx338J0UdK97560VnPkriyQMbMknUqONEtfPu1s5K-rPkv6sGJqWSR3dpXgPuCzACIBEi0xrALEaA70grfSXxMhatyCA0Ypc/s1600-h/sepia.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 214px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LM1eDLmJ2fdbOkJqRRzdXnnf4alCNx7m6UX7ij-JdahIWx338J0UdK97560VnPkriyQMbMknUqONEtfPu1s5K-rPkv6sGJqWSR3dpXgPuCzACIBEi0xrALEaA70grfSXxMhatyCA0Ypc/s320/sepia.jpg" alt="" id="BLOGGER_PHOTO_ID_5327756149162218210" border="0" /></a><br /><h2 style="text-align: justify;">Selective Sepia Photoshop Tutorial </h2><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 1: Open an image into Photoshop</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Open the File menu and select Open. Browse for the photo you would like to add a selective sepia effect to and click OK. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 319px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/1-open.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2: Create a Hue/Saturation adjustment layer </h3><div style="text-align: justify;"> </div><p style="text-align: justify;">In the Layers pallet, click on the <em>New Adjustment Layer</em> icon and select <em>Hue/Saturation</em>.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 250px; height: 220px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/2-adjustment-layer-button.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 200px; height: 260px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/3-hue-saturation-menu.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">A <em>Hue/Saturation</em> window should appear. With this tool, we'll specify where the sepia effect will appear. Decide if you want to select the sepia toned areas according to the color of the image or by manually painting the areas where you would like the sepia tone. </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Choose <strong>one</strong> of the following: </p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">A) Select by color</h4><div style="text-align: justify;"> </div><p style="text-align: justify;">Selecting the sepia areas based on color will give the most natural effect. </p><div style="text-align: justify;"> </div><p style="text-align: justify;">First, decide which color in the photo that you want to keep. Then, select from the edit drop down menu the each color in the list except for the colors you want to keep and reduce the saturation to -100. For example, to keep the reds in the photo use the following settings:</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Reds: 0 Saturation <br />Yellows: -100 Saturation <br />Greens: -100 Saturation <br />Cyans: -100 Saturation <br />Blues: -100 Saturation <br />Magenta : -100 Saturation</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 300px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/4-hue-sat-adjsut.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/5-done.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">B) Select manually</h4><div style="text-align: justify;"> </div><p style="text-align: justify;">Manually selecting the sepia toned areas will let you specify precisely the area that you would like toned. </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Set the master saturation to -100 and click OK. Your image should now appear grayscale.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/5-zmaster.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Activate the layer mask by clicking on the layer mask thumbnail in the <em>Layers</em> pallet. Select the Eraser tool and erase the areas where you don't want the sepia tone to be applied to.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/5-zpaint.jpg" border="0" height="300" hspace="6" width="450" /></p><h3 style="text-align: justify;">Step 3: Add a Black & White adjustment layer </h3><div style="text-align: justify;"> </div><p style="text-align: justify;">In the Layers pallet, click on the <em>New Adjustment Layer</em> icon and select <em>Black & White</em>. If you are using Photoshop CS2 or older, select <em>Hue/Saturation</em> instead. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 250px; height: 257px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/6-black-and-white.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">A Black & White (or Hue/Saturation if you're using Photoshop CS2 or older) adjustment layer should appear. Simply click OK without editing the settings. Then, change the blend mode of the top adjustment layer to Overlay. Double click back on the icon of the layer to bring back the tool. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 250px; height: 116px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/7-overlay.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>Photoshop CS2 or older:</strong></p><div style="text-align: justify;"> </div><p style="text-align: justify;">You will be using the Hue/Saturation tool to add a sepia tone. Checkmark "Colorize" and apply the settings below:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/10-hue-sat-cs2.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>Photoshop CS3:</strong></p><div style="text-align: justify;"> </div><p style="text-align: justify;">If you're using Photoshop CS3, you can use the Black and White adjustment to add a sepia tone. This will give you more adjustable settings compared to using the Hue/Saturation adjustment.</p><div style="text-align: justify;"> </div><p style="text-align: justify;">First, adjust the settings to get the black and white look that you like. Or, you can scroll through the presets menu to select one of your own. I chose the Red Filter preset to bring up the reds and darken the sky. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 300px;" title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/8-red.jpg" border="0" hspace="6" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Checkmark the Tint and adjust the tone to create a sepia effect. Click OK when done. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Image" alt="Image" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/9-sepia.jpg" border="0" height="228" hspace="6" width="450" /></p><h2 style="text-align: justify;">Final Results</h2><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Red" alt="Red" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/Copy%20of%20final.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: center;">Red</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Blue and Cyan" alt="Blue and Cyan" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/Copy%20of%20final-2.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: center;">Blue and Cyan</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Yellow and Green" alt="Yellow and Green" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/Copy%20of%20final-3.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: center;">Yellow and Green</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="Selective Sepia Photoshop Tutorial" alt="Selective Sepia Photoshop Tutorial" src="http://photoshoptutorials.ws/images/stories/Photoshop%20Tutorials/Photo%20Effects/Selective%20Sepia/Copy%20of%20final-4.jpg" border="0" height="300" hspace="6" width="450" /></p><div style="text-align: justify;"> </div><p style="text-align: center;">Red, Yellow, and Green</p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com4tag:blogger.com,1999:blog-7821196693014908729.post-55286391005100542782009-04-21T18:56:00.004+08:002009-04-21T19:15:03.271+08:00Retouching a Studio Portrait<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsdncrEWVCh7AjUUy4a6pyC61hLkW9xwIiYbJX5VLbQXtMReHL_Ptxg6avLH9h3SUpCvLrjlwK9HbVlJu3WRqr8iTqwMdtNAqODfjTtyV4BTt-FCbHtjLhONNDGOW8rdT5SeH89lhrb7m/s1600-h/b&a.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 350px; height: 262px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsdncrEWVCh7AjUUy4a6pyC61hLkW9xwIiYbJX5VLbQXtMReHL_Ptxg6avLH9h3SUpCvLrjlwK9HbVlJu3WRqr8iTqwMdtNAqODfjTtyV4BTt-FCbHtjLhONNDGOW8rdT5SeH89lhrb7m/s320/b&a.png" alt="" id="BLOGGER_PHOTO_ID_5327097188320609570" border="0" /></a><h2 style="text-align: center;">Before and After</h2><br />This Photoshop tutorial is written for experienced Photoshop users and will show you unique techniques for retouching photos. You’ll learn how to enhance backgrounds, dodge and burn, brighten eyes, and add hair shine while keeping a low count of layers. The techniques you learn from this tutorial can be used for other portrait photos. </div><div style="text-align: justify;"> </div><div style="text-align: justify;"> </div><h2 style="text-align: justify;">Retouching a Studio Portrait Photoshop Tutorial</h2><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Retouching the background</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is the original image. As a photo it looks fine but it looks flat and boring. This Photoshop tutorial will show you techniques used to make the photo have a stronger impact. You can follow this tutorial with one of your own image or you can use the image below:</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 601px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_1c410e39-cb30-471c-9789-69a692f94d91.png" border="0" /> </p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Creating the mask</h4><div style="text-align: justify;"> </div><p style="text-align: justify;">The first step is to isolate the model from the background. I used the extract and color range tool to create this. First I used the extract tool (Filter > Extract) but it didn’t work very well for the hair. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 600px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_8c5ceb0a-673f-45bc-83d1-d547183d6bda.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">I then use the color range tool (Select > Color Range) to select the areas that were hard to extract using the extract tool. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 207px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_b71845bd-06ba-4f99-8529-c34029a93254.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Now we have a mask in it’s own layer.</p><div style="text-align: justify;"><div style="text-align: center;"> <img title="image" style="margin: 0px; display: inline; width: 400px; height: 93px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_061d8ef1-9c0c-4fe8-ab8d-51719ffdd4d5.png" border="0" /><br /></div><br /></div><h4 style="text-align: justify;">Adding a gradient to the background</h4><div style="text-align: justify;"> </div><p style="text-align: justify;">With the mask created, I can add a gradient to the background. Adding a gradient to the background is a simple and effective way to enhance a boring background. Here is a preview of what the layers will look like in the end.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 286px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_5fdf5bb3-a81c-4228-97c3-d34d84ab0ec8.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">To create a gradient background, we’ll be adding a gradient fill layer using the mask that we just created. To do that, hold down the Ctrl key and click on the layer thumbnail of the layer “Mask”. It will load the selection of the layer. Choose Select > Inverse to inverse the selection. Then, choose Layer > New Fill Layer > Gradient.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 330px; height: 496px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_1d4d74f3-baa0-4365-80ae-8ffaaf25de1f.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">In the Gradient Fill tool, move the center of the gradient behind the head. You can do this by clicking and dragging on the document window.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 409px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_dd41e44b-afbb-4f29-bcc3-26b3bee2af51.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">To increase contrast, you can change the gradient so that it is like the image below.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 273px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_a24d4b52-143d-4c45-93df-30c6415e42ba.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Finally, adjust the opacity of the Gradient Fill layer. I set mine to 50% opacity.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 321px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_292637a3-1d3c-45cd-a877-1fbd01fd92f9.png" border="0" /> </p><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Tone </h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Begin by creating a new layer for dodging and burning. Position the layer above the gradient fill adjustment layer. Then, change the blending mode to <em>soft light</em>.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 263px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_2c58ab1e-f16d-4052-90f6-a317a879fb81.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Choose Edit > Fill and use the settings below.</p><p style="text-align: center;"> <img title="image" style="margin: 0px; display: inline; width: 334px; height: 244px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_5c762dd5-fde5-4f89-bb4b-25eb5498abcb.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">The layer should now be filled with a 50% gray. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 397px; height: 262px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_241b5ab1-c480-4e0c-92e7-e98f096647a5.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Add a layer mask using the shape from the <em>Mask</em> layer. Hold down the Ctrl key and click on the layer thumbnail of the <em>Mask</em> layer . Then, click on the <img title="image" style="margin: 0px; display: inline;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_8d3b1b34-1550-4d3e-804e-33efc9fdba74.png" border="0" width="14" height="12" /> in the layers palette to add a layer mask. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_510556d9-ff23-49b1-92a5-5e610ea0b303.png" border="0" width="397" height="86" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Click back on the 50% gray layer thumbnail and use the dodge and burn tools. For the image below, I used the burn tool to darken the models right side of the face, hair, top, and her arms. Then, I use the dodge tool to brighten the other side of the models face.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 440px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_d005282c-3f37-4af5-be88-f996d8dcb48f.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is a before and after effect of the dodging and burning.</p><div style="text-align: justify;"><div style="text-align: center;"> <img title="image" style="margin: 0px; display: inline; width: 400px; height: 300px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_818bff65-c87c-4dcb-91bc-9fc4127da319.png" border="0" /><br /></div><br /></div><h3 style="text-align: justify;">Eye Brightening</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Brightening the eyes will have a dramatic effect. It can be easily done by using a Brightness/Contrast adjustment layer. Choose Layer > New Adjustment Layer > Brightness/Contrast to add a new Brightness/Contrast adjustment layer. Rename this layer to <em>Brighten Eyes</em>.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 382px; height: 142px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_db7a1f45-ef7f-4f1e-9dcd-2bcb962cb4ca.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">For now, set the brightness to 50 and contrast to 33.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_670b83f8-38e6-4230-aa15-5994ccb54756.png" border="0" width="216" height="373" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the layer mask and choose Image > Adjustments > Invert. This will invert the layer mask from white to black.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_8aa7df66-dff3-41ba-8a1e-b9770d192ed5.png" border="0" width="382" height="142" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Using the brush tool, paint the layer mask where the eyes are. You should see the eyes brighten as you paint. Then, go back into the Brightness/Contrast settings and readjust the settings. </p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 305px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_589da34e-8c2e-4a0e-bcb1-faf7e5285510.png" border="0" /></p><h3 style="text-align: justify;">Hair Shine</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Finally, we’ll add a shine to the hair. Start by using the quick selection or magic wand tool to create a selection of the hair around the area where you want the shine to appear.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 401px; height: 325px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_b9577d6a-1354-4126-8a33-4719148d56ba.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">With the selection, choose Layer > New Fill Layer > Gradient. Position the layer above the <em>Brighten</em> <em>Eye</em> layer. Change the blending mode of the <em>Hair Shine</em> layer to overlay. You should have a layer like the image below.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_598a8d17-e875-48d4-9b4d-18a30e91a576.png" border="0" width="402" height="202" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Go back into the Gradient Fill settings. Set the gradient to white to black and style to reflected. Checkmark the reverse option then click and drag on the document window and position the gradient where you want the hair shine to appear. Adjust the scale.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 320px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_916d62ec-0a87-4e05-8fd8-f5c0da2280de.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">In the Gradient Fill window, click on the gradient to edit it. You should have a window like the image below. Create a gradient like the image below. To do this, click and drag the top left input slider to the middle of the gradient bar. Do the same with the bottom left input slider. Then, click on the individual input sliders and adjust the settings as shown in the image below.</p><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 454px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_6abb3cf3-0712-4384-aa39-610950e77bf9.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">We now have a hair shine but it does not match the color of the hair. We’ll add back a little of the hair color to the shine. </p><div style="text-align: justify;"> </div><ol style="text-align: justify;"><li>Click on the bottom left input slider. </li><li>Click on the color setting and a color picker window will appear. </li><li>Click on the hair to capture the color of the hair. </li><li>Move the color picker towards the top left until the hair color looks natural. </li><li>Click OK three times to exit out of the gradient settings. </li></ol><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 255px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_59bafbcd-6eaa-4f53-8ea9-68011fa280d8.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">We have added the hair shine but if you look closely, you can see some artifacts.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 401px; height: 272px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_f46dd27b-c70e-4b56-a03c-463fb72102a4.png" border="0" /> </p><div style="text-align: justify;"> </div><p style="text-align: justify;">We can easily fix this by blurring the layer mask. Select the <em>Hair Shine</em> layer mask then choose Filter > Blur > Gaussian Blur. Adjust the settings until the unclean edge fades.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 284px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_a4a6c5ed-1b9c-472a-9dd4-11da4aed7ebd.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">If the hair shine is overlapping the skin, use the Minimum filter to hide it. Choose Filter > Other > Minimum and adjust the slider.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 281px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_946a2ca3-cece-4c70-8a88-e259fde58bc6.png" border="0" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is the before and after effect of adding hair shine. You can add emphasis to the eyes by aligning the hair shine with the eyes.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img title="image" style="margin: 0px; display: inline; width: 400px; height: 257px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_0f131968-ea11-4d7d-ac4a-f4b4e706f69f.png" border="0" /> </p><div style="text-align: justify;"><br /></div><h2 style="text-align: justify;">Final Results</h2><div style="text-align: center;"> <img title="image" style="margin: 0px; display: inline; width: 450px; height: 675px;" alt="image" src="http://photoshoptutorials.ws/images/stories/image_5f2346ea-92c4-4631-a019-08959f4be759.png" border="0" /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com10tag:blogger.com,1999:blog-7821196693014908729.post-22604200422786766662009-04-20T13:52:00.003+08:002009-04-20T14:06:17.720+08:00Create A Wood Grain Texture<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bNpbuhYktSslOMV2OBJsF7SspEHMxAThZ0WYTklx_krnQLDCOFOGVod6vVNWfqLDtX50O-xhTjrXooj1LSJWtzsZeh6sHsAhSP4zhHFmIH3MdAgkxFoKtXVahJk_NwgaW7-GWim5O241/s1600-h/wood_th.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 150px; height: 144px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bNpbuhYktSslOMV2OBJsF7SspEHMxAThZ0WYTklx_krnQLDCOFOGVod6vVNWfqLDtX50O-xhTjrXooj1LSJWtzsZeh6sHsAhSP4zhHFmIH3MdAgkxFoKtXVahJk_NwgaW7-GWim5O241/s320/wood_th.jpg" alt="" id="BLOGGER_PHOTO_ID_5326647941849602402" border="0" /></a>I declare this week <strong>Texture Week</strong> on Vectortuts. Also like the other texture tutorials, this technique is easy and applicable in logos, icons, interfaces or pretty much anything. </div><p style="text-align: justify;"><span id="more-171"></span></p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Notes</h4><div style="text-align: justify;"> </div><p style="text-align: justify;"><small class="note">This tutorial was created with Illustrator CS3. </small></p><div style="text-align: justify;"> </div><p style="text-align: justify;"><small class="note">Keyboard shortcuts are displayed in orange. ⌘ is displayed for the Command key (mac), with the Ctrl key being the Windows equivalent (not displayed).</small></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Rectangles</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a 5 inch by 5 inch rectangle with the <strong>Rectangle Tool <span class="orange">(m)</span></strong>. An easy way to draw an exact rectangle is to click on the artboard with the <strong>Rectangle Tool <span class="orange">(m)</span></strong> to bring up the <strong>Rectangle</strong> dialog to enter dimensions. Fill the rectangle with a light brown and take off the stroke.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 432px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_01.jpg" alt="Rectangle" class="centered" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Next <strong>Copy <span class="orange">(⌘c)</span></strong> the rectangle and <strong>Paste In Front <span class="orange">(⌘f)</span></strong>. With the copied rectangle selected, change the dimensions for the width to 2.5 inches and the height to .25 inches in the <strong>Transform Panel</strong> and fill the rectangle with a 40% black.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 451px; height: 211px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_02.jpg" alt="Copy, Paste, and Transform" class="centered" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Texture</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the smaller rectangle and go <strong>Effect > Sketch > Graphic Pen</strong>. When the <strong>Graphic Pen Effect</strong> dialog comes up, change the following settings.</p><div style="text-align: justify;"> </div><ul style="text-align: justify;" class="tut_list"><li class="item"><strong>Stroke Length</strong> = 15</li><li class="item"><strong>Light/Dark Balance</strong> = 2</li><li class="item"><strong>Stroke Direction</strong> = Vertical</li></ul><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 600px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_03.jpg" alt="Texture" class="centered" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Trace and Expand</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">With the texture selected go <strong>Object > Expand Appearance.</strong> With the texture still selected, the <strong>Control Panel</strong> defaults to the <strong>Live Trace </strong>options. Click the arrow beside the <strong>Live Trace Button</strong> and select <strong>Tracing Options</strong>. Or you can go <strong>Object > Live Trace > Tracing Options</strong>. You don’t have to change all the options, just the ones below.</p><div style="text-align: justify;"> </div><ul style="text-align: justify;" class="tut_list"><li class="item"><strong>Mode:</strong> Black and White</li><li class="item"><strong>Path Fitting: </strong>1px</li><li class="item"><strong>Minimum Area: </strong>1px</li><li class="item"><strong>Corner Angle: </strong>1</li><li class="item"><strong>Ignore White: </strong>Check this box</li></ul><div style="text-align: justify;"> </div><p style="text-align: justify;">I like to save a preset in the <strong>Tracing Options</strong>. It makes it easy to recall these setting. If you have read previous tutorials, you will see I use these setting all the time for tracing. Next, press the <strong>Expand</strong> button on your tool bar.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 554px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_04.jpg" alt="Trace" class="centered" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Transform and Color</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">With the texture selected, change the width to 5 inches and the height to 5 inches from the <strong>Transform Panel</strong>. Next, change the color of the texture to a darker brown than the first rectangle.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 471px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_05.jpg" alt="Transform and Color" class="centered" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Warp Tool</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Double click on the <strong>Warp Tool <span class="orange">(shift r)</span></strong><strong> </strong>in the <strong>Tools Panel</strong> to bring up the <strong>Warp Tools Options</strong> dialog. They are probably on the default settings, but if they are not, press the reset button on the right of the dialog. Once the settings are back to default, change the <strong>Intensity</strong> to 10% and click OK.</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select just the texture and click and drag with the <strong>Warp Tool <span class="orange">(shift r)</span></strong>. I like to go up and down and slightly back and forth. You can do as much or as little as you want.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 512px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_06.jpg" alt="Warp" class="centered" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;" class="step">Twirl Tool</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Click and hold down on the <strong>Warp Tool <span class="orange">(shift r)</span></strong> in the <strong>Tools Panel</strong> to bring up the other transform tools. Pick the second tool in the list called the <strong>Twirl Tool</strong>. With this tool you can add some knots to your wood texture if you want. Double click on the <strong>Twirl Tool</strong> in the <strong>Tools Panel</strong> to bring up the <strong>Twirl Tool Options</strong> dialog. Below are the settings I change.</p><div style="text-align: justify;"> </div><ul style="text-align: justify;" class="tut_list"><li class="item"><strong>Width</strong> =.69 (50pts)</li><li class="item"><strong>Height</strong> =.97 (70pts)</li><li class="item"><strong>Twirl Rate</strong> =10°</li><li class="item"><strong>Simplify</strong> = 20</li></ul><div style="text-align: justify;"> </div><p style="text-align: justify;">With the texture selected, click and hold on the texture until you are happy with the knot. The <strong>Twirl Rate</strong> is slow so it is easy to see when you need to let go.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 493px;" src="http://vectips.com/wp-content/uploads/2008/05/wood_07.jpg" alt="Twirl" class="centered" /></p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com0tag:blogger.com,1999:blog-7821196693014908729.post-73268327281805215422009-04-04T15:10:00.021+08:002009-04-04T16:58:07.238+08:00Creating Fire Text Effects<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmEjQbDeJciTjN1HmrYzfnk6MY8WWa9Sr7UYGPZ3jvLwRbBVbEINEjTUOuzFwUmyNEUXbXHQKn0vgaSxYk4LHbmxSaD_WzX4axQbR7_Wxk401NAXjtXQD8B2Wa2HFSVwBBy3hfMgc77yb/s1600-h/img11.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmEjQbDeJciTjN1HmrYzfnk6MY8WWa9Sr7UYGPZ3jvLwRbBVbEINEjTUOuzFwUmyNEUXbXHQKn0vgaSxYk4LHbmxSaD_WzX4axQbR7_Wxk401NAXjtXQD8B2Wa2HFSVwBBy3hfMgc77yb/s320/img11.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753659200940498" border="0" /></a><br />The first thing to do is to create a new document in PhotoShop. For this example, we create a 400x300 black canvas. then We add our text to the canvas, in White:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_9IM94D6GAQ0PLYbXTIrZnJfjM3r4MIv5b30k4XyKbvs5VKwBl3zx-eakyyhbmZ-F0lkwpe9lgiov0poNRNwMAJsYPin07ftGmEBpcm-fx9vpD5qFjv4yopjXe8JQl4atHp5PxQ6Wne5c/s1600-h/img01.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 259px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_9IM94D6GAQ0PLYbXTIrZnJfjM3r4MIv5b30k4XyKbvs5VKwBl3zx-eakyyhbmZ-F0lkwpe9lgiov0poNRNwMAJsYPin07ftGmEBpcm-fx9vpD5qFjv4yopjXe8JQl4atHp5PxQ6Wne5c/s320/img01.gif" alt="" id="BLOGGER_PHOTO_ID_5320753593116201010" border="0" /></a><br />Now, goto Image > Rotate Image Rotation > 90° CW.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYmRZCpMtKio1hFGS_IXobLNS_NIOycnXVZq60f6b2YUGNUHnWM5-JXS6br69Rxo-rDzDoNGbgLlPqYqS5zYVQxHipctSmuHh1HrCKBPV4Nddwu3UKxSDlltHQEzffsqKRReCZq_WhOcke/s1600-h/img02.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 235px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYmRZCpMtKio1hFGS_IXobLNS_NIOycnXVZq60f6b2YUGNUHnWM5-JXS6br69Rxo-rDzDoNGbgLlPqYqS5zYVQxHipctSmuHh1HrCKBPV4Nddwu3UKxSDlltHQEzffsqKRReCZq_WhOcke/s320/img02.gif" alt="" id="BLOGGER_PHOTO_ID_5320753528560810434" border="0" /></a><br />Next, we need to Rasterize the text. But first, right-click the text layer and choose Duplicate Layer. Then hide that copied layer by clicking on the eye next to it:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqUiYnCa0BRs9Hu4-sXKPImq6SL4cDNFQWzP_LxiSJ3149z8FChEe-a2hc_M4IjRqQG4fPqFYcSqWqNS6Xe6hqUmlapX0ugFrON1Tw31fUjOPfeb-kLH4ojByS41q_vdYR4pYcy9zKx5_/s1600-h/img03.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 188px; height: 57px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqUiYnCa0BRs9Hu4-sXKPImq6SL4cDNFQWzP_LxiSJ3149z8FChEe-a2hc_M4IjRqQG4fPqFYcSqWqNS6Xe6hqUmlapX0ugFrON1Tw31fUjOPfeb-kLH4ojByS41q_vdYR4pYcy9zKx5_/s320/img03.gif" alt="" id="BLOGGER_PHOTO_ID_5320753451086394450" border="0" /></a><br />Now we can right-click the original text layer and choose Rasterize Type, and with this layer selected, goto Filter > Stylize > Wind. We want to use the Method Wind, and Direction From the Left:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGgoLBeweIXpyYx0kY45zzVRK3Tdrp6dYDFuNYCyvu1SaeyUn2_CHZUllFWMkWDRRsL1aHpUGhf6PXomNt_LauF5mVn-VmKbPKK3sY4tQg3izq41usQ1NhMB93kU3G-CJSTFU_jdjN46Vm/s1600-h/img04.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 234px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGgoLBeweIXpyYx0kY45zzVRK3Tdrp6dYDFuNYCyvu1SaeyUn2_CHZUllFWMkWDRRsL1aHpUGhf6PXomNt_LauF5mVn-VmKbPKK3sY4tQg3izq41usQ1NhMB93kU3G-CJSTFU_jdjN46Vm/s320/img04.gif" alt="" id="BLOGGER_PHOTO_ID_5320753371914597970" border="0" /></a><br />You may find that this is not enough for the amount of fire you're wanting to add, so press Ctrl+F to repeat the filter until you get the desired amount. Then when you're done, do Image > Image Rotation > 90° CCW.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LxfmiMX6zA4Qo7OIYZpCAc4La_EUAKxuA6mpdw6Ggeh8BoOsBpRh13cecKBjh_WEr-MlkVz3X0-b3rpUpZRsPPjNYC25DSp3QuDA7HTc5gK8MhZ9WK00fuNWKB3wobaFmGkE226rJdwR/s1600-h/img05.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 257px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0LxfmiMX6zA4Qo7OIYZpCAc4La_EUAKxuA6mpdw6Ggeh8BoOsBpRh13cecKBjh_WEr-MlkVz3X0-b3rpUpZRsPPjNYC25DSp3QuDA7HTc5gK8MhZ9WK00fuNWKB3wobaFmGkE226rJdwR/s320/img05.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753311438091138" border="0" /></a><br />The next thing we want to do is create some distortion to the Wind effect, so it doesn't look so perfect - fire is not burn perfectly straight up. First add a new layer to below your Wind layer, fill it with black and then select the Wind layer again. Now press Ctrl+E to Merge Down, so that the Windo is merged with the black background. Goto Filter > Liquify. here you can change your brush size at the top right, and zoom in and out with Ctrl+ and Ctrl- (hold spacebar to click and drag around a zoomed in image). Click and drag a few pixels to distort the waves, like so:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEKtO-EmtDRUPaheQvs6I3AaDtlej4rB5x8vVqZPKlhLKBA6xvBoe9wwjozx_2NXhA2X1MU01cASJpJFgRwSKo0CPHEiMUlBbPKcdV_C2DcUjksyfpAJ_L2NZQKgj5_0Lvildo1Z5QJjP/s1600-h/img06.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEKtO-EmtDRUPaheQvs6I3AaDtlej4rB5x8vVqZPKlhLKBA6xvBoe9wwjozx_2NXhA2X1MU01cASJpJFgRwSKo0CPHEiMUlBbPKcdV_C2DcUjksyfpAJ_L2NZQKgj5_0Lvildo1Z5QJjP/s320/img06.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753209993594050" border="0" /></a><br />Continue until you have the entire text how you want it. Then you can begin to distort the edges of the text a little, in the same way:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaLao2B5mcZejMJCV8_Ypz0S_63KDfYZILq0bi1slXnmwEY5EiWoqsjech8L9Sr7HPnCVIzR0wbD7NAa8nsnd69Sqygm47a-G-3uY1bshiDMFClSLzkPI7l6MrZZ6TP8BfezxfqnrWJza/s1600-h/img07.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 289px; height: 233px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFaLao2B5mcZejMJCV8_Ypz0S_63KDfYZILq0bi1slXnmwEY5EiWoqsjech8L9Sr7HPnCVIzR0wbD7NAa8nsnd69Sqygm47a-G-3uY1bshiDMFClSLzkPI7l6MrZZ6TP8BfezxfqnrWJza/s320/img07.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753140970833170" border="0" /></a><br /><p> When you're done with liquify, click Ok. </p> <p> Now click the Adjustment Layer icon in the layer panel (<img class="f12" src="http://www.webdesign.org/img_articles/17427/img08.jpg" alt="" width="16" height="12" />) and choose Hue/Saturation. In the adjustment panel/window, make sure the Colorize checkbox is selected, and adjust the sliders to get the color you want (a yellowy/orange) : </p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG06TWiEMxvWoTW9J14FPTuTM3-7qGtT73NUBX4SJLATeMwqT5sLXeEy_PvDxfQpTucTJG20FmazW92KqSSaahbCS-iRR1D4XKPI5AVV6Hvr4DS8hKQEosjnnV9BAPtJCKkMfepUu2O3Ji/s1600-h/img09.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 261px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG06TWiEMxvWoTW9J14FPTuTM3-7qGtT73NUBX4SJLATeMwqT5sLXeEy_PvDxfQpTucTJG20FmazW92KqSSaahbCS-iRR1D4XKPI5AVV6Hvr4DS8hKQEosjnnV9BAPtJCKkMfepUu2O3Ji/s320/img09.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753065057192850" border="0" /></a><br />Next, repeat the last step to add another adjustment layer and give this more of a greenish color (without Colorize checked). Then change the Blending Mode of this adjustment layer to Overlay:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CsYyDCDbbvr_p57qSXAEvPtKqmxHWwJCaYrtg3ICEiHCb8l3xQJEr68XixCNqBwH233FbIQ7x60MPDTdJTCIIsIn0KxfrrbCY3EUZ64rE_6MshXr9bP4K-EmWaI3pEdiTNE8nXjb2d2e/s1600-h/img10.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 259px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CsYyDCDbbvr_p57qSXAEvPtKqmxHWwJCaYrtg3ICEiHCb8l3xQJEr68XixCNqBwH233FbIQ7x60MPDTdJTCIIsIn0KxfrrbCY3EUZ64rE_6MshXr9bP4K-EmWaI3pEdiTNE8nXjb2d2e/s320/img10.jpg" alt="" id="BLOGGER_PHOTO_ID_5320753012225316082" border="0" /></a><br />If you find your fire too pixelated, you can add a slight Filter > Blur > Gaussian Blur to it. Also consider adding a pattern or gradient overlay to your original text (remember we duplicated before we rasterized?). Open up the Layer Style window for the text (double click an empty space of the layer in the layer window, or right-click and choose Blending Options). Add an Inner Glow, Outer Glow and a Gradient Overlay, colors of your choice:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgaOMdmgEuhIv25UT3NxiMSV891ADWt9jHyxMriD_f8LD6UuFI82FpOOfRwZDW5pUi7cOMftKLu0T0ehQaHei_sPSiYCPbT80sWYfnnP-M-4_k9mFnF97EGrUCONBD-NKEEelnYt7f_Vm/s1600-h/img11.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgaOMdmgEuhIv25UT3NxiMSV891ADWt9jHyxMriD_f8LD6UuFI82FpOOfRwZDW5pUi7cOMftKLu0T0ehQaHei_sPSiYCPbT80sWYfnnP-M-4_k9mFnF97EGrUCONBD-NKEEelnYt7f_Vm/s320/img11.jpg" alt="" id="BLOGGER_PHOTO_ID_5320752690211800754" border="0" /></a>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com5tag:blogger.com,1999:blog-7821196693014908729.post-71536824693905905552009-03-26T12:42:00.005+08:002009-03-26T15:28:57.997+08:00Sketch To Vector - Bird<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDYss8gis9ZQAcUF7YPu8Zxx78B0osgt5DZ0w3kXrvMeVFxMiFZ0ioHXeG0q1efpx2i9oeNuusIGFgTKI8Gi6g2OUlQrp6mIpdGqzEg1SNhn19YnneCGwxoE-vnTw8bz5RsLPqmP2wUKW/s1600-h/0.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDYss8gis9ZQAcUF7YPu8Zxx78B0osgt5DZ0w3kXrvMeVFxMiFZ0ioHXeG0q1efpx2i9oeNuusIGFgTKI8Gi6g2OUlQrp6mIpdGqzEg1SNhn19YnneCGwxoE-vnTw8bz5RsLPqmP2wUKW/s320/0.gif" alt="" id="BLOGGER_PHOTO_ID_5317352343028204978" border="0" /></a>First sketch bird or anything what you want:-</div><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/draft.gif" class="border" /> </div><div style="text-align: justify;"> </div><p style="text-align: justify;">This is the more detail hand drawing:-</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/detail.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 1</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Here we start the process. Scan the artwork into your pc. Open a new document with RGB color mode. Go to <strong>file > Place</strong>. Place the artwork on the stage. Reduce the <strong>opacity to 50% and lock the layer</strong>.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/1.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2</h3><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>Create a new layer</strong> and move it below the artwork. Rename it as <strong>feather</strong>. We start with the feather because it is at the <strong>backward of all part</strong> for the a bird. Start illustrates and fills it with <strong>black color</strong>. You will get this:-</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/2.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 3</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Secondly, <strong>create a new layer</strong> and rename it as <strong>body</strong>. Draw the white feather as it is just above the feather layer. Sure, fill it with white color.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 400px; height: 250px;" src="http://kailoon.com/content_image/bird/3.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 4</h3><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>Create a new layer</strong>, name it as <strong>mouth</strong>. Draw out the mouth and set the gradient as shown below:-</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/4.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 5</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">This is the process to draw out the eyes. Still, <strong>create a new layer</strong> and name it as <strong>eyes</strong>. You need to use the <strong>pathfinder</strong> for this part:-</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 400px; height: 250px;" src="http://kailoon.com/content_image/bird/5.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 6</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">after all, you will get this:-</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/6.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 7</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">This part will be a bit more difficult but still using the same technique.<strong> Create a new laye</strong>r and rename it as <strong>leg</strong>. Simply follow the steps shown below. You may also use your own color for this part.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/7.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 8</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Lastly, <strong>create a new layer</strong> and draw out the <strong>tree</strong>. Put this <strong>below the legs layer</strong>.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/8.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 9</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To make it look more real. <strong>Simply create a new layer</strong> and draw out the shadow for each part that you think is necessary.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/9.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 10</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is it! Cheers! Hope you enjoy this. Any question, simply leave a comment here. Thanks!</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/bird/10.gif" class="border" /> </div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com6tag:blogger.com,1999:blog-7821196693014908729.post-46061873967820131052009-03-17T16:43:00.003+08:002009-03-17T18:08:37.044+08:00Watercolor Effect<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WGo5meplNkGyMiN8YLjF-VSLLMfMyN7cHr-thvQ8JTgTnOMMoj1XLzimbcUl90WSjCINZFHj1jMIpW-X24ZQGKFk_qE0YDSsrja0_JdMvl8GEMmUA5V_t_jZ88VEt1EmmyeJsBaEy8cC/s1600-h/9_03.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 212px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WGo5meplNkGyMiN8YLjF-VSLLMfMyN7cHr-thvQ8JTgTnOMMoj1XLzimbcUl90WSjCINZFHj1jMIpW-X24ZQGKFk_qE0YDSsrja0_JdMvl8GEMmUA5V_t_jZ88VEt1EmmyeJsBaEy8cC/s320/9_03.gif" alt="" id="BLOGGER_PHOTO_ID_5314074782440115922" border="0" /></a><small class="meta"><br /><a href="http://kailoon.com/author/kailoon/" title="Posts by kailoon"></a> </small> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 322px;" src="http://kailoon.com/content_image/phoyo-edit-1/8.gif" class="border" /> </div><div style="text-align: justify;"> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 1</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Open an image, I will use this image because it suit to my tricks.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/1.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2</h3><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>CTRL + J, duplicate</strong> the image. Now you will have a layer which labeled as <strong>layer 1</strong>. <strong>SHIFT + CTRL + U, desaturate</strong> the image and you will get something like this: </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/2.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 3</h3><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>CTRL + J</strong> again to <strong>duplicate layer 1</strong> and you will get a new layer which labeled as <strong>layer 1 copy</strong>. <strong>CTRL + I </strong>to<strong> invert</strong> the layer and set the layer blend mode to <strong>Color Dodge</strong>. Go to <strong>filter > other > minimum > 1</strong>.<strong> Double click on layer 1 copy</strong> to bring out the <strong>blending option</strong>. <strong>ALT + left click on the triangle and set the underlying layer</strong> as below: </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/3.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 4</h3><div style="text-align: justify;"> </div><p style="text-align: justify;"><strong>CTRL + E</strong> to <strong>merge</strong> up both layers. <strong>CTRL + J, duplicate layer 1</strong>. Select <strong>layer 1 copy</strong> and go to <strong>filter > blur > Gaussian Blur > radius 6</strong>. Set the layer blend mode to<strong> linear burn</strong>. <strong>CTRL + J </strong>on<strong> layer background</strong> and put the layer <strong>background copy</strong> at the <strong>top of all layer</strong> and set the layer blend mode to <strong>color</strong>. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/4.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 5</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Hope you are still with me. Select layer <strong>background copy</strong> and <strong>add a layer mask</strong>, fill it with <strong>black color</strong>. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/5.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 6</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Still with the layer background copy, go to image > adjustment > curve and set as below. </p><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/6.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 7</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a <strong>new layer</strong> and put it <strong>top of all layer</strong>. Fill it with <strong>#ffecd1</strong>. Set layer blend option to <strong>linear burn</strong>. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/7.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 8</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">We are nearly there, now select <strong>layer 1</strong> and set the <strong>opacity </strong>to<strong> 60%</strong> or whatever you think suitable. Select the<strong> background copy layers mask</strong>, with a <strong>45px soft brush</strong>, <strong>opacity 65%</strong>, brush the <strong>face area</strong>. Here is it! </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/phoyo-edit-1/8.gif" class="border" /> </div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com7tag:blogger.com,1999:blog-7821196693014908729.post-75542491955365460622009-03-17T16:28:00.005+08:002009-03-17T16:35:12.334+08:00Coloring Effects<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbvy9yIl56FBv3JQy9ONk5OEp-HtgPprsbCq3PoiLseK62JmI00CEFHT6VehYIsLzHYObEW_NQN6w0KhPA0o2JUaZCVjbu4MlFsUYXK5R0xB-8xOEdfPRska6elpMoAedYXNvZqT_Tgyv/s1600-h/1.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbvy9yIl56FBv3JQy9ONk5OEp-HtgPprsbCq3PoiLseK62JmI00CEFHT6VehYIsLzHYObEW_NQN6w0KhPA0o2JUaZCVjbu4MlFsUYXK5R0xB-8xOEdfPRska6elpMoAedYXNvZqT_Tgyv/s320/1.gif" alt="" id="BLOGGER_PHOTO_ID_5314070851784136610" border="0" /></a><br /></div><h3 style="text-align: justify;">Step 1</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Open the image in PS.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 400px; height: 300px;" src="http://kailoon.com/content_image/photo-edit-2/2.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Go to the bottom of the layers palette and click on the <strong>Hue/Saturation</strong> option. Set the setting as below:</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 400px; height: 300px;" src="http://kailoon.com/content_image/photo-edit-2/3.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 3</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">After that, you may get this: </p><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/photo-edit-2/4.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 4</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a new layer and set it to <strong>Soft Light Blend mode</strong>. Choose a <strong>48px hard brush</strong> and paint the new layer as shown below. You can choose the colors you like. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/photo-edit-2/5.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 5</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Go to<strong> Filter > Blur > Gaussian Blur > 90 pixels</strong>. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/photo-edit-2/6.gif" class="border" /> </div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 6</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Now you can edit your photo yourself easily.</p><div style="text-align: center;" class="tut-img"><img src="http://kailoon.com/content_image/photo-edit-2/7.gif" class="border" /><br /><h3 style="text-align: justify;">Tips:</h3><div style="text-align: justify;"> </div><ul style="text-align: justify;"><li>The lower the saturation will decrease the color more.</li><li>So, the lower the saturation will increase the visibility of the painted color.</li></ul> </div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com2tag:blogger.com,1999:blog-7821196693014908729.post-89980524645141773742009-03-17T15:58:00.004+08:002009-03-17T16:11:16.157+08:00How To Create A Cow<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPC8MwmZKLlmXL8N0crAl2K6NoeD__VK1510S1RbTmokxlw18d3Z9Ha6ddhzlnO5DIokIOoLtv0uZjcyWk1NzAu80DBG1y8StrVXh7pj0IFQEeo8yQTPz6njD1UfcpwCRTTlNmirQx64v/s1600-h/cow.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 206px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUPC8MwmZKLlmXL8N0crAl2K6NoeD__VK1510S1RbTmokxlw18d3Z9Ha6ddhzlnO5DIokIOoLtv0uZjcyWk1NzAu80DBG1y8StrVXh7pj0IFQEeo8yQTPz6njD1UfcpwCRTTlNmirQx64v/s320/cow.png" alt="" id="BLOGGER_PHOTO_ID_5314064840920782770" border="0" /></a><br /></div><h3 style="text-align: justify;">Step 1</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">First of all, we start from skecth. I skecth on a paper and then scan it into my PC.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 290px;" src="http://kailoon.com/tutorial/cow/1.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Open Illustrator, place the image (sketch) into the document. Place it as the bottom layer. Lock it. Create a new layer above it and set the transparency to 50% or 60%. Start draw out the basic shape. It doesn’t have to be very accurate. Smooth, natural and balance are the keys here. Below is the basic shape I got.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 290px;" src="http://kailoon.com/tutorial/cow/3.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 3</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">We are not going to use the stroke here. We are going to draw out the outline manually. We will be using the pathfinder tool very often since now. </p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 290px;" src="http://kailoon.com/tutorial/cow/4.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 4</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Try to Zoom in and to draw out the details line. Below are some shortcut keys to speed up the work.</p><div style="text-align: justify;"> </div><ul style="text-align: justify;"><li>Zoom in = <strong>CTRL</strong> + <strong>+</strong></li><li>Zoom out = <strong>CTRL</strong> + <strong>-</strong></li><li>Paste infront = <strong>CTRL</strong> + <strong>F</strong></li><li>Move a layer down = <strong>CTRL</strong> + <strong>[</strong></li><li>Move a layer top = <strong>CTRL</strong> + <strong>]</strong></li></ul><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 290px;" src="http://kailoon.com/tutorial/cow/5.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 5</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Draw out the eyes amd legs. We are going to use pathfinder too.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 450px; height: 290px;" src="http://kailoon.com/tutorial/cow/6.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 6</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Now, the cow is alomost donw. What we need to do here is to add some details and gradients.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tut-img"><img style="width: 453px; height: 292px;" src="http://kailoon.com/tutorial/cow/7.png" alt="A Cow As Chinese New Year Zodiac For 2009" /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com0tag:blogger.com,1999:blog-7821196693014908729.post-29253224257309271232009-03-16T12:36:00.003+08:002009-03-16T14:15:05.202+08:00Illustrator Tutorial - Create a Gang of Vector Ninjas<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7aHXhlYP0TMTCrewoniym2jPolua7FG17KB3EoLhl2VQjAlRVDUNTLa4OBsZ3GwV7XHhNcsq6bG-YiUAdpoF0SV9PtddZxO8HmrSe7UJEu6-RdWw-hosGLa5VH3HVVmKlQs0iFKBqEqz/s1600-h/ninja-chars-sm.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 181px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7aHXhlYP0TMTCrewoniym2jPolua7FG17KB3EoLhl2VQjAlRVDUNTLa4OBsZ3GwV7XHhNcsq6bG-YiUAdpoF0SV9PtddZxO8HmrSe7UJEu6-RdWw-hosGLa5VH3HVVmKlQs0iFKBqEqz/s320/ninja-chars-sm.png" alt="" id="BLOGGER_PHOTO_ID_5313640193373942386" border="0" /></a><br /></div><p style="text-align: justify;">It can be quite tricky getting the hang of Adobe Illustrator, but if you take a step back and concentrate on the basics there's a range of options for creating great looking images. In this tutorial, we'll take a look at constructing a group of cool vector ninja characters using just the basic shapes and a variety of simple tools, making it a good start for Illustrator beginners.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/1.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Grab the Circle Tool and draw a shape on the artboard, hold the SHIFT key to create a perfectly equal object. By default this will have a white fill and black stroke.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/2.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the Square Tool and draw another shape on the artboard, position this to overlap the original circle. Use the Align Palette to centre the two shapes horizontally.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/3.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">From the same menu, use the Rounded Rectange Tool to draw a small leg. Adjust the roundness of the corners with the keyboard cursor keys until the ends are completely circular.<br />Zoom in and position the leg exactly in relation to the edge of the square body.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/4.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Duplicate the leg and move into position for the remaining limbs, for the arms rotate the shape by 45 degrees. To position the shapes behind the other objects, press the CTRL + [ and CTRL + ] keys repeatedly to adjust the stacking order of the selected objects.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/5.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Draw another perfect circle onto the artboard, and beside it a much larger oval. Overlap the two and use the Align Palette to position exactly.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/6.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">With the two shapes selected, click the Subtract from Shape Area option from the Pathfinder palette. Click the Expand button to refresh the bounding box of the shape.<br />By using temporary shapes as tools along with the Pathfinder options, a range of custom objects can be created.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/7.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Position this semi-circular shape within the large circle of the character to represent the facial area. Draw in a small circle as an eye, fill this with a black swatch and clear any stroke. Copy and paste in front (CTRL + F), then move horizontally to the side (hold SHIFT to constrain the axis)<br />Grouping any pairs of objects, such as the eyes and arms will allow them to be centralised with the other objects using the Align Palette without being moved individually.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/8.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">With the complete line-work character laid out and aligned, draw a selection around the complete object and copy and paste a duplicate. Move a copy off to the side as a backup.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/9.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">With all the objects that make up the torso and limbs selected, chose the Add to Shape Area option from the Pathfinder tool and Expand to merge the shapes into one.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/10.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Fill the body elements with a very dark grey (95% black) and add a 4pt stroke aligned to the outside at 100% black.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/11.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">In the Appearance Palette, click the small options arrow and select Add New Stroke.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/12.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">This time, add a 4pt stroke aligned to the inside, with a lighter, 93% black. This multiple use of strokes is a technique I've come to use in my character designs which really helps lift the colours by adding a little depth and variation.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/13.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the facial area and fill with a pale skin tone, add a slightly thinner stroke at 3pt aligned to the outside using the 93% black.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/14.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Add a New Stroke through the Appearance Palette and give this line a slightly darker tone, aligned to the inside of the shape.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 340px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/15.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">The basic version of the character is complete, ready for some stealthy ninja action.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 492px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/16.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Copy and paste multiple variations of the original line-work character. Adjust and rotate the limbs into a range of scary ninja combat positions, adjust the stacking order of the arms to in front or behind the body to give different effects.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 492px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/17.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">With each individual character, repeat the process of merging shapes and colouring the objects to produce a group of cool ninjas. However, no ninja would be complete without combat accessories…</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/18.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a staff using a long thin rectangle, fill the object with brown while adding a black outline.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/19.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a pointed object using the Star Tool, using the Direct Selection Tool select each of the points of the path from each arm of the star.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/20.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Upon selecting the Rotate Tool, the point of origin will automatically default to the centre of the object. Click and drag to adjust the overall shape of the star.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/21.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Draw a solid circle in the centre and fill the death star weapon with a metal like grey. Add a black outline and a secondary inner stroke with a slightly darker grey.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/22.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Using the same colour scheme, draw a triangle by dragging a shape with the Star Tool and pressing the downwards cursor key to reduce the number of points. Grab the upper most point with the Direct Selection Tool and drag vertically.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 449px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/23.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select and drag the middle two points to squash the lower half into a sword like shape. Finalise this with a small brown rectangle, remember the majority of the handle would be concealed by the hand so only a small section is required.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 340px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/24.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Use the Pen Tool to neatly draw in a three sided shape to represent the chamfered finish of the sword blade.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 340px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/25.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Create two Nunchuk handles and the beginning and end points of the adjoining chain. With both chain elements selected head to Object > Blend > Make</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 340px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/26.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Go back to Object > Blend > Blend Options, enter 5 under the Specified Steps option to alter the type of blend to give a line of individual items.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 339px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/27.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Use the Pen or Pencil tool to draw a temporary line to symbolise the desired route of the Nunchuk chain, with this and the blend selected, go to Object > Blend > Replace Spine.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 450px; height: 442px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/28.png" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Group each individual weapon and move into place on the various characters, completing the group making them ready for action!</p><div style="text-align: justify;"> </div><p style="text-align: center;"><a href="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/ninja-chars.png"><img style="width: 450px; height: 258px;" src="http://blogspoon.s3.amazonaws.com/wp-content/uploads/2009/vector-ninja/ninja-chars-sm.png" alt="Vector Ninja Characters" /></a></p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com7tag:blogger.com,1999:blog-7821196693014908729.post-1956912489875279422009-03-13T10:57:00.003+08:002009-03-13T11:02:18.769+08:00Envelope Distort<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_nL4eAusfYBwNjRgyqhgD1RB2J6-XPfXB1eoocKmqlxmdM31_Z5f27uTKfRMRL99WUHwn5bwHfjDeZB2lvV_SPlAO4wDjx74AYjcp_qfS4BWORf372gTa84arMjFybYculYlBL0d4Uivx/s1600-h/final.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 309px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_nL4eAusfYBwNjRgyqhgD1RB2J6-XPfXB1eoocKmqlxmdM31_Z5f27uTKfRMRL99WUHwn5bwHfjDeZB2lvV_SPlAO4wDjx74AYjcp_qfS4BWORf372gTa84arMjFybYculYlBL0d4Uivx/s320/final.jpg" alt="" id="BLOGGER_PHOTO_ID_5312501649313198434" border="0" /></a><br /></div><h3 style="text-align: justify;">1. Import a picture</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Find a beautiful photo that you would like to use for your artwork. Place it in Illustrator by <strong>File > Place</strong>. Then lock the layer.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 442px; height: 209px;" alt="place file" src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/1.gif" class="img_border" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">2. Base paths</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Make a new layer, ‘base paths’. Use the <strong>Pen</strong> tool, cover the clothes with white paths.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img alt="new layer" src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/2.gif" class="img_border" width="366" height="186" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">3. Envelope text distortion</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Copy all white paths from ‘base paths’ layer and paste it in a new layer. If you want, you can just duplicate the ‘base paths’ layer. Now use the <strong>Type</strong> tool to type in your text message and send it to back (note: your text must be sit below the shape). Then select the text object and the shirt path, go to <strong>Object > Envelope Distort > Make with Top Object</strong> or press <strong>Ctrl+Alt+C</strong>. This will distort the text with the selected shape.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 451px; height: 173px;" alt="envelope distort" src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/3.gif" class="img_border" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Repeat this step to make the envelope text distortion for the skirt.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/4.gif" class="img_border" alt="" width="321" height="96" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Skirt</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">For the skirt text objects, rotate it to 90 degree.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img alt="skirt" src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/5.gif" class="img_border" width="395" height="104" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Don’t forget to use the short cut keys. It will save you a lot of time. Just select the shape and text, and press <strong>Ctrl+Alt+C</strong>.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/6.gif" class="img_border" alt="" width="385" height="109" /></p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Final</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Now you can add some design elements in the background to spice up the artwork.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img alt="final artwork" src="http://www.ndesign-studio.com/images/resources/tutorials/envelope_distort/final.jpg" class="img_border" width="309" height="300" /></p><div style="text-align: justify;"><br /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com12tag:blogger.com,1999:blog-7821196693014908729.post-6939434659244865662009-02-21T17:11:00.004+08:002009-02-21T17:20:19.150+08:00Illustrator Tutorial: Wooden Frame<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9fuCSVYy9yf-Hh5SsgfdRTrPjHVyeb8pyzNAQwL1wSB0aJIMuw1cWlKT8FGgogetnzVHCc-SA583ExdgzxVUmCx0AbGWhBja3a7zl39eS8RjKPkBmECOTkj-NU7OBwaAxmsZsAQxaFWf/s1600-h/wooden_frame.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9fuCSVYy9yf-Hh5SsgfdRTrPjHVyeb8pyzNAQwL1wSB0aJIMuw1cWlKT8FGgogetnzVHCc-SA583ExdgzxVUmCx0AbGWhBja3a7zl39eS8RjKPkBmECOTkj-NU7OBwaAxmsZsAQxaFWf/s320/wooden_frame.jpg" alt="" id="BLOGGER_PHOTO_ID_5305176110070005170" border="0" /><span id="more-15"></span> </a><h3>1. Creating the frame</h3> <p>Select the Rectangle Tool, hold Shift to draw a square. Select the square and go Object>Path>Offset Path. Enter a negative value for offset. Select the new square and offset the path again. Now, enter -2mm for the offset value. We now have the basic frame done.</p> <p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step01.gif" alt="" width="400" height="286" /><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step01_2.gif" alt="" width="400" height="286" /></p> <h3>2. Dividing the frame</h3> <p>We need to turn on Smart Guides for snapping to work. Go view>Smart Guides, and make sure it is checked. Select the Line Tool and go near the corner of the outer square. The anchor text will appear when it detects the corner. Click and drag to the inner corner to draw a line that snaps perfectly to the anchor points. Repeat this steps for the other 3 corners.</p> <p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step02.gif" alt="" width="400" height="286" /><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step02_2.gif" alt="" width="400" height="286" /></p> <h3>3. Breaking into shapes</h3> <p>Select all the shapes and use Divide from the Pathfinder. This will break the shapes into pieces. Press Ctrl/Command+Shift+g to ungroup it. Select the inner frame and fill it with different colours to create the bevel effect.</p> <p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step03_divide.gif" alt="" width="212" height="122" /></p><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step03.gif" alt="" width="400" height="286" /></p> <h3>4. Applying texture</h3> <p>Select the texture we have done on our previous tutorial and drag it over the top frame. Make sure the layer is below the top frame. Select both shape and select Crop from Pathfinder. This will make the shapes crop to the frame shape. Repeat this step for all sides.</p> <p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step04.gif" alt="" width="400" height="352" /></p><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step04_2.gif" alt="" width="200" height="200" /></p> <h3>5. Placing the photo</h3> <p>Select the Rectangle Tool, and draw a brown square with the size of the photo frame and send it to the back. Draw a square in the center of the frame. Place your favorite photo over the square using File>Place. Make sure the square is above the photo. Select the photo and placeholder. Right-click and select Make Clipping Mask to crop the photo to the placeholder.</p> <p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step05.gif" alt="" width="200" height="200" /><img src="http://www.vectordiary.com/isd_tutorials/004_wooden_frame/step05_2.gif" alt="final wooden frame" width="200" height="200" /></p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com10tag:blogger.com,1999:blog-7821196693014908729.post-16758323074795821662009-02-21T16:57:00.005+08:002009-02-21T17:10:30.869+08:00Illustrator Tutorial: Wire Fence<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5X5H6GAJHqk_oLnX4LpsacykL77I2Nu9-eVNC8rEpfr8ftgKezI_gq69SYfR0ICKodtefIS_ZPPw_uk3ePrB71fXGyCoNlkoZy6PNCOIJAFTOLIeraCK-xw0Qrc5zu_7EhYvFyFkLfr2g/s1600-h/wire-fence-tutorial.gif"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5X5H6GAJHqk_oLnX4LpsacykL77I2Nu9-eVNC8rEpfr8ftgKezI_gq69SYfR0ICKodtefIS_ZPPw_uk3ePrB71fXGyCoNlkoZy6PNCOIJAFTOLIeraCK-xw0Qrc5zu_7EhYvFyFkLfr2g/s320/wire-fence-tutorial.gif" alt="" id="BLOGGER_PHOTO_ID_5305175413867235570" border="0" /></a>Learn how to create a wire fence pattern from scratch using the line tool.<br /><div style="text-align: justify;"> </div><h3 style="text-align: justify;">1. Drawing the Zig Zag Fence</h3><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 400px; height: 375px;" src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-01.gif" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">First, select the Line Tool from the Tool Palette and draw a long straight vertical line. This will determine the fence height. Go Effect>Distort & Transform>Zig Zag to apply the zig zag effect. Adjust Ridges and Size to set the fence mesh shape. Make sure the Points is set to Corner.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 400px; height: 262px;" src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-02.gif" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Now we will round the corners. Go Effect>Stylize>Round Corners and enter the radius to round out the sharp corners. Next, set the Weight of the Stroke to 5pt and set it to dark grey color.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-03.gif" alt="" width="300" height="273" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the line and press Ctrl/Command+C to copy it and Ctrl/Command+F to paste a duplicate infront. Set the duplicated line weight to 1pt and change the stroke color to light grey.</p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">2. Blending the Wire Fence</h3><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-04.gif" alt="" width="400" height="303" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">We will now proceed to blend both lines to give a 3D look. Go Object>Expand Appearance to expand the effects. Then go Object>Expand to expand the strokes. The stroke will now turn into shapes. With both shapes still selected, go Object>Blend>Make to blend both shapes. Next, go Object>Blend>Blend Options and set the Specified Steps to 3 for Blend Options. Finally, we will need to expand the blend before diving it in the next step. Go Object>Expand to expand the wire.</p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">3. Dividing the corners</h3><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-05.gif" alt="" width="340" height="345" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Now, select the line tool and draw straight lines over the corners of the wire. We will need to break it into individual segments so that we can achieve the wire twisting effect. Select everything and go to Window>Pathfinder and select Divide. Press Ctrl/Command+G to ungroup it.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-07.gif" alt="" width="135" height="300" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select each individual segments and group it by pressing Ctrl/Command+G. Do this for all the segements.</p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">4. Creating the Fence Pattern</h3><div style="text-align: justify;"> </div><p style="text-align: center;"><img style="width: 400px; height: 264px;" src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-06.gif" alt="" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select all and press Alt/Option as you drag a new instance beside it. Offset it until the edges touches the next wire as shown on the left. Select all and press Alt/Option while holding Shift to create a duplicate beisde it. Press Ctrl/Command+D to repeat the steps to generate a row of wire fence.</p><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-09.gif" alt="" width="400" height="237" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">We notice that the wires are stacking on top of each other. To create the twist effect, we will need to send some segments of the wire below each other. Starting from the top, select a row of segments you want to send down and press Ctrl+Shift+{ / Command+shift+{ to send it to the bottom. Repeat from the top to the bottom, until you achieve the twist effect for the fence.</p><div style="text-align: justify;"> </div><h3 style="text-align: justify;">5. Final Wire Fence</h3><div style="text-align: justify;"> </div><p style="text-align: center;"><img src="http://www.vectordiary.com/isd_tutorials/012_wire_fence/fence-10.gif" alt="" width="400" height="200" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is the final wire fence. Hope you find this trick useful for creating repeated patterns.</p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com1tag:blogger.com,1999:blog-7821196693014908729.post-69849799012692693452009-02-21T15:35:00.003+08:002009-02-21T15:41:04.516+08:00Make a Torn Vector Desktop Wallpaper with Angled Text<div style="text-align: left;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fCvAeZO4-qQ0GgmOzKjkBwLYYLnkvsF4O30LHgDemayBOzPvn7WfPAmp2adRHN7j-ThDrz1jsiZHzdhKwALYcdCGJMzGVKM3POaNnc59ZtYDGHZ7-iIfWuZnQDi6gKU_8GcXZwbvnu0C/s1600-h/preview.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fCvAeZO4-qQ0GgmOzKjkBwLYYLnkvsF4O30LHgDemayBOzPvn7WfPAmp2adRHN7j-ThDrz1jsiZHzdhKwALYcdCGJMzGVKM3POaNnc59ZtYDGHZ7-iIfWuZnQDi6gKU_8GcXZwbvnu0C/s320/preview.jpg" alt="" id="BLOGGER_PHOTO_ID_5305151134995907682" border="0" /></a><br /></div><h3 style="text-align: justify;">Step 1</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Set your document up to whatever size you want to create your desktop at. After that, draw a rectangle using the Rectangle Tool (M) and fill it with a color of your choosing. Put this rectangle on its own layer. Whenever you are making a design that has several elements it is a good idea to put each item on their own layer too. Keep this in mind while you add more objects to the design, as I will not be pointing out when I add new layers in this tutorial.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 348px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-2.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 2</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Add a witty and short saying that you can break up into multiple pieces to create a design. I've used ITC Franklin Gothic for my text. To quickly access the type panel press Command + T.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 437px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-3.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 3</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Angle the type to give it a unique look. Angling the type is as simple as selecting it and hovering your mouse near one of the corners. Using the Direct Selection Tool (V) when the cursor changes to a double-sided arrow you can rotate the type. When you are rotating the type hold down the Shift key to easily rotate it to a 45 degree angle.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 400px; height: 359px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-4.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 4</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">When you begin laying out the text, try to arrange it so that the entire saying falls within the center area of the design. As you'll notice, I've gone ahead and placed the larger words in a pattern that I like. Once you do the same you can continue to build the other words around the existing letters.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 341px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-5.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 5</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Continue to duplicate the words, mix them up and try different combinations so they fit well next to each other. Quickly duplicate the words by holding down the option key while you click and drag. It's OK to allow your artwork to overlap the edges of the artboard at this point.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 342px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-6.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 6</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Observe how the layout looks full and complete (with the exception of the small area on the right that I will add my name and the VECTORTUTS logo to.)</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 279px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-7.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 7</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To make the texture in the background use a simple ellipse that we'll turn into a Scatter Brush so we can quickly make a texture. Draw an ellipse using the Ellipse Tool (L). Fill it with black.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-8.jpg" alt="" width="229" border="0" height="227" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 8</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Open your Brushes (F5) and drag the ellipse into the Brushes palette. When you do this a dialog will open up. Select New Scatter Brush and click OK.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 400px; height: 560px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-9.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 9</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">The Scatter Brush Options dialog has several options to help you create random patterns. Set your Size, Spacing and Scatter to Random. Adjust the small triangles highlighted below to include negative and positive numbers on each slider. This will ensure your brush has enough variety. You of course do not need to adjust the Rotation option as the shape is a circle.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 332px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-10.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 10</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the ellipse in the Brushes palette then select the Paintbrush Tool (B). Simply draw an arbitrary shape and you'll instantly have a texture similar to the one below!</p><div style="text-align: justify;"> </div><p style="text-align: justify;">If you don't like the way the brush is painting, then double-click on the ellipse in the Brushes palette and edit the options. If you make any changes after you've already painted a shape, you will be prompted with the Brush Change Alert dialog. You can Apply to Strokes or Leave Strokes as shown below.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 385px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-11.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 11</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Continue to build up your shapes. After you have a mass of shapes built up, you will need to expand them. Select all of your shapes and go to Object > Expand Appearance. Once you expand your objects you will see that there are small lines (yellow dot) within the shapes. Use the Direct Selection Tool (V) to select these shapes and delete them. After that, select the mass of dots and use the Pathfinder and Select Add to Shape Area (left green dot), then click Expand (right green dot).</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-12.jpg" alt="" width="264" border="0" height="554" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 12</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">You're now left with a mass of dots that are completely merged into one shape.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 379px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-13.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 13</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Place the shape over the corners of the artwork. Select all four sections of dots and select Add to Shape Area and Expand as we did in Step 11.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 465px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-14.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 14</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">You can trim the dots to the edge of the artwork by drawing a rectangle shape over where you would like the dots to be cut off. After that select Subtract from Shape Area (left yellow dot) followed by Expand (right yellow dot).</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Adjust the Opacity of the dots by using the Transparency palette. I've decided an Opacity of 29 is suitable for this layout.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 539px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-15.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 15</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Make other dots that are white to add another level of interest to the design.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 400px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-16.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 16</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">We'll add a spotlight effect to the design by drawing a rectangle using the Rectangle Tool and giving it a Radial Gradient. Access the Gradient Panel by going to Window > Gradient. Click on the Gradient Slider and use the Color palette (F6) to fine-tune the colors.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 431px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-17.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 17</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Move the entire rectangle over the artwork. In the Transparency Palette select Multiply from the drop down list. This will allow your artwork below the gradient to be seen.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 498px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-18.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 18</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">To create a torn paper effect draw an arbitrary shape with the Pencil Tool (N). The easiest way to close an open shape is to hold down the Option key when you are ready to close the shape.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-19.jpg" alt="" width="258" border="0" height="460" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 19</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Still using the Pencil Tool, draw two other torn paper shapes that represent the edges of the paper as it curls upward.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-20.jpg" alt="" width="312" border="0" height="516" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 20</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Give the curled up part of the paper a black to white gradient.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-21.jpg" alt="" width="328" border="0" height="561" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 21</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Add an Inner Glow by going to Effect > Stylize > Inner Glow. Set the Mode to Screen and the Opacity to about 25. Your Blur size may not be exactly what I show in my example. Just make sure yours looks good to you, then press OK.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 540px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-22.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 22</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Give the shape a drop shadow by going to Effect > Stylize > Drop Shadow. Set your mode to Multiply, your Opacity to about 75, your X and Y Offset to 0 and Blur. Press OK.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 546px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-23.jpg" alt="" border="0" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Step 23</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Repeat these steps for the other side of the paper edge, or while you are applying the effect you can select both curled paper edges so the effect will be applied to both at the same time!</p><div style="text-align: justify;"> </div><p style="text-align: justify;">You now have an effective torn paper effect. Place the torn paper over the edge of your artwork to complete the design.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-24.jpg" alt="" width="312" border="0" height="414" /></div><div style="text-align: justify;"> </div><h3 style="text-align: justify;">Final Image</h3><div style="text-align: justify;"> </div><p style="text-align: justify;">Here is what the final desktop looks like. The last step is saving the artwork for use on your desktop. Go to Object > Slice > Clip to Artboard. Finally, go to File > Save for Web and Devices, then save your artwork using your desired settings. All there is left to do is set the image as your desktop!</p><div style="text-align: justify;"> </div><p style="text-align: justify;">You should now be well on your way to exploring all of the powerful features that Adobe Illustrator has to offer.</p><div style="text-align: justify;"> </div><div style="text-align: center;" class="tutorial_image"><img style="width: 450px; height: 281px;" src="http://vectortuts.s3.amazonaws.com/tuts/109_Torn_Screensaver/Picture-1.jpg" alt="" border="0" /></div><div style="text-align: justify;"><br /></div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com0tag:blogger.com,1999:blog-7821196693014908729.post-18167922672722258832009-02-19T16:58:00.002+08:002009-02-19T17:13:29.033+08:00Help Me !!!Kekawan...<br /><br />Tlg Nur... Pls...<br />Nur dpt Interview Fotografi dkt RTM 26hb nie...<br />Tp mslh nyew...<br />Nur x pandai sgt bab2 camera nie... (Mati la... aku)<br />Mcm ner nk wat... Klu suruh design tue pandai la... nie nk amik gambar... adus... berpinar otak Nur...<br /><br />Fikir2 mcm x nk g jew... Tp adew owg kt.. klu x g nnt nm black list...<br />emm... mcm ner yek...<br /><br />Len minta... Len yg dpt... emm... mcm nk nangis jew....<br />Adew yg bley bantu x...<br /><br />Mslh Nur bhgn amali,<br />- 5 snap shoot<br />- penilaian berdasar 1) Teknik Fotografi 2) Komposisi 3) Mesej<br />- kamera 35mm (kmra nie mn nk cr adus...)<br /><br />tue jew la... Pls... Klu adew yg tau bab2 nie... tlg yew...<br />Pendapat & pandangan korang Nur hargai teramat sgt....Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com10tag:blogger.com,1999:blog-7821196693014908729.post-27080539733374960652009-02-12T19:53:00.005+08:002009-02-12T19:58:47.599+08:00Creating Pins in Illustrator<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTfB8qdE_qJVvgl-gHXISeQr71_MwhPe5jb5iTKfk2IAbnsg5ErkMq1KeH9o6w2BC_uFDCXH-57iKZo7dB5Ii-zDI1o6t0jwBgbmlgyYf7BxMz9xwFO1aZOKuCS57G_dWjqCTN7C1mEHWV/s1600-h/gravatastic.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 450px; height: 284px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTfB8qdE_qJVvgl-gHXISeQr71_MwhPe5jb5iTKfk2IAbnsg5ErkMq1KeH9o6w2BC_uFDCXH-57iKZo7dB5Ii-zDI1o6t0jwBgbmlgyYf7BxMz9xwFO1aZOKuCS57G_dWjqCTN7C1mEHWV/s320/gravatastic.jpg" alt="" id="BLOGGER_PHOTO_ID_5301877754786507298" border="0" /></a><br /></div><p style="text-align: justify;">Pins are popular these days, so I thought why not write a tutorial on how to create these in Adobe Illustrator. If you’ve ever wondered how to simulate this realistic looking pin or button effect, here’s your chance to learn. </p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Draw the pin shape</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 150px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto01.gif" alt="Creating pins in Illustrator - Draw the pin shape" title="Creating pins in Illustrator - Draw the pin shape" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Draw a circle by choosing the Ellipse tool and holding down the shift key while dragging the mouse.</p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Fill with a gradient</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 216px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto02.gif" alt="Creating pins in Illustrator - Fill with a gradient" title="Creating pins in Illustrator - Fill with a gradient" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">To the left of the circle is my <a href="http://veerle.duoh.com/artveerle/comments/geeky_dog_desktop/" title="view the Geeky Dog desktop in my art section of the blog">Geeky Dog</a> that I want to use for the pin, but just for demonstration purpose we'll create an actual pin first and then at the end we'll wrap it with this illustration. Add a radial gradient fill to the circle. I've used orange yellow in my example here. Now change the position of the radial gradient by selecting the Gradient tool in the Toolbox and click-drag while holding down the shift key from the center bottom of the circle towards somewhere above the center point of the circle.</p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Draw the shiny highlight shape</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 217px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto03.gif" alt="Creating pins in Illustrator - Draw the shiny highlight shape" title="Creating pins in Illustrator - Draw the shiny highlight shape" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a new layer by clicking the Add New Layer icon at the bottom of the Layers palette. Double click the new layer and give it the name 'shiny highlight'. Press 'd' on the keyboard to set white as fill color and black as stroke color. Set the stroke to no fill by clicking on the Stroke icon in the Toolbox or Color palette and selecting the 'None' fill option at the bottom of the Toolbox or Color palette (the white square with the red diagonal line). Select the Ellipse tool again and draw a circle (holding down the shift key) that is slightly smaller then the pin's circle. The circle should have a white fill now and no border. Deselect the circle and draw a wider ellipse (with a white fill) on top of this white circle a bit as shown in the image above. Select both the pin's circle and the white ellipse and circle. Click the vertical center alignment in the Option bar (or Align palette) to align everything nicely.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 151px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto04.gif" alt="Creating pins in Illustrator - Draw the shiny highlight shape" title="Creating pins in Illustrator - Draw the shiny highlight shape" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Deselect the pin's circle. Use the (black arrow) selection tool and click the gradient/pin's circle holding down the shift key. Now only the white ellipse and circle are selected. Click the Subtract from Shape area in the Pathfinder palette and click the Expand button.</p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Add the shiny highlight effect</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 151px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto05.gif" alt="Creating pins in Illustrator - Add the shiny highlight effect" title="Creating pins in Illustrator - Add the shiny highlight effect" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the Rectangle shape tool in the Toolbox and draw a rectangle on top of the highlight shape. Make sure the rectangle covers the entire highlight shape. Fill the rectangle with the default white to black linear gradient enter -90° as angle value or use the Gradient tool again like you did for the radial gradient for the pin's background. Only now you need to move downwards with the mouse holding down the shift key. Now select both the gradient rectangle and the white highlight shape. Now selecting the highlight shape might be a bit tricky. You can make it yourself very easy by using the Layers palette's "Click to target's" option. I'm referring to the small circle buttons you see on the right of each layer. Click on the arrow to the left of the layer thumbnail of the 'shiny highlight' Layer to reveal all sub-layers. Now click the sub-layer that holds the white highlight shape, hold down the shift key and click the sub-layer that holds the gradient rectangle.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 150px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto06.gif" alt="Creating pins in Illustrator - Add the shiny highlight effect" title="Creating pins in Illustrator - Add the shiny highlight effect" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">This gradient rectangle will be used as masking effect for our highlight. Now that we have both shapes selected, all we need to do is go to the Transparency palette and choose 'Make Opacity Mask' in the palette's dropdown menu.</p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Add the image on the pin</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 149px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto07.gif" alt="Creating pins in Illustrator - Add the image on the pin" title="Creating pins in Illustrator - Add the image on the pin" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Select the gradient circle and copy the shape. Now select the image you want to put on the pin. Make sure the image is one group (command/control + g). To make it easy on yourself, make sure this image is in a separate layer on top of the gradient circle. Drag the image on top of the pin now. Make sure the pin is nicely covered and things are nicely centered etc. Now hit command/control + f (to paste the gradient circle on right on top). Give this circle no fill. Now click the target circle icon again in its layer to select the entire layer. Hit command/control + 7. This way the circle is used as a mask for the image. Hey, it looks like you have almost a pin now :) Almost yes, exactly, because we're not there yet. We need to make it perfect.</p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Add more depth to make it perfect</h4><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 150px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto08.gif" alt="Creating pins in Illustrator - Add more depth to make it perfect" title="Creating pins in Illustrator - Add more depth to make it perfect" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">I think it could use a bit more depth. Create a new layer on top of the image but below the shiny highlight layer. Double click it and call it 'depth effect'. Paste the circle in front again by pressing command/control + f. Change the colors of the gradient fill to white and black as shown in the image and drag the gradient slider all the way to the right.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 154px;" src="http://veerle.duoh.com/images/uploads/pins-illu-howto09.gif" alt="Creating pins in Illustrator - Add more depth to make it perfect" title="Creating pins in Illustrator - Add more depth to make it perfect" /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Change the Layer mode to Multiply to make the white transparent. Change the transparency to 20% or higher if you believe higher is better. This depends a bit on the color of the image.<br /></p>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com9tag:blogger.com,1999:blog-7821196693014908729.post-19591211548212034352009-02-12T19:45:00.003+08:002009-02-12T19:51:48.347+08:00Creating Light Motion Trails & Glowing Sparks<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0kb40qx_1Bc6sOZc9vYk7VevmBgWToARuKz5Xrq0vobEmy4Wxe4YnSifqbXZRCXXZKs9x6Xw7vUN0qpnQT8OT9D9AjPcRk7r8nLkhT5eARCRmqzzv0VOylWpVeOMPizv60fi69pIfM9-/s1600-h/desktop-lighttrails.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 450px; height: 266px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0kb40qx_1Bc6sOZc9vYk7VevmBgWToARuKz5Xrq0vobEmy4Wxe4YnSifqbXZRCXXZKs9x6Xw7vUN0qpnQT8OT9D9AjPcRk7r8nLkhT5eARCRmqzzv0VOylWpVeOMPizv60fi69pIfM9-/s320/desktop-lighttrails.jpg" alt="" id="BLOGGER_PHOTO_ID_5301876430294402354" border="0" /></a><br />A technique often used in advertising these days, is these glowing lines. They look like light motion trails. If you ever wondered how to create these kind of lines, here is how I do it… </div><h4 style="text-align: justify;">Light motion trails<!--<h4--> </h4><h5 style="text-align: justify;">Drawing a line</h5><div> </div><p style="text-align: justify;">Draw a nice thin curved filled line in Photoshop using the Pen tool.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 460px; height: 143px;" src="http://veerle.duoh.com/images/uploads/lighttrail-howto01.gif" alt="Drawing a line" title="Drawing a line" /></p><div style="text-align: justify;"> </div><h5 style="text-align: justify;">Add a glow</h5><div style="text-align: justify;"> </div><p style="text-align: justify;">Double click the shape layer on the right to activate the Effects. Check the Outer Glow option and play with the color, transparency,... That's basically it. I think the hardest part is finding the exact setting and drawing the exact line you want.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 450px; height: 343px;" src="http://veerle.duoh.com/images/uploads/lighttrail-howto02.gif" alt="Add a glow" title="Add a glow" /></p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Glowing sparks</h4><div style="text-align: justify;"> </div><h5 style="text-align: justify;">Create the right brush</h5><div style="text-align: justify;"> </div><p style="text-align: justify;">Create a brush using the following settings. Choose the default Soft Round 21 px brush. Go to the Brushes palette and edit the following settings:</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 450px; height: 495px;" src="http://veerle.duoh.com/images/uploads/glowsparks-howto01.gif" alt="Create the right brush" title="Create the right brush" /></p><div style="text-align: justify;"> </div><ul style="text-align: justify;"><li>Change the spacing in the Brush Tip Shape to 222%</li><li>Check Shape Dynamics and change the Size Jitter to 100%</li><li>Check Scattering, check Both Axes and put the Scatter to 775%</li></ul><div style="text-align: justify;"> </div><h5 style="text-align: justify;">Draw a random line using the brush</h5><div style="text-align: justify;"> </div><p style="text-align: justify;">Choose a light color that will match perfect for the glowing sparkling dots. Draw a random line using the brush. That's it ;)</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 461px; height: 144px;" src="http://veerle.duoh.com/images/uploads/glowsparks-howto02.gif" alt="Draw a random line using the brush" title="Draw a random line using the brush" /></p><div style="text-align: justify;"> </div><h4 style="text-align: justify;">Trail of stars</h4><div style="text-align: justify;"> </div><p style="text-align: justify;">As an extra we create a trail of stars. Launch Illustrator, create a new document and draw a group of random stars using the Star shape tool. You can use a circle as a guide (draw a circle and hit command/control + 5). Select all stars and drag them in the Symbols palette. Now select the <a href="http://veerle.duoh.com/blog/comments/spraying_symbols_in_adobe_illustrator/" title="Learn more about using the Symbol Sprayer tool in Illustrator">Symbol Sprayer tool</a>, choose the stars as symbol to spray with and draw the trail. You may need to experiment a bit with the Symbol Sprayer tool settings. Do this by double clicking the Symbol Sprayer tool in the Toolbox. If you got your trail, select all stars and go to Object > Expand. Select all stars, go to Photoshop and paste your stars as a Shape Layer. Fill them in the color you want, add some transparency or a gradient mask etc. Play around.</p><div style="text-align: justify;"> </div><p style="text-align: center;" class="centered"><img style="width: 461px; height: 144px;" src="http://veerle.duoh.com/images/uploads/startrail-howto.gif" alt="Create a trail of stars" title="Create a trail of stars" /></p><div style="text-align: justify;"> </div>Nurhttp://www.blogger.com/profile/18111861963004711195noreply@blogger.com1