Zieht Photoshop auch HTML? Oder nur CSS?

Ich bin neu in der neuesten Version von Photoshop, es hat eine coole Funktion, die ich entdeckt habe, wo es das CSS Ihres Designs übernimmt und das Ding in einen Editor kopiert/einfügt.

Wo würden Sie den HTML-Code dafür anordnen? Wie kann man das am besten schnell umgehen? Gibt es Tutorien?

Ich würde empfehlen, einen Blick auf Brackets mit dem Extract-Plugin zu werfen. es ist nicht fehlerfrei, aber es funktioniert ziemlich gut.
Ich verwende Klammern, habe mich aber nie mit Plugins beschäftigt
Ich vermute also, danke übrigens, seit ich das Plugin gefunden habe, dass Extract nicht die ganze Magie für Sie erledigt? Sie müssen den größten Teil des HTML selbst erstellen, aber es hilft mit all dem Code und CSS, das Sie sehen können?
Ich habe es nie wirklich vollständig benutzt, also kann ich es dir nicht sagen.

Antworten (2)

Photoshop zieht kein HTML, nur das CSS. Es übersetzt lediglich die Eigenschaften, die es für das ausgewählte Objekt hat (Farbe, Größe, Strich, Effekte, Position), in CSS. Es kann nicht wissen, wie Sie Ihren HTML-Code strukturieren möchten oder was dieses Objekt ist, also müssen Sie das selbst tun.

Ich würde auch nicht empfehlen, diese Funktion zu verwenden, da sie trotzdem die Dinge mit Sicherheit nicht richtig machen wird. Wenn Sie beispielsweise eine Schaltfläche haben, die 40 Pixel unter einem Textkörper sein muss, würden Sie ihr einen oberen Rand von 40 Pixel geben. Alle PS könnten Ihnen sagen, wenn Sie das CSS kopieren, ist sein absoluter Wert (wo es in Bezug auf die Leinwand steht), es kann nicht wissen, wie Sie Ihr Dokument strukturiert haben.

Tutorials zum richtigen Programmieren wären also ein guter Anfang.

So erhalten Sie das CSS von Photoshop nur für die Aufzeichnungen Ihres Beitrags: https://helpx.adobe.com/photoshop/how-to/photoshop-copy-css.html

Um das HTML schnell zu bekommen, würde ich empfehlen, Sublime Text mit dem Package Manager zu installieren . Öffnen Sie Sublime, dann Package Manager mit STRG + SHIFT + P,

  • Geben Sie "Package Control: Install Package" ein und drücken Sie die Eingabetaste.
  • Geben Sie einen der folgenden Paketnamen ein und geben Sie die Prozedur für die anderen beiden erneut ein:

    • Emmet
    • Grundlagenschnipsel
    • HTML-Boilerplate

Installieren Sie alle drei Pakete und schreiben Sie HTML mit Zen Speed.