Darstellung
Dark Mode
Halftone
Punktabstand 10 px
Punktgröße 0.85
S-Kurve

/* - PORTFOLIO - MAI 2026 - */

Hi, mein name ist Kester. Ich studiere Druck- und Medientechnik an der Berliner Hochschule für Technik.

Schwerpunkte: Corporate Design, Visual Storytelling und Verpackungstechnik - mit Interesse an kulturellen Institutionen, identitätsstiftendem Design und der Schnittstelle von Medien, Konstruktion und App-Entwicklung.

Ausgewählte Projekte

01
Schukurama
Corporate Design für ein Programmkino in Beeskow · vollständiger Styleguide
Corporate Design Logo Styleguide
SoSe 2025
BHT Berlin
02
Kunsthalle Berlin
Look & Feel für eine fiktive Berliner Kunsthalle · Positionierung, Branding, Kampagne
Branding Visual Storytelling Plakat Social Media
WiSe 2025/26
BHT Berlin
03
Sicherheitsverpackung Ei
Fallschutzverpackung aus Karton
Verpackungsdesign Konstruktion CAD Materialforschung
WiSe 2025/26
BHT Berlin
04
Fotobuch 2026
Fotografie im Studio · Licht, Porträt, Modeserien, gedrucktes Fotobuch
Fotografie Fashion Shoot Editorial Print
WiSe 2025/26
BHT Berlin
05
Rate the Sip
Native iOS-App zum Tracken und Bewerten von Softdrinks
iOS App SwiftUI UX / UI Persönliches Projekt
2023–heute
Privat
06
Portfolio Website
Design und Entwicklung dieser Portfolio-Seite · Pure HTML, CSS, JavaScript
Web Design HTML / CSS JavaScript Typografie
2026
Privat

Werkzeuge

Halftone Generator
Bild hochladen, Rastereffekt live anpassen und exportieren
Tool Canvas API JavaScript
2026

Über

Kurzbiografie

Kester Martens, geboren in Braunschweig, lebt und studiert in Berlin. Bachelorstudium Druck- und Medientechnik an der BHT Berlin seit 2021, zuvor Verpackungstechnik-Schwerpunkt und ein Jahr an der TH Köln.

Interesse an der Schnittstelle von Corporate Design, Verpackungskonstruktion und visueller Kommunikation. Offen für Praktika und Projekte im Bereich Kommunikations- und Verpackungsdesign.

Kompetenzen

  • Corporate Design & Identität
  • Verpackungstechnik & Konstruktion
  • Typografie & Schriftsatz
  • Visual Storytelling
  • Grundlagen Marketing & Online-Marketing
  • Adobe CC - Ps, Id, Ai, Pr, Ae
  • AutoCAD
  • MS Office

Bildungsweg

  • BHT Berlin · B.Eng. Druck- und Medientechnik · 2021–heute
  • TH Köln - Druck und Medientechnik, 2020-2021

Berufserfahrung

  • Serious Fun GmbH, Berlin - Kassenleitung, 2022 - heute
  • Astor Filmtheater, Braunschweig - Service, 2019 - 2020
  • Jugendherberge Berlin International - FSJ, 2018 - 2019

Sprachen

  • Deutsch - Muttersprache
  • Englisch - sehr sicher
  • Italienisch - Grundkenntnisse (Duolingo level 13)

Corporate Design & Identity · SoSe 2025← Alle Projekte

Schukurama

Entwicklung eines vollständigen Corporate Designs für das Programmkino Schukurama in Beeskow.

Kurs
Corporate Design & Identity
Hochschule
BHT Berlin
Semester
SoSe 2025
Team
K. Martens,
K. Splittgerber-Hassane,
E. Taki
Rolle
Logoentwicklung, Farbsystem, Styleguide

Eindrücke

Styleguide Cover
Styleguide Cover
Logo / Logomarke
Logo / Logomarke
Farbsystem
Farbsystem
Poster-Beispiele
Poster-Beispiele
Ticket / Visitenkarte
Ticket / Visitenkarte

Ausgangssituation & Ziel

