Wussten Sie, dass täglich 50,000 neue WordPress-Websites online gehen? Wie können Sie sich in dieser Vielzahl von Websites von der Masse abheben? Eine sichere Methode, sofort Aufmerksamkeit zu erregen, ist die Erstellung eines eigenen, einzigartigen, individuellen Designs, das von PSD in WordPress konvertiert wurde. Dieses wird speziell für Ihre Website entwickelt – und Ihre Website wird nicht zu den Tausenden von Standard-Websites gehören!
Beim Entwerfen eines Website-Themas gibt es drei Standards: PSD (Photoshop-Dateien), WordPress (WP) und seit einigen Jahren auch Twitter Bootstrap – ein Framework zur Entwicklung responsiver Websites, das heutzutage von Branchenprofis verwendet wird.
In diesem Beitrag geben wir Ihnen eine vollständige und einfache Anleitung zum Kombinieren aller drei: So konvertieren Sie in 5 einfachen Schritten eine PSD in ein WordPress-Theme (Bootstrap).
Weiter unten in diesem Artikel finden Sie Vorlagen zum Download, die Sie als Grundlage für dieses Tutorial verwenden können. Falls Sie weitere Artikel lesen möchten, besuchen Sie bitte andere Bereiche unserer Website mit ausführlichen Tutorials und Artikeln.
Aber warum sollten Sie eine PSD-Datei in ein Bootstrap-WordPress-Theme konvertieren?
Was ist eine PSD?
PSD ist die Abkürzung für PhotoSHopfen Design.
Dies liegt daran, dass Photoshop die bei Grafikdesignern am häufigsten verwendete Software ist und die meisten WordPress-Website-Designs damit erstellt werden. Mit Photoshop erstellt ein Designer ein individuelles Website-Design für Sie. Dieses wird als Photoshop-Designdatei oder PSD-Datei gespeichert. Dieses Design kann dann an WordPress-Entwickler weitergegeben werden, die daraus ein Theme erstellen.
Was ist PSD zu WordPress?
PSD zu WordPress ist der Prozess der Konvertierung einer Photoshop-Designdatei in ein funktionierendes WordPress-Theme mithilfe von Bootstrap oder anderen Methoden und Frameworks. Kurz gesagt: Sie erstellen ein individuelles Design und es wird in ein voll funktionsfähiges WordPress-Theme umgewandelt!
Die meisten Leute, die in der Design- und Webdesignbranche oder in einem verwandten Umfeld tätig sind, können diese Terminologie problemlos verstehen – genauso wie sie alle anderen Designbegriffe verstehen würden, die Leuten außerhalb dieser Nische nicht geläufig sind (Kerning, CMYK, Padding, Typografie, Durchschuss, Serifen usw.).
Was ist ein WordPress-Theme?
Beim Erstellen einer WordPress-Website gibt es normalerweise zwei Hauptaspekte.
- Das eigentliche Aussehen der Website und
- den Inhalt der Site.
In WordPress, dem beliebtesten CMS für die Website-Erstellung, ist das Erscheinungsbild der Website unabhängig vom Inhalt. Sie können das Erscheinungsbild Ihres WordPress komplett ändern und gleichzeitig alle Inhalte beibehalten.
Dies liegt daran, dass das Aussehen der Website tatsächlich durch ein WordPress-Theme bestimmt wird.
Denken Sie an Themen wie für Smartphones, Desktop-Computer, Laptops oder andere Anwendungen, die Sie nach Ihren Wünschen gestalten können. Mit der von Ihnen verwendeten Vorlage oder dem von Ihnen verwendeten Thema können Sie den Inhalt gestalten oder ihm ein individuelles Erscheinungsbild verleihen.
WordPress-Themes sind eine Sammlung von PHP-Dateien, die „Befehle“ oder Spezifikationen enthalten, die die Farben und Muster, die Stile, die Symbole, die Schriftarten, die Größe von Überschriften und Text, die Schaltflächen und im Wesentlichen das gesamte Erscheinungsbild aller Elemente der von Ihnen gestalteten Website definieren.
Es gibt eine ganze Industrie rund um diese Designs, wo Sie Ihre Vorlage entweder kostenlos erhalten oder eine bereits fertige (normalerweise als Premium bezeichnet) für 25 bis mehrere Hundert Dollar kaufen können.
Es besteht auch die Möglichkeit, ein eigenes Design zu erstellen, anstatt sich für ein bereits bekanntes (und oft verwendetes) Produkt zu entscheiden. Dabei handelt es sich um die Konvertierung einer PSD-Datei in ein WordPress-Theme (das endgültige Aussehen Ihrer Website).
Im Folgenden führen wir Sie durch die genaue Vorgehensweise bei der Erstellung Ihres eigenen Designs.
Konvertieren eines PSD- in ein WordPress-Theme
Wir haben den Prozess der Konvertierung einer PSD in WordPress in 5 wichtige Schritte unterteilt:
1. Schneiden Sie die PSD-Datei
In unserem Tutorial „PSD zu Bootstrap“ ist das „Slicing“ der erste und wichtigste Schritt im gesamten Konvertierungsprozess von PSD zu responsivem WordPress.
Die „Schneiden“ Das mag zunächst verwirrend erscheinen, aber machen Sie sich keine allzu großen Sorgen. Beim Slicing wird eine einzelne Bilddatei in mehrere Dateien aufgeteilt, die jeweils verschiedene Designelemente des Gesamtdesigns enthalten. Manche Leute bezeichnen dies auch als Spleißen, da dabei einzelne Elemente aus einem einzigen Design-„Organismus“ erstellt werden, die schließlich neu angeordnet oder synthetisiert und zu einem vollständigen Design zusammengefügt werden.
Dies ist von entscheidender Bedeutung, da Sie aus einer einzelnen Bilddesigndatei keine Vorlage/kein Design codieren können.
Um eine Webseite zu gestalten, müssen Sie daher zunächst die Hauptbilddatei in viele einzelne Bilddateien aufteilen und diese dann nahtlos zusammenfügen.
Normalerweise bevorzugen die meisten Web- und Grafikdesigner die Verwendung von Adobe Photoshop zum Slicen.
Obwohl dasselbe mit einer gleichwertigen Bildbearbeitungssoftware wie GIMP (GNU Image Manipulation Program) oder einem anderen Bildbearbeitungsprogramm möglich ist, empfehlen wir Ihnen dringend, Photoshop da es die Arbeit mit Werkzeugen wie Ebenen und Ebenenmasken, dem Extrahieren von Metadaten, dem Mischen, Bearbeiten und Verwenden von PSD-Dateien und RAW-Bildern einfacher und schneller macht.
Egal welche Software/Anwendung Sie verwenden, das Wichtigste ist, am Ende pixelgenaue Bilddateien zu erhalten, die die verschiedenen Elemente Ihres endgültigen Designs darstellen.
Darüber hinaus müssen Sie Designelemente – wie Kopf-/Fußzeilenfarbe und einfarbigen Hintergrund – nicht vollständig ausschneiden, da diese dynamisch erstellt werden können. Schneiden Sie stattdessen nur Designelemente – wie Schaltflächen und Bilder – aus, die nicht dynamisch erstellt werden können.
Nachfolgend finden Sie ein YouTube-Video, das die Grundlagen des PSD-Datei-Slicings erklärt:
https://www.youtube.com/watch?v=XgxEieLbloc
2. Bootstrappen Sie Ihr Theme
Sobald Sie Ihre Bilddesigndatei aufgeteilt haben, gehen Sie zu https://getbootstrap.com und Laden Sie diese Version von Twitter Bootstrap herunter von dort. Nach Abschluss des Downloads extrahieren Sie die ZIP-Datei in einen Ordner.
Wenn Sie nun den extrahierten Ordner öffnen, finden Sie drei Ordner – CSS, Schriftarten und js - darin.
Beachten Sie, dass einer der Hauptanwendungsbereiche dieses Frameworks darin besteht, dass es in großem Umfang Medienabfragen verwendet, um Designs erstellen zu können, die auf allen Arten von Geräten funktionieren und einen nahtlosen Übergang zwischen verschiedenen Gerätegrößen ermöglichen (xs – Extra Small für Mobiltelefone, sm – Small für Tablets, md – Medium für Laptops und Desktops und lg – Large für große Desktops).
Dies nennt sich anpassendes Webdesign.
Zusätzliche Lektüre: CSS-Frameworks oder CSS-Raster: Was sollte ich für mein Projekt verwenden? (Smashing Magazine)
3. Erstellen Sie die Dateien Index.html und Style.css
Der nächste Schritt besteht darin, die geschnittenen Elemente in HTML/XHTML-Format zu codieren und sie mit CSS zu formatieren. Dazu erstellen Sie ein index.html und eine style.css Datei, was ausreichende Kenntnisse in HTML und CSS erfordert. Im Wesentlichen konvertieren wir die PSD-Datei in HTML, bevor wir mit den nächsten Schritten fortfahren können.
Abgesehen davon: HTML oder XHTML stellt (EXspannbar) HyperText MArkupe LSprache, während CSS darstellt Caufsteigend StyleSBlätter.
Da Sie Ihr Theme mit Bootstrap entwickeln möchten, müssen Sie Bootstrap im Head-Bereich initialisieren und die zugehörigen JavaScript im Hauptteil Ihres index.html Seite wie folgt:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="/de/css/bootstrap.min.css" rel="stylesheet" media="screen"></head><body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script></body></html>
Jetzt können Sie nutzen Bootstrap-Komponenten in Ihrer HTML-Vorlage. Hier erstellen wir beispielsweise eine einfache Webseite mit einem Navigationsmenü und Miniaturbildkomponenten.
Der .min.js-Teil der Bootstrap-Bibliotheken bedeutet, dass die Datei aus Leistungsgründen minimiert:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/de/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head><body><div class="container-fluid"><div class="navbar"><a class="navbar-brand" href="#">WPBootstrap.com</a><ul class="nav navbar-nav pull-right"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Order</a></li><li><a href="#">Contact</a></li></ul></div><div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image1.png"> <div class="caption"> <h3>About</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image2.png"> <div class="caption"> <h3>Projects</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image3.png"> <div class="caption"> <h3>Services</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div><hr><footer><p>© WPBootstrap 2015</p></footer></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script></body></html>
Wenn Sie diese Datei in Ihrem Browser öffnen, sollte sie ungefähr so aussehen:
Wie Sie sehen, funktioniert auf dieser Seite derzeit kein benutzerdefiniertes CSS. Um den Inhalt der HTML-Seite entsprechend unseren Anforderungen zu gestalten, erstellen wir ein benutzerdefiniertes style.css Datei. Für unser Beispiel haben wir meiner benutzerdefinierten CSS-Datei den folgenden Code hinzugefügt:
.navbar {
Hintergrund: #222222;
Rand-unten: 0px;
Rahmenradius: 0px;
}
.navbar-brand {
color: # FFFFFF;
line-height: 50px;
Polsterung links: 10px;
}
a.navbar-brand:hover {
Farbe: #FFEB3B;
}
.navbar ul {
Polsterung rechts: 4%;
}
.navbar ul li a {
color: # FFFFFF;
Rand rechts: 10%;
}
.navbar ul li a:hover {
Farbe: #222222;
Hintergrundfarbe: gelb;
}
a.btn-primary{
Hintergrundfarbe: #E91E63;
color: # FFFFFF;
}
Damit unsere neu erstellte benutzerdefinierte CSS-Datei funktioniert, müssen wir sie in unsere HTML-Seite einbinden (genau wie wir es getan haben Bootstrap.min.css). Fügen Sie daher einen Verweislink zu style.css Datei in Ihrem index.html Datei, direkt über der Zeile, auf die Sie verwiesen haben Bootstrap.min.css.
...
...
Jetzt offen index.html Datei erneut in Ihrem Browser und Sie werden die Änderung sehen – unser benutzerdefiniertes CSS funktioniert jetzt, Sie können die Kopfzeile oben und die Schaltflächen in einer anderen Farbe als die Standard-Bootstrap-Schaltflächen sehen.
Alle Änderungen wurden über die obige CSS-Datei definiert.
Dies war nur ein einfaches Beispiel.
Mit Bootstrap können Sie Ihre gesamte PSD-Datei (natürlich nach dem Slicen) in HTML codieren. Am Ende dieses Schritts erhalten Sie zwei Dateien:
- index.html und ein anderer ist
- style.css.
Bisher haben wir uns hauptsächlich mit einem Tutorial zur Umwandlung von PSD in Bootstrap beschäftigt. Jetzt folgt die Konvertierung in ein Bootstrap-WordPress-Theme.
Ist Ihnen das oben Genannte zu viel Arbeit? Sie möchten nicht bei Null anfangen? Wir haben die Lösung!
Dieses Paket mit WordPress-Startervorlagen erleichtert Ihnen den Einstieg mit einer Reihe von Starterthemen, mit denen Sie schließlich Ihr eigenes benutzerdefiniertes Design erstellen können.
Laden Sie jetzt das 20 WordPress Starter Theme-Paket herunter
Wie Sie sehen, ist die Konvertierung von PSD in HTML ein ziemlich wichtiger Teil des gesamten Prozesses, aber wenn Sie dies erledigt haben, wird alles etwas einfacher.
4. Erstellen Sie eine WordPress-Theme-Struktur in index.html
Der Hauptgrund für die Konvertierung einer Photoshop-Designdatei in WordPress besteht darin, eine voll funktionsfähige Website-Vorlage zu erstellen, die in das Website-Dashboard hochgeladen werden kann.
Themen wie Divi und Avada und andere beliebte Themes verfügen über einen Standardsatz an Dateien, die implementiert werden müssen, um als gültiges WP-Theme zu gelten. Genau das werden wir im nächsten Schritt tun.
Lesen Sie mehr: Elementor Pro vs. Divi – welches ist besser?
Die nächsten Phasen dieser Konvertierung drehen sich wirklich um die WordPress-Codierungsstruktur für Designs und Vorlagen, da wir unser Design jetzt in Richtung WP bringen.
Jetzt wo du das hast index.html Datei Ihrer PSD, müssen Sie es in mehrere teilen php Dateien entsprechend der Dateistruktur von WordPress-Themes. Auf diese Weise können Sie nicht nur die statischen index.html Datei zu einem dynamischen WP-Theme hinzufügen, sondern auch verschiedene Features und Funktionen im Zusammenhang mit WordPress hinzufügen können.
(Abgesehen davon ist PHP eine serverseitige Skriptsprache, die als Hypertext-Präprozessor bekannt ist.)
Um die Programmierung von WordPress-Themes zu vereinfachen und gute Codierungspraktiken zu gewährleisten, besteht eine typische Vorlage aus mehreren PHP-Dateien wie header.php, footer.php, index.php, sidebar.php, search.php und so weiter.
Sie benötigen jedoch nur index.php und style.css Dateien, um ein voll funktionsfähiges WordPress-Theme zu erstellen.
Als grobes Beispiel brechen wir hier unsere oben erstellte index.html Datei in drei Dateien: header.php, index.php und footer.php.
Beginnen wir mit header.php. Der gesamte HTML-Code, der oben in index.html Seite wird in die header.php Datei.
WPBootstrap.com
Zuhause
Über
Dienstleistungen
Befehl
Kontakt
Während der mittlere Teil der Datei index.html in die Datei index.php eingefügt wird:
Um
...
Erkunden
Projekte
...
Erkunden
Leistungen
...
Erkunden
Und unsere Datei footer.php würde ungefähr so aussehen:
© WPBootstrap 2015
Dieser Schritt umfasst das Aufteilen der Datei index.html in header.php, index.php, footer.php und andere notwendige Funktionsdateien entsprechend der Dateistruktur des WordPress-Themes.
Die vollständige Liste der Dateien, die jede Vorlage enthalten sollte, finden Sie unten. Sie können auch ein Bild sehen, das zeigt, wie diese Dateien zueinander in Beziehung stehen:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Wenn Sie einer Anleitung zur Konvertierung Ihres Photoshop-Designs in WordPress folgen, werden Sie feststellen, dass die Struktur immer der folgenden ähnelt. Im Folgenden sehen Sie eine detailliertere Darstellung des endgültigen WordPress-Themes:
5. WordPress-Tags zur Vorlage hinzufügen
Dies ist der letzte Schritt unseres Tutorials.
Das Beste an WordPress ist, dass es in seiner Codestruktur eine ganze Reihe integrierter Funktionen bietet, mit denen einem Website-Design benutzerdefinierte Funktionen und Features hinzugefügt werden können.
Um diese Funktionen in Ihr WordPress-Theme zu integrieren, müssen Sie lediglich die richtigen integrierten Funktions-Tags in Ihren Dateien verwenden. Das WordPress-Framework kümmert sich um alles. Das macht die Plattform so leistungsstark!
Im vorherigen Schritt haben wir die index.html Datei auf Basis der erforderlichen Dateistruktur.
Jetzt ist es an der Zeit, WordPress PHP-Tags zu verschiedenen Themendateien hinzuzufügen - wie header.php, index.php, footer.php und sidebar.php usw. – die wir im vorherigen Schritt erhalten haben. Schließlich kombinieren wir sie miteinander, um ein hochfunktionales WordPress-Theme zu erstellen.
Für unser obiges Beispiel haben wir hier die Funktion in header.php um den Titel unserer Site in einem Link anzuzeigen:
" title="<?php bloginfo('name'); ?>" class="navbar-brand">
Und für das Menü haben wir das Funktion wie folgt:
'Project Nav', 'menu_class','nav navbar-nav pull-right' )); ?>
Jetzt sieht unsere Datei header.php ungefähr so aus:
?>
Klasse="no-js">
">
>
" title="<?php bloginfo('name'); ?>" class="navbar-brand">
'Project Nav', 'menu_class','nav navbar-nav pull-right' )); ?>
Der Footer-Code für unsere footer.php bleibt gleich, außer dass hinzugefügt wird Funktion.
© WPBootstrap 2015
Kommen wir nun zum index.php. Um unsere Miniaturkomponenten anzuzeigen, haben wir die Funktion.
get_header (); ?>
Wir machen zwar Fortschritte, aber das ist noch nicht alles! Um unsere Miniaturkomponenten richtig anzuzeigen, müssen wir definieren Seitenleiste-1, Seitenleiste-2 und Seitenleiste-3 in unserer functions.php Datei wie folgt:
Funktion wpbootstrap_widgets_init() {
register_sidebar( Array(
'Name' => __( 'Widget-Bereich', 'wpbootstrap' ),
'id' => 'Seitenleiste-1',
'description' => __( 'Fügen Sie hier Widgets hinzu, die in Ihrer Seitenleiste angezeigt werden sollen.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar( Array(
'Name' => __( 'Widget-Bereich', 'wpbootstrap' ),
'id' => 'Seitenleiste-2',
'description' => __( 'Fügen Sie hier Widgets hinzu, die in Ihrer Seitenleiste angezeigt werden sollen.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar( Array(
'Name' => __( 'Widget-Bereich', 'wpbootstrap' ),
'id' => 'Seitenleiste-3',
'description' => __( 'Fügen Sie hier Widgets hinzu, die in Ihrer Seitenleiste angezeigt werden sollen.', 'wpbootstrap' ),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action( 'widgets_init', 'wpbootstrap_widgets_init' );
Dadurch werden drei Widget-Bereiche im WordPress-Dashboard registriert, in denen wir das „HTML Quelltext” für jede Miniaturbildkomponente in Seitenleiste-1, Seitenleiste-2 und Seitenleiste-3 Widgets bzw.. Zum Beispiel verwenden wir den folgenden Code in Seitenleiste-1 Widget.
Um
...
Erkunden
Und so weiter!
Als letztes müssen wir unsere Stylesheets laden. Dies kann mit wp enqueue style () im function.php Datei wie folgt.
// Lade das Haupt-Stylesheet
wp_enqueue_style( ''wpbootstrap-style', get_stylesheet_uri() );
// Bootstrap-Stylesheet laden
wp_enqueue_style( 'wpbootstrap', get_template_directory_uri() . '/css/bootstrap.css');
Für eine vollständige Liste aller verfügbaren Tags und Funktionen empfehlen wir Ihnen, diese offiziellen Codex-Seiten durchzugehen:
- Vorlagen-Tags: Auf dieser Seite finden Sie eine vollständige Liste der WordPress-Tags. Zu jedem Tag gibt es eine eigene Seite, auf der Sie weitere Informationen zu einem bestimmten Tag finden.
- Funktionsreferenz: Diese Seite ist ein Nachschlagewerk zu allen PHP-Funktionen in WordPress. Wie Template-Tags ist jede PHP-Funktion mit einer eigenen Seite verknüpft, auf der sie anhand von Beispielen ausführlich erklärt wird.
Nach dem Hinzufügen wichtiger WordPress-Tags und -Funktionen werden alle diese Dateien in einem einzigen Ordner mit einem ähnlichen Namen wie dem Theme-Namen abgelegt. Sie müssen diesen Ordner in / Wp-content / themes / Verzeichnis Ihrer Website-Installation.
Und das ist der letzte Schritt des Tutorials!
Sobald Sie dies getan haben, sollten Sie über ein voll funktionsfähiges, responsives WordPress-Theme mit Bootstrap verfügen, das Sie über das WordPress-Dashboard aktivieren können.
Bereit zum Auftakt?
PSD-zu-WordPress-Konvertierungsdienste
Bevor Sie weiterlesen: Suchen Sie Entwickler oder Partner, die Sie bei Ihrem Website-Projekt unterstützen? Suchen Sie einen zuverlässigen Anbieter für die Konvertierung von PSD in WordPress?
Sie befinden sich in der wenig beneidenswerten Lage, einen guten, zuverlässigen Partner finden zu müssen, ohne betrogen zu werden oder viel Zeit (und Geld) mit einem minderwertigen Dienstleister zu verlieren.
Unsere Erfahrung bei der Suche nach vertrauenswürdigen Entwicklern war nicht angenehm.
Wir mussten uns mit einer Reihe wichtiger Probleme auseinandersetzen:
- Entwickler geben Code von extrem schlechter Qualität zurück
- Menschen, die sehr sporadisch kommunizierten, was zu erheblichen Kommunikationsproblemen führte
- Code, der zu 100 % plagiiert war und uns rechtliche Probleme bereitete
- Teure Preise bei bestenfalls mittelmäßiger Qualität
- Entwickler, die verschwunden sind (oder von denen wir nie wieder etwas gehört haben)
Aber lassen Sie sich davon nicht vom Outsourcing abschrecken, Sie müssen nur einen vertraut Unternehmen – und wir sind hier, um zu helfen!
Da wir seit über 15 Jahren in der Branche tätig sind, haben wir ein Netzwerk von Anbietern aufgebaut, die wir kennen und denen wir vertrauen, wenn es um WordPress- und Webentwicklungsdienste geht. Diese Anbieter sind vollständig ausgelagert und können projektbezogen mit Ihnen zusammenarbeiten.
Möchten Sie mehr erfahren? Schauen Sie sich die folgenden Optionen für die zuverlässige Konvertierung von PSD in WordPress an:
1. PSDtoWPService.com
Mirza und sein Team haben sich einen hervorragenden Ruf in der Arbeit mit WordPress und der Entwicklung individueller Themes erarbeitet und sind daher ein hervorragender Partner für solche Aufgaben. Wir schätzen diesen PSD-zu-WordPress-Service, weil er günstig und zuverlässig ist. Sie können PSD-Dateien in WordPress-Themes oder andere WordPress-Entwicklungen konvertieren.
Offshore-Standort: Bangladesch
Stundensatz: $ 25 / Stunde
2. Codierbar
Codeable bietet ein anderes Konzept.
Codeable verlagert nicht direkt, sondern ist ein Marktplatz, der ausschließlich aus WordPress-Programmierern besteht, und Freiberufler müssen einen strengen Überprüfungsprozess durchlaufen, um auf den Marktplatz zu gelangen.
Ihr Preisalgorithmus bietet Ihnen einen fairen Preis, um sowohl Unter- als auch Überpreise auszuschließen. Testen Sie den Service, wenn Sie verschiedene Optionen prüfen möchten, bevor Sie sich für einen PSD-zu-WordPress-Konvertierungsdienst entscheiden.
Ort: Weltweit entscheiden Sie, mit wem Sie am liebsten zusammenarbeiten
Stundensatz: 70 bis 120 USD/Stunde
3. WPKraken
WPKraken ist ein Webentwicklungsteam mit einer Bewertung von 4.98 von 5 Sternen, das bereits mit großen Firmenkunden wie Lexus und Suzuki zusammengearbeitet hat und jede Art von WordPress-basierter Arbeit erledigen kann.
Sie verfügen über ein erfahrenes internes Team aus Entwicklern, UI- und UX-Designern, PMs und QAs. Sie können sowohl an kleinen Korrekturen und kleinen Projekten als auch an großen, kundenspezifischen Projekten arbeiten.
Egal, welche Art von Aufgabe Sie haben, sie können sie so erledigen, wie sie erledigt werden sollte!
WP Kraken bietet einen fairen Preis für hochwertige Dienstleistungen. Sie können sie über ihr Portal kontaktieren wpkraken.io
Ort: Polen
Stundensatz: $ 50 / Stunde
Sie haben noch kein Interesse daran, Entwickler einzustellen? Lesen Sie weiter!
Ein paar zusätzliche Gedanken
Langsam aber sicher hat sich responsives Webdesign zum dominierenden Standard für die Erstellung zukunftssicherer Websites entwickelt.
Heutzutage basieren fast alle Websites auf dieser erstaunlichen Technik, um den Benutzern ein optimales Anzeige- und Interaktionserlebnis zu bieten, unabhängig davon, welches Gerät sie verwenden, sei es ein Telefon, ein Tablet oder ein Laptop/Desktop-Gerät.
Einer kürzlich vom Google Webmaster-Team auf Google+ durchgeführten Umfrage zufolge bevorzugen über 81 % der Nutzer einen Responsive-Design-Ansatz, damit ihre Websites auf allen Arten von Geräten richtig dargestellt werden.
Deshalb ist es wichtig zu lernen, wie man mit Twitter Bootstrap oder einem anderen responsiven Framework aus einer PSD-Datei ein WordPress-Website-Theme für sein Webdesign erstellt. Zwar gibt es viele kostenlose Website-Themes, aber die Erstellung eines eigenen WordPress-Themes mit Bootstrap ist der ultimative Ausdruck kreativer Webdesign-Arbeit.
Obwohl WordPress dominiert über 24 % aller WebsitesDie Konvertierung einer Photoshop-Datei (PSD) in ein gut funktionierendes responsives Design ist nicht so einfach, wie Sie denken. Dies erfordert gute Kenntnisse im Schreiben von CSS-Medienabfragen, die letztendlich bestimmen, ob eine Vorlage responsive ist oder nicht.
Wäre es nicht besser, wenn Sie ein vorcodiertes, reaktionsfähiges Stylesheet mit allen wichtigen Funktionen erhalten würden?
Mit unserer Bootstrap, das weltweit beliebteste responsive Front-End-Framework, das Entwicklern das Leben erleichtert, ist heute deutlich einfacher als früher. In diesem Artikel zeigen wir Ihnen, wie Sie eine PSD-Vorlage in ein responsives WordPress-Theme umwandeln. Bootstrap als Ihr Entwicklungsframework.
Auch hier haben wir zunächst unsere PSD in Bootstrap konvertiert, daher ist der erste Teil im Wesentlichen ein echtes Tutorial zur Konvertierung von PSD in Bootstrap.
Später im zweiten Teil werden die von uns entwickelten Dateien in ein WordPress-Theme konvertiert, sodass an diesem Punkt alles zu einem Tutorial von PSD zu Bootstrap wird.
Wie immer möchten wir Ihnen den Einstieg erleichtern und Ihnen einige Tipps geben. Nachdem Sie die Grundlagen der WordPress-Theme-Erstellung gelernt haben, können Sie mit einem unserer WordPress Starter-Themes loslegen.
Laden Sie unser 20 WP Starter Theme-Paket herunter
Wichtigster Tipp:
Ein großartiges Website-Design erfordert fortgeschrittene Fähigkeiten. Obwohl es die beste Option zu sein scheint, es selbst zu schreiben, einen großartigen WordPress-Entwickler einstellen (zum Beispiel von Toptal) ist auf lange Sicht wahrscheinlich viel kostengünstiger. Im Wesentlichen erhalten Sie in sehr kurzer Zeit ein großartiges Ergebnis.
Schauen Sie sich jetzt die Entwickler auf Toptal an
Häufig gestellte Fragen
Was ist eine PSD-Datei?
Eine PSD-Datei ist eine Photoshop-Designdatei, die ein mit der Designsoftware von Adobe erstelltes Design enthält. Im Kontext dieses Artikels enthält die PSD das Design einer Website. Diese PSD-Datei kann dann an Entwickler gesendet werden, um sie als WordPress-Theme zu erstellen. Die Designdatei enthält alle notwendigen Informationen für das endgültige Design einer Website in HTML, einschließlich Farben, Rastern, der Darstellung auf Desktop- und Mobilgeräten und anderen notwendigen Designelementen.
Was bedeutet PSD zu WordPress?
PSD to WordPress ist der Prozess, bei dem aus einem in Photoshop erstellten Designkonzept ein Theme für WordPress erstellt wird. Normalerweise wird ein Designer beauftragt, ein Website-Designkonzept zu erstellen, das auf den Vorstellungen des Endnutzers basiert. Sobald das Design in Photoshop erstellt wurde, muss es in WordPress-kompatiblen Code konvertiert werden. Das bedeutet, dass ein Webentwickler das in Photoshop erstellte Website-Design verwendet und ein WordPress-Theme erstellt, das das Design nachbildet.
Wie öffne ich eine PSD-Datei in Photoshop?
PSD ist das native Dateiformat von Photoshop. Das Öffnen einer PSD-Datei in Photoshop sollte daher problemlos möglich sein. Beachten Sie lediglich, dass bestimmte notwendige Elemente wie die zum Erstellen des Designs verwendeten Schriftarten auf dem Computer verfügbar sein müssen, auf dem die Datei geöffnet wird. Andernfalls enthält das Design nicht die richtigen Schriftarten.
Was ist ein WordPress-Theme?
Ein WordPress-Theme ist eine Sammlung von PHP-Dateien mit „Befehlen“ oder Spezifikationen, die Farben und Muster, Stile, Symbole, Schriftarten, Überschriften- und Textgrößen, Schaltflächen und im Wesentlichen das gesamte Erscheinungsbild aller Elemente der zu gestaltenden Website definieren und erstellen. Ein WordPress-Theme ist dynamisch, da das Design mit jeder Art von Inhalt kompatibel ist, egal ob Blog, E-Commerce-Shop, Online-Kurs oder andere Inhalte der jeweiligen WordPress-Site.
Wie konvertiere ich eine Bootstrap-Vorlage in WordPress?
Um ein Bootstrap-Template in WordPress zu konvertieren, muss ein Webentwickler das Design des Bootstrap-Templates in ein WordPress-Skelett-Theme kopieren. Dabei werden die Designs in eine Sprache konvertiert, die das WordPress-Framework versteht und verarbeiten kann. Sie können unserer obigen Anleitung folgen oder einen unserer oben aufgeführten Konvertierungsdienstleister beauftragen.
Abschließende Gedanken
Das war’s erstmal mit der Erstellung eines responsiven Bootstrap-WordPress-Themes aus einer PSD-Datei. Egal, ob Sie Anfänger oder Profi sind, dieses Tutorial von PSD zu Bootstrap und anschließend zu WP bietet Ihnen den einfachsten Weg zum gewünschten Ergebnis.
Wenn Sie jedoch beim Konvertieren von PSD in WordPress auf Probleme stoßen, können Sie zwei Dinge tun. Sie können Stellen Sie einen Webentwickler bei Toptal ein, wo die besten 3 % der Talente weltweit arbeiten, sodass Sie sich keine Sorgen um die Qualität machen müssen. Alternativ können Sie Stellen Sie einen professionellen WordPress-Entwickler ein.
Sagen Sie uns Ihre Meinung? Benötigen Sie weitere Details zu bestimmten Teilen dieses Tutorials/Leitfadens? Wir würden uns freuen, wenn dieser Leitfaden Ihnen weiterhilft. Helfen Sie uns also, Ihnen zu helfen!