Catégories
Plugin et site web

Comment créer une Porsche 911 avec croquis (partie 1) – 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ć

Ce tutoriel s'adresse aux illustrateurs qui sont également des passionnés d'automobile. Si vous suivez, vous apprendrez à dessiner à partir de zéro dans Sketch la légendaire Porsche 911 – le tout en vecteurs. Ensemble, nous pousserons Sketch à ses limites et vous apprendrez à créer une voiture presque photo-réaliste en utilisant des formes de base, des styles de calques et diverses fonctionnalités de Sketch. Aucune image bitmap ne sera utilisée, ce qui signifie que l'illustration vectorielle finale peut être mise à l'échelle à n'importe quelle taille sans perte de détails.

Si vous êtes à la fois un amateur d'essence (alias un grand amateur de voitures) avec une place spéciale dans votre cœur pour la légendaire Porsche 911, et également un fan de la puissante application Sketch, alors ce tutoriel est pour vous. Aujourd'hui, nous allons pousser Sketch à ses limites – étape par étape. Vous apprendrez à créer une illustration vectorielle très réaliste et détaillée d'une Porsche 911 vintage en utilisant des formes de base, des styles de calque et des fonctionnalités d'esquisse (telles que «Faire pivoter les copies» et «Symboles»). Vous apprendrez à maîtriser l’outil Vecteur, à appliquer plusieurs effets d’ombre et à utiliser des dégradés. Je vais également vous expliquer comment vous pouvez faire pivoter et dupliquer des objets en quelques clics spéciaux. Aucune image bitmap ne sera utilisée, ce qui signifie que l'illustration finale peut être mise à l'échelle à n'importe quelle taille sans perte de détails.

Ce didacticiel s'adresse davantage aux illustrateurs expérimentés, mais si vous êtes nouveau dans Sketch, vous devriez également pouvoir en profiter, car toutes les étapes sont expliquées en détail.

Remarque: Il s’agit de la première partie de ce didacticiel dans laquelle nous nous concentrerons sur l’établissement du «travail de base» principal, c’est-à-dire que nous allons créer et modifier la carrosserie de la voiture. De plus, nous fabriquerons également les feux de signalisation avant et les feux arrière.

La Porsche 911

Mais d'abord, un peu de contexte sur la voiture que nous allons fabriquer.

Le modèle 911 est une voiture de sport 2 portes produite par Porsche de 1963 à 1989, date à laquelle il a été remplacé par un nouveau modèle du même nom. La série 911 originale est souvent citée comme la voiture de compétition la plus réussie de tous les temps, en particulier ses variantes optimisées pour la course. En septembre 1999, la Porsche 911 d'origine a remporté la 5e place du prestigieux prix «Voiture du siècle».

La première 911 avait également un concept presque unique pour l'époque – moteur arrière, traction arrière. (Beaucoup plus tard, une autre société a créé une voiture avec le même concept. Il est fort probable que vous ayez entendu parler de cette autre voiture aussi – c'était la célèbre DeLorean DMC-12! La DeLorean est devenue très populaire en 1985 lorsque Retour vers le futur est sorti dans les cinémas.)

Maintenant, attachez votre ceinture et allons-y – car nous avons une route longue, étroite et venteuse (mais amusante) devant nous. Démarrez le moteur (application Sketch), passez en première vitesse (créez un nouveau fichier) et relâchez l'embrayage (commencez à dessiner sur la toile vierge)!

Remarque: J'ai déjà écrit sur l'utilisation de Sketch pour l'illustration vectorielle. Si vous êtes curieux, consultez mon tutoriel précédent sur la conception d'un chronographe avec Sketch: "Concevoir une montre chronographe réaliste dans Sketch".

Dessinons une voiture!

Pour pouvoir mieux suivre les étapes de ce tutoriel, je vais vous fournir le fichier source original de Sketch. Ce fichier vous aidera à suivre le processus plus facilement mais je vous encourage à reproduire les étapes dans un nouveau fichier, en commençant par une toile vierge.

La dernière illustration de la Porsche 911 que nous allons créer dans ce tutoriel.
La dernière illustration de la Porsche 911 que nous allons créer dans ce tutoriel. (Grand aperçu)

1. Paramètres du plan de travail

La première étape consiste à créer un nouveau document Sketch. Nommez le document «Porsche911» et configurez un nouveau plan de travail avec le même nom, taille: 1920px large et 1080px haute.

2. Traçage de la voiture avec l'outil Vector

Pour cette étape, nous avons besoin d'une image d'une Porsche 911 qui servira de référence pour esquisser la voiture dans Sketch.

Notre image de référence d'une Porsche 911.
Notre image de référence d'une Porsche 911. (Grand aperçu)

