Share
In den folgenden Schritten erfahren Sie, wie Sie in Adobe Illustrator einen Satz pixelgenauer Handcursor erstellen. Zunächst lernen Sie, wie Sie Ihr neues Dokument erstellen und ein einfaches Raster erstellen. Als Nächstes lernen Sie mit dem Rechteckwerkzeug, dem Ellipsenwerkzeug und dem Stiftwerkzeug zusammen mit dem abgerundeten Eckeneffekt, wie Sie die Formen erstellen, aus denen Ihre Handcursor bestehen. Mit den grundlegenden Techniken zum Erstellen von Vektorformen, einem einfachen Strich, einem linearen Farbverlauf, einigen Schatteneffekten und einem einfachen Transformationseffekt lernen Sie, wie Sie den letzten Handcursors Farbe, Hervorhebungen und Schattierungen hinzufügen.
Schlagen Steuerung + N ein erstellen Neu dokumentieren. Eingeben 600 in dem Breite Box und 300 in dem Höhe Klicken Sie dann auf die Schaltfläche Erweitert Taste. Wählen RGB, Bildschirm (72ppi) und stellen Sie sicher, dass die Neue Objekte am Pixelraster ausrichten Das Kontrollkästchen ist deaktiviert, bevor Sie auf klicken OK.
Aktivieren Sie die Gitter (Ansicht> Raster anzeigen) und das Am Raster ausrichten (Ansicht> An Raster ausrichten). Sie werden jedes Mal ein Gitter benötigen 1px, also geh einfach zu Bearbeiten> Voreinstellungen> Hilfslinien> Raster, eingeben 1 in dem Rasterlinie alle Box und 1 in dem Unterteilung Box. Sie sollten auch die öffnen Info Panel (Fenster> Info) für eine Live-Vorschau mit der Größe und Position Ihrer Formen. Vergessen Sie nicht, die Maßeinheit auf Pixel von einzustellen Bearbeiten> Voreinstellungen> Einheiten> Allgemein. Alle diese Optionen erhöhen die Arbeitsgeschwindigkeit erheblich.
Wähle das aus Rechteckwerkzeug (M) und konzentrieren Sie sich auf Ihre Toolbar. Entfernen Sie die Farbe vom Strich, wählen Sie dann die Füllung aus und setzen Sie die Farbe auf Rot (R = 237 G = 28 B = 36). Gehen Sie zu Ihrem Artboard, erstellen Sie einfach eine 4 x 15px Rechteck und niedriger sein Opazität zu 30%. Wenn Sie die Deckkraft der Form verringern, können Sie das Gitter im Rücken besser erkennen, wodurch Sie die genaue Positionierung jeder Form besser verstehen können. Stellen Sie sicher, dass Ihr Rechteck noch ausgewählt ist, und wechseln Sie zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie ein 2px Radius und klicken Sie auf OK.
Stellen Sie sicher, dass die Rechteckwerkzeug (M) bleibt aktiv, erstelle ein 6 x 10px Form, platzieren Sie sie wie im zweiten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E um das gleiche 2px hinzuzufügen Abgerundete Ecken bewirken. Ein ... kreieren 6 x 9px Form, platzieren Sie sie wie im dritten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E. Schließlich erstellen Sie eine 6 x 7px Form, platzieren Sie sie wie im vierten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E.
Verwendung der Ellipsenwerkzeug (L), ein ... kreieren 4px Kreis, füllen Sie es mit dem gleichen roten (R = 237 G = 28 B = 36), platzieren Sie es wie in der folgenden Abbildung gezeigt und senken Sie es Opazität zu 30%. Wechseln Sie zu Rechteckwerkzeug (M), Erstelle ein 8 x 10px Form, platzieren Sie sie wie in der folgenden Abbildung gezeigt und senken Sie sie Opazität zu 30%.
Konzentrieren Sie sich auf die rechte Seite Ihres Rechtecks und wählen Sie das Symbol aus Stiftwerkzeug (P). Stellen Sie die Füllfarbe auf Schwarz ein, senken Sie die Opazität zu 30% und erstellen Sie einen "L" -Pfad wie im ersten Bild gezeigt. Stellen Sie sicher, dass dieser neue Pfad ausgewählt bleibt, fügen Sie einen vierten Ankerpunkt hinzu, wie im zweiten Bild gezeigt, und ziehen Sie die Ziehpunkte 2px nach oben und 1px nach rechts. Bewegen Sie sich nach oben, fügen Sie einen fünften Ankerpunkt hinzu, wie im dritten Bild gezeigt, und ziehen Sie die Ziehpunkte um 2 Pixel nach oben. Halte das Alt Schlüssel von Ihrer Tastatur, klicken an diesem fünften Ankerpunkt dann einfach klicken auf dem Startankerpunkt, um den Pfad zu schließen.
Konzentrieren Sie sich auf die linke Seite Ihres roten Rechtecks und wählen Sie das Symbol aus Stiftwerkzeug (P) und erstellen Sie einen Pfad wie im ersten Bild gezeigt. Stellen Sie sicher, dass dieser neue Pfad ausgewählt bleibt, fügen Sie einen vierten Ankerpunkt hinzu, wie im zweiten Bild gezeigt, und ziehen Sie die Ziehpunkte 2px nach oben und 1px nach links. Bewegen Sie sich nach unten, fügen Sie einen fünften Ankerpunkt hinzu, wie im dritten Bild gezeigt, und ziehen Sie die Ziehpunkte 4px nach unten. Halte das Alt Schlüssel von Ihrer Tastatur, klicken an diesem fünften Ankerpunkt dann einfach klicken auf dem Startankerpunkt, um den Pfad zu schließen. Vergewissern Sie sich schließlich, dass die in diesem Schritt erstellte Form mit Schwarz ausgefüllt ist Opazität zu 30%.
Wählen Sie alle bisher erstellten Formen und aus Gruppe Sie (Strg + G). Bewegen Sie sich zum Schichten Panel (Fenster> Ebenen), doppelklicken Sie auf diese neue Gruppe und nennen Sie sie "pointerHandCursor". Diese Gruppe duplizieren (Strg + C> Strg + F), wählen Sie die Kopie aus und ziehen Sie sie nach rechts, wie im zweiten Bild gezeigt. Gehe zurück zum Schichten Panel und benennen Sie diese neue Gruppe "palmHandCursorKonzentriere dich auf diese zweite Gruppe, wähle die vier abgerundeten Rechtecke aus und lösche sie einfach.
Konzentriere dich auf deine "palmHandCursor"Gruppe und wählen Sie die Rechteckwerkzeug (M). Ein ... kreieren 4 x 13px Form und platzieren Sie es wie im ersten Bild gezeigt. Füllen Sie es mit Rot, senken Sie es Opazität zu 30% und gehe zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie einen Radius von 2 Pixel ein und klicken Sie auf OK. Stellen Sie sicher, dass die Rechteckwerkzeug (M) bleibt aktiv, erstelle ein 4 x 14px Form, platzieren Sie sie wie im zweiten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E.
Erstellen Sie eine Sekunde, 4 x 14px Form, platzieren Sie sie wie im dritten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E. Schließlich erstellen Sie eine 4 x 11px Form, platzieren Sie sie wie im vierten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E. Konzentriere dich auf den Schichten wählen Sie die vier abgerundeten Rechtecke aus, die Sie in diesem Schritt erstellt haben, und ziehen Sie sie einfach in das Feld "".palmHandCursor"Gruppe.
Duplizieren (Strg + C> Strg + F) Ihre "palmHandCursor", wählen Sie die Kopie aus und ziehen Sie sie nach rechts, wie im zweiten Bild gezeigt Schichten Panel und benennen Sie diese neue Gruppe "FaustHandCursorKonzentrieren Sie sich auf diese dritte Gruppe, wählen Sie die vier abgerundeten Rechtecke zusammen mit der 20px einkreisen und einfach löschen.
Konzentriere dich auf deine "FaustHandCursor"Gruppe und schnappen Sie sich die Ellipsenwerkzeug (L). Ein ... kreieren 6px Kreis, füllen Sie es mit Rot, senken Sie es Opazität zu 30% und platzieren Sie es wie im ersten Bild gezeigt. Wähle das aus Rechteckwerkzeug (M). Ein ... kreieren 4 x 9px formen und platzieren Sie es wie im zweiten Bild gezeigt. Füllen Sie es mit Rot, senken Sie es Opazität zu 30% und gehe zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie ein 2px Radius und klicken Sie auf OK. Stellen Sie sicher, dass die Rechteckwerkzeug (M) bleibt aktiv, erstelle ein 4 x 10px Form, platzieren Sie sie wie im dritten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E.
Ein ... kreieren 4 x 9px Form, platzieren Sie sie wie im vierten Bild gezeigt, senken Sie sie Opazität zu 30% und schlagen Umschalt + Strg + E. Schließlich erstellen Sie eine 4 x 7px Form, platzieren Sie es wie im fünften Bild gezeigt, senken Sie es Opazität zu 30% und schlagen Umschalt + Strg + E. Konzentriere dich auf den Schichten wählen Sie die vier abgerundeten Rechtecke und die 6px Kreis in diesem Schritt erstellt und ziehen Sie sie einfach in die "FaustHandCursor"Gruppe.
Wähle Deine "pointerHandCursor"Gruppe, gehe zu Objekt> Darstellung erweitern dann öffnen Sie die Pfadfinder Panel (Fenster> Pfadfinder) und klicken Sie auf Vereinen Taste. Wählen Sie die resultierende Form aus, erhöhen Sie die Opazität zu 100% und konzentrieren sich auf die Aussehen Panel (Fenster> Aussehen). Entfernen Sie die Farbe aus der Füllung und fügen Sie ein 1pt streicheln und auswählen. Stellen Sie die Farbe auf R = 70 G = 70 B = 70, Richten Sie es nach innen aus und öffnen Sie die Schlaganfall Panel (Fenster> Schlaganfall). Konzentriere dich auf den Ecke Abschnitt und überprüfen Sie einfach die Runde beitreten Taste. Sobald Sie fertig sind, gehen Sie zu Objekt> Pfad> Umrissstrich.
Wähle das aus Rechteckwerkzeug (M), erschaffe zwei, 1 x 3px Formen, a 1 x 4px Form und a 1 x 5px gestalten. Füllen Sie alle vier Formen mit R = 70 G = 70 B = 70 und platzieren Sie sie wie im vierten Bild gezeigt. Wenn Sie fertig sind, wählen Sie alle in diesem Schritt erstellten Formen aus und klicken Sie auf Vereinen Taste aus der Pfadfinder Panel.
Verwendung der Rechteckwerkzeug (M), ein ... kreieren 21 x 26px Rechteck, füllen Sie es mit Weiß, platzieren Sie es wie im ersten Bild gezeigt und senden Sie es nach hinten (Umschalt + Strg + [ ). Wählen Sie dieses weiße Rechteck zusammen mit der Handkontur aus und klicken Sie auf Teilen Taste aus der Pfadfinder Panel. Stellen Sie sicher, dass die resultierende Gruppe ausgewählt ist, und klicken Sie einfach auf Umschalt + Strg + G zu Gruppierung aufheben es. Wählen Sie die äußere weiße Form aus und löschen Sie sie. Wählen Sie dann die innere weiße Form aus und ersetzen Sie das Weiß durch den linearen Farbverlauf, der im endgültigen Bild angezeigt wird.
Deaktivieren Sie die Am Raster ausrichten (Ansicht> An Raster ausrichten) dann geh zu Bearbeiten> Voreinstellungen> Allgemein und stellen Sie sicher, dass die Keyboard-Inkrement ist um eingestellt 1px. Wählen Sie die mit dem linearen Farbverlauf gefüllte Form erneut aus und erstellen Sie zwei Kopien vorne (Strg + C> Strg + F> Strich + F). Wählen Sie die oberste Kopie aus und drücken Sie einmal auf den rechten Pfeil, um sie um 1 Pixel nach rechts zu verschieben. Wählen Sie beide Kopien erneut aus klicken das Minus Front Taste aus der Pfadfinder Panel. Wählen Sie die resultierende Gruppe von Formen aus, und verwandeln Sie sie in eine Zusammengesetzter Pfad (Steuerung + 8 oder Objekt> Zusammengesetzter Pfad> Make) und stellen Sie die Füllfarbe auf R = 205 G = 205 B = 205.
Wählen Sie die mit dem linearen Farbverlauf gefüllte Form erneut aus und machen Sie zwei weitere Kopien vorne (Strg + C> Strg + F> Strich + F). Wählen Sie die oberste Kopie aus und drücken Sie einmal auf den Linkspfeil, um sie 1px nach links zu verschieben. Wählen Sie beide Exemplare erneut aus und klicken Sie auf Minus Front Taste aus der Pfadfinder Panel. Wählen Sie die resultierende Gruppe von Formen aus, und verwandeln Sie sie in eine Zusammengesetzter Pfad (Steuerung + 8 oder Objekt> Zusammengesetzter Pfad> Make) und die Füllfarbe auf weiß setzen.
Wählen Sie die mit dem linearen Farbverlauf gefüllte Form erneut aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die im linken Fenster angezeigten Eigenschaften (im folgenden Bild) ein und klicken Sie auf OK und wieder zu gehen Effekt> Stilisieren> Schlagschatten. Geben Sie die im rechten Fenster angezeigten Eigenschaften ein (in der folgenden Abbildung) und klicken Sie auf OK.
Aktivieren Sie die Am Raster ausrichten (Ansicht> An Raster ausrichten). Verwendung der Rechteckwerkzeug (M), ein ... kreieren 1 x 3px formen und mit füllen R = 215 G = 215 B = 215. Platzieren Sie dieses kleine Rechteck wie in der folgenden Abbildung gezeigt, und gehen Sie zu Effekt> Verzerren und Transformieren> Transformieren. Geben Sie die unten gezeigten Eigenschaften ein und klicken Sie auf OK.
Wähle Deine "palmHandCursor"Gruppe, gehe zu Objekt> Darstellung erweitern und klicken Sie auf die Vereinen Taste aus der Pfadfinder Panel. Wählen Sie die resultierende Form aus, erhöhen Sie die Opazität zu 100% und konzentrieren sich auf die Aussehen Panel (Fenster> Aussehen). Entfernen Sie die Farbe aus der Füllung und fügen Sie ein 1pt streicheln und auswählen. Stellen Sie die Farbe auf R = 70 G = 70 B = 70, Richten Sie es nach innen aus und überprüfen Sie die Runde beitreten Taste aus der Schlaganfall Panel. Sobald Sie fertig sind, gehen Sie zu Objekt> Pfad> Umrissstrich.
Wähle das aus Rechteckwerkzeug (M), erschaffe zwei, 1 x 8px Formen und a 1 x 7px gestalten. Füllen Sie alle vier Formen mit R = 70 G = 70 B = 70 und platzieren Sie sie wie im dritten Bild gezeigt. Packe die Direktauswahl-Tool (A), Setzen Sie den Fokus auf die obere Seite des linken Rechtecks, wählen Sie den linken Ankerpunkt aus und ziehen Sie ihn einfach 1px nach unten. Wenn Sie fertig sind, wählen Sie alle in diesem Schritt erstellten Formen aus und klicken Sie auf Vereinen Taste aus der Pfadfinder Panel.
Konzentrieren Sie sich auf die Handkontur, die Sie im vorherigen Schritt erstellt haben, und wiederholen Sie die für den Zeigerhandcursor verwendeten Techniken und Effekte. Am Ende sollten die Dinge im folgenden Bild aussehen.
Wähle Deine "FaustHandCursor"Gruppe, gehe zu Objekt> Darstellung erweitern und klicken Sie auf die Vereinen Taste aus der Pfadfinder Panel. Wählen Sie die resultierende Form aus, erhöhen Sie die Opazität zu 100% und konzentrieren sich auf die Aussehen Panel (Fenster> Aussehen). Entfernen Sie die Farbe aus der Füllung und fügen Sie ein 1pt streicheln und auswählen. Stellen Sie die Farbe auf R = 70 G = 70 B = 70, Richten Sie es nach innen aus und gehen Sie zu Objekt> Pfad> Umrissstrich.
Wähle das aus Rechteckwerkzeug (M), Drei schaffen, 1 x 4px Formen und a 1 x 2px gestalten. Füllen Sie alle vier Formen mit R = 70 G = 70 B = 70 und platzieren Sie sie wie im dritten Bild gezeigt. Packe die Direktauswahl-Tool (A), konzentrieren sie sich auf die oberseite der mitte 1 x 4px wählen Sie den linken Ankerpunkt aus und ziehen Sie ihn einfach 1px nach unten. Bewegen Sie sich nach rechts 1 x 4px Rechteck, fokussieren Sie auf der Oberseite, wählen Sie den rechten Ankerpunkt aus und ziehen Sie ihn einfach 1px nach unten. Wenn Sie fertig sind, wählen Sie alle in diesem Schritt erstellten Formen aus und klicken Sie auf Vereinen Taste aus der Pfadfinder Panel.
Konzentrieren Sie sich auf die Handkontur, die Sie im vorherigen Schritt erstellt haben, und wiederholen Sie die Techniken und Effekte, die für die anderen beiden Handcursor verwendet werden. Am Ende sollten die Dinge im folgenden Bild aussehen.
So sollte es aussehen. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie können diese Techniken in Ihren zukünftigen Projekten anwenden.
Wenn Sie die Schaltfläche "Abonnieren" erstellen möchten, sehen Sie sich diese praktische Anleitung zum Erstellen einer Schaltfläche mit nur einer Textzeile im Bedienfeld "Erscheinungsbild" an!
Accentsconagua