KNAS

How to Upload and Manage Images in Grid Tool

2025-12-10

Grid ToolImage UploadTutorial

Image upload is a core step in using Grid Tool. This article provides a detailed guide on how to upload images for each cell in the grid and manage image style settings.

Selecting Cells

Before uploading images, you need to select the cell you want to work with. Grid Tool provides an intuitive cell selection interface:

  1. View cell numbers: Each cell has a corresponding number (B1, B2, B3, etc.)
  2. Click to select: In the "Image Settings" area, click the corresponding button in the "Serial" section to select a cell
  3. Click again to deselect: If a cell is already selected, click again to deselect it

Selection Tips

  • Selected cell buttons are highlighted
  • Unselected cells are displayed in outline style
  • Only one cell can be selected at a time for operations

Single Image Upload

After selecting a cell, you can upload images in the following ways:

Method 1: File Picker

  1. Select the target cell (e.g., B1)
  2. In the "Upload" area, click the file input box
  3. Select an image file from the file manager
  4. The image will automatically upload and display in the corresponding cell

Method 2: Random Image

If you want to quickly preview the effect, you can use the random image feature:

  1. Select the target cell
  2. Click the "Load Random Image Replace" button
  3. The system will automatically load a test image

Supported Image Formats

Grid Tool supports common image formats:

  • JPEG/JPG
  • PNG
  • WebP
  • GIF

Batch Image Upload

If you need to upload images for multiple cells at once, you can use the batch upload feature:

  1. Click the "Batch Upload" button in the top right of the image settings area
  2. The system will automatically detect which cells don't have images yet
  3. Select multiple image files
  4. Images will be automatically assigned in cell order

Batch Upload Tips

  • Ensure image filenames are ordered for easier identification
  • You can select all needed images at once
  • The system will prioritize filling empty cells

Image Style Settings

After uploading images, you can set independent styles for each cell:

Rounded Corners

  • Range: 0-100 pixels
  • Purpose: Make image edges softer
  • Recommendation: Usually 8-16 pixels works best

Border Settings

Border Width

  • Range: 0-20 pixels
  • Purpose: Add borders to images to enhance visual separation
  • Recommendation: Thin borders of 1-3 pixels usually work well

Border Color

  • Selection method: Click the color picker
  • Purpose: Customize border color to coordinate with background or overall style
  • Recommendation: Choose colors similar to the background gradient or use contrasting colors to highlight images

Style Application Methods

Grid Tool provides two style application methods:

Individual Mode (Default)

  • Only applies style modifications to the currently selected cell
  • Suitable for scenarios where different cells need different styles

Sync Mode

  • When enabled, modifying one cell's style automatically applies to all cells
  • Suitable for scenarios requiring a unified style
  • Click the "Sync Mode" button in the top right to enable/disable

Image Management Tips

Replacing Images

If you need to replace an already uploaded image:

  1. Select the corresponding cell
  2. Upload a new image
  3. The new image will automatically replace the old one

Clearing Images

Currently, Grid Tool doesn't support directly clearing images, but you can achieve a similar effect by uploading transparent images or re-uploading other images.

Image Preview

  • The preview area on the right displays images for all cells in real-time
  • You can view the overall effect at any time
  • It's recommended to carefully check that each cell's image is correct before exporting

Best Practices

Image Selection Tips

  1. Unified style: Try to select images with a unified style to ensure overall coordination
  2. Clarity: Use high-resolution images to avoid blurriness
  3. Aspect ratio: Although Grid Tool automatically adjusts, using appropriately proportioned images works better
  4. Relevant content: Ensure image content is related to the episodes or series you want to display

Style Unification Tips

  1. Enable sync mode: If all cells need the same style, it's recommended to enable sync mode
  2. Unified rounded corners: Set the same rounded corner value for all cells to maintain visual consistency
  3. Use borders carefully: Borders can enhance separation, but excessive use may appear cluttered

Workflow Recommendations

  1. First select layout and aspect ratio
  2. Batch upload all images
  3. Enable sync mode and set unified styles
  4. Fine-tune individual cells based on preview
  5. Finally adjust background and overall styles

Frequently Asked Questions

Q: Can I upload images of different sizes?
A: Yes. Grid Tool will automatically adjust image sizes to fit cell dimensions.

Q: Are uploaded images saved to the server?
A: No. All image processing is done locally in the browser and is not uploaded to the server.

Q: Can I set different styles for multiple cells simultaneously?
A: Yes. After disabling sync mode, you can set different styles for each cell individually.

Q: What if the image order is wrong during batch upload?
A: You can manually select each cell and upload or replace images individually.

Conclusion

Image upload and management are key steps in creating grid posters. By properly using single upload, batch upload, and style settings, you can quickly create professional-grade grid posters. Remember, the preview area displays effects in real-time, so try different combinations to find the configuration that works best for you.