Share
Heute gehen wir die Erstellung Ihrer eigenen, vektorbasierten Buddy-Icons mit einem netten Bonus durch - eine Reihe kostenloser Envato ™ Marketplace-Icons, die Sie auf Ihrer eigenen Website verwenden können!
Über den Autor: Orman Clark ist ein in Großbritannien ansässiger Webdesigner, der sich auf die Entwicklung von Pixeln und Front-End spezialisiert hat. Er verbringt die meiste Zeit damit, WordPress-Themes und andere kostenlose Ressourcen für Designer bei PremiumPixels.com zu entwerfen. Bleiben Sie mit Orman und PremiumPixels auf Twitter, Dribbble und Forrst auf dem Laufenden.
Öffnen Sie Adobe Illustrator und erstellen Sie ein neues Dokument mit den folgenden Einstellungen: 800 x 600 Pixel, 72 dpi, RGB-Farbe, Einheiten in Pixel und einen weißen Hintergrund
Wenn Ihr neues Dokument erstellt wurde, öffnen Sie Ihre Ebenenpalette. Gehen Sie zu Fenster> Ebenen, falls diese noch nicht sichtbar ist, und erstellen Sie 4 neue Ebenen. Nenne sie "Basis", "Symbol", "Licht" und "Overlay".
Wählen Sie das gerade abgerundete Rechteckwerkzeug aus, wählen Sie eine hellgraue Farbe aus und klicken Sie auf eine beliebige Stelle auf der Leinwand, um auf der soeben erstellten "Basisebene" zu arbeiten. Wählen Sie im angezeigten Dialogfeld Folgendes aus: Breite "42px", Höhe "42px", Eckradius "10px" und klicken Sie auf OK.
Stellen Sie sicher, dass Sie sich auf der "hellen" Ebene befinden, wählen Sie erneut das Werkzeug "Abgerundetes Rechteck" aus, wählen Sie ein dunkleres Grau aus und klicken Sie auf die Leinwand. Wählen Sie diesmal: Breite "38px", Höhe "38px", Eckenradius "8px" und klicken Sie auf OK.
Wählen Sie das abgerundete Rechteckwerkzeug ein letztes Mal, wählen Sie ein noch dunkleres Grau und klicken Sie auf die Leinwand. Wählen Sie diesmal: Breite "34px", Höhe "34px", Eckenradius "6px" und klicken Sie auf OK.
Halten Sie die Umschalttaste gedrückt und klicken Sie auf die beiden innersten Rechtecke, um beide auszuwählen. Wenn beide ausgewählt sind, öffnen Sie Ihre Pathfinder-Palette, indem Sie zu "Fenster"> "Pathfinder" gehen, sofern diese nicht bereits sichtbar ist, und auf das Symbol "Minus Front" klicken. Dadurch erhalten Sie ein hohles Rechteck.
Wenn Sie das leere Rechteck ausgewählt haben, wechseln Sie zur Palette Farbverlauf (Fenster> Farbverlauf) und wählen Sie einen linearen Farbverlauf (von weiß bis weiß) mit einer Neigung von 90 Grad, wobei der linke Gradientenanker auf 0% Deckkraft und der rechte Farbverlaufanker auf eingestellt ist 80% Deckkraft und der Gradientenstandort bei 80%
Öffnen Sie die Transparenzpalette (Fenster> Transparenz) und setzen Sie den Mischmodus auf "Weiches Licht"..
Wechseln Sie zur Ebene "Überlagerung", wählen Sie eine beliebige Farbe aus und erstellen Sie ein weiteres abgerundetes Rechteck mit: Breite "38px", Höhe "38px", Eckenradius "8px". Erstellen Sie mit dem Elipse-Werkzeug eine Elipse und positionieren Sie sie wie gezeigt über dem Rechteck.
Halten Sie die Umschalttaste gedrückt und klicken Sie auf die Elipse und das Rechteck, um beide auszuwählen. Klicken Sie mit der Pathfinder-Palette wie zuvor auf das Symbol "Minus Front". Dadurch bleibt die Form der Überlagerung erhalten.
Wechseln Sie bei ausgewählter Überlagerungsform zur Verlaufs-Palette und wählen Sie einen linearen Farbverlauf von Weiß bis Weiß (0 Grad) aus. Der linke Gradientenanker ist auf 25% Deckkraft, der rechte Gradientenanker auf 0% und der Wert eingestellt Gradientenstandort bei 50%. Stellen Sie den Mischmodus auf "Weiches Licht".
Ob Sie es glauben oder nicht, wir sind jetzt mit der Grundeinstellung fertig und können jetzt mit Farbe spielen!
Nachdem wir mit der Grundeinstellung fertig sind, können wir mit der Erstellung einzelner Symbole beginnen. Als Beispiel gehe ich durch die Erstellung eines Vimeo-Symbols. Der Zweck hier ist, Ihnen zu zeigen, wie einfach es ist, ein eigenes Symbol zu erstellen, nachdem Sie eine grundlegende Vorlage eingerichtet haben!
Erstellen Sie zwei neue Farbfelder, indem Sie in der Farbfelder-Palette auf das Symbol "Neues Farbfeld" klicken (Fenster> Farbfelder). Definieren Sie die Farbfelder wie folgt:
Gehen Sie zurück zur Ebene "Basis", wählen Sie das Basisrechteck aus und wenden Sie einen Verlauf mit den neuen Farbverlaufsfeldern an, die wir gerade erstellt haben.
Glücklicherweise basiert das Vimeo-Logo auf der Schrift Black Rose. Laden Sie die Schriftart herunter und geben Sie den Buchstaben "v" ein, um sicherzustellen, dass Sie in der Ebene "Symbol" arbeiten. Ich habe meinen Text bei 55pt mit einer sehr hellgrauen Farbe eingegeben. Konvertieren Sie den Text in Konturen (Typ> Konturen erstellen) und positionieren Sie das v in der Mitte des Rechtecks.
Wählen Sie die Logoform aus und drücken Sie STRG / CMD + C, um eine Kopie zu erstellen. Drücken Sie STRG / CMD + B, um die Kopie hinter dem Original einzufügen. Wenn die kopierte Form noch ausgewählt ist, drücken Sie die Eingabetaste, um die Position anzupassen. Ändern Sie die horizontale Position in 0.5px und die vertikale Position in -0.5px und klicken Sie auf OK.
Ändern Sie die Farbe der kopierten Form in Schwarz, setzen Sie den Mischmodus auf "Weiches Licht" und ändern Sie die Deckkraft auf 50%.
Ein optionaler Schritt besteht darin, einen Schatten für das gesamte Symbol zu erstellen. Erstellen Sie in der Ebene "Basis" eine kleine Ellipse am Fuß des Symbols. Füllen Sie dieses Symbol mit einem radialen Farbverlauf von Schwarz nach Schwarz, der auf 0 Grad eingestellt ist. Der Anker für den linken Farbverlauf ist auf 60% Deckkraft, der rechte Farbanker auf 0%, das Seitenverhältnis auf 8% und die Gradientenposition eingestellt bei 60%.
Das ist alles dazu! Befolgen Sie die grundlegenden Richtlinien in diesem Lernprogramm, um auf einfache Weise Ihre eigenen skalierbaren Symbole für nahezu jede Anwendung oder Site zu erstellen. Öffnen Sie einfach Ihre Icon-Vorlage und fügen Sie Ihr eigenes Logo ein!
Da dieses Tutorial für Envato ™ ist, dachte ich, ich würde mir die Zeit nehmen, ein paar BuddyIcons für die Envato ™ Marketplaces zu erstellen. Das Paket enthält Symbole für ThemeForest, GraphicRiver, AudioJungle, ActiveDen, VideoHive, 3DOcean und CodeCanyon. Brandon (der Site-Editor hier) hat sogar ein paar Minuten gebraucht, um dem Tutorial zu folgen und seinen eigenen Beitrag zu erstellen: 2 auffällige Webdesigntuts + Icons.
Das Paket enthält die Symbole im transparenten .png-Format in drei Größen. 32x32px, 64x64px, 128x128px zusammen mit der Originalvorlage (.ai)
Das Schöne an Ihren eigenen BuddyIcons ist, dass sie so gut funktionieren, wenn es darum geht, Social Media und andere Links in Ihre eigenen Designs zu integrieren. Jedes Symbol hat eine einheitliche Größe und kann in verschiedenen Situationen verwendet werden. Hier sind nur ein paar schnelle Ideen:
Wenn Sie das Konzept eines Symbols aus theoretischer Sicht betrachten, hat die Verwendung eines einheitlichen Satzes eine Reihe von Vorteilen, anstatt von überall her Bits und Teile zu verwenden. Symbole ziehen die Aufmerksamkeit der Betrachter an, fördern das Durchklicken und sie sind eine großartige Möglichkeit, Ihren Motiven einen Hauch von Farbe und Stil zu verleihen. Ein einheitlicher Symbolsatz kann einen Schritt weiter gehen, indem er einem Design ein zusammenhängendes, ausgewogenes und künstlerisches Element gibt. Die Verwendung mehrerer Symbole an einem Ort kann sogar dazu beitragen, dass eine Website so aussieht, als wäre sie aktiv und engagiert sich in der Community… ein umso mehr Grund für das Design, ein wenig BuddyIcon-Liebe irgendwo auf der Website einzubinden.
Das ist alles für jetzt; Wir hoffen, Ihnen hat das Tutorial und das Freebie gefallen! Sie können das vollständige BuddyIcon-Set ohne die exklusiven Envato ™ -Symbole bei PremiumPixels testen. Besuchen Sie Webdesigntuts + hier, um weitere großartige Werbegeschenke dieser Art zu erhalten!
Accentsconagua