Vorbereitung einer Illustration für das Web
16. Juni 2008 von chriscoyier · 3 Kommentare 
Illustration ist ein schöner Trend in Web-Design. Es passt auch das Medium. Great Illustrators aber oft nicht in Bezug auf die Web-denken, wenn sie ihre Illustrationen zu tun. Werfen Sie einen Blick auf diese sehr schön sky / Hügel Stadtbild Beispiel fand ich auf Shutterstock:
Ich denke, das Beispiel wäre ein idealer Ausgangspunkt für eine Web-Design machen, aber offensichtlich ist es nicht für eine solche Aufgabe out-of-the-box "vorbereitet. Ermöglicht eine Manipulation zu tun und bereiten sie im Web.
Get it in Photoshop
Es ist fantastisch, dass die Illustration Vektor ist. Das heißt, wir können es jeder Größe müssen wir ohne Verlust an Qualität. Unser Ziel wird es sein, machen diese Szene, in der Mitte oben im Browser zu sitzen, so let's get it in Photoshop auf das Maximum mit der wichtigsten Content-Bereich unserer Website. Sprich: 960px. Lege ein neues Photoshop-Dokument 960px breit und größer als sie sein muss um zu passen.
Öffnen Sie die Darstellung in Adobe Illustrator und Alles markieren. Copy and Paste in Ihre Photoshop-Dokument. Vergewissern Sie sich, um es als Smart Objekt einzufügen. Dies ließ sie behalten es Vektor-Art, so dass Sie mit gehobener, ohne Qualität zu verlieren. Es mag mehr als zu gering. Keine Sorge gibt, so skalieren, bis in Ihre 960px breit Dokument passen.
Erweiterung der Kanten
Browser-Fenster sind nicht mit fester Breite Umgebungen wie Photoshop-Dokumenten. Wir müssen unsere Darstellung vorbereitet hübsch aussehen, wenn der Browser-Fenster ist größer als unsere Basis 960px. Fahren wir fort und erhöhen die Leinwand Breite unseres Dokument 1280px, so dass wir einen gewissen Spielraum für die Arbeit mit.
Unser Ziel ist es, die den Rand der Abbildung Ende in etwas, das sowohl horizontal als wiederholbare haben wird. Die Person, in dünne Scheiben auf dieses Dokument wird in etwa so müssen diese Design-Arbeiten für das Web zu machen. Letztlich dieser Scheibe wird der Hintergrund für die <body> Element der Web-Seite, mit unseren wichtigsten Abbildung oben sitzen.
Ich werde eine kleine Splitter des rechten Randes dieser Illustration zu nehmen und "float" es auf seine eigene neue Ebene (Befehl-J).
Jetzt können wir Frei transformieren diese neue kleines Stück (Command-T) und erweitern Sie es horizontal off beiden Seiten des Dokuments. Da die Gradienten erstellt wurden, nett und vertikal, funktioniert diese Erweiterung schön von der rechten Seite. Die rechte Seite aber sieht viel zu abrupt, mit dem Hügel, Busch-und Straßenverkehr abgeschnitten plötzlich.
Verschleierung der Transition
Anstatt etwas zu tun, Phantasie und versuchen, diese beiden Ebenen miteinander verschmelzen, let's dunkel, daß harte Übergang, indem Sie ein Objekt im Vordergrund direkt über oben. Diese Darstellung könnte mit ein bisschen extra Tiefe do anyway.
Dieser Vektor-Mailbox wird schön.
Löschen Sie alles außer dem Postfach selbst und fügen Sie ihn in der Darstellung als Smart Objekt so wie wir die ursprüngliche Darstellung gebracht. Ein wenig Ändern der Größe und Platzierung und haben wir die perfekte Voraussetzung für den Übergang verdeckt in Hintergründen.
Der Main Content Area
Unsere Abbildung wird sich für einen schönen Kopf-und Hintergrund zu machen, aber für den eigentlichen Inhalt der Website, werden wir eine Art von großen Block aus weißem müssen. Ermöglicht ein weißes Rechteck mit abgerundeten Ecken ganz an der Spitze mit ein bisschen wie ein Schatten fallen um sie zu deaktivieren.
Ausfüllen des Bottom
Mit dem horizontalen Rand jetzt gut verdeckt, können wir füllen die Farbe auf den Rest der Unterseite der Website Mockup. Eine Farbe (mit der Pipette) aus dem Weg unterste Pixel der Grafik und füllen Sie dann unsere unterste leere Ebene mit dieser neuen Farbe.
Diese Haupt-Content-Bereich wird nun ein Kinderspiel für jeden anständigen Webdesigner in Scheiben schneiden.
Der letzte Schliff
Werfen Sie einen netten kleinen Willkommens-Nachricht in den Himmel, und wir haben uns eine gut aussehende dargestellten Web-Mockup. Weil wir nachdenklich Pflege genommen haben sowohl horizontale und vertikale Erweiterbarkeit Erweiterbarkeit, ist diese Darstellung jetzt perfekt für die Umrechnung in echten Web-Markup.
Stay tuned auf CSS-Tricks, wo ich werde diese Umwandlung in eine echte Web-Seite in den nächsten Wochen.
Warum Photoshop für diese Aufgabe überhaupt?
Warum nicht photoshop? Photoshop ist ein gutes Werkzeug, um Bilder für das Web, nicht für Vektoren, wie das Bild, sondern gut für Layouts (Tutorial Idee).
Danke für den Tipp! Photoshop is magic!