Das Schukurama in Beeskow versteht sich als kultureller Begegnungsort und identitätsstiftender Raum für die Region. Das bestehende visuelle Erscheinungsbild war austauschbar und entsprach nicht dem kulturellen Anspruch des Hauses.

Ziel war eine vollständige Neupositionierung: von austauschbar zu individuell, von traditionell zu originell. Das neue Corporate Design sollte die Tradition des analogen Kinos mit einem zeitgemäßen, reduzierten System verbinden.

Prozess

01
Analyse
Positionierungsanalyse, Wertemodell, Zielgruppendefinition. Verortung im Spannungsfeld traditionell / originell und austauschbar / individuell.
02
Logoentwicklung
Verschmelzung zweier Motive: Gebäudearchitektur des Schukurama und analoger Filmstreifen. Bild- und Wortmarke, Star- und Zug-Prinzip.
03
Farbsystem
Primärsystem Schwarz & Weiß. Sekundäres Genrefarb-System: 6 Farben kodieren emotionale Kategorien des Kinoprogramms.
04
Typografie
Oswald als Markenschrift für Überschriften und Logo. Nimbus Sans als Sekundärschrift für Fließtexte und Korrespondenz.
05
Anwendungen
Visitenkarte, Briefbogen, Poster, Instagram, Webseite, Ticket (digital & Druck), Popcorntüte, Merchandise.
06
Styleguide
Zusammenführung aller Elemente in einem 42-seitigen Styleguide mit Schutzraum-Regeln, Do's & Don'ts und Anwendungsbeispielen.

Farbsystem

Primärfarben

Schwarz & Weiß erinnern an die Anfänge des Kinos — monochrom, zeitlos, markant. Der starke Kontrast setzt sich bewusst vom bunten Kinoerlebnis ab.

#0A0B0D
Schwarz
#FFFFFF
Weiß

Genrefarben

Jede Farbe steht für eine emotionale Kategorie des Kinoprogramms — gezielt eingesetzt um Stimmungen zu unterstreichen. Hover für Details.

#DE644D
Rot
Unterhaltung & Spannung
Aktion
Thriller
Krimi
#F7C85B
Gelb
Humor & Leichtigkeit
Komödie
Musical
Animation
#84BA66
Grün
Wissen & Realität
Dokumentation
#6E63A7
Lila
Fantasie & Imagination
Fantasy
Science Fiction
#EBA7BE
Pink
Emotion & Beziehung
Drama
Romantik
#1A1A1A
Horror
Dunkelheit & Angst
Horror

Deliverables

Logoentwicklung
Bild-, Wort- und Kombinationsmarke
Styleguide
42 Seiten, alle Anwendungsregeln
Poster-System
Genrefarben, Film-Layout-Raster
Visitenkarte
85 × 55 mm, zwei Seiten
Ticket
Digital & Druckversion
Instagram
2-Slide-System mit Genrefarben
Merchandise
Crew-Shirts, Popcorntüte
Webseite
Screendesign-Konzept

Visual Storytelling · WiSe 2025/26← Alle Projekte

Kunsthalle Berlin

Entwicklung eines vollständigen Look & Feel für eine fiktive Berliner Kunsthalle - von der strategischen Positionierung über Farbkonzept und Typografiesystem bis zu Plakaten, Tickets und Social Media.

Kurs
Visual Storytelling
Hochschule
BHT Berlin
Semester
WiSe 2025/26
Team
K. Martens, N. Bäumer, K. Splittgerber-Hassane
Rolle
Positionierung, Farbkonzept, Anwendungen

Eindrücke

Billboard-Kampagne
Billboard-Kampagne
Logo / Wortmarke
Logo / Wortmarke
Außenbanner
Außenbanner
Tickets
Tickets
Instagram
Instagram

Leitidee & Positionierung

Die Kunsthalle Berlin ist kein statisches Gebäude, sondern eine dynamische Infrastruktur für den Diskurs. Weg vom elitären White Cube - hin zu einer Ästhetik des Unfertigen. Das Konzept vereint Hochkultur und Subkultur: die rohe Energie Berlins wird in ein visuelles System übersetzt.

