---
pageTitle: Build up a Shield from Parts
---
<!-- ./build.ejs starts -->
<p>Choose the parts from the questions below and watch how your blazon is built up. If you are new to heraldry
then you may wish to use the "Teach Me" option under the "Learn" menu - this has a small number of options and will carefully guide you through the process.
This page gives you access to many more feature, but it does need you to answer many more questions!</p>
<p class="lead">Pay careful attention to the blazon as it is built up in the textarea - this will help you learn
    blazonry!</p>
<table>
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;" rowspan="2">
<div id="shieldimg">
</div>
</td>
<td rowspan="2">&nbsp;</td>
<td colspan="3">
    <form>
<textarea id="blazon" cols="28" rows="10" disabled="disabled">~background~</textarea>
    </form>
</td>
</tr>
<tr>
<td>  <button type="button" class="btn-block btn-primary" onclick="goback();"   >Go Back a Step</button></td>
<td>  <button type="button" class="btn-block btn-danger" onclick="finished();" >Finished!</button></td>
<td>  <button type="button" class="btn-block btn-primary" onclick="do_reset();" >Start Over</button></td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<div id="questions">
</div>
<form id="saveForm">
    <input type="hidden" name="asfile" value="1"/>
    <input type="hidden" name="size" value="1000"/>
    <input type="hidden" name="palette" value="drawshield"/>
    <input type="hidden" name="shape" value="heater"/>
    <input type="hidden" name="effect" value="flat"/>
    <input type="hidden" name="saveformat" value="png"/>
    <input type="hidden" name="filename" value="shield"/>
    <input type="hidden" name="blazon" value="grey"/>
    <div class="row panel" id="savePanel" style="display: none;">
        <div class="row">
            <div class="col-lg-10 offset-lg-1 col-md-10 col-sm-12 card">
                <div class="row">
                    <div class="col-12">
                        <p class="lead">Save your shield as an image file</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-3  pl-1 pr-1">
                        <div class="input-group"><span>Format: </span>
                            <select class="custom-select" data-style="btn-primary" id="formatSelect">
                                <option selected value="png">PNG</option>
                                <option value="jpg">JPEG</option>
                                <option value="svg">SVG</option>
                                <option value="pdf">PDF (A4)</option>
                                <option value="pdfLtr">PDF (Ltr)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 pl-1 pr-1">
                        <div class="input-group"><span>Width (px): </span>
                            <input type="text" class="form-control" id="sizeInput" placeholder="1000">
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 pl-1 pr-1">
                        <div class="input-group"><span>Filename: </span>
                            <input type="text" class="form-control" id="filenameInput" placeholder="shield">
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 pl-1 pr-1">
                        <input type="button" class="btn btn-danger" value="Save File" id="saveFile" onclick="saveBuild()">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="/js/shieldcommon.js"></script>
<script src="buildshield.js"></script>
<script src="charges.js"></script>
<!-- ./build.ejs ends -->