So erstellen Sie Tumblr-Themen mit einem PSD-Design

Tumblr kombiniert den Schwerpunkt auf visueller Kreativität mit einer Beitragslänge, die zwischen der Kürze von Twitter und der offenen Länge eines traditionellen Blogeintrags liegt. Wenn Sie ein benutzerdefiniertes Tumblr-Theme verwenden, das das Aussehen Ihrer On- und Offline-Identität erweitert, passt ein Tumblelog in eine Strategie, die andere Online- und Social Media umfasst. Webdesigner beginnen oft mit der Entwicklung benutzerdefinierter Designs in Adobe Photoshop und verwenden das PSD-Dateiformat mit Ebenen des Programms als visuellen Arbeitsbereich.

Dimensionen festlegen

Die Linealführungen und Ebenenfunktionen von Adobe Photoshop vereinfachen die Erstellung der Grundlage eines Tumblr-Themas, komplett mit einem Layout-Raster, das die Abmessungen von Inhaltsbereichen definiert. Wenn Sie Ebenengruppen für jeden Aspekt Ihres Designs einrichten, einschließlich des Hauptinhaltsbereichs und der Seitenleiste, können Sie alle Hilfslinien für jedes Element auf einer einzelnen Ebene innerhalb jeder Gruppe platzieren. Diese Anordnung ermöglicht es Ihnen, Ihre Hilfslinien selektiv sichtbar zu machen, anstatt sie einfach alle mit einer Photoshop-Tastenkombination oder einem Menüelement anzuzeigen und auszublenden, und hält verwandte Hilfslinienelemente zusammen. Benennen Sie Ihre Gruppen und Ebenen, um die Funktion jedes Teils Ihres Designs zu identifizieren. Die Momente, die Sie in inkrementelle Benennungsaufgaben investieren, zahlen sich in der Zeit aus, die Sie nicht damit verbringen müssen, Layer ein- und auszuschalten, um festzustellen, was sie enthalten. Um die Abmessungen eines Layoutelements schnell zu ermitteln, drücken Sie "F8", um das Info-Panel zu öffnen und dann "Strg-Klick" auf die Miniaturansicht des Ebenen-Panels, um eine Auswahl basierend auf den Pixeln dieser Ebene zu laden.

Farben auswählen

Unabhängig davon, ob Sie den bewährten Color Picker verwenden, um Farbtöne für Ihr Design auszuwählen, Optionen aus einer Farbbibliothek laden, die einem gedruckten Stück oder Logo entsprechen, oder sich auf das Pipettenwerkzeug verlassen, um Schattierungen aus einer anderen Datei oder Grafik abzutasten, Adobe Photoshop bietet eine breite verschiedene Möglichkeiten, Designfarben auszuwählen. Wenn Sie eine Ebene mit einer Volltonfarbe füllen, um die Hintergrundfarbe eines Tumblr-Themas oder anderer Elemente Ihres Designs zu simulieren, können Sie die Farbformel als Text aus der Hex-Anzeige des Farbwählers kopieren und die Farbidentifikation in den Namen der Ebene einfügen zum schnellen Nachschlagen. Die sechs alphanumerischen Zeichen in Hex-Farbe erscheinen sowohl im Tumblr-Code als auch in Webdesigns für Blogs und andere Online-Formate.

Grafiken erstellen

Der Header, der ein Tumblelog identifiziert, kann eine Bitmap-Grafik als thematische Grafik verwenden. Sie können dieses kritische Element mit einer Kombination aus Text und pixel- oder vektorbasierten Elementen in Ihrer PSD-Datei erstellen. Wenn die Grafik anpassbare Elemente enthält, die Sie in Photoshop gesetzt haben, belassen Sie sie als Live-Typ in Ihrer PSD-basierten Designdatei und rastern Sie sie nur in Kopien der Datei, die Sie anderen Personen zur Verfügung stellen, die keine Lizenz für die erforderlichen Schriftartdateien haben in deinem Thema. Wenn Sie Vektorwerkzeuge zum Zeichnen in Photoshop verwenden, einschließlich der Stift- und Formwerkzeuge, zeichnen Sie mithilfe von Führungsregeln, die an der zugrunde liegenden Auflösung Ihrer Vorlagendatei ausgerichtet sind. Diese Technik hilft, Ihr Bildmaterial so scharf wie möglich zu halten, wenn Sie gerasterte Versionen davon speichern oder exportieren.

Nächste Schritte

Wenn Sie wissen, wie man HTML und CSS programmiert und die spezialisierten Variablen versteht, die Tumblr in seiner Codestruktur verwendet, können Sie die Abmessungen, Farbspezifikationen und Grafiken, die Sie in einer PSD erstellen, in ein funktionierendes benutzerdefiniertes Tumblr-Theme übersetzen. Wenn Web-Coding nicht zu Ihren Fähigkeiten gehört, können Sie Ihre PSD einem Programmierer zur Verfügung stellen, der das Thema für Sie erstellt. Neben einer visuellen Behandlung muss ein Tumblr-Theme Variablen und Blöcke enthalten. Variablen akzeptieren dynamische Werte, um standardmäßige visuelle Tumblr-Elemente zu erstellen. Blöcke bilden Codeblöcke, die Variablen mit HTML kombinieren. Blöcke erstellen Posts und die Permalinks, die sie erreichen, Links, die sich zwischen Blöcken von chronologisch organisiertem Material bewegen, und Elemente, die die Leute aufnehmen, die ein einzelnes Tumblelog mögen oder ihm folgen.

Versionsinformation

Die Informationen in diesem Artikel gelten für Adobe Photoshop CC und Adobe Photoshop CS6. Sie kann von anderen Versionen oder Produkten geringfügig oder erheblich abweichen.