Skip to content

Commit 8325d90

Browse files
McoreDMcoreD
committed
Add documentation pages for Image Effects, Annotation Tools, and Multi-layer Support
1 parent 4008e20 commit 8325d90

4 files changed

Lines changed: 218 additions & 3 deletions

File tree

‎xerahs/annotation-tools.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
layout: default
3+
title: Annotation Tools
4+
---
5+
6+
<div class="jumbotron jumbotron-compact">
7+
<div class="container">
8+
<h1>
9+
<a href="/xerahs/">XerahS</a>
10+
</h1>
11+
<p>Annotation Tools</p>
12+
</div>
13+
</div>
14+
15+
<div class="container">
16+
<div class="row">
17+
<div class="col-lg-12">
18+
<h1>Annotating Screenshots</h1>
19+
<p class="lead">XerahS includes a rich set of annotation tools to help you express your ideas clearly and concisely.</p>
20+
21+
<h2 class="mt-4">Drawing Tools</h2>
22+
<div class="row mt-3">
23+
<div class="col-md-6">
24+
<h3><i class="fas fa-pencil-alt"></i> Basic Shapes</h3>
25+
<ul>
26+
<li><strong>Rectangle / Ellipse:</strong> Draw precise shapes with customizable borders and fill colors.</li>
27+
<li><strong>Line / Arrow:</strong> Add straight lines or directional arrows.</li>
28+
<li><strong>Freehand:</strong> Sketch freely with varying brush sizes.</li>
29+
<li><strong>Standard:</strong> Add standard annotations like steps (1, 2, 3...) or stickers.</li>
30+
</ul>
31+
</div>
32+
<div class="col-md-6">
33+
<h3><i class="fas fa-font"></i> Text & Callouts</h3>
34+
<ul>
35+
<li><strong>Text:</strong> Add text labels with full font customization.</li>
36+
<li><strong>Speech Balloon:</strong> Create comic-style speech bubbles.</li>
37+
<li><strong>Step:</strong> Numbered steps for creating tutorials or guides.</li>
38+
</ul>
39+
</div>
40+
</div>
41+
42+
<h2 class="mt-4">Utility Tools</h2>
43+
<div class="row mt-3">
44+
<div class="col-md-6">
45+
<h3><i class="fas fa-eye-slash"></i> Privacy & Highlight</h3>
46+
<ul>
47+
<li><strong>Blur:</strong> Sensitively blur out personal information.</li>
48+
<li><strong>Pixelate:</strong> Apply a mosaic effect to hide details.</li>
49+
<li><strong>Highlight:</strong> Draw attention to specific areas with a translucent overlay.</li>
50+
<li><strong>Smart Eraser:</strong> Intelligent deletion tool.</li>
51+
</ul>
52+
</div>
53+
<div class="col-md-6">
54+
<h3><i class="fas fa-crop"></i> Modification</h3>
55+
<ul>
56+
<li><strong>Crop:</strong> Trim the canvas to a specific selection.</li>
57+
<li><strong>Cut Out:</strong> Remove a section of the image completely.</li>
58+
<li><strong>Magnify:</strong> Create a zoomed-in loupe effect over a detail.</li>
59+
<li><strong>Spotlight:</strong> Darken the surrounding area to spotlight a specific region.</li>
60+
</ul>
61+
</div>
62+
</div>
63+
64+
<div class="alert alert-info mt-4">
65+
<strong><i class="fas fa-lightbulb"></i> Tip:</strong> All tools support undo/redo and layer management, allowing you to edit annotations even after they are placed.
66+
</div>
67+
68+
<div class="mt-5">
69+
<a class="btn" href="/xerahs/">Back to Home</a>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
75+
{% include common-js.html %}
76+
<script src="/xerahs/js/xerahs.main.js"></script>

