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.