Sujet: Recherche construction graphique (Lu 707 fois)

PICTO · « **le:** Mai 10, 2011, 16:18:30 pm »

Je recherche une construction graphique qui donne un effet trés élégant. Merci de trouvez ci-joint le visuel de ce que je cherche à réaliser. Un effet que l'on retrouve sur ce méme site WISIBILITY. Ils utilisent de petits onglets avec ce style (voir par exemple l'onglet "lire la suite..." ou l'onglet "commentaire"). Je vous remercie tous d'avance pour votre aide.

Eddy · « **Réponse #1 le:** Mai 10, 2011, 19:01:50 pm »

Bonsoir.
Que souhaite-tu savoir ? la manière dont c'est mis en place en CSS ? Le code html ? les deux ?
As-tu déjà un bout de code en ligne ou en local pour avoir exemple de ce que tu souhaites mettre en forme ?

PICTO · « **Réponse #2 le:** Mai 10, 2011, 19:47:27 pm »

je souhaite simplement connaitre la construction graphique. Pour avoir cet effet il n'existe pas d'aprés les dires de plugin photoshop pour réaliser cette conception graphique. Il ne s'agit pas de mise en page CSS et de code mais tout simplement de graphisme.
Je te remercie Eddy j'espére avoir répondu à tes questions.

Eddy · « **Réponse #3 le:** Mai 10, 2011, 21:03:27 pm »

Bonsoir.
commencer par un claque avec le rectangle, ensuite y ajouter un trait sombre sur le haut (calque séparé) puis entre les deux ajouter un calque avec une ombre formée par une ellipse bien placée que tu floutes et que tu travailles au masque de fusion et pinceau couleur noire pour supprimer la partie haute qui déborderait du graphique !

J'ai fait un truc vite fait et où j'ai moins atténué les ombres afin que tu voies bien la construction. Clique l'image pour avoir le PSD.

PICTO · « **Réponse #4 le:** Mai 10, 2011, 22:21:07 pm »

Mille merci Eddy du travail de pro je regarde tout cela avec un énorme plaisir!

pierluc · « **Réponse #5 le:** Mai 13, 2011, 20:46:20 pm »

Ce truc c'est un trompe l'oeil. Tout réside dans l'ombre. Dès que tu veux faire un bombé, un renfoncement ou une texture, tu dois toujours travailler avec une ombre et parfois aussi avec des accents de lumière. L'ombre c'est une forme noir floutée avec de la transparence pour permettre la fusion avec le reste de la composition. La lumière c'est une forme blanche (peut être colorée légèrement)et floutée sur laquelle on met également de la transparence. Ta forme peut être géométrique ou faites de coup de pinceaux (brush).

Tu peux faire n'importe quoi avec ça (du moment que c'est plat ou arrondis). Et, au cas ou tu croirais que Eddy est un géni (ce qu'il est surement

), tu n'as qu'à regarder les ombres autour de toi pour avoir des idées du genre.

Eddy · « **Réponse #6 le:** Mai 13, 2011, 21:05:43 pm »

Neni, suis pas un génie moi, loin de là. Même que l'exemple est pas très super puisque bien trop accentué pour bien montrer comment faire, ensuite faut peaufiner !

pierluc · « **Réponse #7 le:** Mai 16, 2011, 02:12:46 am »

Si au lieu d'utiliser le cercle on utilise la brosse, on a plus de contrôle sur le résultat. On peut mettre de la transparence et passer plusieurs fois pour foncer à certains endroits. Un peu comme on le ferait au crayon graphite.

Eddy · « **Réponse #8 le:** Mai 16, 2011, 10:39:02 am »

Je suis mauvais dessinateur et je maitrise mal les brosses. De ce fait , j'ai peur de faire des cochonneries et avoir un résultat médiocre.

Kosik · « **Réponse #9 le:** Mai 16, 2011, 11:47:48 am »

Ça y'est, y'en a qui vont dire qu'il revient encore avec son Illustrator.

Faire un arc de cercle fond noir, le dupliquer et le transformer en trait droit (Transformation hauteur = 0). Mettre l'arc de cercle à opacité 0%. Faire un dégradé de formes et le mettre en produit. Créer le rectangle ou la forme désirée et le placer en dessous. aligner centré et sommet.
On exporte le tout en PNG.