Comment créer un cadre photo en ligne à l'aide de Photoshop

• Créatif

Publicité

Vous pouvez faire tellement de choses cool avec Adobe Photoshop qu'il est difficile de savoir par où commencer. Dans cet article, nous vous montrons comment créer un cadre photo en ligne à l'aide de Photoshop. Celui que vous pouvez utiliser sur les sites Web et les applications, que ce soit autour de votre avatar ou dans l'en-tête de votre blog.

Étape 1: Configurez votre fichier

Avant de commencer ce didacticiel, vous devez connaître les bases de l'outil Forme personnalisée. Pour ce faire, consultez notre article décrivant comment utiliser l'outil Forme personnalisée dans Photoshop. Comment utiliser l'outil Forme personnalisée dans Adobe Photoshop. Comment utiliser l'outil Forme personnalisée dans Adobe Photoshop. Notre guide étape par étape pour l'utilisation de la forme personnalisée. Outil dans Adobe Photoshop, un outil polyvalent souvent négligé. Lire la suite .

Ensuite, ouvrez Photoshop pour configurer votre document. Pour ce tutoriel, supposons que le cadre photo que vous créez soit un avatar de média social. Les avatars ont généralement les mêmes dimensions de tous les côtés, qu’ils soient de forme circulaire ou carrée.

Dans cet esprit, définissez la taille de votre document sur au moins 1000 × 1000 pixels, même si vous pouvez l’agrandir. Ces dimensions serviront de guide pour votre cadre photo.

Étape 2: Configurez votre outil de forme personnalisée

Une fois votre fichier configuré, créez un nouveau calque dans votre panneau Calques . C’est là que votre cadre ira.

Ensuite, assurez-vous que votre outil Forme personnalisée est actif. Ensuite, vérifiez les couleurs de votre forme personnalisée dans les sections Remplissage et Contour .

Pour le moment, la palette de couleurs par défaut est active. Cependant, je ne veux pas utiliser ces couleurs sur mon cadre photo, je vais donc les changer.

Pour changer ces couleurs, allez dans le panneau Nuancier . Cliquez sur l'icône pour le menu déroulant. Choisissez une palette prédéfinie dans la liste d'options d'Adobe.

Vous pouvez également charger une palette de couleurs personnalisée si vous en avez déjà créée une. Si vous n'en avez pas encore créé, consultez notre didacticiel expliquant comment créer une palette de couleurs personnalisée dans Photoshop.

Maintenant que la nouvelle palette est chargée, revenez aux options Remplissage et Contour de votre outil Forme personnalisée. Choisissez les couleurs que vous souhaitez utiliser.

Après cela, allez dans le menu déroulant Forme et choisissez le motif qui conviendra le mieux à votre image.

Pour ce tutoriel, faites défiler jusqu'à trouver le cercle creux et les formes carrées. Choisissez le cercle creux à utiliser comme cadre photo, visible ici en rouge.

Bien qu'Adobe ait beaucoup de cadres préconstruits, ils sont un peu trop sophistiqués pour notre objectif. Ce cercle devrait faire l'affaire.

Étape 3: dessinez votre forme

Une fois que vous avez sélectionné votre forme, cliquez et faites glisser votre curseur sur la page pour la créer.

Si vous avez accidentellement tiré votre image de la page, comme moi, ne vous inquiétez pas. Vous pouvez utiliser l’ outil de sélection du tracé ou l’ outil de déplacement pour centrer votre cadre. Il a été mis en évidence ici en rouge.

Étape 4: Appliquer un style de calque

Une fois que vous avez centré votre cadre, vous voudrez peut-être lui appliquer un effet afin de lui donner un aspect plus «3D».

Pour ce faire, accédez au panneau Calque et double-cliquez sur le calque contenant votre forme. Une boîte apparaîtra qui dit Style de calque .

Sous Options de fusion, vous verrez Biseauter et estamper . Cliquez sur cette option pour l'activer et assurez-vous que la case à cocher en regard du nom est remplie.

Une fois cette coche activée, vous constaterez que votre cadre photo a pris une qualité plus 3D.

Sous la section Structure, vous pouvez choisir le type de biseau à appliquer à votre forme, la profondeur du biseau, la taille et l'ampleur souhaitée pour l'adoucir.

Sous Ombrage, vous pourrez modifier l'aspect de vos faits saillants. Vous pouvez modifier l'angle selon lequel la lumière frappe l'objet, ainsi que la manière dont la lumière interagit avec l'objet.

Une fois que tous vos paramètres sont définis de manière satisfaisante, cliquez sur OK .

Étape 5: Rastérisez votre calque

Après avoir terminé votre biseau, vous voudrez sélectionner votre cadre pour créer une "sélection de cadre". Cela vous permettra d’appeler la “forme” à une date ultérieure et d’appliquer facilement un remplissage de couleur dans la forme de cette sélection, simplement dans un autre calque.

Pensez-y comme un raccourci pour l'édition.

Lorsque vous sélectionnez votre outil Baguette magique, assurez-vous que votre image est actuellement définie sur 16 bits . Si ce n'est pas le cas, vous recevrez un avertissement de Photoshop.

Si ce n'est pas le cas, cliquez sur Image> Mode> 16 bits . Comme vous travaillez dans des calques différents, Photoshop vous demande si vous souhaitez fusionner ces calques lorsque vous réduisez la profondeur de votre document.

