So konvertieren Sie Ihr Photoshop-Design in weniger als einer Minute in CSS-Code

css-photoshop

Seit der Einführung der CS6-Version hat Adobe in Photoshop eine sehr nützliche Option zum Layouten und Entwickeln von Webdesigns implementiert. Die Operation ist sehr leicht und insbesondere schnell. Durch die Anwendung können wir kaskadierende Stylesheets erstellen, die als Referenz unsere Formen und Textebenen verwenden. Das Verfahren ist so einfach wie das Entwickeln unseres Modells, das Kopieren der Codeversion unserer Elemente und das Einfügen in unser Blatt.

Dies ist eine sehr gute Option, insbesondere weil wir so die Entwicklung unseres Designs visuell und in Echtzeit verfolgen können. Hier sind einige Tipps, um diese Option zu verwenden und die zu erhalten maximale Leistung:

Versuche genau zu sein

Um ein professionelles Ergebnis zu erzielen, wird empfohlen, die Maße und Proportionen Ihrer Website zu berücksichtigen. Legen Sie die Werte für Breite und Höhe der Vorlage fest, die Sie entwerfen, und wenden Sie sie auf Ihr Modell an. Wenn Sie den CSS-Code kopieren, platzieren wir jedes Element unter Bezugnahme auf den Abstand in Pixel zwischen jedem Element und den Kanten der Zeichenfläche. Berücksichtigen Sie auch die Größen und die hierarchischen Gründe, die Sie in Ihr Design einbeziehen möchten, einschließlich der Ausrichtung der einzelnen Elemente und des Abstands zwischen den einzelnen Elementen, um Ihren Benutzern maximale Lesbarkeit zu bieten.

Die Verwendung von Hilfslinien und den Regeln der Benutzeroberfläche hilft Ihnen dabei, eine übersichtliche und saubere Vorlage zu erstellen, deren Elemente perfekt aufeinander abgestimmt sind.

Web-Photoshop

Konfigurieren Sie alle Eigenschaften jedes Elements

Die Option zum Kopieren des CSS-Codes gibt uns die Möglichkeit, unsere Site mithilfe von Formular- und Textebenen mit großer Präzision zu gestalten. Der Inhalt jeder Ebene wird in die Zwischenablage kopiert und wir können ihn schnell in unser Stylesheet einfügen. Erfassen Sie in den Formebenen die Werte für die folgenden Einstellungen:

  • Größe
  • Position
  • Strichfarbe
  • Füllfarbe (einschließlich Farbverläufe)
  • Paralleler Schatten

Aus den Textebenen können wir die folgenden Werte erfassen:

  • Schriftfamilie
  • Schriftgröße
  • Schriftdicke
  • Zeilenhöhe
  • Unterstrichen
  • Durchgestrichen
  • Hochgestellt
  • Index
  • Textausrichtung

Denken Sie daran und stellen Sie jeden dieser Werte so ein, dass er den gewünschten Stil bietet.

Arbeiten Sie mit Ebenengruppen

Diese Funktion übersetzt unsere Arbeit, die nach zwei Klassenarten organisiert ist, eine für jede Gruppe, die Ebenen von Formen oder Text zusammenführt, und eine Klasse für jede Ebene einer dieser Arten. Jede Gruppenklasse stellt ein übergeordnetes div-Element dar, das untergeordnete div-Elemente enthält, die den in jede Gruppe eingefügten Ebenen entsprechen. Auf diese Weise werden die oberen und linken Werte der untergeordneten Container in Bezug auf den übergeordneten Container festgelegt. Sie müssen berücksichtigen, dass diese Option bei intelligenten Objekten nicht verfügbar ist und nicht auf mehrere Ebenen gleichzeitig angewendet werden kann, es sei denn, sie sind gruppiert.

Schritte zum Konvertieren

Nachdem Sie Ihr Modell erstellt, jedes Element personalisiert und nach Gruppen gruppiert haben, müssen Sie nur noch die folgenden Schritte ausführen:

 

  • Gehen Sie zum Ebenenbedienfeld und wählen Sie eine dieser beiden Optionen:
    • Klicken Sie mit der rechten Maustaste auf eine Form- oder Textebene oder eine Gruppe von Ebenen und wählen Sie CSS kopieren im Kontextmenü.
    • Wählen Sie eine Form- oder Textebene oder eine Gruppe von Ebenen aus und wählen Sie dann die Option CSS kopieren im Menü des Ebenenbedienfelds.
  • Fügen Sie den Code in Ihr Stylesheet-Dokument ein und wenden Sie ihn über HTML5 auf Ihre Seiten an.

    CSS-Photoshop1

    CSS-Photoshop2


Der Inhalt des Artikels entspricht unseren Grundsätzen von redaktionelle Ethik. Um einen Fehler zu melden, klicken Sie auf hier.

Schreiben Sie den ersten Kommentar

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * gekennzeichnet

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.