forme graphique

VOLUMES Commençons par un nouveau document de 400x400px dont nous remplirons le fond d'un gris sombre [#595959]. Nous allons travailler sur une forme trés simple puisque nous partirons d'un cercle. Pour ce faire créer un nouveau calque [ctrl + shift + n] puis une selection parfaitement ronde à l'aide de l'outil de selection elliptique [m] tout en pressant "shift". Ma selection fait 160x160px. Celle-ci sera remplie d'un gris un peu plus sombre que le gris du background [#4E4E4E] et nous la laisserons active pour le moment. Renommer ce calque "dark". Créer un nouveau calque par dessus "dark" et le nommer "clear" avant de contracter la selection d'un pixel à l'aide du menu [selection / modifier / contracter | select / modify / contract]. La remplir d'un gris moyen [#767676]. Les effets appliqués sont en réalité trés simple puisque il s'agit du classique mais néanmoins indispensable [Bevel & Amboss | Biseautage & Estampage] que vous pouvez faire apparaitre en double cliquant sur la droite du calque "clear" dans la palette [Layers | Calques]. Appliquons les réglages suivants: # Bevel & Amboss - size: 5px. - soften: 4px. - angle: 120°. - altitude: 30°. - hightlight mode: screen / superposition (laisser la couleur blanche par défaut) avec une opacité de 50%. - shadow mode: multiply / produit (laisser la couleur noire par défaut) avec une opacité de 40%. Une fois le style appliqué créer un nouveau calque sous "clear", activer "clear" et fusionner les deux calques avec [Ctrl + e] ou avec le menu [Layer/Merge down |Calque/Fusionner avec le calque inférieur]. Cela a pour effet de "tuer" l'effet que nous venons d'appliquer et nous sommes bon pour renommer le calque qui en résulte en "clear". Cette étape est importante nous verrons pourquoi par la suite. Ensuite effectuer la même opération sur le calque "dark" et de la même façon renommer le calque qui en résulte en "dark". oki ? Il nous reste donc deux calques ("clear" & "dark") et nous passons "clear" sous "dark". Nous attaquons la partie fun puisque nous allons créer les éléments transparents de l'interface. Créer un nouveau calque au dessus de "dark" [ctrl + shift + n] et une selection une fois de plus parfaitement ronde avec l'outil de selection elliptique [m] en pressant [shift]. Le diamètre est de 140px. Remplir celle-ci avec un gris clair [#CCCCCC]. Renommer ce calque "transparency" (en anglais ça fait plus pro :/ ). Le contenu de ce calque sera aligné sur celui de "dark" et de "clear" pour cela deux manières de procéder: Préalablement activer le calque référent (celui sur lequel on s'aligne) içi en l'occurence "dark" ou "clear" peu importe et lier à celui-ci le nouveau calque "transparency". - option 1: Utiliser le menu [layer/Align linked/Vertical centers | Calque/Aligner les calques liés/Centre, dans le sens vertical] qui gére l'alignement vertical puis [layer/Align linked/Horizontal centers | Calque/Aligner les calques liés/Centre, dans le sens horizontal] qui gére l'alignement horizontal. - option 2: Il me semble que cette option est apparue sous Photoshop 7 (à confirmer)? Activer l'outil de déplacement [v] et dans la barre d'options d'outils cliquer successivement sur les icônes d'alignement verticale et horizontale. Tous nos calques sont parfaitement alignés. Annuler la liaison entre les calques et réactiver "transparency". Appliquons les effets qui vont bien à "transparency" en double-cliquant sur le calque dans la palette des calques pour faire apparaitre la palette d'options des styles de calque. Commençons par éditer les options de mélange des couleurs [Blending options | Options de fusion] comme ceci: Passons aux styles: # Inner shadow mode: multiply / produit. couleur: #929292. angle: 90° (Décocher utiliser éclairage global). opacity: 55%. distance: 8px. choke: 25%. size: 16px. # Inner glow mode: Color dodge / Densitée couleur -. opacity: 50%. color: #FFFFFF (blanc). size: 10px. # Bevel & Amboss Nous obtenons un effet bien "smooth" et réellement transparent. Appliquons un dernier style à "dark" et "clear" à savoir une légère bordure externe d'un pixel de large: A l'étape 2 nous avons "tué" les styles appliqués à nos deux calques "dark" et "clear" pour pouvoir les découper tranquillement sans que le style appliqué ne produise des effets disgracieux. Entamons "dark" en son milieu en supprimant la partie centrale à l'aide de l'outil selection rectangulaire [v]. Faisons de même sur "clear" mais avec une selection un peu moins large. Et voilà. Ensuite à vous d'être créatif autour de tout cela... et voila le résultat!


Forme et Decoupe Commencons par créer un nouveau document de 400x400 px. Rétablissons les couleurs de base [d] qui sont le noir et le blanc puis remplissons le premier calque de noir [alt + backspace] renommez le "background" par exple. Pour chaque utilisation de l'outil selection elliptique la configuration de celui-ci doit être la suivante: Sur un nouveau calque [ctrl + shift + n] que nous appellerons "boule" créer à l'aide de l'outil selection elliptique [m] une selection parfaitement ronde (en maintenant "shift"). Pour l'exemple ma selection est de 92x92 px. La remplir de blanc [ctrl + backspace]. Pour ceux qui n'aiment pas les raccourcis clavier vous pouvez tjrs effectuer vos remplissage avec l'outil pot de peinture [g]. Annuler la selection [ctrl + d]. Déplacez votre boule vers le haut et à gauche de la zone de travail de manière à avoir de la place pour la suite...[v] puis faites glisser l'objet sur la scène. Créer un nouveau calque au dessus de "boule" [ctrl + shift + n], nommez le "corps". Activez l'outils selection elliptique [m] et créez une selection à nouveau parfaitement ronde (...avec "shift") mais de 460x460 px. La palette "info" est là pour vous aider à connaitre la taille de vos selections. Pour le moment peu importe l'emplacement de votre selection il se peut même que la palette info vous donne une taille érroné de votre selection c'est uniquement car celle-ci dépasse de la zone de travail. Assurez vous simplement que lorsque vous créez la selection la palette indique la bonne taille juste avant de relacher le btn de la souris. Toujours avec l'outil selection elliptique activé déplacez votre selection de façon à faire coincider le plat du haut de la selection avec le plat de la boule crée à l'étape précédente. Remplir la selection de blanc [ctrl + backspace] et régler l'opacité du claque "corps" à 50% dans les options de la palette des calques tout en conservant la selection active. Régler l'opacité du calque permet de voir ce qu'il se passe en dessous. Nous allons déplacer la selection à l'aide du clavier: Pressez "shift" pour avancer par pas de 10px puis 6 fois la flèche vers le bas et 2 fois la flèche vers la gauche. Notre selection a donc bougé de 60px vers le bas et de 20px vers la gauche. Pressez la touche "suppr" ou bien "backspace" pour supprimer la partie selectionnée. Désactiver la selection [ctrl + d] puis utiliser l'outil selection rectangulaire cette fois-ci [shift + m] puisque normalement c'est la selection elliptique qui est active. Selectionner toute la partie du corps qui se trouve à gauche de la moitié de la boule et supprimer. Modifier à nouveau l'opacité du calque "corps" pour la passer à 100%. Nous allons combler la partie inférieur qui lie la boule au corps à l'aide de l'outil plume qui permet d'obtenir des tracés complexes et trés propre en même temps. Activez l'outil en question [p] et assurez vous l'avoir configuré comme ceci dans la barre options d'outils: Créer un nouveau calque "liaison" au dessus de "corps". Zoomez un max pour voir les pixels [z]. Le premier point doit être placé au bas de la boule sur son axe central et chose importante: Sur un pixel coloré en blanc. Le second point doit se placer sur la courbe du corps à droite de la boule et sur une ordonnée inférieure à celle du premier point. [plume & segments de courbes] Un segment de courbe se définit par deux points d'ancrage et le tracé qui en résulte peut prendre diverses allures, les tangentes ainsi créées en ces points indiquent la direction du tracé au voisinage de chaque point. Ainsi pour le deuxième point il vous faut cliquer au point voulu puis sans relacher le btn de la souris faire glisser la "poignée" de manière à obtenir la courbe souhaitée. Vous noterez comment la forme de courbe du tracé de plume vient épouser celle de la courbe du corps. Cela demande un petit peu de pratique n'hésitez donc pas à faire plusieurs essais. Ensuite nous allons convertir l'inflexion 2 (le point 2) en sommet: Cliquer sur le point 2 tout en pressant la touche "alt": [alt + clic]. Cela nous permet de tracer maintenant des droites pour pouvoir fermer le tracé et le remplir. Créer deux nouveau points dans le corps et dans la boule (points 3 & 4) avant de cliquer à nouveau sur le point 1 pour fermer le tracé (un petit "o" apparait prés de l'outil). Nous allons convertir notre tracé en selection: Ouvrez la palette [paths / tracés(?)]. Normalement vous devez y trouver un calque avec le tracé que vous venez de créer. Faites un [ctrl + clic] sur le calque pour le convertir en selection. Revenez à la palette [layers / calques], assurez vous que le calque "liaison" soit actif et remplissez la selection de blanc. Désactivez la selection. Tout peut-être effectué sur un seul calque en réalité mais le fait de construire chaque partie sur un calque différent permet de revenir en arrière en cas de besoin ce qui est moins évident sur un calque unique. Nous allons fusionner les caques "boule", "corps" et "liaison": Avec le calque "liaison" actif liez les trois calque dans la palette [layers / calques] et fusionnez les [menu: layers | calques + merge layers | fusionner les calques]. Nous voilà avec un seul calque contenant l'interface complète. Dernière étape: Convertir la partie en pointe (en bas à droite) en arrondi. Zoomez à nouveau un max sur la partie concernée et à l'aide de la selection elliptique créer une selection parfaitement ronde (...touche "shift") qui adopte la même largeur que l'interface à l'endroit choisi. Votre arrondi peut-être placé plus ou moins haut selon ce que vous désirez obtenir. Cela vous oblige donc à vous adapter et à trouver la selection qui collera le mieux aux "parois" de l'interface. A cette selection nous allons ajouter la portion de l'interface qui doit être conservée. Avec l'outil selection rectangulaire selectionnez la moitiée haute de votre selection ronde tout en pressant "shift" pour cumuler cette nlle selection à la précédente. Ensuite ajoutez grossièrement (tjrs en pressant "shift") à cette selection toute la partie haute de l'interface. Inversez la selection [ctrl + shift + i] et supprimez. Et voilà, la base de notre interface est terminée. L'important est de bien comprendre comment relier diverses formes sans effet de crénelage qui sont des plus déplaisant visuellement. Pour ce type de techniques il y a évidemment l'incontournable [ eyeball-design.com ] dont les tutoriaux sont riche d'enseignement. Saupoudrez le tout de quelques agréments et détails en tout genre pour finaliser votre interface...

moi je veut bien des cours stp. dis moi avec quel logiciel tu fait sa sa m'intéresse pour mon site....
Merci