Le groupe de calque sur Photoshop, à quoi ça sert et comment le créer.

Tout d’abord, pour votre information, un calque est un ensemble de couches empilées les unes au-dessus des autres, dont chacune contient une partie des éléments constituant l’ensemble, ce dernier étant obtenu par la superposition de tous les calques.

Dans un premier temps, lorsque vous ouvrez un nouveau document Photoshop, celui-ci contient déjà un calque, souvent nommé « Arrière plan ». Vous pourrez y ajouter d’autres calques afin de mieux organiser votre travail. Vous pourrez également créer et modifier des objets sur un même calque sans toucher aux objets des autres calques.

Il est donc très judicieux de créer des calques lorsque votre travail contient beaucoup d’élément. Cela vous permettra donc de modifier une partie de votre travail (image, texte…) sans devoir tout recommencer.

Créer un calque, à partir de la barre d’option

outil creation calque photoshop
Cet icône, situé dans la barre d’outils se trouvant en bas à droite de votre écran, vous permettra de créer un nouveau calque lorsque vous en aurez besoin.
Vous pourrez également créer un nouveau calque en allant dans le menu « Calque / Nouveau ».

Vous aurez également la possibilité d’apporter de la couleur à chacun de vos calques, en faisant un clic droit sur un des claques créés. Un menu apparaitra donc, vous pourrez alors choisir une des couleurs déjà proposée. Cela vous permettra de les identifier plus facilement grâce aux codes couleurs que vous pourrez leur donner.

Pour créer un groupe de calques, voici la procédure qui vous permettra de le faire.

Une fois vos calques créés, il est possible de les organiser en groupe de claques. C’est-à-dire, en un dossier catégorisant tous vos calques en fonction de leur utilité. A noter qu’il est également possible de le renommer.

C’est pratique sur un document Photoshop qui comporte beaucoup de calques et ça permet aussi de pouvoir déplacer plusieurs calques en une seule fois.

Pour créer un groupe de calques, vous pourrez sélectionner ou non les calques à associer dans ce groupe. Ensuite, en allant dans le menu « Calque », il faudra cliquer sur « Associer les calques » [Ctrl + G] s’il y a une sélection de calques, ou alors, en cliquant sur « Groupe » situé dans le menu « Calque / Nouveau ». Vous pourrez également créer un groupe grâce à l’icône se trouvant en bas à droite de votre écran :

Une fois ce groupe créé, il faut savoir qu’il est possible d’ajouter des sous-dossiers (dix maximum), en créant un dossier dans un même groupe.

Attention :oeil photoshop Ce motif permet de masquer les calques, groupes, etc, que vous avez créé, selon vos besoins. Il vous suffit juste de cliquer sur cet icône. Les éléments masqués ne seront donc plus visibles sur votre document. Pour les faire réapparaître, un simple clic sur ce motif sera nécessaire. Parfois, si vous êtes concentrés sur un groupe de calque nécessitant d’un cacher un autre, c’est une fonction bien pratique qui peut également s’appliquer à seulement un des calques du groupe que vous avez créé.

Lisser la peau avec Photoshop CS6

Voilà un tutoriel qui détaille comment s’y prendre pour faire un grain de peau plus lisse, grâce à Photoshop, version CS6.

lissage de peauCommencez par ouvrir votre document, et dupliquez votre calque [Ctrl J].

Dans le menu « Filtre » en haut de votre écran, sélectionnez « Atténuation », puis « Flou de surface ». Une fenêtre s’ouvre alors, il vous suffira de régler les pixels en fonction de ce que vous souhaitez obtenir.

Si vous avez une partie de votre photo que vous ne voulez pas modifier, faites un « masque de fusion » (dans le menu calque, en bas de votre écran) sur votre calque de copie. Appliquez le filtre « Flou de surface », puis sélectionnez l’outil « Gomme », et glissez-le sur la ou les parties à conserver.

Une fois cette manipulation faite, votre photo semble un peu floutée, et a perdu de ses gains.

