Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Site Builds
Code

Erstellen Sie ein Comic-Design mit Webdesign, Photoshop in HTML + CSS (Teil 2) 

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

Vor ein paar Wochen haben wir gelernt, wie erstellen Sie ein comic-Buch-Thema web-design Laufe bei unserer Schwester-site, Webdesigntuts+.   Heute, wir werden angehen, der zweite Teil: es ist Zeit, schneiden Sie das design und verwandeln Sie es in eine funktionale HTML-layout, bereit, um portiert werden zu jedem CMS.  Let ' s get started! 


Bevor Wir Beginnen 

 Sie können Ihre ganz eigene PSD, indem Sie die folgenden der Schritt für Schritt Prozess, bei Webdesigntuts+ oder einfach hier herunterladen.

 Da dies kein Anfänger-tutorial, werde ich überspringen einige grundlegende Erläuterungen -- Kenntnisse von HTML und CSS werden erwartet, sowie ein wenig Kenntnisse über das schneiden von Bildern auf Photoshop.


Schritt 1 - HTML-Layout 

 Lassen Sie uns beginnen Sie, indem Sie den Ordner Aufgaben; da dieses tutorial erfordert nicht die Verwendung eines server-side-Sprache, kann es überall auf Ihrem system. Erstellen Sie eine Datei namens index.html und die ersten drei Ordner: 

  • /Bilder  
  • /js 
  • /style 

Die Inhalte dieser Ordner sollte ziemlich selbsterklärend. 

Fügen Sie die grundlegenden Container der Seite zu index.html.  Ich bin wickeln alles mit einem div namens Seite.  Innerhalb dieses div-Element, fügen Sie drei weitere mit der id header, Inhalt und Fußzeile jeweils. 

In den style-Ordner, erstellen Sie eine neue Datei namens default.css und fügen Sie einen reset entfernen Sie alle default-styles.  Ich bin mit Eric Meyer ' s, aber fühlen Sie sich frei, mit zu beginnen, Ihre Lieblings -. 

Folgenden HTML-code für diesen Schritt: 

Und das CSS: 

Testen Sie den code in Firefox, Sie sollten so etwas wie dieses: 


Schritt 2 - Grundlegende CSS-Layout 

Lasst uns den Stil, das layout, die Struktur der ersten. 

 Wir wickeln alle Inhalte mit 960px Breite-container, und legen Sie dann die Höhe der inneren divs. Um die genaue Höhe der einzelnen div-Sie können die Photoshop-Lineal-tool. 

Wir schneiden Sie die hintergrund-Bilder der gesamten Seite und die Fußzeile Abschnitt jetzt. 

Öffnen Sie In Photoshop Comicastic.psd und verstecken alles, aber die Header-BG und Footer-BG Ordner.  Mit dem "slice" - Werkzeug zeichnen Sie ein großes Stück von der oberen linken bis 575px unterhalb der oberen Grenze.   Als Nächstes zeichnen Sie eine weitere Scheibe aus der Führung der Abgrenzung der footer-hintergrund (werfen Sie einen Blick auf das Bild unten). Natürlich können Sie die Hilfslinien, um ein präzises Ergebnis zu erhalten. 

Mit dem "slice-Auswahl" - Werkzeug, wählen Sie die zwei kürzlich erstellte slices und name mit Ihren jeweiligen Namen -- bg-body und bg-footer.  Doppelklicken Sie dann klicken Sie auf alle auto-Scheiben, und ändern Sie die "slice-Typ" Kein Bild". 

Nächste, gehen Sie zu Datei > Speichern für Web und Geräte.  Wählen Sie die zwei Scheiben, die Sie speichern möchten (Halten Sie die Umschalttaste gedrückt, um mehrere auszuwählen), legen Sie die "Datei-Typ" JPG und die Qualität auf 70 und klicken Sie auf Speichern.  Suchen Sie Ihr Arbeitsverzeichnis und wählte die root-Datei (dieses Dialogfeld wird automatisch speichern Sie Ihre Dateien im /images-Ordner). 

