<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tutorial Lounge &#187; Mohammad Jeprie</title>
	<atom:link href="http://www.tutoriallounge.com/author/mohammad-jeprie/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tutoriallounge.com</link>
	<description>Learn step by step!</description>
	<lastBuildDate>Wed, 08 Feb 2012 09:58:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Web Design Blog Layout with 3D Details Using Photoshop</title>
		<link>http://www.tutoriallounge.com/2010/06/web-design-blog-layout-with-3d-details-using-photoshop/</link>
		<comments>http://www.tutoriallounge.com/2010/06/web-design-blog-layout-with-3d-details-using-photoshop/#comments</comments>
		<pubDate>Fri, 04 Jun 2010 15:39:43 +0000</pubDate>
		<dc:creator>Mohammad Jeprie</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[blog website]]></category>
		<category><![CDATA[theme design]]></category>
		<category><![CDATA[theme tutorial]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[web template]]></category>

		<guid isPermaLink="false">http://www.tutoriallounge.com/?p=6077</guid>
		<description><![CDATA[In this tutorial, we will create a blog layout with lots of 3D details using Adobe Photoshop. This layout can be used for a tutorial site and also personal site. This layout has some of the most popular feature in current web design trend, such as post thumbnail and featured image. we also giving the.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-6169" title="web-design-3D-530" src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-530.jpg" alt="" width="530" height="468" /><br />
<br />
In this tutorial, we will create a blog layout with lots of 3D details using <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/photoshop/"><strong>Adobe Photoshop</strong></a>. This layout can be used for a <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/photoshop/"><strong>tutorial site</strong></a> and also personal site. This layout has some of the most popular feature in current web design trend, such as post thumbnail and featured image. we also giving the opportunity for <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/freebies/"><strong>free download source file</strong></a>, you can use this as personal or commercial use.<span id="more-6077"></span></p>
<h3>Preview</h3>
<p>Before move on, let&#8217;s take a look at the design that we&#8217;re going create here. Click on the image to see it in full size.</p>
<p><a style="color: #006a94;" href="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-final-large.jpg"><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-final-small.jpg" alt="Create Blog Layout with 3D Details" width="530" height="779" /></a></p>
<h3>Step 1: Create Main Background</h3>
<p>Create new file with size: 1100 x 1600 px.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-01.jpg" alt="Create Blog Layout with 3D Details" width="530" height="321" /></p>
<h3>Step 2</h3>
<p>Before we move see I&#8217;d like to start by creating groups. Putting every layer in appropiate groups will help us works effectively and help the programmer to easily code the final psd .</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-04.jpg" alt="Create Blog Layout with 3D Details" width="238" height="401" /></p>
<h3>Step 3</h3>
<p>Fill background with color #656565.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-02.jpg" alt="Create Blog Layout with 3D Details" width="530" height="355" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-03.jpg" alt="Create Blog Layout with 3D Details" width="381" height="559" /></p>
<h3>Step 4</h3>
<p>In this step, we&#8217;ll change the background color. Click Add adjustment layer icon and choose Hue/Saturation. Activate Colorize option and move three sliders available until we find color that we like.</p>
<p>At this point, you might ask &#8220;Why using Hue/Saturation. Why not shoose the color in step 3&#8243;. The reason is with this technique you can easily change the color. All you have to do is just open the Hue/Saturation and move the silder to change the color.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-05.jpg" alt="Create Blog Layout with 3D Details" width="238" height="188" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-06.jpg" alt="Create Blog Layout with 3D Details" width="238" height="362" /></p>
<h3>Step 5</h3>
<p>We&#8217;ll add stripe to our background. You can create stripe pattern in Photoshop but I&#8217;ve found a free tool to create stripe. Go to <a style="color: #006a94;" href="http://stripegenerator.com">stripegenerator.com</a>. Change the settings available. After you find nice stripe pattern on the preview image, click download button. You&#8217;ll have the pattern in png file type.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-07.jpg" alt="Create Blog Layout with 3D Details" width="530" height="460" /></p>
<h3>Step 6</h3>
<p>Open the png pattern file in Photoshop. Click Edit &gt; Define Pattern. Name the stripe pattern if you want then click OK.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-08.jpg" alt="Create Blog Layout with 3D Details" width="500" height="256" /></p>
<h3>Step 7</h3>
<p>Return to our blog design file. Create new layer. Click Edit &gt; Fill. Choose Pattern for its content. Click small down arrow to open available pattern and choose stripe pattern we have just created. Click OK to start fill layer with stripe.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-09.jpg" alt="Create Blog Layout with 3D Details" width="335" height="269" /></p>
<h3>Step 8</h3>
<p>Set Layer&#8217;s Blend Mode to Overlay and change Opacity to 8%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-10.jpg" alt="Create Blog Layout with 3D Details" width="529" height="352" /></p>
<h3>Step 9: Page Background</h3>
<p>Activate rounded rectangle tool. Set radius to 10 px and foreground color to #7f7f7f. In the middle of the image, drag to create a rounded rectangle. Put this shape inside base group.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-11.jpg" alt="Create Blog Layout with 3D Details" width="381" height="559" /></p>
<h3>Step 10</h3>
<p>Add these layer styles to give it a 3D look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-12.jpg" alt="Create Blog Layout with 3D Details" width="530" height="394" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-13.jpg" alt="Create Blog Layout with 3D Details" width="530" height="393" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-14.jpg" alt="Create Blog Layout with 3D Details" width="381" height="559" /></p>
<h3>Step 11: Create Main Menu Button</h3>
<p>Create a rounded rectangle on top. Put it inside top menu group. Add page title inside the button. Add these layer styles to the button.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-18.jpg" alt="Create Blog Layout with 3D Details" width="530" height="269" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-15.jpg" alt="Create Blog Layout with 3D Details" width="530" height="394" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-16.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-17.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 12</h3>
<p>Create new layer above the button. Create an elliptical selection and fill it with black. Deselect (Ctrl + D). Add Gaussian Blur (Filter &gt; Blur &gt; Gaussian Blur). Change layer&#8217;s opacity to 30%. This subtle shadow add more depth to the button and gives 3D impressions.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-19.jpg" alt="Create Blog Layout with 3D Details" width="530" height="682" /></p>
<h3>Step 13</h3>
<p>Use a pencil tool to draw 1 px white line on top of the button. Erase both ends with eraser tool.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-20.jpg" alt="Create Blog Layout with 3D Details" width="530" height="506" /></p>
<h3>Step 14</h3>
<p>This 1 px line is very small. You may not notice it but it does give more depth to button&#8217;s 3D appearance. You can the difference in this animated gif.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-21.gif" alt="Create Blog Layout with 3D Details" width="246" height="158" /></p>
<h3>Step 15</h3>
<p>Draw another 1 px white line. This time on top of the content&#8217;s base. Erase both ends with eraser tool.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-22.jpg" alt="Create Blog Layout with 3D Details" width="530" height="620" /></p>
<h3>Step 16</h3>
<p>Again, spot the difference with and without that 1 px line in this gif animation.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-23.gif" alt="Create Blog Layout with 3D Details" width="286" height="157" /></p>
<h3>Step 17</h3>
<p>Repeat previous steps to create another buttons.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-24.jpg" alt="Create Blog Layout with 3D Details" width="530" height="219" /></p>
<h3>Step 18: Content and Sidebar Background</h3>
<p>Draw smaller rounded rectangle for content background. Use color: #c4c3c3. Add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-25.jpg" alt="Create Blog Layout with 3D Details" width="530" height="447" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-26.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-27.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 19</h3>
<p>Now, select right side for sidebar.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-28.jpg" alt="Create Blog Layout with 3D Details" width="286" height="420" /></p>
<h3>Step 20</h3>
<p>Click Add Adjustment Layer icon and choose Levels. Use setting shown below to make selected area lighter. This will separate it from main content area.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-29.jpg" alt="Create Blog Layout with 3D Details" width="286" height="420" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-30.jpg" alt="Create Blog Layout with 3D Details" width="238" height="360" /></p>
<h3>Step 21</h3>
<p>Double click Hue/Saturation layer and add Inner Shadow. This will add another depth the main content area and make it seems taller.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-31.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-32.jpg" alt="Create Blog Layout with 3D Details" width="518" height="300" /></p>
<h3>Step 22: Create Featured Content</h3>
<p>Create a white rounded rectangle and use these Layer Styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-33.jpg" alt="Create Blog Layout with 3D Details" width="530" height="304" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-34.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-35.jpg" alt="Create Blog Layout with 3D Details" width="530" height="393" /></p>
<h3>Step 23</h3>
<p>Add picture above shape, convert it to clipping mask by pressing Ctrl + Alt + G.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-36.jpg" alt="Create Blog Layout with 3D Details" width="530" height="401" /></p>
<h3>Step 24</h3>
<p>Draw black rectangle shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add post on it.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-37.jpg" alt="Create Blog Layout with 3D Details" width="530" height="337" /></p>
<h3>Step 25</h3>
<p>Next, we will add Featured Content banner. Draw a rectangle above the picture. Click its right side to add a point. Select the point using direct selection tool and move it to right. Write <em>FEATURED CONTENT</em> inside the shape. Draw another shape under the banner and use darker color.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-38.jpg" alt="Create Blog Layout with 3D Details" width="530" height="1400" /></p>
<h3>Step 26</h3>
<p>Ctrl-click banner and fill it with black. Move it few pixels down and add Gaussian Blur. Erase unneeded areas creted from blurring process and change layer&#8217;s opacity to 60%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-39.jpg" alt="Create Blog Layout with 3D Details" width="530" height="1010" /></p>
<h3>Step 27</h3>
<p>We will add navigation arrow to move to next or previous featured post. Create a black circle with opacity 35%. In its center draw a white rectangle. Rotate it 45 degree and change its opacity to 35%. Duplicate rectangle path, move it few pixels right and select subtract.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-40.jpg" alt="Create Blog Layout with 3D Details" width="530" height="249" /></p>
<h3>Step 28</h3>
<p>We have just created navigation arrow for <em>previous post</em>. To create <em>next post</em>, duplicate the arrow by Alt-drag it to the opposite side and rotate it 180 degree.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-41.jpg" alt="Create Blog Layout with 3D Details" width="530" height="294" /></p>
<h3>Step 29: Create Post</h3>
<p>Draw a white square shape. Add Layer Style Stroke. This shape will be container for post thumbnail.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-42.jpg" alt="Create Blog Layout with 3D Details" width="524" height="394" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-43.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 30</h3>
<p>Add image above square shape. Press Ctrl + Alt +G to convert it to Clipping Mask.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-44.jpg" alt="Create Blog Layout with 3D Details" width="529" height="323" /></p>
<h3>Step 31</h3>
<p>Next to the thumbnail, add some text. Add post title, post info (category, author&#8217;s name, number of comments). Finally, add short post content.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-45.jpg" alt="Create Blog Layout with 3D Details" width="530" height="368" /></p>
<h3>Step 32</h3>
<p>Draw a rounded rectangle under the post. This will be read more button. Add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-46.jpg" alt="Create Blog Layout with 3D Details" width="530" height="254" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-47.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-48.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 33</h3>
<p>I want to add a subtle 3D effect to the thumbnail image. Create ellips selection under the thumbnail image. Fill it with black. Deselect and add Gaussian Blur. Change fill layer to 20%. Alt-drag this shadow and put it on top side of the thumbnail.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-49.jpg" alt="Create Blog Layout with 3D Details" width="530" height="722" /></p>
<h3>Step 34</h3>
<p>Next, we need to add separator between each post. Activate brush tool. Open brush panel, set brush size to 1 px and increase spaing to 955%. Shift-drag to draw thin dotted line under the post.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-50.jpg" alt="Create Blog Layout with 3D Details" width="377" height="448" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-51.jpg" alt="Create Blog Layout with 3D Details" width="530" height="193" /></p>
<h3>Step 35</h3>
<p>In Layers panel, select all post layers. Right click and choose Convert to Smart Object. This way, our post is now in one layer. Alt-drag to duplicate post and fill the content area.</p>
<p>If you want to change something on the post, maybe make the read more bigger. You can do that easily. Double click post layer to open it in new Window. Create some changes and click File &gt; Save. Once you return to original file, every read more button will also change.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-52.jpg" alt="Create Blog Layout with 3D Details" width="515" height="569" /></p>
<h3>Step 36: Create Separator Between Featured Content and Posts</h3>
<p>Now, we&#8217;ll create a separator between featured content and post list. Create new layer and draw two 1 px lines. Use color #898888 on top and #d6d5d5 under it. The difference of brightness between these lines will gives a 3D look. You can see the result below.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-54.jpg" alt="Create Blog Layout with 3D Details" width="530" height="260" /></p>
<h3>Step 37</h3>
<p>Add layer mask and paint both ends with black to hide them.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-55.jpg" alt="Create Blog Layout with 3D Details" width="530" height="304" /></p>
<h3>Step 38</h3>
<p>Above the line create new layer. Create elliptical selection and fill it with white. Deselect and add Gaussian Blur. Select bottom part and press delete. Change layer&#8217;s opacity to 30%. This will add another subtle 3D effet on the image.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-56.jpg" alt="Create Blog Layout with 3D Details" width="530" height="786" /></p>
<h3>Step 39: Add Social Media Icon</h3>
<p>Search for free social network icon. I suggest <a style="color: #006a94;" href="http://iconfinder.com">iconfinder</a> because it has a friendly interface.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-58.jpg" alt="Create Blog Layout with 3D Details" width="530" height="252" /></p>
<h3>Step 40</h3>
<p>Download icons and put it on top of sidebar.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-57.jpg" alt="Create Blog Layout with 3D Details" width="410" height="298" /></p>
<h3>Step 41</h3>
<p>Draw a rounded rectangle and add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-59.jpg" alt="Create Blog Layout with 3D Details" width="407" height="289" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-60.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-61.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 42</h3>
<p>Add another rounded rectangle shape, this time shorter. Add these layer styles. Add text <em>subscribe</em> on this button.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-62.jpg" alt="Create Blog Layout with 3D Details" width="419" height="346" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-63.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-64.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-65.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 43</h3>
<p>Repeat step 38 to add a separator between each sidebar widget.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-66.jpg" alt="Create Blog Layout with 3D Details" width="397" height="314" /></p>
<h3>Step 44: Create Ad Spot</h3>
<p>Create a rectangle for ad spot. Use color #d7d7d7 and add Stroke.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-67.jpg" alt="Create Blog Layout with 3D Details" width="428" height="362" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-68.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 45</h3>
<p>Draw another smaller rectangle for smaller ad spot.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-69.jpg" alt="Create Blog Layout with 3D Details" width="410" height="378" /></p>
<h3>Step 46: Create Other Sidebar Content</h3>
<p>Add another content on the sidebar such as Post List and some text. Don&#8217;t forget to put separator between each widget. For the separator you can just duplicate earlier separator by Alt-dragging it.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-70.jpg" alt="Create Blog Layout with 3D Details" width="458" height="567" /></p>
<h3>Step 47: Add Logo</h3>
<p>Let&#8217;s insert the logo. Grab tutoriallounge&#8217;s logo from here. Put it on top right of the image. The logo&#8217;s color is unique, dark and light blue. That different gives me an idea to make it looks like a sticker.</p>
<p>Create ellips selection behind the logo. Fill it with black. Deselect (Ctrl + D). Add Gaussian Blur and reduce its opacity.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-72.jpg" alt="Create Blog Layout with 3D Details" width="530" height="584" /></p>
<h3>Step 48</h3>
<p>Create selection with shape like shown below. Fill it with black, deselect, and add Gaussian Blur. Reduce its layer opacity.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-73.jpg" alt="Create Blog Layout with 3D Details" width="485" height="426" /></p>
<h3>Step 49</h3>
<p>Create new layer above logo. Draw a radial white to transparent gradient and reduce layer&#8217;s opacity to 30%. This will add a subtle light source on top of the image.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-74.jpg" alt="Create Blog Layout with 3D Details" width="530" height="345" /></p>
<h3>Step 50: Pagination</h3>
<p>Draw a white rectangle under posts list. Add Inner Shadow Layer Styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-75.jpg" alt="Create Blog Layout with 3D Details" width="530" height="281" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-76.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Step 51</h3>
<p>Add page list and page number. Between every page draw a thin line to separate them. Higlight active page number with subtle to make it different.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-77.jpg" alt="Create Blog Layout with 3D Details" width="530" height="244" /></p>
<h3>Step 52: Add Search Box</h3>
<p>Search for a magnify glass icon and put it on top of the page. Next to it, draw a rounded rectangle. Dont forget to add subtle shadow under the shape and icon. Add these layer styles to the search box.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-80.jpg" alt="Create Blog Layout with 3D Details" width="395" height="290" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-78.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-79.jpg" alt="Create Blog Layout with 3D Details" width="530" height="392" /></p>
<h3>Final Result</h3>
<p>Finally, we&#8217;re done. I hope you like the end result and learn some new techniques from this tutorial. Click on the image to see it in full size.</p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-final-large.jpg"><img src="http://www.tutoriallounge.com/wp-content/uploads/web-design-3D-final-small.jpg" alt="Create Blog Layout with 3D Details" width="530" height="779" /></a></p>
<p><a href="http://www.box.net/shared/9dzn2jxh1a"><img src="../wp-content/uploads/download-source-file.jpg" alt="Download Final PSD Tutorial" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoriallounge.com/2010/06/web-design-blog-layout-with-3d-details-using-photoshop/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>How To Create Floral Theme Typography Using Photoshop and Illustrator</title>
		<link>http://www.tutoriallounge.com/2010/05/how-to-create-floral-theme-typography-using-photoshop-and-illustrator/</link>
		<comments>http://www.tutoriallounge.com/2010/05/how-to-create-floral-theme-typography-using-photoshop-and-illustrator/#comments</comments>
		<pubDate>Tue, 04 May 2010 18:19:36 +0000</pubDate>
		<dc:creator>Mohammad Jeprie</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Illustrate]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[illustrator]]></category>
		<category><![CDATA[Illustrator Tutorial]]></category>
		<category><![CDATA[ilustrator]]></category>
		<category><![CDATA[Photoshop Tutorial]]></category>
		<category><![CDATA[Smart Object]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Vector]]></category>

		<guid isPermaLink="false">http://www.tutoriallounge.com/?p=5898</guid>
		<description><![CDATA[Few weeks ago I stumbled on a very beautiful typography poster from Olariu Alex. This tutorial is highly inspired from that poster and we will also add some flowers and butterflies into the text. To get the best quality, we combine vector from Illustrator with pixel editing in Photoshop. Preview Before moving on, take a.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-5910" title="floral-typography" src="http://www.tutoriallounge.com/wp-content/uploads/floral-typography.jpg" alt="" width="530" height="455" /><br />
<br />
Few weeks ago I stumbled on a very beautiful <strong><a style="color: #006a94;" href="http://www.behance.net/Gallery/Designers-are-meant-to-be-loved-not-understood_/108779">typography poster</a></strong> from <strong><a style="color: #006a94;" href="http://www.behance.net/IntensE">Olariu Alex</a></strong>. This tutorial is highly inspired from that poster and we will also add some flowers and butterflies into the text. To get the best quality, we combine vector from <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/illustrate/"><strong>Illustrator</strong></a> with pixel editing in <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/photoshop/"><strong>Photoshop.</strong></a><span id="more-5898"></span></p>
<h3>Preview</h3>
<p>Before moving on, take a look at the final image we&#8217;re going to create. Click <a style="color: #006a94;" href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_final.jpg">here</a> or click on the image to see it in full screen.</p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_final.jpg"><img class="alignnone" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_66.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="198" /></a></p>
<h3>Source Needed</h3>
<p>These are the resources used in this tutorial:</p>
<ul>
<li><a style="color: #006a94;" href="http://princess-of-shadows.deviantart.com/art/vintage-grunge-textures-79040200">Vintage Grunge Textures</a> from <a style="color: #006a94;" href="http://princess-of-shadows.deviantart.com/">princess-of-shadows</a></li>
<li><a style="color: #006a94;" href="http://shoofly-stock.deviantart.com/art/Butterfly-Stock-3-36154914">Butterfly 3</a> from <a style="color: #006a94;" href="http://shoofly-stock.deviantart.com/">shoofly-stock</a></li>
<li><a style="color: #006a94;" href="http://gild-a-stock.deviantart.com/art/Autumn-Leaves-PNG-Pack-98853536">Autumn Leaves PNG Pack</a> from <a style="color: #006a94;" href="http://gild-a-stock.deviantart.com/">gild-a-stock</a></li>
<li><a style="color: #006a94;" href="http://sammykaye1sstamps.deviantart.com/art/Autumn-Leaves-1-101213798">Autumn Leaves 1</a> from <a style="color: #006a94;" href="http://sammykaye1sstamps.deviantart.com/">sammykaye1sstamps</a></li>
<li><a style="color: #006a94;" href="http://pralinkova-princezna.deviantart.com/art/Stock9-Yellow-flower-59365484">Stock9-Yellow Flower</a> from <a style="color: #006a94;" href="http://pralinkova-princezna.deviantart.com/">pralinkova-princezna</a></li>
<li><a style="color: #006a94;" href="http://anbdstock.deviantart.com/art/Flower-Stock-59-83310304">Flower Stock 59</a> from <a style="color: #006a94;" href="http://anbdstock.deviantart.com/">anbdstock</a></li>
<li><a style="color: #006a94;" href="http://all-silhouettes.com/flourishdesign/">Vector Flourish Design</a> from <a style="color: #006a94;" href="http://all-silhouettes.com">All-Silhouettes</a></li>
<li><a style="color: #006a94;" href="http://qvectors.net/floral-vectors/5-floral-ornaments/">5 Vector Floral Ornaments</a> from <a style="color: #006a94;" href="http://qvectors.net/">QVectors</a></li>
</ul>
<h3>Step 1:  Background</h3>
<p>Open Photoshop. Create new file (<strong>File &gt; New</strong>) with size 1280&#215;1024 px, resolution 72 dpi, Mode: RGB.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_01.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="524" height="329" /></p>
<h3>Step 2</h3>
<p>Activate gradient tool. Click preview box in option bar to open gradient editor dialog. Create gradient from #ffbc58 to #f95b1e.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_02.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="439" height="501" /></p>
<h3>Step 4</h3>
<p>Create radial gradient from center to outside.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_03.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 5</h3>
<p>Download <a style="color: #006a94;" href="http://princess-of-shadows.deviantart.com/art/vintage-grunge-textures-79040200">vintage grunge textures</a> and paste it on top of the image. Resize it until we find nice texturing.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_04.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="355" /></p>
<h3>Step 6</h3>
<p>Change texture blend mode to Multiply with 20% opacity.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_05.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 7: Main Text</h3>
<p>Add text on top of the image. Here, I use yellow color.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_06.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 8</h3>
<p>Add this layer styles.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_07.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_08.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 9: Floral Shapes</h3>
<p>Download <a style="color: #006a94;" href="http://qvectors.net/floral-vectors/5-floral-ornaments/">Vector Floral Ornaments</a> and open it in Illustrator. Select one of the vector shape. Hit <strong>ctrl+C</strong> to copy it to clipboard.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_09.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="440" /></p>
<h3>Step 10</h3>
<p>Back to Photoshop. Hit <strong>ctrl+V</strong> for paste. Make sure you choose Smart Object. This way, pasted object will remain an illustrator file, so you&#8217;ll be able to resize it without degrading its quality. Rotate and resize the vector shape until you find it interesting.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_10.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="227" height="152" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_11.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="364" /></p>
<h3>Step 11</h3>
<p>Now, we need to change its color to math overall color tone. From the Layers panel double click its layer thumbnail. You&#8217;ll probably get a dialog box like seen below, just click OK.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_12.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="511" height="182" /></p>
<h3>Step 12</h3>
<p>The Shape wil be opened in Illustrator. Select it and change its color from Color Panel. After you finish edit the color hit <strong>ctrl+S</strong> to save it and <strong>ctrl+W</strong> to close it. Let&#8217;s go back to Photoshop and you&#8217;ll find the shape is also changing.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_13.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="431" height="317" /></p>
<h3>Step 13</h3>
<p>Hold <strong>alt</strong> and move cursor on line between shape and text layers. The cursor will change into two overlapping center, click now to convert shape into clipping mask. The vector shape will goes inside the text.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_14.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="496" /></p>
<h3>Step 14</h3>
<p>Repeat the process for other vector shape. Once you&#8217;re done, select the shape layers and the text then hit <strong>ctrl+G </strong>to put them into separate group. Name the group text.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_15.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="528" height="735" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_16.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="835" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_17.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="456" height="326" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_18.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="382" height="462" /></p>
<h3>Step 15: Add Subtle Floral Image in Background</h3>
<p>Hold <strong>shift</strong> then click on thumbnail layer of shapes we have created earlier. This step will create selection based on the shape&#8217;s size.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_19.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="634" /></p>
<h3>Step 16</h3>
<p>Create new layer underneath the text. Click <strong>Edit &gt; Fill</strong>, use White then click OK.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_20.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_21.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="318" height="247" /></p>
<h3>Step 17</h3>
<p>Remove selection by pressing <strong>ctrl+D</strong>. Click <strong>Filter &gt; Blur &gt; Gaussian Blur</strong>.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_22.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="322" height="333" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_23.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 18</h3>
<p>Change layers opacity to 20%.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_24.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="573" /></p>
<h3>Step 19: Decorating Text</h3>
<p>Back to Illustrator, open <a style="color: #006a94;" href="http://all-silhouettes.com/flourishdesign/">Vector Flourish Design</a> and hit <strong>ctrl+A</strong> to select all shapes. From color panel change its fill color to white.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_25.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="449" /></p>
<h3>Step 20</h3>
<p>All the shapes&#8217;s color is now white. Because the background is also white its very hard to see them. Click <strong>View &gt; Preview</strong> to see shapes outline.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_26.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="431" /></p>
<h3>Step 21</h3>
<p>Shape one of the shape. Press <strong>ctrl+C</strong>.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_27.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="396" /></p>
<h3>Step 22</h3>
<p>Return to Photoshop, hit <strong>ctrl+V</strong> to paste the shape. Place it on top of the text. Add layer styles Drop Shadow.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_28.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="498" height="334" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_29.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_30.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="233" /></p>
<h3>Step 23</h3>
<p>Repeat this process with other shapes.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_31.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="468" height="368" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_32.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="332" /></p>
<h3>Step 24: Add Depth to Text Decoration</h3>
<p>Select all shapes and press <strong>ctrl+G</strong> to put them in one group. Duplicate the group by dragging it to New Layer icon.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_33.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="513" height="251" /></p>
<h3>Step 25</h3>
<p>Hit <strong>ctrl+E</strong> to convert duplicated group into a layer. Double click layer to open layer styles dialog box. Select Layer Mask Hides Effect and add bigger drop shadow.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_34.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="242" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_35.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_36.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<h3>Step 26</h3>
<p>Select text by <strong>ctrl+clicking</strong> its layer thumbnail. Hit <strong>ctrl+shift+I</strong> to invert selection. Make sure the floral layer is still selected and click Add Layer Mask icon. Change fill layer to 0%.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_37.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="249" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_38.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="159" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_39.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="303" /></p>
<h3>Step 27</h3>
<p>Now, floral shape out side the text will have bigger and darker shadow. This gives impression as if they are higher from the background.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_40.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="524" height="244" /></p>
<h3>Step 28: Adding Real Flower</h3>
<p>Open <a style="color: #006a94;" href="http://pralinkova-princezna.deviantart.com/art/Stock9-Yellow-flower-59365484">Yellow Flower</a> in Photoshop. Use Quick Selection to select the flower. It&#8217;s very amazing how this tool works! All you need is just dragging inside the flower and they will automatically selected.</p>
<p>If you use earlier version of Photoshop, you may not have this tool. Use the magic wand to get similar result.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_41.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="521" /></p>
<h3>Step 29</h3>
<p>Click <strong>Select &gt; Modify &gt; Contract</strong>. Use 2 pixel then click OK.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_42.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="518" height="456" /></p>
<h3>Step 30</h3>
<p>Copy flower and paste it on our image. Right click flower layer and choose Convert to Smart Object. By changing the flower layerto smart object we will retain all its pixel information.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_43.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_44.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="261" height="312" /></p>
<h3>Step 31</h3>
<p>Hit <strong>ctrl+T</strong> and change flower&#8217;s size.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_45.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="238" /></p>
<h3>Step 32</h3>
<p>Add drop shadow to give the flower realistic look.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_46.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_47.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="529" height="214" /></p>
<h3>Step 33</h3>
<p>Hold <strong>alt </strong>and drag flower to duplicate it. Again change its size.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_48.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="520" height="226" /></p>
<h3>Step 34</h3>
<p>Open another flower, select it, and paste it in Photoshop.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_49.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="398" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_50.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="519" height="199" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_51.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="178" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_52.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="400" height="388" /></p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_53.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="182" /></p>
<h3>Step 35: Add Dry Leaves</h3>
<p>Download <a style="color: #006a94;" href="http://sammykaye1sstamps.deviantart.com/art/Autumn-Leaves-1-101213798">Autumn Leaves 1</a> and open it in Photoshop. This file is already cutted. All we need to do is just make rough selection around it, cpy, and paste it in Photoshop.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_54.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="398" /></p>
<h3>Step 36</h3>
<p>Resize  and put it on the text.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_55.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="213" /></p>
<h3>Step 37</h3>
<p>Keep doing this to another dry leaves.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_56.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="323" height="360" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_57.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="223" /></p>
<h3>Step 38: Adding Butterflies</h3>
<p>Open <a style="color: #006a94;" href="http://shoofly-stock.deviantart.com/art/Butterfly-Stock-3-36154914">Butterfly</a> in Photoshop. All the butterfly has already cutted. Just like we did with earlier dry leaves, select and paste them on Photoshop. Don&#8217;t forget to add drop shadow.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_58.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="500" height="500" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_59.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="230" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_60.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="246" /></p>
<h3>Step 39: Add Subtle Floral Shape in Background</h3>
<p>Paste floral ornament we have opened earlier. Put it behind the text.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_61.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 40</h3>
<p>Change fill layer to 0%. Add Bevel and Emboss.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_62.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="410" /></p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_63.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 41</h3>
<p>Add another floral ornament on the background. Don&#8217;t overdo this, keep them subtle. Otherwise the design will be too crowded and remove the focus from main text.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_64.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="424" /></p>
<h3>Step 42</h3>
<p>I feel that there&#8217;s too much empty space in this design. To remove it we&#8217;l use crop tool. Open crop tool and drag around the text. I&#8217;m using Photoshop CS5 here and you can see that the crop box is divided into 9 grids that help us see the final image proportion. Once you have find the right size hit <strong>ctrl+Enter</strong> to start cropping.</p>
<p><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_65.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="419" /></p>
<h3>Conclusion</h3>
<p>Finally, we are done! I hope you like this tutorial and learn something here. Click <a style="color: #006a94;" href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_final.jpg">here</a><a style="color: #006a94;" href="here"></a> or click on the image below to see it in full size.</p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_final.jpg"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-photoshop-illustrator-colorful-floral-typography_66.jpg" alt="tutorial-photoshop-illustrator-colorful-floral-typography" width="530" height="198" /></a></p>
<p style="text-align: center;"><a href="http://www.desaindigital.com/wp-content/uploads/2010/05/Colorful-Floral-Text/Floral-text.zip"><img class="aligncenter" src="http://www.tutoriallounge.com/wp-content/uploads/download-source-file.jpg" alt="Download Final PSD Tutorial" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoriallounge.com/2010/05/how-to-create-floral-theme-typography-using-photoshop-and-illustrator/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>How To Draw A Realistic Pencil and Break It Apart</title>
		<link>http://www.tutoriallounge.com/2010/04/how-to-draw-a-realistic-pencil-and-break-it-apart/</link>
		<comments>http://www.tutoriallounge.com/2010/04/how-to-draw-a-realistic-pencil-and-break-it-apart/#comments</comments>
		<pubDate>Mon, 19 Apr 2010 17:09:45 +0000</pubDate>
		<dc:creator>Mohammad Jeprie</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Illustrate]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Drawing Tutorial]]></category>
		<category><![CDATA[Free PSD Source]]></category>
		<category><![CDATA[Photoshop Tutorials]]></category>
		<category><![CDATA[PS Tutorials]]></category>

		<guid isPermaLink="false">http://www.tutoriallounge.com/?p=5660</guid>
		<description><![CDATA[In this Photoshop tutorial, we will draw realistic pencils and break them apart and rearrange them into word look like an beautiful typography using colorful art. The pencil is created in separate file and imported as a smart object to maintain its quality. Before we start take a look at the image we&#8217;re going to.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tutoriallounge.com/2010/04/how-to-draw-a-realistic-pencil-and-break-it-apart/"><img class="alignnone size-full wp-image-5705" title="Typography-Tutorial-530" src="http://www.tutoriallounge.com/wp-content/uploads/Typography-Tutorial-530.jpg" alt="" width="530" height="250" /></a><br />
<br />
In this <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/photoshop/"><strong>Photoshop tutorial</strong></a>, we will draw realistic pencils and break them apart and rearrange them into word look like an beautiful typography using <a style="color: #006a94;" href="http://www.tutoriallounge.com/category/illustrate/"><strong>colorful art</strong></a>. The pencil is created in separate file and imported as a smart object to maintain its quality.</p>
<p>Before we start take a look at the image we&#8217;re going to create. Click <strong><a style="color: #006a94;" href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-how-to-draw-pencil-and-break-it-apart-final.jpg">here</a></strong> or click on the image to see it in full size.<span id="more-5660"></span></p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-how-to-draw-pencil-and-break-it-apart-final.jpg"><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-27.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="161" /></a></p>
<h3>Tutorial Detail:</h3>
<ul>
<li>Time Needed: 45 minutes</li>
<li>Software Used: Photoshop (CS2 above)</li>
</ul>
<h3>Souce Files Needed:</h3>
<ul>
<li><strong><a style="color: #006a94;" href="http://mayang.com/textures/Wood/html/Flat%20Wood%20Textures/index.html">Wood texture</a></strong> from <strong><a style="color: #006a94;" href="http://mayang.com/textures/">Mayang&#8217;s Free Textures Library</a></strong></li>
<li><strong><a style="color: #006a94;" href="http://spiteful-pie-stock.deviantart.com/art/Paper-Texture-78307923">Grunge paper texture</a></strong> from <strong><a style="color: #006a94;" href="http://deviantart.com">DeviantArt</a></strong></li>
</ul>
<h3>Step 1: Creating Pencil Tip</h3>
<p>We&#8217;ll start by creating the pencil in separate pencil. Create  new file, size: 782&#215;25 px. At the end of this file, draw a triangle using polygon tool with sides: 3.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-01.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="112" /></p>
<h3>Step 2</h3>
<p>Create new layer and hit <strong>ctrl+alt+G</strong> to convert it to clipping mask. This way, everything we draw in this layer will be inside the pencil tip layer. With low opacity brush draw black in indicated areas to give the pencil tip 3D look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-02.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="85" /></p>
<h3>Step 3</h3>
<p>Using small brush draw crown shapes in areas where the pencil&#8217;s tip and main body connects. Using hard brush (hardness: 95%) draw black in the end of the pencil tip.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-03.jpg" alt="tutorial how to draw pencil and break it apart" width="516" height="50" /></p>
<h3>Step 4</h3>
<p>Use pen tool to draw two poligon for reflection on the pencils tip. Change layer opacity to 30% to keep the reflection subtle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-04.jpg" alt="tutorial how to draw pencil and break it apart" width="523" height="105" /></p>
<h3>Step 5: Draw Pencil&#8217;s Main Body</h3>
<p>For the pencil&#8217;s main body draw a long rectangle and at the end subtract it with a crown shape. I use yellow for the pecils color. You may use any color you want, at the end of this tutorial we will learn that we can this color easily.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-05.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="211" /></p>
<h3>Step 6</h3>
<p>Create new layer and hit <strong>ctrl+alt+G </strong>to convert it to clipping mask. Draw black to white gradient. Change layers blending mode to Overlay with opacity 30%. This gradient will add 3D effect to the pencil.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-06.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="108" /></p>
<h3>Step 7</h3>
<p>Using rectangular marquee select middle part of the pencil. In the Layers panel, click Add Adjustment Layer icon and choose Levels. Drag white slider in Output Levels to 224. Hit <strong>ctrl+alt+G</strong> so only the pencils body affected by this adjustment layer.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-07.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="212" /></p>
<h3>Step 8</h3>
<p>This is similar to our previous step. Using rectangular marquee, select pencils lower body and add adjustment layer Levels. Right now, use smaller number in Output Levels.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-08.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="188" /></p>
<h3>Step 9: Draw Eraser</h3>
<p>Pencil is always has an eraser on top of it. Create a red rounded rectangle at the beginning of the pencil. Make sure it is placed underneath the pencils main body. Create a new layer and convert it to clipping mask (<strong>ctrl+alt+G</strong>). Using soft brush, draw 1 px line on left side of the eraser, next draw some soft shadow with bigger soft brush.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-09.jpg" alt="tutorial how to draw pencil and break it apart" width="528" height="223" /></p>
<h3>Step 10: Draw Metal Connector</h3>
<p>The eraser and pencil&#8217;s body is connected with a thin metal. Drawing this metal connector is quite unique. Start by creating a rectangular selection and fill it with black to white gradient. Open Curves (<strong>ctrl+M</strong>) and create a very wavy curves. Make sure the preview check box is selected so you can see the result instantly. Do this until you have a nice reflection on the metal.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-10.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="296" /></p>
<h3>Step 11</h3>
<p>Create a new shape layer then add two vertical rectangles and some small rounded rectangles. Add Bevel and Emboss with setting below and change fill layer to 0%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-11.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="329" /></p>
<h3>Step 12</h3>
<p>Create new layer. Draw 1 px line next to the metal connector. This small line will add convincing 3D look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-12.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="110" /></p>
<h3>Step 13: Draw Highlights</h3>
<p>Activate pen tool and make sure you select path icon in the option bar. Draw a straight line on the pencil&#8217;s main body. Activate brush tool and set brush size to 3 px with hardness 0%. Create new layer. In the paths panel, right click path and choose Stroke Path. In the dialog box make sure you select Simulate Pressure.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-13.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="250" /></p>
<h3>Step 14</h3>
<p>Do the same to draw another reflection on lower part of the pencil. This time use smaller brush size and shorter path.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-14.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="57" /></p>
<h3>Step 15: Add Wood Texture</h3>
<p>Our current pencil loos very clear and glossy. It look as if it is made from metal or plastic. Easy way to give this pencil a realistic look is by adding wood texture. You can search <a style="color: #006a94;" href="http://mayang.com/textures/Wood/html/Flat Wood Textures/index.html">free wood texture</a> from <a style="color: #006a94;" href="http://mayang.com/textures/">Mayang&#8217;s Free Texture Library</a>. Download &#8220;<a style="color: #006a94;" href="http://mayang.com/textures/Wood/images/Flat Wood Textures/light_coloured_wood_200142.JPG">light coloured wood texture</a>&#8221; and paste it above the pencil. Select pencil without the metal connector and click Add Layer Mask icon. Change blend mode to Overlay with opacity 50%. As you can see, we now have a very realistic pencil. Save this file in psd format. Because we don&#8217;t need it anymore, you may close it.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-15.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="144" /></p>
<h3>Step 16: Preparing paper and text</h3>
<p>Create a new file with size 3.368 x 1.024 pixel. Grab <a style="color: #006a94;" href="http://spiteful-pie-stock.deviantart.com/art/Paper-Texture-78307923">grunge paper texture</a> and paste it on the new file, change layers opacity to 20%. Add text &#8220;LEARN&#8221; on it. Lower text opacity to 30%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-16.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="161" /></p>
<h3>Step 17: Placing Pencil</h3>
<p>Click File &gt; Place and choose the pencil file we have created earlier. In the paste dialog box option choose Smart Object. Place the pencil on the L character. To make it realistic, try to give it more angle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-17.jpg" alt="tutorial how to draw pencil and break it apart" width="283" height="445" /></p>
<h3>Step 18</h3>
<p>There&#8217;s no need to place another pencil file. Hit <strong>ctrl+J</strong> to copy first pencil and rotate it for the lower part of &#8220;L&#8221;.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-18.jpg" alt="tutorial how to draw pencil and break it apart" width="463" height="456" /></p>
<h3>Step 19</h3>
<p>This pencil is too long so it&#8217;s our job to break it. Activate lasso tool and create rough selection on part of the pencil that we will remove. Inverse the selection by pressing <strong>ctrl+shift+I</strong> and click Add Layer Mask icon to remove it.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-19.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="186" /></p>
<h3>Step 20</h3>
<p>Add new layer and make sure it is underneath the pencil layer. Set foreground color to black. Draw back part of the pencil using brush tool with brush size 2 px and hardness: 90%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-20.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="198" /></p>
<h3>Step 21</h3>
<p>Repeat this step to another letter.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-21.jpg" alt="tutorial how to draw pencil and break it apart" width="504" height="470" /></p>
<h3>Step 22</h3>
<p>To make the pencils look realistic, make sure that every broken pencil has their own pair. You can see this in the picture below.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-22.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="161" /></p>
<h3>Step 23</h3>
<p>So far, here&#8217;s what we have.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-23.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="161" /></p>
<h3>Step 24</h3>
<p>I found that one color make the scene seems too boring. I want to give some pencils different color. In the Layers panel, click Add Adjustment Layer icon and choose Hue/Saturation. Move the hue slider untl you find the pencils color that you like. Now, fill the adjustment layer mask with black. Set foreground color with white and paint on the pencil you want to change.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-24.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="370" /></p>
<h3>Step 25</h3>
<p>Keep on painting the pencil you want to change. You can repeat Step 24 and use different hue setting for another color.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-25.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="389" /></p>
<h3>Step 26</h3>
<p>Finally, I want to add spotlight effect to the image. Add new adjustment layer Levels and change grey parameter to 0.63 (<strong>a</strong>). This setting makes overall image darker. Create elliptical selection on center of the image and fill it with black (<strong>b</strong>). Click Filter &gt; Blur &gt; Gaussian Blur and use a very big radius (<strong>c</strong>). These steps will add a big blurry black in the center of the mask and Levels only affect outer part of the image, thus creating a spotlight effect.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-26.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="574" /></p>
<h3>Conclusions</h3>
<p>You can see that I draw a lot in this tutorial, sometimes using 1 px brush, some people may prefer to use layer style to achieve similar effect. However, that&#8217;s your personal choice, use techniques suit you best. I hope you like the final result and learn one or two techniques from  this tutorial. If you have trouble, don&#8217;t hesitate to write a comment below.</p>
<p>Click <a style="color: #006a94;" href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-how-to-draw-pencil-and-break-it-apart-final.jpg">here</a> or click on the image to see it in full size.</p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/tutorial-how-to-draw-pencil-and-break-it-apart-final.jpg"><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-draw-pencil-and-break-it-apart-27.jpg" alt="tutorial how to draw pencil and break it apart" width="530" height="161" /></a></p>
<p><a href="http://desaindigital.com/wp-content/uploads/2010/04/tutorial-draw-pencil-break-it/tutorial-draw-pencil-and-break-it-source.zip"><img src="http://www.tutoriallounge.com/wp-content/uploads/download-source-file.jpg" alt="download psd file" width="200" height="35" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoriallounge.com/2010/04/how-to-draw-a-realistic-pencil-and-break-it-apart/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>How to Draw A Very Detailed RadioTape From The 80&#8242;s</title>
		<link>http://www.tutoriallounge.com/2010/04/how-to-draw-a-very-detailed-radiotape-from-the-80s/</link>
		<comments>http://www.tutoriallounge.com/2010/04/how-to-draw-a-very-detailed-radiotape-from-the-80s/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 08:09:13 +0000</pubDate>
		<dc:creator>Mohammad Jeprie</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Advanced Tutorial]]></category>
		<category><![CDATA[Free PSD Source]]></category>
		<category><![CDATA[Photoshop Tutorials]]></category>
		<category><![CDATA[PS Tutorials]]></category>

		<guid isPermaLink="false">http://www.tutoriallounge.com/?p=5533</guid>
		<description><![CDATA[Remember the old days where cassette tape and FM radio still rules? The Rolling Stones, Beatles, and Ozzy Osborne was the king! Great memory isn&#8217;t it? And of course you&#8217;ll remember the gadget we use at that time. It&#8217;s much bigger than iPad, but no one complains! Radio tape. In this tutorial, we&#8217;ll recreate a.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tutoriallounge.com/2010/04/how-to-draw-a-very-detailed-radiotape-from-the-80s/"><img class="alignnone size-full wp-image-5607" src="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final-530.jpg" alt="" width="530" height="391" /></a><br />
<br />
Remember the old days where cassette tape and FM radio still rules? The Rolling Stones, Beatles, and Ozzy Osborne was the king! Great memory isn&#8217;t it? And of course you&#8217;ll remember the gadget we use at that time. It&#8217;s much bigger than iPad, but no one complains! Radio tape. In this tutorial, we&#8217;ll recreate a radio tape from the 80&#8242;s using only Photoshop.</p>
<p>First, let&#8217;s take a look at the image we&#8217;ll be creating. Click <a href="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final-large.jpg"><strong>here</strong></a> or click on the image to see it in full resolution.</p>
<p><span id="more-5533"></span><a href="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final-large.jpg"><img class="alignnone size-full wp-image-5535" src="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final.jpg" alt="" width="530" height="391" /></a></p>
<p>Every shape in this radiotape is made from vector shape. So, if I say &#8220;Draw a circle&#8221;, it means circle from shape not from elliptical marquee. Because every shape made from vector shape, the final outcome is scalable. We can resize it to any size we want. Sound good? Let&#8217;s move on!</p>
<h2>Source Needed</h2>
<p><a href="http://www.brusheezy.com/brush/465-Spiderman-Pattern"><strong>Spiderman Pattern</strong></a></p>
<p><a href="http://www.bittbox.com/freebies/free-seamless-vector-perforated-metal-pattern"><strong>Vector Metal Pattern</strong></a></p>
<p><a href="http://buzillo-stock.deviantart.com/art/grunge-textures-01-117072744"><strong>Grunge Paper Texture</strong></a></p>
<h3>Step 1-Base</h3>
<p>We&#8217;ll start by creating base for this radiotape&#8217;s body. Create a rounded rectangle with radius 20 px. In both side, draw two rectangle and choose subtract. Add Bevel and Emboss to this shape.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-01.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="333" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-02.jpg" alt="Tutorial Photoshop Draw RadioTape" width="322" height="400" /></p>
<h3>Step 2</h3>
<p>Using rounded rectangle tool draw two base for speaker. For its feet, just draw two small rectangle on the bottom.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-03.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="331" /></p>
<h3>Step 3</h3>
<p>Ctrl+click the base. Create new layer, fill it with white, and changee blend mode to Multiply. Click Filter &gt; Noise &gt; Add Noise. Use small Amount and select Monochromatic. This small step will add a bit of texture to the body.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-04.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="331" /></p>
<h3>Step 4</h3>
<p>Draw a rectangle in the middle. This will be the base for tape deck. Add some layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-05.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="331" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-06.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="323" /></p>
<h3>Step 5-Create Tape Deck</h3>
<p>For tape deck, draw a rectangle. Duplicate the rectangle and make it smaller, from the option bar choose subtract to create hole on the bigger rectangle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-07.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="338" /></p>
<h3>Step 6</h3>
<p>Under tape deck, draw another  rectangle and add a poligon.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-08.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="364" /></p>
<h3>Step 7</h3>
<p>Manually draw shadow inside the tape deck. Create circle shape and add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-09.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="459" /></p>
<h3>Step 8</h3>
<p>Draw smaller circle and add some rectangles. Duplicate these shape until we have the tape inside.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-10.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="314" /></p>
<h3>Step 9</h3>
<p>Draw a reounded rectangle behind the tape&#8217;s circle. Between the two circles draw a rectangle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-11.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="356" /></p>
<h3>Step 10</h3>
<p>Draw a circle shape, change it to clipping mask until it gos inside the rectangle. Add gradient overlay with type Noise and use blend mode Luminosity. This circle with gradient will be the magnetic tape.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-12.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="245" /></p>
<h3>Step 11</h3>
<p>Duplicate the magnetic tape and resize it. Add some detail like the tape side (A or B) and Auto Stop System sign.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-13.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="238" /></p>
<h3>Step 12-Create Tape Control</h3>
<p>Now, we&#8217;ll create the tape&#8217;s controller. Draw a rectangle under the tape deck. Add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-14.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="319" /></p>
<h3>Step 13-Create Tape Controller</h3>
<p>Draw a rectangle and a poligon behind it. Add some detail like record symbol, text.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-15.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="262" /></p>
<h3>Step 14</h3>
<p>Duplicate this tape controller for other function. Move the play button down to add a realistic look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-16.jpg" alt="Tutorial Photoshop Draw RadioTape" width="524" height="170" /></p>
<h3>Step 15-Draw Battery Indicator and Counter</h3>
<p>For battery indicator draw a red rectangle with red outer glow.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-17.jpg" alt="Tutorial Photoshop Draw RadioTape" width="527" height="137" /></p>
<h3>Step 16</h3>
<p>Next, create a rectangle with dark inner glow.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-18.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="245" /></p>
<h3>Step 17</h3>
<p>Inside the rectangle draw small box. Using pen tool draw some polygons as shown below.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-19.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="257" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-20.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="88" /></p>
<h3>Step 18</h3>
<p>For the equalizer indicator, draw some black rectangles. Duplicate all and change its color to red. Add red Outer Glow and delete some of them so only a few lights is on.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-21.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="264" /></p>
<h3>Step 19</h3>
<p>Add some details.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-22.jpg" alt="Tutorial Photoshop Draw RadioTape" width="379" height="119" /></p>
<h3>Step 20</h3>
<p>I hope you&#8217;re still with me. Here&#8217;s what we have so far.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-23.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="331" /></p>
<h3>Step 21-Small Speakers</h3>
<p>Draw a ring by creating a big circle. Duplicate it and make it smaller. Select subtract from the option bar.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-24.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="243" /></p>
<h3>Step 22</h3>
<p>Dulicate the ring and resize it. Create some rectangles surrounding both rings.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-25.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="158" /></p>
<h3>Step 23</h3>
<p>Create new layer. Click Edit &gt; Fill. Load spiderman pattern from <strong><a href="http://www.brusheezy.com/brush/465-Spiderman-Pattern">brusheezy</a></strong>. Resize the pattern.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-26.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="351" /></p>
<h3>Step 24</h3>
<p>Add layer mask and paint pattern outside the speaker with black to hide it. Duplicate the small speaker and put it on the other side.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-27.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="149" /></p>
<h3>Step 25-Big Speakers</h3>
<p>Start by creating a big rounded rectangle for the speaker&#8217;s base. Add outer glow styles to give it a 3D look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-28.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="459" /></p>
<h3>Step 26</h3>
<p>Draw a big circle. Hit <strong>ctrl+alt+G </strong>to convert layer to Clipping Mask.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-29.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="380" /></p>
<h3>Step 27</h3>
<p>Add smaller circle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-30.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="456" /></p>
<h3>Step 28</h3>
<p>Paint some white on top of the circle and give it Gaussian Blur with big radius.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-31.jpg" alt="Tutorial Photoshop Draw RadioTape" width="523" height="262" /></p>
<h3>Step 29</h3>
<p>Create smaller circle. Add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-32.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="403" /></p>
<h3>Step 30</h3>
<p>Create ring shape above this circle and some layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-33.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="443" /></p>
<h3>Step 31</h3>
<p>Create bigger ring shape with these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-34.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="401" /></p>
<h3>Step 32</h3>
<p>Create a smaller ring above the previous ring.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-35.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="435" /></p>
<h3>Step 33</h3>
<p>We need to add some reflection on center of the speaker. Paint with white and add Gaussian Blur.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-36.jpg" alt="Tutorial Photoshop Draw RadioTape" width="522" height="221" /></p>
<h3>Step 34</h3>
<p>We need another pattern to cover the big speaker. Create new file, 800&#215;600 px, background transparent, and fill it with metal pattern from <strong><a href="http://www.bittbox.com/freebies/free-seamless-vector-perforated-metal-pattern">bittbox</a></strong>.</p>
<p>We need bigger hole in this pattern. To do this, <strong>ctrl+click </strong>the pattern to select it. Click Select &gt; Modify &gt; Contract and select 2 px. Hit <strong>ctrl+shift+I</strong> to invert the selection and hit Delete.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-37.jpg" alt="Tutorial Photoshop Draw RadioTape" width="450" height="359" /></p>
<h3>Step 35</h3>
<p>Paste the pattern on top of our big speaker. Resize it and add layer mask to hide unneeded pattern. Add layer styles shown below to give the pattern a metalic look.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-38.jpg" alt="Tutorial Photoshop Draw RadioTape" width="482" height="286" /></p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-39.jpg" alt="Tutorial Photoshop Draw RadioTape" width="490" height="361" /></p>
<h3>Step 36-Input Selector</h3>
<p>Draw a rounded rectangle for the selector&#8217;s base. Add smaller rectangle with these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-40.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="437" /></p>
<h3>Step 37</h3>
<p>Again, draw smaller rectangle inside the previous one.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-41.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="310" /></p>
<h3>Step 38</h3>
<p>Create the selector by drawing a small rectangle first then add poligons behind it.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-42.jpg" alt="Tutorial Photoshop Draw RadioTape" width="451" height="290" /></p>
<h3>Step 39</h3>
<p>Duplicate the selector and add some details.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-43.jpg" alt="Tutorial Photoshop Draw RadioTape" width="460" height="191" /></p>
<h3>Step 40-Another Selector</h3>
<p>We&#8217;ll add a circle shape selector. Draw a small circle and add inner shadow.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-44.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="171" /></p>
<h3>Step 41</h3>
<p>Draw smaller circle and inside it draw small rectangle. From the option bar select subtract.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-45.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="291" /></p>
<h3>Step 42</h3>
<p>Duplicate circle and resize it. Draw another rectangle and choose subtract. We&#8217;re done with the first selector. Duplicate it and add some details.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-46.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="138" /></p>
<h3>Step 43-Radio</h3>
<p>Draw a big rectangle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-47.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="275" /></p>
<h3>Step 44</h3>
<p>Inside the rectangle draw rounded rectangle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-48.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="271" /></p>
<h3>Step 45</h3>
<p>Add shadow and some text.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-49.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="169" /></p>
<h3>Step 46</h3>
<p>Now for the radio frequency selector, draw big circle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-50.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="431" /></p>
<h3>Step 47</h3>
<p>Inside the circle draw another smaller circle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-51.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="377" /></p>
<h3>Step 48</h3>
<p>Ctrl+click the frequency selector to select it. Create new layer, click Filter &gt; Noise &gt; Add Noise. Click Filter &gt; Blur &gt; Radial Blur. Change layer&#8217;s blend mode to Multiply.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-52.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="197" /></p>
<h3>Step 49</h3>
<p>To add reflection to the selector, draw a poligon and fill it with. Add Gaussian Blur and change its opacity to 30%.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-53.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="175" /></p>
<h3>Step 50-Top Button</h3>
<p>Add button on top of the radiotape by drawing a small rounded rectangle and add these layer styles.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-54.jpg" alt="Tutorial Photoshop Draw RadioTape" width="523" height="352" /></p>
<h3>Step 51</h3>
<p>For push button, draw a rectangle and a Gradient Overlay.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-55.jpg" alt="Tutorial Photoshop Draw RadioTape" width="502" height="196" /></p>
<h3>Step 52-Add 3D Look</h3>
<p>Create this shape behind the radiotape and add gradient overlay. This will add depth to the radiotape&#8217;s body and make it looks 3D.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-56.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="254" /></p>
<h3>Step 53-Handle</h3>
<p>Draw a rounded rectangle on top. Draw another rectangle inside it and choose subtract.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-57.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="270" /></p>
<h3>Step 54</h3>
<p>Draw black rounded rectangle for hand handle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-58.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="188" /></p>
<h3>Step 55</h3>
<p>Next to the handle draw a rectangle and add Gradient Overlay.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-59.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="198" /></p>
<h3>Step 56</h3>
<p>Draw smaller rectangle inside previous rectangle.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-60.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="199" /></p>
<h3>Step 57</h3>
<p>Add few small rectangles with these layer styles. Duplicate all this handle and put it on the other side.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-61.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="341" /></p>
<h3>Step 58-Adding Shadow</h3>
<p>Create new layer underneath every layers. Create elliptical selection and fill it with black. Add Gaussian Blur to soften it. Don&#8217;t forget to add small shadow on the feet.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-62.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="220" /></p>
<h3>Step 59</h3>
<p>This radiotape is too clean. I want to make it looks olsd. So, I download a <strong><a href="http://buzillo-stock.deviantart.com/art/grunge-textures-01-117072744">grunge texture</a></strong> and put it on top of this radiotape and change its blend mode to Multiply.</p>
<p><img src="http://www.tutoriallounge.com/wp-content/uploads/tutorial-illustration-radio-tape-63.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="391" /></p>
<h3>Conclusions</h3>
<p>Click <a href="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final-large.jpg"><strong>here</strong></a> or click on the image to see our final image in full resolution. I hope you like it.</p>
<p><a href="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final-large.jpg"><img src="http://www.tutoriallounge.com/wp-content/uploads/radio-tape-final.jpg" alt="Tutorial Photoshop Draw RadioTape" width="530" height="391" /></a></p>
<p><a href="http://desaindigital.com/wp-content/uploads/2010/04/radiotape/radiotape.zip"><img class="alignnone size-full wp-image-5609" src="http://www.tutoriallounge.com/wp-content/uploads/download-source-file.jpg" alt="" width="200" height="35" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoriallounge.com/2010/04/how-to-draw-a-very-detailed-radiotape-from-the-80s/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
	</channel>
</rss>

