Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

In diesen einfachen Tutorial werden wir Adobe Illustrator Anstecker, die einen glasartigen Blick zu ihnen haben verwenden.

Ich bin mit Illustrator anstatt Photoshop, denn sobald Sie Ihre Schaltfläche in Illustrator zu machen, werden Sie mit einer viel flexibleren Schaltfläche Grafik links, die verwendet werden können, um mehr Tasten in verschiedenen Größen zu machen.







Dies ... ist dank Illustrator eine Vektor-basiertes Programm / Anwendung zu sein - Vektorgrafiken skalieren können steigen oder fallen, ohne eine Auflösung zu verlieren.

Auf der anderen Seite, Photoshop basierte Bilder sind Pixel basieren, als solche, wenn Sie skalieren / die Größe einer Schaltfläche dort gemacht, sehen Sie eine Verschlechterung der Bildqualität.

Schritt 1: Öffnen Sie Illustrator und ein neues „Web-Dokument“ von 800 x 600 Pixel erstellen. Stellen Sie sicher, „Pixel“ als eine Einheit verwendet.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 2. Wählen Sie den „abgerundetes Rechteck-Werkzeug“ unter dem „Shape Tool“ und klicken Sie einmal auf der Zeichenfläche.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 3: Bilden ein Quadrat von 100 x 100 Pixeln mit einem Eckenradius von 12 Pixeln.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 4: Ihr Platz auswählen und eine Füllfarbe mit einem Doppelklick gibt das „Fill Color Tool“.

Schritt 5. Geben Sie ihm eine etwas dunklere Strichfarbe, wie in der Abbildung gezeigt.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Dies wird unsere Grundform sein.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 6: Wählen Sie den Platz und drücken Sie „Befehl + C“ zu kopieren ( „Strg + C“ für Windows-Benutzer) und „Command + V“ dann vor einzufügen. Dies wird unsere Kopie Platz rechts oben auf der ersten Position.







Schritt 7: Wählen Sie unsere neuen Platz und halten Sie „Alt + Shift“ Feld einer der Ecken des Begrenzungs nehmen und die Größe es zu einem etwas kleineren Platz.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 8. Entfernen Sie den Hub aus diesem kleineren Quadrat durch die Strichfarbe Werkzeug auswählen und dann drücken Sie die Taste „/“.

Schritt 9: einen Gradienten auf den kleineren Platz Nehmen durch das Füllfarbenfeld Werkzeug auswählen und dann drücken Sie die Taste „>“.

Schritt 10: Farbverlauf-Palette mit „Befehl + F9“ Bring up (Mac) oder „Strg + F9“ (Windows) und gilt für schwarze einen linearen Gradienten-Typen mit 90-Grad-Winkel grau wie im Bild unten gezeigt. Achten Sie darauf, die schwarz ist RGB Schwarz, die dunkler als CYMK ist. Dann stellte einen „Bildschirm“ Mischmodus zum Quadrat.

Schritt 11: Wählen Sie den kleinen Platz und drücken Sie „Befehl + C“ zu kopieren ( „Strg + C“ für Windows-Benutzer) und „Command + V“ dann vor einzufügen. Drehen Sie den neuen Platz 180 Grad.

Schritt 12: Mit dem neuesten Quadrat der „Gradient Palette“ wieder ausgewählt geöffnet und die Steigung ändern wie die unten gezeigt aussehen.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 13: Wählen Sie den ursprünglichen Basisplatz und gehen Sie auf das „Effect“ Menü. Wählen Sie Stilisierungsfilter> Schlagschatten.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Nun ist die einzige, was bleibt, ist für uns die Inhalte unserer Schaltfläche hinzuzufügen. Ich habe das RSS-Logo hier bereit. I aufgebracht, um einen weichen Farbverlauf von grau zu weiß und einem Licht
Schlagschatten. Wenn Sie Text tun, müssen Sie es konvertieren, um skizziert, bevor Sie Steigungen und Schatten, um es anwenden können ( „Befehl + Umschalt + O“ für Mac, „Strg + Umschalt + O“ für Windows).

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Schritt 14: Wir, die Tiefe des RSS-Logo ändern. Wir müssen legen Sie sie unter den Plätzen mit den Steigungen, so dass es durch den „Bildschirm Mischmodus“ wird beeinträchtigt.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Da haben wir es; eine schöne und einfache Art und Weise Glas-Taste zu machen. Der beste Teil ist, dass diese Schaltfläche Ändern extrem einfach ist.

Neue Farbe: wählen Sie einfach die Basis quadratisch und gibt ihm eine neue Füllung und Strichfarbe
Neue Größe: alle Elemente auswählen und nach Belieben ändern.

Wie man Glasknöpfe mit Adobe Illustrator, Killersites Web Design Magazine

Dieser Beitrag wurde geschrieben von: Napo

4 Responses to „Wie man Glasknöpfe mit Adobe Illustrator“







In Verbindung stehende Artikel