1. Design & Illustration
  2. Theory
  3. Design Trends

Wie erstelle ich ein Line Art basiertes Skateboarder Kit in Adobe Illustrator

Scroll to top
Read Time: 20 min

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Skateboarding ist eine der seltenen rebellische Dinge, die endete, verändert das Leben von tausenden, wenn nicht Millionen von Kindern auf der ganzen Welt.   Es ist etwas, das fasziniert mich immer wieder, und das ist, warum ich beschlossen, diesen in die Tiefe-tutorial, wie zu entwerfen Sie Ihr eigenes skateboard-Stück mit Adobe Illustrator.

 Der Prozess basiert auf der Verwendung von Grundformen (Rechtecke, abgerundete Rechtecke und Kreise) und einige helfen hier und da aus dem Pathfinder-Bedienfeld.

1. Die Einrichtung Unserer Dokument 

 Vorausgesetzt, Sie haben bereits von Illustrator und ausgeführt wird, erstellen Sie ein Neues Dokument (Datei > Neu) und passen Sie die Einstellungen wie folgt:

  •  Anzahl der Zeichenflächen: 1
  • Breite: 1000 px 
  • Höhe: 800 px 
  • Einheiten: Pixel 

 Und aus der Registerkarte "Erweitert":

  • Farbmodus: RGB 
  • Raster-Effekte: Hoch (300ppi) 
  • "Neue Objekte an Pixelraster ausrichten" aktiviert 
setting up a new documentsetting up a new documentsetting up a new document

2. Die Schichtung Unserer Zeichenfläche 

 Sobald Sie erstellt haben, ein frisches Dokument, gehen Sie auf die Ebenen-Bedienfeld und stellen Sie sicher, zu erstellen, die sieben Schichten, und benennen Sie Sie wie folgt:

  1. hintergrund 
  2.  skateboard
  3. LKW 
  4. die Räder 
  5. Schraubenschlüssel 
  6. Platten 
  7. Lager 
setting up our documents layerssetting up our documents layerssetting up our documents layers

3. Einrichten einer Benutzerdefinierten Raster 

 Wenn Sie vertraut sind mit der Art, wie Illustrator funktioniert, sollten Sie wissen, dass es gibt Ihnen die Möglichkeit, zu rasten Ihr design zu seinem Pixelraster.  Das bedeutet, dass jeder Ankerpunkt wird sich in der nahen Kreuzung von vier Pixeln. 

Da gibt es verschiedene Situationen erfordern unterschiedliche Rastereinstellungen, manchmal finden Sie vielleicht selbst in die position anpassen, für diejenigen, die mit Ihrer version von Adobe Illustrator. 

 Ich persönlich gegangen für die niedrigsten und gleichzeitig die Genaueste Einstellungen, weil ich das Gefühl ich habe mehr Kontrolle über meine Entwürfe.

Um diese Einstellungen zu ändern, gehen Sie auf "Bearbeiten" > "Voreinstellungen" > "Hilfslinien & Raster".   Von dort aus, ein kleines popup-Fenster wird erscheinen, wo müssen wir Folgendes einstellen:

  • Rasterlinie alle: 1 px 
  • Unterteilungen: 1 
adjusting Illustrators Grid settingsadjusting Illustrators Grid settingsadjusting Illustrators Grid settings

 Nachdem Sie diese Einstellungen angepasst, alles, was Sie tun müssen, um alles zu machen, dass pixel knackig ist, aktivieren Sie die option an Gitter ausrichten, der sich unter dem Menü "Ansicht".

 Quick-Tipp: Sie sollten wissen, dass die option an Gitter ausrichten, verwandeln in "an Pixeln ausrichten" jedes mal, wenn Sie geben Sie die Pixel-Vorschau-Modus, aber keine Sorge—das ist völlig in Ordnung.  Die meisten der Zeit, gehen Sie zurück und vorwärts, mit dieser display-Modus.

4. Erstellen der Skateboard 

Schritt 1 

Positionieren Sie sich auf dem skateboard-Ebene, so dass Sie sicher und sperren Sie alle anderen.  Mit dem Abgerundetes-Rechteck-Werkzeug, erstellen Sie ein 132 x 520 px Form mit einem Eckenradius von 66 px.   Farbe der Vorstand mit #F47D7D und positionieren Sie es durch Eingabe der folgenden Koordinaten in das Bedienfeld "Transformieren".

  • X: 450 px 
  • Y: 400 px 
positioning the skate deck base shapepositioning the skate deck base shapepositioning the skate deck base shape

Schritt 2 

 Nachdem wir unsere Verpflegung im Hause, die wir brauchen, zu erstellen, dessen Gliederung.  Dazu werden wir zunächst erstellen Sie ein Duplikat durch kopieren (Ctrl-C) und dann einfügen (Ctrl-F) unsere ursprüngliche Form.  Ändern Sie die doppelte Farbe #44423E und dann, während es ausgewählt, gehe zu Effekt > Pfad > Pfad verschieben.

creating the deck outline using offset pathcreating the deck outline using offset pathcreating the deck outline using offset path

 Schritt 3

 Einstellen der Offset wie folgt:

  • Offset: 8 px 
  • Joins: Miter (Standard) 
  • Gehrungsgrenze: 4 (Standard) 
board outline offset path settingsboard outline offset path settingsboard outline offset path settings

 Quick-Tipp: wenn Sie den offset können Sie entweder erweitern (Objekt " > "Erweitern") oder lassen es wie es ist, so dass Sie können passen Sie die Dicke später mit Hilfe der Aussehen-panel.

adjusting the offset path settings using the appearance paneladjusting the offset path settings using the appearance paneladjusting the offset path settings using the appearance panel

Auch, wenn Sie einmal erstellt haben, der Umriss, die sowohl für die deck-und die Zukunft-Objekte, stellen Sie sicher, senden Sie es an der Rückseite des Haupt-Form mithilfe des Senden-Zurück-option. 

sending the sakteboards outline to the backsending the sakteboards outline to the backsending the sakteboards outline to the back

Schritt 4 

 Einmal haben wir unser deck und seine Gliederung, die wir erstellen müssen, die Löcher zu, die Sie normalerweise befestigen Sie den LKW.  Erstellen Sie dazu eine 4 x 4 px Kreis und positionieren Sie ihn wie folgt:

  • X: 438 px 
  • Y: 246 px 
positioning the decks first cut out holepositioning the decks first cut out holepositioning the decks first cut out hole

Schritt 5 

 Mit dem ersten Loch positioniert ist, erstellen Sie ein Duplikat durch ziehen auf der rechten Seite bei gedrückter Alt-Taste, und positionieren Sie es in einem Abstand von etwa 20 px von der ursprünglichen Form, so dass Sie sicher, dass die Gruppe der zwei " (Ctrl-G).

adding the second cut out to the skate deckadding the second cut out to the skate deckadding the second cut out to the skate deck

Schritt 6 

 Sobald Sie erstellt haben, die ersten zwei Löcher, erstellen Sie eine doppelte Zeile durch die Verwendung der gleichen ziehen trick, aber dieses mal nach unten.  Dann wählen Sie die erste Zeile und die neu erstellte, und die Entfernung der Duplikat-Gruppe bei etwa 40 px.

positioning the top section cut out holes onto the skateboardpositioning the top section cut out holes onto the skateboardpositioning the top section cut out holes onto the skateboard

Schritt 7 

 Weil jeder normale skate deck hat insgesamt acht Löcher, müssen wir hinzufügen, die unten auf uns.  Erstellen Sie zuerst eine Kopie von der, die wir jetzt haben (Ctrl-C - > Ctrl-F) und positionieren Sie die Duplikate mit Hilfe des Transform-panel:

  • X: 450 px 
  • Y: 532 px 
positioning the bottom section cut out holes onto the skateboardpositioning the bottom section cut out holes onto the skateboardpositioning the bottom section cut out holes onto the skateboard

Schritt 8 

 Wie Sie vielleicht schon erraten haben, haben wir erst einmal alle unsere Löcher im Platz benötigen wir tatsächlich schneiden Sie Sie aus dem deck und der Kontur.  Dazu müssen wir zunächst wählen Sie die Kreise und stellen Sie sicher, dass Sie nicht gruppieren (Rechtsklick- > Gruppierung aufheben), sonst Pathfinder nicht in der Lage, extrahieren Sie Sie aus den Formen.

 Nachdem Sie sich vergewissert haben, dass die Elemente nicht in einer Gruppe, erstellen Sie eine Kopie (Strg-C), die werden wir brauchen in ein paar Sekunden), und wählen Sie dann sowohl Ihnen als auch der skate-deck, und verwenden Sie Pathfinder Minus Vor der Funktion.

using pathfinders minus front to create the cut outs in the skateboardusing pathfinders minus front to create the cut outs in the skateboardusing pathfinders minus front to create the cut outs in the skateboard

Schritt 9 

 Fügen Sie den zuvor kopierten Kreise (Ctrl-F) und dieses mal wählen Sie und die Gliederung und wiederholen Sie den gleichen Prozess wie vorher mit Minus Vor.  Sobald die Löcher extrahiert sind, wird Ihr Umriss wird positioniert auf der Oberseite des Decks, so dass Sie benötigen, senden Sie es an der Rückseite noch ein mal (Rechtsklick- > Senden an-Rücken).

skate deck with cut outsskate deck with cut outsskate deck with cut outs

