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

Added 2019-05-30

Vous pouvez faire tellement de choses cool avec Adobe Photoshop  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

Comment utiliser l'outil de forme personnalisée dans Adobe Photoshop Notre guide pas à pas d'utilisation de l'outil de forme personnalisée dans Adobe Photoshop, un outil polyvalent souvent négligé. Read Article

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 Couches  panneau - c'est là que votre cadre ira.

Ensuite, assurez-vous que votre Outil de forme personnalisée  c'est actif. Ensuite, vérifiez les couleurs pour votre forme personnalisée dans le Remplir  et Accident vasculaire cérébral  sections.

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

Pour changer ces couleurs, allez à votre Échantillons  panneau. 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 fait auparavant, consultez notre tutoriel expliquant Comment créer une palette de couleurs personnalisée dans Adobe Photoshop comment créer une palette de couleurs personnalisée dans Photoshop .

Maintenant que la nouvelle palette est chargée, retournez à votre Remplir  et Accident vasculaire cérébral  options pour votre outil de forme personnalisée. Choisissez les couleurs que vous souhaitez utiliser.

Après cela, allez à votre Forme  menu déroulant et choisissez le design 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 que Adobe dispose de nombreux cadres prédéfinis, 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 dessiné votre image de la page - comme je l’ai fait - ne vous inquiétez pas. Vous pouvez soit utiliser le Outil de sélection de chemin  ou la 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, allez dans votre Couche  dans le panneau et double-cliquez sur le calque contenant votre forme. Une boîte apparaîtra qui dit Style de calque .

Sous Options de fusion , tu verras Biseau et estampage . 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 le Structure  section, 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 Ombres , vous pourrez modifier l’apparence de vos points forts. 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 D'accord .

É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, dans un calque différent.

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, il vous reste à «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 Rasteriser le style de calque .

Étape 6: Faites une sélection

Ensuite, retournez à 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 sur l’espace vide, puis choisissez Sélectionnez Inverse . Photoshop sélectionnera plutôt la forme de votre cadre.

Cela peut sembler une étape compliquée, mais il existe 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 Sélectionnez 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électionnez>  Enregistrer la sélection .

Donnez un nom significatif à votre sélection, puis cliquez sur D'accord .

Étape 7: Ajustez la couleur

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

Pour ajuster la couleur, allez à votre Couches  panneau, et créez un nouveau calque au-dessus du calque contenant votre cadre. Puis clique Sélectionnez>  Charger la sélection .

Du Canal  liste déroulante, choisissez la sélection que vous avez faite de votre cadre photo.

Une fois la sélection active, passez à votre Seau de peinture  ou Pente  outil 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 bouton Mode de fusion  menu déroulant dans votre Couches  panneau. 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 illustrer cette partie, j’ai utilisé une photo de moi.

Pour amener cette photo dans votre cadre, sélectionnez le Bouge toi  outil, puis cliquez et faites glisser votre photo de tête vers l'onglet de fichier pour votre cadre d'image 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 Couches  panneau.

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 la photo pour mieux correspondre à votre cadre en allant Editer>  Transformation libre . Faites glisser les points d'ancrage vers l'intérieur pour le réduire.

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

Une fois que la zone située en dehors de votre cadre est sélectionnée, revenez au calque face à face. Allez au menu en haut de votre écran, puis cliquez sur Editer>  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 cette couche d’arrière-plan, cette transparence n’aura aucune incidence.

Une fois que votre arrière-plan est désactivé, allez à 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.

Procédure de création d'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 en quatre étapes simples. Read Article