Téléchargez, copiez et collez l'image dans le plan de travail. Cliquez avec le bouton droit de la souris sur l'image de référence dans la liste des calques du Couches panneau et choisissez Verrouiller le calque pour verrouiller le calque avec l'image de référence afin qu'il ne bouge pas accidentellement.

Pointe: L'autre façon de verrouiller un calque dans Sketch consiste à survoler le nom du calque tout en appuyant sur Alt et en cliquant sur l'icône de verrouillage.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Verrouillez le calque d'image de référence. (Grand aperçu)

Nous utiliserons le Vecteur outil pour décrire la carrosserie de la voiture. Le résultat de cette opération sera une forme vectorielle. Chaque forme est composée de points et de poignées de Bézier. Les poignées de Bézier sont utilisées pour ajouter de la courbure à une forme.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Points vectoriels et poignées de Bézier. (Grand aperçu)

Connaissez vos points et vos poignées Bézier

Pour chaque point que vous ajoutez avec le Vecteur outil, vous avez le choix entre quatre types de points: tout droit, en miroir, débranché, et asymétrique. Le type de point décrit le comportement des poignées de Bézier. Vous pouvez parcourir ces types en sélectionnant un point et en appuyant sur 1, 2, 3, ou 4 sur votre clavier. Vous pouvez trouver le type de point pour le point sélectionné dans le Inspecteur panneau.

Types de points

1. Droit
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Type de point droit. (Grand aperçu)

L'option «droite» vous donnera un coin droit. Ce type vous permet également d'ajouter un coin Rayon via le Inspecteur panneau à droite.

2. Miroir
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Type de point en miroir. (Grand aperçu)

«Miroir» ajoutera deux poignées de Bézier qui se reflètent l'une l'autre afin qu'elles soient toujours parallèles et de la même longueur des deux côtés.

3. Déconnecté
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Type de point déconnecté. (Grand aperçu)

Cette option vous donnera deux poignées de Bézier que vous pourrez modifier individuellement. Parfait pour les virages pointus!

4. Asymétrique
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Type de point asymétrique. (Grand aperçu)

«Asymétrique» est presque la même chose que «miroir», mais il ne fait que maintenir les poignées de Bézier parallèles. Vous pouvez modifier la longueur des poignées individuellement.

Maintenant que vous en savez plus sur les points et les poignées, continuons.

Remarque: Pour en savoir plus sur les courbes de Bézier dans l'application Sketch, consultez le didacticiel suivant de Peter Nowell: «Maîtriser la courbe de Bézier dans Sketch».

Sélectionnez le Vecteur outil en appuyant sur V sur le clavier, effectuez un zoom avant (appuyez sur Z et cliquez pour zoomer) et commencez à dessiner la carrosserie. Cliquez une fois pour créer un point, éloignez-vous à une certaine distance, cliquez pour ajouter un deuxième point et sans pour autant relâcher le bouton de la souris, faites glisser ce point pour créer une courbe et utiliser Bézier pour contrôler la courbe.

Pointe: Je vous suggère de donner temporairement à la bordure une couleur vive et une largeur plus épaisse (utilisez le panneau Inspecteur pour les modifier) ​​afin que vous puissiez tracer la forme de la voiture plus confortablement.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Commencez à tracer le contour de la voiture. (Grand aperçu)

Continuez à faire cela autour de la forme principale de la voiture, mais exclure les pare-brise avant et arrière. La pratique est nécessaire pour atteindre la perfection et avec le temps, vous vous améliorerez en utilisant le Vecteur outil. Une fois que vous êtes prêt avec le traçage de la carrosserie de la voiture, les résultats devraient ressembler à la capture d'écran ci-dessous.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Les résultats du traçage devraient ressembler à ceci. (Grand aperçu)

Ensuite, nous devons «découper» les vitres latérales du corps principal de la voiture. Utilisez le Vecteur outil pour créer deux formes sur les fenêtres latérales. Nommez les formes side window 1 et side window 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez deux formes sur les fenêtres latérales. (Grand aperçu)

Dupliquez ces deux formes (Cmd + ) et cacher les copies pour l'instant. (Nous utiliserons les copies plus tard pour les vitres latérales.) Sélectionnez la forme de la carrosserie et les deux formes de vitres latérales visibles, puis appliquez un Soustraire opération à partir de la barre d'outils Sketch supérieure. Nommez la forme résultante car body.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La forme complète de la «carrosserie». (Grand aperçu)

