Aller au contenu
  • billets
    24
  • commentaires
    3
  • visualisations
    28 631

A propos de ce blog

Un blog d'actu et de conseil sur le graphisme multimedia

Billets de ce blog

 

Prochainement : Créer un bandeau hightech

Prochainement : Créer un bandeau hightech sous Photoshop CS2 Un bandeau qui sera util pour les communautés online, les concepteurs de logiciels, les sites de musiques electroniques, et d'autres

tankia

tankia

 

Photoshop : S'organiser et gagner en efficacité

S'organiser et gagner en efficacité sous Photoshop CS2 Niveau de difficulté 1 Comme vous avez pu le voir dans le précédent billet Créer un nouveau calque et le nommer, il suffit de connaître et de mémoriser quelques petites astuces simples et rapides pour gagner en efficacité sur photoshop. Ici, vous allez voir 2 nouvelles combines qui vont vous permettre d'organiser votre composition photoshop et à terme de ne plus vous perdre au milieu de tous vos calques. 1/ Je nomme mes calques Oula, je sais ce que vous vous dites : "Il vient de créer son blog sur Webmaster-hub et il radote déjà, ça promet pour la suite !". Moi je vous réponds un gros "Oui, mais !". Nommer ses calques, c'est tout de même la base de l'organisation de sa composition photoshop et cela permet d'éviter de long moment de solitude lorsqu'on ressort son fichier quelques semaines, voire quelques mois plus tard. Je vous invite donc à lire ou relire la conclusion du précédent billet Créer un nouveau calque et le nommer. 2/ A la recherche du calque perdu Si je vous dis qu'en un clic on peut sous photoshop retrouver un calque situé sur notre plan de travail, vous allez me croire ? Et bien j'espère que oui car c'est possible. L'outil déplacement doit être activé avec le raccourci V, ensuite, en cliquant sur le bouton droit de votre souris la liste des calques situés le plus près du pointeur de votre souris apparaît. Il ne reste plus qu'à sélectionner le calque que vous ne trouviez plus et le tour est joué. Cette astuce est très pratique aussi lorsque vous avez plusieurs calques qui se chevauchent et que vous voulez en sélectionner un qui n'est pas au premier plan 3/ Les annotations Il existe une fonctionnalité dans photoshop peu connue et donc peu utilisée mais pas pour autant inutile, l'outil annotation. C'est une sorte d'outil mémo ou bloc note grâce auquel on peut très rapidement écrire une petite note ou indication sur son plan de travail photoshop. J'ai dis écrire ? Il y a encore mieux maintenant il faut penser multimédia , on peut carrément enregistrer sa petite note à l'aide d'un micro, c'est encore plus rapide que de l'écrire non ? Pour cela, il suffit d'utiliser le raccourci clavier N pour l'annotation écrite et N une seconde fois pour une annotation audio. Ensuite pour écrire une annotation sur votre plan de travail, il faut cliquer-glisser une zone et taper sa petite note. La zone de texte est réajustable et elle se cache quand vous ne voulez plus la voir, un petit feuillet jaune reste pour vous indiquer qu'il y a une annotation à cette endroit. Dans l'avenir, il vous suffira de double-cliquer sur cette petite icône jaune pour vous relire ou vous réécouter (dans le cas d'une annotation audio). Sur le screenshot, j'ai mis un exemple d'annotation qui me rappelle que ma photo "Kiwi" a été validée par le client le 18 décembre 2006 et que je dois acheter le fichier à l'adresse http://www.fotolia.fr/id/557375 . J'aurais aussi très bien pu mettre une annotation sur un repère qui me montre la limite d'une résolution de 800 par 600 pixels pour savoir ce qu'un visiteur verra de mon interface de site sans utiliser la barre de défilement de son navigateur. Ce sont deux exemples qui illustrent l'outils annotation, mais chacun d'entre nous a ses propres besoins, et quelque soit le besoin cet outil vous sera très utile dans votre organisation, et vous fera gagner en efficacité .

tankia

tankia

 

Photoshop : Libérer votre créativité

Attribution de calques à un calque sous Photoshop CS2 Niveau de difficulté 1 Je vais vous présenter une fonction de photoshop qui va changer votre façon de créer vos interfaces ou vos images. Cette nouvelle astuce va libérer votre créativité, vous allez pouvoir oser de nouvelles choses. Non je ne parle pas d'alcool ou de drogues en tout genre et encore moins d'une nouvelle secte et de son grand gourou, mais de l'attribution de calques à un calque. Laissons les étapes nous montrer la voie . 1/ Création du premier calque Créer un nouveau calque et le nommer J'ai pris une photo avec 2 cerfs, je les ai détouré puis mis en silhouette noire pour bien voir le résultat final. J'ai 2 calques : mon fond blanc et mes silhouettes de cerfs. 2/ Le deuxième calque Ensuite, je crée un deuxième calque Ctrl + Maj + N que je nomme Dégradé, puis avec l'outil dégradé U activé, je trace un dégradé sur mon deuxième calque fraîchement créé. Ce qui me donne : 2/ J'attribue le deuxième calque au premier calque Et c'est à cette étape que ça devient intéressant. Je vais attribuer mon calque Dégradé au calque 2 cerfs. Pour ce faire, rien de plus simple : j'appuie sur la touche Alt de mon clavier et tout en maintenant la touche pressée je clique entre mes 2 calques. Vous verrez une icône apparaître lorsque votre curseur sera entre vos 2 calques : Le calque Dégradé prend la forme de la silhouette de mes 2 cerfs : On peut évidemment attribuer plusieurs calques à un même calque. Je vous laisse imaginer toutes les possibilités qui s'offrent à vous en termes de créativité !

tankia

tankia

 

Photoshop : La duplication (2ème partie)

La duplication (2ème partie) sous Photoshop CS2 Niveau de difficulté 1 Je duplique, tu dupliques, il duplique, ... C'est bien beau tout ça, mais est-ce que tous ces gens connaissent les astuces de pros de ce 2ème billet sur la duplication ? A vrai dire, je n'en sais rien mais je leur conseille tout de même de découvrir la suite de La duplication (1ère partie) avec 2 nouvelles astuces pour dupliquer sur photoshop efficacement. J'ai mis en téléchargement le fichier photoshop pour vous accompagner tout au long des explications, il n'est pas indispensable mais c'est un plus pour comprendre : duplication-tomato.psd 1/ Dupliquer un calque Pour cette astuce, rendez-vous dans notre fenêtre des calques préférées (qui va surement devenir votre meilleure amie, après la barre d'outils et les raccourcis claviers ), pour l'afficher, j'appuie sur le raccourci F7. J'ai deux calques, le fond Bg et mon image de soupe en boîte Boîte tomato. Et j'ai envie de me servir de la société de consommation comme sujet et médium artistique (ça ne vous rappelle pas quelqu'un ) Pour le faire, je clique sur le calque Boîte tomato dans la palette des calques en maintenant la touche Alt enfoncée et je glisse le calque entre le calque Boîte tomato d'origine et le calque Bg, je relâche le clique de ma souris, le calque est dupliqué, il se nomme automatiquement Boîte tomato copie. Je répète l'action/la duplication 3 fois pour arriver à cette composition : 2/ Grouper les calques et dupliquer ce groupe Maintenant, je vais mettre tous les calques qui constituent ma première ligne de boîte de soupe à la tomate dans un groupe. Pour cela, ça se passe comme dans un dossier windows pour la sélection des calques dans la palette des calques. Je clique sur le calque Boîte tomato j'appuie sur la touche Maj et tout en la maintenant enfoncée, je clique sur le calque Boîte tomato copie 3. Mes calques sont sélectionné j'appuie sur Ctrl + G pour les grouper et je nomme ce groupe Rangée 1. Je duplique le groupe de la même façon qu'un calque (Sélection du groupe dans la palette des calques, Alt, cliquer-glisser, et compagnie )... Puis je décale mes lignes de boîte de conserve avec l'outil Déplacement V en ayant sélectionné un groupe dans la fenêtre des calques. Et voici ce que ça nous donne côté créa : Grâce à cette astuce de duplication sous photoshop vous pouvez recréer facilement les plus grandes oeuvres de Andy Warhol, et surtout vous servir du concept de la série pour vos propres créations. Vous verrez dans une autre Astuce photoshop un autre moyen de créer des séries de motifs...

tankia

tankia

 

Photoshop : La duplication (1ère partie)

La duplication (1ère partie) sous Photoshop CS2 Niveau de difficulté 1 La duplication est très utilisée sur photoshop tout particulièrement dans le web, on retrouve souvent des éléments répétitifs sur les interfaces graphiques de site Internet. On peut distinguer 3 aspects de duplication sous photoshop, dans ce billet je vais parler du premier qui est "la duplication d'un élément graphique à l'intérieur d'un même calque" et l'utiliser à deux fins différentes : multiplier le fond d'un bouton et agrandir le fond d'un bouton. Pour mieux comprendre les lignes qui vont suivre, je vous invite à télécharger ce fichier psd que j'ai fait en plus des textes et des screenshots pour que vous ne soyez pas perdu. 1/ Dupliquer sur un même calque Ouvrez le fichier bouton-dupliquer.psd dans photoshop. Le bouton forum style menu apple est visible, il est composé de 3 calques : Bg pour le fond blanc, Btn pour le fond du bouton et un calque texte pour l'intitulé du bouton forum. Cliquez sur le calque Btn pour travailler sur ce calque uniquement. Appuyez sur le raccourci clavier M pour activer l'outil sélection rectangulaire, et faites un cliquer-glisser pour sélectionner l'élément graphique du fond du bouton forum. Appuyez maintenant sur le raccourci clavier V pour activer l'outil déplacement. Survolez la zone sélectionnée et vous voyez apparaître une paire de ciseaux à côté de la flèche noire du pointeur. Appuyez et maintenez enfoncer la touche Alt de votre clavier, l'icône change, une deuxième flèche apparait mais blanche. C'est le pointeur de la duplication. Tout en maintenant la touche Alt enfoncée, cliquez-glissez la sélection pour la dupliquer à la droite du premier bouton. Astuce pour garder alignée la duplication : maintenez la touche Alt enfoncée et la touche Maj en même temps. Appuyez sur le raccourci clavier Ctrl + D pour désélectionner l'élément dupliqué. Vous avez 2 fois le même fond de bouton sur l'unique calque Btn. 2/ Astuce : élargir rapidement un bouton Ouvrez le fichier bouton-dupliquer.psd dans photoshop. Le bouton forum style menu apple est visible, il est composé de 3 calques : Bg pour le fond blanc, Btn pour le fond du bouton et un calque texte pour l'intitulé du bouton forum. Cliquez sur le calque texte forum pour travailler sur ce calque uniquement. Appuyez sur le raccourci clavier T pour activer l'outil texte et cliquez sur Forum pour modifier le texte du bouton. Tapez à la place : Règles du forum. Ne cherchez pas à le déplacer, je vous le confirme, ce texte ne rentre pas dans ce bouton Cliquez sur le calque Btn pour travailler sur ce calque uniquement. Appuyez maintenant sur le raccourci clavier V pour activer l'outil déplacement. Survolez la zone sélectionnée et vous voyez apparaître une paire de ciseaux à côté de la flèche noire du pointeur. Appuyez ensuite sur le raccourci clavier M pour activer l'outil sélection rectangulaire, et faites un cliquer-glisser pour sélectionner la partie droite sans le coin arrondi gauche de l'élément graphique du fond du bouton forum. Appuyez et maintenez enfoncer la touche Alt de votre clavier, l'icône change, une deuxième flèche apparait mais blanche. C'est le pointeur de la duplication. Tout en maintenant la touche Alt enfoncée, cliquez-glissez la sélection pour la dupliquer vers la droite et laissez chevaucher l'élément dupliqué sur l'élément d'origine. Astuce pour garder alignée la duplication : maintenez la touche Alt enfoncée et la touche Maj en même temps. Appuyez sur le raccourci clavier Ctrl + D pour désélectionner l'élément dupliqué. Vous avez agrandi le fond de ce bouton et son intitulé ne pose plus de problème . Le duplication (2ème partie) est disponible

tankia

tankia

 

Photoshop : Devenir un pro du flashback

Devenir un pro du flashback sous Photoshop CS2 Niveau de difficulté 1 Contrairement à ce que beaucoup d'utilisateurs croient, revenir en arrière "où je veux, quand je veux et comme je veux", c'est possible dans Photoshop. Non, ce billet ne va pas être un remake de Retour vers le futur (au passage si quelqu'un vend un hoverboard, je suis preneur, contactez moi par MP) ou un spectacle de L'Illusionniste, mais je vous promets qu'on ne va pas en être loin Allez en avant pour votre premier cours de magie... sous photoshop ! 1/ Revenir en un clic dans l'historique Personnellement, j'utilise cette technique plutôt pour la retouche de photo que pour la création d'interface web. Photoshop permet de visualiser les différentes actions éffectuées les unes après les autres depuis l'ouverture d'un document dans la palette historique Fenêtre > Historique. Et il permet de cliquer sur une des actions antérieures pour repartir de celle-ci. Dans l'exemple qui suit j'ai ouvert ma photo, j'ai utilisé un filtre aquarelle, tapé un texte et enfin déplacé mon arrière plan préalablement converti en calque. Il me suffit de cliquer sur Aquarelle pour supprimer toutes les actions qui suivent et faire d'autres tests après mon filtre Aquarelle 2/ Ctrl Z illimité (ou presque) Certains voudraient pouvoir revenir en arrière autant de fois qu'ils le souhaitent comme dans les logiciels vectoriels illustrator ou flash. Et bien dans photoshop aussi c'est possible (enfin presque*) ! Appuyez sur Ctrl + Alt + Z et vous pourrez revenir en arrière *autant de fois que le permet l'historique (c'est quand même beaucoup mieux que le Ctrl + Z unique ). Pour faire l'inverse et rétablir les actions supprimées, utilisez le raccourci Ctrl + Maj + Z. 3/ Revenir à zéro Vous avez testé pas mal de mises en page et d'effets mais rien ne vous plait ! Et bien il suffit de tout recommencer, quitter votre document sans enregistrer, rouvrir un nouveau document, rentrez les mêmes paramètres de base ou ouvrir la même photo de base... Un peu long tout ça non ? Et bien voici un raccourci qui va vous permettre de revenir à zéro avec vos paramètres ou votre photo de base sans rouvrir un nouveau document : Ctrl + F12. Il supprime toutes les actions qui suivent l'ouverture de votre document vierge

tankia

tankia

 

Photoshop : Des astuces "select" (1ère partie)

Des astuces "select" (1ère partie) sous Photoshop CS2 Niveau de difficulté 1 Si vous n'avez pas comprit le jeu de mot du titre passez votre chemin, les autres c'est bon vous pouvez découvrir ou revoir les 3 nouvelles astuces sur l'outil Sélection pour gagner beaucoup, beaucoup mais alors beaucoup de temps Quand on les connait on ne s'en passe plus, ça serait bête de passer à côté ! Allez trève de blabla on passe à l'action... 1/ Inverser ma sélection en... 1/4 de seconde Activez l'outil Sélection rectangulaire M (ou n'importe quel autre outil de sélection), sélectionnez l'élément que vous souhaitez garder. Vous pourriez inverser votre sélection en allant dans le menuu Sélection > Intervertir mais vous perdriez toujours quelques précieuses secondes à chercher dans un menu alors qu'un simple raccourci clavier ne vous prendrez qu'un quart de seconde : Ctrl + Maj + I. Votre sélection est intervertie appuyez sur Suppr pour supprimer ce que vous ne vouliez pas garder et enfin sur Ctrl + D pour déselectionner. 2/ Ajouter à ma sélection Nous ne sommes pas parfaits et nos sélections ne le sont pas non plus du premier coup. Il y a un moyen simple pour y remédier c'est de modifier notre sélection en ajoutant tout ce qui lui manque. On peut cliquer sur l'icône Ajouter à la sélection dans le menu des propriétés de l'outil Sélection : Mais il faudra alors revenir à chaque fois cliquer sur une icône différente dès lors qu'on souhaitera ne rien ajouter ou soustraire à la sélection, ce qui est très peu pratique. Pour gagner du temps, il suffit de rester sur l'icône Nouvelle sélection et d'appuyer sur le raccourci clavier Maj avant et pendant que vous cliquez-glissez la nouvelle sélection qui va s'ajouter à l'ancienne. Une icône sélection avec un petit + apparaît sur le curseur : 3/ Soustraire de ma sélection Pour soustraire de la selection, voici ce qu'il faut éviter de faire : Le raccourci clavier n'est pas le même que pour l'ajout à la sélection. En effet, pour soustraire il faut appuyer sur le raccourci Alt avant et pendant que vous cliquez-glissez la nouvelle sélection qui va se soustraire de l'ancienne. Une icône sélection avec un petit - apparaît sur le curseur Un bon utilisateur de l'outil Sélection sait jongler entre les touches Maj et Alt de son clavier pour tantôt ajouter à la sélection et tantôt soustraire de la sélection.

tankia

tankia

 

Photoshop : Créer un nouveau calque et le nommer

Créer un nouveau calque et le nommer sous Photoshop CS2 Niveau de difficulté 1 Créer un calque dans photoshop c'est très simple et c'est la base pour toute création sur ce logiciel (beaucoup d'autres fonctionnent avec des calques aussi comme flash ou illustrator). C'est une action récurrente lorsqu'on crée une image, il est donc important de bien connaître les astuces qui vont nous faire gagner beaucoup de temps, ce qui va nous permettre d'être plus efficace. 1/ J'ouvre la fenêtre des calques Visualiser les calques qui compose notre image est vital durant la création de celle-ci, la fenêtre des calques ne doit jamais être cachée. Pour l'ouvrir soit je clique sur Fenêtre > Calques et je perds 5 secondes et deux clics sur la vie de ma souris (estimée à 1 millions de clics ), soit j'appuie sur le raccourci clavier F7 et... miracle ! La fenêtre est ouverte 2/ Créer un nouveau calque Une image est généralement composée de plus ou moins de calques selon sa destination finale (une interface de site internet un peu complexe peu atteindre 100 calques). Pour créer un nouveau calque je peux cliquer sur la minuscule icône Créer un calque, quand vous avez réussi à la trouver et à mettre votre pointeur de souris dessus (en 1600x1200, c'est comme si vous arriviez à localiser la tour Eiffel depuis l'espace), un nouveau calque est ajouté avec le nom Claque n. Une autre technique qui nécessite une petite gymnastique des doigts est d'appuyer simultanément sur les touche de votre clavier Ctrl + Maj + N, ce qui produit exactement la même chose : un nouveau calque... mais en beaucoup plus vite ! 3/ Nommer ce nouveau calque Nommer son calque, ça prend 2 secondes et demi et pourtant nombre de graphistes ne le font pas. C'est dommage et c'est un grand manque de professionnalisme ! Je vous mets au défi de reprendre votre fichier photoshop 2 mois après sa dernière édition, car un client veut retoucher un peu le webdesign de son site. Une cinquantaine de Calque n vous attendent pour de bonnes heures de recherche avant de mettre enfin la main sur le calque du bouton contact bleu que le client préfère maintenant en rouge. Et surtout si vous travaillez dans une team de graphiste et intégrateur, si vous voulez vous faire des ennemis, ne nommer pas vos calques Pour nommer un calque, je double-clique sur le nom du calque, une zone de texte éditable apparaît je valide par la touche Entrée après avoir mit un nom explicite pour mon calque.

tankia

tankia

 

Nouvelle catégorie : "Eco logique"

Nouvelle catégorie sur dessiner le web baptisée : "Eco logique" Pourquoi ? Et bien parceque j'ai aussi envie de parler d'autre chose que de la création multimedia sur ce blog, pour le rendre plus humain et aussi pour vous faire partager mes "découvertes" en matière d'écologie. Ne vous trompez pas, je ne suis pas un militant de Greenpeace incollable sur le sujet, je suis comme vous, je découvre ici et là dans les revues, ou au cours de discussion entre amis des petites astuces ou des produits écolo sympa qui sont très simples et qui aident à moins polluer la planète. Je pense que cette nouvelle catégorie va aérer le blog et je me dis aussi, je me trompe peut être, que pas mal de hubmaster sont intéressés par ce sujet. Si ça vous intéresse, vous pouvez retrouvez les premiers billets de cette catégorie ici : Eco logique

tankia

tankia

 

Etape par étape : Créer un menu style Apple

Créer un menu style Apple sous Photoshop CS2 Niveau de difficulté 2 Pour ce premier Etape par étape, je vais créer un menu à onglets comme celui qui se trouve sur le site de Apple. Pourquoi celui là ? Parce que Apple joue un grand rôle dans le design informatique depuis 20 ans et il a aussi beaucoup influencé le graphisme des sites internet actuels. Un menu sert à naviguer sur un site web, il doit donc être très bien travaillé graphiquement, il ne faut surtout pas que l'internaute se fâche avec le premier médium qui va le relier au site internet. Le menu est un élément qui va vous accompagner tout au long de votre visite sur le site, si il est raté c'est un peu comme si vous étiez accueilli dans un avion par une hôtesse qui ressemblerait à Tatie Danielle, ça ne donne pas trop envie de prendre ce vol, non ? Pour commencer, ouvrez Photoshop CS2, ouvrez un nouveau document Ctrl + N. Dans la fenêtre Nouveau, remplissez dans l'ordre : Nom : Menu style Apple Résolution : 72 pixels/pouce Largeur : 700 pixels Hauteur : 100 pixels Mode colorimétrique : RVB 8bits Contenu de l'arrière plan : Transparent Cliquez sur le bouton OK, votre nouveau document s'ouvre. Quittez toutes les fenêtres sauf la fenêtre Calques et la Barre d'outils. Renommez le Calque 1 par Bg et remplissez le de gris clair avec l'outil Pot de peinture activé G puis Maj + G. 1/ Je dessine le fond du premier bouton Je crée un nouveau calque (au passage, j'apprends à ne pas perdre de temps pour créer un nouveau calque et le nommer), je le nomme tout de suite Btn. Je clique dessus dans la palette des calques pour le sélectionner et travailler uniquement sur ce calque. J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi : Rayon : 4px Mode : Normal Opacité : 100% Lissage : cochée Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer le fond de mon bouton comme sur la première image du screenshot. Ensuite, je vais enlever les coin arrondi en bas de mon bouton. Pour cela je vais activer l'outil Sélection rectangulaire M : Contour progressif : 0 px Style : Normal Et je vais sélectionner la partie inférieure de mon bouton et appuyer sur la touche Suppr pour la supprimer. Pour ajouter un contour gris foncé, en bas de la fenêtre des calques, je clique sur l'icône Ajouter un style de claque avec un petit F et un cercle noir comme fond et enfin je clique sur Contour. Dans la fenêtre des styles de calque qui est apparue remplissez : Taille : 1px Position : Extérieure Mode de fusion : Normal Opacité : 100% Type de remplissage : Couleur Couleur : 717171 Je clique sur le bouton OK pour valider le style de calque contour. Voici ce que ça donne du côté de la palette des calques : J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. 2/ J'ajoute les effets au fond de mon bouton J'ai un onglet blanc avec un contour gris foncé. Je peux m'arrêter là pour rester très simple, mais je souhaite rendre ce menu un peu agréable visuellement, je vais lui ajouter quelques effets sans en abuser pour lui donner un peu de relief et une matière "glossy". Je crée un nouveau calque Ctrl + Maj + N que je nomme Dégradé. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Dégradé est sélectionné pour travailler uniquement sur ce calque. J'active l'outil Dégradé G Couleur : noir/blanc OU noir/transparent Dégradé : Linéaire Mode : Normal Opacité : 100% Inverser : non cochée Simuler : cochée Transparence : cochée Je trace mon dégradé en faisant un cliquer-glisser de haut en bas en maintenant la touche Maj appuyée pour que mon dégradé soit parfaitement vertical. J'essaie que ça ressemble au screenshots (le dégradé est plus foncé chez vous, c'est normal on modifiera son opacité tout à l'heure). Maintenant, je me la joue subtile ! En effet, je vais sélectionner à l'aide de l'outil Sélection rectangulaire M la première bande de 1 pixel de hauteur supérieur de mon dégradé. Pour m'aider j'utilise l'outil Zoom Ctrl + +. Une fois sélectionnée, j'appuie sur Suppr pour supprimer cette petite bande de pixels rebelles Pour revenir en taille réelle : Ctrl + Alt + 0 ! J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. Je vais à cette étape ajouter la touche "glossy" à mon onglet. Pour cela rien de plus simple. Je crée un nouveau calque Ctrl + Maj + N que je nomme Glossy. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Glossy est sélectionné pour travailler uniquement sur ce calque. J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi : Rayon : 3px Mode : Normal Opacité : 100% Lissage : cochée Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer la touche "glossy" de mon bouton comme sur la deuxième image du screenshot. La largeur est volontairement un peu plus petite que le fond de mon bouton pour laisser apparaître 1 pixel de fond dégradé à la droite et à la gauche de mon effet "glossy", ça donne un effet de profondeur au bouton plus réaliste. Voici ce qui se passe au niveau de la palette des calques. J'ai modifié l'opacité du calque Dégradé à 35% et celle du calque Glossy à 90%. J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. La plus grosse partie du travail est faite 3/ Je nomme mon bouton, je le groupe et je le duplique Le calque Glossy est sélectionné. J'active l'outil Texte T et je clique sur ma zone de travail, je tape le texte de mon bouton. A titre d'exemple pour les paramètres du texte : Police de caractère : Myriad Style : Roman ou Regular Taille : 15 pt Anti aliasing : Précis Alignement : fer à gauche Couleur : noir (hexa : 000000) J'appuie sur la touche Entrée au centre de mon clavier et non celle de droite pour valider mon texte. Un calque de texte s'est créé dans la palette des calques. Je peux bien replacer mon texte avec l'outil Déplacement V. Je vais mettre une opacité de 60% à mon calque de texte et je valide avec la touche Entrée. Maintenant, je vais mettre tous les calques qui constituent mon bouton dans un groupe. Pour cela, ça se passe comme dans un dossier windows pour la sélection des calques dans la palette des calques. Je clique sur le calque Btn j'appuie sur la touche Maj et tout en la maintenant enfoncée, je clique sur le calque de texte. Mes calques sont sélectionné j'appuie sur Ctrl + G pour les grouper et je nomme ce groupe Bouton 1. Pour ajouter des boutons à mon menu, il me suffit de dupliquer ce groupe bouton1 autant de fois que je le désire. Pour le faire, je clique sur le groupe bouton1 dans la palette des calques en maintenant la touche Alt enfoncée et je glisse le groupe entre le groupe bouton1 d'origine et le calque Bg, je relâche le clique de ma souris, le groupe est dupliqué, il se nomme automatiquement bouton1 copie. Vous pouvez très bien le renommer bouton2 ou bouton contact, c'est suivant votre choix de méthode d'organisation (S'organiser et gagner en efficacité). J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. 3/ Je vous laisse finir En effet, vous disposez maintenant de tous les éléments pour finir ce menu seul, je vous mets quelques screenshots d'indication pour vous guider un peu. Si vous souhaitez mettre un texte plus grand qui ne rentre pas dans votre onglet, je vous conseille la lecture de ce billet sur la duplication. Si vous avez un souci ou une idée à propos de cet Etape par étape, postez un commentaire avec si possible votre image que vous pouvez héberger gratuitement sur hiboox comme je le fais dans mon hublog N'hésitez surtout pas à poster aussi vos réalisations !

tankia

tankia

 

Eco Logique : rouler à l'huile végétale ou au bioéthanol

Rouler à l'huile végétale ou au bioéthanol "Les ressources de pétrole sont quasiment toutes épuisés, le prix du baril ne cesse d'augmenter et surtout, face au réchauffement climatique, cela en devient criminel de démarrer sa voiture qui roule à l'essence ou même au diesel pour se rendre sur son lieu de travail ou même aller chercher ses enfants à l'école." Cette phrase on l'entend tous les jours à le télé, à la radio, et on la lit partout dans les journaux et sur le web comme maintenant. Avons-nous fait quelque chose pour changer ça depuis ? Euh non mais... Non. Aujourd'hui on nous propose des solutions très économiques, plus respectueuse pour l'environnement et surtout très simples. Convertir son véhicule essence au bioéthanol ou son véhicule diesel à l'huile vegetale sont 2 des solutions au problème, et elles sont rapides à mettre en place (un aller-retour chez son "éco garagiste" qui fait la conversion du moteur, et... c'est tout). Il est aussi intéressant de se poser une question d'ordre économique assez simple : A combien était votre litre de gasoil il y a 5 ans ? Quand on sait que le coût de l'HVP (huile végétale pure) peut varier de 0.50 à 0.80/litre aujourd'hui. Ou que le prix du litre d'éthanol est de 0.79 le litre en moyenne contre 1.25 le litre de sans plomb 95. Bref, je ne vais pas m'étaler sur les infos à ce sujet, on connait tous les réponses à ses questions simples, maintenant il suffit de passer à l'action. Le but de cet article étant surtout de donner des idées d'alternatives plus respectueuses de l'environnement et simple à mettre en place. Pour se renseigner sur le sujet : Bioéthanol > http://www.bioethanolcarburant.com/ Huile végétale > http://www.oliomobile.org/ Pour passer à l'action : Conversion de moteur à l'huile végétale et au bioéthanol > http://www.seeflex.fr

tankia

tankia

 

Eco logique : Rendez-vous le 1er février pour la planète

5 minutes de répit pour la planète J'ai reçu ce mail, il y a quelques semaines mais j'ai décidé de transmettre son message seulement aujourd'hui pour que personne n'oublie le rendez vous pour la planète, notre planète. Le rendez-vous est fixé Le 1er février 2007, de 19h 55 à 20h 00 et dans toute la France : Participez à la plus grande mobilisation des citoyens contre le Changement Climatique ! L'Alliance pour la Planète (groupement national d'associations environnementales) lance un appel simple à tous les citoyens : 5 minutes de répit pour la planète : tout le monde ETEINT ses veilles, lumières et appareils éléctriques => le 1er février 2007 entre 19h55 et 20h00. Il ne s'agit pas d'économiser 5 minutes d'électricité uniquement ce jour-là, mais d'attirer l'attention des citoyens, des médias et des décideurs sur le gaspillage d'énergie et l'urgence de passer à l'action ! 5 minutes de répit pour la planète : ça ne prend pas longtemps, ça ne coûte rien, et ça montrera aux candidats à la Présidentielle que le changement climatique est un sujet qui doit peser dans le débat politique. Pourquoi le 1er février 2007 ? Ce jour là sortira, à Paris, le nouveau rapport du groupe d'experts climatiques des Nations Unies. Cet événement aura lieu en France : Il ne faut pas laisser passer cette occasion de braquer les projecteurs sur l'urgence de la situation climatique mondiale. Si nous y participons tous, cette action aura un réel poids médiatique et politique, moins de trois mois avant l'élection présidentielle! Contact/information : Cyrielle, Les Amis de la Terre : 01 48 51 18 95 Les résultats publiés le 2 février 2007 : 3 millions de foyers éteints !

