Share
Für ein neues Symbol einkaufen? Suchen Sie nicht weiter. Erfahren Sie, wie Sie ein benutzerdefiniertes Warenkorb-Symbol für Ihr nächstes Webdesign-Projekt erstellen. Wir kombinieren 3D-Qualitäten mit einem flachen Look. Sie benötigen genaue Kenntnisse der Adobe Illustrators-Tools, um dieses Tutorial abzuschließen.
Unten ist das endgültige Design, auf das wir hinarbeiten werden.
Beginnen Sie mit der Auswahl des Rechteckwerkzeugs (M) und zeichnen Sie ein Rechteck mit einem 4-Punkt-Strich. Stellen Sie sicher, dass Sie für den Strich eine helle Farbe verwenden, damit Sie sehen können, was Sie tun, wenn Sie den 3D-Effekt anwenden. Wenden Sie keine Füllung auf das Rechteck an.
Gehen Sie zu Effekt> 3D> Extrudieren und Abschrägen. Geben Sie Ihrer Form eine Rotation für die X-, Y- und Z-Achse und eine Extrusionstiefe von ca. 16. Klicken Sie auf OK. Kopieren Sie diese Form und fügen Sie sie für den nächsten Schritt ein.
Doppelklicken Sie in der Aussehen-Palette auf 3D Extrude & Bevel. Geben Sie eine viel höhere Extrusionstiefe ein und klicken Sie auf OK.
Legen Sie die Formen übereinander und machen Sie die obere oder untere Form etwas kleiner oder größer als die andere. Auf diese Weise können Sie erkennen, dass der Korb aus zwei Formen besteht. So sollte Ihr Kunstwerk jetzt aussehen.
Um die Form weiter zu bearbeiten, müssen Sie zunächst auf Objekt> Darstellung erweitern gehen. Ziehen Sie mit dem Direktauswahl-Werkzeug (A) die unten hervorgehobenen Punkte. Bewegen Sie die Punkte etwas nach innen, so dass der gesamte Korb unten etwas schmaler ist.
Stellen Sie sicher, dass Sie die Punkte auch um die obere Kante des Korbs verschieben.
Wir werden einen blauen bis schwarzen Farbverlauf auf unseren Korb anwenden. Wenn Sie mit Schwarz arbeiten, stellen Sie sicher, dass Sie ein Schwarz mit Nullwerten für R, G und B verwenden. Dadurch erhalten Sie ein viel intensiveres Schwarz.
Wählen Sie die Oberfläche des Korbs aus und gehen Sie zu Objekt> Pfad> Versatzpfad. Geben Sie ungefähr -10 ein und klicken Sie auf OK. Dadurch wird ein innerer Bereich mit den gleichen Anteilen der größeren Form erstellt. Wir können dann zwei verschiedene Farben auf die Formen anwenden, um den Korb visueller zu gestalten.
Geben Sie der anderen Seite des Korbs dieselbe Versatzpfadbehandlung.
Wenn Sie möchten, dass Ihre Farbverläufe über mehrere Formen hinweg konsistent sind, müssen Sie beide Formen gleichzeitig auswählen. Ich habe das Aussehen einer sehr reflektierenden Oberfläche geschaffen, indem ich die Farbe im Farbverlauf abrupt verändere. Um eine realistische Reflexion zu erhalten, muss man etwas experimentieren.
Wählen Sie den inneren Bereich auf der Vorderseite des Korbs aus und wählen Sie Bearbeiten> Farben bearbeiten> Farbbalance anpassen. Geben Sie für jeden Wert 5 ein und klicken Sie auf OK. Dadurch wird die blaue Farbe im ausgewählten Bereich um 5 Prozent heller und der Eindruck einer geringfügigen Änderung der Oberfläche des Objekts wird vermittelt.
So sieht Ihr Kunstwerk jetzt aus.
Geben Sie den Rest des Korbs weiterhin an. Beobachten Sie, wie der reflektierende Look nicht zu übertrieben wird. Ich neige dazu, jedem Gesicht des Korbs nicht mehr als eine abrupte Farbänderung zu geben. Aber natürlich wurden Regeln aufgestellt, um gebrochen zu werden. Probieren Sie einfach verschiedene Winkel und Farbintensitäten aus, bis es für Sie richtig aussieht. Beachten Sie auch, dass das Innere des Korbs eine Reflexion nicht viel nutzt, nur einen dunklen bis hellen Farbverlauf.
Das Bohren der Löcher, die den Korb durchtrennen, ist einfacher als Sie denken. Zeichnen Sie mit dem Stiftwerkzeug (P) eine Form wie die unten stehende. Stellen Sie sicher, dass Sie den Zeilen des Korbs folgen. Vergewissern Sie sich im Wesentlichen, dass Ihre oberen Linien parallel zur Ober- und Unterseite des Korbs und Ihre Seitenlinien parallel zu den Seiten des Korbs sind.
Kopieren Sie die Form, fügen Sie sie ein und überlappen Sie sie wie unten gezeigt. Wählen Sie im Pathfinder Subtract from Shape Area und dann Expand.
Sie erhalten eine Form, die wie die Kante eines Fensters aussieht.
Da sich die Form des Hauptfensters immer noch in der Zwischenablage befindet, drücken Sie Wahltaste + F, um die Fensterform genau an der Stelle einzufügen, an der Sie sie kopiert haben. Sie können diese Form jetzt verwenden, um die anderen Fenster zu erstellen. Da sich die Korbform nach unten hin verjüngt, müssen Sie jedes Fenster so anpassen, dass es richtig aussieht. Verwenden Sie das Direktauswahl-Werkzeug, um jede Fensterform anzupassen.
Zeichnen Sie die Fenster auf der anderen Seite des Korbs.
Wählen Sie jede Fensterform auf einer Seite des Korbs aus und geben Sie ihnen gleichzeitig einen braunen bis schwarzen Verlauf. Dies garantiert, dass der Verlauf über alle Fenster hinweg gleichförmig und konsistent ist.
Um die Kästen, die in den Korb passen, zu machen, zeichnen Sie zuerst eine quadratische Form.
Gehen Sie zu Effekt> 3D> Extrudieren und Abschrägen. Geben Sie die Variablen unten ein und klicken Sie auf OK.
Kopieren Sie die Kästchen mehrmals und fügen Sie sie ein. Ändern Sie die Extrudiertiefe, um unterschiedliche Kästchenhöhen zu erhalten.
Um mit den Feldern weiterarbeiten zu können, müssen Sie sie unter Objekt> Aussehen erweitern erweitern. Sehr wichtig: Gruppieren Sie alle Felder auf, bis Sie sie nicht mehr auflösen können. Um die Gruppierung aufzuheben, gehen Sie zu Objekt> Gruppierung aufheben.
Drehen Sie dann die Kästchen so, dass sie alle in einem anderen Winkel liegen. Geben Sie ihnen einen warmen braunen Farbverlauf und vergewissern Sie sich, dass die Helligkeit jeder Seite der Box variiert wird, um ein realistischeres Aussehen zu erzielen.
Fügen Sie ein wenig mehr Details hinzu, indem Sie den oberen Rand der Box kopieren und einfügen und das Direktauswahl-Werkzeug verwenden, um das Objekt so umzuformen, dass es wie ein Stück Band aussieht. Füllen Sie die Form mit Weiß und passen Sie die Deckkraft in der Transparenzpalette auf etwa 10% an..
Gehen Sie zu Objekt> Pfad> Versatzpfad, geben Sie -5 ein und klicken Sie auf OK.
Wählen Sie die innere Form aus und passen Sie den Verlauf so an, dass er nicht in die andere Form dahinter übergeht.
Eine schnelle Möglichkeit, den Eindruck zu vermitteln, dass sich die Kisten im Korb befinden, ist das Anbringen einer Schnittmaske.
Zeichnen Sie mit dem Stiftwerkzeug eine Linie, an der die gepunktete Linie ist. Ihre Linie benötigt keine Füll- oder Strichfarbe. Die rote Linie unten ist nur zur Darstellung.
Stellen Sie sicher, dass sich die gerade gezeichnete Form vor den Boxen befindet. Markieren Sie alle Kästchen, wählen Sie die Maskenform aus und gehen Sie zu Objekt> Schnittmaske> Erstellen. Ihre Boxen werden sofort so aussehen, als wären sie im Korb!
Wenn Sie die Farbe oder Form der Felder weiter bearbeiten möchten, doppelklicken Sie darauf, um in den sogenannten Isolationsmodus (Illustrator CS3 und höher) zu gelangen, und passen Sie ihn an Ihre Vorlieben an.
Erstellen Sie einige Highlights im Korb, indem Sie zuerst mit dem Stiftwerkzeug eine Grundform zeichnen. Gehen Sie zu Effekt> Weichzeichnen> Gaußsche Weichzeichnung und geben Sie eine Variable ein, die für Sie gut aussieht.
Kopieren Sie alle bisherigen Elemente und fügen Sie sie ein. Wählen Sie die soeben erstellte Kopie aus und wählen Sie in der Pathfinder-Palette Zu Formbereich hinzufügen und dann Erweitern.
Geben Sie dieser Form einen dicken Strich. Setzen Sie die Kappen wie unten hervorgehoben auf Round und Join. Als nächstes geben Sie der Form einen Schlagschatten, indem Sie auf Effekt> Stilisieren> Schlagschatten gehen.
Setzen Sie die Form hinter alles andere.
Sie können dieses Symbol leicht in ein Set umwandeln, indem Sie die Fenster in einen blauen bis schwarzen Farbverlauf umwandeln und einen Pfeil aus einem Dreieck und einer quadratischen Form erstellen.
Hier ist es, die endgültigen Warenkorb-Symbole.
Accentsconagua