Wie man ein Web-Symbol in Adobe Illustrator erstellen
Sie wollten schon immer für das Web ein Symbol entwerfen? Heute ist dein Tag. In diesem Tutorial erfahren Sie, wie Sie Web-Icons zu gestalten.
Schritt 1 - Haben Sie Ihre Forschung
Wie bei jedem neuen Projekt beginnt die erste Phase des kreativen Prozesses mit Definition der Idee, eine Phrase oder ein Wort, das mit Bildern darstellen wollen.
Dadurch werden Sie definieren Aspekte festzulegen, die Sie benötigen, um herauszufinden, was könnte (oder auch nicht) helfen Ihnen, Ihr Symbol zu formen.
Die besten Mittel, dies zu tun sind:
Unter der Annahme, dass Sie Ihre Detektiv habe Arbeit durchgeführt wird, sollten Sie einen tieferen Sinn haben, was es ist, dass Sie durch die Verwendung von Farbe darstellen möchten, Linien und andere Formen der Bilder. Jetzt können Sie tatsächlich beginnen kreativ zu bekommen.
Schritt 2 - Start-Sketching
Wie bei jedem neuen Produkt, Sie die Möglichkeit, die Informationen übersetzen Sie jetzt halten ist tief verbunden zu Ihrer Person, da keine zwei Ideen identisch sind. Es gibt keine Regeln, aber vor allem keine Grenzen, auf die müssen Sie anpassen oder beschränken auf - die einzig wahre Variable Ihre Fantasie ist.
Ob es sich um eine Tasse Kaffee oder ein paar gute alte Nirvana (die Band) ist, finden, dass etwas, das Ihren Geist zeichnen gehen und die Hand bekommt fließt und starten. Es spielt keine Rolle, wie gut Sie sind, was zählt, ist, dass dadurch, Sie beginnen, die Form und Funktionen zur Festlegung, dass Ihr Symbol verwenden.
Quick-Tipp: Nie Sachen wegzuwerfen. Auch wenn Sie eine Idee, und verlassen es auf dem Weg begann, versuchen immer einen Weg zu schaffen, so dass Sie die Anweisungen sehen, aus denen Ihr Design entstanden. Auf diese Weise können Sie Stücke von einer Version auf eine andere überlagern und die Qualität der visuellen Komposition verfeinern.
Diese ersten beiden Schritte sind etwas allgemeiner. Für unser Projekt ein paar Bilder der tatsächliche Kindle darstellen genügt; es hat ein einfaches Design, das leicht Grundformen mit reproduziert werden kann.
Schritt 3 - Commence Illustrator
Ob Sie schon immer Pixel für eine lange Zeit gedrückt wird, oder gerade erst anfangen, eine der wichtigsten Werkzeuge ist Adobe Illustrator. Ich werde nicht über die aktuelle Software sprechen, aber werden Sie durch ein neues Dokument Einrichten und Starten auf ein Symbol zu bauen.
3.1. Einrichten eines neuen Dokuments
Angenommen, Sie Illustrator hatte bereits im Hintergrund und läuft, ein neues Dokument erstellen, indem Sie Strg + Drücken von n (oder ⌘ + n, wenn Sie mit einem Mac) oder Datei> Neu ... und lassen Sie uns einige der Einstellungen gehen das wird Pop-up.
- Name. Dies ist offensichtlich; geben ihm einen beliebigen Namen, die Ihr Projekt passt.
- Profil. Dies ist wichtig, weil Grafiken für das Web entwickeln, werden von den auf einem Profil für den Druck auf Basis unterschiedlich sein. Stellen Sie sicher, Web aus dem Dropdown-Menü auswählen.
- Anzahl der Zeichenflächen. Die Artboard nach Adobe stellt Regionen, die eigentliche Kunstwerk enthalten. Ich gehe in der Regel für eine größere artboard auch wenn ich mehrere Entwürfe haben, und legte sie auf verschiedenen Ebenen, so dass sie bei der Hand sein wird, und wählen Sie genau die, die ich sehen wollen.
- Breite und Höhe. Maßnahmen, von der aus Sie die Größe der Zeichenfläche - in unserem Fall werden wir für eine 120 von 120 Pixel gehen.
- Einheiten. Illustrator ist für den Einsatz mit Web und Druck bestimmt, so haben Sie eine Menge von Optionen; Für dieses Projekt werden wir mit Pixeln gehen.
- Farbmodus. Doppelklicken Sie sicher, dass diese Option passt das Medium Sie erstellen. RGB (Rot, Grün, Blau) ist die Farbe speziell für das digitale Medium, während CMYK (Cyan, Magenta, Gelb, Schwarz) in Projekten eingesetzt, die den Druck beinhalten. Für unser Projekt werden wir RGB verwenden.
Kurzer Tipp. Erfahren Sie mehr über die Unterschiede zwischen RGB und CMYK in diesem offiziellen Adobe-Tutorial (die einen guten Job erklären die wichtigsten Unterschiede Sie sich bewusst sein müssen).
- Rastereffekt. Es gibt drei Werte zur Auswahl
- Bildschirm (72 ppi), die der Standardwert ist. Dies ist die Standardoption, die Sie gehen würde, wenn Sie für das Web-Design würde (was in unserem Fall, wir sind).
- Mittel (150 ppi).
- Hoch (300 ppi). Die beiden letzten Optionen sind für Grafiken gedacht, die für den Druck verwendet wird.
Kurzer Tipp. Nun, da Sie haben Grafik erstellt, und nehmen wir an, Ihr Design verwendet Effekte aus der Stilisierungs Menü wie Schlagschatten. Schein nach außen oder Inner Glow. Sie brauchen, um Qualität zu gewährleisten. Die gedruckte Version muss so glatt und sauber wie die auf dem Monitor sehen. Dazu indem Sie Effekt> Dokument-Rastereffekt-Einstellungen und wählen Sie eine höhere Auflösung aus dem Kontrollkästchen - Sie können auch geben Sie Ihren eigenen Wert in dem anderen Feld.
„Die klare Erscheinungsbild der Pixeljustierten Hübe in der Rasterausgabe bei einer Auflösung von 72-ppi nur aufrechterhalten. Für andere Auflösungen gibt es eine hohe Wahrscheinlichkeit solcher Hub Herstellung geglätteten Ergebnisse.“
- Richten Sie neue Objekte Pixelraster. Wenn Sie für pixelgenaue Designs schießen, dann ist dies ein Muss. Das Programm weist Vektor Objekte selbst auf das Pixelgitter auszurichten, wenn sie bewegt werden oder skaliert, so dass sie mit neuen Positionen neu auszurichten.
Es gibt es: Eine einmalige tell-it-all-Intro, das in einigen Lücken füllen, die angezeigt werden könnten, wenn ausgehend.
3.2. Erste Grundformen
Zuerst stellen Sie einen Kreis auf, die als Hintergrund für das gesamte Design wirkt. Unter Verwendung das Ellipse-Werkzeugs (L) links überall in Illustrator finden Sie im abgerundeten Rechteck Einstellungen Box zu erhalten und die Breite und Höhe des Kreises festgelegt. Geben Sie 110px für beide und klicken Sie auf OK. Wählen Sie das neu erstellte Objekt und entfernen die Farbe aus dem Schlaganfall, und gibt ihm ein schönes Licht redish fill (HEX = ff7171 oder R = 255, G = 113, B = 113).
Besorgen Sie sich das abgerundete Rechteck-Werkzeug (befindet sich auf der linken Werkzeugleiste gleiche Stelle wie das Rechteck-Werkzeug), klicken Sie links auf der Zeichenfläche und erstellen Sie eine 55 x 80px Form mit einem 5px Eckenradius. Verwendung von Align Optionen (Fenster> Align) das neue Objekt auszuwählen und horizontal und vertikal ausrichten zu der Zeichenfläche. Gibt eine dunkelgraue Füllung # 606.060 (R = 96, G = 96, B = 96)
Kurzer Tipp. Wenn Sie nur die Align-Panel einrichten, werden Standardausrichtung auf ausgewählte Objekte anwenden. Zum Ausrichten Ausrichten auf die Zeichenfläche, Blick auf die rechte untere Ecke, klicken Sie auf „ausrichten“ und wählen Sie auf Zeichenfläche.
Nach den gleichen Schritten wie zuvor, schafft ein neues Rechteck mit abgerundeten Ecken (Breite = 39px, Höhe = 64px, Eckradius = 1 Pixel). Wählen Sie das neue Objekt und horizontal ausrichten zu der Zeichenfläche und bewegt es in Richtung der Oberseite des größeren Rechtecks.
Mit dem Ziel ausgewählt wird, ändert die Füllfarbe auf ein etwas helleres Grau D3D3D3 (R = 211, G = 211, B = 211).
Dies ist der Grundrahmen und Bildschirm, die einen Kindle darstellen.
3.3 Layering Buttons
Der nächste Schritt ist mit den Tasten zu tun. Wählen Sie das Werkzeug für abgerundetes Rechteck und schafft ein 5 x 5px Objekt mit einem 2px Eckradius. Horizontal ausrichten zu den anderen Teilen, und es zu der Mitte des Raumes zwischen der unteren Seite des Bildschirms und der unteren Seite des Körpers bewegen (man kann dies auch durch Ziehen und ein Rechtecks, das Erstellen und vertikal auf den Knopf es Ausrichten ). Zuweisen eine Füllfarbe (474747, R = 71, G = 71, B = 71), dann kopieren und einfügen es in Position (Strg + f / ⌘ + f). Wählen Sie die doppelte Taste und drehen seinen Hub mit der Füllfarbe, es 1px verlassen.
Wir haben jetzt unsere Taste; nächstes sind die vier abgerundeten Ecken. Wählen Sie das Ellipse-Werkzeug (L) und erstellen Sie einen 3 x 3px Kreis. Wählen Sie es aus, und während Alt gedrückt halten. ziehen Sie ihn nach links zu duplizieren. Nachdem beide ausgewählt, wieder halten Sie die Alt- (⌥Option auf Mac), und ziehen Sie nach der rechten Seite der Haupttaste. Wählen Sie alle runden Tasten und die wichtigste. Ein Linksklick auf der mittleren Taste und mit dem Bedienfeld Ausrichten und vertikal sie zentriert. Jetzt müssen wir Platz sie auf, mit allen Objekten noch gewählt hat, geht die linke untere Ecke der Align Abstand zu verteilen. und geben Sie es 4px und wählen Sie Horizontal Raum verteilen.
Für die Seitentasten, werden wir ein runde Ecke Objekt (Width = 5px, Höhe = 30px, Eckradius = 1 Pixel), erstellen und es vertikal von dem Symbol auf den Hauptkörper ausgerichtet ist. Ziehen Sie es ein wenig nach rechts, so dass es Überschneidungen. Mit Hilfe der Form Builder Tool (Shift + m) den Schnittpunkt der beiden Objekte subtrahieren und Sie Seite Navigationstasten haben.
Wählen Sie das neue Objekt und ändern, um die Füllung 3d3d3d (R = 61, G = 61, B = 61). Duplizieren und Flip vertikal (Rechtsklick> Transformieren> Reflektieren> Vertical), richten dann auf der rechten Seite des Hauptkörpers.
An diesem Punkt wird das Symbol konkrete Formen an. Im nächsten Schritt werden wir das Hinzufügen Details beginnen.
3.4. Hinzufügen von Details
Mit unserem Kindle jetzt gelegt, beginnen wir den letzten Schliff auf den Bildschirm hinzufügen. Schnappen Sie das Rechteck-Werkzeug und zeichnen Sie ein 100 x 55 Pixel-Objekt. Drehen Sie es von R. drücken und dann ziehen Sie eine Ecke nach links, während die Umschalttaste gedrückt halten, um einen schönen 45-Grad-Winkel zu bekommen. Duplizieren Sie den Bildschirm des Kindle und wählen Sie sowohl sie als auch die gedrehte Objekt und drücken Sie die Umschalttaste + M für das Shape-Builder Tool. Ziehen Sie den durchteuft Weg für eine schöne Reflexion.
Noch einmal auf den Bildschirm auswählen, kopieren und an Ort und Stelle einfügen, die Füllung mit dem Hub Spiegeln und ein dunkleres Grau (3d3d3d) geben.
Wählen Sie den Hauptkörper der Vorrichtung, duplizieren und spiegelt wieder die Füllung mit seinem Hub. Von der Farbpalette einer sichtbarere grau wählen, so dass Sie es aus dem Rest des Körpers unterscheiden können.
3.5. Fügen Sie einen langen Schatten
Wir werden unser Symbol beenden durch einen langen Schatten wirft. Duplizieren das Hauptsymbol Körper (Strg + C und STRG + f) in Position zu kleben. Wählen Sie das neue Objekt und ziehen Sie es in einem Winkel von 45 ° in Richtung der rechten unteren Ecke. Wir werden dies tun, indem Alt gedrückt halten, und während auf der rechten Seite, drücken Sie Ziehen und die Umschalttaste gedrückt, so dass Sie es genau bei 45 Grad bekommen.
Erstellen Sie eine Mischung zwischen den beiden Objekten; gehen Sie zu Objekt> Blend Optionen und in den festgelegten Schritten eingeben 200 nun den gleichen Weg wählen Make verwenden.
Die beiden haben in einer einzigen Form vereint. Zum Objekt> erweitern> OK. und dann aus dem Fenster Transformieren klicken Sie auf Unite. Dies ist ein grundlegender Schatten. Geben Sie ihm eine dunklere Farbe als der Hintergrund Kreis, und es dann maskieren, so dass sie nicht aus dem eigentlichen Design fällt. Ändern Sie die Farbe auf d85d5d (R = 216, G = 93, B = 93), dann kopieren und den Kreis vor dem langen Schatten einfügen. Wählen Sie sowohl den Schatten und seine obige Aufgabe und dann einen Rechtsklick> Make Schnittmaske.
Sie können die Farben als Sie bitte ändern, um den Stil auf Ihre Bedürfnisse anzupassen. Auch, wie wir alle dies mit Vektoren haben, können wir das Symbol so groß oder so klein skalieren, wie wir wollen.
Schritt 4 - Speicher für das Web
Wir haben ein gut aussehendes Symbol, aber wie sei es zu speichern, so dass wir es tatsächlich für verwenden können, was wir in erster Linie im Sinne hatten - das Web? Export Grafik, um das SVG (Scalable Vector Graphics) XML-basierte Vektorformat. Die Hauptvorteile der Verwendung von SVG im Vergleich zu anderen Formaten (wie PNG) sind:
- Änderbarkeit: Sie können das Bild jederzeit bearbeiten einen beliebigen Texteditor.
- Skalierbarkeit: Sie können ganz einfach Bilder skalieren, wenn sie ohne die Notwendigkeit, live im Internet sind mehrere Versionen zu erstellen.
Also lassen Sie uns fortfahren und einige der Einstellungen sehen, die mit diesem Format kommen. Gehen Sie zu Datei> Speichern unter> und vom Dateityp, klicken Sie auf den Dropdown und wählen Sie SVG (* .SVG) - vergessen Sie nicht, über die Benutzung Zeichenflächen Kontrollkästchen klicken, so dass sie nur die Elemente auf der Zeichenfläche spart. Sie sollten ein Pop-up-Fenster erhalten - klicken Sie auf die Option mehr den vollen Satz von Optionen zu sehen. Lassen Sie uns über jede von ihnen gehen:
Typ: Steuert die Art und Weise Schriftarten in der eigentlichen Datei eingebettet sind. Normalerweise, wenn Sie Text, Adobe recommendsSVG, aber dies hat einige Nachteile und wird nicht von Firefox unterstützt.
Subsetting. SVG verwenden, können Sie eine Untergruppe von Glyphen (Zeichen) in die eigentliche Datei speichern (die Größe zu erhöhen, sondern ermöglicht es Ihnen, Inhalte zu ändern), aber wir werden mit nur Glyphen gehen verwendet, weil unser Design nicht Text enthält.
Nachdem alle oben genannten Optionen auswählen, klicken Sie auf Speichern.
Quick-Tipp: Für weitere Informationen über den Rest der Optionen speichern Sie bitte diesen Link besuchen.
Es ist eine Verpackung!
Ich hoffe, dass Sie dieses Tutorial genossen, und schaffte es zu lernen, wie Symbole in Illustrator zu bauen. Diese Techniken können für jedes Projekt angewendet werden, ganz gleich, das Thema.