Skip to content

README_EN.md

Latest commit

 

History

History
205 lines (157 loc) · 4.93 KB

README_EN.md

File metadata and controls

205 lines (157 loc) · 4.93 KB

Sliceway

Sliceway Logo

Modern Photoshop File Processing and Export Tool

Ruby React Docker

🚀 Features

Core Features

  • Smart PSD Parsing: Automatically parse layers, slices, groups, and text from Photoshop files
  • Batch Export: Support multi-scale exports (1x, 2x, 4x)
  • Project Management: Complete project lifecycle management
  • Real-time Preview: Layer preview and property viewing

Advanced Features

  • Incremental Updates: Smart export based on content hash, only exporting changed content
  • Batch Operations: Support batch selection, deletion, and export
  • File Tracking: Export history and file change detection
  • Multi-format Support: Support for PSD and PSB file formats

🛠️ Quick Start

Using Pre-built Image

# Pull and run the pre-built image from Docker Hub
docker run -d \
  -p 4567:4567 \
  -v /path/to/data:/data \
  mark24code/sliceway:latest

Development Environment Setup

1. One-click Initialization

# Install all dependencies and initialize database
rake project:init

2. Start Backend Service

# Start Sinatra server (port 4567)
rake server:start

3. Start Frontend Development Server

# Start frontend development server (port 5173)
rake server:frontend

4. Access Application

Production Environment Setup

Build Frontend

cd frontend
npm run build

Start Production Server

RACK_ENV=production bundle exec ruby app.rb

🐳 Docker Usage

Build Image

docker build -t sliceway:1.0.0 -t sliceway:latest .

Run Container

Linux/MacOS

docker run -d \
  --name sliceway \
  -p 4567:4567 \
  -v /path/to/data:/data \
  mark24code/sliceway:latest

Windows

docker run -d ^
  -p 4567:4567 ^
  -v "C:\path\to\exports:/data" ^
  mark24code/sliceway:latest

Data Persistence

  • Uploaded Files: /data/uploads
  • Exported Files: /data/exports
  • Database: /data/db
  • Processed Files: /data/public/processed

📖 Usage Guide

0. PSD File Pre-processing (Recommended)

For better parsing results, it's recommended to pre-process your PSD files using Photoshop scripts before uploading:

  1. Run the Layer Processing Script

    • Use script: ps-plugins/convert_effects_to_smart_object/convert_effects_to_smart_object.jsx
    • This script converts layer effects to smart objects for better compatibility

  2. How to Run Photoshop Scripts

    • Open your PSD file in Photoshop
    • Go to menu: File → Scripts → Browse...
    • Select and import the .jsx script file mentioned above
    • Wait for the script to complete execution

  3. Save the Processed File

    • Save the processed PSD file as a copy
    • Upload this copy to the platform

Note: While pre-processing is optional, it's highly recommended for PSD files with complex effects to ensure optimal parsing and export results.

1. Create Project

  1. Open the frontend interface
  2. Click "New Project" button
  3. Upload PSD/PSB file (preferably pre-processed)
  4. Set project name and export path

2. Process Files

  • System automatically parses PSD files
  • View parsed layers, slices, and groups
  • Support filtering and search by type

3. Export Images

  1. Select layers to export
  2. Set export scales (1x, 2x, 4x)
  3. Click export button
  4. Exported images saved to specified directory

4. Batch Operations

  • Support multi-project batch deletion
  • Status-aware confirmation dialogs
  • Real-time progress display

🔧 Configuration

Environment Variables

# Server Configuration
RACK_ENV=production
UPLOADS_PATH=/data/uploads
PUBLIC_PATH=/data/public
DB_PATH=/data/db/production.sqlite3
EXPORTS_PATH=/data/exports
STATIC_PATH=/app/dist

Port Configuration

  • Backend Service: 4567
  • Frontend Development: 5173
  • Docker Container: 4567

📋 System Requirements

Development Environment

  • Ruby 3.0+
  • Node.js 18+
  • SQLite3

Production Environment

  • Docker 20.10+
  • 2GB+ RAM
  • 10GB+ Disk Space

🐛 Troubleshooting

Common Issues

  1. Port Conflicts: Check if ports 4567 and 5173 are occupied
  2. File Permissions: Ensure data directories have read/write permissions
  3. Insufficient Memory: Ensure enough memory when processing large files

Debug Mode

DEBUG=true bundle exec ruby app.rb

Made with ❤️ for designers and developers

中文版 | English Version