<p class="notice">Gantry sets the dimensions of the logo, so CSS modification is unnecessary.</p>

<br /><div class="module-title"><h3 class="title">Step 1 - Open the File</h3></div>

<ul class="list-icon rightarrow">
	<li>Open the <strong>logo-source.png</strong> file in Adobe&reg; Fireworks.</li>
</ul>

<p><img src="images/stories/demo/logo/logo1.jpg" alt="Logo" width="349" height="101" class="rt-image" /></p>

<ul class="list-icon rightarrow">
	<li>Focus on the right column, titled <strong>Layers</strong>. Select the <strong>Web layers</strong> directory and click the eye icon to the left of the logo slice (the green object). This will make the slice invisible so you can edit the file.</li>
</ul>

<br /><div class="module-title"><h3 class="title">Step 2 - Text/Slogan/Icon Editing</h3></div>

<ul class="list-icon rightarrow">
	<li>Double click on the logo text. Now you can edit the text of logo to your choosing.</li>
</ul>
<p>
	<img src="images/stories/demo/logo/logo2.jpg" alt="Logo" width="349" height="101" class="rt-image" /><br /><br />
	<img src="images/stories/demo/logo/logo3.jpg" alt="Logo" width="349" height="101" class="rt-image" />
</p>

<ul class="list-icon rightarrow">
	<li>Now, select and disable the icon if necessary. Or replace with an alternative vector.</li>
</ul>
<p>
	<img src="images/stories/demo/logo/logo4.jpg" alt="Logo" width="349" height="101" class="rt-image" /><br /><br />
	<img src="images/stories/demo/logo/logo5.jpg" alt="Logo" width="349" height="101" class="rt-image" />
</p>

<br /><div class="module-title"><h3 class="title">Step 3 - Slice Modification</h3></div>

<ul class="list-icon rightarrow">
	<li>Reactivate the Slice in the Web Layers column, this will place a green rectangle over the logo image. Change the size of the slice (or move it) to match the new size if applicable.</li>
</ul>

<p>
	<img src="images/stories/demo/logo/logo6.jpg" alt="Logo" width="349" height="101" class="rt-image" />
</p>

<br /><div class="module-title"><h3 class="title">Step 4 - Export</h3></div>

<ul class="list-icon rightarrow">
	<li>Now you will want to export the logo. Right click on the image slice and select <strong>Exported Selected Slices...</strong> from the contextual menu. Proceed to export it to your computer for uploading.</li>
</ul>
<p>
	<img src="images/stories/demo/logo/logo7.jpg" alt="Logo" width="349" height="101" class="rt-image" />
</p>

<br /><div class="module-title"><h3 class="title">Step 5 - Multiple Frames/States</h3></div>
<ul class="list-icon rightarrow">
	<li>If there are multiple logos for a template, they are located in <strong>Frames</strong> or <strong>States</strong> within Fireworks.</li>
</ul>
<p>
	<img src="images/stories/demo/logo/logo-frame1.jpg" alt="Logo" width="258" height="152" class="rt-image floatleft" />
	<img src="images/stories/demo/logo/logo-frame2.jpg" alt="Logo" width="258" height="152" class="rt-image floatnone" /></p>
<div class="clear"></div>