‎xerahs/image-effects.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: default
3+
title: Image Effects
4+
---
5+
6+
<div class="jumbotron jumbotron-compact">
7+
<div class="container">
8+
<h1>
9+
<a href="/xerahs/">XerahS</a>
10+
</h1>
11+
<p>Image Effects</p>
12+
</div>
13+
</div>
14+
15+
<div class="container">
16+
<div class="row">
17+
<div class="col-lg-12">
18+
<h1>Image Effects</h1>
19+
<p class="lead">XerahS includes a powerful image processing engine that allows you to apply a wide range of effects to your screenshots automatically after capture.</p>
20+
21+
<h2 class="mt-4">Effects Library</h2>
22+
<p>Effects are categorized into three main groups:</p>
23+
24+
<div class="row mt-3">
25+
<div class="col-md-4">
26+
<h3><i class="fas fa-magic"></i> Manipulations</h3>
27+
<ul>
28+
<li><strong>Resize:</strong> Scale images by percentage or specific dimensions.</li>
29+
<li><strong>Rotate:</strong> Rotate by 90, 180, 270 degrees or custom angles.</li>
30+
<li><strong>Flip:</strong> Flip horizontally or vertically.</li>
31+
<li><strong>Skew:</strong> Apply perspective skewing.</li>
32+
<li><strong>Auto Crop:</strong> Automatically remove transparent or solid color borders.</li>
33+
<li><strong>Rounded Corners:</strong> Add rounded corners with customizable radius.</li>
34+
<li><strong>Rotate 3D:</strong> Apply 3D rotation transformations.</li>
35+
</ul>
36+
</div>
37+
<div class="col-md-4">
38+
<h3><i class="fas fa-adjust"></i> Adjustments</h3>
39+
<ul>
40+
<li><strong>Brightness/Contrast:</strong> Adjust luminance and tonal range.</li>
41+
<li><strong>Gamma:</strong> Correct gamma levels.</li>
42+
<li><strong>Hue/Saturation:</strong> Shift colors and adjust intensity.</li>
43+
<li><strong>Grayscale:</strong> Convert to black and white.</li>
44+
<li><strong>Sepia:</strong> Apply a vintage tone.</li>
45+
<li><strong>Invert:</strong> Invert colors.</li>
46+
<li><strong>Colorize:</strong> Tint the image with a specific color.</li>
47+
<li><strong>Replace Color:</strong> Swap one color for another.</li>
48+
</ul>
49+
</div>
50+
<div class="col-md-4">
51+
<h3><i class="fas fa-filter"></i> Filters</h3>
52+
<ul>
53+
<li><strong>Blur:</strong> Gaussian blur for privacy or aesthetics.</li>
54+
<li><strong>Pixelate:</strong> Obfuscate sensitive information.</li>
55+
<li><strong>Sharpen:</strong> Enhance edge detail.</li>
56+
<li><strong>Border:</strong> Add solid or gradient borders.</li>
57+
<li><strong>Shadow:</strong> Add drop shadows.</li>
58+
<li><strong>Reflection:</strong> Create a mirrored reflection.</li>
59+
<li><strong>Glow:</strong> Add an outer glow effect.</li>
60+
<li><strong>Torn Edge:</strong> Simulate a torn paper edge.</li>
61+
</ul>
62+
</div>
63+
</div>
64+
65+
<h2 class="mt-5">Import / Export</h2>
66+
<p>XerahS allows you to share your custom effect configurations or back them up.</p>
67+
68+
<div class="alert alert-info">
69+
<strong><i class="fas fa-file-import"></i> Legacy Support:</strong> XerahS includes a legacy importer that can read existing ShareX image effect files (<code>.sxie</code>), allowing for a seamless migration of your favorite presets.
70+
</div>
71+
72+
<ul>
73+
<li><strong>Export:</strong> Save your current effect chain to a JSON-based format for sharing.</li>
74+
<li><strong>Import:</strong> Load presets created by the community or from previous backups.</li>
75+
</ul>
76+
77+
<div class="mt-5">
78+
<a class="btn" href="/xerahs/">Back to Home</a>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
84+
{% include common-js.html %}
85+
<script src="/xerahs/js/xerahs.main.js"></script>

‎xerahs/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ <h3><a href="#features"><i class="fas fa-star"></i>XerahS Features</a></h3>
4545

4646
<h3 class="mt-4"><a href="#editor"><i class="fas fa-edit"></i>XerahS Editor Features</a></h3>
4747
<div class="row">
48-
<div class="col-sm-3">Multi-layer support</div>
49-
<div class="col-sm-3">Annotation tools</div>
50-
<div class="col-sm-3">Image effects</div>
48+
<div class="col-sm-3"><a href="/xerahs/layers"><strong>Multi-layer support</strong></a></div>
49+
<div class="col-sm-3"><a href="/xerahs/annotation-tools"><strong>Annotation tools</strong></a></div>
50+
<div class="col-sm-3"><a href="/xerahs/image-effects"><strong>Image effects</strong></a></div>
5151
<div class="col-sm-3">Crop and resize</div>
5252
</div>
5353
</div>

‎xerahs/layers.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
layout: default
3+
title: Multi-Layer Support
4+
---
5+
6+
<div class="jumbotron jumbotron-compact">
7+
<div class="container">
8+
<h1>
9+
<a href="/xerahs/">XerahS</a>
10+
</h1>
11+
<p>Multi-Layer Support</p>
12+
</div>
13+
</div>
14+
15+
<div class="container">
16+
<div class="row">
17+
<div class="col-lg-12">
18+
<h1>Object-Based Editing</h1>
19+
<p class="lead">Unlike traditional paint tools that bake changes into the image, XerahS Editor treats every annotation as a separate object on its own layer.</p>
20+
21+
<h2 class="mt-4">Powerful Flexibility</h2>
22+
<p>This non-destructive approach gives you complete control over your screenshots:</p>
23+
24+
<div class="row mt-4">
25+
<div class="col-md-4">
26+
<h3><i class="fas fa-layer-group"></i> Movable Objects</h3>
27+
<p>Every arrow, text box, or shape is an independent object. You can select, move, resize, or delete them at any time—even after you've drawn other things on top.</p>
28+
</div>
29+
<div class="col-md-4">
30+
<h3><i class="fas fa-history"></i> Non-Destructive</h3>
31+
<p>Because the original image remains untouched underneath, you can accidentally cover important details with an annotation and simply move it later to reveal them again.</p>
32+
</div>
33+
<div class="col-md-4">
34+
<h3><i class="fas fa-sort-amount-up"></i> Z-Ordering</h3>
35+
<p>Bring important annotations to the front or send background elements to the back. Layer management ensures your visual hierarchy is exactly how you want it.</p>
36+
</div>
37+
</div>
38+
39+
<h2 class="mt-5">Re-Edit Capability</h2>
40+
<p>Did you make a typo in a text box? Need to change the color of an arrow? With multi-layer support, you just click the object and change its properties. No need to undo and redraw.</p>
41+
42+
<div class="alert alert-success mt-4">
43+
<strong><i class="fas fa-save"></i> Project Saving:</strong> You can even save your work as a project file to come back and edit the text or layers days later.
44+
</div>
45+
46+
<div class="mt-5">
47+
<a class="btn" href="/xerahs/">Back to Home</a>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
{% include common-js.html %}
54+
<script src="/xerahs/js/xerahs.main.js"></script>

0 commit comments

Comments
 (0)