Jetzt haben Sie das hintergrund-Bilder, können Sie die CSS-Datei für alle Container. 

 Setzen wir einen test-Höhe des divs mit Ausnahme der header (das ist 180px Höhe tatsächlich) und fügen Sie einige temporäre Hintergrundfarben für Testzwecke.

 Testen in einem browser, sollten Sie etwas wie das Bild unten.


Schritt 3 - schneiden Sie die Header-und Content-Hintergrund-Bilder 

 Jetzt wissen Sie, wie das Bild geschnitten wird, machen wir das gleiche mit allen header-und content-hintergrund (oder Vordergrund) Bilder. Für die header-Bilder, erstellen Sie eine Kopie der "comicastic.psd -"  Dokument und blendet alles aus, aber das Logo Ordner und die Suche Hintergründe der Ebenen (plus ich bin das hinzufügen der Schaltfläche suchen in dieser Ansicht, wenn Sie ein paar Pixel rechts).   Jetzt ziehen sich die Scheiben rund um die sichtbare Segmente, und benennen Sie diese mit logo, bg-such-und Suche-Taste, beziehungsweise. Speichern Sie Sie als PNG-Bilder mit transparenten Hintergründen. 

Lasst uns vorwärts zu bewegen mit der content-banner. 

Zeigen Sie nur den Hintergrund Ordner im oberen Banner, zeigen Sie die Page Curl Ordner und die Page Bg-Schicht unter Seite Inhalt und zeigen Sie den Header Bg-Ordner, einschließlich der gesamten schwarzen Hintergrund. Dann, mit diesen Schichten sichtbar ist, ziehen Sie zwei Scheiben: eine für das banner hintergrund benannt bg-banner und andere kleine für die Seite curl mit der Bezeichnung content-Seite-curl.  Speichern Sie anschließend sowohl von Ihnen als JPEGs.   

Fügen Sie ein neues div-Element namens-logo in den "header" und ein weiteres div-Element namens top-banner im inneren Inhalte unserer HTML-Datei. 

Und der CSS code Aussehen, damit Sie Recht: 

 Jetzt solltest du so etwas wie so:


Schritt 4 - Obere Navigation 

 Lassen Sie uns fügen Sie den HTML-Code für die top-navigation. Fügen Sie den folgenden code in den header-div, unterhalb des Logos. 

Die härteste Arbeit mit diesem div wird die Positionierung.  Wir machen es float rechts, und spielen mit der Polsterung, um es zu passen in seinen richtigen Platz.  Fügen Sie den folgenden CSS: 


Schritt 5 - Font-Ersetzung 

Da habe ich nicht die Absicht, mit "Comic Sans" für das design verwenden wir ein interessanter Schrift.  Wir werden die Vorteile von CSS3 zu machen, sieht toll aus in modernen Browsern. 

 Zuerst laden Sie die CSS-font-Pakete "Komika Title" und "Komika Text" und legen Sie Sie in einen neuen Ordner mit dem Namen /Schriftarten.  Jedes kit hat eine Reihe von font-Dateien und eine .CSS-Datei, die wir importieren zu unserem Standard.css-Dokument, wie folgt:

Nun, die Schriften werden importiert, können wir Ihnen überall auf unserer Webseite.   Jeder Satz hat eine Anzahl von Varianten zur Auswahl, die Sie verwenden können, diejenigen, die nach dem Grafik-design.  Für den Anfang werden wir alle den text mit 'KomikaTextTightRegular' wie folgt:

Und Sie können testen Sie das Ergebnis im browser: 


Step 6 - Styling der top-Navigation 

