User Guide

Welcome to our online image text editor! This guide will walk you through all features to help you create beautiful images quickly.

Step 1: Upload Your Image

How to Upload?

When you open the website, you'll see an upload area. There are two ways to upload your image:

Method 1: Click to Upload

1. Click the "Select File" button in the center
2. Choose your image from the file dialog
3. Supports JPG, PNG, WebP formats
4. Maximum file size: 10MB

Method 2: Drag and Drop

1. Drag your image from a folder to the upload area
2. Release to upload

Try Example Images

If you don't have an image handy, click one of these examples:

• Landscape : Perfect for landscape photography watermarks
• Portrait : Ideal for ID photos or portrait work
• Birthday : Great for birthday greeting cards

---

Step 2: Add and Edit Text

Once your image is uploaded, you can start adding text!

Add Regular Text

1. Click the "Add Text" button in the top toolbar
2. Default text will appear in the center of your image
3. Double-click the text to edit its content
4. Drag to move it around
5. Drag the corners to resize

Add Timestamp

1. Click the "Timestamp" button
2. The system will automatically add the current date and time
3. Time format adjusts based on your language
4. You can move, resize, and edit it just like regular text

---

Step 3: Customize Text Styles

When you select text, a properties panel appears on the right (in fullscreen mode). Here you'll find rich text styling options:

Font Settings

Choose a Font

• System Fonts: Includes Arial, Times New Roman, and other common fonts
• Google Fonts: Hundreds of beautiful fonts organized by category:
  • Chinese fonts: For Chinese content
  • English fonts: Including elegant, modern, handwritten styles
  • Special fonts: Artistic and decorative fonts

Adjust Font Size

• Drag the slider to adjust size (12-200 pixels)
• Larger numbers mean bigger text

Text Formatting

Three formatting buttons for quick text styling:

• Bold : Make text stand out
• Italic : Add elegance
• Underline : Emphasize key content

Click buttons to toggle effects on or off. You can combine multiple formats!

Color Settings

Text Color

1. Click in the color picker to choose your favorite color
2. Or enter a color code in the input field below
3. Preview changes in real-time

Stroke (Outline) Settings

• Stroke Width: Drag the slider to adjust outline thickness (0-20 pixels)
• Stroke Color: Choose the outline color
• Strokes help text stand out on any background!

Shadow Effect

Adding shadows creates depth and dimension:

1. Click the "Enable" button next to "Shadow"
2. Adjust shadow parameters:
   • Blur: How soft the shadow appears
   • Offset X: Shift shadow left or right
   • Offset Y: Shift shadow up or down

Rotation and Opacity

Rotate Text

• Drag the rotation slider (0-360°)
• Or use quick buttons: 0°, 45°, 90°, 180°, 270°
• Perfect for angled labels and diagonal watermarks

Adjust Opacity

• Drag the opacity slider (0-100%)
• Or use quick buttons: 25%, 50%, 75%, 100%
• Lower values make text more transparent
• Ideal for subtle watermark effects

Advanced Text Effects

Character Spacing

• Adjust distance between characters
• Positive values: Spread letters apart
• Negative values: Bring letters closer

Line Height

• Adjust spacing between lines of text
• Perfect for optimizing multi-line layouts

Hollow Text Effect

1. Click "Enable" next to "Hollow Text"
2. Text center becomes transparent, keeping only the outline
3. Creates unique artistic effects!

---

Step 4: Text Tiling (Watermark Feature)

This is one of our most powerful features! Repeat text across your entire image to create professional watermarks.

How to Enable Tiling?

1. Select the text you want to tile
2. Find "Repeat Settings" in the properties panel
3. Click the "Enable" button

Three Tiling Modes

Single Mode

• Shows only one text instance
• For regular text editing

Grid Mode

• Arranges text in rows and columns
• Precise control over:
  • Columns: Number of horizontal instances
  • Rows: Number of vertical instances
  • Horizontal Spacing: Distance between left and right
  • Vertical Spacing: Distance between top and bottom

Tight Mode

