L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment créer une Porsche 911 avec croquis (partie 1)
Si vous êtes tous les deux un pétrolier (c'est-à-dire un grand amateur de voitures) avec une place spéciale dans votre cœur pour la légendaire Porsche 911, et aussi un fan de la puissante Sketch app 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 pourra être agrandie à n'importe quelle taille sans perte de détails.
Ce didacticiel est davantage destiné aux illustrateurs expérimentés, mais si vous êtes nouveau dans Sketch, vous devriez pouvoir en profiter
Note : Ceci est la première partie de ce didacticiel dans laquelle nous nous concentrerons sur la présentation des principaux «travaux de base» , 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 fond sur la voiture que nous allons fabriquer.
Modèle La 911 est une voiture de sport 2 portes produite par Porsche de 1963 à 1989, date à laquelle elle a été remplacée 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 dans le 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. (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, 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 écrit sur le sujet d'utiliser Sketch pour l'illustration vectorielle avant. 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 ."
Dessinez une voiture!
Pour pouvoir pour 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. [19659019] La dernière illustration de la Porsche 911 que nous allons créer dans ce tutoriel. (<a href=](https://i0.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50607166-7574-4153-bd04-763e3e320b46/porsche-final-sketch-tutorial-part-1.png?ssl=1)
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 portant le même nom, taille: 1920px de large et 1080px de haut.
2. Tracer la voiture avec l'outil Vector
Pour cette étape, nous avons besoin d'une image d'une Porsche e 911 qui servira de référence pour dessiner la voiture dans Sketch.
Téléchargez, copiez et collez l'image dans le plan de travail. Cliquez avec le bouton droit sur l'image de référence dans la liste des calques du panneau Calques et choisissez Verrouiller le calque pour verrouiller le calque avec l'image de référence afin qu'il ne bouge pas accidentellement. [19659005] Astuce : L'autre façon de verrouiller un calque dans Sketch est de survoler le nom du calque tout en appuyant sur Alt et en cliquant sur l'icône de verrouillage.
Nous utiliserons l'outil Vector pour définir 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.
Connaissez vos points et vos poignées de Bézier
Pour chaque point que vous ajoutez avec l'outil Vecteur vous avez le choix entre quatre types de points: droit en miroir déconnecté 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 panneau Inspecteur .
Types de point
1. Straight
L'option «droit» vous donnera un coin droit. Ce type vous permet également d'ajouter un coin Radius via le panneau Inspector sur la droite.
2. Miroir
«Miroir» ajoutera deux poignées Bézier qui se reflètent l'une l'autre pour qu'elles soient toujours parallèles et de même longueur des deux côtés.
3. Déconnecté
Cette option vous donnera deux poignées de Bézier que vous pourrez modifier individuellement. Parfait pour les angles vifs!
4. Asymétrique
«Asymétrique» est presque le même que «miroir», mais il ne maintient que 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 tutoriel suivant de Peter Nowell: « Maîtriser la courbe de Bézier dans Sketch ».
Sélectionnez l'outil Vector en appuyant sur V sur le clavier, faites 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 de quelque distance, cliquez pour ajouter un deuxième point et sans relâcher le bouton de la souris, faites glisser ce point pour créer une courbe et utilisez Bézier pour contrôler le
Astuce : Je vous suggère de donner temporairement à la bordure une couleur vive et une largeur plus épaisse (utilisez le panneau Inspecteur pour les changer) afin que vous puissiez tracer la forme de la voiture plus confortablement
Continuez à faire ceci autour de la forme principale de la voiture, mais excluez 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 l’outil Vector . Une fois que vous êtes prêt à tracer la carrosserie de la voiture, les résultats devraient ressembler à la capture d'écran ci-dessous.
Ensuite, nous devons «découper» les vitres latérales de la carrosserie principale de la voiture. Utilisez l'outil Vecteur pour créer deux formes sur les fenêtres latérales. Nommez les formes fenêtre latérale 1 et fenêtre latérale 2 .
Dupliquez ces deux formes ( Cmd + D ) et cachez 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 une opération Soustraire à partir de la barre d'outils Sketch supérieure. Nommez la forme résultante carrosserie de la voiture .
Ensuite, créez la partie inférieure de la voiture avec l'outil Vector . 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 plancher puis déplacez-la dans le panneau Calques sous la carrosserie .
Il n'y a plus qu'une chose à faire avant de terminer cette étape – dessiner une roue. Sélectionnez l'outil Ovale 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.
Maintenez Shift et Alt pendant que vous faites glisser pour créer un cercle parfait du centre vers l'extérieur. Donnez à cette forme le nom de empattement et assurez-vous que sa position est au-dessus du plancher et au-dessous des couches carrosserie dans les couches ] liste des panneaux.
3. Ajouter de la couleur, des ombres et des reflets à la carrosserie
Ensuite, nous allons nous concentrer sur la carrosserie de la voiture. Pour l'instant, nous pouvons masquer l'image de référence, ainsi que l'empattement et couches de plancher . Ce que j'aime généralement faire à ce stade est de déverrouiller l'image de référence, de la déplacer hors du plan de travail et de la placer au-dessus de (ou à tout autre endroit qui vous convient – en dessous ou sur le côté gauche ou droit de le plan de travail), pour que je puisse toujours l’utiliser comme référence.
Ou bien, vous pouvez déverrouiller l’image de référence, en faire une copie ( Cmd + D ), déplacer le copier en dehors du plan de travail pour pouvoir l'utiliser comme référence et masquer l'image de référence d'origine à l'intérieur du plan de travail.
Astuce : Cliquez sur l'icône en forme d'œil à côté du nom du calque dans le panneau Calques liste pour le cacher. 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électionnez carrosserie décochez Bordures et pour Remplissages Utilisation de la couleur # E9E9E7 .
Astuce : Utilisez F sur le clavier pour activer et désactiver rapidement les remplissages, et utilisez B pour activer ou désactiver rapidement les bordures.
Remarque: Nouveau dans Sketch? Consultez d'abord cette page d'aide Sketch très détaillée sur le travail avec les Fills: « Styling – Fills ».
Ensuite, nous continuerons avec les ombres (les parties les plus sombres de la carrosserie). Utilisez l'outil Vecteur pour dessiner une forme comme sur l'image ci-dessous.
Comme vous pouvez le voir, la forme est plus longue que la carrosserie de la voiture, nous allons donc corriger cela maintenant. Sélectionnez les deux formes ( carrosserie et la forme que nous venons de créer) et effectuez une opération Masque à partir de la barre d'outils supérieure. Sketch placera automatiquement le résultat dans un groupe. Donnez à ce groupe résultant le nom carrosserie .
Sélectionnez à nouveau la forme que nous avons créée, désactivez Bordures réglez la couleur Remplissages sur # E1E1E1 et appliquez un Flou gaussien avec un Montant de 4 .
![Capture d'écran des étapes décrites dans le paragraphe précédent du tutoriel. [19659019] La forme «ombre» lorsqu'elle est prête. (<a href=](https://i0.wp.com/cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1fff6e5d-5dff-4d5a-8cf7-7839ce7880fd/porsche10-sketch-tutorial-part-1.png?ssl=1)
Grand aperçu )Dessinez une autre forme avec l'outil Vecteur . Utilisez l'image ci-dessous comme référence.
Utilisez le panneau Calques pour déplacer cette forme dans la carrosserie du groupe . Désactivez Bordures et appliquez un Dégradé linéaire avec les paramètres suivants:
# E4E4E4# C5C5C5
Appliquez un Flou gaussien avec un Montant de 6 pour adoucir un peu ses bords, et ajoutez un Ombre :
- Couleur:
#FFFFFF - Alpha:
90% - X:
0; Y:-8; Flou:10
Ensuite, pour ajouter une ombre au bas de la carrosserie dessinez une forme à l'aide de l'outil Vector défini Remplit à # 4E4E4E placez-le dans le groupe carrosserie et appliquez un Flou gaussien avec un Montant de 12 . Utilisez l'image ci-dessous comme référence.
# D8D8D8 et donnez-lui un Flou gaussien ] avec un Montant de 5 . N'oubliez pas de le placer dans le groupe carrosserie .
Pour ajouter des reflets lumineux, nous allons créer trois formes à l'aide de l'outil Vecteur et les remplir avec les couleurs suivantes:
# F9F9F9# F1F1F1# F1F1F1
Déplacez ces couches à l'intérieur du groupe carrosserie désactivez Bordures et appliquez un Flou gaussien avec un Montant sur 6 .
Terminez cette étape en dessinant deux formes à l'aide de l'outil Vecteur . Nommez ces formes garde-boue avant et garde-boue arrière . Réglez la couleur sur # 393939 supprimez les Borders déplacez-les à nouveau à l'intérieur du groupe et donnez-leur un effet Gaussian Flur avec Amount de 2 et définissez Opacité sur 50% . Utilisez l'image ci-dessous comme référence.
Remarque: Désormais, tout ce que nous créons doit être placé dans le groupe carrosserie .
4. Création de la porte (et de toutes sortes de couvercles)
Cette étape est assez simple et ne prendra que quelques minutes. Nous allons ajouter un tas de couvercles et une porte à cette étape.
Sélectionnez l'outil Vector ( V ) et commencez à dessiner les couvercles. Vous n’avez pas besoin de fermer les formes, laissez-les simplement ouvertes, car nous n’avons pas vraiment besoin de formes fermées, juste des lignes. Pour ce faire, appuyez sur la touche Echap lorsque vous êtes satisfait de chaque ligne. Réglez la bordure Couleur sur noir ( # 000000 ) et Largeur sur 1px . Utilisez l'image ci-dessous comme référence.
Sélectionnez les calques Réservoir de carburant, Coffre avant et Couvercles moteur arrière et ajoutez-leur des effets Ombres avec les paramètres suivants:
- Couleur :
#FFFFFF - Alpha :
90% - X :
0; Y :2; Flou :2; Spread :0;
Ensuite, sélectionnez le calque Fog Light Place Lid et appliquez un peu différent Shadows :
- Color :
#FFFFFF - Alpha :
20% - X :
2; Y :0; Flou :2; Étalement :2;
Prenez l'outil Ovale ( O ) et créez un petit cercle qui représentera le Jack Point couverture. Désactivez Remplissages et ajoutez une bordure Extérieur avec une Largeur de 1px et la Couleur définie sur # 000000 . Appliquez Ombres avec la Couleur définie sur #FFFFFF à 30% alpha et Flou et ] Spread réglé sur 2 .
Ensuite, nous allons dessiner une porte avec l'outil Vector ( V ), de la même manière que nous avons dessiné tous les couvercles.
Rendre visible l'image de référence en arrière-plan, régler le calque carrosserie sur 50% Opacité et tracer les lignes de porte à partir de la photo.
Lorsque vous avez terminé, masquez à nouveau l'image de référence, réglez carrosserie calque Opacité à 100% et stylisez la forme de la porte.
Réglez la bordure de forme de la porte Couleur sur noir ( # 000000 ), Largeur sur 2px et appliquez Ombres :
- Couleur :
#FFFFFF - Alpha :
40% - X :
2; Y :2; Flou :2; Spread :2;
Astuce : N'oubliez pas de donner des noms appropriés aux formes / calques. Une dénomination correcte 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 de l'outil Vector ( V ]). Maintenez la touche Shift enfoncée 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 Bordures .
Astuce : Vous pouvez également dessiner ces deux petits rectangles à l'aide de l'outil Rectangle ( R ), entrez en mode d'édition vectorielle en appuyant sur Entrez sur le clavier, sélectionnez les deux points inférieurs de chaque rectangle et alignez-les correctement.
Enfin, dessinez une nouvelle forme en utilisant le Outil Vector à nouveau. Réglez Remplissages sur noir, désactivez Bordures et appliquez Ombres avec la Couleur définie sur #FFFFFF à 60% alpha et le Y et Blur réglé sur 2 . Donnez à cette forme un nom de couvercle de moteur . Utilisez l'image ci-dessous pour référence.
5. Feux de signalisation avant et klaxon
Pour commencer à fabriquer les feux de signalisation, passez à l'outil Rectangle ( R ) et dessinez un rectangle. Remplissez-le de noir Couleur désactivez Bordures et appliquez Ombres :
- Couleur :
#FFFFFF - Alpha :
30% - X :
2; Y :-3; Flou :2; Spread :2;
Entrez Mode d'édition vectorielle en double-cliquant sur la forme du rectangle (ou en appuyant sur Entrez ), sélectionnez le point en haut à droite, déplacez-le vers la gauche 15px à l'aide de la flèche ← du clavier et réglez le Rayon sur 9px . Appuyez de nouveau sur Entrez pour quitter Mode d'édition vectorielle .
Dupliquer ( Cmd + D ) cette forme, désactiver Ombres et ajouter un Remplissage à gradient linéaire ; utilisez #ECECEC pour le premier arrêt de couleur et # 7F7F7F pour le dernier arrêt de couleur.
Déplacez 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 de 2px .
Dupliquer cette forme ( Cmd + D ), changer la couleur de Dégradé linéaire à Uni Colorez et choisissez la couleur de votre choix. J'utiliserai du jaune, mais ce n'est que temporaire. Ensuite, double-cliquez sur la forme pour entrer en Mode d'édition vectorielle sélectionnez les deux points du haut 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 pour que le bord droit devienne parallèle à le bord droit de la forme ci-dessous.
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 quelques opérations booléennes sophistiquées: dupliquez la forme, nommez l'espace de la corne d'origine et la copie clignotant puis cachez le clignotant car nous l'utiliserons plus tard.
Nous devons d'abord modifier la forme de l'espace de la corne . Sélectionnez la forme, entrez Mode d'édition vectorielle sélectionnez le point en haut à droite, réglez Rayon sur 0 (en utilisant le panneau Inspector sur la 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 utiliserons pour la corne. Utilisez l'image ci-dessous comme référence.
Astuce : Maintenez Shift tout en faisant glisser les points pour maintenir un chemin droit.
Ensuite, dé-cachez le clignotant double-cliquez dessus pour entrer Mode d'édition vectorielle sélectionnez les deux points sur le gauche et faites-les glisser vers la droite jusqu'à ce qu'il y ait un petit espace entre les formes.
Retour à la forme de l'espace de la corne . Double-cliquez pour accéder au mode d'édition Vector maintenez Shift 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 type de point Miroir et en utilisant la flèche ← du clavier, déplacez-le 4px vers le la gauche. Ensuite, sélectionnez le point en bas à droite et déplacez-le 2px vers la gauche.
Nous modifierons le clignotant de la même manière. Sélectionnez la forme clignotant appuyez sur Entrez pour accéder au Mode d'édition vectorielle ajoutez un point au milieu exact du segment gauche, transformez-le en ] Type en miroir à l'aide du panneau Inspector et poussez-le 3px vers la gauche en utilisant la touche fléchée gauche du clavier.
Klaxon
Commençons par terminer le klaxon. Sélectionnez la forme de l'espace de corne et appliquez un Dégradé linéaire – utilisez # 1D1D1D pour la couleur du haut et # D0D0D0 pour la couleur du bas arrêtez, 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é.
Maintenant, dupliquez cette forme ( Cmd + D ), réglez Couleur sur Couleur unie et réglez sur # 131313 passez en Mode d'édition vectorielle sélectionnez les deux points de gauche et faites-les glisser un peu vers la droite.
Select the top left point, push it a bit to the right, add a point in the middle of the left segment, turn it into a Mirrored point, and move it 2px to the left.
Let’s add a grille over the horn space.
Pick up the Rectangle tool (R) and create a tiny rectangle shape over the horn space, with a height of 2pxwith the Fills set to #9A9A9A and the Borders turned off. Duplicate it, change the height to 1pxchange the color to #000000move it down so it’s below the grey rectangle, switch to Vector Editing modeselect the bottom left point and move it 2px to the right. Select both shapes and place them inside a group (Cmd + G). We will use this element to build the grille. Give it a name of grille element.
Duplicate this group and move it 7px up and 2px right, then duplicate it again and push it 7px up and 3px right.
Our grille now extends past the horn spaceso we need to fix it. Select all the elements that are part of the horn and perform a Mask operation so that none of the created elements go outside of the horn space.
Sketch will place the result automatically into a group. Give this resulting group the name of horn.
Turn Signal Light
Select the turn-signal shape and add a Linear Gradient fill. Set the gradient to a horizontal position with the right-pointing arrow in the color dialog and use the following colors:
#FFA137#B23821#B23821
Add an Inner Shadows effect with the following properties:
- Color:
#000000 - Alpha:
40% - X:
0; Y:0; Blur:5; Spread:0
And apply a Shadows effect:
- Color:
#FFFFFF - Alpha:
50% - X:
0; Y:0; Blur:2; Spread:0
It’s time to add the light bulbs. First, use the Oval tool (O) to draw a circle like on the image below. Turn off Bordersset Fills Opacity to 0% and apply Inner Shadows:
- Color:
#000000 - Alpha:
12% - X:
-9; Y:0; Blur:9; Spread:0
Then, draw a small rectangle with the Rectangle tool (R) and use Radius (Round Corners) in the Inspector panel to create a rounded rectangle that will serve as a light bulb in our car illustration. Turn off Bordersand set Fills to Linear Gradient:
#C06D25#DE8D55#BC4E08#A64A15
Finally select both — the circle and the rounded rectangle — and perform a Mask operation to place the rectangle inside the circle. Name the resulting group light1.
Tip: Sketch may turn off Inner Shadows on the masking shape (in this case, light1) 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. It’s a good idea to check for this every time when performing a Mask operation.
We will add a second light bulb in a similar way. Draw a circle, turn off Bordersset Fills Opacity to 0% and add Inner Shadows:
- Color:
#000000 - Alpha:
18% - X:
0; Y:12; Blur:5; Spread:0
Duplicate this circle and scale it down. Modify the existing Inner Shadow:
- Color:
#000000 - Alpha:
28% - X:
0; Y:-5; Blur:5; Spread:0
And add another one on top of it:
- Color:
#000000 - Alpha:
50% - X:
0; Y:0; Blur:2; Spread:0
Then select both and group them into a light2 group.
In the Layers panel list select turn-signallight1 and light2 and apply a Mask operation. This way light1 and light2 will be inside turn-signal. Name the resulting group turn signal light.
To complete the turn signal light, we need to add a tiny screw on the right side of it. We will construct our screw using a circle, so grab the Oval tool (O), and draw a small circle on the right, close to the edge of the signal light. Set the Fill Opacity to 0%set Borders Width to 1pxposition Insideand color to #B3B3B3 with alpha 30%; and add an Inner Shadows effect:
- Color:
#000000 - Alpha:
50% - X:
0; Y:2; Blur:2; Spread:0
Duplicate this circle, scale it down, turn off Bordersset Fills to #B2CBDF with Opacity back to 100% and add the following Shadows and Inner Shadows.
First Inner Shadow:
- Color:
#FFFFFF - Alpha:
80% - X:
0; Y:0; Blur:1; Spread:0
Second Inner Shadow:
- Color:
#000000 - Alpha:
50% - X:
0; Y:0; Blur:1; Spread:0
And at the end, a Shadows effect:
- Color:
#000000 - Alpha:
100% - X:
0; Y:0; Blur:2; Spread:0
We need one more circle for the screw, so again, duplicate the previous circle, scale it down, set Fills to #303030and turn off Shadows and Inner Shadows.
Tip: At this point, you may end up with a 1px circle which still looks a little bigger than what you can see in the screenshot above, and you may also have some trouble aligning it properly. If this happens, check whether Pixel Fitting is checked in Sketch Preferences, and if it is, it might be a good idea (at least temporarily) to disable it: go to Preferences → Layers → un-check the Pixel Fitting checkbox.
Select all circles that we used to create the screw and group them into a screw group, then move this resulting group inside the turn signal light group on top.
Now it’s time to use the Create Symbol feature in Sketch and create a new Symbol out of the screw group. Later, we could use this symbol in our illustration as many times as we need it.
Tip: Symbols are created for those elements that you expect to reuse. When you use them right, Symbols can become a very powerful feature; they can speed up your workflow by giving you a way to save and reuse common elements across your illustrations and designs. When you make changes to a Symbol, those changes will be automatically applied to all the instances of this Symbol in your designs.
To create a Symbol, select the screw group in the Layers panel list, right-click on it, and choose Create Symbol from the menu. The dialog box Create New Symbol will appear; give a name to the symbol (screw in this case) and click OK.
There is one more small detail to add. Zoom in close enough (i.e., 3200%) and draw a tiny rectangle. Turn off Borders and set Fills to #131313.
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:
- Color:
#FFFFFF - Alpha:
30% - X:
-2; Y:-3; Blur:2; Spread:2;
Enter Vector Editing modemove the top left corner 15px to the right and set Radius to 9px.
Duplicate the rectangle, turn off Shadows and add a Linear Gradient fill; use #ECECEC for the first color stop and #7F7F7F for the last color stop. Then, move it 2px to the right, enter Vector Editing modeselect the top two points and push them down 2px.
Duplicate this shape (Cmd + D), change Color from Linear Gradient to Solid Color and pick any color you want. Next, switch to Vector Editing modeselect the top two points and move them down 3pxselect the bottom two points and move them up 3pxselect the left two points and move them to the right 3pxand 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.
Now, change Fills to Linear Gradient. Set the gradient to a horizontal position with the right-pointing arrow in the color dialog and use the following colors:
#5D1720#621822#662423#B04643#C25F56
Add an Inner Shadows effect with the following properties:
- Color:
#000000 - Alpha:
50% - X:
0; Y:0; Blur:5; Spread:0
And apply a Shadows effect:
- Color:
#FFFFFF - Alpha:
50% - X:
0; Y:0; Blur:2; Spread:0
Let’s now move to the design of the tail light’s light bulbs.
Use the Rectangle tool (R) to draw a rectangle like on the image below. Turn off Bordersset Fills Opacity to 0% and apply Inner Shadows:
- Color:
#000000 - Alpha:
40% - X:
-2; Y:0; Blur:5; Spread:0
Then, draw a small rectangle with the Rectangle tool (R) and use Radius (Round Corners) in the Inspector panel to create a rounded rectangle that will serve the purpose of a light bulb. Turn off Bordersand set Fills to Linear Gradient:
#B75D61#6B2224
Finally, select both rectangles and perform a Mask operation to place the rounded rectangle inside the other rectangle. Name the resulting group tail-light1.
Tip: 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.
Draw a rectangle, turn off Bordersset Fills Opacity to 0% and add Shadows:
- Color:
#000000 - Alpha:
30% - X:
-2; Y:0; Blur:2; Spread:0
Draw a small circle, turn off Bordersset Fills Opacity to 0% and apply the following Inner Shadows.
First Inner Shadow:
- Color:
#000000 - Alpha:
40% - X:
0; Y:-2; Blur:5; Spread:0
Second Inner Shadow:
- Color:
#000000 - Alpha:
30% - X:
0; Y:0; Blur:5; Spread:0
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. Go to Insert → Documentchoose screwclick over the tail-light2 to insert the symbol and then position it to the correct spot. Use the image below as a reference.
Let’s take a look at the bigger picture and check what we did so far!
Conclusion
Good job! 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. Stay tuned!
(mb, ra, yk, il)Source link