Klare Abgrenzung von etablierten Institutionen durch Radikale Transparenz und Gemeinschaftseigentum. Budgetierung, Aufbau und Debatte sind sichtbar - die Marke als Chor, nicht als Monolog.

Vier Leitprinzipien

01
Radikale Transparenz
Nichts verbergen. Budgetierung, Aufbau und Debatte sind sichtbar und Teil der Kommunikation.
02
Permanente Provisorik
Berlin ist dazu verdammt, immerfort zu werden. Die Identität ist Under Construction - bewusst und programmatisch.
03
Polyphone Autorenschaft
Die Marke als Chor, nicht als Monolog. Platz für Intervention, Widerspruch und kollektive Stimmen.
04
Industrielle Eleganz
Schönheit im Beton, Asphalt und im Utilitären der Stadt. Ästhetik des Unfertigen als bewusste Haltung.

Zielgruppen

Der Kultur-Nomade
Internationale Besucher:innen, die das „echte" Berlin suchen - abseits der polierten Museumsinsel. Sie wollen Erlebnisse, die sich spezifisch für den Ort anfühlen.


Der Kiez
Anwohner:innen, für die Zugänglichkeit und Alltagsrelevanz entscheidend sind - um dem Vorwurf der Elitisierung entgegenzuwirken.

Berlin Creative Class & Gen Z
Künstler:innen, Designer:innen und Kulturarbeiter:innen, die skeptisch gegenüber Corporate Art Washing sind. Sie erwarten Marken, die authentisch und visuell anspruchsvoll sind.

Farbkonzept

Primärfarben

Urban und reduziert — die neutrale Basis des Systems.

#1c1c1c
Anthrazit
#f6f3ec
Elfenbein

Akzentfarben

Kräftiges Orange als Signal, Grüntöne für kulturelle Tiefe.

#ff7f11
Orange
#acbfa4
Grün
#e2e8ce
Pastellgrün

Deliverables

Logo-System
Wortmarke + Bildmarke (stacked)
Außenbanner
Hochformat-Fahnen für die Fassade
Billboard
Ausstellungskampagne im Stadtbild
Tickets
Besuchertickets mit Kunstabbildungen
Instagram
2-Slide-Posts, Profilkonzept
Präsentation
Vollständige Strategie-Präsentation

Verpackungstechnik · 2025/26← Alle Projekte

Sicherheits­verpackung Ei

Entwurf und Konstruktion einer Fallschutzverpackung für ein rohes Hühnerei aus monolithischem Faltkarton (FBB 290 g/m²). Die Verpackung musste einen Sturz aus 1,80 m unbeschadet überstehen.

Kurs
Verpackungstechnik
Hochschule
BHT Berlin
Fallhöhe
1,80 m
Material
MetsäBoard Classic FBB, 290 g/m²
Werkzeuge
AutoCAD, manuelle Konstruktion

Konstruktion & Eindrücke

Stanzplan / CAD-Zeichnung
Stanzplan / CAD-Zeichnung
Fertige Verpackung
Fertige Verpackung
Außenhülle gefaltet
Außenhülle gefaltet
Inneneinsatz / Podest
Inneneinsatz / Podest
Falltest
Falltest

Aufgabe & Rahmenbedingungen

Ein rohes Hühnerei (Größe M, ca. 55 g, Länge 58 mm, max. Ø 42 mm) muss einen Sturz aus 1,80 m Höhe unbeschadet überstehen. Die Verpackung darf ausschließlich aus MetsäBoard Classic FBB 290 g/m² (0,55 mm) bestehen - kein Schaum, keine Polsterung, kein Kleber.

Die potenzielle Aufprallenergie von 0,97 Joule (E = m·g·h) muss allein durch die Konstruktion abgebaut werden. Da FBB ein steifer Faltkarton ohne Polsterwirkung ist, muss die Energie über einen konstruktiven Bremsweg durch kontrolliertes Verformen abgebaut werden.

Konstruktionsprinzip

