Share
Si vous devez créer un téléphone élégant ou un design Blackberry et que vous ne souhaitez pas acheter d'images de stock, ce didacticiel est pour vous. Je vais vous montrer comment utiliser les formes vectorielles, les masques et surtout les effets de calque pour créer ce design élégant..
Avant de commencer, jetons un coup d'œil à l'image que nous allons créer. Cliquez sur la capture d'écran ci-dessous pour afficher l'image en taille réelle. Comme toujours, le fichier Photoshop en couches est disponible via notre abonnement Psdtuts + Plus
Créez un nouveau document d'environ 1 000 pixels sur 1 400 pixels avec un arrière-plan noir. Choisissez l'outil Rectangle arrondi (U) et tracez un rectangle d'environ 600 x 1000 pixels. Notez que le rayon d'angle n'a pas d'importance puisque nous allons éditer la forme.
Saisissez l'outil Flèche blanche (A) et commencez à faire glisser vos points d'ancrage jusqu'à atteindre la forme souhaitée. Notez que je devais en supprimer certains pour avoir de grands coins arrondis, en utilisant l'outil Supprimer l'ancrage..
Maintenant que notre forme principale est terminée, nous devons lui donner des effets pour créer l’illusion. Un léger dégradé de gris à noir superposera la lumière et une combinaison d'effets Bevel et Hard Inner Glow créera le cadre arrondi et doux. Pour les appliquer, assurez-vous que le calque de forme est sélectionné et cliquez sur le bouton Effet de votre palette de calques, utilisez les paramètres ci-dessous..
Ci-dessous le résultat jusqu'à présent.
Que serait un Blackberry sans son grand écran? Utilisons l'outil Rectangle (U) et dessinons le rectangle dans la moitié supérieure. Utilisez à nouveau un peu de dégradé et Inner Shadow.
Pour rendre l’écran encore plus brillant, ajoutons une autre réflexion. Dupliquez votre calque "écran" et utilisez l'outil de transformation (Contrôle + T) pour le réduire légèrement (environ 3-4 pixels). Puis changez sa couleur en blanc, la transparence à 5% et définissez son mode de fusion sur Multiplier..
Cela transformera tout pixel blanc en un pixel transparent, révélant le calque situé en dessous. Notre couche deviendra transparente, ne laissant que l'effet visible. Modifiez le calque dégradé et remplacez-le par un blanc à transparent. Donnez-lui une opacité totale et réglez-le à 45 degrés.
Maintenant, cliquez sur le chemin dans votre couche de palette et jouez avec la flèche blanche et l'outil de conversion de point pour créer une jolie courbe à l'écran..
Pour créer le bouton central, nous allons utiliser une série de cercles empilés et centrés. Le premier cercle utilise un dégradé sur le trait, ainsi qu'un dégradé de superposition, tandis que les autres cercles sont un mélange d'ombres intérieure et d'ombre portée..
À l’aide de l’outil Rectangle, dessinez ce qui deviendra nos principaux boutons juste en dessous de l’écran. À l'aide de l'outil Convertir un point, ajoutez une courbe à la partie inférieure de votre rectangle et changez sa couleur en gris foncé (# 131313)..
A l'aide de l'outil Rectangle de sélection (M), effectuez deux sélections de 5 pixels de large, à égale distance du centre. Ensuite, tout en maintenant le bouton Alt de votre clavier enfoncé, cliquez sur le bouton Masque de la palette des calques (maintenir Alt inversera automatiquement le masque). Félicitations, vous avez créé vos boutons! Maintenant donnons lui aussi quelques styles.
En regardant à travers vos calques, récupérez votre forme principale. Puis développez la liste des effets utilisés (cliquez sur la petite flèche à droite). Cliquez ensuite avec le bouton droit de la souris sur le calque dégradé et copiez le style de calque. Revenez à votre nouvelle forme, faites un clic droit et collez le style de calque.
Ajoutez une légère ombre portée avec une distance de 0, une opacité de 90% et une taille de 25 pixels. En outre, donnez-lui une lueur intérieure noire inversée. Cela lui donnera une fine réflexion de la lumière sur les bords.
Ajoutez une ligne épaisse de 10 pixels pour séparer les boutons de l'écran. Ajoutez ensuite une lueur intérieure blanche.
Dupliquez votre calque de boutons, supprimez le masque et les effets et changez sa couleur en blanc. Déplacez-le légèrement vers le bas de quelques pixels et utilisez l’outil Supprimer l’ancre pour supprimer les deux ancres supérieures tout en conservant la courbe inférieure. Utilisez l'outil Convertir le point pour ajuster le chemin, comme indiqué ci-dessous.
Appliquez les paramètres Ombre portée et Inner Glow indiqués ci-dessous. Dupliquez la forme trois fois, étalez-les uniformément à l'aide de l'outil Distribuer l'espacement vertical, créez un groupe (Contrôle + G) et réglez son option de fusion de calques sur Multiplier pour adoucir les bords..
À l’aide de l’outil crayon (P), dessinez la partie inférieure du téléphone. En utilisant la même astuce de style copier / coller, appliquez l’ombre portée utilisée sur les boutons de l’étape 5 à cette forme. Ajoutez un recouvrement de dégradé radial gris clair à gris foncé. Ensuite, utilisez votre souris pour déplacer le dégradé vers le coin.
À présent, dupliquez ce calque, changez sa couleur en blanc et son option de fusion en multiplication (pour annuler ses pixels blancs). Modifiez l'effet de dégradé radial et déplacez-le dans le coin opposé. Jouez avec les Opacités jusqu'à ce que vous obteniez la même quantité de lumière de chaque côté.
Pour créer le mini-clavier, dupliquons la couche de boutons. Puis redimensionnez chaque bouton pour qu’il se place entre chaque séparateur de blanc. Supprimez le masque, extrayez les guides de la règle verticale et utilisez votre grille pour former un clavier large de dix colonnes. En utilisant la même méthode qu'à l'étape 5, créez une nouvelle version du masque..
Utilisez l'outil Plume pour dessiner la dernière rangée de touches. Utilisez les styles et la technique de masquage pour les séparer également.
En utilisant votre police préférée, placez chaque lettre sur sa touche respective. Certains des signes (retour arrière, retour, flèches de décalage) sont des formes préexistantes de ma bibliothèque, mais vous pouvez toujours chercher une solution dans les polices de dingbats.
Les clés sont maintenant en place, bien que le résultat ne soit pas encore complet, car nous avons besoin de plus de lumière! Dupliquez le premier calque de clé. Puis effacez les styles et appliquez un simple dégradé de noir au blanc, le blanc apparaissant à peine en bas. N'oubliez pas que vous pouvez cliquer et faire glisser le dégradé sur votre toile. Enfin, changez l'opacité à 70%.
Créez un masque sur ce nouveau calque. Ensuite, prenez l'outil Elliptical Marquee. En partant de la gauche, faites glisser un cercle qui passe en haut à droite et en bas à gauche de la touche. Puis peignez le masque en noir. Répétez le même processus pour les autres clés, mais en miroir le masque du centre.
Dupliquez votre couche deux fois. Placez-les au-dessus de chaque rangée de clés. Répétez la même étape pour créer le calque de réflexion sur la ligne du bas. Pour la barre d’espace, faites deux sélections circulaires de chaque côté et ajoutez un rectangle au milieu..
Le Blackberry lui-même manque juste le haut-parleur pour être complet. Dessinez un rectangle arrondi, avec un grand rayon d'angle. Choisissez un ton gris clair et ajoutez un peu d'ombre intérieure.
Nous sommes presque près d'être finis maintenant! Ajoutons un peu de texture en arrière-plan. J'ai choisi le cuir pour souligner le luxe et la finition de haute qualité.
J'ai choisi cette image chez istockphoto, car c'est exactement ce que je cherchais. Ce n'est pas tout à fait là pour la couleur cependant. Amenez-le dans Photoshop. Ensuite, allez dans Image> Réglages> Teinte / Saturation (Contrôle + U) et Dégilatez jusqu'à obtenir une image complète en niveaux de gris..
Ajoutez un masque et tracez un grand dégradé circulaire blanc à noir. Si nécessaire, utilisez l’outil de transformation libre pour l’ajuster (Contrôle + T), mais n’oubliez pas de déverrouiller d’abord le masque en cliquant sur le bouton Lien. Ajoutez ensuite un nouveau calque en arrière-plan, remplissez-le de noir et aplatissez les deux calques..
Apportons la texture dans votre dessin principal. Déplacez-le juste au-dessus du calque d'arrière-plan noir et réglez son mode de fusion sur Écran. Cela rendra tous les pixels noirs transparents, révélant le calque suivant. Dupliquez-le et faites-le pivoter de 180 degrés. Revenez ensuite à la forme principale et ajoutez un peu d’ombre portée..
Ça y est, vous l'avez fait! Pas si difficile hein?
Qu'avons-nous appris? L'utilisation des effets de calque permet de gagner un temps considérable. Bien sûr, le même résultat pourrait être obtenu avec un pinceau régulier, construisant des couches sur des couches, mais l'avantage de ces effets est qu'ils sont totalement évolutifs. Les formes vectorielles peuvent être facilement redimensionnées au besoin.
Accentsconagua