Blog- & Magazin-Theme erstellen. PSD zu HTML konvertieren

HINWEIS: Diesen Artikel muss ich (leider) überarbeiten!
Blog- & Magazin-Theme erstellen. PSD zu HTML konvertieren

So, diesmal habe ich eine tolle Tutorial-Serie für euch gefunden. Der Webdesigner Adi Purdila erklärt euch in seinem Video-Tutorial (englisch) Schritt für Schritt, wie er mit Photoshop ein Blog-Theme bzw. Magazin-Theme erstellt. Zudem zeigt er, wie er die fertige Photoshopdatei PSD zu HTML konvertiert. Das Tutorial ist ein 5 Abschnitte unterteilt und ist schön detailliert erklärt, wie ich finde. Hinweis: Die Videos sind in voller HD Auflösung aufgezeichnet! Das erste Video schließt die Einführung ein und einen Fahrplan für die ganze Serie. Außerdem ist noch ein Highspeed-Bonus (ohne Ton) enthalten – falls jemand lieber “nur” zuschaut und musikhören möchte.

Magazin-Theme erstellen und PSD zu HTML konvertieren

Magazin-Theme erstellen und PSD zu HTML konvertieren

1.Blog- & Magazin-Theme erstellen

Zunächst werden wir uns Allgemein dem Projekt sowie der Entwurfsphase widmen. Lasst uns angefangen!

2. PSD zu HTML konvertieren (PSD-Slices)

Im zweiten Schritt wollen wir beginnen die Phtoshopdatei aufzubereiten, damit wir es später etwas leichter haben, unser Theme von PSD zu HTML umzuwandeln.

3. HTML/CSS für Homepage und Blog

Beim Konvertieren unserer Magazin-Themes PSD zu HTLM kommen wir nicht ohne – zumindest rudimentäre – HTML und CSS-Kenntnisse aus.

Apps

Eine App könnte dir hier die Arbeit abnehmen:

  • https://psd2html.app/
  • https://anyconv.com/psd-to-html-converter/
  • https://www.downloadcloud.com/psd-to-html-converter.html
  • http://psdtoweb.de/

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Fünf Tipps für mehr Kundenbindung im E-Commerce

Fünf Tipps für mehr Kundenbindung im E-Commerce

Eine starke Kundenbindung ist ein essenzieller Erfolgsfaktor für den Verkauf von Waren und Dienstleistungen auf elektronischem Wege. Grund ist die Digitalisierung, die den Wandel vom Verkäufermarkt zum Käufermarkt einläutete. Durch die Fülle an regionalen und...

Eine ERP-Software speziell für Designer

Eine ERP-Software speziell für Designer

Designbüros haben besondere Anforderungen an eine ERP-Software. Welche das sind und wie eine branchenspezifische Lösung, diesen Anforderungen begegnet, lesen Sie hier. Viele Designbüros stehen im Laufe Ihres Daseins einmal vor der Frage, ob ein ganzheitliches...

Divi Performance: Page Speed Insights optimieren

Divi Performance: Page Speed Insights optimieren

In diesem Video zeige ich dir, wie ich die Page Speed Insights für das Theme Divi optimiere. Wir werden dazu die Bilder, den Cache und die Fonts optimieren. Ich nutze dazu folgende Plugins: Cache mit WP Rocket optimieren: https://link.designers-inn.de/wprocket Bilder...

Divi Header Jumping / Moving On Page Load

Divi Header Jumping / Moving On Page Load

Wenn du eine benutzerdefinierte Einstellungen für die Navigation nutzt, sprich im Theme Customizer eine eigene Höhe für deine Navigation angelegt hast, kommt es zu kleinen Sprüngen im Kopfbereich der Website. Dies betrifft den ersten Abschnitt der Seite, Module mit...

|

Platz für deinen Kommentar!

5 Kommentare

  1. Silvester

    Hallo Marco

    Super Beitrag! Ich versuche schon längerer Zeit eine PSD in HTML zu konventieren. Bisher leider ohne Erfolg.
    Nun hoffe ich, dass ich es nach dieser Tutorials schaffe.

    Beste Grüsse
    Silvester

  2. Silvester

    Hallo Marco

    Im Ersten Kommentar habe ich meine Internetadresse falsch geschrieben :-)

    Super Beitrag! Ich versuche schon längerer Zeit eine PSD in HTML zu konventieren. Bisher leider ohne Erfolg.
    Nun hoffe ich, dass ich es nach dieser Tutorials schaffe.

    Beste Grüsse
    Silvester

  3. Mark

    Grundsätzlich sicherlich eine gute Idee und meistens werden die visuellen Kriterien bei dieser Konvertierung erfüllt, der Performance-Gedanke in Sachen HTML geht hierbei aber meist unter.

  4. Barnabas

    Ist das jetzt durch vollwertigen PSD zu Webseite Konvertierung gedacht, oder einfach nur um das Bild im Browser anzeigen zu können? Weil das würde auch leichter gehen. Die letzten Teile fehlen leider, daher muss ich etwas interpretieren, was dort stehen könnte.

  5. Marco Linke

    Hi, ich habe ein paar weiterführende Links hinzugefügt. Diese Apps helfen dir, eine PSD in eine HTML-Version umzubauen. Generell ist es m.E. eher sinnvoll, die Website manuell zu erstellen :-) Nur so weißt du, was genau in deinem Code steht.

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Mehr verkaufen

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
 Workshop SEO & Marketing

Download