<?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>Graphic Design Tutorials &#124; Web Design, Icons, Logos &#187; computer drawing</title>
	<atom:link href="http://www.pstut.info/tag/computer-drawing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pstut.info</link>
	<description>Graphics design tutorials on intermediate level Photoshop for web design, icons, logos, and text effects.</description>
	<lastBuildDate>Tue, 27 Dec 2011 16:59:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Dashboard Clock &#8211; Photoshop Graphic Design Tutorial 3</title>
		<link>http://www.pstut.info/photoshop-tutorials/creating-the-dashboard-clock/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/creating-the-dashboard-clock/#comments</comments>
		<pubDate>Wed, 18 Apr 2007 00:18:27 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[clock]]></category>
		<category><![CDATA[clock drawing]]></category>
		<category><![CDATA[clock icon]]></category>
		<category><![CDATA[clock image]]></category>
		<category><![CDATA[computer drawing]]></category>
		<category><![CDATA[dashboard clock]]></category>
		<category><![CDATA[draw a clock]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>
		<category><![CDATA[time]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=48</guid>
		<description><![CDATA[So today, I was just thinking of exactly what type of Photoshop tutorial I could write about, and maybe even give a few hints to people out there in the fields of designing with Photoshop.  An idea of creating the Dashboard Clock from my MacBook seemed amusing to me, so I decided to go with it for this [...]]]></description>
			<content:encoded><![CDATA[<p>So today, I was just thinking of exactly what type of Photoshop tutorial I could write about, and maybe even give a few hints to people out there in the fields of designing with Photoshop.  An idea of creating the Dashboard Clock from my MacBook seemed amusing to me, so I decided to go with it for this Photoshop tutorial. <span id="more-48"></span>I was doing this the first time, so there might be some rough edges since I never edited it, but it should give you a basic understanding.  By the way, those who were wondering about the wallpaper, the current one used is created by me, and the tutorial is coming shortly.</p>
<p>I just want to let you guys know that this tutorial is for more advanced users of Photoshop, so if you&#8217;re just starting out, you might not exactly get everyting, as it&#8217;s not so detailed.  We will start by creating the base of the clock with the drop shadow, so you can play with the setting of the drop shadow.  Mine was set to aproximately 50%.</p>
<p><img title="Clock Design with Photoshop Image 1" src="http://www.pstut.info/mactutorial/Numero-Uno.jpg" alt="clock-design-photoshop-image-1" width="593" height="201" /></p>
<p>Now, we will have to create the shiny look.  Please add noise both to your glare and your base, as it will look more official compared to the Dashboard Clock.</p>
<p><img title="Clock Design with Photoshop Image 2" src="http://www.pstut.info/mactutorial/Numero-Due.jpg" alt="clock-design-photoshop-image-2" width="593" height="201" /></p>
<p>Now, we have to create the clock itself, so take out your Eliptical Tool.  Draw in a circle on top of your glare layer, and fill it in with black.  Now add the border around the black circle, with the hex indicated below.</p>
<p><img title="Clock Design with Photoshop Image 3" src="http://www.pstut.info/mactutorial/NumeroTre.jpg" alt="clock-design-photoshop-image-3" width="593" height="201" /></p>
<p>Now we have to create the glare, so if you want to get a more detailed view, you can just follow my way.  Place the original clock design near yours, and draw a white circle inside the black circle about 1 or 2 pixels apart.  After that, grab your eraser tool and set the opacity to 75%.  Slowly brush from the top until you get something like mine.  I also added a small tiny border around the glare just to make it look a little nicer.</p>
<p><img title="Clock Design with Photoshop Image 5" src="http://www.pstut.info/mactutorial/NumeraCinque.jpg" alt="clock-design-photoshop-image-5" width="593" height="201" /></p>
<p>Now we have to add all the digits inside.  I personally liked how Arial Narrow looked on it, so I added that font, although I think that Mac&#8217;s designer used some other font that I am not familiar with or maybe just missed.</p>
<p><img src="http://www.pstut.info/mactutorial/NumeraSei.jpg" alt="" width="593" height="201" /></p>
<p>Create a white circle in the center of the digits.  Following that, draw another red circle inside the white circle&#8217;s center, so you should end up having something like this:</p>
<p><img src="http://www.pstut.info/mactutorial/NumeroSette.jpg" alt="" width="593" height="201" /></p>
<p>Now by the alignment of the arrows on the clock, use your white circle as the base and grab your pen tool to draw out one of the arrows.  Just by connecting to one side of the base of the circle and extending towards the numbered digit, and then following back to the opposite base of the circle, you can easily acheive those fancy arrows.  Repeat the steps again to create the short arrow as well.</p>
<p><img src="http://www.pstut.info/mactutorial/NumeroOtto.jpg" alt="" width="593" height="201" /></p>
<p>Now place the long arrow layer underneath the white and red circle layer.  Follow by going to the Settings of the circle and adding a drop shadow of about 75% opacity, with the color filling of black. After you have done that, grab your line tool and set the weight to 2px.  Draw a line from the red circle to the selected digit on the seconds.</p>
<p><img src="http://www.pstut.info/mactutorial/NumeroUndici.jpg" alt="" width="593" height="201" /></p>
<p>Now you&#8217;re basically done.  Just grab your text tool, and add the State and the AM/PM indicator on top.  If you&#8217;re curious about the colors, you can just take the hex of the original design.  Your final result should look like this:</p>
<p><img src="http://www.pstut.info/mactutorial/Final.jpg" alt="" width="593" height="201" /></p>
<p>Compared to:</p>
<p><img src="http://www.pstut.info/mactutorial/Example.jpg" alt="" /></p>
<p>Not bad right?Almost identical! Thank you for reading my tutorial guys. Hope you enjoyed it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/creating-the-dashboard-clock/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Calendar Icon Design &#8211; Photoshop Graphic Design Tutorial 2</title>
		<link>http://www.pstut.info/photoshop-tutorials/creating-a-calendar-icon/</link>
		<comments>http://www.pstut.info/photoshop-tutorials/creating-a-calendar-icon/#comments</comments>
		<pubDate>Sun, 15 Apr 2007 02:49:07 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Intermediate Photoshop Tutorials]]></category>
		<category><![CDATA[calendar]]></category>
		<category><![CDATA[calendar drawing]]></category>
		<category><![CDATA[calendar icon]]></category>
		<category><![CDATA[calendar image]]></category>
		<category><![CDATA[computer drawing]]></category>
		<category><![CDATA[draw a calendar]]></category>
		<category><![CDATA[drawing tutorial]]></category>
		<category><![CDATA[Photoshop design tutorials]]></category>

		<guid isPermaLink="false">http://www.pstut.info/?p=18</guid>
		<description><![CDATA[I have noticed many people design nice web icons on their blogs, so I decided to create in this Photoshop tutorial a general icon design for a Calendar.  Below is the outcome of this Photoshop tutorial: We will start with a simple step of creating the base for our icon.  Below, I have displayed the setting for my drop shadow and [...]]]></description>
			<content:encoded><![CDATA[<p>I have noticed many people design nice web icons on their blogs, so I decided to create in this Photoshop tutorial a general icon design for a Calendar.  Below is the outcome of this Photoshop tutorial:</p>
<p><span id="more-18"></span><br />
We will start with a simple step of creating the base for our icon.  Below, I have displayed the setting for my drop shadow and the base itself.</p>
<p><img title="Calendar Icon Design with Photoshop Image 1" src="http://www.pstut.info/wp-content/uploads/2007/04/firststep.jpg" alt="calendar-icon-photoshop-image-1" /><br />
<img title="Calendar Icon Design with Photoshop Image First Settings" src="http://www.pstut.info/wp-content/uploads/2007/04/firststepsettings.jpg" alt="calendar-icon-photohop-image-first-settings" width="519" height="391" /></p>
<p>The next thing we do is to create the bar where we will keep our month and year.  I have used the #ff5400 hex shown below, so if you want to achieve the same results, please use that.</p>
<p><img title="Calendar Icon Design with Photoshop Image 2" src="http://www.pstut.info/wp-content/uploads/2007/04/secondstep.jpg" alt="calendar-icon-photoshop-image-2" /></p>
<p>Create a duplicated layer, and overlay it with this hex color #ffc000.</p>
<p><img title="Calendar Icon Design with Photoshop Image 3" src="http://www.pstut.info/wp-content/uploads/2007/04/thirdstep.jpg" alt="calendar-icon-photoshop-image-3" /></p>
<p>Now using the Eraser Tool approximately the size of 65, erase the lower half of your overlaid layer.  Move down the layer two or three pixels down, and now your bar should look like this:</p>
<p><img title="Calendar Icon Design with Photoshop Image 4" src="http://www.pstut.info/wp-content/uploads/2007/04/fourthstep.jpg" alt="calendar-icon-photoshop-image-4" /></p>
<p>Create a new layer, and take your pencil.  Set its size to 1PX, and draw a line right at the top of the overlaid layer, which should look like this:</p>
<p><img title="Calendar Icon Design with Photoshop Image 5" src="http://www.pstut.info/wp-content/uploads/2007/04/fifthstep.jpg" alt="calendar-icon-photoshop-image-5" /></p>
<p>Go to your layer style, and then blending options, applying the following settings to your layer.</p>
<p><img title="Calendar Icon Design with Photoshop Image Fifth Settings" src="http://www.pstut.info/wp-content/uploads/2007/04/fifthstepsettings.jpg" alt="calendar-icon-photoshop-image-fifth-settings" width="523" height="394" /></p>
<p><img title="Calendar Icon Design with Photoshop Image 6" src="http://www.pstut.info/wp-content/uploads/2007/04/sixthstep.jpg" alt="calendar-icon-photoshop-image-6" /></p>
<p>Grab your text tool, and pick the month and year that you want it to display.  I used Arial Narrow size 12.  Check out the results below:</p>
<p><img title="Calendar Icon Design with Photoshop Image 7" src="http://www.pstut.info/wp-content/uploads/2007/04/seventhstep.jpg" alt="calendar-icon-photoshop-image-7" /></p>
<p>Apply these layer style settings to your text.  You will need to change your blending options and the drop shadow settings.</p>
<p><img title="Calendar Icon Design with Photoshop Image Text Drop Shadow" src="http://www.pstut.info/wp-content/uploads/2007/04/textdropshadow.jpg" alt="calendar-icon-photoshop-image-text-drop-shadow" width="533" height="404" /></p>
<p><img title="Calendar Icon Design with Photoshop Image Text Blending" src="http://www.pstut.info/wp-content/uploads/2007/04/textblending.jpg" alt="calendar-icon-photoshop-image-text-blending" width="528" height="406" /></p>
<p><img title="Calendar Icon Design with Photoshop Image 8" src="http://www.pstut.info/wp-content/uploads/2007/04/eightstep.jpg" alt="calendar-icon-photoshop-image-8" /></p>
<p>As you can see, the area for all the dates is quite plain, so we need to create depth for it.  Create a background with the hex color of #e3e3e3.  Please see the exact results below:</p>
<p><img title="Calendar Icon Design with Photoshop Image 9" src="http://www.pstut.info/wp-content/uploads/2007/04/ninethstep.jpg" alt="calendar-icon-photoshop-image-9" /></p>
<p>Use your Eraser Tool at aproximately the size of 185, and apply it from the top.</p>
<p><img title="Calendar Icon Design with Photoshop Image 10" src="http://www.pstut.info/wp-content/uploads/2007/04/tenthstep.jpg" alt="calendar-icon-photoshop-image-10" /></p>
<p>Now you will need to start creating the boxes for the days.  It does not have to be the exact number of days, but just to make it look a little more official, get it close to that number.  We will start by creating a column with a 1px border inside our body of the calendar.  The main color for the column will be #e8e8e8, and #c0bbbb for the border.</p>
<p><img title="Calendar Icon Design with Photoshop Image 12" src="http://www.pstut.info/wp-content/uploads/2007/04/twelvthestep.jpg" alt="calendar-icon-photoshop-image-12" /></p>
<p>Now we have to cut squares out of that rectangle, so grab your Rectangular Marquee Tool, and just cut the rectangle into small boxes.</p>
<p><img title="Calendar Icon Design with Photoshop Image 13" src="http://www.pstut.info/wp-content/uploads/2007/04/thirteenthstep.jpg" alt="calendar-icon-photoshop-image-13" /></p>
<p>Now set the background to white, and duplicate the layers four times, and in the sixth column, make the style as your original column was.</p>
<p><img title="Calendar Icon Design with Photoshop Image 14" src="http://www.pstut.info/wp-content/uploads/2007/04/fourteenthstep.jpg" alt="calendar-icon-photoshop-image-14" /></p>
<p>Just to make this look a little fancy, make one of the boxes shaded with orange, and outline it with a more reddish orange.  I used for the background #ffab6c, and for the border #ff6200.</p>
<p><img title="Calendar Icon Design with Photoshop Image 15" src="http://www.pstut.info/wp-content/uploads/2007/04/fifteenthstep.jpg" alt="calendar-icon-photoshop-image-15" /></p>
<p>You are basically done.  You can always mess around with the smaller sizes, and see how it looks.  My final result can be seen in the previous image, and right below:</p>
<p><img title="Calendar Icon Design with Photoshop Image Final" src="http://www.pstut.info/wp-content/uploads/2007/04/final.jpg" alt="calendar-icon-photoshop-image-final" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pstut.info/photoshop-tutorials/creating-a-calendar-icon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  www.pstut.info/tag/computer-drawing/feed/ ) in 0.78930 seconds, on Feb 8th, 2012 at 7:55 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Feb 15th, 2012 at 7:55 am UTC -->