tankia

tankia

 

Dessiner le web : Changement d'adresse !

Le hublog Dessiner le web change d'adresse ! Pour des raisons évidentes j'ai décidé de modifier l'adresse du blog. La nouvelle adresse nous renseigne plus sur le site qu'on s'apprête à visiter non ? Ce n'est plus : www.webmaster-hub.com/blog/tankia Mais comme vous avez pu le remarquer la nouvelle adresse est : www.webmaster-hub.com/blog/dessiner-le-web De plus, j'ai rajouté des boutons pour syndiquer Dessiner le web et recevoir en direct les nouveaux articles par fil rss :

tankia

tankia

 

Actu : Typedrawing (Dessiner avec des lettres)

Typedrawing (Dessiner avec des lettres) Typedrawing est un outil en ligne pour dessiner tout ce qu'on veut avec des mots, des lettres et des symboles. Le rendu final est souvent sympa, on peut créer de très beaux éléments graphiques pour les insérer dans de futures créations Le lien : http://storyabout.net/typedrawing/

tankia

tankia

 

Actu : Top 100 des meilleures polices de caractère

Top 100 des meilleures polices de caractère FontShop a tenté de lister le top 100 des meilleures polices de caractère. La sélection a été faite à 30% sur le rôle dans l'histoire de la typographie, à 30% sur l'esthétisme et à 40% sur le nombre de fontes vendues. Avant de lire ce top 100 il est important de souligner que le jury était allemand et américain, et qu'en plus les polices libres de droits n'ont pas été comptées. A défaut d'être un top 100 très subjectif (un peu comme toutes les top listes) et très marketing (en effet, on peut maintenant acheter le cd top 100 de FontShop ) on peut y lire quelques informations sur les différentes fontes (surtout dans le dossier PDF en téléchargeable) et découvrir certaines typos. Le site (en allemand) : http://www.100besteschriften.de/ Si quelqu'un peut traduire un peu du PDF en allemand, ça m'intéresse ne parlant que l'anglais/espagnol

