Sock Renderer

Loading Sock Designer…

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

Explicit canvas → yarn mapping — in each canvas yarn row, the color picker = the canvas color to match and the dropdown = the yarn it becomes. Each pixel (and its anti-aliased shades) snaps to the row whose picker color is closest. Use this to send two similar colors to specific yarns.

Selective strength 100%

Dark range 90

Palette match strength 100%

Palette threshold 95

Strict color family — dark and neutral pixels only snap to neutral yarn colors (black/gray/white); reds, blues, etc. stay in their hue family. Reduces red fringing in anti-aliased black text. Underfill multiply fringe fix — remap near-transparent edge pixels to the palette and set full alpha so yarn multiply does not show halos at mask boundaries.

Presets

Balanced (default sliders) Clean text & edges — strict family, tighter threshold (95) Soft palette blend — 55% strength, threshold 140 Strict palette only — strict family, threshold 72, no selective pass

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

Review

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

100%

Left (336×1012)

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

Right (336×1012)

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

Draw Color

RGB Yarn

Snap Settings

Snap to center Snap to grid Show grid Show sizes Show drawable height Show sportcuff

Guides

Use the Guides tool (G): drag a line, nudge with arrows / buttons, or Delete / Entf.

Band centers Grid edges (0…100%)

Snap to guides Show guides

Rows

Columns

Selected

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

▼ Transform

X Y W H

Radius

Fill

RGB Yarn

Text

Font Family

Font Size: 24px

Text Color

Formatting

▼ Align & Distribute

Canvas Selection

Distribute

▼ Duplicate

Offset X Offset Y

▼ Group

▼ Layers

Selective Color

Adjust one color family on the whole template (Photoshop-style CMYK). Example: Blues + Black to darken navy without touching red or white.

Colors Cyan 0% Magenta 0% Yellow 0% Black 0%

Relative Absolute

Apply to Live preview

Invert

Flip every color on the template (images, fills, and strokes). Uses the same Apply to setting as Selective Color. Click again to invert back; Undo also works.

Select one asset, then distribute across the visible size band (warp profile).

Rows Columns Width Height

% px

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 source). For profiles smaller than 510, all sock grids receive a center-cropped drawable band at render time (e.g. classic-450 → 900px, y=56–956); grids 24/25 also scale the mesh footprint to match. Saved and restored with your project.

Left sock

Right sock

Copy yarn settings

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

Text

Font Family

Font Size: 24px

Text Color

Formatting

Alignment

Opacity: 100%

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 — all options appear here
Edit text, font, size, color, formatting, alignment, opacity, position, and rotation
Double-click text on canvas to edit inline

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, or pick a Google Font from the Text tab font list.

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.

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:

Change design language?

Footer labels, legend text, and annotation copy will switch to the selected language.

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.

Zoom

Preview 100%

10%–500%. Mouse wheel over the preview also zooms. Crop coordinates stay in image space.

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 dev tools

Edit Default (srcRect) separately from size slots srcRect-1 … srcRect-6. Size slots fall back to srcRect when unset. Saves directly to grid*.json or _label_grid*.json.

Profile

Grid

x y w h

Grid

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