Bonjour, chers lecteurs. Aujourd'hui, j'ai décidé de vous prouver qu'il est préférable d'étudier la théorie par la pratique. Même si vous êtes débutant, vous pouvez obtenir un bon résultat en littéralement une heure sans rien comprendre à Photoshop ! Regardez, cette image a été créée entièrement grâce aux dégradés. Ils sont appliqués à différents éléments et dans des variantes variées.
Si vous lisez cet article jusqu'à la fin, vous apprendrez non seulement à effectuer une transition de couleur fluide dans Photoshop, mais vous appliquerez également ces connaissances dans la pratique en ce qui concerne le texte, les formes, créerez de magnifiques diamants chatoyants et bien plus encore.
J'ai déjà pris cette photo. Si vous le souhaitez, vous pouvez ensuite créer exactement le même vous-même, et peut-être même mieux, mais je vais vous apprendre en utilisant un exemple différent. Lequel? Découvrez-le à la fin de l’article. Je vais dessiner avec vous et en même temps décrire le processus ; moi-même, je ne sais toujours pas ce que je vais réussir. Grâce à cela, je peux voir quels problèmes vous pourriez rencontrer et vous aider à les résoudre.
Connaissances de base et un secret pour toujours gagner
Nous devons donc d’abord ouvrir Photoshop. Je vous recommande fortement de télécharger ce programme ( Vous pouvez acheter une version sous licence ici ). Vous ne trouverez jamais mieux qu'elle. Si vous avez peur de ne pas le maîtriser et de gaspiller votre argent en oubliant complètement le programme après le premier essai, vous pouvez essayer service en ligne https://editor.0lik.ru/ . Il est beaucoup plus pratique d'avoir son propre programme et très vite vous comprendrez pourquoi.
Voici à quoi ressemble la version 2015 de Photoshop, si vous possédez une édition différente, ne vous inquiétez pas. Tout sera à peu près pareil. Vous avez un peu moins d'options et c'est la seule différence.
Nous créons nouveau document.
Le choix d'une taille est pour moi l'une des questions les plus difficiles. j'ai pris comme base dimensions maximales photos à publier dans réseaux sociaux. 800x500, mais, comme vous l'avez compris, ce n'est pas la question. Tout dépend des objectifs et des tâches que vous allez accomplir lorsque Aide Photoshop.
Regardez, dans le panneau de droite se trouvent tous les boutons principaux, y compris le dégradé. Cependant, il est introuvable pour le moment. Comment ça? J'ai moi-même rencontré ce problème lorsque j'ai commencé à apprendre à travailler avec Photoshop. Vous lisez un article, mais vous devez rechercher la moitié des informations dans des sources tierces. Google, Google, Google.
Que le lecteur très intelligent, qui sait tout parfaitement bien, me pardonne les petits écarts par rapport au sujet. Je souhaite que tous les visiteurs du blog puissent suivre mes cours. Peut-être qu'un jour cela vous sera très utile. Cela permettra de gagner beaucoup de temps.
Dans le coin inférieur droit de presque tous les boutons, à l'exception de la loupe, il y a quelque chose qui ressemble à une flèche. Cela suggère que plusieurs outils sont cachés dans le bouton.
Tenez quelques secondes bouton gauche souris sur le bouton pour ouvrir un menu supplémentaire et sélectionner le dégradé.
Un autre menu supplémentaire ouvert en haut. Il est utilisé exclusivement pour les dégradés. Cliquez sur le texte - un menu de texte spécial s'ouvrira en haut, sur le pinceau et... eh bien, vous voyez l'idée.
Cliquez sur la flèche à côté de l'icône de couleur. Les transitions standard ou celles que vous avez téléchargées sont stockées ici.
Si vous ne vous considérez pas comme un génie du design, je vous recommande de télécharger des modèles gratuits sur Internet. Il y en a beaucoup. Premièrement, cela permet de gagner du temps et, deuxièmement, plusieurs options similaires sont généralement combinées dans un thème créé dans style uniforme. Cela peut être appliqué à une seule image sans aucun problème et elle sera presque toujours belle.
L'installation de nouveaux modèles n'est pas un problème. Téléchargez-les depuis Internet, puis sélectionnez l'écrou dans le coin supérieur droit et recherchez le lien « Télécharger... ».
Sélectionnez le dossier contenant les fichiers téléchargés sur votre ordinateur et enregistrez.
Ils seront ajoutés en bas de la liste.
Remplir
Apprenons maintenant à remplir. Choisissez n’importe quelle option que vous aimez (nous y reviendrons un peu plus tard) et cliquez dessus. Maintenez le bouton gauche de la souris enfoncé n'importe où sur l'écran et déplacez-vous dans n'importe quelle direction. L'emplacement de la transition de couleur en dépend.
Voyez la différence.
Vous pouvez le faire tourner n'importe où.
Pour éviter que le mouvement de votre ligne ne se déplace et que le dégradé ne soit flou, maintenez le bouton Maj enfoncé pendant que vous définissez la direction.
Vous voyez, la transition des couleurs s'effectue désormais au centre. Nous examinerons les paramètres plus en détail au fur et à mesure que nous créerons notre propre dégradé. Maintenant, je ne parlerai que du déplacement du centre. Cliquez sur cette plaque.
Faites un clic gauche sur la couleur ci-dessous et déplacez-la vers la gauche ou la droite.
C'est ce avec quoi je me suis retrouvé.
Comment appliquer un dégradé au texte pour donner aux lettres un aspect moderne
Maintenant, écrivons quelque chose. Sélectionnez le bouton approprié.
Si vous devez modifier la taille ou la police elle-même, faites attention au panneau en haut de l'écran. Tout y est simple.
Appuyez maintenant sur Ctrl et cliquez en même temps sur l'icône du nouveau calque de texte. Attention, vous ne devez pas cliquer sur le texte, mais sur le rectangle, comme le montre la capture d'écran ci-dessous.
Maintenant, créons nouveau calque. Il existe trois options pour résoudre le problème : maintenez enfoncées simultanément Shift, ctrl, N ; On utilise le panneau en haut, on y trouve « Layer – new – create » ; utilisez le bouton dans le menu rapide à droite. Dans l'image ci-dessous, je l'ai montré avec une flèche.
Maintenant, pour supprimer le surlignage le long des bords des lettres, vous pouvez cliquer sur la sélection, puis cliquer sur n'importe quelle partie de l'image. Voilà le résultat.
Le travail avec le texte ne s'arrête pas là. Regardez, nous avons 2 calques : un avec un dégradé et le second avec des lettres. Pourquoi est-ce arrivé là-bas ? Je vais vous expliquer du mieux que je peux. Écrivez dans les commentaires si ce n'est pas clair. Vous avez écrit le texte. Photoshop s'est rendu compte qu'il s'agissait de lettres et a même suggéré de les agrandir, de les réduire, de changer la police, etc.
Ensuite, vous avez sélectionné ce fragment. Nous avons créé un nouveau calque, pour utiliser une analogie, découpé un pochoir dans du papier et l'avons rempli. À ce stade, Photoshop était perdu. Il a arrêté de voir vos lettres. Pour lui, ce n’est qu’une partie d’une image, comme un losange, un carré ou un cercle avec un centre découpé. Si vous travaillez avec des lettres sur un calque, vous n’y arriverez pas ; si vous souhaitez appliquer un dégradé au texte, c’est pareil.
Si maintenant vous souhaitez déplacer le texte quelque part et que vous allez dans la section correspondante puis commencez à le déplacer avec la flèche, alors tout s'éloignera.
Nous supprimons le calque de texte pour éviter toute confusion. Faites un clic droit dessus et sélectionnez l'option souhaitée.
Types de dégradés, remplissage de formes et création d'étoiles
Si vous avez prêté attention au panneau de dégradés en haut, vous avez peut-être remarqué qu'ils sont de différents types : linéaire, radial, angulaire, miroir ou diamant. Ce n’est pas difficile de voir les différences, il n’est pas nécessaire de lire les articles, il suffit d’ouvrir ardoise vierge et essayez d'utiliser l'une ou l'autre option. Regardez ce qui s'est passé.
La seule chose à noter est que si vous voulez voir le résultat parfait, comme sur ma photo, la flèche doit être dirigée depuis le centre.
Revenons maintenant à notre photo. Laissez-moi vous apprendre une technique intéressante. Les transitions de couleurs peuvent être utilisées dans les formes que vous dessinez. Ceci est très utile, surtout pour ceux qui envisagent de créer des sites Web.
Alors, choisissez un rectangle ou un cercle. Cela n'a pas d'importance.
Maintenant la couleur de remplissage.
Passons à la section dégradés.
Nous avons besoin d'un losange ici.
Vous voyez, cela s'est avéré être un effet intéressant, mais la couleur blanche gâche tout. Besoin de transparence. Peut être trouvé dans les modèles. Si vous voyez un réseau comme celui-ci à l’intérieur du modèle, alors c’est ce dont nous avons besoin.
Jouez avec les paramètres et vous obtiendrez votre option idéale.
Clonons maintenant ce flash. Sélectionnez le mouvement. Cliquez simplement sur le bouton.
Maintenant, maintenez Alt et faites glisser le double sur le côté.
C'est le résultat que j'ai obtenu.
Créer un nouveau dégradé et des boutons pour les sites
Et enfin, je vais vous expliquer comment créer vous-même des dégradés à partir de zéro, et en même temps nous comprendrons leurs paramètres. Créons un beau bouton, d'accord ? Je vais ajouter un rectangle aux bords arrondis à ma photo.
Voilà à quoi il ressemble. Cette fois, nous n'utiliserons pas le remplissage intérieur. Il n'est pas très pratique de travailler avec un nouveau modèle via celui-ci. Que ce soit juste noir pour l'instant.
Sélectionnez un outil familier et cliquez sur le dé.
De nouveaux dégradés sont créés sur la base des anciens. Cliquez sur n'importe lequel. Ancienne version ne disparaîtra nulle part. Ensuite, trouvez-lui un nouveau nom et enregistrez-le.
En utilisant les points de contrôle supérieurs, vous pouvez contrôler les niveaux de transparence.
Les inférieurs sont utilisés pour travailler la couleur. Pour étendre la plage, cliquez à côté de n'importe quel point et il sera dupliqué.
Vous pouvez en créer autant que vous le souhaitez.
Pour rendre la transition moderne, vous devez lisser les couleurs. Ne touchez pas à cet indicateur et tout ira bien. Cela devrait être 100%. Prêt. Vous pouvez cliquer sur "OK" ou "Enregistrer" - tout dépend de votre désir.
Nous répétons maintenant ce que nous avons déjà fait tout récemment avec le texte. Maintenez la touche Ctrl enfoncée, cliquez sur le bouton du style souhaité au centre et créez-en un nouveau basé sur celui-ci.
Ajoutez maintenant une transition et le tour est joué.
Ajoutons du texte au bouton et c'est tout. On ne sait pas pourquoi le nécessaire est terminé. D'ailleurs, vous pouvez télécharger ma source si vous le souhaitez ( Télécharger le dégradé source.psd ). Vous pouvez l'ouvrir dans Photoshop et améliorer ma photo. Je pense que ce ne sera pas difficile.
Eh bien, c'est tout. Vous en savez maintenant beaucoup sur les dégradés. Si vous êtes designer, maquettiste, créateur de site internet, ou souhaitez le devenir, et que cette leçon vous a été vraiment utile, abonnez-vous à la newsletter et apprenez-en davantage sur ce qui vous intéresse. Vous pouvez également faire attention à ce site : https://photoshop-master.org/disc149/ . Ici vous pouvez trouver un nuage de services payants et cours gratuits, qui vous apprendra un véritable travail professionnel avec Photoshop.
Bonne chance à vous et à bientôt.
Nous sommes heureux de vous accueillir à notre prochaine leçon sur le travail dans Adobe Photoshop. Cet article explique comment créer des transitions fluides dans le programme à la frontière entre les images/couleurs. C'est une compétence très utile dont vous aurez certainement besoin, alors commençons !
Faire une transition en douceur entre les couleurs
Parce que Photoshop est programme professionnel En traitement d'images, très souvent le même résultat peut être obtenu de plusieurs manières. Idem avec les transitions.
Utilisation de l'outil Dégradé
Vous connaissez probablement cet outil. Par conséquent, allez dans la barre d’outils de gauche et sélectionnez "Pente".
Une fois l'outil sélectionné, un panneau de paramètres de dégradé apparaîtra sous le menu principal, où vous pourrez sélectionner un modèle de dégradé et définir des paramètres supplémentaires si vous le souhaitez.
Malheureusement, l'ensemble standard de dégradés n'inclut pas beaucoup de modèles, vous pouvez donc utiliser la recherche et élargir votre collection, ou créer votre propre version.
Pour que la transition soit exactement en couleur et non transparente, vous devez également définir les paramètres pour point de contrôle opacité (voir capture d'écran ci-dessous) :
Une fois que tout est prêt, il ne reste plus qu'à appliquer les modifications en cliquant sur « OK » et à remplir le canevas avec un dégradé. Pour ce faire, nous créons une zone sélectionnée que nous souhaitons remplir ou appliquons un dégradé à l'ensemble du canevas. Cliquez simplement sur LMB (bouton gauche de la souris) à l'endroit souhaité et faites glisser autant que nécessaire.
Important! Faites attention au type de remplissage sélectionné :
Dans notre cas « Dégradé linéaire ».
Via le masque de calque
Cette méthode est utilisée par des utilisateurs expérimentés. Toutes les actions se dérouleront via la palette des calques. Commençons :
Grâce à la mise en drapeau de sélection
L'essence de cette méthode est de créer une transition douce à la frontière de l'objet/image rempli et de l'arrière-plan. Commençons !
- Nous aurons besoin de l'outil Rectangulaire Marquee.
- Vous devez maintenant créer une sélection :
- Lorsque la sélection est prête, utilisez les raccourcis clavier MAJ+F6 appeler une fenêtre dans laquelle vous devez saisir une valeur dans l'élément « Rayon de plumes ».
- Ensuite, vous devez remplir la sélection formée. Pour ce faire, nous utiliserons à nouveau les raccourcis clavier MAJ+F5 et sélectionnez la couleur de remplissage.
- Après avoir appliqué les modifications, nous obtenons le résultat de transition en douceur suivant :
- Il ne reste plus qu'à supprimer la sélection à l'aide de CTRL+D et c'est fini :
Comme vous pouvez le constater, il n'y a rien de difficile à réaliser des transitions fluides entre les couleurs dans Photoshop. Nous avons présenté jusqu'à 3 façons de procéder, chacune étant adaptée à une situation donnée.
C'est tout ! Rendez-vous dans nos prochains cours !
D'accord, les collages sont l'un des cadeaux les plus inhabituels. Ils peuvent décorer l'intérieur, faire rire les amis et faire plaisir aux proches. Les photographies originales sont généralement commandées dans un studio photo ou vous essayez de les prendre vous-même sur un ordinateur. Pour que la superposition d'une photo sur une autre ait un aspect organique, vous devez apprendre plusieurs combinaisons simples. Le plus important est qu’il n’y ait pas de contraste entre les images. Lorsque vous choisissez des arrière-plans pour un collage, veillez à prendre en compte les couleurs et la direction de la lumière sur les deux photos, ainsi que la taille des objets et de l'objet principal. Pour comprendre comment effectuer une transition en douceur dans Photoshop, il suffit d'étudier la procédure présentée dans cet article.
À propos de la procédure
Essayez de pratiquer la séquence d'actions suivante.
Étudier éditeurs graphiques vous permettra de créer des œuvres insolites, de corriger des images, de les éditer et de créer des compositions étonnantes avec n'importe quel matériel photographique !
Nous espérons que notre article vous permettra de mener à bien la tâche et de profiter pleinement de ce processus passionnant et créatif.
Créer un collage ne consiste pas seulement à combiner plusieurs photos en une seule. Le bon collage montre le talent de l'auteur et démontre également sa capacité à organiser les photographies de manière magnifique et compétente afin qu'elles soient élégantes et attrayantes. Un collage réussi et remarquable sera celui dans lequel il n'y aura pas de frontières visibles entre les photographies - au lieu de cela, les photographies sembleront se fondre les unes dans les autres. Cet effet peut être obtenu en effectuant des opérations simples dans Adobe Photoshop.
Vous aurez besoin
- - Programme Adobe Photoshop
Instructions
Bonjour chers webmasters débutants. Encore .
Dans cet article, je vais vous expliquer comment passer des tons foncés aux tons plus clairs, ainsi que d'une couleur à l'autre.
Cette action s'appelle un gradient, et comme il s'agit essentiellement d'un image de fond, puis exécuté par la propriété background prenant deux valeurs :
1. dégradé linéaire - transition de couleur d'un bord ou d'un coin à un autre.
2. dégradé radial - transition de couleur du centre vers les bords.
Il est écrit ainsi :
arrière-plan : -moz-linear-gradient (haut, #ff0000, #ffcfcf );
haut, #ff0000, #ffcfcf );
Ci-dessous, à l’aide d’un exemple, nous examinerons en détail chaque élément de cet enregistrement.
Malheureusement, gradient a toujours des problèmes d'affichage dans les navigateurs et avec la spécification W3C, les valeurs doivent donc toujours être préfixées.
Un préfixe est placé au début de la valeur, et commence par un tiret.
Nous devrons insérer une telle liste dans le sélecteur d'éléments, en créant un dégradé pour cela, afin que votre très beau fond soit reflété correctement dans tous les navigateurs. La beauté exige des sacrifices.
Это самый простой, двухцветный градиент. Разберём подробно значения свойства background
В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.
Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.
Затем, в круглых скобках:
top — направление от которого начинается первый цвет (может быть bottom , left , right )
#ff0000
— через запятую первый цвет; 
#ffcfcf — через запятую второй цвет;
У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.
Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:
bottom right — от правого нижнего угла к левому верхнему;
bottom left — от левого нижнего к правому верхнему;
top right — от правого верхнего к левому нижнему;
top left — от левого верхнего к правому нижнему;
Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
background
: -webkit-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)
Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
();
background
: -webkit-radial-gradien
t(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
background
: -o-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005
);
background
: -ms-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.
Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).
Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.
Поэтому я пользуюсь инструментом colorscheme.ru , в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.
В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.
В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.
В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.
Желаю творческих успехов.
— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!
Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!