• Text fills the entire image densely
• Only adjust "Tile Spacing":
  • 0x: Text completely adjacent
  • 0.5x: Slight spacing
  • 1x: Standard spacing
  • 2x: Sparse arrangement

Layout Control

Clip to Canvas

• Enabled: Only show text within image bounds
• Disabled: Allow text to extend beyond edges

Fit All Text on Image

• Click the "Auto Fit" button
• System automatically calculates optimal rows, columns, and spacing
• Ensures all text appears on the image

---

Toolbar Features Explained

The top toolbar contains all core operation buttons:

Zoom Controls

• Zoom In : Click to enlarge canvas (up to 400%)
• Zoom Out : Click to shrink canvas (down to 25%)
• Percentage Display: Shows current zoom level, click to reset to 100%

Perfect for viewing details or overall preview!

Undo and Redo

• Undo : Return to previous operation
• Redo : Restore the operation you just undid

We save every step, so feel free to experiment!

Reset

• Click the reset button to clear all edits
• Returns to the state right after upload
• System will ask for confirmation to prevent mistakes

Fullscreen Mode

Enter Fullscreen

• Click the "Enter Fullscreen" button
• Or press the F key on your keyboard

Fullscreen Advantages:

• Larger editing area for easier work
• Layers panel on the left
• Text properties panel on the right
• Image info in the bottom right corner

Exit Fullscreen

• Click the "Exit Fullscreen" button
• Or press F key again

---

Layer Management (Fullscreen Mode)

In fullscreen mode, the left layers panel manages all your text:

Layer List

• Shows all text you've added
• Each layer displays a text content preview
• Click a layer to select the corresponding text

Layer Action Buttons

Each layer has three action buttons:

Show/Hide

• Click the eye icon to hide text
• Hidden text won't appear in the final exported image
• Click again to show

Lock/Unlock

• Click the lock icon to lock text
• Locked text can't be moved or edited
• Prevents accidental changes to important content

Delete

• Click the trash icon to delete text
• System will ask for confirmation
• You can restore deleted text using undo

---

Image Information

Default Mode

In default mode, the right side shows detailed image information:

• Filename: Name of your uploaded image
• File Size: Size of the image file
• File Type: JPG, PNG, or WebP
• Dimensions: Width and height in pixels
• Aspect Ratio: Image proportion

Fullscreen Mode

In fullscreen mode, image info floats in the bottom right corner with a frosted glass effect, won't obstruct your editing area.

---

Export Your Image

When finished editing, click the "Export" button to download your work:

1. Click the "Export" button in the top toolbar
2. In the dialog, choose export options:
   • File format (PNG, JPG, WebP)
   • Image quality
   • Filename
3. Click the "Download" button
4. Image automatically saves to your downloads folder

---

Share Function

Click the "Share" button to quickly share your work:

• Copy link to share with friends
• Share to social media
• Embed on your website

---

FAQ

Why isn't my font changing?

Google Fonts need time to load. Please wait a few seconds, and the font will be applied automatically.

How do I create transparent watermarks?

1. Add text
2. Set opacity to 30-50%
3. Enable tiling
4. Choose Tight mode

My text is covered by the image, what should I do?

Use the layers panel to adjust layer order, or add stroke and shadow to improve visibility.

Can I edit multiple texts at once?

Yes! Select different layers in the layers panel to switch editing objects.

How do I save my editing progress?

Our edit history feature automatically saves every step. Use undo/redo buttons to navigate through history.

---

Keyboard Shortcuts

• F Key: Toggle fullscreen mode
• Ctrl/Cmd + Z: Undo
• Ctrl/Cmd + Y: Redo
• Delete: Delete selected text

---

Pro Tips

1. Professional Watermark: White text + black stroke + 30% opacity + tight tiling
2. Highlight Key Text: Large font + bold + shadow effect
3. Create Atmosphere: Try different font categories like handwritten or artistic
4. Angled Labels: Use 45° rotation + stroke effect
5. Batch Watermarking: Use "Fit All Text on Image" auto-fit feature

---