Share
In diesem Lernprogramm erfahren Sie, wie Sie eine Glasschaltfläche mit einfachen Formen, Pfadfinderfeld, Schnitt- und Deckkraftmasken und Mischmodi erstellen. Sie erfahren auch, wie Sie Ihre Vektorarbeit als Webgrafik optimieren und die Farben der erforderlichen Elemente schnell ersetzen können.
Nimm das Rechteckwerkzeug (M) und erstelle ein Quadrat mit blauer Füllung (C = 25, M = 2, Y = 0 und K = 0).
Nimm das Ellipsenwerkzeug (L) und erstelle einen Kreis. Wählen Sie das Quadrat und den Kreis aus und richten Sie sie mithilfe der Palette Ausrichten in Richtung der Mitte und der horizontalen Linie aus.
Schneiden Sie nun den Kreis auf die quadratische Form. Kopieren Sie das Quadrat und fügen Sie es vorne ein, wählen Sie den Kreis und das obere Quadrat aus und klicken Sie in der Pathfinder-Palette auf die Schaltfläche Schnittmenge.
Füllen Sie die resultierende Form mit einem linearen Farbverlauf von blau (C = 100, M = 65, Y = 0 und K = 0) bis hellblau (C = 53, M = 0, Y = 0 und K = 0) und Stellen Sie den Mischmodus auf Multiplizieren in der Transparenzpalette ein.
Erstellen Sie zwei weitere Kreise. Der Radius dieser Kreise entspricht dem Wert der Quadratseite, und ihre Mitten liegen in der linken und rechten oberen Ecke des Quadrats.
Wenden Sie die in Schritt 2 beschriebene Technik an, und schneiden Sie diese Kreise auf die quadratische Form.
Wählen Sie die beiden resultierenden Formen aus und klicken Sie in der Pathfinder-Palette auf die Schaltfläche "Teilen". Gruppieren Sie die resultierenden Objekte. Daher sollten Sie drei Formen haben.
Füllen Sie sie mit verschiedenen Farbverläufen und stellen Sie den Mischmodus - Multiplizieren für jeden von ihnen ein. Füllen Sie die erste Form mit einem radialen Farbverlauf, der aus drei Farben besteht: 1 (C = 17, M = 0, Y = 0 und K = 0); 2 (C = 25, M = 2, Y = 0 und K = 0); 3 (C = 62, M = 9, Y = 0 und K = 0).
Füllen Sie die zweite Form mit einem linearen Farbverlauf, der aus zwei Farben 1 besteht (C = 100, M = 33, Y = 0 und K = 0). 2 (C = 17, M = 0, Y = 0 und K = 0).
Füllen Sie die dritte Form mit einem linearen Farbverlauf, der aus drei Farben besteht: 1 (C = 38, M = 4, Y = 0 und K = 0); 2 (C = 100, M = 65, Y = 0 und K = 0) und 3 (C = 34, M = 0, Y = 0 und K = 0).
Kopieren Sie die Form in die Mitte und fügen Sie sie vorne ein. Ersetzen Sie die Farben des Verlaufs durch: 1 (C = 100, M = 72, Y = 0 und K = 0) und 2 (C = 33, M = 0, Y) = 0 und K = 0).
Erstellen Sie mithilfe des Kreises und der Pathfinder-Palette zwei weitere Formen, indem Sie die oben genannten Techniken anwenden.
Füllen Sie die erste Form mit einem linearen Farbverlauf von Weiß zu Weiß mit einer Deckkraft von 0%, und legen Sie in der Transparenz-Palette den Füllmodus auf Bildschirm fest.
Füllen Sie die zweite Form mit einem linearen Farbverlauf von Weiß zu Weiß mit einer Deckkraft von 0% und legen Sie den Füllmodus - Überlagerung in der Transparenzpalette fest.
Kopieren Sie die erste Form und fügen Sie sie über allen Objekten ein, indem Sie sie in der Ebenen-Palette nach oben verschieben. Ändern Sie den Verlauf dieser Form, indem Sie den linken Schieberegler ein wenig nach rechts bewegen.
Setzen Sie den Knopf in eine quadratische Form mit abgerundeten Ecken. Kopieren Sie das untere Quadrat und fügen Sie es vor allen Objekten ein. Lassen Sie das Quadrat ausgewählt, gehen Sie zu Effekt> In Form umwandeln> Abgerundetes Rechteck, und legen Sie die in der folgenden Abbildung angegebenen Werte fest. Der Krümmungsradius hängt von der Größe Ihres Knopfes ab, so dass Sie Ihre Auswahl treffen können.
Kopieren Sie diese Form und fügen Sie sie vor, wir werden sie für den weiteren Aufbau benötigen. Sperren Sie die Unterschicht mit dieser Form in der Ebenenpalette und machen Sie sie unsichtbar. Wählen Sie alle Objekte aus (Befehl + A) und wählen Sie Objekt> Schnittmaske> Erstellen.
Entriegeln Sie die Unterschicht mit der Form eines abgerundeten Quadrats und machen Sie sie sichtbar. Kopieren Sie diese Form und fügen Sie sie vor. Reduzieren Sie nun die Größe dieser Form etwas, indem Sie das Auswahlwerkzeug (V) verwenden und Alt und Umschalt gedrückt halten.
Wählen Sie die beiden abgerundeten Quadrate aus und klicken Sie in der Pathfinder-Palette auf die Schaltfläche Minus Front.
Fülle die erhaltene Form mit einem linearen Farbverlauf von Blau (C = 100, M = 0, Y = 0 und K = 0) mit Deckkraft 50% bis Weiß mit Deckkraft 0%..
Erstellen Sie ein weiteres abgerundetes Rechteck mit dem Werkzeug "abgerundetes Rechteck", das etwas größer ist als das der Schaltfläche. Legen Sie die erstellte Figur unter alle Unterschichten und füllen Sie sie mit einem linearen Farbverlauf, der aus drei Farben besteht: 1 (C = 100, M = 100, Y = 0 und K = 77); 2 (C = 100, M = 16, Y = 0 und K = 0); 3 (C = 100, M = 66, Y = 0 und K = 0).
Erstellen Sie nun den Metallteil der Schaltfläche. Es wird aus zwei runden Quadraten bestehen. Die erste ist mit einem linearen Farbverlauf gefüllt, der aus drei Graustufen besteht: 1 (K = 71), 2 (K = 14) und 3 (K = 26).
Die zweite ist etwas kleiner als die erste und ist mit einem linearen Farbverlauf gefüllt, der aus drei Graustufen besteht: 1 (K = 45), 2 (K = 0) und 3 (K = 14). Sobald Ihre Schaltfläche fertig ist, gruppieren Sie alle Elemente.
Erstellen Sie eine Spiegelung der Schaltfläche. Kopieren Sie die Schaltfläche und fügen Sie sie vor. Bewegen Sie die Taste senkrecht nach unten und halten Sie die Umschalttaste gedrückt. Es wird zum Spiegelbild der Schaltfläche.
Wählen Sie die Reflektion aus und wählen Sie Objekt> Transformieren> Reflektieren aus, und legen Sie die Parameter in der in der folgenden Abbildung dargestellten Dialogbox fest.
Nehmen Sie nun das Rechteckwerkzeug (M) und erstellen Sie ein Rechteck mit schwarzweißer Verlaufsfüllung. Die Größe des Rechtecks sollte so sein, dass die Spiegelung der Schaltfläche vollständig ausgeblendet werden kann.
Wählen Sie die Reflektion der Schaltfläche und das obere Rechteck aus, und wählen Sie im Menü der Transparenzpalette die Option Deckkraftmaske erstellen aus.
Die Schaltfläche mit Reflektion ist fertig.
Oft müssen Sie mehrere identische Elemente in verschiedenen Farben haben. Mal sehen, wie man schnell die Farbe einer Schaltfläche ersetzt.
Wählen Sie alle Elemente aus, deren Farbe Sie ersetzen möchten, und wählen Sie Bearbeiten> Farben bearbeiten> Bildmaterial neu einfärben. Klicken Sie dann im geöffneten Dialogfeld auf die Registerkarte Bearbeiten. Klicken Sie abschließend auf die Schaltfläche Harmoniefarben verbinden.
Jetzt können Sie alle verfügbaren Farbrotationen in den gewünschten Farbbereich umwandeln, während Sie die Farbänderungen unserer Grafiken betrachten.
Beim Erstellen von Bildern für das Web und für Geräte ist das Vektorbild nicht das Endprodukt. Sie müssen Rasterbilder verwenden. Daher müssen Sie den Vektor als Raster sehen. Gehen Sie dazu auf Ansicht> Pixelvorschau. Wie Sie sehen, gibt es beim Zoomen viele Problembereiche. Sie werden angezeigt, da das Bild nicht im Pixelraster gerendert wird. Deshalb erscheinen die Linien im Raster verschwommen.
Mit Adobe Illustrator CS5 können wir das Bild schärfer wirken lassen. Wählen Sie Ihre Schaltflächengrafik aus, und öffnen Sie die Transformations-Palette ("Fenster"> "Transformieren"). Klicken Sie nun in dieser Palette auf "An Pixelgitter ausrichten".
Nun kann Ihr Bild als Raster-Typ wie PNG oder JPG gespeichert werden (Datei> Speichern für Web und Geräte)..
Wenn Sie dieses Wissen und die erforderliche Software besitzen, können Sie auf einfache Weise Web-Interface-Elemente erstellen, die nicht nur gut aussehen, sondern auch perfekt rendern.
Accentsconagua