Dupliquez à nouveau votre calque d’origine. Puis retournez dans le menu « Filtre », « Divers » et « Passe-Haut ». Une nouvelle fenêtre s’ouvre alors, à nouveau réglez les pixels comme vous le souhaitez, vous obtiendrez un fond de couleur grise avec une mise en avant des détails par un effet « ombre/lumière ».

Ensuite, changez le mode de fusion de votre calque. Pour cela, cliquez sur le mode « Normal », et sélectionnez « Lumière crue ». Vous pouvez ensuite régler le pourcentage d’opacité.

Pour finir, pour donner plus de contraste à la photo, créez un calque de réglage (menu « Calque » / « Nouveau calque de réglage « ). Choisissez celui qui vous semble le plus approprié afin de redonner du dynamisme à votre photo.

Ecrire un texte sur un document photoshop, horizontalement et verticalement.

L’outil Texte sur Photoshop : création d’une zone de texte sur un document Photoshop, pour un texte horizontal, mais aussi en écriture verticale

L’outil Texte est indispensable et important dans tout type de document, c’est pourquoi nous vous proposons une petite aide afin que vous sachiez plus précisément utiliser cet outil, que vous pourrez par la suite placer sur n’importe quel support.

outil texte photoshop

Dans le panneau d’outils situé à gauche de votre écran, vous trouverez la lettre « T ». Celle-ci désignera l’outil Texte, et vous permettra de créer une zone de texte sur tout type de document que vous voudrez utiliser. Pour cela, il vous suffira de cliquer sur cet icône, et diriger votre souris sur le document afin de créer un cadre qui vous servira de bloc de texte. Rien de bien difficile donc, mais pour le sélectionner facilement, vous pouvez directement appuyer sur la touche “T” comme texte, ce qui vous permettra de sélectionner l’outil directement à partir de votre clavier sans utiliser la souris. En utilisant tous ces raccourcis des outils, vous gagnerez du temps pour beaucoup d’efficacité.

Vous pourrez ensuite sélectionner ce cadre, et le déplacer où vous en aurez envie.

L’outil Texte, un outil aux diverses fonctionnalités.

Si vous faites un clic droit sur ce « T », vous découvrirez qu’il y a d’autres icônes dans ce même outil. Ceux-ci ont tous une utilisation différente.

  • Outil Texte horizontal
  • Outil Texte vertical
  • Outil masque de texte horizontal
  • Outil masque de texte vertical

Vous pourrez alors placer votre texte comme bon vous semble, en fonction de vos attentes, et des caractéristiques de vos documents.

Ensuite, grâce aux diverses fonctionnalités que propose Photoshop CS6, comme pour tout autre logiciel, vous pourrez choisir la police de caractère, la taille, la position (aligné à gauche ou droite, centré), mais également, la couleur de votre texte, dans cette barre d’outils située au dessus de votre document.

En revanche, n’oubliez pas que le calque texte est un modèle type de calque qui ne réagit pas comme les autres calques. A partir de là donc, si vous souhaitez appliquer des modifications comme sur les autres calques, il faudra au préalable le pixeliser pour obtenir un calque standard.

Toutes ces fonctionnalités montrent donc que cet outil si indispensable peut être très large d’utilisation. Nous verrons donc plus précisément chacunes de ses fonctionnalités dans nos prochains articles, plus spécifiques à celles-ci.

Les principaux raccourcis clavier sur Photoshop CS6

Voici une liste résumée des raccourcis à utiliser sur Photoshop pour aller plus vite.

Il s’agit ici de Photoshop CS6 que j’ai sous la main, mais la plus grande partie de ces raccourcis sont les mêmes sur les versions CS5, CS4 et CS3.

Ce qu’il faut comprendre sur les pack adobe c’est qu’il y a deux types de raccourcis :

  • Les raccourcis d’action : ceux qu’on peut retrouver sur Excel ou d’autres programmes.raccourcis-photoshop
  • Les raccourcis pour atteindre des outils, typiques des logiciels de la suite Adobe Creative.