Ensuite, créez la partie inférieure de la voiture avec le Vecteur outil. Vous pouvez le tracer, mais il n’est pas vraiment important d’être précis à 100% car les détails de la forme qui ne seront pas visibles n’ont pas particulièrement d’importance. Nommez cette forme floor, puis déplacez-le dans le Couches panneau sous le car body.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La forme vectorielle «sol». (Grand aperçu)

Il n'y a plus qu'une chose à faire avant de terminer cette étape – dessiner une roue. Choisissez le ovale outil en appuyant sur O sur le clavier et créez un cercle de la même taille que la roue dans l'image de référence.

Tenir Décalage et Alt pendant que vous faites glisser pour faire un cercle parfait du centre vers l'extérieur. Donnez à cette forme le nom de wheel base et assurez-vous que sa position est au-dessus du floor et en dessous du car body couches dans le Couches liste des panneaux.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez la forme de roue de base. (Grand aperçu)

3. Ajoutez de la couleur, des ombres et des reflets à la carrosserie de la voiture

Ensuite, nous nous concentrerons sur la carrosserie de la voiture, nous pouvons donc pour l'instant masquer l'image de référence, ainsi que le wheel base et floor couches. Ce que j'aime généralement faire à ce stade est de déverrouiller l'image de référence, de la déplacer en dehors du plan de travail et de la placer au dessus il (ou tout autre endroit qui fonctionne pour vous – ci-dessous ou sur le côté gauche ou droit du plan de travail), donc je peux toujours l'utiliser comme référence.

Ou, alternativement, vous pouvez déverrouiller l'image de référence, faire une copie (Cmd + ), déplacez la copie en dehors du plan de travail pour pouvoir l'utiliser comme référence et masquez l'image de référence d'origine à l'intérieur du plan de travail.

Pointe: Cliquez sur l'icône en forme d'œil à côté du nom du calque dans la liste du panneau Calques pour le masquer. Pour déverrouiller le calque, cliquez avec le bouton droit de la souris dans le panneau Calques et choisissez Déverrouiller le calque, ou cliquez simplement sur l’icône de verrouillage à côté du nom du calque.

Commençons par définir la couleur de base de notre voiture. Sélectionner car body, décocher Limites et pour le Remplit Utilisation de la couleur #E9E9E7.

Pointe: Utilisation F sur le clavier pour activer et désactiver rapidement les remplissages et utiliser B pour activer ou désactiver rapidement les bordures.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Définissez la couleur de base de notre voiture. (Grand aperçu)

Remarque: Nouveau dans Sketch? Consultez d'abord cette page d'aide Sketch très détaillée sur l'utilisation des remplissages: «Styling – Remplissages».

Ensuite, nous continuerons avec les ombres (les parties les plus sombres de la carrosserie). Utilisez le Vecteur outil pour dessiner une forme comme sur l'image ci-dessous.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dessinez une forme «d’ombre». (Grand aperçu)

Comme vous pouvez le voir, la forme est plus longue que la carrosserie de la voiture, nous allons donc résoudre ce problème maintenant. Sélectionnez les deux formes (car body et la forme que nous venons de créer) et effectuez un Masque opération depuis la barre d'outils supérieure. Sketch placera automatiquement le résultat dans un groupe. Donnez le nom à ce groupe résultant bodywork.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajustez la forme «ombre» à l'intérieur de la carrosserie de la voiture. (Grand aperçu)

Maintenant, sélectionnez à nouveau la forme que nous avons créée, désactivez Limites, met le Remplit Couleur à #E1E1E1 et appliquer un Flou gaussien avec un Montant de 4.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La forme «ombre» quand elle est prête. (Grand aperçu)

Dessinez une autre forme avec le Vecteur outil. Utilisez l'image ci-dessous comme référence.

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

Utilisez le Couches panneau pour déplacer cette forme dans le groupe bodywork. Éteindre Limiteset appliquez un Gradient linéaire avec les paramètres suivants:

  1. #E4E4E4
  2. #C5C5C5
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Appliquez un dégradé. (Grand aperçu)

Appliquer un Flou gaussien avec un Montant de 6 pour adoucir un peu ses bords, et ajouter un Ombre:

  • Couleur: #FFFFFF
  • Alpha: 90%
  • X: 0; Y: -8; Brouiller: 10
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
La deuxième forme «d’ombre» est maintenant terminée. (Grand aperçu)

Ensuite, pour ajouter une ombre au bas de la carrosserie, dessinez une forme à l'aide de Vecteur outil, ensemble Remplit à #4E4E4E, placez-le dans le bodywork grouper et appliquer un Flou gaussien avec un Montant de 12. Utilisez l'image ci-dessous comme référence.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
L ’« ombre »au bas de la carrosserie. (Grand aperçu)

