<?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>Webdevtuts &#187; mockup</title>
	<atom:link href="http://www.webdevtuts.net/tag/mockup/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webdevtuts.net</link>
	<description>Making tutorials fun and easy!</description>
	<lastBuildDate>Mon, 23 Jan 2012 11:36:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>4 quick tips to help you create a better mockup/design in photoshop</title>
		<link>http://www.webdevtuts.net/articles/4-quick-tips-to-help-you-create-a-better-mockupdesign-in-photoshop/</link>
		<comments>http://www.webdevtuts.net/articles/4-quick-tips-to-help-you-create-a-better-mockupdesign-in-photoshop/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 04:32:45 +0000</pubDate>
		<dc:creator>Marcell Purham</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Quicktips]]></category>
		<category><![CDATA[article]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[mockup]]></category>

		<guid isPermaLink="false">http://www.webdevtuts.net/?p=663</guid>
		<description><![CDATA[When Designing a website in Photoshop you should always try to make the mock-up look very similar to the final coded version.  Some designers get very lazy and try to create a design then figure out everything... <a href="http://www.webdevtuts.net/articles/4-quick-tips-to-help-you-create-a-better-mockupdesign-in-photoshop/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When Designing a website in Photoshop you should always try to make the mock-up look very similar to the final coded version.  Some designers get very lazy and try to create a design then figure out everything while they&#8217;re coding the real layout. In this Article I will give you 10 tips to designing a professional looking website mockup in Photoshop.</p>
<h2>Use Guides</h2>
<p>Whenever You start a new website design and Photoshop I recommend that you Always you Photoshop guide lines. Guide lines help you keep your website centered and all of the elements inside of it align. I know there are newbies out there who just open up Photoshop and design and never turn on their guide lines. </p>
<p>To see your guide lines go to press <b>ctrl+;</b> and for mac I believe</b> it is <b>cmd+;</b><br />
<img class="aligncenter" src="https://s3.amazonaws.com/webdevtuts/uploads/2009/12/gudies.jpg" alt="guides"/></p>
<h2>Use real font for Text</h2>
<p>This is for all the beginners! I know when most people first start designing websites in Photoshop they often try to use fonts that are not supported on other browsers. It&#8217;s ok to use other fonts for logo&#8217;s and heading but for real text it is good to use some of the supported well known fonts. You&#8217;re probably thinking how do I know which font works for all computers. Well the answer to that is a font list from <a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html" target="_blank">Ampsoft</a> and they give a pretty well explain explanation on which fonts you should choose, so make sure you check out their article.</p>
<h2>Use ruler</h2>
<p>Photoshop rulers are a <b>must</b>! Whenever you start a design you should always have your ruler grid turned on. Ruler grid comes in handy for aligning your website, text, images, logo&#8217;s and other web elements. Without your ruler your design would be uneven and margins and padding would not equal each other.<br />
<img class="aligncenter" src="https://s3.amazonaws.com/webdevtuts/uploads/2009/12/ruler.jpg" alt="ruler"/></p>
<h2>Canvas Size</h2>
<p>Starting a new design can be very frustrating for some designers. The reason it can be very frustrating sometimes is because you do not know what size canvas you should start with or create. I normally start my design using 960px width. I think 960 works the best considering it can fit all website screens. The graph below shows what screen size most people use as of August 29 2009.<br />
<img class="aligncenter" src="http://farm4.static.flickr.com/3500/3992052978_3b090796af.jpg" alt="Website size"></p>
<p>All of the tips listed above all go hand and hand. Each tip should be took in consideration before or during every design process. I know this article was very short but I hoped you have learned something from it. I will try to make longer post in the future that are more valuable.  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdevtuts.net/articles/4-quick-tips-to-help-you-create-a-better-mockupdesign-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced
Content Delivery Network via Amazon Web Services: S3: webdevtuts.s3.amazonaws.com

Served from: www.webdevtuts.net @ 2012-02-04 03:07:01 -->
