Share
Im folgenden Tutorial lernen Sie, einen Ein / Aus-Schalter zu erstellen. Es ist einfach zu erstellen und Sie werden lernen, wie Sie ein Objekt erstellen, das als Webelement oder Symbol perfekt ist. Lass uns anfangen!
Erstellen Sie ein 200 x 200 Pixel großes RGB-Dokument. Aktivieren Sie das Raster (Ansicht> Raster) und den Fang am Raster (Ansicht> Fang am Raster). Als Nächstes benötigen Sie alle 5 Pixel ein Raster. Gehen Sie zu Bearbeiten> Voreinstellungen> Hilfslinien & Raster, geben Sie jeweils 5 in das Feld Rasterlinie und 1 in das Feld Unterteilungen ein. Sie können auch das Infofenster (Fenster> Info) für eine Live-Vorschau mit der Größe und Position Ihrer Formen öffnen. Vergessen Sie nicht, die Maßeinheit unter Bearbeiten> Voreinstellungen> Einheit> Allgemein in Pixel zu ersetzen. Alle diese Optionen erhöhen die Arbeitsgeschwindigkeit erheblich.
Wähle das Rechteckwerkzeug (M) aus, erstelle eine 90 x 140 Pixel große Form und fülle sie mit R = 65 G = 64 B = 66. Öffnen Sie das Fenster "Erscheinungsbild" ("Fenster"> "Erscheinungsbild"), wählen Sie die Füllung aus und gehen Sie zu Effekt> Stilisieren> Inner Glow. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Wählen Sie die im vorherigen Schritt erstellte Form aus, öffnen Sie das Flyout-Menü des Darstellungsfensters und klicken Sie auf Neue Füllung hinzufügen. Dies fügt eine zweite Füllung für Ihre Form hinzu. Wählen Sie es aus, setzen Sie die Farbe auf R = 20 G = 20 B = 20 und gehen Sie zu Effekt> Distort & Transform> Transform. Geben Sie die unter Bild 1 angezeigten Daten ein. Klicken Sie auf OK und wählen Sie Effekt> Warp> Arc Lower. Geben Sie die unter Bild 2 gezeigten Daten ein, klicken Sie auf OK und gehen Sie zu Effekt> Weichzeichnen> Gaußscher Weichzeichner. Geben Sie einen Radius von 1 Pixel ein und klicken Sie auf OK. Vergewissern Sie sich, dass diese neue Füllung noch ausgewählt ist, verringern Sie die Deckkraft auf 70% und verschieben Sie sie unter die erste Füllung (im Bedienfeld „Aussehen“)..
Fügen Sie eine dritte Füllung für Ihr Rechteck hinzu. Wählen Sie es aus, verringern Sie die Deckkraft auf 15%, ändern Sie den Mischmodus in „Multiplizieren“ und gehen Sie zu Effekt> Künstlerisch> Filmkorn. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Wählen Sie das Rechteck erneut aus und fügen Sie einen ersten Strich hinzu. Machen Sie es 0,5pt breit, richten Sie es nach innen aus und setzen Sie seine Farbe auf R = 20 G = 20 B = 20. Wählen Sie es im Erscheinungsbildfenster aus und klicken Sie auf das Symbol "Ausgewähltes Objekt duplizieren" unten im Erscheinungsbildfenster. Dadurch wird der Strich dupliziert. Wählen Sie diese Kopie aus, setzen Sie die Farbe auf R = 109 G = 110 B = 113, und wählen Sie dann Effekt> Verzerrung und Transformation> Transformation. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Wählen Sie das gesamte Rechteck erneut aus und gehen Sie zu Effekt> Stilisieren> Abgerundete Ecken. Geben Sie und 5px radius ein und klicken Sie auf OK. Nun sollte Ihre Form wie im folgenden Bild aussehen.
Wähle das Ellipse-Werkzeug (L) aus, erstelle eine 5 x 5 Pixel große Form und platziere sie wie in der folgenden Abbildung gezeigt. Das Snap-to-Grid erleichtert Ihnen die Arbeit. Füllen Sie es mit R = 88 G = 89 B = 91, wählen Sie dann die Füllung aus und gehen Sie zu Effekt> Stilisieren> Schlagschatten. Geben Sie die unten angezeigten Daten ein und klicken Sie auf OK.
Wählen Sie die im vorherigen Schritt erstellte Form erneut aus und fügen Sie eine zweite Füllung hinzu. Wählen Sie es aus, setzen Sie seine Farbe auf R = 20 G = 20 B = 20 und gehen Sie zu Effekt> Distort & Transform> Transform. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und gehen Sie zu Effekt> Verzerrung und Transformation> Pucker & Bloat. Geben Sie erneut die unten angezeigten Daten ein und klicken Sie auf OK.
Als nächstes müssen Sie in jeder Ecke eine Kopie dieses Kreises hinzufügen. Sie können drei Kopien erstellen und in den Ecken verschieben, oder Sie können den Kreis auswählen und die beiden unten gezeigten Transformationseffekte hinzufügen.
Wählen Sie das abgerundete Rechteck aus und gehen Sie zu Objekt> Pfad> Versatzpfad. Geben Sie einen -20px-Offset ein und klicken Sie auf OK. Die resultierende Form sollte wie im zweiten Bild aussehen. Wählen Sie es aus und drücken Sie D, um die Standardeigenschaften (weiße Füllung und schwarzer Strich) hinzuzufügen. Jetzt sollte Ihre Form wie im dritten Bild aussehen. Wählen Sie es erneut aus, richten Sie den Strich nach außen aus, setzen Sie die Farbe auf R = 10 G = 10 B = 10 für sowohl Füllung als auch Kontur, und wählen Sie dann Effekt> Stilisieren> Abgerundete Ecken. Geben Sie einen Radius von 5 Pixeln ein und klicken Sie auf OK. Am Ende sollte Ihre Form wie im vierten Bild aussehen.
Wählen Sie die im vorherigen Schritt erstellte Form aus und erstellen Sie eine Kopie (Control + C> Control + F). Wählen Sie diese Kopie aus, entfernen Sie den Strich, legen Sie die Füllfarbe auf R = 255 G = 255 B = 255 fest, und wechseln Sie zu Objekt> Aussehen erweitern.
Wähle das Stiftwerkzeug (P) und zeichne einen horizontalen Pfad von 60px. Fügen Sie einen dünnen roten Strich hinzu, damit Sie ihn leichter von den übrigen Formen unterscheiden können. Wählen Sie es zusammen mit der im vorherigen Schritt erstellten weißen Form aus und öffnen Sie das Bedienfeld Ausrichten. Wählen Sie das Auswahlwerkzeug (V) aus, klicken Sie auf den Rand der weißen Form (sie sollte hervorgehoben werden), und klicken Sie dann im Bedienfeld Ausrichten auf die Schaltfläche Horizontal zentrieren und vertikal zentrieren. Jetzt sollte der horizontale Pfad wie im dritten Bild dargestellt sein. Wählen Sie es zusammen mit dem weißen, abgerundeten Rechteck erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche "Teilen". Dadurch wird Ihre weiße Form in zwei gleiche Formen unterteilt.
Wählen Sie die im vorherigen Schritt erstellte Gruppe aus und drücken Sie Umschalt + Strg + G, um die Gruppierung aufzuheben. Nun konzentrieren wir uns auf die unteren Formen. Wählen Sie es aus, füllen Sie es mit R = 75 G = 75 B = 75, fügen Sie dann eine zweite Füllung hinzu und verwenden Sie den linearen Farbverlauf, der unter Bild 2 dargestellt ist. Die gelbe Null im Verlaufsbild steht für den Prozentsatz der Deckkraft.
Aktivieren Sie die Option An Raster ausrichten nicht und gehen Sie zu Bearbeiten> Voreinstellungen> Allgemein. Geben Sie 0,5 in das Feld Keyboard Increment ein und klicken Sie auf OK. Wählen Sie die im vorherigen Schritt bearbeitete Form erneut aus und erstellen Sie zwei Kopien (Control + C> Control + F> Control + F). Wählen Sie die oberste Kopie aus und drücken Sie den Aufwärtspfeil (um 0,5 Pixel nach oben zu verschieben). Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit R = 147 G = 149 B = 152.
Gehen wir nun zur obersten Form. Wählen Sie es aus und gehen Sie zu Effekt> 3D> Extrudieren und Abschrägen. Geben Sie die unten angezeigten Daten ein, klicken Sie auf OK und gehen Sie zu Objekt> Aussehen erweitern. Werfen Sie einen Blick in Ihr Ebenenfenster und Sie werden eine frische Gruppe finden. Öffnen Sie es und entfernen Sie die beiden Beschneidungspfade.
Wählen Sie die im ersten Bild hervorgehobenen Formen aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche "Unite". Füllen Sie die resultierende Form mit dem im zweiten Bild gezeigten linearen Verlauf.
Aktivieren Sie die Option An Raster ausrichten und wählen Sie das Direktauswahl-Werkzeug (A). Wählen Sie die im ersten Bild hervorgehobenen Ankerpunkte aus, und verschieben Sie sie nach unten, wie im zweiten Bild gezeigt. Wieder einmal erleichtert das Einrasten am Gitter Ihre Arbeit. Füllen Sie diese Form mit R = 65 G = 64 B = 66, fügen Sie eine zweite Füllung hinzu und verwenden Sie den im vierten Bild gezeigten Farbverlauf.
Deaktivieren Sie die Option An Raster ausrichten, wählen Sie dann die im vorherigen Schritt bearbeitete Form aus und erstellen Sie zwei Kopien (Control + C> Control + F> Control + F). Wählen Sie die oberste Kopie aus und klicken Sie auf den Abwärtspfeil. Wählen Sie beide Kopien erneut aus und klicken Sie im Pathfinder-Bedienfeld auf die Schaltfläche Minus Front. Füllen Sie die resultierende Form mit R = 128 G = 130 B = 133 und verringern Sie die Deckkraft auf 85%..
Wenn Sie Ihren Knopf um 90 Grad drehen, wird er wie im ersten Bild aussehen. Um den Schatten zu korrigieren, wählen Sie das große abgerundete Rechteck aus, gehen Sie zur unteren Füllung, öffnen Sie den Transformationseffekt und ersetzen Sie die vorhandenen Daten durch die im zweiten Bild gezeigten. Gehen Sie genauso vor, wenn Sie sich für die Vervielfachung der Schrauben für den Transformationseffekt entschieden haben.
Dort haben Sie es, einen einfachen, aber eleganten Ein- und Ausschaltknopf. Ich hoffe, dass dir dieses Tut gefallen hat.
Accentsconagua