Pour finir avec les ombres, dessinez une petite forme à l'aide du Vecteur outil, comme sur l'image ci-dessous, remplissez-le avec #D8D8D8 et lui donner un Flou gaussien effet avec un Montant de 5. N'oubliez pas de le placer à l'intérieur du bodywork groupe.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dessinez la dernière forme «d’ombre». (Grand aperçu)

Pour ajouter des reflets lumineux, nous allons créer trois formes en utilisant le Vecteur outil et remplissez-les avec les couleurs suivantes:

  1. #F9F9F9
  2. #F1F1F1
  3. #F1F1F1
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dessinez les reflets de la lumière. (Grand aperçu)

Déplacez ces calques à l'intérieur du bodywork groupe, désactiver Limites et appliquer un Flou gaussien avec un Montant de 6.

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

Terminez cette étape en dessinant deux formes à l'aide du Vecteur outil. Nommez ces formes front fender et rear fender. Réglez la couleur sur #393939, retirer le Limites, déplacez-les à nouveau à l'intérieur du groupe et donnez-leur un Flou gaussien effet avec Montant de 2, Et mettre Opacité à 50%. 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 ailes avant et arrière. (Grand aperçu)

Remarque: Désormais, tout ce que nous créons doit être placé à l'intérieur du bodywork groupe.

4. Création de la porte (et de toutes sortes de couvercles)

Cette étape est assez simple et ne prendra que quelques minutes. Nous ajouterons un tas de couvercles et une porte à cette étape.

Sélectionnez le Vecteur outil (V) et commencez à dessiner les couvercles. Tu n'as pas à proche les formes, laissez-les simplement ouvertes, car nous n’avons pas vraiment besoin de formes fermées – juste les lignes. Pour ce faire, appuyez sur Esc touche lorsque vous êtes satisfait de chaque ligne. Définir la frontière Couleur au noir (#000000) et Largeur à 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.
Créez les couvercles: réservoir de carburant, coffre avant, moteur et antibrouillard. (Grand aperçu)

Sélectionnez les couches de couvercles du réservoir de carburant, du coffre avant et du moteur arrière et ajoutez-y Ombres effets avec les paramètres suivants:

  • Couleur: #FFFFFF
  • Alpha: 90%
  • X: 0; Oui: 2; Brouiller: 2; Propagé: 0;

Ensuite, sélectionnez le calque Fog Light Place Lid et appliquez un peu différent Ombres:

  • Couleur: #FFFFFF
  • Alpha: 20%
  • X: 2; Oui: 0; Brouiller: 2; Propagé: 2;

Ramasse le ovale outil (O) et créez un petit cercle qui représentera la couverture Jack Point. Éteindre Remplit et ajoutez un À l'extérieur bordure, avec un Largeur de 1px et le Couleur mis à #000000. Appliquer Ombres, avec le Couleur mis à #FFFFFF à 30% alpha et le Brouiller et Propagé mis à 2.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez l'élément «Jack Point Cover». (Grand aperçu)

Ensuite, nous allons dessiner une porte avec le Vecteur outil (V), de la même manière que nous avons dessiné tous les couvercles.

Rendre l'image de référence visible en arrière-plan, définir le bodywork couche à 50% Opacité et tracez les lignes de la porte à partir de la photo.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Tracez les lignes de la porte. (Grand aperçu)

Lorsque vous avez terminé, masquez à nouveau l'image de référence, définissez bodywork couche Opacité à 100% et stylisez la forme de la porte.