Schritt 10 

Ich erinnere mich gesagt, um eine Kopie der kleinen Löcher, die ein paar Schritte vor?   Naja, ich hoffe, dass Sie das getan haben, weil wir müssen, erstellen Sie die Umrisse für das deck die Ausschnitte.

 Fügen Sie einfach die Kreise (Ctrl-F) auf der Oberseite des Decks, ändern Sie Ihre Farbe auf #44423E und dann drehen Sie die Kontur mit der Füllung (Shift-X).  Ändern Sie die Dicke von 4 px und stellen Sie sicher, Richten Sie die Kontur nach Außen.

adjusting the cut out outlinesadjusting the cut out outlinesadjusting the cut out outlines

Nun sollten Sie so etwas haben. 

skateboard deck with outline and cut outsskateboard deck with outline and cut outsskateboard deck with outline and cut outs

Schritt 11 

 Einmal haben wir unser basic skateboard deck, es ist Zeit, um einige highlights und Schatten um es interessanter zu machen.

 Bevor wir beginnen, erstellen der highlights, die wir zuerst erstellen Sie ein Duplikat der rosa-deck.  Sobald wir unsere Exemplare, verwenden Sie das Ellipse-Werkzeug (L) erstellen 148 x 30 px Form, die wir vertikal-center auf das board, und dann verschieben Sie es in Richtung der Unterseite von über 64 px.

positioning the ellipse for the top section highlightpositioning the ellipse for the top section highlightpositioning the ellipse for the top section highlight

Schritt 12 

Mit der ellipse und der rosa-deck ausgewählt ist, verwenden Sie Pathfinder Minus Vor option. 

using pathfinders minus front to create the decks top section highlightusing pathfinders minus front to create the decks top section highlightusing pathfinders minus front to create the decks top section highlight