01
Außenhülle
Quaderförmige Faltbox (60 × 60 × ~120 mm). Primärschutz, Schmutzbarriere und stabiler Rahmen für Logistik und Stapelbarkeit.
02
Inneneinsätze (2×)
Identische 3D-Podeste, aus FBB gestanzt und gefaltet. Sternförmiger Einschnitt (Ø 35 mm) zur axialen Fixierung des Eis.
03
Suspension
Das Ei schwebt berührungslos zwischen den Podesten - eingeklemmt an Ober- und Unterseite, ohne Kontakt zur Außenhülle.
04
Knautschzone
Beim Aufprall kollabiert das untere Podest kontrolliert. Die Faltstruktur knickt über 2-3 cm ein und baut 0,97 J als Verformungsarbeit ab.

Material & Wirtschaftlichkeit

Ein-Material-Lösung: Ausschließlich FBB 290 g/m² - sortenreines Recycling, vereinfachte Beschaffung. Da beide Inneneinsätze identisch sind, wird nur eine Stanzform für die Inlays benötigt. Das reduziert Werkzeugkosten gegenüber zwei unterschiedlichen Teilen.

Stanzbogennutzung: Alle drei Teile (1× Hülle, 2× Inlay) werden auf einem Stanzbogen (1020 × 720 mm) durch Nesting platzsparend verschachtelt. Kompromiss: drei Teile erfordern einen Montageschritt, der Zeit und Kosten pro Stück erhöht.

Logistik & Stapelbarkeit

Die quaderförmige Außenbox ist die Idealform für alle logistischen Prozesse. Die 3D-gefalteten Inneneinsätze wirken wie tragende Säulen - sie leiten Stapeldruck stabil durch die Konstruktion, ohne die Knautschzone zu komprimieren.

Die Quaderform ist vollständig modular: Einzelverpackungen lassen sich lückenlos zu 12er- oder 24er-Trays bündeln, deren Maße auf Standard-Europaletten (1200 × 800 mm) optimiert sind.

Deliverables

Konstruktionsdokument
Physikalische Analyse, Funktionsprinzip, Materialwahl
CAD-Stanzplan
AutoCAD-Zeichnung (.dwg), maßstabsgetreu
Prototyp
Handgefertigtes Modell aus FBB 290 g/m²
Falltest
1,80 m - Ei unbeschädigt

Fotografie DMT · WiSe 2025/26← Alle Projekte

Fotobuch 2026

Ein semester-begleitendes Fotoprojekt bei Prof. A. Umstätter - von Farbstudien über Studioporträts bis zum Fashion Shoot. Alle Serien wurden ausgedruckt und in einem gebundenen Fotobuch im Format 20 × 20 cm zusammengestellt. Zeigung beim Rundgang DMT am 13. Februar 2026.

Kurs
Fotografie DMT
Hochschule
BHT Berlin
Semester
WiSe 2025/26
Format
Fotobuch, 20 × 20 cm, gedruckt
Zeigung
Rundgang DMT, 13. Feb 2026

Eindrücke

Fotobuch Cover
Fotobuch Cover
Fashion Shoot - Serie
Fashion Shoot - Serie
Studio Portrait
Studio Portrait
Lichtstudie
Lichtstudie
Buchinnenseite
Buchinnenseite

Konzept & Semesterstruktur

Das Semestermotto lautete be disruptive - no fear. Ziel war es, fotografisch mutig zu arbeiten, Konventionen zu brechen und eine persönliche visuelle Sprache zu entwickeln. Alle Aufgaben wurden im quadratischen 1:1-Format erarbeitet und fortlaufend ausgedruckt.

Am Ende des Semesters wurden alle Serien zu einem gebundenen Fotobuch im Format 20 × 20 cm zusammengestellt. Das Buch diente gleichzeitig als Abgabe und als Ausstellungsobjekt beim Rundgang am 13. Februar 2026.

Fünf Aufgaben

01
Farben
Fotografische Auseinandersetzung mit Farbe als Bildmittel. Oktober.
02
Ei
Hausaufgabe: Freie fotografische Arbeit mit dem Motiv Ei. Ausgedruckt mitgebracht.
03
Weißes T-Shirt
Studio-Shooting mit Model. Das weiße T-Shirt als Ausgangspunkt - Schminke, Styling, Deko, Inszenierung.
04
Licht Studio Portraits
Gruppenarbeit: Jede Gruppe inszeniert eine Lichtsituation, alle im Studio werden fotografiert. Serie aus einer Lichtsituation.
05
Fashion Shoot
Planung und Durchführung eines Modeshots im Studio oder on location. Zwei Serien: eine mit, eine ohne KI. Je 5-10 Fotos.
Fotobuch
Alle Serien zusammengestellt in einem gedruckten Buch 20 × 20 cm. Zeigung beim Rundgang DMT.

Fashion Shoot - Prozess

01
Konzept & Mood
Thema festlegen, Moodboard erstellen, Storyline entwickeln - mit Abstimmung mit der Lehrenden.
02
Team & Logistik
Fotograf, Models, Stylist, Hair & Make-Up, Assistenz. Budget, Location, Equipment, Zeitplan.
03
Shooting Day
Aufbau, Briefing, Testshots, Shooting im Studio oder on location. Dezember / Januar.
04
Nachbereitung
Bildauswahl, Retusche, Abgabe. Zeigung beim Rundgang am 13. Februar 2026.

Deliverables

Fotobuch
Gedruckt, gebunden, 20 × 20 cm
Fashion-Serie
5-10 Bilder, ohne KI
KI-Serie
5-10 Bilder, mit KI gemischt
Rundgang
Ausstellung, 13. Feb 2026, BHT

iOS App · Persönliches Projekt · 2023–heute← Alle Projekte

Rate the Sip

iOS-App zum Tracken und Bewerten von Softdrinks. Entstanden aus einer persönlichen Notion-Datenbank. Bewertungssystem, Barcode-Scanner, Share Cards, Karte, Widget.

Typ
iOS App
Technologie
SwiftUI, Swift, SwiftData
Umfang
~6.000 Zeilen, 15 Swift-Dateien
Daten
298 Drinks, 133 Produktfotos

Screenshots

QuickAdd Wizard
QuickAdd Wizard
Drink-Liste / Übersicht
Drink-Liste / Übersicht
Statistiken
Statistiken
Share Card - Klassisch
Share Card - Klassisch
Share Card - Minimal
Share Card - Minimal
Karte / Standorte
Karte / Standorte

Ausgangssituation

Seit 2023 führe ich eine persönliche Datenbank mit bewerteten Softdrinks - mit der Zeit wuchs diese über 300 Einträge an. Um die Aufnahme zu erleichtern, habe ich diese App entwickelt. Das Bewertungssystem berücksichtigt Geschmack, Zuckergehalt, Verpackungsökologie, Preis und Bio-Zutaten (max. 11 Punkte).

Bewertungssystem

1-5
Geschmack
Subjektive Sternbewertung. Persönliche Präferenz als Ausgangspunkt.
0-2
Zucker & Süßstoffe
2 Punkte: unter 5g ohne Süßstoff. 1 Punkt: 5-8g oder unter 5g mit Süßstoff. 0 Punkte: über 8g/100ml.
0-2
Verpackung
2 Punkte: Mehrweg-Glas oder PET. 1 Punkt: Dose, Einweg-PET, Tetra Pak. 0 Punkte: Einweg-Glas.
0-1
Preis
Dynamisch: 1 Punkt wenn Preis/100ml ≤ Durchschnitt aller Drinks. 0 Punkte wenn darüber.
+1
Bio-Bonus
1 Bonuspunkt wenn mindestens eine Zutat aus biologischem Anbau.
11
Maximal
Summe aller Kriterien. Basis für Rankings, Top-10-Listen und Vergleichsdiagramme.

Features

