Share
Ich bin ein großer Fan von Foto-zentrierten Site-Designs? Daher freue ich mich heute, ein neues "Complete Site" -Tutorial zu starten, das sich an Fotografen, Illustratoren und andere visuelle Kreative richtet. An Tag 1 haben wir die Vorlage in Photoshop mit speziellen Tricks und Techniken entworfen. Heute, am zweiten Tag, gehen wir durch die letzte Entwurfsphase und bereiten dann die Vorbereitung für die Codierung vor dem Flug vor, die wir am dritten Tag ausführlich besprechen werden. Am vierten Tag werden wir zeigen Sie erstellen drei völlig unterschiedliche Websites mit demselben HTML-Code.
Die heutige Sitzung wird in Bezug auf technische Tricks relativ schnell sein? Wir werden uns jedoch intensiv mit den "Workflow-Tipps" beschäftigen. Seien Sie also vorsichtig, wenn Sie sich für die Phase eines Projekts interessieren, die nach dem Entwurf und vor Beginn der Codierung stattfindet.
Beginnen wir die heutige Sitzung mit einigen allgemeinen Anmerkungen dazu "vor dem Flug"Ist: Wenn Sie mit dem Entwerfen einer Website fertig sind, gibt es einige wichtige Schritte, die idealerweise vor dem eigentlichen Codierungsprozess ausgeführt werden sollten. Der erste Schritt besteht darin, unser Design aufzuschneiden.
Die vollständige Schritt-für-Schritt-Anleitung befindet sich unten. Wir beginnen mit dem Photoshop-Dokument, das wir an Tag 1 erstellt haben, aber Sie können auch die Demo-PSD herunterladen, um Ihre Arbeit mit meiner zu vergleichen.
Ok, mit unseren jetzt klar definierten Zielen beginnen wir!
Der erste Schritt besteht darin, alle Bilder aufzuteilen, die in der codierten Vorlage benötigt werden. In unserem Fall ist dieser Prozess sehr einfach: Schauen Sie sich die Vorlage genau an und weisen Sie auf alle Gestaltungselemente hin, die nicht mit CSS oder anderen Codierungstricks kopiert werden können. Hier ist unsere Liste:
Lassen Sie uns beschriften, wo sich diese auf unserem Design befinden (klicken Sie für ein Bild in voller Größe):
">
Das Aufschneiden dieser Bilder ist nicht schwierig, daher gehe ich nicht zu tief in die Tiefe, aber bevor wir anfangen, ist es eine Überlegung wert, ob einige dieser Bilder zu einem einzigen Bild kombiniert werden können CSS-Sprite.
Was ist ein CSS-Sprite?? Vereinfacht ausgedrückt, ist ein Sprite ein Verfahren, bei dem ein einzelnes Bild zum Speichern mehrerer kleinerer Bilder verwendet wird. Sehen Sie sich beispielsweise das bei Webdesigntuts verwendete Sprite an:
Wenn wir mit der Codierung beginnen, können wir einfach die CSS-Positionierung und das Beschneiden des Bildes verwenden, um das gewünschte Sprite-Stück anzuzeigen.
Warum ein CSS-Sprite verwenden?? Geschwindigkeit! Die Verwendung von Sprites zum Speichern von Bildern verringert die Zeit, die zum Laden einer gesamten Webseite benötigt wird. Wenn Bilder auf mehreren Seiten immer wieder verwendet werden, kann dies viel Zeit sparen.
Sprites eignen sich am besten für kleinere Bilder, die immer wieder verwendet werden. Zum Beispiel können die meisten der oben diskutierten Assets tatsächlich auf dieses Sprite reduziert werden:
In einem einzigen Sprite haben wir den Großteil unseres Designs bereits für die Codierung vorbereitet. und es ist alles unter 19 kb! Nicht schlecht, richtig?
Um ein eigenes Sprite zu erstellen, erstellen Sie einfach ein leeres Dokument (beginnen Sie mit einer beliebigen Größe, beschneiden Sie diese schließlich nach unten, sodass jedes Element kaum auf das Sprite passt), und fügen Sie dann die Gestaltungselemente mit einem angemessenen Abstand zwischen den Elementen hinzu Element. Hier einige zusätzliche Tricks:
Für die restlichen Bilder können wir einfach unsere eigenen generischen Schnitte erstellen. Ich werde sie unten aufführen und jedes beschreiben (und warum es kein Sprite ist):
Die innere Schattenüberlagerung für das Slidedown. Es ist kein Sprite, weil es groß ist (was bedeutet, dass es die Größe des Sprites unnötig erhöhen würde).
Die oberen und unteren abgerundeten Ecken: Dies sind aus einigen Gründen keine Sprites: 1) Wie im obigen Beispiel sind sie groß und unhandlich. 2) Diese werden wahrscheinlich zu einem späteren Zeitpunkt erneut mit der Haut verkleinert oder ihre Größe geändert, was bedeutet, dass das Laden in ein Sprite nur zusätzliche Arbeit bedeutet und 3) die Möglichkeit besteht, dass wir diese Bilder in Zukunft für CSS-Methoden festlegen.
Das Hintergrundbild: Dies ist kein Sprite, weil 1) es wahrscheinlich ist, dass es mit einem anderen BG-Bild ausgetauscht wird und 2) es unendlich wiederholt werden muss, was Sprites nicht gut tun.
Andere "Nicht-Sprites": Natürlich werden wir unsere Thumbnails oder andere Inhaltsbilder nicht als Sprites laden. Der Hauptgrund hier ist Praktikabilität? Sprites sind für grundlegende Benutzeroberflächen- und Branding-Elemente gedacht, die eine Website schnell laden und beschleunigen können? Wenn wir JEDES Bild in ein einzelnes Sprite laden, würde dies zu einer extra langen Ladezeit führen, selbst wenn es nach dem Laden schneller laufen würde. Denken Sie an die Pre-Loader für diese riesigen Flash-Websites vor ein paar Jahren;)
Der andere offensichtliche Grund ist, dass sich diese Inhaltsbilder wahrscheinlich jedes Mal ändern, wenn jemand die Site aktualisiert. Das Sprite-Image soll so gut wie unverändert bleiben, solange das Design der Site unverändert bleibt.
Letzte Notizen: Es ist wahrscheinlich selbstverständlich, aber es gibt andere Möglichkeiten, dieses spezielle Design zu schneiden. Unterschiedliche Ansätze können für Ihre eigene Variation dieses Designs sinnvoll sein? beschränken Sie sich also nicht auf die oben genannten Ideen. Wenn Sie die abgerundeten Ecken und den Hintergrundschatten mit CSS3, der Eigenschaft z-index und einer transparenten PNG-Datei angreifen möchten, sollten Sie dies unbedingt tun!
Jetzt, da wir unsere Image-Assets vorbereiten können, ist es an der Zeit, unsere Skripts an einer Stelle zu sammeln, sodass wir, wenn wir uns mit der harten Programmierung beschäftigen, bereit sind, zu handeln. Werfen wir einen Blick auf unser Design und lassen Sie uns die Schlüsselbereiche identifizieren, für die zusätzliche Skripte oder Plugins erforderlich sind:
Jede gute Fotografenvorlage braucht eine Lightbox? und es gibt momentan nur wenige bessere als prettyPhoto. Es ist einfach zu installieren / anzupassen und wird einige zusätzliche Funktionen bieten, die andere Leuchtkästen nicht bieten - wie Miniaturnavigation, benutzerdefinierte Add-Ons und vieles mehr.
Dies ist ein ziemlich einfaches Problem bei der Verwendung von jQuery. Daher verwenden wir für dieses Skript ein benutzerdefiniertes, leichtes Skript. Schauen Sie sich wieder an Tag 3 um zu sehen, wie es funktioniert!
jQuery Cycle übernimmt das schwere Anheben unserer Image-Slider. Es ist ein unglaublich gut dokumentiertes Plugin, was bedeutet, dass es leicht einzurichten (und anzupassen) ist, um den Anforderungen unserer Vorlage zu entsprechen.
Ich habe die Schrift Museo im Design verwendet, also müssen wir einen Weg finden, um diese in der codierten Version zu verwenden. Dies lässt sich am schnellsten mit @ font-face einrichten. Also haben wir die Schriftart durch Font Squirrel (http://www.fontsquirrel.com/fontface/generator) geführt, um unsere Fontdateien zu erstellen, die wir an Tag 3 verwenden können.
Stellen Sie sicher, dass Sie das prettyPhoto-Plugin herunterladen und die erforderlichen Assets in die entsprechenden Ordner kopieren (Javascript im Ordner "js", Stylesheets im Ordner "css" usw.). Das Zyklus-Plugin kann über Github und jQuery verknüpft werden von Google APIs.
An diesem Punkt sollten wir jetzt bereit sein, die HTML / CSS-Konvertierung zu starten. Wir haben unsere Site-Vorlage entworfen, alle Bilder, die wir verwenden müssen, geschnitten und alle Skripte von Drittanbietern zusammengestellt, die erforderlich sind, damit die Site so funktioniert, wie sie es wünscht. In der nächsten Phase machen wir die eigentliche Kodierung. Machen Sie sich also bereit für Tag 3!
Accentsconagua