tankia

tankia

 

Actu : Quand les rêves deviennent réalité

Une campagne de rêves pour Disney La photographe Annie Leibovitz a été choisie pour shooter les photos de la dernière campagne de Disney "Where Dreams Come True". Elle a réuni un casting de stars (Scarlett Johansson, Beyoncé et David Beckham) et les a magnifiquement mis en scène dans un décor tout droit sorti d'un dessin animé de Disney.

tankia

tankia

 

Actu : Palmarès de la pub 2006

Palmarès de la pub 2006 Si je vous dis "toutouyoutou", vous me répondez non pas Véronique et Davina mais bien 118218 ! Ne vous inquiétez pas vous n'êtes pas le seul, en effet, 118218 est entré dans toutes les têtes des français puisqu'il est le grand vainqueur de ce sondage Ipsos des meilleures publicités télévisées en 2006. Au menu de ce palmarès, de la transparence , de la complicité avec le télespectateur et bien évidemment de l'humour Palmarès Télévision 2006 1/ Le Numéro 118218 Score Ipsos : 40.8% Agence : Agence V 2/ Nike women Score Ipsos : 40.5% Agence : Wieden+Kennedy 3/ Okay Score Ipsos : 33.8% Agence : Les ouvriers du paradis 4/ PMU Score Ipsos : 20.1% Agence : Publicis conseil 5/ CCI "L'épargne évolutive" Score Ipsos : 19.6% Agence : Australie 6/ Alice Score Ipsos : 18.5% Agence : Paname 7/ Lotus Score Ipsos : 15.1% Agence : Les ouvriers du paradis 8/ Citroën Xsara Picasso Score Ipsos : 14.8% Agence : LEG 9/ Toyota Les bleus Score Ipsos : 14.5% Agence : Saatchi & Saatchi 10/ Perrier Score Ipsos : 13.6% Agence : Ogilvy Pour voir l'étude dans son intégralité et découvrir le palmarès Affichage 2006 : Palmares Ipsos de la pub 2006

