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

<h3>Step 1 - Open the File</h3>

<img src="images/stories/demo/logo/logo1.jpg" alt="Logo" width="200" height="100" class="rt-image floatleft" />

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

<ul class="list-icon rightarrow" style="margin-left: 210px;">
	<li>In the right column, find <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>

<div class="clear"></div><br />

<h3 class="nomargintop">Step 2 - Text/Slogan/Icon Editing</h3>

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

<div class="clear"></div><br />

<img src="images/stories/demo/logo/logo5.jpg" alt="Logo" width="200" height="100" class="rt-image floatleft largemarginbottom" />

<h3 class="nomargintop">Step 3 - Slice Modification</h3>

<ul class="list-icon rightarrow" style="margin-left: 210px;">
	<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>
<div class="clear"></div>

<div class="clear"></div><br />

<img src="images/stories/demo/logo/logo6.jpg" alt="Logo" width="200" height="100"  class="rt-image floatleft largemarginbottom" />

<h3 class="nomargintop">Step 4 - Export</h3>

<ul class="list-icon rightarrow" style="margin-left: 210px;">
	<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>
<div class="clear"></div>

<h3>Step 5 - Multiple Frames/States</h3>
<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>