Zurück zu der psd-Datei nun.   Hide alles, aber die Registerkarte hintergrund, erstellen Sie eine neue Scheibe für das Navigations-tab mit dem Namen bg-Haupt-navigation und speichern Sie Sie für das web als PNG-Datei.

 In unsere CSS-Datei fügen wir die Stile für die in der Navigationsleiste, um die gewünschten hover-Effekt.  Wir werden hinzufügen, den hintergrund der hover-Aktion und erstellen Sie einen ähnlichen Stil für die ein.ausgewählte Instanz.  In Bezug auf die typographie, pro die Grafik, verwenden wir "KomikaTextItalic" und fügen Sie einen schönen text-shadow-Stil zu machen es besser Aussehen.

Ihre Seite sollte so wie in diesem Stadium der Entwicklung: 


Schritt 7 - Header Content 

 Neben dem logo und der Navigationsleiste, werden wir hinzufügen müssen, um die Suchleiste und die social-media-links, um den header-Abschnitt.  Beginnen wir mit dem erstellen der container-box in HTML und das hinzufügen der folgenden div in das header-div.

Und einige notwendige styles: 

 Wenn im browser getestet:


Schritt 8 - Suchleiste 

Als Nächstes werden wir beginnen die styling-Suche-Bereich.   Es ist im Grunde ein Formular mit einem Eingabefeld und eine Schaltfläche (siehe Schritt 3). Für diese, fügen Sie den folgenden code innerhalb der "header-content-div: 

Und das styling machen es schön Aussehen: 

Das sollte uns geben: 


 9. Schritt - Social-Media-Links

Unterhalb der Suchmaske div, fügen Sie ein div mit der id " social_media.  In ihm können Sie eine Liste der social-media-links Ihrer Wahl.  Ich bin mit Social Media Icon Pack von Komodo Media 

 Und auf das stylesheet:


Schritt 10 - Schiebe-Banner 

Wir beginnen mit dem Schiebe-banner.  Beginnen durch das herunterladen von Easy Slider 1.5 und fügen Sie die Dateien in einen Ordner namens Banner. 

Es gibt mehrere Beispiele in den Ordner "library" -- wir werden nachahmen 02.html.   Benennen Sie die Datei, wenn nötig, löschen Sie alle unnötigen HTML-code und ersetzen Sie die Bilder mit ein paar Beispiel-Bilder.

So, die HTML-Datei für das banner sollte so etwas wie dieses: 

Und hier ist der CSS 

An dieser Stelle sollten Sie etwas wie dieses: 

Keine Sorge, wenn der Schieberegler ist ein wenig buggy, beheben wir den Fehler in einer minute. 

Die Positionierung anzupassen und ersetzen Sie die Pfeile 

 Schneiden Sie die zwei Pfeile (prev und next) und speichern Sie Sie als PNG-Dateien in den Ordner "Bilder" von der banner-Verzeichnis testen.

 Dann anpassen der CSS, um richtig zu arbeiten mit den neuen Pfeilen

Was produziert: 

Positionieren 

Jetzt legen wir die Positionierung, Breite und Höhe des das Banner im Zusammenhang mit Divs. Wir werden auch fix die JS-Bibliothek zu vermeiden, jedes problem in Bezug auf die zusätzliche bubble-div. 

Hier ist die geänderte CSS: 

Und das Ergebnis im browser: 

Bubble Hintergrund 

Nun schneiden Sie die post-Inhalt-hintergrund.   Nur mit dem reden Blasen sichtbar in Ihr .PSD, zeichnen Sie ein Slice mit dem Namen "bg-Blase", und speichern Sie es als .png-Datei.

 Ändern Sie die CSS-hinzufügen hintergrund und passen Sie die Positionierung der Blase div, entsprechend.

Hier ist, wie es aussieht in der browser-Software verhindern; entfernen Sie alle temporären Hintergrundfarbe, wenn Sie wünschen. 

Post Inhalt 

 Beenden Sie die banner-Abteilung, lassen Sie ' s fügen Sie den HTML-Code für die Veröffentlichung von Inhalten.

