Catégories
Plugin et site web

Comment créer une Porsche 911 avec croquis (partie 3) – Smashing Magazine

A propos de l'auteur

Concepteur visuel et UI / UX, auteur de dizaines de didacticiels Adobe Photoshop et Sketch. Accro à l'espresso. Regardez passionné.
Plus à propos
Nikola
Lazarević

Il s’agit de la troisième et dernière partie du didacticiel dans laquelle nous allons créer les roues (jantes et pneus) et ajouter toutes les touches finales (y compris les décalcomanies de course sur la carrosserie de la voiture). Ce didacticiel s'adresse davantage aux illustrateurs expérimentés, mais si vous êtes nouveau dans Sketch, vous devriez également pouvoir en profiter. Comme vous le verrez, toutes les étapes sont expliquées en détail. Néanmoins, vous voudrez peut-être lire les parties 1 et 2 avant de plonger dans les derniers détails de l'illustration.

Nous continuons notre tutoriel avec les roues de notre voiture Porsche 911, mais avant de passer aux étapes suivantes, j'aimerais braquer les projecteurs sur les fameuses roues Fuchs qui ont été conçues sous la forme d'une feuille de trèfle (ou d'une aile). Tout d'abord, un peu d'histoire:

«La roue Fuchs est une roue spéciale conçue pour le premier modèle Porsche 911 / 911S au début des années 60. Conçue en collaboration avec Otto Fuchs KG, le modélisateur Porsche Heinrich Klie et Ferdinand Porsche Jr., la roue Fuchs a été la première roue forgée légère à être montée sur un véhicule automobile de série. Ils ont permis à la voiture de sport Porsche 911 à moteur arrière de réduire la masse non suspendue grâce à une roue en alliage solide et légère.

– Source: Wikipédia

Nous allons commencer par la conception des pneus.

Pneus

Démasquer le wheel base dans le Couches panneau. Éteindre Limites Et mettre Remplit à #2A2A2A. Ensuite, dupliquez cette forme, changez Remplit à #000000, déplacez-le derrière le base wheel (faites un clic droit dessus et choisissez Recule) et poussez-le 20px à droite.

Pointe: En portant Décalage + déplacera la sélection par incréments de 10 pixels.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Commençons à travailler sur la conception des pneus. (Grand aperçu)

Sélectionnez le base wheel et ajoutez quelques lignes directrices pour faciliter l'alignement de tous les éléments. Pour ce faire, affichez les règles Sketch (appuyez sur Ctrl + R). Ensuite, ajoutez une ligne de guidage verticale au centre du base wheel avec un clic sur la règle supérieure, et faites de même pour le guide horizontal sur la règle de gauche.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez une ligne de guidage verticale et horizontale au centre de la «roue de base». (Grand aperçu)

Temporairement éteindre les directives en appuyant sur Ctrl + R sur le clavier. Créez un petit rectangle d'une largeur de 2px et une hauteur de 8px, avec le Remplit mis à #000000 et le Limites éteindre. Ce rectangle servira d'unité de base pour créer les bandes de roulement (alias le motif de la bande de roulement). Centrez le rectangle sur le base wheel horizontalement.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez l'unité de base pour les marches. (Grand aperçu)

Zoomez assez près (ici, j'ai zoomé à 3200%), choisissez Transformer dans la barre d'outils supérieure, sélectionnez le point central supérieur et poussez-le 2px vers la droite, puis sélectionnez le point du bas du milieu et poussez-le 2px vers la gauche pour lui donner un aspect incliné.

Remarque: Si vous ne voyez pas le Transformer outil dans la barre d'outils supérieure, vous pouvez l'ajouter via VuePersonnaliser la barre d'outils… ou vous pouvez utiliser le raccourci clavier Cmd + Décalage + T.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Transformez l'unité de base de la bande de roulement et donnez-lui un aspect incliné. (Grand aperçu)

Faire demi-tour sur Les lignes directrices (Ctrl + R) et assurez-vous que ce rectangle est sélectionné. Mettez le rectangle dans un groupe en appuyant sur Cmd + g sur le clavier. Donnez le nom à ce groupe treads.

Nous utiliserons le Faire pivoter les copies outil pour créer les marches autour du wheel base. Comme Créer un symbole, Faire pivoter les copies peut être l'une de ces fonctionnalités qui vous fera gagner beaucoup de temps et d'efforts!

Remarque: Si vous utilisez la version 67.0 ou 67.1 de Sketch, vous pouvez rencontrer un bogue avec Faire pivoter les copies opération. Si cela se produit, vous devrez créer les marches autour du wheel base manuellement; ou (mieux), vous devez mettre à jour vers la version 67.2 (ou ultérieure) où ce problème a été résolu.

Assurez-vous que le rectangle à l'intérieur du groupe treads est sélectionné, puis allez à CoucheChemin → sélectionner Faire pivoter les copies. Une boîte de dialogue qui s'ouvre vous permettra de définir le nombre de copies supplémentaires de l'élément sélectionné à faire. Entrer 71 de sorte qu'au total nous aurons 72 rectangles autour du wheel base ce seront les marches. presse Tourner dans la boîte de dialogue. Après avoir entré cette valeur dans la boîte de dialogue, vous verrez tous les rectangles et un indicateur circulaire au milieu.

Pointe: Effectuer cette étape dans Sketch est très gourmand en CPU et en mémoire! Si vous travaillez sur une machine moderne, vous ne rencontrerez probablement aucun problème; mais si votre Mac est un peu plus âgé, votre kilométrage peut varier. En général, lorsque vous travaillez avec un grand nombre de copies, essayez d'abord de désactiver Limites pour éviter de rester coincé et obtenir le résultat de l'opération plus rapidement.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Utilisez la fonction Rotation des copies pour créer les marches. (Grand aperçu)

Maintenant, déplacez cet indicateur circulaire vers le bas jusqu'à ce qu'il soit localisé précisément à l'intersection des guides – et voilà! nous avons 72 rectangles répartis uniformément autour du wheel base. Lorsque vous avez terminé, appuyez sur Esc ou Entrer. Notez que si vous manquez de placer l'indicateur circulaire (le centre de rotation) juste à l'intersection des guides, les rectangles ne seront pas parfaitement répartis autour du wheel base donc sois prudent.

Remarque: Le Faire pivoter les copies ne crée pas de forme composée dans les nouvelles versions de Sketch (version 52 ou version ultérieure) et crée à la place (et fait pivoter) copies séparées de la forme. En plaçant la première forme dans un groupe, nous nous sommes assurés que toutes les formes créées et pivotées se trouvent à l'intérieur de ce groupe nommé treads.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le groupe "marches" a été créé. (Grand aperçu)

Sélectionnez le base wheel à nouveau, dupliquez, positionnez-le au-dessus treads dans le Couches liste de panneaux et réduisez-la de 14px. Changement Couleur à #3F3F3F et allumer Limites – ensemble Couleur à #000000, Position à À l'intérieur et Largeur à 1px.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Continuez à travailler sur les détails des pneus. (Grand aperçu)

Dupliquer ce cercle, désactiver Remplit et définissez le Frontière Largeur à 20px. Nous voulons seulement montrer 24 du Limites14 en haut à gauche et 14 en bas à droite. Pour ce faire, saisissez le Tiret champ r*π*0.25r est le diamètre du cercle (254px dans mon cas), 0.25 est de 25% (ou 14) de la frontière, et π est 3.14.

Donc, dans ce cas, entrez la formule suivante dans le champ Tiret champ: 254*3.14*0.25et appuyez sur Entrer (ou Languette) sur le clavier.

Remarque: Si vous entrez un nombre dans le Tiret champ et appuyez sur Languette sur le clavier, Sketch remplira automatiquement le Écart champ avec le même numéro. La même chose se produira si vous appuyez sur Entrer.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ne montrons que 2/4 des frontières. (Grand aperçu)

Dupliquez le cercle, réduisez-le un peu, réglez le Limites Largeur à 12px et appliquer un Gradient angulaire avec les propriétés suivantes:

  1. #9D9D9D
  2. #000000
  3. #000000
  4. #595959
  5. #000000
  6. #000000
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Définissez un dégradé angulaire sur la forme du cercle. (Grand aperçu)

Ensuite, appliquez un Flou gaussien effet avec un Montant de 4.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Appliquez un flou gaussien. (Grand aperçu)

Encore une fois, dupliquez le cercle, désactivez Flou gaussien et réduisez-le. Allumer Remplit, assurez-vous que c'est toujours #3F3F3F, met le Limites à À l'extérieur position et Largeur à 1px. Changement Couleur à Gradient linéaire et utilise #000000 pour le premier arrêt de couleur et #444444 pour le dernier arrêt de couleur.

Ajouter Ombres intérieures – pour le Couleur utilisation #FFFFFF à 20% Alpha et ensemble Brouiller à 2; puis appliquer Ombres – pour le Couleur utilisation #000000 à 90% Alpha et ensemble Brouiller à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
L'effet Ombres intérieures a été ajouté. (Grand aperçu)

C'est maintenant le moment idéal pour ajouter un peu de texture! Sélectionnez et copiez le wheel base forme, collez-le dessus, puis Recule une fois, il se trouve juste sous le cercle que nous venons de créer. Ensemble Remplit à Remplissage de motif, Type à Remplir l'image et choisissez le motif en bas à droite. Ensemble Opacité pour cette forme à 10%.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Maintenant, ajoutez un peu de texture. (Grand aperçu)

Sélectionnez le cercle en haut, dupliquez, désactivez Limites, Ombres intérieures et Ombres. Ensemble Remplit à #000000 et Opacité à 100% et réduisez ce cercle en 32px. Appliquer un Flou gaussien avec le Montant de 4.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
(Grand aperçu)

Poussez-le vers le bas 3px, puis dupliquez et déplacez le duplicata 6px vers le haut.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquer puis déplacer le doublon vers le haut. (Grand aperçu)

Dupliquer le dernier cercle, désactiver le Flou gaussien, pousser vers le bas 3px et réduisez-le de 4px. Ajouter un Ombres effet avec le Couleur mis à #FFFFFF à 90% Alpha et Brouiller mis à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquez à nouveau le cercle, poussez et réduisez-le un peu. Presque là! (Grand aperçu)

Maintenant, dupliquez ce cercle, désactivez Ombres et réduisez-le un peu (en 2px). Allumer Limites, réglez la position sur À l'intérieur, Largeur à 1px et appliquer un Gradient linéaire:

  1. #CCCCCC
  2. #A6A6A6
  3. #A4A4A4
  4. #CFCFCF
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Appliquez un dégradé linéaire. (Grand aperçu)

Changement Remplit à Gradient angulaire avec les propriétés suivantes (attention! c'est une longue liste d'arrêts de couleur):

  1. #D3D3D3
  2. #ACACAC
  3. #D8D8D8
  4. #B4B4B4
  5. #8F8F8F
  6. #B2B2B2
  7. #C4C4C4
  8. #A4A4A4
  9. #C3C3C3
  10. #ADADAD
  11. #ADADAD
  12. #949494
  13. #BBBBBB
  14. #929292
  15. #C2C2C2
  16. #B4B4B4
  17. #8F8F8F
  18. #B4B4B4
  19. #D8D8D8
  20. #A9A9A9
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Appliquez un dégradé angulaire. (Grand aperçu)

Ensuite, ajoutez un Ombres intérieures effet – ensemble Couleur à #000000 à 50% Alpha et ensemble Brouiller et Propagé à 2.

Dupliquer, réduire de 14px, changement Remplit à #434343 Couleur unie, Limites position à À l'extérieur, et Ombres intérieures propriétés à: Couleur #000000 à 90% Alpha, Brouiller et Propagé mis à 24.

Puis ajoutez deux Ombres effets:

  • première – Couleur: #000000 à 50% Alpha; Oui: 2; Brouiller: 5
  • seconde – Couleur: #000000 à 50% Alpha; Brouiller: 2
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez deux effets d'ombres. (Grand aperçu)

Encore une fois, dupliquez la forme, réduisez-la de 8px, éteindre Remplit, Ombres et Ombre intérieure, Et mettre Limites Couleur à #414141.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquez et réduisez le cercle. (Grand aperçu)

Passer au ovale outil (O) et tracez un cercle à partir de l'intersection des guides. Éteindre Remplit, ensemble Limites Couleur à #575757, position pour À l'intérieur et Largeur à 1px.

Dupliquer, réduire un peu et s'assurer que la bordure Largeur est 1px. Répétez cela sept fois de plus, donc à la fin vous avez neuf cercles concentriques. Assurez-vous que tout Limites Largeur sont 1px. Utilisez l'image ci-dessous comme référence.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Les neuf cercles concentriques. (Grand aperçu)

Sélectionnez tous les cercles concentriques et mettez-les en groupe.

Jantes

Nous commencerons ensuite à travailler sur la conception de la jante.

Dessinez un cercle à partir de l'intersection des guides, puis tracez un rectangle en haut et centrez-le horizontalement par rapport au cercle.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Commencez à travailler sur la conception de la jante. (Grand aperçu)

Sélectionnez ce rectangle, double-cliquez dessus pour basculer vers vecteur mode d'édition et déplacez les points jusqu'à ce que vous ayez quelque chose comme sur l'image ci-dessous. Sélectionnez les deux premiers points et définissez le Rayon à 20.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Définissez le rayon des deux points supérieurs. (Grand aperçu)

Nous utiliserons Faire pivoter les copies à nouveau pour répartir cette forme autour du cercle. Sélectionnez les deux – cercle et rectangle modifié – désactivez Limites et placez-les dans un groupe. Sélectionnez maintenant le rectangle modifié, allez à CoucheChemin, sélectionnez Faire pivoter les copies, entrer 4 dans la boîte de dialogue (nous aurons donc un total de cinq formes), cliquez sur Tourneret alignez l'indicateur circulaire sur l'intersection des guides. Une fois terminé, appuyez sur Esc ou Enter.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Utilisez Rotation des copies pour répartir cette forme autour du cercle. Nous nous rapprochons de la conception de la feuille de trèfle! (Grand aperçu)

Sélectionnez toutes les formes à l'intérieur du groupe et appliquez un Soustraire opération depuis la barre d'outils supérieure. Ajouter Ombres intérieures effet – pour le Couleur utilisation #FFFFF à 50% Alpha et ensemble Brouiller à 2. Puis appliquez Ombres avec Couleur mis à #000000 à 70% Alpha et les deux Brouiller et Propagé mis à 2. Enfin, changez Remplit à #000000.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Soustraire, ajouter des ombres intérieures et des ombres, changer les remplissages en noir. (Grand aperçu)

Dessinez un cercle à partir de l'intersection des guides, mais rendez-le un peu plus grand que la forme ci-dessous, puis dessinez une forme et centrez-la horizontalement par rapport au cercle. Sélectionnez les deux, désactivez Limites et mettez-les dans un groupe. Sélectionnez la forme et effectuez un Faire pivoter les copies opération. Entrer 4 dans la boîte de dialogue (donc encore une fois, nous aurons un total de cinq formes), cliquez sur Tourneret alignez l'indicateur circulaire sur l'intersection des guides. Lorsque vous êtes prêt, appuyez sur Esc ou Enter.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La fonction Rotation des copies est à nouveau utile. (Grand aperçu)

Sélectionnez toutes les formes à l'intérieur du groupe et appliquez un Soustraire opération depuis la barre d'outils supérieure. Ajouter un Ombres intérieures effet – pour le Couleur utilisation #FFFFF à 50% Alpha et ensemble Brouiller à 2. Changement Remplit à #131313.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Soustrayez, puis ajoutez les ombres intérieures. (Grand aperçu)

Maintenant, nous allons créer une tête de boulon de jante.

Zoomez assez près (j'ai zoomé à 400%) et dessinez un cercle. Ensemble Remplit à #4F4F4F, changement Limites position à À l'extérieur, Largeur à 1px et utilise #8F8F8F pour le Couleur. Ajoutez une autre bordure mais cette fois, utilisez #000000 pour le Couleur, réglez la position sur Centre et assurez-vous que le Largeur est 1px.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez une tête de boulon – premières étapes. (Grand aperçu)

Dessinez un rectangle au milieu du cercle, éteignez Limites, entrer vecteur mode d'édition, tenir Décalage et cliquez sur le segment de droite pour ajouter un point au milieu, puis faites de même pour le segment de gauche. Poussez ces points 2px vers la gauche et vers la droite pour créer une forme hexagonale. Appliquer un Gradient linéaire pour le Remplit – utilisation #AEAEAE pour le haut et #727272 pour la couleur du bas. Ajouter Ombres intérieures en utilisant #000000 à 50% Alpha pour le Couleur Et mettre Brouiller à 2et appliquer Ombres en utilisant #000000 à 90% Alpha pour le Couleur Et mettre Brouiller à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Continuez à travailler sur la tête du boulon. (Grand aperçu)

Dupliquer la forme hexagonale, entrez vecteur mode d'édition, sélectionnez tous les points sur le côté gauche et poussez-les 1px vers la droite, puis sélectionnez tous les points principaux et poussez-les 1px vers le bas, poussez les points inférieurs 1px vers le haut et les bons points 1px la gauche. Effacer le Ombres et modifier le Gradient linéaire:

  1. #8F8F8F
  2. #979797
  3. #A4A4A4
  4. #636363
  5. #4A4A4A

Maintenant, appliquez un Ombres intérieures effet. Pour le Couleur utilisation #000000 avec 50% Alpha et ensemble Brouiller à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Les détails de la tête de boulon, maintenant avec le dégradé appliqué. (Grand aperçu)

Sélectionnez toutes les formes que nous avons utilisées pour créer la tête de boulon et regroupez-les dans un bolt head groupe. nous pouvons Créer un symbole hors de bolt head groupe et nous pouvons l'utiliser autant de fois que nous en avons besoin.

Pour créer le nouveau symbole, sélectionnez le bolt head groupe, faites un clic droit dessus et choisissez Créer un symbole du menu. La boite de dialogue Créer un nouveau symbole apparaîtra, donnez un nom au symbole (bolt head) et cliquez sur D'accord.

Nous devons maintenant distribuer le bolt head symboles autour du cercle. Dupliquer le symbole, choisissez Tourner à partir de la barre d'outils supérieure, faites glisser le marqueur réticule jusqu'à l'intersection des guides et faites-le pivoter 72 degrees. Continuez à dupliquer et à faire pivoter le symbole par incréments de 72 degrés, sans abandonner la sélection.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Répartissez les symboles «tête de boulon» autour du cercle. (Grand aperçu)

Sélectionnez maintenant chaque occurrence de symbole et ajustez l'angle de rotation à 0 degrees.

Pointe: Je suggère d'ajuster initialement l'angle à 0 degrees afin que vous puissiez mieux voir le processus et à quoi ressembleront les boulons lorsqu'ils seront placés sur la jante. Une fois que les boulons de jante sont en place, ma recommandation est d'expérimenter un peu plus et d'essayer de régler un angle de rotation différent pour chaque boulon symbole. Cela rendra les roues plus réalistes – après tout, dans la vraie vie, il est beaucoup plus probable de voir les boulons de jante à des angles aléatoires que d'être parfaitement alignés sur 0 degrés!

Enfin, sélectionnez toutes les instances du bolt head symbole, placez-les dans un groupe bolts et effectuer un Recule une fois que.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le groupe «boulons» est maintenant terminé. (Grand aperçu)

Dessiner une forme, définir Frontière Couleur à #CFCFCF, ensemble Largeur à 1px et position pour À l'intérieuret utilisez un Gradient linéaire pour le Remplit:

  1. #5F5F5F
  2. #B5B5B5
  3. #CBCBCB

Puis ajouter Ombres intérieures effet utilisant #000000 à 30% Alpha et Brouiller mis à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Continuez à travailler sur les détails de la jante. (Grand aperçu)

Prenez le Vecteur outil (V) et dessinez deux formes que nous utiliserons pour les reflets. Utiliser un Gradient linéaire pour le Remplit – utiliser pour l'arrêt de couleur supérieur #F3F3F3 à 100% Alpha et la même couleur pour le bas mais à 0% Alpha. Utilisez les mêmes paramètres de dégradé pour les deux formes et appliquez également un Flou gaussien avec le Montant de 1 aux deux formes.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez les points forts. (Grand aperçu)

Sélectionnez toutes les formes que nous venons de créer, regroupez-les et répartissez-les uniformément sur le bord. Utilisez la même méthode que nous avons utilisée pour les têtes de boulons.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Répartissez les formes autour de la jante. (Grand aperçu)

Sélectionnez le ovale outil (O) et tracez un cercle à partir de l'intersection des guides. Éteindre Limites et utilise Gradient linéaire avec des couleurs réglées sur #D8D8D8 pour l'arrêt supérieur et #848484 pour la butée inférieure. Utilisation Ombres intérieures et Ombres pour le faire paraître légèrement surélevé.

Ajoutons une lumière Ombres intérieures effet avec les propriétés suivantes:

  • Couleur: #FFFFFF à 80% Alpha
  • Brouiller: 2

Ensuite, ajoutez un dark Ombres intérieures effet:

  • Couleur: #000000 à 50% Alpha
  • Brouiller: 2

Enfin, appliquez un Ombres effet:

  • Couleur: #000000 à 50% Alpha
  • Brouiller: 2
  • Propagé: 1
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez le cercle au milieu et appliquez tous les styles. (Grand aperçu)

Dupliquez ce cercle, réduisez-le un peu, désactivez Ombres intérieures et Ombres, allumer Limites et ajoutez la première bordure:

  • Couleur: #B5B5B5;
  • Position: À l'extérieur
  • Largeur: 1px

Ensuite, ajoutez-en un deuxième en haut:

  • Couleur: #656565
  • Position: Centre
  • Largeur: 1px
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Travaillez les détails au centre de la jante. (Grand aperçu)

Finissons le design de la roue en ajoutant à la jante l'emblème Porsche.

Remarque: Recréer le logo Porsche original pour les jantes, le tout en vecteurs, n'entre pas dans le cadre de ce tutoriel. Il existe quelques options – vous pouvez le créer vous-même en suivant les mêmes principes de base décrits dans ces pages; vous pouvez télécharger le logo de Wikipedia au format SVG, puis essayer de le modifier; ou vous pouvez télécharger une copie du logo en lignes vectorielles depuis mon site Web (porsche-line-logo-f.svg). Cette copie du logo Porsche a été créée par moi à partir de zéro, le tout en vecteurs, et c'est la variante que je vous recommande d'utiliser.

Après avoir téléchargé le fichier du logo (porsche-line-logo-f.svg) apportez-le dans notre conception.

Passer au Échelle outil dans la barre d'outils supérieure, et dans la boîte de dialogue, entrez 20px dans le champ de hauteur, pour ajuster la taille du logo. Alignez le logo horizontalement avec le cercle ci-dessous.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez le logo Porsche au centre de la jante. (Grand aperçu)
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
L'emblème Porsche au centre de la jante (détail en gros plan). (Grand aperçu)

Compléter les roues – deux flux de travail possibles

Puisqu'une copie de la roue avant (une fois terminée) sera utilisée plus d'une fois dans notre illustration, nous avons deux options maintenant:

  • UNE. Nous pouvons compléter la conception de la roue avant, dupliquer la roue, apporter quelques modifications et utiliser le duplicata comme roue arrière. C'est la variante la plus simple.
  • B. Ou, à des fins d'apprentissage, nous pouvons utiliser un flux de travail impliquant l'utilisation de symboles imbriqués. C’est l’option la plus intéressante que j’explorerai plus en détail dans un instant. Bouclez votre ceinture!

A. Workflow # 1: dupliquez la roue et ajustez la copie

Ramasse le Outil vectoriel (V) et dessinez une forme sur le dessus de la roue. Éteindre Limites et Remplir la forme avec du noir #000000 Couleur. Appliquer Flou gaussien avec un Montant de 10. De cette façon, nous recréerons l'ombre de la carrosserie de la voiture sur la roue – juste un peu plus de réalisme ajouté.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez l'ombre de la carrosserie sur la roue. (Grand aperçu)

Sélectionnez le wheel groupe, wheel base copy calque et le calque de forme d'ombre et regroupez-les en un front wheel groupe.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez le groupe «roue avant». (Grand aperçu)

Maintenant que la roue est prête, dupliquez le front wheel group, renommez le groupe dans le Couches liste de panneaux pour rear wheel et faites-le glisser vers la droite jusqu'à sa place.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
(Déplacez le groupe «roue arrière» à sa place. (Grand aperçu)

Sélectionnez le wheel groupe à l'intérieur et poussez-le 20px à droite, puis sélectionnez le wheel base copy couche et poussez-le 20px à gauche. La roue arrière est prête.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Déplacez le groupe «roue» vers la droite et le calque «copie d’empattement» vers la gauche. Le groupe «roue arrière» est prêt. (Grand aperçu)

B. Workflow n ° 2: utiliser des symboles imbriqués

Ramasse le Outil vectoriel (V) et dessinez une forme sur le dessus de la roue. Éteindre Limites et Remplir la forme avec du noir #000000 Couleur. Appliquer Flou gaussien avec un Montant de 10. De cette façon, nous recréerons l'ombre de la carrosserie de la voiture sur la roue – juste un peu plus de réalisme ajouté.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez l'ombre de la carrosserie sur la roue. (Grand aperçu)

La roue est terminée. Nous allons maintenant utiliser un symbole et un symbole imbriqué pour créer les roues avant et arrière.

Sélectionnez le wheel groupe, wheel base copy calque et le calque de forme d'ombre et regroupez-les en un front wheel groupe.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez le groupe «roue avant». (Grand aperçu)

Nous en arrivons ici aux parties les plus intéressantes! Sélectionnez le wheel grouper et créer un wheel symbole, puis sélectionnez le front wheel et créez un front wheel symbole. Le symbole de la roue avant est maintenant un symbole imbriqué!

Pointe: Vous pouvez en savoir plus sur les symboles imbriqués dans les pages d'aide Sketch dédiées à ce sujet et dans l'article suivant rédigé par Noam Zomerfeld.

Les symboles imbriqués sont des symboles réguliers créés à partir d'autres symboles qui existent déjà dans votre fichier Sketch. Dans ce cas, le front wheel le symbole est composé du wheel symbole, donc le wheel le symbole est imbriqué à l'intérieur les front wheel symbole.

Quoi de mieux qu'un symbole? Peut-être un symbole avec un autre à l'intérieur – entrez Symboles imbriqués! Cette fonctionnalité vous offre de nombreuses possibilités lors de la combinaison de symboles. Les symboles d'imbrication peuvent être particulièrement utiles lorsque vous devez créer variations d'un symbole.
– Javier-Simon Cuello, «Libérer le plein potentiel des symboles dans Sketch»

Maintenant, allez à la Page des symboles dans Sketch, dupliquez le front wheel symbole, sélectionnez le wheel groupe et poussez-le 20px à droite, puis sélectionnez le wheel base copy et le pousser 20px à gauche. À la fin, renommez ce symbole en rear wheel.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Symboles des roues avant et arrière. (Grand aperçu)

Revenez à notre conception, sélectionnez et dupliquez le front wheel symbole, puis en utilisant le Inspecteur panneau change le symbole en rear wheel, renommez le symbole dans Couches liste de panneaux pour rear wheel et faites-le glisser vers la droite. Terminé!

Jusqu'à présent, il peut sembler que nous ayons passé plus de temps à jouer avec des symboles imbriqués, par rapport à l'autre flux de travail. C'est vrai. Mais nous avons également appris à utiliser cette fonctionnalité – et maintenant, si vous souhaitez modifier la conception des roues, au lieu de le faire en deux groupes distincts, vous devrez le faire uniquement une fois que à l'intérieur de wheel symbole et les modifications seront automatiquement appliquées à tous les deux roues de la voiture. C'est pourquoi nous avons utilisé un symbole imbriqué pour créer les roues avant et arrière. (Imaginez également si vous travaillez sur la conception d'un véhicule qui a beaucoup plus de roues visibles de côté, pas seulement deux! Le temps gagné se multipliera.)

Retour à la vue d'ensemble – avec les roues complètes, nous sommes très proches du design final. Nous allons jeter un coup d'oeil.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La Porsche 911 devrait ressembler à cela maintenant. (Grand aperçu)

L'ombre sous les roues et la carrosserie

Choisissez le ovale outil et dessinez une ellipse sous les roues. Ensemble Remplit à #000000 avec 80% Opacité, éteindre Limites et appliquer un Flou gaussien avec un Montant de 5.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Commencez à faire l'ombre sous la voiture. (Grand aperçu)

Dupliquez la forme ovale, ajustez la largeur en utilisant Redimensionner les poignées (réduisez-le) et réglez Remplit Opacité à 50%.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez une autre forme ovale. (Grand aperçu)

Dupliquez à nouveau cette forme, ajustez la largeur et définissez Remplit Opacité pour cette couche à 80%.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Et un de plus. (Grand aperçu)

Sélectionnez les ellipses d'ombre et regroupez-les toutes dans un shadows groupe. Déplacez ce groupe tout en bas dans le Couches liste des panneaux.

17. Touches finales – Les décalcomanies de course

Nous y sommes presque! Il est temps d’ajouter des décalcomanies de course sur la carrosserie et sur les pare-brise.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Essayez de trouver de l'inspiration pour les décalcomanies et les autocollants de course. (Grand aperçu)

L'autocollant Porsche

Aller au Wikimedia Commons site Web et téléchargez le Porsche Wortmarke au format SVG. Apportez-le à notre conception, mettez-le à l'échelle et positionnez-le comme sur l'image ci-dessous.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le «Porsche Wortmarke» ajouté à la porte. (Grand aperçu)

Créez des rectangles en utilisant le Rectangle outil (R), ensemble Remplit à #0F0F13 et éteindre Limites. Sélectionnez tous les éléments et regroupez-les dans un porsche sticker groupe, puis faites glisser ce groupe à l'intérieur bodywork juste en dessous du door couche.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez une décoration autour des lettres autocollantes «Porsche». (Grand aperçu)

Autocollant de coquille

Ensuite, téléchargez le logo Shell vintage au format SVG et ouvrez-le dans Sketch. Supprimez le rectangle blanc en bas à l'intérieur du groupe de logos, puis copiez-le et collez-le dans notre conception. Placez-le juste au-dessus du porsche sticker dans le Couches liste des panneaux et positionnez-la comme sur l'image ci-dessous.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez l'autocollant vintage du logo Shell. (Grand aperçu)

Autocollant Dunlop

Téléchargez le logo Dunlop au format SVG, ouvrez-le dans Sketch et supprimez le rectangle jaune. Apportez-le à notre conception, réduisez-le un peu et placez-le près du feu arrière. Assurez-vous que le logo est à l'intérieur du bodywork groupe, juste au-dessus du logo Shell dans la liste des calques.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez l'autocollant du logo Dunlop. (Grand aperçu)

Autocollant Marlboro

Obtenez la version SVG du logo Marlboro sur Wikimedia Commons, collez dans notre conception et réduisez-la. Utilisez le redimensionner les poignées pour presser la forme rouge, puis déplacer les lettres vers le haut, près de la forme rouge et enfin changer Remplit pour la forme rouge à Linear Gradient with the following parameters:

  1. #E60202
  2. #BB0101
  3. #860000
Screenshot of the steps described in the previous paragraph of the tutorial.
Add and modify the Marlboro logo sticker. (Large preview)

Please make sure that this logo is inside bodywork group and above “Dunlop” logo.

Heuer Chronograph sticker

Download and open in Sketch the Tag Heuer SVG logo. Delete everything except: the rectangle with the black border, the red rectangle, and the word “Heuer”.

Select the rectangle with the black border, turn off Limites and change Fills à #CC2132. Next, select the inner red rectangle, turn on Limites, set Couleur à #FFFFFF, position to À l'extérieur et Largeur à 12px. Then use the Type tool (T) and type the word Chronograph — for the font use Helvetica Bold, with the size set to 72px.

Remarque: If you don’t have Helvetica Bold installed, use a font similar in appearance (for example, Arial Bold), as this scale it would be difficult to spot the differences.

Convert the text block into vector shapes, by right-clicking on it and selecting Convert to Outlines. Finally, select the bigger red rectangle, enter vector editing mode, select the top two points and push them down a bit. Select everything and place all the elements into a heuer chronograph logo group.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the ‘heuer chronograph logo’ group. (Large preview)

Bring this modified logo to our design, scale it down and place it onto the car body. Like before, make sure it’s inside bodywork, and it’s above the Marloboro logo.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Heuer Chronograph sticker on the car, to the left of the driver’s door. (Large preview)

Porsche Crest Badge

Jump over to Wikimedia and download the Porsche logo in SVG format. We will need to modify and simplify it a bit because it’s too complex and we don’t need all of these details for the scale at which we’ll be using it in our illustration.

Open the SVG logo file in Sketch, and first delete all the groups (amw-link et d-link) inside it. Then, select the shape on top, press Enter to switch to vector editing mode, select the word “Porsche” and the registered trademark symbol and delete them as well.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start modifying the Porsche logo. (Large preview)

Next, click on the arrow in the front second crest compound shape to reveal its components, select the four paths and drag them outside the compound path, then change their color to #B12B28. Reveal the contents of the first compound crest shape, select all the paths that form the word “Porsche” and delete them.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche crest logo is now complete. (Large preview)

Bring the modified Porsche crest logo to our design, scale it down, select the path that is the last one inside the Porsche logo group and add a Shadows effect — for the Couleur utilisation #000000 à 50% Alpha and set Brouiller à 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Porsche crest logo in place on the car body. (Large preview)

The Porsche crest badge should be placed inside the bodywork group just like the previous stickers that we added, above the heuer chronograph logo group.

Rallye Monte-Carlo sticker

Draw a rounded rectangle using the Rounded Rectangle tool (U), enter vector editing mode and add and move the vector points to make the shape like on the image below.

Ensemble Couleur à #9C010E and turn off Limites. Duplicate this shape, change Couleur to, i.e., #000000 so you can see better what you are doing, enter vector editing mode, select the top points and push them down a bit. Push by the same distance the right points to the left, and the left points to the right. Then push up the bottom points a bit more.

Turn off Fills, turn on Limites with position set to À l'intérieur, Largeur set to 6px, et Couleur à #D7CB82. Convert Limites into a shape by going to CoucheConvert to Outlines.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start working on the Rallye Monte-Carlo sticker. (Large preview)

Draw a rectangle without Limites, set Couleur à #D7CB82, enter vector editing mode, add points in the middle of the top and bottom segment, and push them up and down a bit. Type the words: “SIEGER, WINNER, VAINQUEUR, 1968”. For the font use Helvetica Bold (or alternatively Arial Bold) with the #9C010E Couleur. Add the Porsche Wortmarke (we’ve used it earlier, remember?) to the bottom, and set Couleur à #D7CB82.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the shape, text, and the ‘Porsche Wortmarke’. (Large preview)

Convert text to outlines, select the “1968” shape on the left side of the rectangle, zoom in and use Transform from the top toolbar to modify the shape:

  1. select the middle point on the right side and push it up a bit;
  2. select the bottom point on the right side and push it down the same amount of pixels.

Perform a similar action for the “1968” on the right side of the rectangle, but this time use the middle and bottom points on the left side.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue adding the details to the Rallye Monte-Carlo sticker. (Large preview)

Type “RALLYE” “MONTE” “-CARLO” as a three separate words, use the same font and change the Couleur à #D7CB82.

Again, do a Convert to Outlines action and use Transform from the top toolbar to modify the shapes. I won’t go much into details here, but first modify the words “RALLYE” and “-CARLO” by using the method outlined above. Then, select all three shapes (the words), invoke the Transform tool, select the middle top point and push it up a bit to make the shapes elongated, and finally scale it up a bit by holding Alt + Décalage on the keyboard while dragging the top right Resize handle. Use the image below as a reference.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Rallye Monte-Carlo sticker finished. (Large preview)

Select and group all the elements we used to create this sticker into a rallye monte-carlo group, bring it into our design, and put it on the side windshield. In the Couches panel list this sticker should be à l'intérieur les windshields group on top.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Monte-Carlo sticker on the side windshield. (Large preview)

Smashing Magazine Sticker

This is the last sticker we are going to put on the car. Download the Smashing Magazine logo in SVG format, open it in Sketch and draw a red (#D33A2C) rectangle below the logo. Select both, create a group Smashing Magazine sticker, copy and paste into our design. Place it next to Rallye Monte Carlo sticker and scale it if needed.

In the Couches panel list this should be inside the windshields group on top.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Smashing Magazine sticker added. (Large preview)

I encourage you to add even more decals to the car body and the side windshield. Use the image below as a source for your inspiration.

Remarque: These are just examples and recreating all the decals in vectors is outside of the scope of this tutorial. You can apply the principles learned from this tutorial and tweak the decals in vector format in a similar way.

Screenshot of the steps described in the previous paragraph of the tutorial.
Some side windshield decals examples. (Large preview)
Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche 911 car body decals examples. (Large preview)

Racing Number and Drivers Names

One more important detail — since this car is a racing car we need to add a racing number to it.

Download the Montserrat font family (if you don’t have it already), install only the “Montserrat Bold” font variant, and type the racing number. Set the Size à 180px et le Couleur à #000000. Then, Convert to Outlines to be able to apply a gradient to the racing number, and change Fills to a Linear Gradient:

  1. #22222B
  2. #3E3E42
  3. #656566
  4. #1B1B1E
  5. #0F0F13
Screenshot of the steps described in the previous paragraph of the tutorial.
Add the racing number. (Large preview)

Now add the drivers’ last names. I will add shamelessly my last name and the last name of one of my best friends, Ivan Minic. Use the Text tool to add the names, for the font use again “Montserrat Bold”, set Size et Line à 20px et Couleur à #2F2F2F.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the drivers’ last names. (Large preview)

Select the names and the racing number, and move them inside the bodywork group, just above the door layer.

Select and put all elements created so far into one group — Porsche 911. Our Porsche 911 is now officially finished!

Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche 911 in all its glory! Great job! (Large preview)

Finally, let’s add a background. Create a rectangle of the same size as the artboard, set the Fills à #F4F3F2, and push it below the Porsche 911 group.

Final image 3/3: Add the background and complete the Porsche 911 tutorial illustration!
Final image 3/3: Add the background and complete the Porsche 911 tutorial illustration! (Large preview)

Conclusion

We’ve put a lot of time and effort to reach the final destination and now you know too how to create all in vectors one of my favorite cars, the original Porsche 911 from 1968, in Sketch app. 🙂

The tutorial probably wasn’t too easy, but the end results were well worth it, in my opinion.

The next step, of course, is to design votre own favorite car. Select a car (or another object you like) and be sure to find as many photos of it from different angles, so that you can carefully replicate all of the important details.

More car illustrations for your inspiration — these are some of other racing cars that I’ve been creating in Sketch recently.
More car illustrations for your inspiration — these are some of other racing cars that I’ve been creating in Sketch recently. (Large preview)

As you can see, there are certain tools and features in Sketch that you can master to create similar objects — use them to speed up and simplify the whole process.

I hope you will also remember how important is the proper naming of the layers/shapes (and groups), and stacking them in the right order so that even the most complex of illustrations are easy to organize and to work with.

Finally, if you have any questions, please leave a comment below or ping me on Twitter (@colaja) and I will gladly help you.

Further Reading

  1. “Mastering the Bézier Curve in Sketch” (a tutorial by Peter Nowell)
  2. “Designing A Realistic Chronograph Watch In Sketch” (a tutorial by Nikola Lazarević)
  3. “Styling — Fills” (Sketch help page)
  4. “Harnessing Vector Awesomeness in Sketch” (a tutorial by Peter Nowell)
  5. “Vector Editing (and Vector Editing Mode)” (Sketch help page)
  6. “Shapes” (Sketch help page)
  7. “Copy styles in Sketch” (a tutorial by Drahomír Posteby-Mach)
  8. “Getting the pixels right in Sketch” (a tutorial by Nav Pawera)
  9. “Sketch Symbols, Everything you need to know, and more!” (a tutorial by Brian Laiche)
  10. “Unleashing The Full Potential Of Symbols In Sketch” (an article by Javier Simon Cuello)
  11. “How to Edit Shapes with Rotate Copies tool” (Sketch help page)
  12. “Creating Nested Symbols” (Sketch help page)
  13. “Nested Symbols in Sketch — I 😍 you” (a tutorial by Noam Zomerfeld)
  14. “Unleashing The Full Potential Of Symbols In Sketch: Nested Symbols” (a tutorial by Javier Cuello)
Smashing Editorial(mb, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *