Comment créer un kit de skateboarder basé sur des dessins au trait dans Adobe Illustrator

Ce que vous allez créer

La planche à roulettes est l’une des rares choses rebelles qui ont fini par changer la vie de milliers, sinon de millions d’enfants dans le monde. C'est quelque chose qui continue de me fasciner et c'est pourquoi j'ai décidé de créer ce tutoriel détaillé sur la création de votre propre morceau de skateboard avec Adobe Illustrator..

Le processus reposera sur l'utilisation de formes de base (rectangles, rectangles arrondis et cercles), et de l'aide ici et là à partir du panneau Pathfinder..

1. Configuration de notre document 

En supposant que vous avez déjà Illustrator en marche, créez un Nouveau document (Fichier> Nouveau) et ajustez les réglages comme suit:

  • Nombre de planches: 1
  • Largeur: 1000 px
  • la taille: 800 px
  • Unités: Pixels 

Et de la Avancée languette: 

  • Mode de couleur: RVB
  • Effets raster: Haute (300ppi)
  • Aligner de nouveaux objets sur la grille de pixels: vérifié

2. Superposition de notre planche

Une fois que vous avez créé un nouveau document, allez à la page Couches panneau et assurez-vous de créer sept couches et nommez-les comme suit:

  1. Contexte
  2. planche à roulette
  3. les camions
  4. roues
  5. clé
  6. assiettes
  7. roulements

3. Configurer une grille personnalisée

Si vous connaissez le fonctionnement d’Illustrator, sachez qu’il vous permet d’aligner votre dessin sur son contenu. Pixel Grid. Cela signifie que chaque point d'ancrage sera positionné à l'intersection moyenne de quatre pixels.

Comme il existe différentes situations qui nécessitent des paramètres de grille différents, vous pouvez parfois vous trouver dans la position de modifier celles qui fonctionnent avec votre version d'Adobe Illustrator..

Personnellement, j’ai opté pour les réglages les plus bas et les plus précis, car j’ai l’impression d’avoir plus de contrôle sur mes créations..

Pour modifier ces paramètres, vous devez aller à Édition> Préférences> Guides et grille. À partir de là, une petite fenêtre apparaîtra, où nous devons ajuster les éléments suivants:

  • Quadrillage tous les: 1 px
  • Subdivisions: 1

Une fois que vous avez ajusté ces paramètres, tout ce que vous avez à faire pour rendre tout en pixels précis est d’activer la Aligner sur la grille option située sous le Vue menu.

Conseil rapide:Vous devriez savoir que le Aligner sur la grille l'option se transformera en Aligner sur Pixel chaque fois que vous entrez Mode de prévisualisation des pixels, mais ne vous inquiétez pas, c'est très bien. La plupart du temps, vous allez revenir en arrière avec ce mode d'affichage.

4. Créer la planche à roulettes

Étape 1

Positionnez-vous sur le calque de la planche à roulettes en vous assurant de verrouiller tous les autres. En utilisant le Outil Rectangle Arrondi, créer un 132 x 520 px forme avec un Rayon de coin de 66 px. Colorez le tableau avec # F47D7D puis positionnez-le en entrant les coordonnées suivantes dans le Transformer panneau.

  • X: 450 px
  • Y: 400 px

Étape 2

Une fois que notre conseil d'administration est en place, nous devons en créer les grandes lignes. Pour ce faire, nous allons d’abord créer un duplicata en copiant (Control-C) puis en collant(Contrôle-F) notre forme originale. Changez la couleur de la copie en # 44423E et puis, tout en ayant sélectionné, allez à Effet> Chemin> Chemin de décalage.

Étape 3

Ajuste le Décalage comme suit:

  • Décalage: 8 px
  • Jointures: Onglet (par défaut)
  • Limite d'onglet: 4 (par défaut)

Conseil rapide: une fois que vous avez créé le décalage, vous pouvez le développer (Objet > Développer) ou laissez-le tel quel pour pouvoir ajuster l'épaisseur ultérieurement à l'aide du bouton Apparence panneau.

De plus, une fois que vous avez créé la forme de contour, pour le pont et les futurs objets, assurez-vous de l’envoyer à l’arrière de la forme principale à l’aide de la touche Envoyer au fond option.

Étape 4

Une fois que nous avons notre plate-forme et ses contours, nous devons créer les trous auxquels vous attacheriez normalement les camions. Pour ce faire, créez un 4 x 4 px cercle et positionnez-le comme suit:

  • X: 438 px
  • Y: 246 px

Étape 5

Avec le premier trou positionné, créez un duplicata en le faisant glisser vers la droite tout en maintenant enfoncé Alt, et le positionner à une distance d'environ 20 px de la forme originale, en veillant à regrouper les deux (Contrôle-G).

Étape 6

Dès que vous avez créé les deux premiers trous, créez une ligne en double en utilisant la même astuce de glissement, mais cette fois vers le bas. Sélectionnez ensuite la première ligne et celle nouvellement créée, puis éloignez le groupe dupliqué d’environ 40 px.

Étape 7

Parce que toute planche de skate normale a un total de huit trous, nous devons ajouter les trous inférieurs au nôtre. Commencez par créer une copie de celles que nous avons actuellement (Contrôle-C> Contrôle-F) puis positionnez les doublons à l'aide du bouton Transformer panneau:

  • X: 450 px
  • Y: 532 px

Étape 8

Comme vous l'avez peut-être deviné, une fois que tous nos trous sont en place, nous devons les découper à la fois dans le pont et dans les contours. Pour ce faire, nous devons d’abord sélectionner les cercles et s’assurer qu’ils ne sont pas regroupés (clic droit> Dissocier), autrement Éclaireur ne sera pas capable de les extraire des formes.

Une fois que vous vous êtes assuré que les éléments ne sont pas dans un groupe, créez une copie (Contrôle-C), quelques secondes), puis sélectionnez les deux ainsi que le skate-board et utilisez Éclaireurde Minus Front une fonction.

Étape 9

Collez les cercles précédemment copiés (Contrôle-F) et cette fois-ci sélectionnez-les ainsi que le contour et répétez le même processus que précédemment avec Minus Front. Une fois les trous extraits, la forme de votre contour sera placée sur le dessus du pont. Vous devrez donc l’envoyer une fois de plus à l’arrière (clic droit> Envoyer à l'arrière).

Étape 10

Tu te souviens que je t'ai dit de garder une copie des petits trous il y a quelques pas? Eh bien, j'espère que vous l'avez fait, car nous devons créer les contours des découpes du pont.

Il suffit de coller les cercles (Contrôle-F) sur le dessus du pont, changer leur couleur pour # 44423E puis retournez le trait avec le remplissage (Shift-X). Changer l'épaisseur à 4 px et assurez-vous de Aligner le coup sur l'extérieur.

Vous devriez maintenant avoir quelque chose comme ça.

Étape 11

Une fois que nous avons notre deck de skate de base, il est temps d’ajouter quelques reflets et ombres pour le rendre plus intéressant..

Avant de commencer à créer les points forts, nous devons d’abord créer un duplicata du jeu rose. Une fois que nous avons nos copies, utilisez le Outil Ellipse (L) créer un 148 x 30 px forme, que nous allons centrer verticalement sur le conseil, puis le déplacer vers le bas par environ 64 px.

Étape 12

Avec l’ellipse et le pont rose sélectionnés, utilisez Éclaireurde Minus Front option.

Étape 13

Une fois que vous avez extrait l'ellipse, vous regroupez deux parties du jeu. Comme nous n’avons besoin que de la partie supérieure, dissociez-les (clic droit> Dissocier) et supprimez celui du bas. Changez la couleur de l'objet restant en blanc (#FFFFFF) et mettre sa Mode de fusion à Lumière douce, abaissant le Opacité à 20%.

Étape 14

Pour créer la surbrillance la plus petite de la section supérieure, nous devons d’abord créer deux copies du jeu, puis déplacer celle du dessus. 4 px vers le bas. Une fois que nous avons les deux sélectionnés, aller à la Éclaireur panneau et utilisation Minus Front.

Conseil rapide: quand vous utilisez Minus Front sur les objets qui ont des sections découpées, dans notre cas le pont, vous parviendrez à obtenir la forme souhaitée, mais vous obtiendrez également un tas de sections restantes. Pour corriger cela, dissociez-les simplement (clic droit> Dissocier) puis désélectionnez celle dont vous avez besoin, dans notre cas la partie supérieure incurvée, en supprimant le reste.

Étape 15

Changez la couleur de notre surbrillance nouvellement créée en blanc (#FFFFFF) et son Mode de fusion à Recouvrir, ajuster sa Opacité à une valeur de 20%.

Étape 16

Créez les ombres de la section inférieure en dupliquant les rehauts que nous avons déjà, en les reflétant horizontalement (clic droit> Transform> Réfléchir). Placez les doublons en les sélectionnant, puis le jeu de cartes, puis en utilisant le Alignement vertical vers le bas option trouvée dans le Aligner panneau.

Étape 17

Colorez les deux sections en noir (# 000000) puis changez le Mode de fusion de la plus grande section à Multiplier et aussi baisser son Opacité à 6%. Pour la plus petite section, réglez le Mode de fusion à Multiplier mais conservez une valeur plus élevée (20%) pour le Opacité. Une fois que vous avez créé tous les éléments de la planche de planche à roulettes, regroupez-les (Contrôle-G) afin que les choses ne se perdent pas si vous les déplacez par erreur.

Étape 18

Pour créer le ruban adhésif, copiez simplement la forme rose, déplacez-la vers la gauche environ 38 px puis changez sa couleur en # 44423E.

Étape 19

Ajoutez une belle petite texture sur la poignée, en dupliquant (Control-C > Contrôle-F) l'objet et puis aller à Effet> Texture> Grain et en ajustant les paramètres dans la fenêtre contextuelle comme suit:

  • Intensité: 74
  • Contraste: 50
  • Type de grain: Pépites

Conseil rapide: Je ne sais pas si vous l'avez remarqué, mais lorsque vous créez des textures sur des formes alignées sur la grille de pixels, la texture elle-même dépasse souvent la surface de l'objet située en dessous. Pour résoudre ce problème, collez simplement une copie de la forme sur la texture et avec les deux, clic droit> Faire masque d'écrêtage. Si l'option n'apparaît pas, alors vous devriez aller à Objet> Masque d'écrêtage> Marque.

5. Créer les camions

Étape 1

Une fois que vous avez fini de construire le patin et la poignée, il est temps de passer à la couche camions et de créer les petites pièces..

Prenez le Outil Rectangle Arrondi et créer un 36 x 56 px forme avec un Rayon de coin de 4 px, colorer en utilisant #BEBFCC puis positionnez-le à peu près 80 px de notre planche à roulettes précédemment créé.

Étape 2

Créez un contour en dupliquant la forme et en utilisant le Chemin de décalage effet, en se rappelant d'envoyer le décalage à l'arrière.

  • Décalage: 6 px
  • Jointures: Onglet (par défaut)
  • Limite d'onglet: 4 (par défaut)

Étape 3

Ajoutez une surbrillance en dupliquant deux fois la forme principale et en déplaçant la forme supérieure. 4 px vers le bas. Sélectionnez les deux copies, puis utilisez Minus Front du Éclaireur panneau, en veillant à modifier la couleur de la forme obtenue en # BDCCD4.

Étape 4

Copiez et reflétez horizontalement la forme que nous venons de créer, en la déplaçant vers la partie inférieure de l'objet plus grand. Change sa couleur en noir (# 000000) et ensuite mettre sa Mode de fusion à Multiplier,abaissant le Opacité à 20%.

Étape 5

Il est maintenant temps d'ajouter les boulons qui retiennent le camion sur le pont. Tout d'abord créer un 4 x 4 px entourer et positionner à peu près 4 px du haut et du côté gauche de la forme principale du camion. Pour être plus précis, entrez Aperçu pixel modeen appuyant Alt-Control-Y (Affichage> Aperçu des pixels).

Étape 6

Créez trois autres boulons et positionnez-les vers les côtés restants du camion, en gardant les mêmes 4 px écart comme avant.

Étape 7

Une fois que nous avons la plaque de base, nous devons travailler sur le cintre. En utilisant le Outil Rectangle Arrondi, créé un 88 x 12 px forme avec un Rayon de coin de 2 px, et changer sa couleur en un briquet #DDDEED. Placez l'objet à 20 px de la partie supérieure de la plaque.

Étape 8

Donner au cintre un aperçu de 6 px en utilisant le Chemin de décalage effet (Effet> Chemin> Chemin de décalage).

Étape 9

Ajoutez une nuance subtile en dupliquant deux fois la forme principale du support et en déplaçant la copie supérieure vers le bas. 4 px. Sélectionnez les deux et utilisez Minus Front. Une fois la nouvelle forme obtenue, changez sa couleur en blanc (#FFFFFF), Mode de fusion à Recouvrir, et son Opacité à 40%.

Étape 10

Ajoutez une ombre en bas en copiant et en reflétant horizontalement la surbrillance, en changeant sa couleur en noir (# 000000), Mode de fusion à Multiplier,et son Opacité niveau à 20%, en veillant à l'aligner au bas du cintre.

Étape 11

Ajoutez une section inférieure au contour du cintre en créant un 32 x 32 px cercle (# 44423E) et en l'alignant sur la partie supérieure du contour.

Étape 12

Ensuite, nous devons créer la zone la plus sombre pour le passage de la bague. Prenez le Outil Ellipse (L) et dessine un 20 x 20 px la forme, la couleur en utilisant # AFB0BD, puis positionnez-le en l'alignant verticalement sur la partie supérieure de la forme principale du support, et non sur son contour.

Étape 13

Une fois que vous avez terminé l'étape 12, il est temps d'ajouter le pivot d'attelage (un boulon plus gros) qui maintient le crochet de suspension sur la plaque de base..

Prenez le Outil Polygone et créer un objet qui a 6 côtés et un rayon total de 5.6569 px (ne vous inquiétez pas, nous allons résoudre ce problème en quelques secondes). Placez-la exactement au centre de la forme créée précédemment, puis modifiez-la. Largeur à 12 px. Cela devrait résoudre tous les problèmes de désalignement, ce qui en fait Pixel Grid.

Étape 14

Ensuite, nous allons ajouter les essieux latéraux qui vont de chaque côté du cintre. Sélectionnez le Outil Rectangle Arrondi et créer un 120 x 8 px forme, avec un Rayon de coin de 2 px, coloriez-le en utilisant le même # 44423E comme nous l'avons utilisé pour la plupart de nos contours, et assurez-vous de le placer sous le cintre lui-même, en le centrant à la fois verticalement et horizontalement.

Étape 15

Une fois que nous avons créé nos essieux, il est temps d'ajouter une noix de chaque côté. Commençons par créer la forme de base en dessinant un 8 x 12 px rectangle arrondi avec un Rayon de coin de 2 px. Colorez-le avec #DDDEED puis placez-le à une distance de 4 px de l'essieu gauche.

Étape 16

Ajoutez une surbrillance supérieure et une ombre inférieure en utilisant le même processus rapide et les mêmes couleurs que celles décrites aux étapes 9 et 10, en finissant la pièce avec un 6 px contour. Groupez la noix (Contrôle-G)puis créez un duplicata et positionnez-le sur le côté droit du support à 8 px de ses contours.

Étape 17

Terminez le camion en ajoutant une ombre subtile juste sous le cintre et sa partie centrale arrondie. Nous pouvons y arriver rapidement en utilisant le Outil de sélection directe (A). Nous devons d'abord entrer Mode d'isolation pour la plaque de base du camion (clic droit sur le groupe et sélectionnez Entrer en mode d'isolation,ou double-cliquez simplement sur le groupe). Ensuite, nous utilisons le Outil de sélection directe créer un jeu de doublons en sélectionnant le contour et la section ronde du cintre, en copiant (Control-C) puis en les collant (Contrôle-F).

Étape 18

Après avoir collé les deux, regroupez-les (Contrôle-G) puis déplacez-les vers le bas en 4 px. Changer leur Mode de fusion à Multiplier et baisser leur Opacité à 20%. Comme nous voulons que l’ombre apparaisse uniquement sur la plaque de base du camion, nous devons créer un Masque d'écrêtage en utilisant la forme principale de la plaque comme masque.

Étape 19

Une fois le premier camion complètement terminé, regroupez tous ses éléments (Contrôle-G) puis créer un duplicata que nous placerons à une distance de 36 px de l'original.

6. Créer les roues

Étape 1

En montant au niveau des roues, saisissez le Outil Ellipse (L) et créer un 14 x 14 px cercle. Retourner son contenu avec son trait (Shift-X), en veillant à Aligner le trait sur le contour puis ajustez-les comme suit:

Cercle du bas (le contour)

  • Poids de l'AVC: 20 px
  • Couleur: # 44423E

Cercle du milieu (La forme de base de notre roue)

  • Poids de l'AVC: 14 px
  • Couleur: # A5807C

Cercle supérieur (le contour intérieur)

  • Poids de l'AVC: 4 px
  • Couleur: # 44423E

Une fois les trois cercles créés, développez-les (Objet> Développer), puis regroupez-les (Contrôle-G).

Étape 2

Terminez la roue en créant un 42 x 42 px cercle, et retourner son remplissage avec son trait (Shift-X), en veillant à Aligner le trait sur l'intérieur. Lui donner un Poids de 4 px et l'élargir. 

Coupez l’anneau en deux et changez la couleur de la partie supérieure en blanc (#FFFFFF), ses Mode de fusion à Lumière douce, et son Opacité à 40%. Créez un duplicata en le retournant horizontalement (clic-droit > Transformer> Réfléchir> Horizontal) puis alignez-le au bas de la roue en changeant sa couleur en noir (# 000000), ses Mode de fusion à Multiplier et son Opacité à 20%.

Étape 3

Créez trois molettes supplémentaires en copiant l’original que vous venez de créer et en plaçant les copies à une distance de 48 px, les afficher dans une formation carrée.

7. Créer la clé

Étape 1

La clé est essentiellement une croix qui a plusieurs segments dupliqués puis tournés à un angle de 90 °.

Commençons par dessiner quelques-unes des formes de base. Prenez le Outil Rectangle (M) et créer un 4 x 144 px la forme, la couleur en utilisant #DDDEED, et placez-le en plein milieu de la place comme la formation des roues.

Étape 2

Ajouter un 14 x 26 px rectangle avec un Rayon de coin de 8 px. Avec l'aide du Outil de sélection directe (A) supprimer son point d’ancrage supérieur et unir les autres (Contrôle-j), en alignant la forme nouvellement créée sur la partie supérieure du rectangle créé il y a quelques instants.

Étape 3

Ajouter un 14 x 4 px rehauts blancs subtils (Mode de fusion mettre sur Recouvrir avec un 40% d'opacité niveau), une ombre inférieure (Mode de fusion mettre sur Multiplier avec un 20% d'opacité niveau) et un 4 x 4 px cercle (# 44423E) que vous centrez sur la partie supérieure de la clé. 

Pour la section inférieure, il vous suffit de regrouper celles que nous avons déjà en haut, de les retourner horizontalement, puis de les positionner vers le bas, en inversant le Mode de fusion et Opacité niveaux de la surbrillance et de l'ombre.

Étape 4

Regroupez toute la section verticale de la clé que nous avons jusqu’à présent et faites-la pivoter à un angle de 90 ° (clic-droit > Transformer> Rotation).

Débarrassez-vous de toutes les ombres et les hautes lumières, ne laissant que les petits cercles plus sombres. Créez un ensemble de deux surlignages en conservant les mêmes paramètres qu'auparavant.

Étape 5

Ensuite, construisez la section ronde du milieu de la clé en créant une forme de base de 24 x 24 px (#DDDEED), auxquels nous ajouterons une couleur plus sombre 16 x 16 px forme (# 44423E). Ajoutez ensuite un autre plus petit et plus léger 12 x 12 px cercle (#BEBFCC), au-dessus de quoi nous allons créer un anneau bicolore semblable à celui de l'étape 2 de la section Création des roues, en l'ajustant aux valeurs suivantes:

  • Largeur: 12 px
  • la taille: 12 px
  • Poids de l'AVC: 2 px
  • Couleur: noir (# 000000)
  • Mode de fusion: Multiplier
  • Opacité: 20%

Une fois que vous avez la partie supérieure de la bague, réfléchissez-la horizontalement et changez sa couleur en blanc (#FFFFFF) en veillant à régler le Mode de fusion à Recouvrir et le Opacité à 50%.

Étape 6

Regrouper tous les éléments (Contrôle-G) et les positionner à l'intersection des deux bras de la clé.

Étape 7

Tout ce que nous devons faire maintenant pour terminer la clé est de créer son contour. Pour ce faire, nous devrons sélectionner les bras de la clé, les têtes et le centre arrondi, les regrouper et appliquer un Chemin de décalage de 4 px à l'ensemble du groupe. C’est mieux que de les unir et d’ajouter l’effet après, ce qui ferait tomber certaines parties du disque. Pixel Grid.

8. Créer les plaques

Étape 1

En supposant que vous êtes déjà sur le calque des plaques, saisissez le Outil Rectangle Arrondi et créer un 48 x 68 px forme avec un Rayon de coin de 10 px, colorer en utilisant # 44423E puis aligner dessus à peu près 30 px à partir du premier camion que nous avons créé il y a un moment.

Étape 2

Ajoutez une surbrillance et une ombre en répétant la même astuce: créez deux copies et déplacez-en une vers le bas. 4 px puis extraire celui du dessus de celui du dessous. 

Une fois que vous avez créé la section supérieure, créez-en une autre en la faisant glisser tout en maintenant Alt, en veillant à refléter la pièce horizontalement. Modifiez les paramètres des sections supérieure et inférieure comme suit:

Partie supérieure (le surligneur)

  • Couleur: #FFFFFF 
  • Mode de mélange: Recouvrir
  • Opacité: 40%

Section inférieure (l'ombre)

  • Couleur: # 000000 
  • Mode de mélange: Multiplier
  • Opacité: 20%

Étape 3

Une fois que nous avons mis en évidence nos zones d'ombre et de lumières, nous devons créer les quatre petites découpes, comme nous l'avons fait avec le skate-deck. Tout d'abord créer un 4 x 4 px cercle, positionnez-le à une distance de 10 px à la fois vers le haut et le côté gauche de la plaque, puis créez trois autres copies, en maintenant la distance spécifiée vers les marges extérieures.

Une fois les quatre cercles positionnés, sélectionnez-les, puis la plaque, et utilisez Éclaireurde Minus Front option pour les découper.

Étape 4

Une fois les découpes effectuées, votre forme doit avoir recouvert les zones de surbrillance et d'ombre créées précédemment. Pour corriger cela, sélectionnez l'objet, puis clic droit> Organiser> Arrière-plan. Avec tout ce qui est empilé correctement, sélectionnez tous les éléments de la plaque et regroupez-les (Contrôle-G).

Étape 5

La dernière étape que nous devons faire maintenant consiste à créer une copie de notre première plaque, puis à la placer à une distance de 36 px vers le bas.

9. Créer les roulements

La dernière et dernière pièce de notre pack skateur est un ensemble de huit petits roulements. Comme vous l'avez peut-être deviné, nous en créerons un, puis nous le multiplierons jusqu'à obtenir le reste du groupe..

Étape 1

Prenez le Outil Ellipse (L) et créer un 4 x 4 px cercle, le colorier en utilisant # 44423E, puis positionnez-le en utilisant les coordonnées suivantes:

  • X: 735 px
  • Y: 443 px

Étape 2

Retournez le remplissage du cercle avec son trait, en alignant le trait sur l'extérieur, ce qui lui donne un Poids de 11 px. Créez un autre cercle en double et changez sa couleur en #BEBFCC et son Poids à 5 px.

Créer un cercle de 14 x 14 px, faire pivoter son plein pour faire un trait (Shift-X), et lui donner un Poids de l'AVC de 1 px. Ret