Sock Renderer

Sock Designer

Status —

Projektverknüpfung —

Revision —

…

Hash: —

Revisions

Live

Canvas Color Harmonization

Selective correction and optional soft matching to the currently selected yarn colors.

Enabled

Apply in live preview Apply in export/final render Selective correction Palette harmonization

Selective strength 100%

Dark range 90

Palette match strength 100%

Palette threshold 180

Sock template harmonization uses background and canvas yarn colors (per side). Uploaded cuff PNGs use only Cuff harmonize 2 and 3 as their palette (not the main Cuff yarn), so the design does not collapse into the same color as the cuff multiply.

Cuff design (upload) harmonization runs only when you set at least one of that foot’s Cuff harmonize 2 or Cuff harmonize 3. The main Cuff color still tints the cuff part overlay but is not used to remap the uploaded graphic. If both extras are empty, the cuff image is left unharmonized.

⚪

Color Selection

Master Toe / Heel / Cuff

Left Sock

Cuff

Match Yarn:

Extra palette for uploaded left cuff PNG harmonization (only these two slots; main Cuff is not used for remapping the upload).

Cuff harmonize 2

Match Yarn:

Cuff harmonize 3

Match Yarn:

Toe

Match Yarn:

Heel

Match Yarn:

Right Sock

Cuff

Match Yarn:

Extra palette for uploaded right cuff PNG harmonization (only these two slots; main Cuff is not used for remapping the upload).

Cuff harmonize 2

Match Yarn:

Cuff harmonize 3

Match Yarn:

Toe

Match Yarn:

Heel

Match Yarn:

Zoom:

Template Editor

Left (336×1012)

Breite des Designs entspricht dem Umfang der Socke – ca. 20 cm ungetragen, getragen entsprechend Beinumfang.

1234567891011121314151617181920

Right (336×1012)

Breite des Designs entspricht dem Umfang der Socke – ca. 20 cm ungetragen, getragen entsprechend Beinumfang.

1234567891011121314151617181920

Draw Color

RGB Yarn

Snap Settings

Snap to center Snap to grid Show grid Show sizes Show sportcuff

Select an object (Ctrl+click for multi-select).

▼ Transform

X Y W H

Radius

Fill

RGB Yarn

Font Family

Font Size: 24px

Text Color

Formatting

▼ Align & Distribute

Canvas Selection

Distribute

▼ Duplicate

Offset X Offset Y

▼ Group

▼ Layers

Design Presets

Logo presets create placeholders—upload your logo via Media Library and replace them.

Copy Templates

Sock Design GPT

Open Sock Design GPT in a new tab. `Paste from clipboard` adds the copied image to `Photos`, just like a normal media import.

Open Sock Design GPT

You can also paste images directly into the media browser.

Cuff band (336×60 px)

Uploads are scaled to exactly 336×60. A live preview also appears above each 336×1012 canvas (with Zellbreite strip), not inside the Konva stage. Left cuff warps through grid4, 5, 7, 9 (left template + cuff upload). Right cuff uses grid18, 21, 22, 23. grid24 / grid25 are full-template warps (336×1012, no cuff upload). Saved and restored with your project.

Left sock

Right sock

Canvas yarns (legend)

5 colors + fallback each, per foot. Fallback is drawn under the main card on the render.

Linker Fuß (Left)

Background

Fallback

1

Fallback

2

Fallback

3

Fallback

4

Fallback

5

Fallback

Rechter Fuß (Right)

Background

Fallback

1

Fallback

2

Fallback

3

Fallback

4

Fallback

5

Fallback

Add text elements to your design.

Element Properties

Text Element

Font Family

Font Size: 24px

Text Color

Formatting

Position

X

Y

Size

Width (px)

Height (px)

Size is read-only. Use resize handles on canvas to adjust.

Rotation: 0°

Select a text on canvas to edit its properties here.

How to use

Click Add Text to place a text block
Select the text on canvas to edit in Edit tab
Use formatting options in the Edit panel
Double-click text on canvas to edit

Upload Images / SVG

PNG, JPG, SVG, GIF, PDF (Max 5MB)

Add from URL