Schritt 13 

 Sobald Sie extrahiert haben, die ellipse, haben Sie zwei Abschnitte des Decks gruppiert.  Da brauchen wir nur den oberen Teil, die Gruppierung aufheben (Rechtsklick- > Gruppierung aufheben), und entfernen Sie die unteren.  Ändern Sie die Farbe der restlichen Objekt auf weiß (#FFFFFF) und legen Sie deren Füllmethode auf Weiches Licht und senkt die Deckkraft auf 20%.

adjusting the blending mode for the top section highlightadjusting the blending mode for the top section highlightadjusting the blending mode for the top section highlight

Schritt 14 

 Zum erstellen der Obere Abschnitt ist kleiner Höhepunkt, wir werden zunächst erstellen Sie zwei Kopien des Decks und bewegen Sie dann die oberen 4 px nach unten.  Einmal haben wir Sie beide ausgewählt haben, wählen Sie das Pathfinder-Bedienfeld, und verwenden Sie Minus Vor.

creating the skateboards second highlight using pathfinders minus frontcreating the skateboards second highlight using pathfinders minus frontcreating the skateboards second highlight using pathfinders minus front

 Quick-Tipp: wenn Sie mit dem Minus Vorne auf Objekte, Abschnitte cut aus Ihnen heraus, in unserem Fall das deck, werden Sie zu verwalten, um Ihre gewünschte Form, aber Sie werden auch erhalten eine Reihe von weiteren Abschnitten.  Um dies zu korrigieren, einfach die Gruppierung aufheben (Rechtsklick- > "Gruppierung aufheben") und deaktivieren Sie die, die Sie brauchen, in unserem Fall der oberen gekrümmten Abschnitt, löschen Sie den rest.

Schritt 15 

 Ändern Sie die Farbe der neu erstellten Markierung auf weiß (#FFFFFF) und deren Füllmethode auf Overlay, Anpassung der Deckkraft auf einen Wert von 20%.

adjusting the blending mode for the curved highlightadjusting the blending mode for the curved highlightadjusting the blending mode for the curved highlight

Schritt 16 

 Erstellen Sie im unteren Bereich Schatten durch duplizieren der highlights, die wir bereits haben, horizontal reflektieren Sie (Rechtsklick- > Transformieren - > Spiegeln).  Positionieren Sie die Duplikate, indem Sie Sie auswählen und das deck, und dann mit der Vertikalen Ausrichtung nach Unten option finden Sie im Bedienfeld "Ausrichten".

duplicating the skateboards highlightsduplicating the skateboards highlightsduplicating the skateboards highlights

 Schritt 17

 Farbe beide Abschnitte schwarz (#000000) und dann ändern Sie die Füllmethode der größere Abschnitt zu Vermehren und auch senken deren Deckkraft auf 6%.  Für die kleineren Abschnitt, legen Sie die Füllmethode zu Vermehren, sondern halten einen höheren Wert (20%) für die Deckkraft.  Sobald Sie erstellt haben, und alle Elemente des skateboard-deck, gruppieren Sie Sie (Strg-G) so, dass die Dinge nicht verloren gehen, wenn Sie verschieben Sie Sie durch Fehler.

skateboard lower section shadows addedskateboard lower section shadows addedskateboard lower section shadows added

Schritt 18 

 Zum erstellen der grip tape, kopieren Sie einfach die rosa Form, verschieben Sie es nach Links, bei etwa 38 px und ändern Sie dann die Farbe auf #44423E.

positioning the grip tapepositioning the grip tapepositioning the grip tape

Schritt 19 

 Fügen Sie eine nette kleine textur auf die Griffigkeit, durch duplizieren (Strg-C - > Ctrl-F) auf das Objekt und dann auf Effekt - > Textur - > Getreide und anpassen der Einstellungen im popup wie folgt:

  • Intensität: 74 
  • Kontrast: 50 
  • Korn-Art: Hagelslag 
texture settingstexture settingstexture settings

 Quick-Tipp: ich weiß nicht, ob Ihnen aufgefallen ist, aber wenn Sie erstellen Texturen auf Formen, die ausgerichtet sind auf das pixel-raster, die textur selbst wird oft gehen Sie außerhalb der Oberfläche des Objekts unter.  Um dies zu beheben, fügen Sie einfach eine Kopie der Form auf die textur, und mit beiden ausgewählt, Rechtsklick- > Schnittmaske. Wenn die option nicht angezeigt wird, dann sollten Sie gehen Sie zu "Objekt" > "Schnittmaske" > "Erstellen". 

skateboard deck and grip tape finishedskateboard deck and grip tape finishedskateboard deck and grip tape finished

5. Erstellung des LKW 

Schritt 1 

 Sobald Sie fertig sind Bau der skate-deck und den Griff, es ist Zeit zu bewegen auf die LKW-layer, und erstellen Sie die kleinen Teile.

 Greifen Sie das Abgerundete Rechteck-Werkzeug und erstellen Sie eine 36 x 56 px Form mit einem Eckenradius von 4 px, Farbe #BEBFCC und dann positionieren Sie es an über 80 px von unserer zuvor erstellten skateboard.

Schritt 2 

 Erstellen Sie eine Gliederung, indem Sie Sie duplizieren Sie die Form und die Verwendung der Offset-Weg-Effekt, daran zu denken, senden Sie den offset auf der Rückseite.

  • Offset: 6 px 
  • Joins: Miter (Standard) 
  • Gehrungsgrenze: 4 (Standard) 
adding an outline to the trucks base shapeadding an outline to the trucks base shapeadding an outline to the trucks base shape

Schritt 3 

 Fügen Sie einen Höhepunkt, indem Sie Sie duplizieren die wichtigste Form zweimal, und das verschieben der oberen 4 px nach unten.  Wählen Sie die beiden Kopien und verwenden Sie dann Minus Vorne aus dem Pathfinder-Bedienfeld, so dass Sie sicher, dass die resultierende Form Farbe #BDCCD4. 

adding a highlight to the truckadding a highlight to the truckadding a highlight to the truck

 Schritt 4

 Kopieren und horizontal spiegeln die Form, die wir gerade erstellt haben, verschieben Sie Sie in Richtung der untere Teil des größeren Objekts.  Ändern Sie die Farbe auf schwarz (#000000) und legen Sie den Mischmodus "Multiplizieren" und senkt die Deckkraft auf 20%.

adding the shadow to the truckadding the shadow to the truckadding the shadow to the truck

Schritt 5 

Jetzt ist es Zeit, um die Schrauben, die halten die LKW auf dem deck.   Erstellen Sie zunächst ein 4 x 4 px Kreis und positionieren Sie es in etwa 4 px vom oberen und linken Seite des LKW ' s Haupt-Form.  Um genauer zu sein, geben Sie die Pixel-Vorschau-Modus durch drücken von Alt-Ctrl-Y ("Ansicht" > "Pixelvorschau").

positioning the trucks first boltpositioning the trucks first boltpositioning the trucks first bolt

Schritt 6 

 Erstellen Sie drei weitere Schrauben und positionieren Sie Sie in Richtung der restlichen Seiten des LKW, wobei die gleichen 4 px Abstand wie vorher.

positioning all four of the trucks boltspositioning all four of the trucks boltspositioning all four of the trucks bolts

Schritt 7 

 Haben wir erst einmal die Grundplatte, die wir brauchen, um Arbeit auf den Hänger. Mit dem Abgerundetes-Rechteck-Werkzeug, erstellen Sie einen 88 x 12 px Form mit einem Eckenradius von 2 px, und ändern Sie seine Farbe zu einem helleren #DDDEED.  Positionieren Sie das Objekt am 20 px von der Platte, Oberteil. 

positioning the trucks hangerpositioning the trucks hangerpositioning the trucks hanger

Schritt 8 

Geben die Bügel ein Umriss von 6 px mit dem Pfad verschieben-Effekt (Effekt > Pfad > Pfad verschieben). 

adding an outline to the trucks hangeradding an outline to the trucks hangeradding an outline to the trucks hanger

Schritt 9 

 Fügen Sie einen subtilen highlight durch duplizieren der Bügel ist Haupt-Form, zweimal, und verschieben Sie die Obere nach unten kopieren von 4 px. Wählen Sie beide und benutze Minus Vor.   Sobald die neue Form erhalten, ändern Sie die Farbe auf weiß (#FFFFFF), Füllmethode auf Overlay und seine Deckkraft auf 40%.

adding a subtle highlight to the trucks hangeradding a subtle highlight to the trucks hangeradding a subtle highlight to the trucks hanger

Schritt 10 

 Fügen Sie einen unteren Schatten, die durch das kopieren und horizontal reflektiert das highlight, verändert seine Farbe auf schwarz (#000000), Füllmethode auf Multiplizieren, und seine Deckkraft der Ebene auf 20%, so dass Sie sicher, richten Sie es an der Unterseite des Bügels.

adding a subtle shadow to the trucks hangeradding a subtle shadow to the trucks hangeradding a subtle shadow to the trucks hanger

Schritt 11 

 Hinzufügen von einem unteren Abschnitt der Aufhänger der Kontur durch die Schaffung einer 32 x 32 px Kreis (#44423E) und richten Sie es an den oberen Abschnitt der Gliederung.

extending the trucks hanger bottom sectionextending the trucks hanger bottom sectionextending the trucks hanger bottom section

Schritt 12 

Als Nächstes müssen wir die dunklere Bereich, wo die Muffe geht.   Schnappen Sie das Ellipse-Werkzeug (L) und zeichnen Sie ein 20 x 20 px Form, Farbe es mit #AFB0BD, und positionieren Sie es, indem Sie vertikal, indem er Sie in den oberen Bereich des Bügels ist die wichtigste Form, nicht seine Kontur.

adding the section for the bushingadding the section for the bushingadding the section for the bushing

Schritt 13 

 Sobald Sie fertig sind Schritt 12, es ist Zeit, um den kingpin (eine größere Schraube) hält den Bügel an der Bodenplatte.

 Schnappen Sie sich das Polygon-Werkzeug und erstellen Sie eine Objekt hat 6 Seiten und insgesamt radius von 5.6569 px (keine Sorge, wir beheben dies in ein paar Sekunden).  Positionieren Sie es genau in der Mitte unserer zuvor erstellten Form, und ändern Sie seine Breite auf 12 px.  Sollte das beheben Fehlstellung Probleme, so dass Sie snap to Pixel Grid.

aligning the kingpin to the pixel gridaligning the kingpin to the pixel gridaligning the kingpin to the pixel grid

Schritt 14 

 Als Nächstes fügen wir die seitlichen Achsen, die gehen auf jeder Seite des Bügels.  Wählen Sie das Abgerundetes-Rechteck-Werkzeug, und erstellen Sie eine 120 x 8 px Form, mit einem Eckenradius von 2 px, die Farbe ist mit der gleichen #44423E als wir für die meisten unserer Konturen, und Stelle sicher, dass es unter den Hänger selbst, Zentrierung es sowohl vertikal als auch horizontal.

adding the side axles to the hangeradding the side axles to the hangeradding the side axles to the hanger

Schritt 15 

 Sobald wir haben unsere Achsen, es ist Zeit, um eine Mutter auf jeder Seite.  Zuerst erstellen wir die Basis-Form durch zeichnen einer 8 x 12 px abgerundetes Rechteck mit einem Eckenradius von 2 px.  Farbe es mit #DDDEED und positionieren Sie es in einem Abstand von 4 px vom linken Achse.

adding the left nut to the axleadding the left nut to the axleadding the left nut to the axle

Schritt 16 

 Fügen Sie ein top-highlight und unteren Schatten mit den gleichen schnellen Prozess und auch die Farben, die wir in den Schritten 9 und 10 und beendeten das Stück mit einem 6 px Kontur.  Gruppe der Mutter (Ctrl-G) und erstellen Sie dann ein Duplikat und positionieren Sie es auf der rechten Seite der Bügel bei 8 px von seiner Gliederung.

truck almost donetruck almost donetruck almost done

Schritt 17 

Beenden Sie den truck, indem Sie hinzufügen einen subtilen Schatten direkt unter dem hanger und den Runden Mittelteil.   Wir können uns schnell erreichen dies, indem Sie mit dem Direktauswahl-Werkzeug (A).  Zuerst müssen wir geben Sie den Isolationsmodus für die LKW ' s Grundplatte (Rechtsklick auf die Gruppe und wählen Sie die Isolation-Modus, oder einfach Doppelklick auf die Gruppe).  Dann haben wir mit dem Direktauswahl-Werkzeug zum erstellen einer Reihe von Duplikaten, die durch auswählen der Aufhänger für die outline und der Runde Abschnitt, kopieren (Ctrl-C) und dann einfügen (Ctrl-F).

positioning the trucks shadowpositioning the trucks shadowpositioning the trucks shadow

Schritt 18 

 Nachdem Sie eingefügt haben die beiden, gruppieren Sie Sie (Strg-G) und verschieben Sie Sie nach unten, um 4 px.  Ändern Sie Ihre Füllmethode "Multiplizieren" und senken deren Deckkraft auf 20%.  Da wir wollen, dass der Schatten nur auf der Oberseite des LKW ' s baseplate, die wir brauchen zu erstellen eine Schnittmaske mit der Platte, Haupt-Form als Maske.

truck finishedtruck finishedtruck finished

Schritt 19 

 Sobald Sie die ersten LKW komplett fertig, alle Ihre Elemente (Control-G), und erstellen Sie dann ein Duplikat, dem wir position, in einer Entfernung von 36 px vom original.

positioning the second truckpositioning the second truckpositioning the second truck

6. Erstellen der Räder 

Schritt 1 

 Bewegen bis zu den Rädern Ebene, nehmt das Ellipsen-Werkzeug (L) und erstellen Sie ein 14 x 14 px Kreis.  Flip-its füllen die Kontur (Shift-X), so dass das Ausrichten der Kontur zu Skizzieren und korrigieren Sie Sie wie folgt:

Untere Kreis ist (Umrandung) 

  • Strichstärke: 20 px 
  • Color: #44423E 

Mittleren Kreis (Unser Rad ist Basis-Form) 

  • Strichstärke: 14 px 
  • Color: #A5807C 

Top-Kreis (Innere Gliederung) 

  • Strichstärke: 4 px 
  • Color: #44423E 

 Wenn Sie alle drei Kreise erstellt wurde, erweitern Sie ("Objekt" > "Erweitern"), und dann gruppieren Sie Sie (Strg-G).

Schritt 2 

 Beenden Sie das Rad durch die Schaffung einer 42 x 42 px Kreis flip-its füllen die Kontur (Shift-X), so dass das Ausrichten der Kontur nach Innen. Geben Sie eine 4 px Kontur und erweitern Sie es. 

 Schneiden Sie den ring in der Hälfte, und ändern Sie den oberen Abschnitt, die Farbe auf weiß (#FFFFFF), deren Füllmethode auf Weiches Licht, und seine Deckkraft auf 40%.  Erstellen, duplizieren, spiegeln Sie es horizontal (rechts-Klick - > Transformieren - > Spiegeln > Horizontal) und dann richten Sie es an der Unterseite des Rades, ändert es seine Farbe auf schwarz (#000000), deren Füllmethode auf Multiplizieren und seine Deckkraft auf 20%.

Schritt 3 

 Erstellen Sie drei zusätzliche Räder durch kopieren von originalen, die wir gerade erstellt haben und positionieren von Exemplaren in einer Entfernung von 48 px, zeigt Sie in einer quadratischen Form.

positioning the skateboards wheelspositioning the skateboards wheelspositioning the skateboards wheels

7. Erstellen der Schraubenschlüssel 

Schritt 1 

Der Schraubenschlüssel ist im Grunde eine Kreuzung, die mehrere Segmente hat dupliziert und dann gedreht wird in einem 90° - Winkel. 

Zuerst zeichnen wir einige der grundlegenden Formen.   Greifen Sie das Rechteck-Werkzeug (M) und erstellen Sie ein 4 x 144 px Form, Farbe es mit #DDDEED, und positionieren Sie es rechts in der Mitte des Platzes wie die Bildung der Räder.

creating the wrenchs vertical armcreating the wrenchs vertical armcreating the wrenchs vertical arm

Schritt 2 

 Fügen Sie ein 14 x 26 px Rechteck mit einem Eckenradius von 8 px.  Mit Hilfe des Direktauswahl-Werkzeug (A) löschen Sie den oberen Ankerpunkt und vereinen, die restlichen (Strg-J), die Ausrichtung der neu geschaffenen Form, um den oberen Abschnitt des Rechtecks, erstellten wir ein paar Augenblicken.

adjusting the top section of the vertical armadjusting the top section of the vertical armadjusting the top section of the vertical arm

Schritt 3 

 Fügen Sie ein 14 x 4 px dezenten weißen Markierung (Blending Mode setzen auf Overlay mit 40% Deckkraft, Ebene), einen unteren Schatten (Blending Mode setzen Sie auf Multiplizieren mit 20% Deckkraft) und eine 4 x 4 px-Kreis (#44423E), die Sie Mitte, um die oberen Bereich der Schraubenschlüssel.

 Für den unteren Abschnitt einfach die Gruppe der top-diejenigen, die wir bereits haben, drehen Sie Sie horizontal, und dann positionieren Sie Sie nach unten, wobei Sie die Füllmethode und Deckkraft Ebenen von Lichtern und Schatten.

adding details to the vertical armadding details to the vertical armadding details to the vertical arm

Schritt 4 

 Gruppe die gesamte vertikale Abschnitt der Schraubenschlüssel, die wir bisher haben, und drehen Sie Sie in einem 90° Winkel (Rechte Maustaste " > "Transformieren" > "Drehen").

Loszuwerden, alle Schatten und highlights, so dass nur die etwas dunklere Kreise.   Erstellen Sie einen Satz von zwei highlights, wobei die gleichen Einstellungen wie vorher.

adding the second arm to the wrenchadding the second arm to the wrenchadding the second arm to the wrench

Schritt 5 

 Als Nächstes erstellen Sie die mittlere, Runde Abschnitt der Schraubenschlüssel durch die Schaffung einer Grundlage Form von 24 x 24 px (#DDDEED), auf die wir hinzufügen, eine dunklere 16 x 16 px Form (#44423E).  Dann fügen Sie eine weitere, kleinere und leichtere, 12 x 12 px Kreis (#BEBFCC), auf dem erstellen wir ein Doppel-farbigen ring, ähnlich der von Schritt 2 der Erstellung der Räder Abschnitt, anpassen auf die folgenden Werte:

  • Breite: 12 px 
  • Höhe: 12 px 
  • Strichstärke: 2 px 
  •  Farbe: schwarz (#000000)
  • Füllmethode: Multiplizieren 
  • Deckkraft: 20% 

 Sobald Sie den oberen Abschnitt des Rings, spiegeln Sie es horizontal aus und ändern Ihre Farbe auf weiß (#FFFFFF) stellen Sie die Füllmethode auf Überlagern und die Deckkraft auf 50%.

creating the middle section of the wrenchcreating the middle section of the wrenchcreating the middle section of the wrench

Schritt 6 

 Gruppieren Sie alle Elemente (Strg-G) und positionieren Sie diese an der Kreuzung der beiden Arme der Schraubenschlüssel.

positioning the middle section of the wrenchpositioning the middle section of the wrenchpositioning the middle section of the wrench

Schritt 7 

Alles, was wir jetzt tun müssen, um bis zum Ende der Schlüssel wird erstellen Sie Ihre Gliederung.   So zu tun, wir müssen wählen Sie das Schraubenschlüssel in die Arme, der Kopf und das Runde Zentrum, gruppieren Sie Sie, und wenden Sie eine Offset-Weg 4 px auf die ganze Gruppe.  Das ist besser als zu vereinen und das hinzufügen der Effekt danach, die machen würde, einige Teile fallen aus dem Pixel-Raster.

wrench finishedwrench finishedwrench finished

8. Erstellen der Platten 

Schritt 1 

 Angenommen, Sie sind bereits auf den Platten Ebene, greifen Sie das Abgerundete Rechteck-Werkzeug und erstellen Sie eine 48 x 68 px Form mit einem Eckenradius von 10 px, Farbe #44423E und dann von oben richten Sie es auf über 30 px vom ersten LKW, erstellten wir eine ganze Weile her.

positioning the first platepositioning the first platepositioning the first plate

Schritt 2 

 Fügen Sie einen Höhepunkt und ein Schatten durch Wiederholung der gleichen trick, der das erstellen von zwei Kopien, bewegen einer nach unten um 4 px und dann extrahieren Sie die Obere von der darunter.

 Sobald Sie den oberen Abschnitt erstellt haben, erstellen Sie ein weiteres aus dem es durch ziehen nach unten und gleichzeitig Alt-Taste gedrückt halten, so dass Sie darauf widerspiegeln-Stück horizontal.  Ändern Sie die Einstellungen der oberen und unteren Abschnitte wie folgt:

Oberen Teil (der Höhepunkt) 

  • Color: #FFFFFF 
  •  Blending Mode: Overlay
  • Deckkraft: 40% 

Unteren Abschnitt (der Schatten) 

  • Color: #000000 
  • Füllmethode: Multiplizieren 
  • Deckkraft: 20% 
adding a highlight and a shadow to the first plateadding a highlight and a shadow to the first plateadding a highlight and a shadow to the first plate

Schritt 3 

Einmal haben wir unser highlight-und shadow, wir müssen die vier kleinen Ausschnitten, wie wir mit dem skate deck.   Erstellen Sie zunächst ein 4 x 4 px-Kreis, positionieren Sie es in einem Abstand von 10 px sowohl auf der oberen und linken Seite der Platte, und erstellen Sie dann drei weitere Kopien, die Aufrechterhaltung der festgelegten Entfernung nach außen, an die Ränder.

 Sobald Sie haben alle vier Kreise positioniert, wählen Sie Sie aus, und die Platte, und verwenden Sie Pathfinder Minus Vor die option zum Ausschneiden.

creating the cut out holes on the first platecreating the cut out holes on the first platecreating the cut out holes on the first plate

Schritt 4 

Nachdem die Ausschnitte gemacht werden, die Ihre Form sollte abgedeckt haben, Ihr zuvor erstelltes highlight und Schatten.  Um dies zu korrigieren, wählen Sie das Objekt aus, und klicken Sie rechts " > "Anordnen" > "nach Hinten".  Mit alles richtig gestapelt, wählen Sie alle Elemente auf der Platte, und gruppieren Sie Sie (Strg-G). 

first plate finishedfirst plate finishedfirst plate finished

Schritt 5 

 Den letzten Schritt müssen wir jetzt ergreifen wird, um eine Kopie unserer ersten Platte, und platzieren Sie es in einem Abstand von 36 px nach unten.

positioning the second platepositioning the second platepositioning the second plate

9. Erstellen der Lager 

Der Letzte und abschließende Teil unserer skateboarder pack ist ein Satz von acht kleinen Lager.   Wie Sie vielleicht schon erraten haben, werden wir eines erstellen und dann multiplizieren Sie es, bis wir den rest der Reihe.

Schritt 1 

 Schnappen Sie das Ellipse-Werkzeug (L) und erstellen Sie ein 4 x 4 px Kreis, Farbe von #44423E, und positionieren Sie es mit den folgenden Koordinaten:

  • X: px-735 
  • Y: 443 px 
creating the bearings base shapecreating the bearings base shapecreating the bearings base shape

Schritt 2 

 Flip für den Kreis füllen, mit Anschlag, richten Sie den Strich auf der Außenseite, wodurch es zu einem Gewicht von 11 px. Erstellen Sie eine weitere doppelte Kreis, und ändern Sie die Farbe auf #BEBFCC und sein Gewicht um 5 px. 

 Erstellen Sie einen ring Kreis von 14 x 14 px, spiegeln Sie die Fläche auf die Kontur (Shift-X), und geben ihm eine Kontur von 1 px.  Entfernen Sie die untere Hälfte, die Farbe und die restlichen Abschnitt schwarz (#000000) Einstellung der Füllmethode zu Vermehren und seine Deckkraft auf 20%.  Dupliziere es und spiegle es horizontal, verändert seine Farbe auf weiß (#FFFFFF), deren Füllmethode auf Overlay und seine Deckkraft auf 40%.

 Nicht zuletzt erstellen Sie eine weitere 4 x 4 px circle flip-its füllen die Kontur (Shift-X) und geben Sie eine Strichstärke von 2 px, so dass Sie sicher, Richten Sie die Kontur nach Außen.

creating the bearingcreating the bearingcreating the bearing

Schritt 3 

 Sobald Sie haben die erste Lager komplett, Gruppe alle Elemente (Strg-G) und erstellen Sie dann eine Kopie zu seiner linken, etwa 12 px.  Gruppe die beiden auf eine Zeile erstellen, und erstellen Sie drei weitere Zeilen nach unten, distanzierten auf 10 px vom anderen.

positioning the rest of the bearingspositioning the rest of the bearingspositioning the rest of the bearings

 Quick-Tipp: Sie könnte erreichen das gleiche Ergebnis durch die Eingabe von Pixel-Vorschau-Modus und manuell ziehen die erste Zeile nach unten 10 px mit gedrückter Alt-Taste und dann drücken von "Ctrl-D" zweimal mehr replizieren die Aktion und erhalten Sie den rest der Zeilen.

10. Hinzufügen Hintergrund 

Das Letzte Stück unserer Abbildung den hintergrund.   Um Sie hinzuzufügen, erstellen Sie einfach ein Rechteck, das exakt die gleichen Maße wie unsere Zeichenfläche (1000 x 800 px), Farbe mit einem dunklen Grau (#EFEFEF), und dann Mitte, die es sowohl vertikal als auch horizontal mit dem Bedienfeld "Ausrichten".

adding a backgroundadding a backgroundadding a background

Skate On! 

Schnappen Sie sich Ihre skateboard-denn wir haben uns eine gut aussehende pack, und vor allem gelernt, einige nette tricks auf dem Weg. 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads