<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>[Re]Encoded.com</title>
	
	<link>http://www.reencoded.com</link>
	<description>Web Design and Development Tips, Tutorials and [Re]lated [Re]sources</description>
	<lastBuildDate>Wed, 10 Mar 2010 16:14:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/reencoded" /><feedburner:info uri="reencoded" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Projecting Professionalism: 5 Ways to Make Your Business Seem Bigger Than it Is</title>
		<link>http://feedproxy.google.com/~r/reencoded/~3/NkADzr8_J3U/</link>
		<comments>http://www.reencoded.com/2010/03/10/projecting-professionalism-5-ways-to-make-your-business-seem-bigger-than-it-is/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 16:11:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Various]]></category>

		<guid isPermaLink="false">http://www.reencoded.com/?p=5206</guid>
		<description><![CDATA[Big is good. Despite the common assumption that small companies are the best when it comes to customer and client service, many businesses look the other way when selecting a service provider or contractor. Rather than selecting based on individual attention and customer care, they look for other signals of approval – the ability to [...]


Related posts:<ol><li><a href='http://www.reencoded.com/2010/01/24/6-ppc-cpm-and-seo-marketing-tips-for-your-service-business/' rel='bookmark' title='Permanent Link: 6 PPC, CPM, and SEO Marketing Tips for Your Service Business'>6 PPC, CPM, and SEO Marketing Tips for Your Service Business</a> <small>Online entrepreneurs have an incredibly wide range of marketing options...</small></li><li><a href='http://www.reencoded.com/2009/12/24/5-ways-to-minimize-project-proposals-cut-down-management-and-focus-on-freelance-work/' rel='bookmark' title='Permanent Link: 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work'>5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work</a> <small>Working online can be great for generating income without high...</small></li><li><a href='http://www.reencoded.com/2010/03/08/top-6-mistakes-that-newbie-designers-and-online-entrepreneurs-make/' rel='bookmark' title='Permanent Link: Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make'>Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make</a> <small>It&#8217;s not uncommon to hear stories of large-scale online business...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>Big is good. Despite the common assumption that small companies are the best when it comes to customer and client service, many businesses look the other way when selecting a service provider or contractor. Rather than selecting based on individual attention and customer care, they look for other signals of approval – the ability to work with large clients, a proven track record, and the structure to support large assignments and long-term contracts.</p>
<p><a title="expanding business" href="http://www.flickr.com/photos/silvertreeconsulting/3584743995/" target="_blank"><img class="alignnone size-full wp-image-5208" title="expand_business" src="http://www.reencoded.com/wp-content/uploads/2010/03/expand_business1.jpg" alt="expand_business" width="327" height="237" /></a><br />
<a rel="nofollow" href="http://www.flickr.com/photos/silvertreeconsulting/3584743995/">Image Source</a></p>
<p>For a small boutique provider, it can seem nearly impossible to get a foot in the door. The big guns are looking for companies like <em>them</em> – large, powerful, and <em>very </em>experienced – but in order to become one and gain access to their contracts, you need to become one yourself. For some small businesses, that means acquiring additional overheads and growing in size, even if its just perceived size for some of your clients and customers.</p>
<p>These five tips can help you transform your business&#8217;s image from small and micro-focused to large and powerful. With a few small additions, new strategies, and client interaction changes, these tips could land you ultra-valuable clients and customer contacts, long-term contracts, and the experience required to market yourself to the biggest companies in the world. Apply one, two, or all five, and watch your business&#8217;s value grow in front of you.</p>
<p><span id="more-5206"></span></p>
<h4>1. Use a virtual assistant for emails and task management.</h4>
<p>When you run a business that operates entirely online, in-person employees for administrative tasks just result in higher overheads and greater workloads. A virtual assistant and remote employees can save your business money – virtual assistants are typically paid per-task or on contract – and at the same time dramatically increase productivity.</p>
<p>On the image side, employing a virtual assistant can be a <em>major</em> asset for your business. Clients are wowed by size, and having a personal assistant or extra employee can result in some real authority when searching for large clients. Want to make your business seem bigger and more powerful for client acquisition? Have your virtual assistant handle an individual email address (<a href="mailto:sales@company">sales@company</a> or <a href="mailto:support@company">support@company</a> are good choices) and demonstrate your business&#8217;s size to prospective clients.</p>
<h4>2. If you list a phone number, add an auto-directory.</h4>
<p>Almost all phone companies offer navigation and directory systems for a small fee. For those that don&#8217;t know, that&#8217;s the “press one for&#8230;” system that pops up whenever you call a major company or well-known business. While some consumers <em>hate</em> dealing with automated calling directories on the phone, most businesses see them as a sign of authority and competence.</p>
<p>If you&#8217;re not a fan of your own voice, most phone providers will be able to provide a simple recording for your phone system. Even if you&#8217;re only routing callers to sales, technical support, or your independent phone line, a simple split-option phone system can make your business appear more professional and valuable than it otherwise would.</p>
<h4>3. <em>Tell</em> your clients that you&#8217;re working with other employees.</h4>
<p>The smartest thing any business can do is tell you that <em>they</em> don&#8217;t work to promote you, their <em>team</em> does. Large clients value the type of organization that&#8217;s present in their companies – teams, interlinked divisions, and groups of people working towards a relatively common goal. By telling your clients that you&#8217;re working with a team on their projects, you increase support and boost trust levels.</p>
<p>Better yet, <em>build</em> a team that gives your clients amazing service. Whether it&#8217;s a simple team of contractors for micro-orders and small overflow work, or a large team for corporate clients and top-ranked business in your area, building a valuable team can boost your per-project income and help you gain more big clients in the future.</p>
<h4>4. Expand your web presence.</h4>
<p>Say you&#8217;re a web design company that&#8217;s also offering basic SEO services and internet marketing strategies for clients. Seems smart to list them through the same website, right? While it might be best for your rankings and client acquisition goals to list them all through one website, it can actually be a poor strategy for hooking major clients and long-term corporate partners.</p>
<p>Why? Because with <em>one</em> website, you&#8217;re limited to marketing as a small business. However, with a small <em>network</em> of business websites, each one offering a slightly different service and promoting a different aspect of your service business, you&#8217;ll be able to market yourself to companies and prospective clients as a <em>major</em> provider, not just a small fish.</p>
<h4>5. Become an expert in your niche.</h4>
<p>Posting on blogs, business publications, and local newsletters gives you one of the most important things in business: authority. When looking for large clients and long-term partners, authority is one of the most important things available to your business. It fuels negotiation, allows you to command high prices, and makes it possible to get your foot – or in this case, your email – in the door with major companies.</p>
<p>So get out there and write, be interviewed, and provide content. There&#8217;s no way to become an expert but to put in the time and effort, promote yourself, and become one on your own. Contact bloggers in your niche, get in touch with major websites and offer your services, and make yourself known. Become an expert and your business becomes a brand, your clients become more valuable, and your total business income skyrockets.</p>


<p>Related posts:<ol><li><a href='http://www.reencoded.com/2010/01/24/6-ppc-cpm-and-seo-marketing-tips-for-your-service-business/' rel='bookmark' title='Permanent Link: 6 PPC, CPM, and SEO Marketing Tips for Your Service Business'>6 PPC, CPM, and SEO Marketing Tips for Your Service Business</a> <small>Online entrepreneurs have an incredibly wide range of marketing options...</small></li><li><a href='http://www.reencoded.com/2009/12/24/5-ways-to-minimize-project-proposals-cut-down-management-and-focus-on-freelance-work/' rel='bookmark' title='Permanent Link: 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work'>5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work</a> <small>Working online can be great for generating income without high...</small></li><li><a href='http://www.reencoded.com/2010/03/08/top-6-mistakes-that-newbie-designers-and-online-entrepreneurs-make/' rel='bookmark' title='Permanent Link: Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make'>Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make</a> <small>It&#8217;s not uncommon to hear stories of large-scale online business...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p><img src="http://feeds.feedburner.com/~r/reencoded/~4/NkADzr8_J3U" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.reencoded.com/2010/03/10/projecting-professionalism-5-ways-to-make-your-business-seem-bigger-than-it-is/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.reencoded.com/2010/03/10/projecting-professionalism-5-ways-to-make-your-business-seem-bigger-than-it-is/</feedburner:origLink></item>
		<item>
		<title>Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make</title>
		<link>http://feedproxy.google.com/~r/reencoded/~3/_q_9HjaJZTY/</link>
		<comments>http://www.reencoded.com/2010/03/08/top-6-mistakes-that-newbie-designers-and-online-entrepreneurs-make/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 17:16:56 +0000</pubDate>
		<dc:creator>Mathew</dc:creator>
				<category><![CDATA[Various]]></category>

		<guid isPermaLink="false">http://www.reencoded.com/?p=5193</guid>
		<description><![CDATA[It&#8217;s not uncommon to hear stories of large-scale online business failures. From major companies – anyone remember Webvan? – to small design firms and marketing agencies, failure is a part of doing business. With the low costs of starting and operating a business online, many businesses that would fail under other circumstances end up getting [...]


Related posts:<ol><li><a href='http://www.reencoded.com/2010/01/21/from-1-client-to-20-expanding-your-online-service-business/' rel='bookmark' title='Permanent Link: From 1 Client to 20: Expanding Your Online Service Business'>From 1 Client to 20: Expanding Your Online Service Business</a> <small>Online freelancers and entrepreneurs have a valuable business asset that...</small></li><li><a href='http://www.reencoded.com/2009/06/14/how-to-set-up-an-online-business/' rel='bookmark' title='Permanent Link: How to set up an Online Business'>How to set up an Online Business</a> <small>Staring a business specially an Online Business is not a...</small></li><li><a href='http://www.reencoded.com/2009/12/24/5-ways-to-minimize-project-proposals-cut-down-management-and-focus-on-freelance-work/' rel='bookmark' title='Permanent Link: 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work'>5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work</a> <small>Working online can be great for generating income without high...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s not uncommon to hear stories of large-scale online business failures. From major companies – anyone remember <a rel="nofollow" href="http://en.wikipedia.org/wiki/Webvan" target="_blank">Webvan</a>? – to small design firms and marketing agencies, failure is a part of doing business. With the low costs of starting and operating a business online, many businesses that would fail under other circumstances end up getting started. Sometimes they grow into leading enterprises, but more often than not, they don&#8217;t.</p>
<p style="text-align: center"><img class="size-full wp-image-5196 aligncenter" src="http://www.reencoded.com/wp-content/uploads/2010/03/design_mistakes1.jpg" alt="design_mistakes" width="271" height="250" /></p>
<p style="text-align: left;">We&#8217;ve identified the six most common mistakes that newbie designers, entrepreneurs, and online businesspeople make when they start their own online businesses. If you&#8217;re just starting out online yourself, use this article as a template of what <em>not</em> to do in your business. The best business lessons are often learned from <em>other</em> people&#8217;s failures, and these six should give you a good foundation for creating a long-term online business.<br />
<span id="more-5193"></span></p>
<h4>1. Expanding Too Fast.</h4>
<p>You started a business, saw a relatively large amount of success, and thought that the bigger you grew, the bigger the money would get. Unfortunately, the infinite growth model rarely works for online businesses, particularly service businesses which require a lot of manual upkeep and client-based attention.</p>
<p>Whenever your business has the potential to expand, think through the situation as a whole. Boosting your client count or product&#8217;s reach could bring in new income, but it could also create new expenses and a <em>lot</em> of new headaches. Business success is about weighing the ups and downs – sometimes expansion brings in more of one than the other. Plan accordingly.</p>
<h4>2. Overestimating Their Influence.</h4>
<p>Control is an important factor in business. Meetings tend to move according to the most influential person – the guiding presence in the meeting and the most important factor in negotiation. As a new entrepreneur it&#8217;s easy to overestimate your influence amongst clients, business partners, and potential collaborators.</p>
<p>It&#8217;s not so much ego as it is a misunderstanding. Business <em>requires</em> a certain degree of pushiness, but too much ends up poisoning negotiations and potentially alienating clients and customers. Whenever you&#8217;re reaching out to another businessperson, client, or prospective customer, treat them like a guest and remember that <em>you&#8217;re</em> asking them for something, not the other way around.</p>
<h4>3. Taking on Too Much Work at Once.</h4>
<p>This error is most common amongst designers, but results-based business of all forms are susceptible to it. In an effort to boost revenue and increase per-client profits, many service businesses simply bite off more than they can chew. Employees are pushed to the limit, deadlines are stretched, and many clients end up unhappy.</p>
<p>It&#8217;s hard to suggest anything <em>other</em> than this behaviour, as risk like this is important for a successful company. However, whenever possible it&#8217;s best to be in control of your risk. Rather than giving hundreds of clients or customers second-class treatment, aim for top-level treatment with a smaller sample of people. Position yourself as a premium provider and you&#8217;ll end up with a more fluid, controllable, and well-rounded business.</p>
<h4>4. Pricing Themselves Too Low, or Too High.</h4>
<p>Charge people too much and you&#8217;ll fail to gain clients. Charge too little and you&#8217;ll end up overwhelmed with low-paying work and unable to cope with the quantity. Setting prices as a service business is a balancing act, and it&#8217;s one that can take quite a lot of time to adjust to. Whenever possible, look at your business as a <em>premium</em> product. Price yourself above competitors to ensure that your work is profitable and worthwhile, but don&#8217;t price yourself in a range where you&#8217;re unable to gain valuable client referrals and long-term projects.</p>
<h4>5. Ignoring Professionalism.</h4>
<p>Online businesses are great in that they allow entrepreneurs to work from their living rooms, and limiting in that they insulate people from the corporate world. As a designer, service provider, or B2B business, you&#8217;re bound to work with some major companies and multinational corporations. Pitching, contacting, and keeping in touch with clients requires a fine touch, and a level of professionalism that&#8217;s often lacking amongst online businesses.</p>
<p>Invest in what&#8217;s required to get your foot in the door. If that&#8217;s nice clothes for a business meeting, it could be worth it. If it&#8217;s a customer and client support employee for providing the impression of a big company, take it. If there&#8217;s a way for you to appear more professional and experienced, do almost anything possible to achieve it.</p>
<h4>6. Worrying Too Much.</h4>
<p>Let&#8217;s face it, as a newbie designer or businessperson, the natural reaction is to respond to things with caution and temperance. Sometimes business opportunities come in, and rather than reacting to them with potential planning and long-term thinking, newbie designers think that all which could go <em>wrong</em> because of them.</p>
<p>This type of thinking is good for running a low-risk business, but ineffective for running an ultra-successful business. Risk is a <em>very</em> important part of business, and letting it control your thinking leaves you stuck at a standstill. Sometimes it&#8217;s best to apologize for mistakes – whether to clients, customers, or business partners – than to beg for the opportunity to do something.</p>


<p>Related posts:<ol><li><a href='http://www.reencoded.com/2010/01/21/from-1-client-to-20-expanding-your-online-service-business/' rel='bookmark' title='Permanent Link: From 1 Client to 20: Expanding Your Online Service Business'>From 1 Client to 20: Expanding Your Online Service Business</a> <small>Online freelancers and entrepreneurs have a valuable business asset that...</small></li><li><a href='http://www.reencoded.com/2009/06/14/how-to-set-up-an-online-business/' rel='bookmark' title='Permanent Link: How to set up an Online Business'>How to set up an Online Business</a> <small>Staring a business specially an Online Business is not a...</small></li><li><a href='http://www.reencoded.com/2009/12/24/5-ways-to-minimize-project-proposals-cut-down-management-and-focus-on-freelance-work/' rel='bookmark' title='Permanent Link: 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work'>5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work</a> <small>Working online can be great for generating income without high...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p><img src="http://feeds.feedburner.com/~r/reencoded/~4/_q_9HjaJZTY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.reencoded.com/2010/03/08/top-6-mistakes-that-newbie-designers-and-online-entrepreneurs-make/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.reencoded.com/2010/03/08/top-6-mistakes-that-newbie-designers-and-online-entrepreneurs-make/</feedburner:origLink></item>
		<item>
		<title>10 Useful and Time-Saving CSS Grid-Layout Generators</title>
		<link>http://feedproxy.google.com/~r/reencoded/~3/PGxDWQPWgrU/</link>
		<comments>http://www.reencoded.com/2010/03/02/10-useful-and-time-saving-css-grid-layout-generators/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 16:17:06 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[layout]]></category>

		<guid isPermaLink="false">http://www.reencoded.com/?p=5150</guid>
		<description><![CDATA[CSS is considered the &#8220;back-bone&#8221; of a website. It structures, helps embed, and styles elements. Now, if we were to code a CSS layout by hand, it would take us an unneeded amount of time that we could be putting towards other areas of our designs.
With somewhat similar concepts to the all-famous button, background, and [...]


Related posts:<ol><li><a href='http://www.reencoded.com/2010/02/26/how-to-create-an-elegant-web-layout-in-photoshop/' rel='bookmark' title='Permanent Link: How to create an elegant web layout in Photoshop'>How to create an elegant web layout in Photoshop</a> <small>In this tutorial I will show you how to create...</small></li><li><a href='http://www.reencoded.com/2009/09/21/how-to-create-professional-looking-website-layout-with-photoshop/' rel='bookmark' title='Permanent Link: How To Create Professional Looking Website Layout With Photoshop'>How To Create Professional Looking Website Layout With Photoshop</a> <small>Want to design a professional looking website template using Photoshop....</small></li><li><a href='http://www.reencoded.com/2009/09/14/online-stripe-background-generator-stripemania/' rel='bookmark' title='Permanent Link: Online Stripe Background Generator : Stripemania'>Online Stripe Background Generator : Stripemania</a> <small> Trying out your photoshop skills or searching for a...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>CSS is considered the &#8220;back-bone&#8221; of a website. It structures, helps embed, and styles elements. Now, if we were to code a CSS layout by hand, it would take us an unneeded amount of time that we could be putting towards other areas of our designs.</p>
<p>With somewhat similar concepts to the all-famous button, background, and favicon generators, today we present you with 10 Useful and Time-Saving CSS Grid-Layout Generators that will save you mass amounts of time and help you eliminate some repetitive coding.</p>
<h4>Blueprint Grid CSS Generator</h4>
<p><a title="css grid-layout generators" href="http://bgg.kematzy.com/" target="_blank"><img class="alignnone size-full wp-image-5191" title="css_grid_generator" src="http://www.reencoded.com/wp-content/uploads/2010/02/css_grid_generator1.jpg" alt="css_grid_generator" width="550" height="413" /></a></p>
<p>This tool will help you generate more flexible versions of <a href="http://code.google.com/p/blueprintcss/">Blueprint&#8217;s</a> <tt>grid.css</tt> and <tt>compressed.css</tt> and <tt>grid.png</tt> files. Whether you prefer <strong>8</strong>, <strong>10</strong>,<strong>16</strong> or <strong>24</strong> columns in your design, this generator now enables you that flexibility with <a href="http://code.google.com/p/blueprintcss/">Blueprint</a>.<br />
<span id="more-5150"></span></p>
<h4>Grid Layout Generator by netProtozo</h4>
<p><a title="css grid-layout generators" href="http://netprotozo.com/grid/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-2.jpg" alt="" /></a></p>
<p>The Grid Layout Generator by netProtozo is very easy to use. You can use the form to build a grid, then be able to grab the generated CSS to use in building your layout. Also, use a snap shot of the grid in photoshop to help you tighten up your design. By doing so, you&#8217;ll find that you&#8217;ll be able to pretty much match your design using the CSS provided.</p>
<h4>Grid System Generator</h4>
<p><a title="css grid-layout generators" href="http://www.gridsystemgenerator.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-3.jpg" alt="" /></a></p>
<p>The grid system generator will create fixed grid systems in valid CSS/XHMTL form for rapid prototyping, development, and production environments. It also creates a background file that you can use in Frameworks, Illustrator, Photoshop, and more to aid in prototyping and design.</p>
<h4>YUI: CSS Grid Builder</h4>
<p><a title="css grid-layout generators" href="http://developer.yahoo.com/yui/grids/builder/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-4.jpg" alt="" /></a></p>
<p>Yahoo&#8217;s grid builder is one of the easiest to interact with.  The side panel to the left lets you edit the width of the grid, create columns, rows, and set fixed sizes. The changes you make take place in HTML format and you can hit the Show Code button and copy/paste it wherever you&#8217;d like.</p>
<h4>Variable Grid System</h4>
<p><a title="css grid-layout generators" href="http://www.spry-soft.com/grids/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-5.jpg" alt="" /></a></p>
<p>The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.</p>
<h4>YAML Builder</h4>
<p><a title="css grid-layout generators" href="http://builder.yaml.de/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-6.jpg" alt="" /></a></p>
<p>The YAML Builder is a tool for visually creating YAML-based CSS layouts.  It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates. Not quite WYSIWYG, but close!</p>
<h4>Grid Designer</h4>
<p><a title="css grid-layout generators" href="http://grid.mindplay.dk/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-7.jpg" alt="" /></a></p>
<p>You can get started generating grids by Filling in the number of columns, total width, gutters and margin widths, all specified in pixels &#8211; then press the design button. You can even use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.</p>
<h4>CSS Layout Generator by CSSPortal</h4>
<p><a title="css grid-layout generators" href="http://www.cssportal.com/generators/layout.htm" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-8.jpg" alt="" /></a></p>
<p>This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.</p>
<h4>Firdamatic</h4>
<p><a title="css grid-layout generators" href="http://www.wannabegirl.org/firdamatic/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-9.jpg" alt="" /></a></p>
<p>Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support.</p>
<h4>CSSCreator.com</h4>
<p><a title="css grid-layout generators" href="http://csscreator.com/version2/pagelayout.php" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/generatecss-10.jpg" alt="" /></a></p>
<p>This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.</p>


<p>Related posts:<ol><li><a href='http://www.reencoded.com/2010/02/26/how-to-create-an-elegant-web-layout-in-photoshop/' rel='bookmark' title='Permanent Link: How to create an elegant web layout in Photoshop'>How to create an elegant web layout in Photoshop</a> <small>In this tutorial I will show you how to create...</small></li><li><a href='http://www.reencoded.com/2009/09/21/how-to-create-professional-looking-website-layout-with-photoshop/' rel='bookmark' title='Permanent Link: How To Create Professional Looking Website Layout With Photoshop'>How To Create Professional Looking Website Layout With Photoshop</a> <small>Want to design a professional looking website template using Photoshop....</small></li><li><a href='http://www.reencoded.com/2009/09/14/online-stripe-background-generator-stripemania/' rel='bookmark' title='Permanent Link: Online Stripe Background Generator : Stripemania'>Online Stripe Background Generator : Stripemania</a> <small> Trying out your photoshop skills or searching for a...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p><img src="http://feeds.feedburner.com/~r/reencoded/~4/PGxDWQPWgrU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.reencoded.com/2010/03/02/10-useful-and-time-saving-css-grid-layout-generators/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://www.reencoded.com/2010/03/02/10-useful-and-time-saving-css-grid-layout-generators/</feedburner:origLink></item>
		<item>
		<title>15 Free And Useful Typography Tools For Web Designers</title>
		<link>http://feedproxy.google.com/~r/reencoded/~3/dOP1dEb1-go/</link>
		<comments>http://www.reencoded.com/2010/02/28/15-free-and-useful-typography-tools-for-web-designers/#comments</comments>
		<pubDate>Sun, 28 Feb 2010 14:50:22 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[type]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.reencoded.com/?p=5162</guid>
		<description><![CDATA[Typography is one of the most important components that make a design complete. This aspect of your design can effectively engage users when used properly. It can also help you enhance the visual appearance of your website, print/graphic designs, and more.
Here we have 15 Free and Useful Typography Tools for Web Designers that&#8217;ll help you [...]


Related posts:<ol><li><a href='http://www.reencoded.com/2008/07/28/55-free-resources-for-web-designers/' rel='bookmark' title='Permanent Link: 56 Free Resources for Web Designers'>56 Free Resources for Web Designers</a> <small> The following is a collection of free resources for web designers....</small></li><li><a href='http://www.reencoded.com/2009/02/23/9-websites-to-create-free-logos-online/' rel='bookmark' title='Permanent Link: 9 Websites to create Free Logos Online'>9 Websites to create Free Logos Online</a> <small>We have compiled a list of 9 FREE websites that...</small></li><li><a href='http://www.reencoded.com/2009/12/27/fresh-free-fonts/' rel='bookmark' title='Permanent Link: Excellent Fresh Free Fonts For Designers'>Excellent Fresh Free Fonts For Designers</a> <small>Fresh fonts are always a need for graphic and web...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>Typography is one of the most important components that make a design complete. This aspect of your design can effectively engage users when used properly. It can also help you enhance the visual appearance of your website, print/graphic designs, and more.</p>
<p>Here we have 15 Free and Useful Typography Tools for Web Designers that&#8217;ll help you in a variety of ways. Alright, now lets begin exploring these tools.</p>
<h2>FontStructor</h2>
<p><a rel="nofollow" href="http://fontstruct.fontshop.com/sign_in/fontstructor" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-1.jpg" alt="typography tools for designers" /></a></p>
<p>FontStuctor is an easy to use free web-based typography tool that allows you to create your own fonts. It has a beautiful interface that is simple to interact with.</p>
<p><span id="more-5162"></span></p>
<h2>CSS Type Set</h2>
<p><a rel="nofollow" href="http://www.csstypeset.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-2.jpg" alt="typography tools for designers" /></a></p>
<p>CSS Type Set is a wonderful tool that lets you visually and actively style your text that it can generate efficient CSS.</p>
<h2>WhatTheFont</h2>
<p><a title="my fonts" href="http://new.myfonts.com/WhatTheFont/" target="_blank"><img class="alignnone size-full wp-image-5186" title="myfonts" src="http://www.reencoded.com/wp-content/uploads/2010/02/myfonts.jpg" alt="myfonts" width="550" height="396" /></a></p>
<p>WhatTheFont lets you interactively scan a URL or upload an image that has a font(s) and it will then tell you what the font is. It&#8217;s a great way to find out what fonts other designers are using to create amazing designs.</p>
<h2>Font Burner</h2>
<p><a title="font burner" rel="nofollow" href="http://www.fontburner.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-4.jpg" alt="typography tools for designers" /></a></p>
<p>Font Burner allows you a simple and efficient block of code so that you can embed in your webpages giving the option to convert your headlines to whatever possible font you choose.</p>
<h2>PXtoEM</h2>
<p><a rel="nofollow" href="http://pxtoem.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-5.jpg" alt="typography tools for designers" /></a></p>
<p>PXtoEM is a calculator that does conversions of pixels, em’s, points, and percentages.</p>
<h2>Typetester</h2>
<p><a rel="nofollow" href="http://www.typetester.org/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-6.jpg" alt="typography tools for designers" /></a></p>
<p>Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.</p>
<h2>Font Tester</h2>
<p><a rel="nofollow" href="http://www.fonttester.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-7.jpg" alt="typography tools for designers" /></a></p>
<p>Font Tester is a free online font comparison tool. It allows you to easily <a href="./help/quick_overview_of_comparing_fonts.html">preview and compare</a> different fonts side by side with various <a href="./help/css_properties.html">CSS font styles</a> applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.</p>
<h2>TypeNavigator</h2>
<p><a rel="nofollow" href="http://typenav.fontshop.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-8.jpg" alt="typography tools for designers" /></a></p>
<p>TypeNavigator is the world’s first interactive visual font search system.</p>
<h2>Typechart</h2>
<p><a rel="nofollow" href="http://www.typechart.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-9.jpg" alt="typography tools for designers" /></a></p>
<p>Typechart allows you to navigate through, preview and compare web typography and then grab the CSS and embed it into your web designs.</p>
<h2>Flipping Typical</h2>
<p><a rel="nofollow" href="http://flippingtypical.com/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-10.jpg" alt="typography tools for designers" /></a></p>
<p>Flipping Typical is a smart way to explore the popular typefaces you have on your computer.</p>
<h2>CSS-Typoset Matrix</h2>
<p><a rel="nofollow" href="http://www.jan-quickels.de/tools-web-typography/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-11.jpg" alt="typography tools for designers" /></a></p>
<p>CSS-Typoset Matrix actively displays font sizes, line-heights, and margins for a variety of base font sizes. It can also output the CSS code depending on the data you insert.</p>
<h2>Linotype Font Finder</h2>
<p><a rel="nofollow" href="http://www.linotype.com/fontidentifier.html" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-12.jpg" alt="typography tools for designers" /></a></p>
<p>Answer a few simple questions and the artificial intelligence of the FontIdentifier will help you find your font.</p>
<h2>Identifont</h2>
<p><a rel="nofollow" href="http://www.identifont.com/index.html" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-13.jpg" alt="typography tools for designers" /></a></p>
<p>The Identifont expert system enables you to identify a typeface from a sample by answering a series of questions about key characteristics.</p>
<h2>Serif Font Identification Guide</h2>
<p><a rel="nofollow" href="http://www.bowfinprintworks.com/SerifGuide/serifsearch.php" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-14.jpg" alt="typography tools for designers" /></a></p>
<p>Serif Font Identification Guide is an incredible visual font identification application that displays various images allowing you to choose from whichever match the font you’re trying to recognize the closest.</p>
<h2>Font Picker</h2>
<p><a rel="nofollow" href="http://richardsprojects.co.uk/products/font-picker/" target="_blank"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/typetool-15.jpg" alt="" /></a></p>
<p>Font Picker lets you browse all the fonts available on your computer. You&#8217;re able to quickly view a font that you may want to use in a design, or a project. It&#8217;s quite useful.</p>


<p>Related posts:<ol><li><a href='http://www.reencoded.com/2008/07/28/55-free-resources-for-web-designers/' rel='bookmark' title='Permanent Link: 56 Free Resources for Web Designers'>56 Free Resources for Web Designers</a> <small> The following is a collection of free resources for web designers....</small></li><li><a href='http://www.reencoded.com/2009/02/23/9-websites-to-create-free-logos-online/' rel='bookmark' title='Permanent Link: 9 Websites to create Free Logos Online'>9 Websites to create Free Logos Online</a> <small>We have compiled a list of 9 FREE websites that...</small></li><li><a href='http://www.reencoded.com/2009/12/27/fresh-free-fonts/' rel='bookmark' title='Permanent Link: Excellent Fresh Free Fonts For Designers'>Excellent Fresh Free Fonts For Designers</a> <small>Fresh fonts are always a need for graphic and web...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p><img src="http://feeds.feedburner.com/~r/reencoded/~4/dOP1dEb1-go" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.reencoded.com/2010/02/28/15-free-and-useful-typography-tools-for-web-designers/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://www.reencoded.com/2010/02/28/15-free-and-useful-typography-tools-for-web-designers/</feedburner:origLink></item>
		<item>
		<title>How to create an elegant web layout in Photoshop</title>
		<link>http://feedproxy.google.com/~r/reencoded/~3/Lb5q2w9NyIk/</link>
		<comments>http://www.reencoded.com/2010/02/26/how-to-create-an-elegant-web-layout-in-photoshop/#comments</comments>
		<pubDate>Fri, 26 Feb 2010 17:01:47 +0000</pubDate>
		<dc:creator>Ionut</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[photoshop tutorial]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.reencoded.com/?p=5132</guid>
		<description><![CDATA[In this tutorial I will show you how to create an elegant web layout in Photoshop using thin lines, subtle gradients and beautiful typography.
Final Result
Have a look at the layout that we’ll be creating in this tutorial.


Step 1 &#8211; The 960 Grid System
First, download the 960 Grid System and  unzip the archive.  Then [...]


Related posts:<ol><li><a href='http://www.reencoded.com/2009/09/21/how-to-create-professional-looking-website-layout-with-photoshop/' rel='bookmark' title='Permanent Link: How To Create Professional Looking Website Layout With Photoshop'>How To Create Professional Looking Website Layout With Photoshop</a> <small>Want to design a professional looking website template using Photoshop....</small></li><li><a href='http://www.reencoded.com/2008/08/08/photoshop-tutorial-create-an-abstract-background/' rel='bookmark' title='Permanent Link: Photoshop Tutorial:  Create an Abstract Background'>Photoshop Tutorial:  Create an Abstract Background</a> <small>With abstract layouts being a very hot design trend, creating...</small></li><li><a href='http://www.reencoded.com/2008/08/04/tutorial-creating-a-grunge-effect-using-only-photoshop/' rel='bookmark' title='Permanent Link: Tutorial: Creating a Grunge Effect Using Only Photoshop'>Tutorial: Creating a Grunge Effect Using Only Photoshop</a> <small>Right now, artistic designs are very hot! With CSS becoming...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>In this tutorial I will show you how to create an elegant web layout in Photoshop using thin lines, subtle gradients and beautiful typography.</p>
<h3>Final Result</h3>
<p>Have a look at the layout that we’ll be creating in this tutorial.</p>
<p><a title="create an elegent web layout in photoshop" href="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-large.jpg" target="_blank"><img class="alignnone size-full wp-image-5181" title="final-result-small" src="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-small1.jpg" alt="final-result-small" width="550" height="655" /></a><br />
<span id="more-5132"></span></p>
<h3>Step 1 &#8211; The 960 Grid System</h3>
<p>First, download the <a href="http://www.960.gs">960 Grid System</a> and  unzip the archive.  Then go to the &#8220;photoshop&#8221; folder (you will find it inside the &#8220;templates&#8221; folder) and open the &#8220;960_grid_24_col.psd&#8221; file in Photoshop. This .psd file has a grid of 24 columns.</p>
<p>The red bars that you see are located inside the &#8220;24 Col Grid&#8221; group. When you want to hide/show the grid, you can simply click on the eye icon of this group. We will create our layout between these red bars.</p>
<p>The file also contains  guides that are very helpful when designing a web layout. To show/hide the guides, go to View &gt; Show &gt; Guides (Ctrl/Cmd + ; ).</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/1.jpg" alt="create elegant web layout in photoshop" width="550" height="579" /></p>
<h3>Step 2 &#8211; Increasing the size of the canvas</h3>
<p>Go to Image &gt; Canvas Size and set the width to 1920px and the height to 1250px.</p>
<p>Now we will change the color of the background to a light yellow. Click on  the &#8220;Background&#8221; layer to make it active. Then use the Paint Bucket Tool (G) to fill the background with the color #f6e8bc.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/2.jpg" alt="create elegant web layout in photoshop" width="550" height="715" /></p>
<h3>Step 3 &#8211; Creating the header</h3>
<p>Create a new group (Layer &gt; New &gt; Group) and name it &#8220;header&#8221;. Then make sure that your Info panel is opened (Window &gt; Info &#8211; F8). You will need it to see the exact size of the shapes that you will create in this tutorial.</p>
<p>Select the Rectangle Tool (U) and create a rectangle with the height 10px and the color #3c1927 at the top of your document. Name this layer &#8220;top bar&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/3.jpg" alt="create elegant web layout in photoshop" width="550" height="316" /></p>
<h3>Step 4</h3>
<p>Use the Rectangle Tool (U) again to create a rectangle with the height 120px and the color #542437 beneath the one from the previous step. Then double-click on this layer to open the Layer Style window and use the settings from the following image.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/4.jpg" alt="create elegant web layout in photoshop" width="550" height="700" /></p>
<h3>Step 5</h3>
<p>Select the Line Tool (U), set the weight to 1px and the color to #2f141f. Then hold down the Shift key and drag a horizontal line from the right edge of your document to the left one.  Move the line at the bottom of the first rectangle and name this layer &#8220;1px dark line&#8221;.</p>
<p>Duplicate the line layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the up arrow once to move this new line one pixel up. Change the color of this line to #4e2133 and name the layer &#8220;1px light line&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/5.jpg" alt="create elegant web layout in photoshop" width="550" height="556" /></p>
<h3>Step 6 &#8211; Writing the name of the layout</h3>
<p>Select the Type Tool (T) and write the name of your web layout in the header. I used the font <a href="http://www.adobe.com/type/browser/landing/garamond/garamond.html">Garamond Premier Pro</a> Bold with the color #ecd078. Then double-click on the text layer to open the Layer Style window and use the settings from the following image.</p>
<p>Note: make sure the guides are visible (Ctrl/Cmd + ; ) and move the text to the left edge of the layout. Take a look at the next image for reference.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/6.jpg" alt="create elegant web layout in photoshop" width="550" height="1661" /></p>
<h3>Step 7 &#8211; Adding a subtle gradient under the name of the layout</h3>
<p>Now we will create a  white to transparent gradient under the text. Go to Layer &gt; New Fill Layer &gt; Gradient and use the settings from the following image. To move the gradient, click on your image and move the cursor while the Gradient Fill window is opened. Set the blend mode of this layer to Overlay 25% and put it beneath the text layer.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/7.jpg" alt="create elegant web layout in photoshop" width="550" height="1200" /></p>
<h3>Step 8 &#8211; Creating the navigation bar</h3>
<p>Create a new group and name it &#8220;navigation bar&#8221;.  Select the Rectangle Tool (U) and create a rectangle beneath the header with the height 40px and the color #c02942. Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/8.jpg" alt="create elegant web layout in photoshop" width="550" height="715" /></p>
<h3>Step 9</h3>
<p>Select the Line Tool (U) and set the weight to 1px. Then create two horizontal lines at the top of the navigation bar. For the dark line use the color #4e121c and name this layer &#8220;1px dark line top&#8221;. For the light line use the color #ed3453 and name this layer &#8220;1px light line top&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/9.jpg" alt="create elegant web layout in photoshop" width="550" height="616" /></p>
<p><strong>Step 10</strong></p>
<p>Create two more lines with the weight 1px at the bottom of the navigation bar. Use the color #972437 for the dark line and #e3314e for the light one.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/10.jpg" alt="create elegant web layout in photoshop" width="550" height="615" /></p>
<h3>Step 11</h3>
<p>Select the Type Tool (T) and write the name for your navigation menu items. Use a bright yellow color (#f2e9cc) and a serif font (I used Garamond Premier Pro Semibold).</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/11.jpg" alt="create elegant web layout in photoshop" width="550" height="966" /></p>
<h3>Step 12 &#8211; Creating separators for the navigation bar</h3>
<p>Create a new group inside the &#8220;navigation bar&#8221; group, name it &#8220;separators&#8221; and set its opacity to 75%. Select the Line Tool (U) and drag a vertical line from the top of the navigation bar to the bottom using the color #8a1e30.  Then create a new line next to the first one using the color #d72e4b.</p>
<p>Select these two lines, duplicate them (drag them over the &#8216;Create a new layer&#8217; button from the Layers panel) and move them to the right, between the first two navigation menu items. Repeat this process until you have as many separators as you need.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/12.jpg" alt="photoshop tutorial" width="550" height="1068" /></p>
<h3>Step 13</h3>
<p>Now we will use a mask to make the separators fade away at the top and at the bottom. Add a mask to the &#8220;separators&#8221; group (Layer &gt; Layer Mask &gt; Reveal All) and set the foreground color to black. Then select the Gradient Tool (G), hold down the Shift key and drag a vertical black to transparent gradient at the top of the navigation bar. Repeat this for the bottom area of the navigation bar as well.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/13.jpg" alt="create elegant web layout in photoshop" width="550" height="715" /></p>
<h3>Step 14 &#8211; Adding a gradient beneath the navigation bar</h3>
<p>Create a new layer. Then select the Rectangular Marquee Tool (M) and create a selection like the one you see in the following image. Select the Gradient Tool (G), hold down the Shift key and drag a #b6aa86 to transparent gradient from the top of the selection to the bottom. Hit Ctrl/Cmd+D to deselect. Use the Move Tool (V) to move this layer 1px beneath the navigation bar. Name this layer &#8220;gradient&#8221; and set its opacity to 25%.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/14.jpg" alt="photoshop web layout tutorial" width="550" height="1081" /></p>
<h3>Step 15</h3>
<p>Write  a text beneath the navigation bar using the Type Tool (T) and the color #542437.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/15.jpg" alt="create elegant web layout in photoshop" width="550" height="185" /></p>
<h3>Step 16 &#8211; Creating a content carousel</h3>
<p>Create a new group and name it &#8220;featured&#8221;. Create another group inside the first one and name it &#8220;top separator&#8221;.</p>
<p>Use the Line Tool (U) to create two horizontal lines with the weight 1px. For the first one use the color #f7efd3 and for the second one use the color #c7bc98. Set the opacity of these two layers to 60%.</p>
<p>Create a new layer. Select the Rectangular Marquee Tool (M) and create a rectangular selection right above the two lines. Then hold down the Shift key and drag a #b6aa86 to transparent gradient (G) from the bottom of the selection to the top. Set the opacity of this layer to 15% and name it &#8220;gradient&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/16.jpg" alt="" width="550" height="1500" /></p>
<h3>Step 17</h3>
<p>Add a mask to the &#8220;top separator&#8221; group (Layer &gt; Layer Mask &gt; Reveal All). Then drag two horizontal black to transparent gradients (G) &#8211; one in the left side of the separator and another one in the right side. Take a look at the following image for reference. You can also activate the guides to help you drag these gradients.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/17.jpg" alt="" width="550" height="715" /></p>
<h3>Step 18</h3>
<p>Duplicate the &#8220;top separator&#8221; group by dragging it over the &#8216;Create a new layer&#8217; button from the bottom of the Layers panel. Then go to Edit &gt; Transform &gt; Flip Vertical. Move this new separator down at a distance of about 240px from the first one. Change the name of this group to &#8220;bottom separator&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/18.jpg" alt="" width="550" height="652" /></p>
<h3>Step 19 &#8211; Adding the featured images</h3>
<p>Open three images in Photoshop and move them into your first document using the Move Tool (V). I used images of some of my previous works.</p>
<p>Activate the grid. Then crop the  images and use Free Transform (Ctrl/Cmd + T) to change their size. I have chosen to make the middle image bigger than the other two ones. My middle image has the dimensions 360px by 200px and the other two ones have 280px by 166px. Take a look at the following image for reference.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/19.jpg" alt="" width="550" height="1000" /></p>
<h3>Step 20</h3>
<p>Now we will add a double stroke effect to the images. Double-click on the middle image layer to open the Layer Style window and use the settings from the following image.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/20.jpg" alt="" width="550" height="997" /></p>
<h3>Step 21</h3>
<p>For the other two images use the same Layer Style settings, but change the size of the Inner Glow to 5.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/21.jpg" alt="photoshop layout tutorial" width="550" height="640" /></p>
<h3>Step 22 &#8211; Creating a shadow beneath each image</h3>
<p>Select the Ellipse Tool (U), hold down the Shift key and create a small circle in the middle of  your big image using the color #847c63 (1). Go to Edit &gt; Free Transform (Ctrl/Cmd + T) and stretch the circle as you see in the following image (2, 3).</p>
<p>Right-click on this layer and select Convert to Smart Object. Then go to Filter &gt; Blur &gt; Gaussian Blur and add a 3px gaussian blur (4). Name this layer &#8220;shadow 1&#8243;, move it beneath the layer of the image (5) and set its opacity to 20% (6).</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/22.jpg" alt="photoshop layout tutorial" width="550" height="2026" /></p>
<h3>Step 23</h3>
<p>Repeat the previous step for the other two images, but set the opacity of the shadow layers to 15%.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/23.jpg" alt="phtoshop layout tutorial" width="550" height="638" /></p>
<h3>Step 24 &#8211; Creating the navigation arrows</h3>
<p>Now we will create two navigation arrows for the content carousel &#8211; one in the right side and one in the left side.</p>
<p>Select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 50px by 50px and the color of the layout&#8217;s background (#f6e8bc). Move this circle in the right side of the third image, as you see below.</p>
<p>Double-click on this layer to open the Layer Style window and use the settings from the following image for Outer Glow and Stroke. Name this layer &#8220;right circle&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/24.jpg" alt="photoshop layout tutorials" width="550" height="1451" /></p>
<h3>Step 25</h3>
<p>Convert the &#8220;right circle&#8221; layer into a smart object (right-click on it and select Convert to Smart Object). Use the Rectangular Marquee Tool (M) to select the right half of this circle. Then erase the selected area by going to Layer &gt; Layer Mask &gt; Hide Selection.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/25.jpg" alt="create elegant web layout in photoshop" width="550" height="1089" /></p>
<h3>Step 26</h3>
<p>Duplicate the &#8220;right circle&#8221; layer (Ctrl/Cmd + J). Then go to Edit &gt; Transform &gt; Flip Horizontal. Name this layer &#8220;left circle&#8221; and use the Move Tool (V) to move it in the left side of the content carousel.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/26.jpg" alt="" width="550" height="583" /></p>
<h3>Step 27 &#8211; Creating two navigation arrows for the content carousel</h3>
<p>Copy this symbol &#8220;Â»&#8221;, select the Type Tool (T), click on your image and paste it.  I used the font Garamond Premier Pro Bold with the size 48px and the color #542437. Depending on which font you will use, your arrows will look different. Move this arrow in the middle of your right circle and name the layer &#8220;right arrow&#8221;.</p>
<p>Duplicate the &#8220;right arrow&#8221; layer (Ctrl/Cmd + J). Use the Move Tool (V) to move it in the left side of the content carousel. Then replace the first symbol with this one &#8220;Â«&#8221;. Name this layer &#8220;left arrow&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/27.jpg" alt="" width="550" height="595" /></p>
<h3>Step 28 &#8211; Creating a vertical separator</h3>
<p>Create a new group and name it &#8220;vertical separator&#8221;. Select the Line Tool (U) and create a vertical line in the middle of your layout with the height 600px and the color #f7efd3. Name this layer &#8220;light line&#8221;. Duplicate this line layer (Ctrl/Cmd + J) and change its color to #c7bc98. Then select the Move Tool (V) and hit the right arrow once to move this new line 1px to the right. Name this layer &#8220;dark line&#8221;.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/28.jpg" alt="" width="550" height="911" /></p>
<h3>Step 29 &#8211; Creating the &#8216;Services&#8217; area</h3>
<p>Create a new group and name it &#8220;services&#8221;. Then select the Type Tool (T) and write the word &#8220;Services&#8221; with the size 32px and the color #542437  in the left side of the layout.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/29.jpg" alt="" width="550" height="677" /></p>
<h3>Step 30</h3>
<p>Add three representative images beneath the word &#8220;Services&#8221;. Activate the guides to help you arrange the images. Then crop each image to have the size 140px by 180px. Add a double stroke effect to each image using the Layer Style window and the settings below.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/30.jpg" alt="" width="550" height="1712" /></p>
<h3>Step 31</h3>
<p>Use the Rectangle Tool (U) to create a rectangle with the dimensions 138px by 30px and the color #94516b. Double-click on this layer to open the Layer Style window and use the settings from the following image. Duplicate this layer two times (Ctrl/Cmd + J) and put a rectangle beneath each image. Then select the Type Tool (T) and write three names of design services  on your buttons using the color #fbf9f4.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/31.jpg" alt="" width="550" height="1542" /></p>
<h3>Step 32 &#8211; Creating the &#8216;About us&#8217; area</h3>
<p>Create a new group and name it &#8220;about&#8221;. Then select the Type Tool (T) and write the words &#8220;About us&#8221; with the same font, color and size that you used for the word &#8220;Services&#8221;.</p>
<p>Add an image beneath the words &#8220;About us&#8221; with the dimensions 455px by120px.  To add a double-stroke effect to this image, copy the layer style from a previous image (right-click on its layer and select Copy Layer Style), and then paste it to this layer (right-click on the layer and select Paste Layer Style). Then change the size of the Inner Glow to 6.</p>
<p>Select the Type Tool (T) and add a text beneath the image using the font Georgia, the size 14px  and the color #673046.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/32.jpg" alt="" width="550" height="1095" /></p>
<h3>Step 33 &#8211; Creating the &#8216;Blog&#8217; area</h3>
<p>Now we will create an area for recent blog posts. Create a new group and name it &#8220;blog&#8221;. Select the Type Tool (T) and write the word &#8220;Blog&#8221; beneath the &#8217;services&#8217; area with the same font, color and size that you used for the words &#8220;About us&#8221;.</p>
<p>Add two images with the dimensions 220px by 100px. Then copy the layer style of the image from the &#8216;about us&#8217; area and paste it to these two layers to get the same double stroke effect.</p>
<p>Use the Type Tool (T), the font Georgia and the color #683147 to write a text next to each of these two images.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/33.jpg" alt="" width="550" height="1170" /></p>
<h3>Step 34 &#8211; Creating a contact form</h3>
<p>Create a new group and name it &#8220;contact&#8221;. Then select the Type Tool (T) and write the words &#8220;Contact us&#8221;.</p>
<p>Select the Rectangle Tool (U) and create a contact form like the one you see in the following image using the color #fcf8ec. Add a 1px stroke to each rectangle using the color #ddd0a4. Then select the Type Tool (T) and write the name of each field of the contact form using the font Georgia and the color #ddd0a4.</p>
<p>Use the Rectangle Tool (T) to create a send button beneath the contact form. Use the same settings which you used at step 31 for the buttons from the &#8217;services&#8217; area.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/34.jpg" alt="" width="550" height="1092" /></p>
<h3>Step 35 &#8211; Adding a copyright statement in the footer</h3>
<p>Select the Type Tool (T) and write a copyright statement in the footer of your layout using the font Georgia and the color #c8bfa4.</p>
<p><img src="http://www.reencoded.com/wp-content/uploads/2010/02/35.jpg" alt="photoshop layout tutorial" width="550" height="646" /></p>
<h3>Final Result</h3>
<p>Well, we&#8217;re finished! In the following images you can see the final web layout (with and without the grid). I hope you enjoyed this tutorial and you learned something new.</p>
<p><a href="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-large-with-grid.jpg"><img src="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-with-grid.jpg" alt="create elegant web layout in photoshop" width="550" height="715" /></a></p>
<p><a title="create an elegent web layout in photoshop" href="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-large.jpg" target="_blank"><img class="alignnone size-full wp-image-5182" title="final-result-small" src="http://www.reencoded.com/wp-content/uploads/2010/02/final-result-small2.jpg" alt="final-result-small" width="550" height="655" /></a></p>


<p>Related posts:<ol><li><a href='http://www.reencoded.com/2009/09/21/how-to-create-professional-looking-website-layout-with-photoshop/' rel='bookmark' title='Permanent Link: How To Create Professional Looking Website Layout With Photoshop'>How To Create Professional Looking Website Layout With Photoshop</a> <small>Want to design a professional looking website template using Photoshop....</small></li><li><a href='http://www.reencoded.com/2008/08/08/photoshop-tutorial-create-an-abstract-background/' rel='bookmark' title='Permanent Link: Photoshop Tutorial:  Create an Abstract Background'>Photoshop Tutorial:  Create an Abstract Background</a> <small>With abstract layouts being a very hot design trend, creating...</small></li><li><a href='http://www.reencoded.com/2008/08/04/tutorial-creating-a-grunge-effect-using-only-photoshop/' rel='bookmark' title='Permanent Link: Tutorial: Creating a Grunge Effect Using Only Photoshop'>Tutorial: Creating a Grunge Effect Using Only Photoshop</a> <small>Right now, artistic designs are very hot! With CSS becoming...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p><img src="http://feeds.feedburner.com/~r/reencoded/~4/Lb5q2w9NyIk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.reencoded.com/2010/02/26/how-to-create-an-elegant-web-layout-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>32</slash:comments>
		<feedburner:origLink>http://www.reencoded.com/2010/02/26/how-to-create-an-elegant-web-layout-in-photoshop/</feedburner:origLink></item>
	</channel>
</rss>
