Legen Sie Ihr Design über die Seite, die Sie gebaut haben
Legen Sie einen Design-Export auf Ihre Seite und richten Sie ihn aus. Schalten Sie auf Difference, und übereinstimmende Pixel werden schwarz, sodass nur sichtbar bleibt, was abweicht.
Kostenlos und Open Source (MIT). Version 0.2.2. Noch nicht im Chrome Web Store: Installieren Sie es aus dem Quellcode, wie unten gezeigt.
Auf einer echten Seite ansehen
Was es kann
Unbegrenzte Ebenen
Desktop-, Tablet- und Mobil-Designs nebeneinander, kostenlos. Stellen Sie für jedes die Transparenz und die Skalierung ein, mit einem Klick für Designs, die in 2x exportiert wurden.
Vier Vergleichsarten
Difference macht übereinstimmende Pixel schwarz, sodass nur Abweichungen sichtbar sind. Außerdem Multiply, Screen und Invert.
Schnell ausrichten
Ziehen, X und Y eingeben, mit den Pfeiltasten verschieben (Umschalt für 10 px) oder auf Center oder Fit width klicken.
Gruppen
Benennen Sie eine Gruppe pro Seite, und die Liste zeigt nur die Designs dieser Seite.
Sticky Header, schmale Seiten
Heften Sie eine Ebene ans Fenster für einen Sticky Header, oder verschieben Sie die Steuerelemente in die Seitenleiste von Chrome.
Export und Import
Speichern Sie die Ebenen und Bilder einer Website in einer Datei, und fügen Sie sie auf jedem Computer hinzu.
Aus dem Quellcode installieren
Pixel Veil ist noch nicht im Chrome Web Store. Der Build dauert etwa eine Minute, mit Git und Node.js:
git clone https://github.com/Ank-KhoaHo/pixel-overlay
cd pixel-overlay
npm ci
npm run buildÖffnen Sie dann chrome://extensions, aktivieren Sie den Entwicklermodus (Developer mode), wählen Sie Entpackte Erweiterung laden (Load unpacked) und wählen Sie den Ordner .output/chrome-mv3.
Ihre Designs bleiben in Ihrem Browser
Pixel Veil hat kein Konto, keine Analytics und keinen Server. Nach der Installation kann es keine Website lesen; es zeichnet erst auf einem Tab, nachdem Sie dort auf sein Symbol geklickt haben.
Datenschutzerklärung lesen