tankia

tankia

 

Actu : Ombres chinoises et poésie

Ombres chinoises et poésie Volkswagen joue la carte de la poésie dans le monde de brutes qu'est le marché automobile avec sa dernière campagne pour la Phaeton réalisé par l'agence Grabarz & Partner. Quoi de mieux que le thème des ombres chinoises pour mettre en avant le magnifique pouvoir du travail de la main humaine ? Il fallait y penser, au final l'idée est simple, graphique et efficace... Dans un prochain Etape par étape, vous verrez comment réaliser simplement cette publicité sous After Effects

tankia

tankia

 

Actu : La refonte de Yves Rocher.fr au crible

Yves Rocher.fr : la nouvelle version au crible Un nouvel article très intéressant du Journal Du Net La refonte du site de Yves Rocher.fr par l'agence Nurun est un bon exemple de réponses aux nouveaux enjeux du site ecommerce qui sont de "renforcer la présence de la marque au sein de son site, et développer l'aspect relationnel et d'accompagnement". Au menu de cette refonte, une nouvelle charte graphique plus en accord avec la marque, une zone d'actualité sur la home et "un mini-site en flash intégré au site pour présenter les engagements éco-citoyens" et d'autres astuces ont été mises en place. Voir l'article : Yves Rocher.fr : la nouvelle version au crible Avant (version depuis 2001) Après (nouvelle version 2007) Les analyses de refontes des sites par le Journal Du Net Consulter les archives du web : les anciennes versions de sites

tankia

tankia

 

Actu : Flip Books ! Votre pouce fait son cinéma

Flip Books ! Votre pouce fait son cinéma L'équipe de LENDROIT (éditions d'artistes) présente : « Flip Books ! Votre pouce fait son cinéma », l'événement culturel qui se déroulera à Rennes du 20 janvier au 22 avril 2007. Riche de 3500 flip books, la Collection Pascal FOUCHÉ, datant de 1882 à nos jours et provenant du monde entier, sera exposée dans son intégralité. Bien calé entre le pouce et l'index, ce petit bouquin, effeuillé en quelques secondes, nous délivre sa magie grâce au défilement des pages créant l'illusion du mouvement. Considéré comme le précurseur du 7ème art, le flip book, folioscope ou encore cinématographe de poche, est l'alchimie du livre, du dessin animé et de la photographie. Découvrez ce que les artistes ont imaginé autour de cet objet et de ses potentialités : le jeu sur les formats et les couvertures, lutilisation du mouvement, des couleurs et des formes. Les flip books dAndy Warhol, Gilbert & George, Keith Haring, Gerhard Richter, Bruce Nauman, Pierre Alechinsky, Claude Closky, Yoko Ono, et bien d'autres encore soffrent à vos yeux grâce à la scénographie originale conçue par Tanguy Nédélec. Qu'est-ce qu'un flip book ? Forme artistique à mi chemin entre livre et cinéma, appelé aussi folioscope, cest un petit livre qui, effeuillé rapidement, donne l'illusion du mouvement. La séquence animée est créée par le simple défilement des pages entre le pouce et lindex. Généralement fabriqué à partir de dessins ou de photos, lobjet ne devient actif quà travers les yeux et la pression des doigts de celui qui le manipule, et peut alors livrer sa narration. Ce médium permet de comprendre le principe de l'animation et se prête à toutes sortes dinterprétations artistiques.

tankia

tankia

 

Actu : Festival Pocket Films 2007

Festival Pocket Films 2007 Les téléphones mobiles de dernière génération (3G) permettent de filmer en vidéo, de visionner des films sur lécran du téléphone et denvoyer ses propres films sur le téléphone dautres personnes. Il y a là matière pour les créateurs daujourdhui à explorer, à découvrir, à anticiper. Pour participer à la 3ème édition du Festival Pocket Fims qui aura lieu les 8, 9 et 10 juin 2007 au Centre Pompidou, à Paris, envoyez votre film tourné avec téléphone mobile avant le 30 mars 2007 ! Courts et longs métrages : fictions, documentaires, clip, expérimental... tout genre accepté. Le site de l'évènement : http://www.festivalpocketfilms.fr/

tankia

tankia

 

Actu : eYeka, exposer sur web et sur mobile !

eYeka, exposer sur web et sur mobile ! eYeka est une nouvelle plateforme pour diffuser du contenu multimedia (photo et video) sur le web et mobile, pour se faire connaître et au final le vendre. Le challenger eYeka frappe fort et apporte beaucoup de nouveautés par rapport aux plateformes en apparence similaires (youtube, dailymotion, myspace...) : - Un réseau de partenaires très professionnel - La diffusion sur mobile - La possibilité d'acheter le contenu en cliquant glissant les photos ou vidéos dans son panier très simplement - Un player flash très bien conçu et intuitif eYeka s'adresse aux professionnels et semi-professionnels créatifs du multimedia qui souhaitent diffuser en masse leurs oeuvres et avoir un retour quasi-instanté de la part de la communauté, ce que le web et le réseau mobile permettent de faire aujourd'hui. Un outil en phase beta incontournable pour tous les photographes et video maker en quète de critiques et de reconnaissances de qualité ! Découvrez ce nouvel outil très impressionnant : eYeka.com