Cliquez sur Ne pas fusionner . Vous voulez toujours que ces couches soient séparées.

Une fois que vous avez modifié la profondeur de votre image, vous devez toujours «rasteriser» votre calque pour pouvoir utiliser votre baguette magique. Cela signifie que vous convertissez un graphique vectoriel en pixel.

Pour pixelliser votre calque, cliquez avec le bouton droit de la souris sur le calque contenant votre cadre photo, puis choisissez Style de calque rastérisé .

Étape 6: Faites une sélection

Revenez ensuite à votre outil Baguette magique et sélectionnez l’espace vide à l’intérieur et à l’extérieur de votre cadre.

Lorsque ces deux zones sont sélectionnées, cliquez avec le bouton droit de la souris sur l'espace vide, puis choisissez Sélectionner l'inverse . Photoshop sélectionnera plutôt la forme de votre cadre.

Cela peut sembler une étape compliquée, mais il y a une bonne raison de faire la sélection dans cet ordre.

Si vous essayez de cliquer directement sur votre cadre 3D, Photoshop ne sélectionnera que les couleurs ayant exactement la même valeur et la même teinte, et non la totalité.

Avec Select Inverse, vous avez maintenant une sélection propre de votre cadre.

Pour enregistrer cette sélection pour une utilisation ultérieure, accédez à la barre de menus située en haut de votre espace de travail. Cliquez sur Sélectionner> Enregistrer la sélection .

Donnez à votre sélection un nom explicite, puis cliquez sur OK .

Étape 7: Ajustez la couleur

Maintenant que vous avez créé votre cadre photo en ligne, vous pouvez en ajuster la couleur.

Pour régler la couleur, accédez au panneau Calques et créez un nouveau calque par-dessus le calque contenant le cadre de votre photo. Cliquez ensuite sur Sélectionner> Charger la sélection .

Dans la liste déroulante Chaîne, choisissez la sélection que vous avez faite de votre cadre photo.

Une fois la sélection active, accédez à votre outil Pot de peinture ou dégradé et appliquez de la couleur à ce calque. Il restera dans les limites de cette sélection.

Une fois que vous avez défini votre couleur, vous souhaiterez qu’elle interagisse avec le cadre photo situé en dessous.

Pour ce faire, cliquez sur le menu déroulant Mode de fusion du panneau Calques . Choisissez un effet.

Comme vous pouvez le constater, cet effet éclaire le cadre tout en reprenant les teintes claires et sombres du biseau 3D situé en dessous.

Étape 8: Ajoutez votre photo

Une fois que vous avez terminé avec le cadre photo, vous voudrez probablement y placer une image. Pour démontrer cette partie, j'ai utilisé une photo de moi.

Pour amener cette photo dans votre cadre, sélectionnez l'outil Déplacement, puis cliquez et faites glisser votre photo dans l'onglet Fichier du cadre de votre photo en haut. J'ai surligné l'onglet en rouge.

Lorsque vous faites glisser la photo dans l'onglet, Photoshop la transfère dans l'espace de travail de votre cadre d'image.

Libérez le fichier. Photoshop place automatiquement la photo dans un nouveau calque de votre panneau Calques .

Une fois que cette photo est dans un nouveau calque, déplacez ce calque dans le calque de votre image. Le cadre doit être visible sur le dessus.

Si nécessaire, ajustez le tir en hauteur pour l'adapter à votre cadre en sélectionnant Edition> Transformation libre . Faites glisser les points d'ancrage vers l'intérieur pour le réduire.

Ensuite, allez à votre couche de cadre photo. Activez votre outil Baguette magique, puis sélectionnez l’espace autour de l’extérieur de votre cadre.

Une fois que la zone en dehors de votre cadre est sélectionnée, retournez à votre calque de tir à la tête. Accédez au menu situé en haut de votre écran, puis cliquez sur Édition> Couper.

Cela supprimera rapidement le reste de votre image en dehors de votre cadre, créant ainsi cet effet «semblable à une image».

Étape 9: Enregistrez votre fichier pour le Web

Maintenant que votre photo est insérée et que votre cadre est terminé, vous êtes prêt à enregistrer.

Avant de sauvegarder, assurez-vous que la couche d’arrière-plan de votre fichier est désactivée. Votre cadre photo est rond et il y aura une certaine transparence autour. Si vous conservez ce calque d'arrière-plan, cette transparence ne sera pas prise en compte.

Une fois votre arrière-plan désactivé, accédez à Fichier> Exporter> Enregistrer pour le Web (hérité) . Enregistrez votre fichier au format PNG. Et voila. Vous avez terminé.

Personnaliser votre présence en ligne

Maintenant que vous savez comment créer un cadre photo numérique, vous pouvez l'utiliser pour personnaliser votre présence en ligne, en vous donnant une apparence cohérente sur divers sites et applications.

Cependant, n'arrêtez pas votre formation à Photoshop. Nous vous recommandons d'apprendre à créer un dégradé personnalisé à l'aide de Photoshop. Comment créer un dégradé personnalisé à l'aide de Photoshop CC. Comment créer un dégradé personnalisé à l'aide de Photoshop CC. Dans cet article, nous vous expliquerons comment créer un dégradé personnalisé à l'aide de Photoshop CC. étapes simples. Lire la suite.

En savoir plus sur: Adobe Photoshop, Design, Partage de photos, Tutoriel Photoshop.