QuickAdd Wizard
11-stufiger geführter Eingabeflow mit Barcode-Scan (AVFoundation), Foto-Aufnahme, Geschmacks-Tags und GPS-Standorterkennung.
Open Food Facts
Automatisches Autofill via API: Name, Marke, Zucker, Süßstoffe, Koffein, Bio-Status, Menge - direkt aus dem Barcode-Scan.
Varianten-Erkennung
3-Pass-Algorithmus: Barcode → Name+Marke+Geschmack-Overlap → Cross-Pass-Merge. Erkennt denselben Drink mit und ohne Barcode.
Share Cards
3 Designs: Klassisch, Minimal, Split. 9:16 Format (1170×2079px, 3×). Score-Ring, Pip-Balken, Foto als Hintergrund. Export via iOS Share Sheet.
Karte
Apple Maps mit allen besuchten Städten. Dynamisches Geocoding. Tap auf Stadt → alle Drinks an diesem Ort.
Statistiken
Top-10-Drinks, Marken- und Verpackungsverteilung, Durchschnittswerte. Visualisiert mit Swift Charts.
Widget
Home-Screen Widget (2×2) mit Deep Links zu QuickAdd und Drink-Liste via WidgetKit.
Foto-Import
Python-Script mit Fuzzy-Matching (SequenceMatcher) importiert 133 von 152 Fotos aus Notion automatisch und benennt sie korrekt.

Technologie-Stack

SwiftUI (iOS 17+) - vollständig deklarative UI, ~6.000 Zeilen, ~15 Quelldateien


SwiftData / UserDefaults - lokale Persistenz. 298 Seed-Drinks als Swift-Literal, JSON-Persistenz, Fotos im Documents/DrinkPhotos/-Verzeichnis.


Swift Charts - Statistik-Visualisierungen. WidgetKit - Home-Screen Widget. ImageRenderer - PNG-Export für Share Cards.

AVFoundation - Barcode-Scanner. MapKit - Standortkarte mit Geocoding. Open Food Facts API - Produktdaten via Barcode.


Performance: Caching-Architektur in DrinkStore - `avgPricePer100ml`, Gruppen und Statistiken werden nur bei Datenänderung neu berechnet. Async Save auf Background-Thread.


Daten: 298 Drinks migriert, 133 Produktfotos automatisch verknüpft. Entwicklungszeit: mehrere Wochen iterativ.

Deliverables

iOS App
Vollständig in SwiftUI, iOS 17+
Notion-Datenbank
298 Einträge, öffentlich auf ratethesip.notion.site
Bewertungssystem
Dokumentiertes Regelwerk, 11-Punkte-System
Python-Import-Script
Fuzzy-Matching, 133 Fotos aus Notion migriert

Web Design & Entwicklung · Persönliches Projekt · 2026← Alle Projekte

Portfolio Website

Konzeption, Design und Umsetzung dieser Portfolio-Seite. Vollständig in HTML, CSS und Vanilla JavaScript realisiert — ohne Framework, ohne Build-Step. Ein typografisches System auf Basis von DM Mono und DM Serif Display, mit eigenem Routing, Dark Mode, Bild-Grid und Lightbox.

Typ
Portfolio-Website
Technologie
HTML, CSS, JavaScript
Umfang
1 Datei, ~1 500 Zeilen CSS
Schriften
DM Mono, DM Serif Display
Stand
Mai 2026

Gestaltung

Das visuelle System basiert auf zwei Schriften: DM Mono als durchgehende Interface-Schrift — für Fließtext, Labels und Code — und DM Serif Display für Überschriften auf Projektseiten. Die Kombination aus Monospace und Serif schafft eine Spannung zwischen technischer Präzision und editorial.

Die Farbpalette ist auf eine Farbe reduziert: #3300ff. Alle Borders, Texte, Icons und Akzente in Blau auf Weiß — im Dark Mode invertiert. Das Bild-Grid legt automatisch einen blauen Duoton-Filter über geladene Fotos; beim Klick öffnet die Lightbox das Bild in Originalfarben.

Features

