Fermer

juillet 31, 2020

Comment créer une Porsche 911 avec croquis (partie 2)


À propos de l'auteur

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

Dans la Partie 1 de ce didacticiel, Nikola Lazarević a expliqué comment créer et modifier la carrosserie d'une voiture dans Sketch, y compris les feux de signalisation avant et les feux arrière. Dans cette partie, il continue avec la conception des vitres, des pare-chocs, des phares, de l'intérieur et de quelques autres éléments de la voiture.

Êtes-vous prêt à pousser Sketch à ses limites une fois de plus? Comme indiqué dans la partie précédente ce tutoriel est davantage destiné aux illustrateurs expérimentés, mais si vous êtes nouveau dans Sketch, vous devriez également pouvoir en profiter puisque toutes les étapes sont expliquées en détail.

Après avoir terminé les feux arrière continuons avec la conception des vitres de la voiture.

7. Joints en caoutchouc autour des fenêtres

Dans cette étape, nous ajouterons des joints en caoutchouc autour des fenêtres. Commencez d'abord par la fenêtre latérale. Passez à l'outil Vecteur ( V ) et dessinez une forme autour de la vitre latérale, comme sur l'image ci-dessous.

Note : Avant de continuer, rappelez-vous que nous dessinons toujours à l'intérieur du groupe carrosserie !

 Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Dessinez une forme de joint en caoutchouc autour de la fenêtre latérale . ( Grand aperçu )

Désactivez Bordures et réglez Remplissages sur # 000000 et ajoutez un Ombres ] effet:

  • Couleur: #FFFFFF
  • Alpha: 90%
  • X: 0 ; Y: 0 ; Flou: 3 ; Spread: 1
 Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le joint en caoutchouc autour de la fenêtre latérale est maintenant terminé. ( Grand aperçu )

Ensuite, ajoutons un joint en caoutchouc autour du pare-brise avant. Dessinez une forme autour de la vitre avant, désactivez Bordures réglez Couleur sur # 000000 et appliquez Ombres :

  • Couleur: #FFFFFF
  • Alpha: 90%
  • X: 0 ; Y: 0 ; Flou: 3 ; Spread: 1
 Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
Le joint en caoutchouc du pare-brise avant. ( Grand aperçu )

Maintenant, ajoutons une garniture sur le dessus du joint en caoutchouc. Pour ce faire, dupliquez la forme du sceau, désactivez Remplissages et Ombres activez Bordures réglez Couleur sur # E0E0E0 position de la frontière à Intérieur et Largeur à 1,5px . Double-cliquez sur la forme pour entrer dans le mode d'édition vecteur puis sélectionnez et déplacez les points jusqu'à ce que vous ayez quelque chose comme sur l'image ci-dessous. Soyez patient, cela peut prendre un certain temps!

Note : Alors que d'habitude, je suggère d'éviter les demi-pixels dans vos illustrations vectorielles autant que possible, dans certains cas, ceux-ci pourraient bien fonctionner. Après quelques essais et erreurs en travaillant sur la garniture au-dessus du joint en caoutchouc du pare-brise, j'ai découvert que 1,5px donne les meilleurs résultats visuels.

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

Astuce : Changez les types de points selon vos besoins tout en travaillant sur cette forme.

À la fin de cette étape, nous avons besoin également pour ajouter un joint autour du pare-brise arrière. Dessinez une forme autour, désactivez Bordure, réglez Remplissages sur # 000000 et appliquez Ombres avec les mêmes paramètres que nous l'avons fait pour les sceaux précédents. [19659042] Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel. « />

Le joint en caoutchouc du pare-brise arrière. ( Grand aperçu )

8. Poignée de porte

Prenez l'outil Ovale ( O ) et dessinez une ellipse. Réglez la couleur Bordure sur # 949494 positionnez-la sur Centre avec une Largeur de 1px . Pour les Fills utilisez un Linear Gradient :

  1. # 787878
  2. # C9C9C9
  3. # A5A5A5

