-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
166 lines (142 loc) · 7.93 KB
/
index.html
File metadata and controls
166 lines (142 loc) · 7.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image2pixel Help</title>
<link rel="stylesheet" href="styles/main.css">
<script defer src="js/main.js"></script>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">
<img src="images/logo.png" alt="Image2pixel Logo">
<h1>Image2pixel Help</h1>
</div>
<nav>
<ul class="main-nav">
<li><a href="index.html">Documentation</a></li>
<li><a href="basics/faq.html">FAQ</a></li>
<li><a href="basics/quick-reference.html">Quick Reference</a></li>
<li><a href="steam-version-history.html">Steam Version History</a></li>
<li><a href="https://www.youtube.com/@PixelBearTeacher">Tutorial</a></li>
</ul>
</nav>
<div class="language-container">
<select id="language-switcher" aria-label="Select language">
<option value="en" selected>English</option>
<option value="zh-CN">简体中文</option>
<option value="zh-TW">繁體中文</option>
</select>
</div>
<div class="search-container">
<input type="text" id="search-input" placeholder="Search documentation...">
<button id="search-button">Search</button>
</div>
</div>
</header>
<div class="container">
<main class="content">
<h1>Image2pixel Help</h1>
<p>Image2pixel lets you create pixel art from any image. From photographs to graphics, you can convert any image to pixel art style with customizable settings for pixel size, color count, and more.</p>
<p>Here you will find help documentation, tutorials, and tips to help you use Image2pixel effectively. If you have questions, check out the <a href="basics/faq.html">Frequently Asked Questions</a>.</p>
<p>To get started quickly, you can print the <a href="basics/quick-reference.html">Quick Reference</a>. It contains keyboard shortcuts and common operations, so it's handy to have nearby.</p>
<div class="section-grid">
<div class="section-card">
<h2>Basics</h2>
<p>General concepts, elements in the window, expected workflow, etc.</p>
<div class="section-content">
<h3>Workspace</h3>
<p>The Image2pixel workspace is where all your pixel art creation happens. It includes the main canvas area, toolbars, and settings panels.</p>
<h3>Workflow</h3>
<p>A typical workflow includes opening an image, adjusting pixel size and colors, applying the algorithm, and saving your pixel art.</p>
<h3>Interface</h3>
<p>The interface has a top toolbar for file operations, a side panel for adjusting settings, and the main canvas area to view your work.</p>
</div>
</div>
<div class="section-card">
<h2>Image Processing</h2>
<p>How to open, create, and save your pixel art images.</p>
<div class="section-content">
<h3>Open & Create</h3>
<p>Open existing images via File → Open or drag and drop. Create new blank canvases via File → New.</p>
<h3>Resize</h3>
<p>Adjust image dimensions using the resize tool. You can maintain aspect ratio or set custom dimensions.</p>
<h3>Save</h3>
<p>Save your work as PNG, GIF, or other formats. PNG is recommended for preserving transparency.</p>
</div>
</div>
<div class="section-card">
<h2>Animation</h2>
<p>Working with animated GIFs and transparency.</p>
<div class="section-content">
<h3>GIF Support</h3>
<p>Import and export animated GIFs. Each frame will be pixelated while preserving animation timing.</p>
<h3>Transparency</h3>
<p>Transparency in your original images is preserved in the final pixel art. Great for sprites and game assets.</p>
</div>
</div>
<div class="section-card">
<h2>Algorithms</h2>
<p>Understanding and using the different pixelation algorithms.</p>
<div class="section-content">
<h3>Standard Algorithm</h3>
<p>The default algorithm creates classic pixel art using uniform grid-based pixels with customizable block size and color count.</p>
<h3>SLIC Algorithm</h3>
<p>Creates content-aware pixel art with irregular-shaped pixel clusters that better follow image features and boundaries.</p>
<h3>Color Palettes</h3>
<p>Choose from built-in retro palettes or create custom ones to achieve specific visual styles and aesthetics.</p>
</div>
</div>
<div class="section-card">
<h2>Customization</h2>
<p>Personalize your Image2pixel experience.</p>
<div class="section-content">
<h3>Themes</h3>
<p>Customize the application's appearance with different themes. Choose from Light, Dark, or System mode to match your preference and reduce eye strain during long editing sessions.</p>
</div>
</div>
</div>
</main>
</div>
<footer>
<div class="footer-columns">
<div class="footer-column">
<h3>Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="support.html">iOS Version Support</a></li>
<li><a href="privacy-policy.html">iOS Version privacy policy</a></li>
<li><a href="EULA_iOS_Image2pixel.html">iOS Version terms of service</a></li>
<li><a href="https://steamcommunity.com/games/3475120">Bug Report</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Community</h3>
<ul>
<li><a href="https://steamcommunity.com/games/3475120">Steam Community</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Documentation</h3>
<ul>
<li><a href="basics/quick-reference.html">Quick Reference</a></li>
<li><a href="basics/faq.html">FAQ</a></li>
<li><a href="basics/tutorial.html">Tutorial</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Social</h3>
<ul>
<li><a href="https://x.com/pixel32">Twitter</a></li>
<li><a href="https://www.youtube.com/@PixelBearTeacher">YouTube</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2024-2025 Image2pixel Pixel Bear Teacher. All rights reserved.</p>
</div>
</footer>
</body>
</html>