Définir la bordure de forme de la porte Couleur au noir (#000000), Largeur à 2px et appliquer Ombres:

  • Couleur: #FFFFFF
  • Alpha: 40%
  • X: 2; Oui: 2; Brouiller: 2; Propagé: 2;
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Donnez du style à la forme de la porte. (Grand aperçu)

Pointe: N'oubliez pas de donner des noms appropriés aux formes / calques. Un nom approprié de chaque forme / calque peut vous aider plus tard, car votre fichier Sketch devient de plus en plus complexe!

Dessinez deux petits rectangles à l'aide du Vecteur outil (V). Appuyez et maintenez Décalage tout en dessinant pour rendre les lignes droites. Il est important d'aligner le bas des rectangles comme sur l'image ci-dessous. Remplissez les deux rectangles de couleur noire et désactivez Limites.

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

Pointe: Vous pouvez également dessiner ces deux petits rectangles à l'aide de l'outil Rectangle (R), entrer en mode d'édition vectorielle en appuyant sur Entrer sur le clavier, sélectionnez les deux points inférieurs de chaque rectangle et alignez-les correctement.

Enfin, dessinez une nouvelle forme à l'aide du Vecteur outil à nouveau. Ensemble Remplit au noir, éteignez Limites et appliquer Ombres avec le Couleur mis à #FFFFFF à 60% alpha et le Oui et Brouiller mis à 2. Donnez à cette forme un nom de engine lid. Utilisez l'image ci-dessous pour référence.

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

5. Feux de signalisation avant et klaxon

Pour commencer la fabrication des feux de signalisation, passez au Rectangle outil (R) et dessinez un rectangle. Remplissez-le de noir Couleur, éteindre Limites et appliquer Ombres:

  • Couleur: #FFFFFF
  • Alpha: 30%
  • X: 2; Oui: -3; Brouiller: 2; Propagé: 2;
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez un rectangle noir. (Grand aperçu)

Entrer Mode d'édition vectorielle en double-cliquant sur la forme du rectangle (ou en appuyant sur Entrer), sélectionnez le point en haut à droite, déplacez-le vers la gauche 15px en utilisant le flèche sur le clavier et réglez le Rayon à 9px. presse Entrer encore pour sortir Mode d'édition vectorielle.

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

Dupliquer (Cmd + ) cette forme, désactivez Ombres, et ajoutez un Gradient linéaire remplir; utilisation #ECECEC pour le premier arrêt de couleur et #7F7F7F pour le dernier arrêt de couleur.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquez la forme et appliquez un dégradé linéaire. (Grand aperçu)

Déplacer cette forme 2px vers la gauche à l'aide de la touche fléchée gauche du clavier, puis entrez Mode d'édition vectorielle (double-cliquez sur la forme), sélectionnez les deux points supérieurs et poussez-les vers le bas en 2px.

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

Dupliquer cette forme (Cmd + ), changez la couleur de Gradient linéaire à Couleur unie et choisir tout la couleur que vous voulez. J'utiliserai du jaune, mais ce n'est que temporaire. Ensuite, double-cliquez sur la forme pour entrer Mode d'édition vectorielle, sélectionnez les deux premiers points et déplacez-les vers le bas 3px, sélectionnez les deux points du bas et déplacez-les vers le haut 3px, sélectionnez les deux points de droite et déplacez-les vers la gauche 3px, et enfin sélectionnez le point en bas à droite et déplacez-le vers la gauche 3px de sorte que le bord droit devient parallèle au bord droit de la forme ci-dessous.

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

Nous devons diviser cette forme en deux parties. Une forme sera utilisée pour l'espace pour le klaxon et l'autre pour le clignotant. Rendons les choses simples, sans opérations booléennes sophistiquées: dupliquez la forme, nommez l'original horn space et la copie turn-signal, puis masquez le turn-signal forme car nous l'utiliserons plus tard.

Nous devons d'abord modifier le horn space forme. Sélectionnez la forme, entrez Mode d'édition vectorielle, sélectionnez le point en haut à droite, définissez Rayon retour à 0 (en utilisant le Inspecteur panneau à droite), déplacez ce point vers la droite jusqu'à ce qu'il soit aligné avec le point en bas à droite (une ligne rouge verticale apparaîtra), puis sélectionnez les deux points sur la droite et déplacez-les vers la gauche pour créer une petite forme que nous utilisera pour la corne. Utilisez l'image ci-dessous comme référence.

Pointe: Tenir Décalage tout en faisant glisser les points pour conserver une trajectoire rectiligne.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez la forme «espace corne». (Grand aperçu)

Ensuite, démasquer turn-signal, double-cliquez dessus pour entrer Mode d'édition vectorielle, sélectionnez les deux points sur la gauche et faites-les glisser vers la droite jusqu'à ce qu'il y ait un petit espace entre les formes.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez la forme de «clignotant». (Grand aperçu)

Retour à la horn space forme. Double-cliquez pour entrer Mode d'édition vectorielle, tenir Décalage et cliquez sur le segment de droite pour ajouter un point exactement au milieu. Maintenant, double-cliquez sur ce point nouvellement ajouté pour le transformer en un Miroir type de point et en utilisant le flèche sur le clavier déplacez-le 4px à gauche. Ensuite, sélectionnez le point en bas à droite et déplacez-le 2px à gauche.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Modifiez la forme de l’espace de la corne. (Grand aperçu)

Nous modifierons le turn-signal d'une manière similaire. Sélectionnez le turn-signal forme, presse Entrer accéder Mode d'édition vectorielle, ajoutez un point au milieu exact du segment gauche, transformez-le en Miroir tapez à l'aide du Inspecteur panneau, et poussez-le 3px vers la gauche à l'aide de la touche fléchée gauche du clavier.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Modifiez la forme du «clignotant». (Grand aperçu)

klaxon

Commençons par terminer le klaxon. Sélectionnez le horn space façonner et appliquer un Gradient linéaire – utilisation #1D1D1D pour l'arrêt de couleur supérieur et #D0D0D0 pour la butée de couleur inférieure, puis faites glisser la butée supérieure vers la droite et la butée inférieure vers la gauche pour ajuster l'angle du dégradé.

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

Maintenant, dupliquez cette forme (Cmd + ), réglez Couleur sur Couleur unie et réglé sur #131313, basculer vers Mode d'édition vectorielle, sélectionnez les deux points de gauche et faites-les glisser un peu vers la droite.

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

Sélectionnez le point en haut à gauche, poussez-le un peu vers la droite, ajoutez un point au milieu du segment de gauche, transformez-le en un Miroir pointez et déplacez-le 2px à gauche.

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

Ajoutons une grille sur l’espace de la corne.

Ramasse le Rectangle outil (R) et créez un petit rectangle sur l'espace de la corne, avec une hauteur de 2px, avec le Remplit mis à #9A9A9A et le Limites éteindre. Dupliquez-le, changez la hauteur en 1px, changez la couleur en #000000, déplacez-le vers le bas pour qu'il soit sous le rectangle gris, passez à Mode d'édition vectorielle, sélectionnez le point en bas à gauche et déplacez-le 2px à droite. Sélectionnez les deux formes et placez-les dans un groupe (Cmd + g). Nous utiliserons cet élément pour construire la grille. Donnez-lui un nom de grille element.

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

Dupliquer ce groupe et le déplacer 7px et 2px à droite, puis dupliquez-le à nouveau et poussez-le 7px et 3px droite.

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

Notre calandre s'étend maintenant passé les horn space, nous devons donc y remédier. Sélectionnez tous les éléments qui font partie de la corne et effectuez un Masque opération de sorte qu'aucun des éléments créés ne sort de l'espace de la corne.

Sketch placera automatiquement le résultat dans un groupe. Donnez à ce groupe résultant le nom de horn.

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

Clignotant

Sélectionnez le turn-signal forme et ajouter un Gradient linéaire remplir. Définissez le dégradé sur une position horizontale avec la flèche pointant vers la droite dans la boîte de dialogue des couleurs et utilisez les couleurs suivantes:

  1. #FFA137
  2. #B23821
  3. #B23821
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Ajoutez un dégradé linéaire horizontal. (Grand aperçu)

Ajouter un Ombres intérieures effet avec les propriétés suivantes:

  • Couleur: #000000
  • Alpha: 40%
  • X: 0; Y: 0; Brouiller: 5; Propagé: 0

Et appliquez un Ombres effet:

  • Couleur: #FFFFFF
  • Alpha: 50%
  • X: 0; Y: 0; Brouiller: 2; Propagé: 0

Il est temps d’ajouter les ampoules. Tout d'abord, utilisez le Outil ovale (O) pour dessiner un cercle comme sur l'image ci-dessous. Éteindre Limites, ensemble Remplit Opacité à 0% et appliquer Ombres intérieures:

  • Couleur: #000000
  • Alpha: 12%
  • X: -9; Y: 0; Brouiller: 9; Propagé: 0
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez la première forme d'ampoule. (Grand aperçu)

Ensuite, dessinez un petit rectangle avec le Rectangle outil (R) et utilise Rayon (coins ronds) dans le Inspecteur panneau pour créer un rectangle arrondi qui servira d'ampoule dans notre illustration de voiture. Éteindre Limites, Et mettre Remplit à Gradient linéaire:

  1. #C06D25
  2. #DE8D55
  3. #BC4E08
  4. #A64A15
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Continuez à peaufiner l'ampoule. (Grand aperçu)

Enfin, sélectionnez les deux – le cercle et le rectangle arrondi – et effectuez un Masque opération pour placer le rectangle à l'intérieur du cercle. Nommez le groupe résultant light1.

Pointe: L'esquisse peut désactiver les ombres intérieures sur la forme de masquage (dans ce cas, light1) lors de l'exécution d'une opération de masque, sélectionnez donc la forme de masquage et cochez. Si les ombres intérieures sont désactivées, réactivez-les à l'aide du panneau Inspecteur. C'est une bonne idée de vérifier cela à chaque fois lors de l'exécution d'une opération de masque.

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

Nous ajouterons une deuxième ampoule de la même manière. Tracez un cercle, éteignez Limites, ensemble Remplit Opacité à 0% et ajouter Ombres intérieures:

  • Couleur: #000000
  • Alpha: 18%
  • X: 0; Y: 12; Brouiller: 5; Propagé: 0
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Créez la deuxième forme d'ampoule. (Grand aperçu)

Dupliquez ce cercle et réduisez-le. Modifier l'existant Ombre intérieure:

  • Couleur: #000000
  • Alpha: 28%
  • X: 0; Y: -5; Brouiller: 5; Propagé: 0

Et ajoutez-en un autre par-dessus:

  • Couleur: #000000
  • Alpha: 50%
  • X: 0; Y: 0; Brouiller: 2; Propagé: 0

Sélectionnez ensuite les deux et regroupez-les dans un light2 groupe.

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

dans le Couches liste de panneaux sélectionner turn-signal, light1 et light2 et appliquer un Masque opération. Par ici light1 et light2 sera à l'intérieur turn-signal. Nommez le groupe résultant turn signal light.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le «clignotant» une fois terminé. (Grand aperçu)

Pour compléter le clignotant, nous devons ajouter une petite vis sur le côté droit de celui-ci. Nous allons construire notre vis en utilisant un cercle, alors prenez le ovale outil (O) et tracez un petit cercle sur la droite, près du bord du signal lumineux. Met le Remplir Opacité à 0%, ensemble Limites Largeur à 1px, position À l'intérieur, et couleur pour #B3B3B3 avec alpha 30%; et ajoutez un Ombres intérieures effet:

  • Couleur: #000000
  • Alpha: 50%
  • X: 0; Y: 2; Brouiller: 2; Propagé: 0
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Commencez à concevoir la petite vis. (Grand aperçu)

Dupliquer ce cercle, le réduire, l'éteindre Limites, ensemble Remplit à #B2CBDF avec Opacité retour à 100% et ajoutez ce qui suit Ombres et Ombres intérieures.

Première Ombre intérieure:

  • Couleur: #FFFFFF
  • Alpha: 80%
  • X: 0; Y: 0; Brouiller: 1; Propagé: 0

Seconde Ombre intérieure:

  • Couleur: #000000
  • Alpha: 50%
  • X: 0; Y: 0; Brouiller: 1; Propagé: 0

Et à la fin, un Ombres effet:

  • Couleur: #000000
  • Alpha: 100%
  • X: 0; Y: 0; Brouiller: 2; Propagé: 0
Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquer, réduire et appliquer les styles. (Grand aperçu)

Nous avons besoin d'un cercle de plus pour la vis, donc encore une fois, dupliquez le cercle précédent, réduisez-le, réglez Remplit à #303030et éteignez Ombres et Ombres intérieures.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dupliquer, réduire et appliquer les styles. Rincez et répétez! (Grand aperçu)

Pointe: À ce stade, vous pouvez vous retrouver avec un 1px cercle qui semble toujours un peu plus grand que ce que vous pouvez voir dans la capture d'écran ci-dessus, et vous pouvez également avoir du mal à l'aligner correctement. Si cela se produit, vérifiez si Pixel Fitting est coché dans Sketch Preferences, et si tel est le cas, il peut être judicieux de le désactiver (au moins temporairement): allez dans Préférences → Calques → décochez la case Pixel Fitting.

Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Préférences d'esquisse → Calques → Ajustement des pixels. (Grand aperçu)

Sélectionnez tous les cercles que nous avons utilisés pour créer la vis et regroupez-les en un screw groupe, puis déplacez ce groupe résultant dans le turn signal light groupe au sommet.

Il est maintenant temps d’utiliser le Créer un symbole fonction dans Sketch et créez un nouveau symbole à partir de screw groupe. Plus tard, nous pourrions utiliser ce symbole dans notre illustration autant de fois que nécessaire.

Pointe: Des symboles sont créés pour les éléments que vous prévoyez de réutiliser. Lorsque vous les utilisez correctement, les symboles peuvent devenir une fonctionnalité très puissante; ils peuvent accélérer votre flux de travail en vous donnant un moyen d'enregistrer et de réutiliser des éléments communs dans vos illustrations et conceptions. Lorsque vous apportez des modifications à un symbole, ces modifications seront automatiquement appliquées à toutes les instances de ce symbole dans vos conceptions.

Pour créer un symbole, sélectionnez le screw groupe dans le Couches liste de panneaux, cliquez dessus avec le bouton droit de la souris et choisissez Créer un symbole du menu. La boite de dialogue Créer un nouveau symbole apparaîtra; donnez un nom au symbole (screw dans ce cas) et cliquez sur D'accord.

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

Il y a encore un petit détail à ajouter. Effectuez un zoom avant assez près (c'est-à-dire 3200%) et dessinez un petit rectangle. Éteindre Limites and set Fills à #131313.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create one more detail. (Large preview)

6. Tail Light

We are going to build the tail lights the same way as we did in the previous step. Let’s quickly go through this step.

Draw the rectangle. Fill it with black color, turn off Borders and apply Shadows:

  • Couleur: #FFFFFF
  • Alpha: 30%
  • X: -2; Oui: -3; Blur: 2; Propagé: 2;

Entrer Vector Editing mode, move the top left corner 15px to the right and set Rayon à 9px.

Screenshot of the steps described in the previous paragraph of the tutorial.
Draw the tail light rectangle at the rear end of the car body. (Large preview)

Duplicate the rectangle, turn off Shadows et ajoutez un Linear Gradient fill; utilisation #ECECEC for the first color stop and #7F7F7F for the last color stop. Then, move it 2px to the right, enter Vector Editing mode, select the top two points and push them down 2px.

Screenshot of the steps described in the previous paragraph of the tutorial.
Duplicate, apply the styles, and modify. (Large preview)

Duplicate this shape (Cmd + ), change Color from Linear Gradient à Solid Color and pick any color you want. Next, switch to Vector Editing mode, select the top two points and move them down 3px, select the bottom two points and move them up 3px, select the left two points and move them to the right 3px, and finally select the bottom left point and move it to the left 3px so the right edge becomes parallel with the right edge of the shape below.

Screenshot of the steps described in the previous paragraph of the tutorial.
Duplicate again, apply the styles, and move the points. (Large preview)

Now, change Fills à Linear Gradient. Set the gradient to a horizontal position with the right-pointing arrow in the color dialog and use the following colors:

  1. #5D1720
  2. #621822
  3. #662423
  4. #B04643
  5. #C25F56
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply a horizontal Linear Gradient. (Large preview)

Ajouter un Inner Shadows effect with the following properties:

  • Couleur: #000000
  • Alpha: 50%
  • X: 0; Y: 0; Blur: 5; Propagé: 0

And apply a Shadows effect:

  • Couleur: #FFFFFF
  • Alpha: 50%
  • X: 0; Y: 0; Blur: 2; Propagé: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Add the effects. (Large preview)

Let’s now move to the design of the tail light’s light bulbs.

Utilisez le Rectangle tool (R) to draw a rectangle like on the image below. Turn off Borders, set Fills Opacity à 0% and apply Inner Shadows:

  • Couleur: #000000
  • Alpha: 40%
  • X: -2; Y: 0; Blur: 5; Propagé: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Draw a rectangle and apply the layer styles. (Large preview)

Then, draw a small rectangle with the Rectangle tool (R) and use Radius (Round Corners) dans le Inspector panel to create a rounded rectangle that will serve the purpose of a light bulb. Turn off Borders, and set Fills à Linear Gradient:

  1. #B75D61
  2. #6B2224
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the first light bulb. (Large preview)

Finally, select both rectangles and perform a Masque operation to place the rounded rectangle inside the other rectangle. Name the resulting group tail-light1.

Pointe: Again, remember that Sketch may turn off Inner Shadows on the masking shape while performing a Mask operation, so select the masking shape and check. If Inner Shadows are turned off, turn them back on using the Inspector panel.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘tail-light1’ is ready. (Large preview)

Draw a rectangle, turn off Borders, set Fills Opacity à 0% et ajouter Shadows:

  • Couleur: #000000
  • Alpha: 30%
  • X: -2; Y: 0; Blur: 2; Propagé: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Create another rectangle. (Large preview)

Draw a small circle, turn off Borders, set Fills Opacity à 0% and apply the following Inner Shadows.

Première Inner Shadow:

  • Couleur: #000000
  • Alpha: 40%
  • X: 0; Y: -2; Blur: 5; Propagé: 0

Seconde Inner Shadow:

  • Couleur: #000000
  • Alpha: 30%
  • X: 0; Y: 0; Blur: 5; Propagé: 0
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the other light bulb for the tail light. (Large preview)

Select the rectangle and circle that we’ve just created and place them inside the group (Cmd + G) tail-light2.

Finish this step by adding the screw symbol instance. Aller à InsérerDocument, choose screw, click over the tail-light2 to insert the symbol and then position it to the correct spot. Use the image below as a reference.

Screenshot of the steps described in the previous paragraph of the tutorial.
It’s time to save some time: insert the ‘screw’ symbol which we created earlier. (Large preview)

Let’s take a look at the bigger picture and check what we did so far!

Final image 1/3: The Porsche 911 car should look very similarly to this now.
Final image 1/3: The Porsche 911 car should look very similarly to this now. (Large preview)

Conclusion

Bon travail! The main body of the car is now ready; we have the door shape, the lids, the front turn light and the tale lights.

In the next part of the tutorial, we’ll continue with the windows, bumpers, headlights, the interior, and a few other elements of the car. Restez à l'écoute!

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 *