tankia

tankia

 

Actu : eBook, nouveau rôle pour les graphistes ?

La génération des graphistes de livres électroniques est-elle en place ? Résumé de l'article disponible en anglais : http://www.designweek.co.uk/ Le 19 janvier dernier, de grands noms du monde de l'édition anglo-saxonne (dont Derek Birdsall, Andrew Barker, Françoise Berserik, Phil Baines, Robert Dalrymple, Ron Costley et Jim Stoddart) se sont réunis lors d'une conférence organisée dans la Bibliothèque St Bride de Londres. Un des thèmes abordés : l'avenir du livre électronique et du rôle des graphistes. Le directeur artistique de l'édition Penguin Press Jim Stoddart a suggéré qu'il allait falloir penser le design de l'ebook avant que la littérature électronique commence à se généraliser. Bien que les ebooks ne soient toujours pas largement diffusés, le concept exigera plus du graphiste qui ne pourra pas compter sur la sensation tactile et l'esthétisme de l'objet pour attirer les lecteurs. Jim Stoddart a aussi expliqué qu'à l'heure actuelle un grand nombre de sociétés investissaient beaucoup dans le marché du ebook et qu'il souhaitait choisir une compagnie très ouverte telle Apple pour lancer cette nouvelle culture. Andrew Barker a souligné que les graphistes n'ont pas encore intérrogé une grande quantité déléments qu'on retrouve dans le livre traditionnel, il reste donc un grand champ d'exploration graphique dans ce domaine. Après le livre, le magazine et le web, l'ebook apporte un nouveau medium d'expression pour les acteurs de la création éditoriale. Il est intéressant de se demander comment leur rôle va évoluer et de savoir si l'ebook va entraîner une digitalisation des codes du livre traditionnel ou bien créer de nouveaux codes de création comme le web a pu le faire et le fait encore.

tankia

tankia

×