Verschmelzen mit dem Haupt-Template-Datei 

 Es ist Zeit zum Zusammenführen der separaten Modul-mit unserem Hauptdokument.

 Zuerst kopieren Sie die banner /js-Ordner in das root-template, fügen Sie dann alle banner Bilder in den /images Ordner in das template-Verzeichnis.

Als Nächstes fügen Sie den folgenden code innerhalb des - tag unserer index.html"  Datei:  

Und fügen Sie die banner divs entsprechend innerhalb der top_banner div. 

Und die komplette CSS, um das banner der Arbeit 

Wir werden den Stil der vorgestellten Inhalte in Kürze.  An diesem Punkt, obwohl, sollten Sie etwas ähnlich dem folgenden Bild: 


Schritt 11 - Content-Wrapper und Hintergrund 

 Voran mit der Attrappe, fügen Sie ein div unter dem top-banner, namens content_wrapper, und in einem anderen div-Element namens page_content, welche die eigentlichen Informationen beinhalten.

 Dann, um zu machen es so Aussehen wie das design, nutzen wir die CSS3 zum hinzufügen von abgerundeten Ecken bis hin zu den page_content div und die Seite LOCKE, die wir in Scheiben geschnitten in Schritt 3.

Was unsere Seite Aussehen soll, wie an dieser Stelle: 


Schritt 12 - Post-Bild und Titel 

Let ' s mock-up ein Test-post. 

Pro das design, wir benötigen ein quadratisches Bild mit der post-Titel und die Kategorien-Liste platziert auf zwei Streifen oben.  Lassen Sie sich mit der HTML-ersten. 

Erstellen Sie ein div namens post und legen Sie Sie in die page_content div.   Dann fügen Sie ein Bild, einen Titel und einige Metadaten auf den container.

 Das CSS für diesen Teil ist kompliziert, da jeder Beitrag muss 50% der Breite in Bezug auf die page_content container, plus der Streifen sollte vor das Bild.  Wir müssen spielen, um mit relativer Positionierung und negativen margins, dies zu verwirklichen.

 Sie sollten nun etwas, das etwa so:


Schritt 13 - Post-Inhalt, Hintergrund und Position 

 Nun, wir fügen Sie ein div, das den Beitrag enthält, den Inhalt.

 Schneiden Sie die hintergrund-Bild für die post_content div, und speichern Sie es als PNG-Datei.

Erste, setzen wir Ihre Positionierung in der CSS-Datei. 

Ein Blick in den browser: 


Schritt 14 - Inhalte Posten 

 Lassen Sie die Container für die post brief -, post-Informationen und Kommentare:

Und das styling, um alles schön Aussehen: 

Und wir sind fertig mit der post!!! 


Schritt 15 - Fügen Sie Weitere Beiträge 

Lassen Sie uns gehen Sie vor und fügen Sie weitere Beiträge um Ihre Attrappen.  Dupliziere diese block für so viele Male, wie Sie wollen, dass die post div.  Sie sollten loszuwerden, die temporären Höhe, die wir auf der page_content div.   Wenn alles wurde korrekt ausgeführt, wird das layout erhöhen Sie Ihre Höhe, wie wir hinzufügen, mehr Beiträge auf der homepage.


 Schritt 16 - Featured-Post-Content

 Jetzt haben wir die grundlegenden post-styling fertig sind, lassen Sie uns Stil die vorgestellten Inhalte zu veröffentlichen.  Denken Sie daran, wie hatten wir den folgenden code innerhalb der Blase div?

Fügen Sie den folgenden CSS und replizieren die Blase auf alle Folien unserer rotierenden banner.  

Ich habe auch einen border und box-shadow, um das Schiebe-Bild: 

Es sollte ungefähr so Aussehen: 