Et ajoutez Inner Shadows : [19659012] Couleur: # 000000

  • Alpha: 50%
  • X: 0 ; Y: 2 ; Flou: 2 ; Spread: 0
  •  Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Dessinez une ellipse pour la poignée de porte. ( Grand aperçu )

    Créez un rectangle à gauche et à droite de l'ellipse en utilisant l'outil Rectangle ( R ). Arrondissez les coins extérieurs en utilisant la propriété Radius dans le panneau Inspector . Désactivez Borders et réglez Fills sur # 33 3 333 .

     Capture d'écran des étapes décrites dans le paragraphe précédent du
    Créez les rectangles à gauche et à droite de l'ellipse de porte. ( Grand aperçu )

    Nous allons maintenant utiliser Inner Shadows et Shadows pour le faire paraître légèrement surélevé.

    Sélectionnez le rectangle de gauche et ajoutez un light Inner Shadows avec les propriétés suivantes:

    • Couleur: #FFFFFF
    • Alpha: 20%
    • X: 2 ; Y: -2 ; Flou: 1 ; Étalement: 0

    Ensuite, appliquez un effet Ombres :

    • Couleur: # 000000
    • Alpha: 50%
    • X: 0 ; Y: 0 ; Flou: 2 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Appliquez les effets au rectangle de gauche. ( Grand aperçu )

    Ensuite, sélectionnez le rectangle de droite et appliquez l'effet Ombres intérieures :

    • Couleur: #FFFFFF
    • Alpha: 20 %
    • X: 2 ; Y: -2 ; Flou: 1 ; Étalement: 0

    Appliquer un effet Ombres :

    • Couleur: # 000000
    • Alpha: 50%
    • X: [19659013] 0 ; Y: 0 ; Flou: 2 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Appliquez les effets au rectangle de droite. Toujours pas là mais on se rapproche! ( Grand aperçu )

    Passons à la manipulation. Nous allons construire notre poignée de trois formes.

    Tout d'abord, créez deux rectangles en utilisant l'outil Rectangle ( R ) et arrondissez les côtés à l'aide du ] Jeu de propriétés Radius du panneau Inspector .

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

    Ensuite, utilisez l'outil Vector ( V ) pour dessiner une forme entre les rectangles.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Avec l'outil Vecteur, dessinez une forme entre ces deux rectangles. ( Grand aperçu )

    Sélectionnez maintenant les rectangles et la forme que nous venons de créer et effectuez une opération Union (à partir de la barre d'outils Sketch supérieure) pour créer un objet. Nommez cet objet handleshape . Changez la Couleur en # E3E3E3 et ajoutez un effet Inner Shadows :

    • Couleur: # 000000
    • Alpha: 50 %
    • X: 0 ; Y: -2 ; Flou: 5 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Créez l'objet et appliquez les styles. ( Grand aperçu )

    Ajoutons une ombre subtile à la poignée. Zoomez et dessinez une forme comme sur l'image ci-dessous. Ne vous inquiétez pas si la partie inférieure sort de la zone de la poignée, nous corrigerons cela plus tard avec une opération de masquage. Désactivez Bordures et définissez Remplissages sur # 3D3D3D .

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    Ajouter une ombre à la poignée de porte. ( Grand aperçu )

    Insérons l’ombre à l’intérieur de la poignée. Sélectionnez la poignée et la forme de l'ombre, puis cliquez sur Masque dans la barre d'outils supérieure. Le résultat de cette opération de masquage sera automatiquement placé dans un nouveau groupe dans la liste du panneau Calques . Changez le nom de ce groupe en handle .

    Astuce : * N'oubliez pas de vérifier si Sketch est désactivé Inner Shadows pour le calque de masquage. Si tel est le cas, réactivez-les. *

     Capture d’écran des étapes décrites dans le paragraphe précédent du didacticiel.
    Le groupe ‘handle’ est terminé. ( Grand aperçu )

    Ajoutons maintenant un verrou à clé à la poignée de porte.

    Tracez un petit cercle. Ajoutez un Centre Bordure avec une Largeur de 1px et la Couleur définie sur # 000000 . Remplacez Remplit par Gradient linéaire et ajustez le gradient avec les paramètres suivants:

    1. # 888888
    2. #DFDF DF
    3. #CACACA

    Appliquer un effet Ombre avec la Couleur réglée sur # 000000 à 90% alpha, Flou à 3 les positions X et Y et Spread réglé sur 0 .

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    Créez un verrou à clé. ( Grand aperçu )

    Créez un trou de serrure en dessinant un petit rectangle noir sans Bordures au milieu du cercle. Regroupez les deux formes (cercle et rectangle) dans un groupe serrure à clé .

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    Créez le trou de serrure. ( Grand aperçu )

    Il ne reste plus qu'à créer l'ombre de la poignée qui doit être placée à l'intérieur de l'ellipse (voir la capture d'écran suivante). Recherchez l'objet handleshape dans la liste du panneau Calques cliquez sur le curseur devant le nom du calque pour révéler son contenu (les formes), sélectionnez le pont entre les rectangles et appuyez sur Cmd + C pour copier cette forme.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Sélectionnez le pont entre les rectangles puis copiez-le. ( Grand aperçu )

    Sélectionnez l'ellipse qui se trouve sous la poignée, collez ( Cmd + V ) sur la forme que nous venons de copier, définissez la Couleur sur # 505050 appuyez dessus 2px et appliquez un Flou gaussien avec un Montant de 2 . Sélectionnez ensuite cette forme avec l'ellipse et regroupez-les ( Cmd + G ).

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Coller , déplacez, appliquez les styles, puis regroupez. ( Grand aperçu )

    Dans ce groupe, sélectionnez l'ellipse, faites un clic droit dessus et choisissez Masque dans le menu, pour vous assurer que l'ombre restera à l'intérieur de l'ellipse.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    L'ombre de la poignée est maintenant terminée. ( Grand aperçu )

    Sélectionnez tous les éléments que nous avons créés à cette étape et placez-les dans un groupe nommé poignée de porte .

    9. Pare-chocs

    Créons d’abord le pare-chocs avant. Passez à l'outil Vecteur ( V ) et dessinez la forme. Remplacez Remplissages Opacité par 0% assurez-vous que Bordures sont désactivées et appliquez l'effet clair et foncé Ombres intérieures .

    Ajoutez d'abord un effet de lumière Inner Shadows avec les propriétés suivantes:

    • Couleur: #FFFFFF
    • Alpha: 50%
    • X: 0 ; Y: 5 ; Flou: 6 ; Étalement: 0

    Ensuite, ajoutez un effet sombre Inner Shadows :

    • Couleur: # 000000
    • Alpha: 50%
    • X: -2 ; Y: -5 ; Flou: 6 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Le pare-chocs avant. ( Grand aperçu )

    Faites de même pour le pare-chocs arrière, mais utilisez plutôt ces paramètres pour l'effet sombre Inner Shadow :

    • Couleur: # 000000 [19659014] Alpha: 50%
    • X: 3 ; Y: -5 ; Flou: 6 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Le pare-chocs arrière. ( Grand aperçu )

    Nommez ces formes pare-chocs avant et pare-chocs arrière .

    Passons à l'élément suivant du boîtier. Nous allons maintenant créer la décoration sur le pare-chocs avant. Prenez l'outil Rectangle arrondi ( U ) et dessinez un rectangle arrondi ( 174px par 14px ). Assurez-vous qu'il ne fait pas partie du groupe de carrosserie et donnez-lui le nom base pare-chocs déco .

    Désactivez Bordures puis cliquez sur Remplissages choisissez Linear Gradient et ajoutez un dégradé. Utilisez # E4E4E4 avec 100% alpha pour le premier arrêt de couleur et # 858585 avec alpha 100% pour le dernier arrêt de couleur. Maintenant, ajoutez un autre point avec un clic sur l'axe du dégradé dans la boîte de dialogue des couleurs, et déplacez-le exactement au milieu en appuyant sur 5 sur le clavier. Donnez-lui 100% alpha et assurez-vous que sa couleur est # E4E4E4 . Ajoutez-en un autre à droite et déplacez-le également vers le centre. Changez la couleur de cette butée en # 858585 avec 100% alpha.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    L'élément déco du pare-chocs avant . ( Grand aperçu )

    Dupliquer la forme ( Cmd + D ), changer le nom en pare-chocs avant déco shadow et utiliser la liste du panneau Couches faites-la glisser dans le groupe carrosserie juste au-dessus de la forme du pare-chocs avant et ajoutez deux effets Ombres . [19659005] Ajoutez le premier effet Ombres avec les propriétés suivantes:

    • Couleur: # 000000
    • Alpha: 80%
    • X: 0 ; Y: 2 ; Flou: 2 ; Étalement: 2

    Ensuite, ajoutez le deuxième effet Ombres :

    • Couleur: # 000000
    • Alpha: 80%
    • X : 0 ; Y: -2 ; Flou: 2 ; Spread: 1
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    L'ombre de la «déco pare-chocs avant». ( Grand aperçu )

    Ajoutons un élément en caoutchouc au milieu de la déco du pare-chocs. Sélectionnez la base pare-chocs déco dupliquez-la et donnez à cette forme le nom de caoutchouc . Remplacez Remplissages par # 303030 Couleur unie et remplacez la Hauteur par la demi-taille puis alignez-la sur la au milieu avec base pare-chocs déco en utilisant le panneau Inspector .

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    La forme en caoutchouc du pare-chocs avant. ( Grand aperçu )

    Ajoutez les effets suivants à la forme du caoutchouc .

    D'abord, une lumière Inner Shadow :

    • Couleur: [19659013] #FFFFFF
    • Alpha: 30%
    • X: 0 ; Y: 2 ; Flou: 2 ; Étalement: 0

    Ensuite, une ombre Inner Shadow :

    • Couleur: # 000000
    • Alpha: 100%
    • X: 0 ; Y: -4 ; Flou: 1 ; Étalement: 0

    Après cela, une ombre sombre :

    • Couleur: # 000000
    • Alpha: 100%
    • X: 0 ; Y: -1 ; Flou: 2 ; Étalement: 0

    Et enfin, une lumière Ombre :

    • Couleur: #FFFFFF
    • Alpha: 50%
    • X: 0 ; Y: 2 ; Flou: 2 ; Spread: 0
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Appliquez tous les styles à l'élément "caoutchouc" du pare-chocs avant. ( Grand aperçu )

    Enfin, sélectionnez la base pare-chocs déco et les formes en caoutchouc et effectuez une opération Masque de façon à ce qu'aucune des ombres en caoutchouc sortent de la base pare-chocs déco . Nommez le groupe résultant pare-chocs avant déco .

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    La forme en caoutchouc du pare-chocs avant est maintenant terminée. ( Grand aperçu )

    Maintenant, en utilisant la même méthode que celle expliquée ci-dessus, créez l'élément de déco du pare-chocs arrière.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Quand c'est prêt, la déco du pare-chocs arrière devrait ressembler à ça. ( Grand aperçu )

    Passez à l'outil Vector ( V ) et dessinez une forme de base pour la protection de pare-chocs arrière. Ajoutez un Linear Gradient avec les propriétés suivantes:

    1. #EEEEEE
    2. # C9C9C9
    3. # 939393
    4. # 6C6C6C
     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel
    Créez la protection de pare-chocs arrière. ( Grand aperçu )

    Dupliquez cette forme, placez-la derrière (faites un clic droit sur la forme et choisissez Reculer dans le menu contextuel), appliquez # 2D2D2D [19659226] Couleur unie poussez-le de quelques pixels vers la droite et redimensionnez un peu la hauteur à l'aide des poignées de redimensionnement . Nommez cette forme tampon en caoutchouc . Ajoutez un effet Ombres intérieures avec la Couleur réglée sur #FFFFFF à 30% alpha. Réglez Y et Flou sur 2 et X et Spread sur 0 .

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

    Sélectionnez à nouveau la forme du haut, dupliquez-la une fois de plus et utilisez la touche pour la déplacer de quelques pixels vers la gauche. Modifiez le Dégradé linéaire (supprimez les deux points du milieu, changez les couleurs des points du haut et du bas en # 8E8E8E et #DEDEDE puis déplacez le point du haut vers le bas un peu). Enfin, appliquez un effet Flou gaussien avec le Montant de 0,6 .

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Continuez à travailler sur la protection de pare-chocs arrière. ( Grand aperçu )

    Sélectionnez cette forme et la forme sous celle-ci et effectuez une opération Masque . Nommez le groupe résultant base de garde de pare-chocs puis sélectionnez le groupe résultant et la forme du tampon en caoutchouc et regroupez-les en un groupe garde de pare-chocs arrière . Placez ce groupe juste en dessous du groupe carrosserie dans la liste du panneau Couches .

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    La protection de pare-chocs arrière - maintenant terminé. ( Grand aperçu )

    À l'aide de l'outil Rectangle créez deux rectangles comme sur l'image ci-dessous (utilisez Rayon dans l'inspecteur panneau pour contrôler la rondeur des points). Sélectionnez les deux formes et pour créer un objet, dans la barre d'outils supérieure de Sketch, effectuez une opération Union . Déplacez ce nouvel objet à l'intérieur du groupe pare-chocs arrière directement dans le groupe base de pare-chocs en haut. Remplacez Couleur par # 000000 désactivez Bordures et ajoutez Gaussian Flur avec le Amount de 1 .

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Créez l'ombre du pare-chocs à l'intérieur de la protection de pare-chocs. ( Grand aperçu )

    Voici un aperçu de ce que nous avons fait jusqu'à présent.

     L'illustration de la Porsche 911 & mdash; y arriver petit à petit ...
    La Porsche 911 - y arriver petit à petit ... ( Grand aperçu )

    10. Pare-brise

    Vitres latérales

    Rappelez-vous ces vitre latérale 1 et vitre latérale 2 copies que nous avons créées au début du tutoriel, dans la partie 1?

    Eh bien il est temps de les utiliser! Recherchez ces copies dans la liste du panneau Calques et décochez-les. Assurez-vous que Remplissages est désactivé et ajoutez 5px Largeur Bordures avec une couleur # 72BD20 positionnée À l'intérieur

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    Il est temps de décocher les copies 'side window 1' et 'side window 2'! ( Grand aperçu )

    Au début, nous allons créer les cadres de fenêtre en utilisant ces formes.

    Donc, d'abord, nous devrons convertir une bordure de forme en une forme elle-même. Nous devons appliquer Inner Shadows aux cadres de fenêtre car il n'y a pas d'option pour appliquer Inner Shadows à Borders .

    Pour délimiter les bordures, sélectionnez les deux formes et allez à Calque Convertir en contours (ou appuyez sur Alt + Cmd + O sur le clavier)

    Note : La ​​conversion des formes en contours a transformé chaque forme en deux couches de formes combinées séparées. En effet, un contour de contour est un tracé combiné qui existe de deux formes:

    • l'une qui détermine les limites extérieures, et
    • l'autre détermine les limites intérieures, créant ainsi l'apparence d'un contour.
     Capture d'écran des étapes décrit dans le paragraphe précédent du tutoriel.
    Les contours du contour. ( Grand aperçu )

    Sélectionnez et copiez ( Cmd + C ) les formes intérieures, puis désélectionnez les formes en appuyant sur Esc sur le clavier et enfin collez-les ( Cmd + V ) (veuillez noter que Sketch placera les copies dessus), car nous utiliserons ces formes comme pare-brise. Donnez-leur les noms de pare-brise latéral 1 et pare-brise latéral 2 et cachez-les pour le moment.

    Continuons avec les cadres de fenêtre. Dessinez deux formes à l'aide de l'outil Vecteur ( V ), sélectionnez ces formes nouvellement créées et la forme fenêtre latérale 1 et effectuez une Union opération pour créer une forme. Remplacez Remplit par #DCDCDC et ajoutez Inner Shadows avec la Couleur définie sur # 000000 avec 50% Alpha et Blur réglés sur 2 .

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    La 'fenêtre latérale 1'. ( Grand aperçu )

    Appliquez les mêmes styles - Remplissages et Ombres intérieures - à la fenêtre latérale 2 .

    Démontez les pare-brise latéraux et placez-les sous le groupe carrosserie dans la liste des panneaux Couches .

    Astuce : Puisque les pare-brise sont essentiellement transparent Je vous suggère d'ajouter temporairement une couleur d'arrière-plan au plan de travail, afin que vous puissiez réellement voir ce que nous allons faire. Pour ce faire, sélectionnez le plan de travail, puis activez «Couleur d'arrière-plan» dans le panneau Inspecteur, puis réglez «Couleur» sur quelque chose comme # 434343 .

    Revenons maintenant aux pare-brise latéraux: sélectionnez le premier (celui de gauche), désactivez Bordures et réglez Remplissages sur Dégradé linéaire :

    1. Couleur : #FFFFFF Alpha : 0%
    2. Couleur : #FFFFFF Alpha : 22% [19659014] Couleur : #FFFFFF Alpha : 50%
    3. Couleur : #FFFFFF Alpha : 27%
    4. Couleur : #FFFFFF Alpha : 30%
     Capture d'écran des étapes décrites dans le précédent paragraphe du tutoriel.
    Le «pare-brise latéral 1». ( Grand aperçu )

    Faites de même pour l'autre pare-brise.

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    Le «pare-brise latéral 2». ( Grand aperçu )

    Astuce : Vous pouvez utiliser la fonction Sketch Copy Style du premier pare-brise (cliquez avec le bouton droit de la souris et choisissez "Copier Style ') puis collez le style sur le deuxième pare-brise (cliquez avec le bouton droit de la souris puis choisissez' Coller le style '). Après cela, vous n'aurez plus qu'à déplacer légèrement les points pour ajuster le dégradé afin qu'il corresponde à celui du précédent, car les formes ne sont pas de la même hauteur.

    Pare-brise avant

    Passez à l'outil Vecteur et dessinez une forme pour le pare-brise avant. Appliquez un Dégradé linéaire avec les paramètres suivants:

    1. Couleur : # F3F2F0 Alpha : 40%
    2. Couleur : #FFFFFF Alpha : 50%
    3. Couleur : # F3F2F0 Alpha : 20%
    4. Couleur : # F3F2F0 Alpha : 10%

    Puis ajoutez Inner Shadows avec le Couleur réglé sur # 000000 avec 10% Alpha. Réglez la position Y sur 2 et Flou sur 8 . Nommez-le pare-brise avant .

     Capture d'écran des étapes décrites dans le paragraphe précédent du didacticiel.
    L'élément «pare-brise avant». ( Grand aperçu )

    Pare-brise arrière

    Dessinez un pare-brise arrière avec l'outil Vector et appliquez le même style ( Linear Gradient et ] Inner Shadows ) comme pour le pare-brise avant.

     Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel.
    L'élément «pare-brise arrière». ( Grand aperçu )

    Nommez cette forme pare-brise arrière puis sélectionnez toutes les formes de pare-brise, regroupez-les dans un groupe pare-brise et assurez-vous que ce groupe se trouve sous le groupe carrosserie dans la liste du panneau Calques .

    Remarque : Vous pouvez maintenant désactiver la couleur d'arrière-plan du plan de travail dans le panneau Inspecteur

    11. Phare

    Pour le phare, passez à l'outil Vector et dessinez la forme qui sera le verre du phare. Use Solid Color #E4E4E4turn off Borders and add Inner Shadows effect:

    • Color: #000000
    • Alpha: 10%
    • X: 5; Y: -2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Let’s create the headlight glass. (Large preview)

    Next, draw a black (#000000) shape over the headlight glass. Duplicate this shape (Cmd + D), push it 1px the the left and apply a Linear Gradient with the following parameters, from top to bottom:

    1. #EEEEEE
    2. #F5F5F5
    3. #828282
    4. #484848
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the next part of the headlight. (Large preview)

    Select all the shapes and group them (Cmd + G) into s headlight group. Then we need to rotate it a bit (by 25 degrees) and place it above the bodywork group.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘headlight’ group is now complete. (Large preview)

    12. Rear Engine Grille

    In this step we will create a grille over the rear engine lid. Once again, pick up the Vector tool (V) and draw a shape. Change Fills to #000000 and add Inner Shadows — for the Color use #FFFFFF with 80% Alpha, and set X position to -2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the grille element. (Large preview)

    Duplicate this shape, move it to the left and down a bit, zoom in close enough, switch to vector editing mode and move the points so they touch the edge of the rear engine lid. Use the image below as a reference.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Start building the engine grille using the grille element. (Large preview)

    Repeat this eight more times to form a grille over the engine lid. Then draw a line using the Line tool (L). For the Color use #CCCCCCset Width to 1px and choose Round cap for the Border ends. Apply black (#000000) Shadows effect with 100% Alpha and Blur of 2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The engine grille is now complete. (Large preview)

    Select all of the grille layers, and place them inside the group rear engine grille.

    13. Side Mirror

    Let’s move on to the other details on the car. The side mirrors!

    Using the Vector tool, create a shape which will be the base for the side mirror, turn off Borders and use Linear Gradient for the Fills:

    1. #E5E5E5
    2. #D5D5D5
    3. #878787
    4. #6A6463

    Then add Inner Shadows:

    • Color: #000000
    • Alpha: 50%
    • X: 2; Y: -2; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Shaping the ‘side mirror base’ shape. (Large preview)

    Name this shape side mirror base.

    Draw another shape, which will be mirror cover, once again turn off Borders and change Fills to Linear Gradient:

    1. #CCCACB
    2. #FEFEFE
    3. #A1A5A4
    4. #4A413F
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘mirror cover base’. (Large preview)

    Give this shape the name of mirror cover base. Duplicate the shape and push it 4px to the left using the key on the keyboard. Change Color to #C4C4C4 and add two Inner Shadows.

    For the first Inner Shadow use:

    • Color: #000000
    • Alpha: 60%
    • X: 5; Y: 0; Blur: 1; Spread: 0

    For the second Inner Shadow use following properties:

    • Color: #000000
    • Alpha: 50%
    • X: -4; Y: 5; Blur: 6; Spread: 0

    Then select both shapes and perform a Mask operation, so the top shape does not extend past the mirror cover (the bottom shape). Name the resulting group mirror cover.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘mirror cover’ group. (Large preview)

    Select side mirror base and add one more Inner Shadows effect, to add shadow from the mirror cover. For the Color use #000000 with 50% Alpha, set X position to -1 and Blur to 1.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add a shadow from the mirror cover. (Large preview)

    We will finish this step by creating a shadow from the side mirror.

    Grab the Vector tool and draw a shape like on the image below. Place it below the side mirror basepush it a bit up so it is really behind it, and add a Linear Gradient for the Fills. For the top stop use #000000 with 40% Alpha and for the bottom stop also use #000000 but with 0% Alpha. Don’t forget to turn off Borders.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create a shadow from the side mirror. (Large preview)

    Name this shape side mirror shadowthen select all shapes created in this step and group them into a side mirror group.

    14. Exhaust Pipe

    It’s time to create the exhaust pipe. First, find in the Layers panel list the floor layer, remember — the one that we’ve created at the beginning of the tutorial in Step 2 — and un-hide it. Switch to the Rectangle tool (R) and draw a rectangle with the Radius set to 2. This rectangle shape will represent the exhaust pipe.

    Turn off Borders and set Fills to a Linear Gradient:

    1. #E2E2E2
    2. #E3E3E3
    3. #A0A0A0
    4. #2C2C2C
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the exhaust pipe shape. (Large preview)

    Duplicate the rectangle, make it smaller in width, switch to the vector editing modeselect the points on the right side and set their Radius to 0then modify the existing Linear Gradient to:

    1. #1E1E1E
    2. #3A3A3A
    3. #2A2A2A
    4. #111111
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw another part of the exhaust pipe. (Large preview)

    Select both rectangles, group them into an exhaust pipe group and place the group just above the rear bumper guard in the Layers panel list.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The exhaust pipe, now finished. (Large preview)

    15. Car Interior

    Select side window 1 and side window 2duplicate them (Cmd + D), change Color to #000000 and turn off the Inner Shadows.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Start working on the car interior. (Large preview)

    Place these duplicates below the rear bumper guard in the Layers panel list, and then, using the arrow keys on the keyboard, shift them 5px down and 2px to the right.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Move behind. (Large preview)

    Draw a shape, which will represent the visible part of the car’s dashboard, turn off Borders and set the Fills to #2A2A2A.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the visible part of the dashboard. (Large preview)

    Next, let’s create the steering wheel.

    Create a rectangle using the Rounded Rectangle tool (U), turn off Borders and change Fills to horizontal Linear Gradient with the following parameters:

    1. #000000
    2. #676767
    3. #292929
    4. #090909

    Then we need to rotate the rectangle -24 degrees and move it to the left a bit.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the steering wheel. (Large preview)

    Now let’s continue with other details of the car interior. Select the Vector tool and create a shape like on the image below. Turn off Bordersset Color to #000000and apply Inner Shadows effect:

    • Color: #FFFFFF
    • Alpha: 30%
    • X: -12; Y: -6; Blur: 8; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue adding elements to the car interior. (Large preview)

    Use the Oval tool (O) to draw a small ellipse. For the Color use #717171 and turn the Borders off.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add another element to the car interior. (Large preview)

    Now let’s create the visible part of the driver’s seat. Create a shape with the Vector tool. Turn off Borders and use a Linear Gradient; for the top color stop use color #6D6D6D and for the bottom #171717. And add an Inner Shadows effect — Color is #000000 with 50% Alpha, X position is 2 and Blur is 7.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the driver’s seat. (Large preview)

    Duplicate this shape, push it 5px to the right and 1px up by using the arrow keys. Then modify the existing Linear Gradient — change the bottom color stop to #000000. And modify the Inner Shadows effect — change the Color to #FFFFFF with 10% Alpha; set X and Y positions to 5and Blur also to 5.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue working on refining the seat’s details. (Large preview)

    Now let’s add stitches to the seat.

    Duplicate this shape, push it 5px to the right and 3px down. Then, turn off Fills and Inner Shadowsbring back Borders and for the Color choose Linear Gradient — for the top color stop use #696969 and for the bottom #000000. Add Shadow effect — for the Color use #000000 with 50% Alpha and set Blur to 2. Then select this shape and the layer below it and perform a Mask operation, so the stitches do not go outside the seat’s boundaries.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add stitches to the driver’s seat. (Large preview)

    Almost ready with the car interior!

    Next, select all layers and groups that we’ve created in this step and that are above the car body and position them just above side window 1 copy and side window 2 copy in the Layers panel list. Add to the selection those two shapes as well (side window 1 copy and side window 2 copy) and create a group (Cmd + G) named interior.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car interior is now complete. (Large preview)

    Let’s take a look at the big picture again.

    Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there!
    Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there! (Large preview)

    It’s not bad, right?

    But, before we conclude this part of the tutorial, let’s add one more small detail to the car body, so pick up the Line tool (L) and draw a line. For the Color use #E5E5E5set Width to 2px and choose Round cap for the Border ends. Then apply Shadows — set Color to #000000 at 80% Alpha, Y position to 2 and Blur to 3. Finally, place this line inside the bodywork group.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car’s body is now finished — one more final detail added. (Large preview)

    Conclusion

    The body of the car is now ready, as well as the windows, bumpers, headlights and taillights, and the interior — dashboard, the steering wheel, and the seat. In the next (and final) part of the tutorial, we’ll create the wheels (rims and tires), and we’ll add all the final touches, including the racing decals on the car’s body.

    Smashing Editorial(mb, ra, yk, il)




    Source link