Les raccourcis d’action  : Eviter de prendre la souris pour aller plus vite.

    • Nouveau – CTRL  + N
    • Ouvrir – CTRL  + O
    • Enregistrer – CTRL  + S
    • Imprimer – CTRL  + P
    • Fermer  – CTRL  + W
    • Quitter – CTRL  + Q
    • Tout sélectionner – CTRL  + A
    • Désélectionner – CTRL  + D
    • Annuler – CTRL  + Z
    • Couper – CTRL  + X
    • Copier – CTRL  + C
    • Coller – CTRL  + V
    • Transformer – CTRL  + T
    • Préférences – CTRL  + K
    • Niveaux – CTRL  + L
    • Courbes – CTRL  + M
    • Inverser – CTRL  + I
    • Fusionner avec un calque inférieur – CTRL  + E
    • Grouper les calques – CTRL  + G
    • Monter les calque – CTRL  + ]
    • Descendre le calque – CTRL  + [
    • Afficher taille écran – CTRL  + 0
    • Afficher les règles – CTRL  + R

Il y en a encore de très nombreux, à partir du moment où on combine plus de trois touches il est difficile de s’en souvenir. En revanche pour réussir à se souvenir des combinaisons simples, vous verrez que les moyens mémotechniques de manquent pas puisque c’est la première lettre du terme qui indique le raccourcis (en anglais).

Ainsi pour faire une impression (Print en anglais), vous ferez CTRL +P. Ces raccourcis sont valables pour bien d’autres programmes, mais sous photoshop, avec le jeu de la souris et les nombreux outils à utiliser, l’utilisation des raccourcis est précieuse et vous fera gagner beaucoup de temps.

S’agissant des raccourcis pour les outils photoshop, seul une lettre suffit pour activer votre fonction.

  • Outil Sélection – V
  • Outil Texte – T
  • Outil Lasso – L
  • Outil Pinceau – B
  • Outil Plume – P
  • Outil Zoom – Z (pour le zoom opposé, appuyez sur la touche ALT en même temps)
  • Inversion de couleur – x

Voilà pour les plus utilisés. Si vous avez d’autres habitudes et une bonne mémoire, posez simplement la souris sur votre “outils”. Vous pourrez alors voir une bulle d’information jaune qui vous donnera la raccourcis. C’est pourquoi je ne les liste pas tous!

 

Faire une ombre sur une image en CSS3 avec boxshadow

CSS3 : Alléger ses images pour diminuer le poids de ses images.

ombre-en-css3L’objectif du CSS3 est d’éviter l’intégration d’images éditées avec Photoshop, permettant ainsi d’alléger le poids d’une page, ce qui a des conséquences directes avec le référencement on le sait.

C’est pourquoi la maîtrise du CSS3 a toute son importance et présente de nombreux avantages.

Je vois encore aujourd’hui beaucoup trop de textes intégrés sous forme d’images alors que la création d’une ombre peut être faite directement en css.
Si à l’époque il était nécessaire passer par la création d’une image, désormais, quelques lignes vous permettront de créer une ombre pour les images de votre site internet. Plus besoin donc de maîtriser Photoshop lorsqu’on est webmaster, mais en revanche, il est devenu nécessaire aux spécialistes de savoir créer en CSS3 au delà de la simple création graphique.

Boxshadow est la propriété qui permet de créer un effet d’ombre sur un objet. Pour cet exemple nous choisirons une image.

img { box-shadow: 8px 8px 0px #aaa; }

En posant ce code en propriété CSS de cette image, vous intégrer autour de l’image l’ombre voulu avec dans l’ordre:

  • Le premier “8 px”, intègre la valeur horizontal de l’ombre.
  • La deuxième intègre la valeur vertical
  • Et la troisième détaille l’estampage pour estamper votre ombre. A 0px d’estampage comme dans l’exemple, l’ombre est net. entre 8 et 15 permet d’avoir un vrai effet d’ombre.
  • Le dernier paramètre, vous l’aurez deviner permet de régler la couleur.

Cette propriété est du CSS3, ce qui implique que les anciens navigateurs ne peuvent pas le lire. Il faut au moins les dernières versions de début 2012.

 

 

Importer des Photos sur Photoshop avec Bridge

A quoi sert Bridge pour Photoshop? A gérer les importations!

bridge cs6Bridge vous permettra de sélectionner plusieurs images directement sans passer par une préorganisation de votre dossier de photo, simplement en profitant de Bridge qui est lié à Photoshop.
En sélectionnant ces dernières il vous suffit ensuite de les traiter avec un “traitement en lots” ou d’engager des scripts qui vous permettront sur Photoshop de faire des traitements automatiques.
Pour ce faire, toucher la première photo en conservant le doigt appuyé sur la touche MAJ, puis sélectionnez la photo en bas (ou à droite) la plus lointaine permettant ainsi de regrouper votre sélection pour l’importer.
Si par la suite vous souhaitez faire autrement et sélectionner des images éparses, au lieu de sélectionner les photos en utilisant la touche MAJ, il vous suffira appuyer sur la touche CTRL. Cela ne sélectionnera donc que les photos cliquées.
L’autre avantage, c’est qu’en faisant cela en sélectionnant plusieurs images en même temps, même s’il ne font pas partie du même thème ou du même dossier, vous pourrez leur attribuer des mots clés communs que ce soit pour la date le lieu, ou encore un mot clé qui correspond au montage photo que vous souhaitez réaliser grâce à Photoshop.
Ainsi Bridge vous permet d’aller plus loin mais vous permet surtout d’automatiser les tâches et d’intégrer des photos avec Photoshop de façon beaucoup plus facile qu’avec l’explorateur de votre Windows 8 habituels.

Peindre un bâtiment sur Photoshop : Les différents outils de peinture

Peindre sur photoshop est l’un des objectifs principaux dans le traitement d’image en PAO. Le changement de couleur ou l’intégration d’une nouvelle matière sur un bâtiment sont des fonctions bien pratiques. C’est par les outils de peinture que sont le crayon, le pinceau et la fonction remplacement de couleur que l’on parvient à ses fins pour réaliser ce type de changements.

Les deux principales techniques de peinture sur Photoshop : L’outil peinture et la gestion de la plume

La plus classique : L’utilisation de l’outil “peinture” : Il suffit de sélectionner l’outil et de peindre sur le document ou sur la sélection de ce document si vous ne souhaitez appliquer la peinture que sur la zone sélectionner.
Pour les plus imprécis, il vous sera nécessaire de travailler avec une tablette graphique afin d’éviter les débordements.

Depuis la version CS5 et CS6 vous pourrez profiter de nouvelles formes de peintures et vous pourrez les associer au dernier nez qu’est l’outil pinceau “mélangeur”.

Le pinceau mélangeur permet de reproduire des matières ou des applications naturelles. Si vous retouchez par exemple une peinture réalisée à l’huile, vous pourrez grâce à ce nouvel outil, travailler en appliquant votre couleur sous la forme de cette matière. Peinture à l’huile, aquarelle ou autres, les choix sont larges.

S’agissant de l’application d’une peinture par l’outil plume, il offre l’avantage de réaliser des tracés et donc d’offrir un naturel plus fort. Un peu comme un détourage par la plume face à un détourage simple, c’est une méthode qui vous permettra d’avoir des contours plus naturels.

Une fois cela réaliser, c’est l a précision de vos réglages et la définition des modes de peinture qui feront la différence.

outil crayonUn dernier point cependant, c’est pour l’outil crayon : Il fonctionne un peu comme le pinceau et présente des avantages quand il est utiliser avec un peu de transparence. En réglant le flux, l’effet du crayon brut peut être atténué. Un bon moyen donc pour faire de faibles ajustements.

Les réglages sont longs. Si vous avez défini des réglages calqués sur un tutoriel précis qui est là pour réaliser une opération précise, vous devriez rapidement reproduire les paramètres de vos réglages. Si en revanche, vous êtes en pleine phase créative sur Photohop, pensez à enregistrer les réglages de vos outils de peinture. Une fois cet enregistrement réalisé, vous pourrez appliquer à nouveau les paramètres préalablement enregistrés en sélectionnant les “outils prédifinis”.

Google impose les formes simples et discrètes dans la PAO, au service du SEO.

Google pose les règles sur l’importance graphique d’un site Web.

Jusque là, Google suivait la mode et n’imposait rien en matière de graphisme. On pouvait d’ailleurs trouver Google un peu en retard sur les bases qu’étaient les couleurs pastelles, les formes estompées etc…
C’est l’annonce de Google Now qui pose de nouvelles bases puisque pour la première fois on voit une réelle modification dans le style de Google en amont du projet.

Rappelons nous de ce qu’était Google il y a moins de deux ans : Les mêmes couleurs vives, des formes rondes avec des dégradés intégrés, et surtout une bonne vieille police soutenu par des liens hypertextes en bleu pétrole criant.

Bref, Google était à la pointe de la techno mais posait la question graphique en deuxième position, loin derrière le code. Une qualité exigée pour le fond et la construction qui désormais est également là pour la forme et on voit même que le célèbre moteur de recherche fait des emplettes et propose une qualité incroyable dans le graphisme exploité sur les téléphones portables et les tablettes graphiques.

Google sait et comprend que le graphisme d’un site web est étroitement lié à son efficacité et au sérieux de son propriétaire.
En contrôlant le poids des images de pages web et la construction des sites, Google indique d’ailleurs qu’à défaut de pouvoir contrôler la qualité graphique, il y a des règles de base à respecter.

Le design doit donc être travaillé dans les plus grandes finesses et Photoshop reste la solution pour cela. Si les contours de certaines formes et la mise en place d’effets peut être fait par le Css, il faudra encore compter sur Photoshop pour assurer la base de la création, qui répond aux besoins de l’utilisateur d’un site web. C’est donc par Photoshop que l’on optimisera son taux de rebond, au service in fine, des positions sur Google.

CSS3PS, un outil permettant de transformer du PSD en CSS3!

Un logiciel pour transformer un fichier photoshop en Css.

La venue du CSS3 a permis de faire avancer beaucoup de chose et de simplifier la vie des codeurs, et surtout celle des assembleurs! La création d’une DIV associé à un bout de css est désormais plus facile depuis que les navigateurs interprètent le CSS3. Plus besoin d’allier des bouts d’images pour faire un recoin, plus besoin de faire un fichier psd en repeat x pour faire un beau dégradé.

L’évolution va donc vers le maximum d’intégration CSS, afin d’éviter les allers retour en Photoshop et sa feuille de code.

Mais si Photoshop offre du perfectible au niveau graphique, le problème reste le poids des fichiers et la nécessité de sur-optimiser ces derniers pour ne pas être pénaliser au niveau du SEO.

Dès lors, les formations sur la questions poussent et il n’est pas rare de voir des graphistes à la recherche de formations sur le CSS pour apprendre à assembler leur travail et proposer autre chose qu’un résultat en psd ou de petites images en png.

Cette passation d’arme entre photoshop et le CSS3 pour le “petites choses” témoignent en réalité d’une évolution forte du CSS3 qui n’est plus fait que pour les codeurs.

CSS3PS, vous permettra d’ailleurs de transformer un PSD en CSS3, pour simplifier les petites actions et gagner du temps en ayant un visuel codable.

Il s’agit d’un plugin à installer sur photoshop, ce dernier prendra alors une place discrète au bas droit de votre feuille.

Après avoir éditer vos calques, entre autres ceux que vous souhaitez transformer en CSS, il suffit de les sélectionner et de cliquer sur le boutton CSS3PS qui apparaît sur Photoshop après avoir installer le plugin.

Vous aurez alors une fenêtre qui s’ouvre avec un paragraphe par calques, correspondant au code CSS que vous n’aurez plus qu’à intégrer.

Pour les puristes du CSS, vous pourrez évidement faire les corrections et les ajustements si vous trouvez que certaines lignes sont trop lourdes ou mal écrites, mais vous pourrez voir que le résultats est particulièrement étonnant.

De même, au delà de la transformation d’un objet à intégrer pour la création d’un site, c’est aussi un outil formidable pour “traduire” un pensée graphique. C’est le cahier de brouillon du CSS permettant de visualiser votre pensée et la mettre en forme avec moins d’efforts.