Routing ohne Framework
Eigenes Single-Page-Routing via showPage(). Seitenwechsel ohne Reload, mit scroll-to-top und fadeUp-Animation.
Dark Mode
CSS Custom Properties mit data-theme-Attribut. Präferenz wird in localStorage gespeichert und beim Laden wiederhergestellt.
Bild-Grid & Lightbox
Responsives CSS-Grid für Screenshots. Blauer Duoton-Filter via mix-blend-mode. Klick öffnet Vollbild-Lightbox, Escape schließt.
CSS Custom Properties
Vollständiges Token-System: Farben, Schriftgrößen, Abstände, Borders — alle zentral in :root definiert.
Kein Build-Step
Eine einzige HTML-Datei. Kein npm, kein Bundler, kein Framework. Direkt im Browser öffnen oder auf jedem Static Host deployen.
Responsive
Fluid Typography via clamp(). Grid-Spalten brechen auf Mobilgeräten um. Projekt-Karten und Bild-Grids passen sich an.

Technologie

HTML5 — semantische Struktur, eine Datei für alle Seiten. Alle Projekt-Pages als <div class="page"> mit display:none/block-Routing.


CSS — ~1 500 Zeilen, vollständig custom. Token-System in :root, Grid-Layouts, Animationen, Dark-Mode-Overrides, Duoton-Overlay via mix-blend-mode: color.

JavaScript — Vanilla, kein Framework. Routing, Dark-Mode-Toggle, Lightbox, automatisches img-slot-loading-State-Management.


Google Fonts — DM Mono (300/400/500, kursiv) und DM Serif Display (regular, kursiv). Eingebunden via @import in CSS.

Deliverables

portfolio.html
Eine Datei, alle Inhalte
Design-System
Token-basierte CSS-Architektur
Dark Mode
Persistiert via localStorage
Lightbox
Vollbild-Ansicht mit Duoton-Effekt

Werkzeug← Zurück

Halftone Generator

Bild hochladen, Rastereffekt mit den Reglern anpassen und als PNG exportieren.

Bild hier ablegen — oder klicken zum Auswählen

Original

Original

Halftone


Wie funktioniert Halftone?

Halftone ist ein Druckverfahren aus dem 19. Jahrhundert. Da Druckmaschinen klassisch nur eine Farbe (an oder aus) drucken können, simulieren sie Graustufen durch unterschiedlich große Punkte: Dunkle Bereiche werden mit großen, helle Bereiche mit kleinen oder keinen Punkten dargestellt. Aus der Distanz ergibt das die Illusion von Graustufen oder Tönen.

Dieses Prinzip wird heute noch in Zeitungen, Siebdruck und Risographie eingesetzt — und ist die Grundlage für den klassischen Pop-Art-Stil von Roy Lichtenstein sowie für viele moderne Print-Ästhetiken.

Der Algorithmus

01
Bild einlesen
Das hochgeladene Bild wird auf einen Off-Screen-Canvas gezeichnet. Kontrast und Helligkeit werden per CSS-Filter angepasst, bevor die Pixeldaten ausgelesen werden.
02
Helligkeit messen
Für jede Rasterposition wird die Luminanz des Pixels berechnet: L = R×0.299 + G×0.587 + B×0.114. Diese Gewichtung entspricht der menschlichen Farbwahrnehmung (Grün wirkt heller als Blau).
03
Punktgröße berechnen
Die Luminanz wird durch eine S-Kurve (Smoothstep: 3t²−2t³) geleitet. Das erhält Mitteltöne und gibt Kontraste mehr Gewicht — ohne Clipping. Danach: Radius = (1 − S(L)) × (Abstand/2) × Skalierung.
04
Punkt zeichnen
Jeder Punkt ist ein gefüllter Kreis (ctx.arc) auf dem Ausgabe-Canvas. Der Mittelpunkt liegt exakt in der Mitte jeder Rasterzelle. Punkte unter 0.4 px Radius werden übersprungen.
05
Regler
Punktabstand steuert die Rastergröße. Kontrast schärft das Helligkeitsspektrum vor der Verarbeitung — mehr Kontrast ergibt klarere Punkte. Punktgröße skaliert den maximalen Radius.
06
Export
Der fertige Canvas wird via canvas.toDataURL() als PNG-Datei exportiert — verlustfrei, in der vollen Auflösung des Eingabebilds (max. 900 px Breite).