Glossy Folder Icon Tutorial

Glossy Folder Icon Tutorial

logo_wam_grayIn diesem Tutorial
wird beschrieben und gezeigt, wie Ihr in ca.3 Minuten, ein Glossy Folder Icon, mit Illustrator erstellen könnt.

Die fertige Datei könnt Ihr am Ende des Tutorial Downloaden.

Erstellt als erstes die Arbeitsfläche, in diesem Fall 300 x 300 Pixel groß. Erstellt eine Ebene und benennt diese „Front“. Nun nehmen wir das Abgerundetes-Rechteck-Werkzeug und ziehen ein Rechteck ca. 200 x 150 Pixel.


1big

Nachdem der Anfang gemacht ist nehmt das Rechteck-Werkzeug und Zieht über die Ebene mit dem Abgerundetem-Rechteck ein 200 x 50 großes Rechteck.

2big

Da unser Folder nur oben Rund sein soll verbinden Wir nun die Zwei über aderliegenden Ebenen mit dem Pathfinder.  Dafür markiert beide Rechtecke und verbindet dies mit gedrückter „alt“ Taste und dem Klick im Pathfinder auf „Dem Formbereich zufügen“.  Wie Ihr jetzt sehen könnt,  habt Ihr ein Rechteck das oben Rund und unten Eckige Kanten hat.

3big

Als nächstes bringen wir ein wenig perspektive in Unseren Folder. Dafür werden wir den Zusammengefügten Pfad etwas Verbiegen.  Dafür den Pfad anklicken, rechte Maustaste und Transformieren > Verbiegen, auswählen.  Hier sollte der Biegungswinkel auf -20 und die Achse auf   Horizontal eingestellt werden.

4big

Das gesamte Konstrukt drehen wir nun noch um -20 Grad, dafür wieder rechtsklick auf den Pfad Transformieren > Drehen.

5big

Der nächste Schritt ist der Rücken des Folder. Diesen erstellen wir mit einer Kopie der Front Ebene, Legt dafür eine neue Ebene an verschiebt diese unter die „Front-Ebene“  und benennt diese „Rücken“. Dann Kopieren wir den Pfad der in der Ebene „Front“ Liegt.

„TIP: Verschlisst gleich nach dem Kopieren die Ebene Front“

Legen diesen in die Rücken Ebene. Dann verbiegen wir Ihn um 20 Grad, die Achse muss hier auf „Winkel -15 Grad“ stehen.

6big

Dann verschieben wir die unteren Eckpunkte des Pfades, der in der Ebene Rücken liegt, bis der Pfad, mit den unteren Eckpunkten genau mit der Obenliegenden Ebenen  überein stimmt.

7big
„TIP: Wenn beide Ebenen mit den Unteren Ecken zusammen passen, verschlisst die Ebene Rücken.“

8big

Langsam nimmt unser Folder Formen an.  Nehmt nun der Front etwas die Deckkraft. Hier ist sie auf 70% angelegt. Nun geben wir der Folder noch etwas mehr Farbe. Ein verlauf ist hier am besten geeignet. Öffnet dafür die Ebene „Front“. Klickt den Pfad an und wählt euren Verlauf aus.

9big 10big

Als nächstes geben wir dem Folder noch etwas Glanz. Um diesen zu erstellen nehm Ihr das „Zeichenstift-Werkzeug“ und zeichnet in der Ebene Front eine weiße Welle. Hier könnt Ihr ruhig übers Ziel hinaus Schissen.

11big
Es ist nun in der Ebene ein neuer Pfad vorhanden.  Dann Kopiert Ihr wiederrum, den Pfad, der die Front des Folders darstellt. Klickt nun die Welle die Ihr im Schritt zuvor gezeichnet habt an und geht ins Fenster „Transparents“  Mit; Umschalten, STRG, F10. Dort wird neben eurer angezeigten Ebene in Leere Feld doppelt geklickt. Nun Fügt Ihr den zuvor Kopierten Pfad wieder ein.  Hiermit habt Ihr die Welle Maskiert.
Es dürfte jetzt nun noch die Welle mit der Front des Folders  sichtbar sein.

f11

Im Grunde ist der Folder hiermit schon fertig. Ihr könnt aber noch etwas Papier in der Ordner legen, dafür ist er auch vorgesehen.

12bigf13
Dafür legt Ihr eine neue Ebene an benennt die „Papier“ und verschiebt dies zwischen die Ebenen Rücken und Front.  Dann werden zwei Rechtecke mit leichtem Verlauf erstellt.

Wenn Ihr die noch ein wenig verbiegt, sieht es aus, als läge Papier im Folder.

f15
Und Fertig ist das Icon.
Viel Spaß beim basteln oder beim Download

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website