<?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>Sinister Eye &#187; Web Graphics</title>
	<atom:link href="http://www.sinistereye.com/category/web-graphics/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sinistereye.com</link>
	<description>...Another Photoshop Design Blog</description>
	<lastBuildDate>Mon, 19 Jul 2010 20:56:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Design a Vizio Style LCD TV From Scratch</title>
		<link>http://www.sinistereye.com/web-graphics/design-a-vizio-style-lcd-tv-from-scratch/34/</link>
		<comments>http://www.sinistereye.com/web-graphics/design-a-vizio-style-lcd-tv-from-scratch/34/#comments</comments>
		<pubDate>Wed, 19 Aug 2009 18:47:19 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Web Graphics]]></category>

		<guid isPermaLink="false">http://www.sinistereye.com/?p=34</guid>
		<description><![CDATA[Although there are probably a few uses for designing this from scratch, my hope in writing this tutorial is to show a few techniques so you can design your own objects from scratch. For what? You tell me. But I see them all over the internet. Tutorial tip: as always, create a new layer for [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Although there are probably a few uses for designing this from scratch, my hope in writing this tutorial is to show a few techniques so you can design your own objects from scratch. For what? You tell me. But I see them all over the internet. <em>Tutorial tip: as always, create a new layer for each part.</em><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/final1.jpg"><br />
</a><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/final21.jpg"><img class="aligncenter size-full wp-image-52" title="Vizio LCD TV From Scratch" src="http://www.sinistereye.com/wp-content/uploads/2009/08/final21.jpg" alt="final2" width="500" height="400" /></a><br />
<span id="more-34"></span><strong> </strong></p>
<p><strong>Step 1<br />
<span style="font-weight: normal;">Create a rounded rectangle (under the Shapes tool-category) with a radius of around 4px and dark gray (#282828). The radius is a measure of how rounded the corners will be. Rasterize this layer (Right Click &gt;&gt; Rasterize Layer) so that you can edit it more easily. Rasterizing is going to be a pretty important part of this tutorial so keep that in mind.</span></strong></p>
<p><strong><span style="font-weight: normal;"><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/16.jpg"><img class="aligncenter size-full wp-image-36" title="1" src="http://www.sinistereye.com/wp-content/uploads/2009/08/16.jpg" alt="1" width="500" height="400" /></a><strong> </strong></span></strong></p>
<p><strong><span style="font-weight: normal;"><strong>Step 2</strong></span></strong></p>
<p>Next you&#8217;re going to grab your Dodge Tool (it&#8217;s in the same tool-category as Burn and Sponge). Set your brush to around 200px, 20% exposure, and range to Highlights. Now, to your liking, create a light difference (this is the light reflection and makes it look like shiny plastic).</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/21.jpg"><img class="aligncenter size-full wp-image-37" title="2" src="http://www.sinistereye.com/wp-content/uploads/2009/08/21.jpg" alt="2" width="500" height="400" /></a><strong></strong></p>
<p><strong>Step 3</strong></p>
<p>Now draw your TV area. It will, of course, be inside of the plastic TV frame&#8230;but by how much is up to you. Keep in mind that there is usually a black outline around the lit-up display area..so account for that in your selection. So, three things on this step. 1: Draw the screen area. 2: Stroke the selection (Double Click to access Layer Properties &gt;&gt; Stroke) with around 8px, inside (so that the corners are &#8216;right&#8217; and not rounded), and black. 3: Add an outer glow to make the outside plastic part look beveled (3d).  Play with the glow to get it how you want it but I would suggest using the Overlay blending method and a white glow.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/31.jpg"><img class="aligncenter size-full wp-image-38" title="3" src="http://www.sinistereye.com/wp-content/uploads/2009/08/31.jpg" alt="3" width="500" height="400" /></a><strong></strong></p>
<p><strong>Step 4</strong></p>
<p>Now on to the speakers. The instructions for this stepare&#8230; 1: Duplicate the plastic tv outline layer. 2: Drag the new layer so that it is below the plastic tv outline layer (in the layer menu). 3: Move it so that it is actually below the tv (on the canvas). 4: Change the color (Layer Properties &gt;&gt; Color Overlay) to #c6bdbd. 5: Rasterize the new speaker layer.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/41.jpg"><img class="aligncenter size-full wp-image-39" title="4" src="http://www.sinistereye.com/wp-content/uploads/2009/08/41.jpg" alt="4" width="500" height="400" /></a><strong></strong></p>
<p><strong>Step 5</strong></p>
<p>1: Add an inner glow of around 4px (play with it). 2: Add a stroke (2px, position: inside, and #bab0b0). 3: Create a new layer and draw a vertical white line in the center of the speakers (using a 1px pencil). If you&#8217;re worried about finding the center, grab the ruler (Control + R) and use some math (mind or paper depending on your math-giftedness) to find the exact location.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/51.jpg"><img class="aligncenter size-full wp-image-40" title="5" src="http://www.sinistereye.com/wp-content/uploads/2009/08/51.jpg" alt="5" width="500" height="400" /></a><strong></strong></p>
<p><strong>Step 6</strong></p>
<p>If there is a hard part to this tutorial this is it &#8211; simply because it&#8217;s all feel. Youre going to be using a combination of your Dodge and Burn tools to create the shiny, 3d look that the vizio speakers have. Use a photograph as a <a href="http://www.zatznotfunny.com/wordpress/wp-content/uploads/2007/09/vizio.jpg">reference</a>.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/61.jpg"><img class="aligncenter size-full wp-image-42" title="6" src="http://www.sinistereye.com/wp-content/uploads/2009/08/61.jpg" alt="6" width="500" height="400" /></a></p>
<p><strong>Step 7</strong></p>
<p>Now we create the shadow below the tv onto the speakers. 1: Grab your Elliptical Marquee Tool (in the different selection shape tool menu) and draw a wide ellipse, the opposite of which you would like the shadow to be. 2: Once you have this selection, invert the selection (Control + Shift + I), and fill in with black/gray (on a new layer). 3: Select to the right of the white line and delete.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/71.jpg"><img class="aligncenter size-full wp-image-43" title="7" src="http://www.sinistereye.com/wp-content/uploads/2009/08/71.jpg" alt="7" width="500" height="400" /></a></p>
<p><strong>Step 8</strong></p>
<p>Delete everything that makes sense to delete, duplicate and mirror your current half-shadow, and lower the opacity of these layers until you&#8217;re happy with your shadow.</p>
<p><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/81.jpg"><img class="aligncenter size-full wp-image-44" title="8" src="http://www.sinistereye.com/wp-content/uploads/2009/08/81.jpg" alt="8" width="500" height="400" /></a></p>
<p><strong>Step 9</strong></p>
<p>This is sort of like the tricky speaker step, but way less difficult. The first stand is simply a black square. The second (and lower) stand is another rounded rectangle which has been Dodged in the middle (large 250px brush) and on the edges (small 30px brush) and then Burnt on the top and bottom with a very small brush (10px). Of course you must rasterize the shape before you can edit it.</p>
<p><strong><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/91.jpg"><img class="aligncenter size-full wp-image-46" title="9" src="http://www.sinistereye.com/wp-content/uploads/2009/08/91.jpg" alt="9" width="500" height="400" /></a></strong></p>
<p><strong><span style="font-weight: normal;">And that&#8217;s it. You can add whatever you&#8217;d like to the screen and could add a logo if you want. Thanks for reading <img src='http://www.sinistereye.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </span></strong></p>
<p style="text-align: center;"><strong><span style="font-weight: normal;"><a href="http://www.sinistereye.com/wp-content/uploads/2009/08/final22.jpg"><img class="aligncenter size-full wp-image-53" title="Vizio LCD TV From Scratch" src="http://www.sinistereye.com/wp-content/uploads/2009/08/final22.jpg" alt="final2" width="500" height="400" /></a><br />
</span></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sinistereye.com/web-graphics/design-a-vizio-style-lcd-tv-from-scratch/34/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