Paste SVG code

Your Media (0)

No images uploaded yet.

Use each image card's Edit button to open the optional editor modal.

No project link yet.

Project link

Background image for the active canvas. Set background color in the Project tab.

Background image

Upload Background Image

Upload an image or PSB as canvas background.

Upload custom font files to use in text elements.

Upload Font Files

.ttf, .otf, .woff, .woff2 (max 2MB)

Custom Fonts (0)

Fonts appear in the text font selector.

No custom fonts uploaded.

Upload .ttf or .otf files above.

Loading…

Production Readiness Check

Left Sock

Left sock at 168px (2x display)

Right Sock

Right sock at 168px (2x display)

1. Can this design be reduced to 6 colors?

Auto-detected colors: —

2. Do all fonts have min height of 5px?

—

3. Does the design avoid gradients?

—

4. Does the design look good at 168px resolution?

Review the preview. 1px ref:

Grok from render

Render preview (sent to Grok)

Current render preview

Capturing render…

Grok image

Grok output

Also under Templates → Photos — drag onto a sock canvas to use.

Uses the shared stable prompt (Supabase + browser cache), context from the current left/right templates, and 2K output.

Grok (advanced)

Preview (sent to Grok)

Include yarn legend

Current render preview

Rendering preview…

Upload images or paste from clipboard (Ctrl+V) while this dialog is open, or use from templates to analyze the current left/right sock bitmaps in the editor. Generate context fills the box below as Style context → Industry/theme, Mood, Color environment, Background/surface, Lighting, Overall art direction. Images are only sent when you run a generator; combined with the stable prompt when you generate the sock image.

Choose images

Brand / visual context (editable)

Stable image prompt

Shared for all users in Supabase when configured; cached in this browser. Sent to Grok with the brand / visual context above.

Grok output size 2K is higher quality from Grok (may cost more).

Grok result

Grok output

The same image is listed in Templates (right sidebar) under the Photos tab — drag it onto a sock canvas to use it.

Design Builder

Base color

Stripes

Count

Height (px)

Spacing (px)

Default color

Per-stripe colors

Logo

Crop area (upload logo first)

Logo count

Layout

Width (%)

Position Y (0–1)

Pattern grid

Repeat a logo from Photos. Each row: Number (logos), X, Y (template px 336×1012), and Spacing: distance between logo centers in px. Spacing 0 = spread evenly across the width, then shift by X. Spacing greater than 0 = fixed center-to-center distance, row centered at sock middle plus X.

Enable pattern grid

Logo from Photos

Rows

Placement W (px)

Placement H (px)

Bottom text

Enable bottom split text

Text

Font

Size (%)

Position Y (0–1)

Rotation (°)

Split mode

Preview Left

Live preview

Preview Right

Live preview

Asset Editor

Edit selected image

Pipeline: Farbkorrektur → Freistellen (Chromakey) → Zuschnitt

Global (Konva-style HSV matrix)

Hue 0° Saturation exponent 0% Value exponent 0%

Selective hue shift

Method Source hue Width (deg) Shift (deg)

Chromakey transparency

Apply Freistellen

Key color Hex value

Tolerance 0

Click in preview on the background color that should become transparent.

Crop (%)

X Y Width Height

Drag on the preview to set crop.

Replace all canvas instances of source asset

Load Design

Load a design by hash or browse your organization's designs.

Design Hash or Wizard ID

Wizard import mode

Enter a saved design hash (SOC-...) or a wizard design ID (WIZ-...) to load from the database.

Matching revisions

Sign in to see your organization's designs.

Loading…

Premium Sock Customization Platform

Welcome to

Schlauesocke

The professional platform for custom sock production. Create unique designs and start your order in minutes.

Custom Designs
Custom socks tailored to your vision.
Premium Quality
High-quality materials and craftsmanship.

Sign In

Sign in to your account

First visit? If you don't have an account yet, click below.

Email Address

Password

No account yet?

Register

Create your account

Email Address

Password

Confirm Password

Already have an account?

Grid JSON (dev)

Grid

Drag yellow dots on the canvas to fine-tune grid points; click Save current to write to file.