Schritt 17 - Footer-Widgets 

 Anstelle der klassischen sidebar, wollte ich hinzufügen, widget bereit Fußzeile. Fügen Sie den folgenden code in das footer-div.  Innerhalb der sidebar wird ein weiterer container mit dem Namen widget, und von innen, div: 

  • Titel 
  • eine ungeordnete Liste und 
  • ein div für die gelockt Ecke 

 Wir kümmern uns um die Kategorien-Liste.

 Jetzt in der PSD-Datei, schneiden Sie die Ecke, name it widget-curl und speichern Sie das Bild für das web als JPG-Datei.  Wieder, schneiden Sie den kleinen Pfeil neben den links, name it Pfeil und speichern Sie es als PNG-Datei.

Und Bearbeiten Sie die CSS-Datei, etwa so: 

Beim testen in einem browser, sollten Sie etwas wie das folgende Bild: 


Schritt 18 - Weitere Widgets 

Replizieren Sie den HTML-code und fügen Sie eine zweite oder sogar eine Dritte Liste-widget.  Diese Zeit werden wir hinzufügen, Archiv der Fußzeile.   Testen kann man das layout jetzt hinzufügen mehrere Exemplare des widget-div zu sehen, wie es aussieht.  Optimal, der footer-Bereich erhöhen, wie Sie mehr hinzufügen widgets.

Dies ist, wie sieht es mit der Archive-Abschnitt Hinzugefügt: 


Schritt 19 - Tabbed Pane 

 Als Beispiel für eine komplexere widget, fügen Sie ein Registerkarten-Bereich mit drei unterschiedlichen Inhaltstypen in den einzelnen Tabs.

Zuerst fügen Sie den folgenden HTML-code als Basis-markup: eine ungeordnete Liste für die tabs, und die divs mit unterschiedlichen ids für die Inhalte.   Ich bin das hinzufügen einer Allgemeinen Klasse namens " Registerkarte, um alle content-divs, um zu vermeiden, duplizieren Sie den code in der CSS-Datei. 

Zunächst erstellen wir eine JavaScript-Dokument, namens tabs.js und speichern Sie Sie in den /js Ordner.   Sie sind durch hinzufügen dieser Zeile in den - tag.

 Fügen Sie nun eine grundlegende jQuery tabbed pane, indem Sie den folgenden code, um die tabs.js Datei.

Mit der JavaScript-Funktion arbeiten, können Sie die styling machen es hübsch Aussehen.  Als erstes müssen wir uns die Scheibe den kleinen Pfeil, um die ausgewählte Registerkarte.  Name it tab-Taste, und speichern Sie Sie als PNG. 

 Nun fügen Sie den folgenden code in die CSS-Datei:

Jetzt sollten Sie über das Bedienfeld mit Registerkarten arbeiten, können Sie die Inhalte im inneren! 


Schritt 20 - Tab-Inhalte 

Lassen Sie uns gehen Sie vor und fügen Sie einige Inhalte auf die Reiter.   Ein Blick auf die Grafik, Sie werden feststellen, dass wir eine Liste der drei Beiträge (aktuelle und beliebte) mit dem Titel und eine kurze, und ein pager unten zu navigieren Sie durch die Beiträge.

Fügen Sie den folgenden code innerhalb einer Registerkarte:  

Und jetzt das CSS: 

Replizieren Sie den HTML-Code für jede Registerkarte.  Dies ist, wie es Aussehen sollte: 


Schritt 21 - Footer 

Schließlich, fügen Sie die Fußzeile, Navigationsleiste und die copyright-Informationen: 

 Nun schneiden Sie die 1px verlaufslinie aus der PSD-Datei, mit dem Namen "bg-footer-line" und speichern Sie es als JPG-Datei. Schließlich Bearbeiten Sie die CSS um alles einzurichten. 


Fazit 

Und das ist es!  Und das ist es! Wir sind fertig mit der Konvertierung. Der code wurde hier getestet in allen gängigen Browsern.  Wenn Sie brauchen, IE6 und 7-Kompatibilität, sollte es nicht eine große Sache zu schreiben, ein paar fixes für Sie konkret.  Unser design ist nun bereit für die Integration in eine CMS-wie eine Haut.   Viel Glück und vielen Dank für das Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.