From f046f6d6f0ae25d2daabe95f4813c737259a96b4 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Wed, 5 Aug 2026 21:52:15 +0200 Subject: [PATCH] Screens der Szene vollstaendig sichtbar einpassen Die Aufnahmen lagen auf dem Design-Rechteck des Smart-Objekts. Davon ist aber nicht alles zu sehen: oben verdeckt die Blende des Deckels samt Kameraaussparung, unten die Tastaturschale, rechts das davorstehende iPad. Aus den Ecken geschaetzt kam oben 3,8 % heraus, tatsaechlich sind es 6,9 %, und die Kopfzeile der Anwendung verschwand. Jetzt wird gemessen: die Deckung der Screen-Ebene per Umkehr-Homographie in den Design-Raum zurueckgerechnet, darin das groesste achsenparallele Rechteck gesucht. Es misst 2726 x 1682 bei (74, 154), also 78,9 Prozent der Breite. Die Aufnahme liegt darin zentriert eingepasst, nicht formatfuellend: nichts wird abgeschnitten und nichts gezoomt. Die freie Flaeche traegt den aus den Bildecken gemessenen Hintergrundton der jeweiligen Aufnahme. Fuenf Stufen Unterschied reichen, damit sie sich als Rand abzeichnet. Co-Authored-By: Claude Opus 5 (1M context) --- post1.html | 24 +++++++++++++++--------- rules.md | 25 +++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/post1.html b/post1.html index 55a52a3..3aa7441 100644 --- a/post1.html +++ b/post1.html @@ -636,15 +636,21 @@ position: absolute; top: 0; left: 0; width: 100%; transform-origin: top left; } - /* Beide Aufnahmen liegen originalgetreu auf ihrem Display, ohne Zoom. - Sie sind flacher als der Bildschirm, es bleibt also Flaeche frei; die - traegt mit #FAFAFA den Hintergrundton der Anwendung und ist deshalb nicht - als Rand zu erkennen. - Das Board rueckt 5,15 % nach unten: das Smart-Object des PSD ragt oben - hinter die Blende des Deckels, ohne Versatz verschwindet die Kopfzeile. - Der Chat steht mittig, sein Display verdeckt nichts. */ - .szene-mb, .szene-ip { background: #FAFAFA; } - .szene-mb > img { transform: translate(0, 5.15%); } + /* Beide Aufnahmen liegen originalgetreu auf ihrem Display: nichts gezoomt, + nichts abgeschnitten. Was frei bleibt, traegt den Hintergrundton der + Aufnahme und ist deshalb nicht als Rand zu erkennen. + Vom Macbook-Display ist nicht alles zu sehen: oben die Blende des + Deckels samt Kameraaussparung, unten die Tastaturschale, rechts das + davorstehende iPad. Das groesste vollstaendig sichtbare Rechteck im + Design-Raum ist 2726 x 1682 bei (74, 154) - gemessen, nicht geschaetzt. + Das Board liegt darin zentriert, deshalb Breite 78,877 % und der + Versatz unten. Der Chat steht mittig, sein Display verdeckt nichts. */ + /* Exakt der Hintergrundton der jeweiligen Aufnahme, aus deren Ecken + gemessen. Schon fuenf Stufen Unterschied zeichnen die freie Flaeche + als Rand nach. */ + .szene-mb { background: #F5F4F4; } + .szene-ip { background: #FAFAFA; } + .szene-mb > img { width: 78.877%; transform: translate(2.715%, 14.645%); } .szene-ip > img { transform: translate(0, 16.49%); } .laptop-missing { diff --git a/rules.md b/rules.md index 8f77a77..1595a58 100644 --- a/rules.md +++ b/rules.md @@ -503,6 +503,31 @@ Glasecke, und genau das sieht man sofort. Beim Macbook stimmt das Smart-Object, dort bleibt es dabei. Belegung: Kanban-Board auf dem Macbook, Projekt-Chat hochkant auf dem iPad. + +### Vom Macbook-Display ist nicht alles zu sehen + +Oben verdeckt die Blende des Deckels samt Kameraaussparung, unten die +Tastaturschale, rechts das davorstehende iPad. Die Ecken des Smart-Objekts +sagen darüber nichts: daraus geschätzt kommt oben 3,8 % heraus, tatsächlich +sind es **6,9 %**. + +Deshalb wird gemessen statt geschätzt: + +1. Deckung der Screen-Ebene per **Umkehr-Homographie in den Design-Raum** + zurückrechnen — dort ist die Verdeckung eine Maske, kein Rätsel +2. Darin das **größte achsenparallele Rechteck** suchen (Histogramm-Verfahren + je Zeile) → **2726 × 1682 bei (74, 154)**, also 78,9 % der Breite und + 75,3 % der Höhe +3. Aufnahme darin zentriert einpassen, `contain`, **nie** `cover` + +Daher `width: 78.877%` und der Versatz. **Nichts wird abgeschnitten und nichts +gezoomt** — was frei bleibt, trägt den aus den Bildecken gemessenen +Hintergrundton der Aufnahme (`#F5F4F4` Board, `#FAFAFA` Chat). Schon fünf +Stufen Unterschied zeichnen die freie Fläche als Rand nach. + +Das Zielformat für eine Macbook-Aufnahme ist damit **1,62** statt 1,547; wer +näher dran liegt, füllt mehr Fläche. Passen muss es nicht, es wird ohnehin +eingepasst. **Beide liegen originalgetreu auf ihrem Display, ohne Zoom.** Sie sind flacher als der Bildschirm, es bleibt also Fläche frei; die trägt mit `#FAFAFA` den Hintergrundton der Anwendung und ist deshalb nicht als Rand zu erkennen.