German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)
In den folgenden Schritten erfahren Sie, wie Sie aus einer einfachen USB-Stick-Illustration eine nette Anmeldetaste machen. Es ist ein weiteres dieser Tutorials, das sich stark auf das Darstellung-Bedienfeld konzentriert. Wir beginnen mit einem einfachen Rechteck, dem Abgerundete Ecken-Effekt und einigen einfachen Pathfinder- und Transformationsoptionen. Sobald wir die angegebenen Formen erhalten haben, bewegen wir uns innerhalb des Darstellung-Bedienfelds, in dem wir eine Reihe von Füllungen und Strichen zusammen mit vielen Effekten und einigen Mischtechniken verwenden. Für den letzten Schliff verwenden wir einen einfachen Text und einige grundlegende Techniken zum Erstellen von Vektorformen sowie einige neue Effekte.
1. Erstellen Sie ein neues Dokument und richten Sie ein Raster ein
Drücken Sie Befehlstaste + N, um ein neues Dokument zu erstellen. Geben Sie 600 in das Feld Breite und Höhe ein und klicken Sie auf die Taste Erweitert. Wählen Sie RGB, Bildschirm (72ppi) und stellen Sie sicher, dass das Kontrollkästchen Neue Objekte am Pixelraster ausrichten deaktiviert ist, bevor Sie auf OK klicken.
Aktivieren Sie das Raster (Ansicht > Raster anzeigen) und das Raster am Raster (Ansicht > Am Raster ausrichten). Für dieses Tutorial benötigen Sie alle 1 Pixel ein Raster. Gehen Sie einfach zu Bearbeiten > Einstellungen > Hilfslinien > Raster, geben Sie 1 in das Feld Rasterlinie jedes und 1 in das Feld Unterteilungen ein. Sie sollten auch das Infofenster (Fenster > Info) öffnen, um eine Live-Vorschau mit der Größe und Position Ihrer Formen zu erhalten. Vergessen Sie nicht, die Maßeinheit unter Bearbeiten > Einstellungen > Einheit > Allgemein auf Pixel einzustellen. All diese Optionen erhöhen Ihre Arbeitsgeschwindigkeit erheblich.
2. Erstellen Sie ein abgerundetes Rechteck
Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 146 x 49 Pixel große Form, füllen Sie sie mit dem im folgenden Bild gezeigten linearen Farbverlauf und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 24,5 Pixel ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Die weiße Zahl aus dem Verlaufsbild steht für den Opazitätprozentsatz.
3. Schneiden Sie die Taste in zwei Teile
Zeichnen Sie mit dem Stiftwerkzeug (P) eine vertikale Linie mit 65 Pixel und platzieren Sie sie wie im ersten Bild gezeigt. Wählen Sie diesen neuen Pfad zusammen mit dem im vorherigen Schritt erstellten abgerundeten Rechteck aus, öffnen Sie das Pathfinder-Bedienfeld (Fenster > Pathfinder) und klicken Sie auf die TasteTeilen. Stellen Sie sicher, dass die resultierende Gruppe von Formen ausgewählt ist, und drücken Sie UMSCHALT + STRG + G, um die Gruppierung aufzuheben. Wenn Sie zum Layersbedienfeld wechseln, finden Sie zwei einfache Formen. Doppelklicken Sie auf das untere und nennen Sie es "leftPiece". Doppelklicken Sie dann auf die andere Form und nennen Sie es "rightPiece".
4. Bewegen Sie den rechten Abschnitt
Konzentrieren Sie sich auf das Layersbedienfeld, wählen Sie "rightPiece" und gehen Sie zu Objekt > Transformieren > Verschieben. Geben Sie 43 in das Feld Position-Horizontal und 0 in das Feld Position-Vertikal ein und klicken Sie auf OK.
5. Fügen Sie Details über das Darstellung-Bedienfeld hinzu
Schritt 1
Wählen Sie "leftPiece", konzentrieren Sie sich auf das Darstellung-Bedienfeld und fügen Sie eine zweite Füllung mit der Taste "Neue Füllung hinzufügen" hinzu (auf die der kleine blaue Pfeil zeigt). Wählen Sie diese neue Füllung aus, ziehen Sie sie unten im Darstellung-Bedienfeld und verwenden Sie den im folgenden Bild gezeigten linearen Gradient. Konzentrieren Sie sich weiterhin auf das Darstellung-Bedienfeld, wählen Sie die obere Füllung aus und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im oberen Fenster angezeigten Eigenschaften ein (stellen Sie sicher, dass Sie den unteren Referenzpunkt überprüfen), klicken Sie auf OK und gehen Sie erneut zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im unteren Fenster angezeigten Eigenschaften ein (stellen Sie sicher, dass Sie den oberen Referenzpunkt überprüfen) und klicken Sie auf OK.
Schritt 2
Wählen Sie "leftPiece", konzentrieren Sie sich auf das Darstellung-Bedienfeld, fügen Sie eine dritte Füllung hinzu und ziehen Sie sie zwischen die vorhandenen Füllungen. Stellen Sie sicher, dass diese neue Füllung ausgewählt ist, stellen Sie ihre Füllfarbe auf R=175, G=175, B=175 ein und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein (stellen Sie sicher, dass Sie den unteren Referenzpunkt überprüfen) und klicken Sie auf OK.
Schritt 3
Wählen Sie "leftPiece", fügen Sie eine vierte Füllung hinzu und ziehen Sie sie in den unteren Bereich des Darstellung-Bedienfelds. Stellen Sie sicher, dass diese neue Füllung ausgewählt ist, fügen Sie den im folgenden Bild gezeigten linearen Verlauf hinzu und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 1px-Versatz ein und klicken Sie auf OK.
Schritt 4
Wählen Sie "leftPiece", fügen Sie eine fünfte Füllung hinzu und ziehen Sie sie in den unteren Bereich des Darstellung-Bedienfelds. Stellen Sie sicher, dass diese neue Füllung ausgewählt ist, fügen Sie den im folgenden Bild gezeigten linearen Verlauf hinzu und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen 1px-Versatz ein, klicken Sie auf OK und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein und klicken Sie auf OK.
Schritt 5
Stellen Sie sicher, dass "leftPiece" noch ausgewählt ist, konzentrieren Sie sich auf das Darstellung-Bedienfeld, wählen Sie die im vorherigen Schritt hinzugefügte Füllung aus und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im ersten Fenster angezeigten Eigenschaften ein, klicken Sie auf OK und fügen Sie die anderen drei im folgenden Bild gezeigten Schlagschatteneffekte hinzu.
Schritt 6
Wählen Sie "leftPiece", fügen Sie eine sechste Füllung hinzu und ziehen Sie sie in den unteren Bereich des Bedienfelds "Darstellung". Stellen Sie sicher, dass diese neue Füllung ausgewählt ist, verringern Sie die Opazität auf 50%, fügen Sie den im folgenden Bild gezeigten linearen Gradient hinzu und gehen Sie zu Effekt > Pfad > Versatzpfad. Geben Sie einen Versatz von -5px ein, klicken Sie auf OK und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein, klicken Sie auf OK und gehen Sie zu Effekt > Unschärfe > Gaußsche Unschärfe. Geben Sie einen Radius von 7 Pixel ein und klicken Sie auf OK. Die gelbe Null aus dem Gradientsbild steht für den Opazitätprozentsatz.
6. Bewerben Sie sich im rechten Bereich
Als nächstes müssen Sie die für "leftPiece" verwendeten Eigenschaften kopieren und in "rightPiece" einfügen. Sie können dies einfach über das Zielsymbol tun. Gehen Sie zum Layersbedienfeld, konzentrieren Sie sich auf die rechte Seite und Sie werden feststellen, dass jede Form mit einem kleinen grauen Kreis versehen ist, der ein Zielsymbol ist. Halten Sie die Alt-Taste gedrückt, klicken Sie auf das Zielsymbol für "leftPiece" und ziehen Sie es einfach auf das Zielsymbol für "rightSide". Am Ende sollte Ihr "rightPiece" wie im ersten Bild aussehen. Wählen Sie es aus und wechseln Sie zum Darstellung-Bedienfeld. Konzentrieren Sie sich auf die beiden im zweiten Bild hervorgehobenen Füllungen und bearbeiten Sie diese linearen Gradienten wie unten gezeigt.
7. Fügen Sie Kantendetails hinzu
Schritt 1
Konzentrieren Sie sich auf die rechte Seite von "leftPiece". Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 1 x 49 Pixel große Form, füllen Sie sie mit dem im ersten Bild gezeigten linearen Gradient und platzieren Sie sie wie unten gezeigt. Erstellen Sie eine Kopie dieses dünnen Rechtecks (Strg + C > Strg + F), wählen Sie es aus, verschieben Sie es 1 Pixel nach links und ersetzen Sie den für die Füllung verwendeten linearen Gradient durch den im zweiten Bild gezeigten.
Schritt 2
Konzentrieren Sie sich weiterhin auf die rechte Seite von "leftPiece". Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 1 x 4 Pixel große Form, füllen Sie sie mit R=155, G=155, B=155 und platzieren Sie sie wie unten gezeigt. Erstellen Sie eine Kopie dieses kleinen Rechtecks (Strg + C > Strg + F), wählen Sie es aus, verschieben Sie es 1 Pixel nach links und ersetzen Sie die für die Füllung verwendete flache Farbe durch den im zweiten Bild gezeigten linearen Gradient.
Schritt 3
Konzentrieren Sie sich auf die linke Seite von "rightPiece". Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 1 x 49 Pixel große Form, füllen Sie sie mit dem im ersten Bild gezeigten linearen Gradient und platzieren Sie sie wie unten gezeigt. Fahren Sie mit dem Rechteck-Werkzeug (M) fort, erstellen Sie eine 1 x 4 Pixel große Form, füllen Sie sie mit R=155, G=155, B=155 und platzieren Sie sie wie im zweiten Bild gezeigt.
8. Fügen Sie den Text zu Ihrer Taste hinzu
Schritt 1
Fügen Sie mit dem Textwerkzeug (T) den Text "Sing in" hinzu, stellen Sie seine Farbe auf R=210, G=210, B=210 ein und platzieren Sie ihn wie im ersten Bild gezeigt. Verwenden Sie die Schriftart "Utsaah", stellen Sie den Stil auf Fett und die Größe auf 22pt ein. Stellen Sie sicher, dass Ihr Textstück noch ausgewählt ist, und drücken Sie Umschalt + Strg + O (oder gehen Sie zu Typ > Konturen erstellen). Wählen Sie die resultierende Gruppe von Formen aus und verwandeln Sie sie in einen zusammengesetzten Pfad (Strg + 8 oder Objekt > Zusammengesetzter Pfad > Erstellen).
Schritt 2
Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten), gehen Sie zu Bearbeiten > Eistellungen > Allgemein und stellen Sie sicher, dass das Tastaturinkrement auf 1 Pixel eingestellt ist. Wählen Sie den im vorherigen Schritt erstellten zusammengesetzten Pfad aus und erstellen Sie zwei Kopien vor (Strg + C > Strg + F > Strg + F). Wählen Sie die oberste Kopie aus und drücken Sie den Abwärtspfeil auf Ihrer Tastatur, um sie 1 Pixel nach unten zu verschieben. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Taste Minus Front. Wählen Sie die resultierende Gruppe von Formen aus, verwandeln Sie sie in einen zusammengesetzten Pfad (Strg + 8) und füllen Sie sie mit R=165, G=165, B=165.
Schritt 3
Wählen Sie den im fünfzehnten Schritt erstellten zusammengesetzten Pfad aus, konzentrieren Sie sich auf das Darstellung-Bedienfeld und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein und klicken Sie auf OK. Kehren Sie zum Darstellung-Bedienfeld zurück und fügen Sie ein Gewicht von 0,5 Strichen hinzu. Wählen Sie es aus, stellen Sie die Farbe auf R=196, G=196, B=196 ein und richten Sie sie nach innen aus.
9. Fügen Sie der Taste ein Schlosssymbol hinzu
Schritt 1
Aktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten). Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 18 x 13 Pixel große Form, füllen Sie sie mit R=210, G=210, B=210 und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 2 Pixel ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Fahren Sie mit dem Rechteck-Werkzeug (M) fort, erstellen Sie eine 10 x 12 Pixel große Form und platzieren Sie sie wie im zweiten Bild gezeigt. Füllen Sie es mit keiner, aber fügen Sie einen 2,5-Punkt-Strich hinzu, setzen Sie seine Farbe auf R=210, G=210, B=210 und gehen Sie dann zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 5 Pixel ein, klicken Sie auf OK und gehen Sie zu Objekt > Pfad > Konturstrich. Wählen Sie den resultierenden Pfad zusammen mit der anderen in diesem Schritt erstellten Form aus und klicken Sie im Pathfinder-Bedienfeld auf die Vereinigen-Taste.
Schritt 2
Konzentrieren Sie sich weiterhin auf die Form, die im vorherigen Schritt erstellt wurde. Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 2 x 5 Pixel große Form, füllen Sie sie mit einer zufälligen Farbe und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 1 Pixel ein, klicken Sie auf OK und gehen Sie zu Objekt > Darstellung erweitern. Wählen Sie die resultierende Form zusammen mit der im vorherigen Schritt erstellten Form aus und klicken Sie im Pathfinder-Bedienfeld auf die Taste Minus Front. Nehmen Sie die resultierende Form und platzieren Sie sie wie im dritten Bild gezeigt.
Schritt 3
Deaktivieren Sie die Option Am Raster ausrichten (Ansicht > Am Raster ausrichten). Wählen Sie die im vorherigen Schritt erstellte Form aus und erstellen Sie zwei Kopien vor (Strg + C > Strg + F > Strg + F). Wählen Sie die oberste Kopie aus und verschieben Sie sie mit dem Abwärtspfeil auf Ihrer Tastatur um 1 Pixel nach unten. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Taste Minus Front. Wählen Sie die resultierende Gruppe von Formen aus, verwandeln Sie sie in einen zusammengesetzten Pfad (Strg + 8) und füllen Sie sie mit R=165, G=165, B=165. Wähen Sie die im vorherigen Schritt erstellte Form erneut aus, konzentrieren Sie sich auf das Darstellung-Bedienfeld und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein und klicken Sie auf OK. Kehren Sie zum Darstellung-Bedienfeld zurück und fügen Sie ein Gewicht von 1,5 Strichen hinzu. Wählen Sie es aus, stellen Sie die Farbe auf R=196, G=196, B=196 ein und richten Sie sie nach innen aus.
10. Erstellen Sie die USB-Detaillierung
Schritt 1
Konzentrieren Sie sich auf die rechte Seite von "leftPiece". Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 30 x 29 Pixel große Form, füllen Sie sie mit dem im folgenden Bild gezeigten linearen Farbverlauf und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 4 Pixel ein und klicken Sie auf OK. Senden Sie diese neue Form nach hinten (Umschalt + Strg + [), stellen Sie sicher, dass sie ausgewählt bleibt, und konzentrieren Sie sich auf das Darstellung-Bedienfeld. Fügen Sie eine zweite Füllung für diese Form hinzu und wählen Sie sie aus. Verwenden Sie den im zweiten Bild gezeigten linearen Farbverlauf, verringern Sie dann die Opazität auf 20% und ändern Sie den Mischmodus auf Multiplizieren. Gehen Sie zum Layerbedienfeld und nennen Sie diese neue Form "stickPiece".
Schritt 2
Stellen Sie sicher, dass "stickPiece" noch ausgewählt ist, konzentrieren Sie sich auf das Darstellung-Bedienfeld, wählen Sie die untere Füllung aus und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein und klicken Sie auf OK. Fügen Sie eine dritte Füllung für "stickPiece" hinzu und ziehen Sie sie in den unteren Bereich des Darstellung-Bedienfelds. Wählen Sie diese neue Füllung aus, fügen Sie den unten gezeigten linearen Verlauf hinzu und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im folgenden Bild gezeigten Eigenschaften ein und klicken Sie auf OK.
Schritt 3
Wählen Sie "stickPiece", konzentrieren Sie sich auf das Darstellung-Bedienfeld, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und fügen Sie die fünf im folgenden Bild gezeigten Schlagschatteneffekte hinzu.
Schritt 4
Erstellen Sie mit dem Rechteck-Werkzeug (M) eine 5 x 6 Pixel große Form und füllen Sie sie mit R=90, G=90, B=90. Platzieren Sie diese neue Form wie im ersten Bild gezeigt und gehen Sie zu Effekt > Stilisieren > Abgerundete Ecken. Geben Sie einen Radius von 1,5 Pixel ein, klicken Sie auf OK und konzentrieren Sie sich auf das Darstellung-Bedienfeld. Fügen Sie einen 1-Punkt-Strich hinzu, stellen Sie seine Farbe auf R=60, G=60, B=60 ein und richten Sie ihn nach innen aus. Konzentrieren Sie sich weiterhin auf das Darstellung-Bedienfeld, stellen Sie sicher, dass keine Füllung oder kein Strich ausgewählt ist, und gehen Sie zu Effekt > Stilisieren > Schlagschatten. Geben Sie die im ersten Bild gezeigten Eigenschaften ein, klicken Sie auf OK und gehen Sie zu Effekt > Verzerren & Transformieren > Transformieren. Geben Sie die im zweiten Bild gezeigten Eigenschaften ein und klicken Sie auf OK.
11. So färben Sie Ihre USB-Taste neu ein
Schritt 1
Wählen Sie "leftSide", erstellen Sie eine Kopie vor (Strg + C > Strg + F) und bringen Sie sie nach vorne (Umschalt + Strg +]). Wählen Sie diese Kopie aus, konzentrieren Sie sich auf das Darstellung-Bedienfeld und entfernen Sie einfach die untere Füllung und die drei im zweiten Bild hervorgehobenen Schlagschatteneffekte. Sobald Sie fertig sind, gehen Sie zu Objekt > Darstellung erweitern.
Schritt 2
Wählen Sie die Gruppe aus dem vorherigen Schritt aus und klicken Sie im Pathfinder-Bedienfeld auf die Taste Vereinigen. Füllen Sie die resultierende Form mit Schwarz.
Schritt 3
Gehen Sie zu "rightSide" und wiederholen Sie die in den letzten beiden Schritten genannten Techniken.
Schritt 4
Wählen Sie die beiden schwarzen Formen aus, die in den letzten drei Schritten erstellt wurden, und verwandeln Sie sie in einen zusammengesetzten Pfad (Strg + 8). Wählen Sie es aus und ändern Sie einfach den Mischmodus in Überlagern. Das ist hilfreich, wenn Sie Ihrer Taste etwas Dunkelheit hinzufügen möchten. Schließlich können Sie diesen zusammengesetzten Pfad verwenden, um Ihre gesamte Taste einfach neu einzufärben. Ersetzen Sie einfach das für die Füllung verwendete Schwarz durch die Farbe, die Sie bevorzugen. Probieren Sie verschiedene Mischmodi aus. Zum Beispiel sieht eine Füllfarbe mit R=39, G=170, B=225 mit dem auf Farbbrennen eingestellten Mischmodus ziemlich gut aus (Bild 3). Sie sollten auch versuchen, die Mischmodi wie im endgültigen Bild gezeigt zu kombinieren. Probieren Sie verschiedene Kombinationen aus.
Herzlichen Glückwunsch, Sie sind fertig!
Jetzt ist Ihre Arbeit erledigt. So sollte es aussehen. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie können diese Techniken in Ihren zukünftigen Projekten anwenden.
By
