Wie erstelle ich Vektorvorlagen aus CSS-Frameworks?

Ich plane, eine auf Illustrator/Sketch-Vektoren basierende Vorlage für das CSS-Framework UiKit zu erstellen . Und ich frage mich, wie man das macht.

Mein erster Gedanke war, in PDF zu drucken und es von dort zu sezieren, aber dann kommen die Druckstile zum Einsatz. Und es wäre viel zu viel Arbeit, alle druckbezogenen Stile mit dem Elementinspektor von FF zu entfernen.

Meine einzige andere Idee wäre also, Screenshots der Seite zu machen und sie in Illustrator mit einem Overlay-Tool wie GluePrint (Mac) oder Image Overlay Utility (Win) neu zu zeichnen.

Ich habe auch versucht, das CSS von Inkscape über seinen XML-Inspektor zu verwenden, aber es unterstützt offensichtlich nicht viele der erforderlichen CSS.

Ich verstehe nicht, warum ich bei dieser Frage abgelehnt werde: Ich bitte um eine klare Richtung, weise darauf hin, was ich bereits versucht habe. Wenn etwas fehlt, fragen Sie bitte nach und stimmen Sie nicht einfach ab. Ich finde es ziemlich unhöflich und ermutigt mich nicht, hier zu fragen und zu antworten.
Können Sie nicht einfach die @media printBlöcke im CSS finden und entfernen und dann als PDF drucken? Wenn Sie mit Python vertraut sind, funktioniert das HTML2PDF-Paket alternativ perfekt zum Generieren von PDFs aus Webseiten.
Was ist die konkrete Frage? Klingt wie Ihre Vorschläge sind gültige Vorschläge. Ich bin jedoch verwirrt darüber, was CSS mit Illustrator zu tun hat.
Der Grund für Ihre Ablehnung ist, dass Sie fragen: „Wie erstelle ich ein Design, das auf einem anderen Design basiert?“ Das ist eine große Workflow-Frage, die ebenso viel mit Vorlieben wie mit Effizienz zu tun hat.

Antworten (2)

WebVector ist ein Java-Applet, das HTML als SVGs darstellen kann.

  1. Erstellen Sie eine HTML-Datei für jede UiKit-Komponente, die Sie konvertieren möchten
  2. Richten Sie WebVector auf jede Datei und generieren Sie Ihre SVGs
  3. Räumen Sie die SVGs in Ihrer bevorzugten Vektorbearbeitungs-App auf.

Ich habe es nicht ausprobiert, aber es könnte einen Versuch wert sein:

Paparazzi können Screenshots einer Seite machen und sie als bearbeitbares SVG speichern, das dann in Sketch/Illustrator importiert werden kann

Hier ist eine ausführlichere Anleitung , wie es geht

Wie erstelle ich Vektorvorlagen aus CSS-Frameworks?
AntwortenHierDatenschutz-Bestimmungen1y, 0v