Share
In diesem Tutorial zeige ich Ihnen einen wirklich einfachen Effekt, den Sie zusammen mit guter Fotografie verwenden können, um großartige Ergebnisse zu erzielen. Wir werden einen Raum aus Fotos von Objekten zusammenstellen. Dieser Raum kann dann in Flash zum Erstellen einer Website oder einfach als Grafik verwendet werden.
Ich habe diese Komposition vor etwa eineinhalb Jahren produziert. Es wurde auf der FlashDen Showroom-Website verwendet, die ich als Marketing- und Promotion-Tool für eine der Psdtuts + -Schwester-Sites FlashDen.net entwickelt hatte.
In diesem Tutorial werde ich den ersten Raum zusammenstellen. In der Fortsetzung werde ich den dritten Raum machen. Im letzten Teil dieser Serie werde ich einen brandneuen Raum mit detaillierteren Schritten als die ersten beiden Tutorials erstellen, denn für diese ersten beiden gehe ich alte Arbeiten durch, anstatt etwas von Grund auf neu zu machen.
Dieser Effekt beruht im Wesentlichen auf vielen guten Fotos. Leider bedeutet dies, dass dieses Tutorial eher ein allgemeiner Leitfaden ist, als dass Sie Schritt für Schritt explizit folgen sollen. Es sei denn natürlich, Sie möchten alle Stock-Fotos kaufen, die Sie dafür benötigen. Sie können alle von iStockPhoto beziehen, obwohl ich nicht die genauen URLs habe, da ich sie vor langer Zeit gekauft habe und mein Konto dort buchstäblich Tausende von Dateien heruntergeladen hat :-) Auf jeden Fall ist hier ein kleines Bild von allen!
Hier ist zunächst das fertige Produkt. Nachdem ich dieses Modell in Photoshop erstellt hatte, erstellte ich die Website in Flash mit Animationen und Schaltflächen und so weiter. Sie können die Flash Showroom-Site hier sehen.
Sie können auch auf das Bild unten klicken, um die vollständige Ansicht anzuzeigen.
Das endgültige Bild ist jetzt 1024x768. Das erste, was ich tat, war das Haupthintergrundbild zu platzieren. Leider sind es die falschen Abmessungen (wie Sie unten sehen können). Ich könnte es vergrößern und zuschneiden, aber dann würde ich etwas von dem schönen Detail verlieren, das ich später verwenden möchte. Deshalb habe ich mich dafür entschieden, das Foto zu vergrößern.
Glücklicherweise ist der Job nicht zu schwer, da der obere Bereich des Fotos recht unkompliziert ist. Der Trick besteht darin, Farbverläufe des aktuellen Hintergrunds zu verwenden, um das Foto zu erweitern.
Ich habe zuerst mit dem Stiftwerkzeug eine Form gezeichnet (gezeigt), die ich mit meinem Verlauf füllen wollte. Beachten Sie, dass die Form einen Teil des Bereichs des tatsächlichen Fotos abdeckt. Dies ist so, dass ich anschließend einen weichen Radiergummi verwenden kann, um die Kanten zu löschen und sie graziös einblenden zu lassen. Ich habe dann einen dunklen Schatten von rechts und einen hellen Schatten von links ausgewählt und einen linearen Farbverlauf über einen neuen gezeichnet Ebene über dem Foto. Es folgte ein sanftes Löschen entlang der Unterseite, um sich zu vermischen.
Ich wiederhole den gleichen Schritt, aber auf der linken Seite mit der hellgrauen Fläche. Auch hier ist die Form, die ich über dem Foto gezeichnet habe, größer als nötig, sodass ich sie für eine sanfte Überblendung zurückschreiben kann.
Schließlich sah der Schatten auf der rechten Seite etwas uneben aus, also fügte ich eine dritte Schicht hinzu und zeichnete mit dem Stiftwerkzeug eine Form um das Sofa herum und gab ihm einen Dunkel-zu-Licht-Verlauf, um eine gleichmäßigere Schattierung zu erzielen die letzten Spuren davon verschwinden lassen, wo ich die Bilder gemischt habe.
Nachdem der Hintergrund fertig ist, können wir mit dem Platzieren von Objekten beginnen. Bevor wir das tun, sollte ich noch ein paar Worte zu der Art der Bilder sagen, die Sie auswählen möchten:
Auf jeden Fall verwenden Sie für jedes Objekt einfach das Zeichenstift-Werkzeug, zeichnen das Objekt nach, klicken Sie mit der rechten Maustaste auf die Leinwand, wählen Sie im angezeigten Menü die Option Auswahl aus, kopieren Sie das Objekt aus dem Hintergrund und fügen Sie es ein Ihre Hauptleinwand. Es gibt andere Möglichkeiten, Objekte zu extrahieren: Sie können beispielsweise das Zauberstab-Werkzeug verwenden, wenn das Objekt flach weiß ist. Ich finde es jedoch viel sauberer und mit dem Stift-Werkzeug nicht viel schwieriger. Wenn Sie das Zauberstab-Werkzeug verwenden, stellen Sie sicher, dass Sie ein größeres Foto verwenden und dann verkleinern, um beschissene Pixeleffekte auszublenden.
Sie können auch das Filter> Extraktionstool verwenden. Dies ist jedoch nicht viel einfacher und das Ergebnis ist nicht immer so gut.
Jedenfalls habe ich hier den Fernseher in meine Kulisse gestellt. Da sich auf der rechten Seite des Raums Schatten befindet und auf der linken Seite heller ist, habe ich mich auch mit dem Burn-Werkzeug über den Fernseher gewandt, damit er etwas mehr passt. Licht und Schatten sind sehr wichtig, um Objekte an ihre Umgebung anzupassen. In diesem speziellen Tutorial werden wir nicht viel davon machen, aber wir werden den dritten Teil dieser Serie machen.
Auf jeden Fall sieht der Fernseher schon gut aus, aber eigentlich sollte er einen Schatten auf die Wand unten und rechts werfen. Momentan sieht es so aus, als schwebe es einfach im Weltraum, also beheben wir es als nächstes.
Es gibt viele Möglichkeiten, Schatten zu erzeugen. In diesem Fall habe ich gerade eine Ebene unter dem Fernsehgerät erstellt und dann mit einem weichen Pinsel und schwarzem Farbton nach unten und nach rechts gemalt. (Übrigens, ich bin mir nicht sicher, warum ich diese Werkzeuge und Verlaufspaletten im Screenshot belassen habe; das ist ein faules Tutorial, das genau dort zu finden ist :-)
Wie Sie sehen können, ist der Schatten genau das, was Sie erwarten würden, wenn Licht von oben und von links einfällt. Dies ist eine Art von Übereinstimmung mit dem Hintergrundbild, in das wir eingefügt werden.
Danach legte ich ein Bild auf den Fernseher. Ich habe es in eine neue Ebene eingefügt und ihm dann einen inneren Schattenebenenstil mit einem Abstand von 0 zugewiesen. Dies ist so, dass ein wenig Schatten an den Rändern vorhanden ist und das Bild so aussieht, als sei es ein Teil des Bildes. Dies ist ein bisschen ein schneller und schmutziger Effekt. Wirklich, wenn Sie den Fernseher genau richtig machen wollten, würde ich vorschlagen, den Fernseher zu wechseln und dann zu beobachten, was an den Kanten passiert und welche Lichter das Glas / der Bildschirm vom Licht hat. Aber in diesem Fall ist der Fernseher klein und wenn ich Flash nehme, platziere ich hier Videos, daher ist es nicht so wichtig.
Als nächstes wollen wir den Laptop platzieren. Wie beim Fernseher habe ich den Laptop und die Maus aus den jeweiligen Bildern herausgeschnitten. Ich habe sie mit dem Transformationswerkzeug (Strg + T) verkleinert und entsprechend platziert. Ich zog dann eine Mausschnur (siehe nächsten Schritt).
Damit der Laptop wirklich so aussieht, als wäre er wirklich da, zog ich eine Mäuseschnur, die sich über das Kissen und auf den Boden legt. Dadurch können die Objekte so aussehen, als würden sie wirklich mit ihrem Hintergrund interagieren und nicht nur schweben.
Ich tat dies, indem ich mein Stiftwerkzeug schnappte und mir vorstellte, wohin das Mauskabel führen würde, wenn es wirklich dort wäre. Es sah so aus, als würde es entlang des Kissens gehen, hinunterfallen und dann am Boden entlang gehen (nicht wirklich eine Raketenwissenschaft, aber ich dachte, ich würde es sowieso buchstabieren!) Dann, als ich den Pfad gezeichnet hatte, machte ich einen Rechtsklick und wählte Stroke Path und verwendete einen 2px harten Pinsel mit hellgrauen Farben.
Nachdem die Schnur gezogen wurde, habe ich mit dem Brennwerkzeug ein wenig Schatten auf die Schnur gestrichen, damit sie realistischer aussieht (da in Wirklichkeit alles Licht und Schatten enthält und kein Objekt wirklich nur eine flache Farbe ist).
Als Nächstes müssen wir einen Schatten unter dem Laptop und der Maus hinzufügen. Der Schatten der Maus ist ziemlich unkompliziert - es ist nur ein wenig verschwommene Dunkelheit, die auf den Teppich über Multiply eingestellt ist. Für den Laptop soll der Schatten den Rand des Kissens nach unten zeigen.
In der Abbildung unten habe ich den Laptop angehoben, damit Sie den Schatten sehen können, den ich richtig eingezeichnet habe. Wieder einmal habe ich es einfach mit einem weichen Pinsel und dunklen Farben erstellt. Dann habe ich die Ebene auf Multiplizieren gesetzt, damit sie sich besser mit dem darunter liegenden Foto verbindet. Da das Kissen eine Kante hat, an der der Schatten über die Kante geht (ganz rechts), habe ich den Winkel für den Schattenwechsel so eingestellt, dass er etwas nach unten geht und das Kissen hinuntergeht.
Mit den Lautsprechern auf der rechten Seite habe ich im Grunde dasselbe gemacht wie mit dem Laptop - d. H. Sie erstellen eine Ebene unter dem Foto, zeichnen die Form unter dem Objekt in dunklen Farben und setzen sie auf Multiplizieren.
Um herauszufinden, welche Art von Schatten ein Objekt erzeugen wird, müssen Sie nur Objekte im wirklichen Leben beobachten und beobachten, wie sie mit unterschiedlichen Lichtern Schatten werfen. Für diese Art von Bild muss der Schatten nicht perfekt sein, er muss nur ziemlich gut sein. Wenn Sie genau hinschauen, werden Sie feststellen, dass die Lichter und Schatten manchmal nicht ganz sinnvoll sind (z. B. bei den Lautsprechern in der Abbildung unten. Die linke Seite des rechten Lautsprechers ist dunkel und für die linke Seite umgekehrt) Sprecher, wenn das Licht links ist, ist dies das Gegenteil von dem, was geschehen sollte. Aber für ein Bild wie dieses, bei dem Sie sich nur dem Realismus nähern möchten, macht der Effekt den Trick und täuscht das Auge.
Für die Uhr oben links habe ich eigentlich nur eine mit Photoshop entworfen - man beachte, dass es nur ein paar Rechtecke ineinander sind, die Farbverläufe verwenden, und oben links ein kleines Highlight. Ich werde nicht zu viel über diesen Schritt sprechen, da es in diesem Tutorial darum geht, Sachen zusammen zu stellen und keine gefälschten Uhren zu zeichnen :-) Es reicht, um zu sagen, ich konnte die richtige Uhr nicht finden und das hat den Trick.
Zum Schluss habe ich hier und da eine Menge Text und Schaltflächen und Was haben Sie und der Look ist komplett.
Wie ich zu Beginn sagte, ist die Wirkung eines solchen Effekts vom Standpunkt der reinen technischen Fähigkeiten von Photoshop nicht allzu schwierig. Vielmehr geht es darum, Ihr Auge zu entwickeln, um zu erkennen, wie Dinge zusammenpassen sollten, eine gute Auswahl von Fotos auszuwählen, die zusammengefügt werden sollen, und Schatten und Highlights hinzuzufügen, um alles zusammenzuführen.
Der endgültige Effekt mit den richtigen Fotos kann sehr schön sein und eignet sich besonders für die Verwendung in Flash, wo Sie Objekte zum Einfliegen oder Materialisieren bringen können.
Sie können die Flash Showroom-Site hier sehen oder Sie können auch auf das Bild unten klicken, um die vollständige Ansicht anzuzeigen.
Im nächsten Teil dieser Serie gehen wir in ähnlicher Weise durch einen anderen Raum. Es gibt wahrscheinlich nicht viel mehr hinzuzufügen, aber es ist immer noch interessant, den Prozess erneut zu sehen. Im letzten Teil werde ich einen anderen Raum von Grund auf zusammenstellen und versuchen, alle kleinen Details des Prozesses zu scannen. Also bis zum nächsten Mal, Leute!
Anmerkung des Herausgebers: Dieses Tutorial datiert vor dem Start unserer PLUS-Mitgliedschaften. Leider gibt es keine begleitende PSD-Datei.
Accentsconagua