De base, je n’étais pas du tout parti pour faire ça, mais plutôt un avatar un peu destroy, puis au final je me suis dis, va pour un blazon/poster dodsign.

Le rendu est plutôt sympa, j’ai préféré dé-saturer un peu le rendu final, la première version était beaucoup plus colorée et je trouvais que les contrastes étaient trop importants.

Au final, je l’ai nommée divine right of king (roi de droit divin) pour traduire l’influence qu’elle à eu sur moi-même. Elle s’est plus imposée que je ne l’ai imaginée, donc ce nom me semblait plus ou moins naturel.
A vos étoiles (ou pas).

Je pense vraiment que mes prochaines créations risque de se diriger sur ce genre d’nfluence. L’effet croisillon et noir et blanc de Photoshop peuvent donner des effets vraiment intéressants, une fois bien incrustés.

En espérant qu’elle vous plaise.
PS: n’hésitez pas à noter cette création

Les retouches faites sur cette photo sont assez simples, j’ai simplement dupliqué l’image et conservé tous les espaces de peau. Ensuite j’ai ajouté un flou gaussien sur le calque dupliqué afin d’avoir une sorte de rendu lisse de la peau. J’ai enlevé toutes les petites imperfections (plis de la peau, grain de beauté, etc.) même si il faut l’avouer, le modèle est déjà plutôt bien foutu.

J’ai ensuite retouché la luminosité et la netteté de l’image à l’aide de plusieurs outils : les courbes de niveau, les outils densité moins et densité plus, la luminosité contraste de l’image ; une petite astuce pour avoir un côté plus net de l’image : dupliquez votre photo, mettez l’image du dessus en incrustation. Allez ensuite dans les filtres d’images > divers > passe-haut (un passe haut de 5 à 6 suffit amplement). Jouez ensuite avec l’opacité afin de mieux incruster le calque.

Pour finir, on ajoute un fond, quelques petits effets de lumière et le tour est joué. Dites-moi ce que vous en pensez, beautiful is not pitiful!

Ps : pour voir les images en grand : clic droit > afficher l’image.

N’hésitez pas à donner une note à ce Post

A. Quelques conseils avisés

1# Bien renseigner son doctype

Essentiel à la bonne compréhension de votre code, le doctype va donner une clé à IE 6 pour interpréter votre code HTML. En l’absence de Doctype, IE passe en mode QUIRKS et point de vue affichage c’est la catastrophe !

Le DOCTYPE se place tout en haut de votre page HTML. C’est la toute première ligne de votre code.

Ex:

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” >

L’importance va être de choisir le doctype adapté. Ne choisissez pas un doctype strict si vous débutez en html/css. Préférez-lui un doctype de type transitionnel. L’intérêt n’est pas de frimer en indiquant un doctype que vous ne saurez pas respecter, mais de permettre aux navigateurs de comprendre au mieux votre code.

Plus d’informations : Lire l’excellent article de Pompage.net

2# Valider son code HTML et son CSS

La plupart des différences d’affichage provienne de petites erreurs d’inattentions dans votre code HTML ( balise mal fermée, non-respect de l’imbrication…) ou dans votre css (oubli d’un point virgule ou d’une accolade).
Pour vous permettre de vérifier rapidemment votre code et de le rendre conforme, vous pouvez utiliser :
- ce validateur ( en français )
- le validateur de la W3C ( en anglais )

3# Bien utiliser les hack css

Si malgré tous vos efforts, il reste toujours de divergences, vous pouvez appliquer des correctifs que vous trouverez plus couramment sur le net sous le nom de hack css.

Pour qu’un style css ne soit appliqué exclusivement qu’à IE6, il suffit de mettre le signe - ou _ devant .
Ex : -margin : 5px ;

Pour qu’un style css ne soit appliqué exclusivement qu’à IE6 et IE7, il suffit de mettre le signe /, ? ou *devant .
Ex : /margin : 7px ;

Pour qu’un style css ne soit appliqué qu’à FireFox (NB : et presque tous les autres navigateurs comme NETSCAPE ou OPERA qui ont une part de marché moindre), il suffit de mettre le commentaires !important après.
Ex : margin : 9px !important ;

Comme les styles s’appliquent en cascade, si vous avez besoin d’appliquer un style différent à chacun des navigateurs, faites comme dans l’exemple suivant :
margin: 9px !important;
/margin: 7px;
-margin: 5px;
D’abord Firefox, puis IE 7 , puis IE6.

Enfin, petite nouveauté 2008, pour appliquer un hack css à Firefox 3, il faut ajouter les définitions x-moz-any-link à votre élément. Par exemple, si vous avez une div #menugauche à laquelle vous souhaitez appliquer une marge de 9px

#menugauche, x:-moz-any-link, x:default {margin : 9px;}

B. Liste non-exhaustive des mauvaises surprises qui vous attendent sur ie6 et ie7

1# Les bugs dus aux margin et padding

IE a la facheuse tendance d’ajouter des pixels et d’en soustraire là où ça lui chante. Utilisez toujours de préférence margin, et appliquez les hacks pour rectifier les petits défauts. Quelquefois, il vous faudra carrément appliquer des marges négatives pour obtenir le résultat souhaité
ex: margin-left:-15px;

2# Le bug de la div en float, le bug de la bordure

Vous avez indiqué une bordure pour un style et elle n’apparait pas sous ie6 mais sur les autres navigateurs tout fonctionne, ou encore, vous avez appliqué un float à une div et celle-ci ne marche pas… il existe une solution.
Je ne connais la raison, mais en appliquant un position:relative à une div défaillante, souvent les problèmes s’envolent. A tester donc, en premier lieu, avant d’envoyer un mail d’insultes à Bill Gates.

3# Le background ne s’affiche pas

Il y a quelquefois des images d’arrière-plan ou des couleurs qui refusent de s’afficher sur ie6. La plupart de vos problèmes seront solutionnés comme par miracle en appliquant à IE6 ceci :
-height:1%;
ou
/height:1%; (si le problèmes est aussi présent sur ie7)
Encore un antidote miracle qui pourra vous servir en diverses occasions.

4# Lorsque j’enlève la bordure, tous se décale

Vous aviez mis une bordure puis vous avez décidé d’abandonner l’idée, mais tout se décale quand vous l’enlevez ?
Il vous suffit de garder la bordure en indiquant border : 0px solid ;
Elle n’apparaitra plus et le bug non plus.

5# Le min-width ne fonctionne pas

Min-width, max-width, min-height, max-height font partie des valeurs que ie6 ne comprend pas. Inutile d’essayer de les appliquer il ne les interprète pas.
Heureusement, vous arriverez à passer outre avec ce hack :

min-height:800px;
height:auto !important;
height:800px;

Vous n’avez plus qu’à adapter ce code à vos besoins…

6# Et les PNG transparents ?

Pour IE 6, le PNG n’est pas transparent et il affiche un fond grisatre des plus inesthétiques.
Pour pallier à ce problème, vous avez deux options :
- toujours préférer le format gif, qui est libre (ceux qui ont entendu dire que le Gif appartenait à Sun Inc. devrait aller sur hoaxbuster)
- intégrer un fichier .htc qui va permettre d’emuler ie6 pour qu’il comprenne le png transparent.

7# Et le comportement Hover ?

IE 6 connait le comportement :hover quand il est appliqué à la balise a.
Il appliquera donc un effet de survol à un style définit par a:hover.
Mais si vous décidez d’appliquer un effet de survol à un autre élément, misère, ça ne marche plus…
La solution vient elle aussi d’un fichier .htc qui va expliquer à IE ce qu’il faut faire.
N’oublier pas d’appeler le fichier avec l’élément behavior !

8# J’ai un style appliqué à plusieurs images et IE6 ne l’applique qu’à la première :

Vous avez réalisé une belle mise en page et donné un style à vos images, mais votre style qui s’applique correctement partout, s’arrête à la première image sous IE6.

Nous avons affaire cette fois à une application à la lettre des normes W3C d’IE6, qui n’applique un style défini par un identifiant : id=”" qu’au premier élément.
En effet, pour IE6, un id est UNIQUE, donc il n’applique l’ID qu’une seule fois.

La solution est toute simple, changez dans votre html vos ID= par des CLASS= , et n’oubliez pas de changer également le code CSS !

9# Mes puces de liste disparaissent quand je bouge l’ascenceur / ou ma puce n’est pas à la bonne place / ou mes puces disparraissent au survol de la souris :

CAS n° 1 : Ce bug concerne ie 6 et ie 7

Vous avez fait une liste avec < ul > < li >, et utilisé un list-style-image pour définir l’image de la puce. Tout fonctionne sous FF mais sous IE, c’est la cata, les puces disparaissent quand vous passez la souris dessus ou si vous touchez à l’ascenceur vertical.

Malheureusement, IE 6 (& 7) interprètent très mal le changement d’image de puce avec le list-style-image. Il faut donc contourner cette propriété CSS en utilisant un background :

li{
list-style-type: none;
background:url(images/puce.jpg) center left no-repeat;
padding-left: 15px;
}

Et voilà, vos puces fonctionnent de façon identique sur IE et Firefox !
Pensez à utiliser ce code de façon systématique et ranger le list-style-image dans un tirroir en attendant que IE s’affranchissent de ses bugs.

Si vous avez toujours un souci, lisez la suite :

Cas n° 2 : Ce bug concerne UNIQUEMENT IE 6

Vous avez testé et tout fonctionne sur ie7 mais sur ie6, on dirait qu’il recharge tout de même les images au survol de la souris?
Faites ce petit test :
Regardez dans IE6, dans Outils>Options Internet>Général>Fichiers temporaires >Paramètres.
Avez-vous cocher “A chaque visite de la page” ?
Si oui, cochez n’importe quel autre paramètre et faites un refresh (F5) de la page.
Si le bug a disparu, c’est que vous êtes face à un FLICKER bug. Tellement fréquent qu’il a un petit nom. Votre image est placée sur un lien et ie a décidé de vérifier cette image à chaque survol.

Voici une solution en javascript qui vous permettra de corriger le bug (mais qui ne fonctionnera pas si le javascript est désactivé!)

Néanmoins, il peut arriver que ce patch ne fonctionne pas… ne vous inquiétez pas. IE6 n’est pas réglé sur “a chaque visite” par défaut. Aussi les seuls utilisateurs ie6 (en majorité néophites en webmastering) n’auront pas modifié cette option. Et pour les autres, comme vous, ils utilisent déjà tous Firefox non ?

10# Le bug de la lightbox avec IE7

Vous avez installé une lightbox et vous ne comprenez pas pourquoi elle fonctionne parfaitement sous FF, sous ie6 et pas sous ie7 ?

Vous avez trouvé la réponse : si comme moi, vous avez copié-collé la ligne de code proposée (dans le html du dossier de download officiel) pour lier le css de la lightbox à votre page html,
vérifiez votre balise link et regardez où se trouve rel=”stylesheet”. Si elle se trouve avant l’attribut href : déplacez-là juste après ainsi:
href=”lightbox.css” rel=”stylesheet”

Et voilà, les bugs d’affichage de la lightbox s’envolent comme par magie.

11# Le bug du survol d’un lien contenant quelquechose ( a:hover quelquechose)

Vous avez utilisé le comportement hover sur un lien pour faire apparaître un texte inclus dans ce lien ?
avec par exemple un a:hover span, ou a:hover p …
mais celui-ci n’apparaît pas ?
Voici un petit bout de code à ajouter qui va solutionner votre problème :
a:hover{
background:none;
}

source : http://esprit-creatif.blog.mongenie.com/i

Click ici : thedesigncubicle.com

Ps : Pour avoir le fond en grand format, faites simplement un click droit -> afficher l’image.

c’est par ici :Logo design

Hésitez pas à me dire ce que vous en pensez.

Hey oui, onedayonesong, c’est une nouveauté musicale sur la toile. Voila, la dod sphère revient pour vous présenter un site, qui n’est pas le premier dans le genre, mais surement mieux construit que la majorité existante.

Ce site est destiné aux fans de musique ou plus généralement aux friands de découverte sonore. Le site a été mis en ligne le 8 décembre 2008 par deux étudiants en multimédia.

Le concept du site est simple : publier de manière quotidienne une chanson qui aura retenu notre attention. Ce peut être une chanson de légende que l’on souhaite faire redécouvrir, ce peut être également une chanson d’un groupe à faible notoriété que nous souhaitons promouvoir.

Le site propose à la fois une critique d’une musique, d’un album ou d’un groupe, la photo de la pochette de l’album correspondante ainsi qu’un lecteur mp3 pour écouter la musique de l’artiste.

Une nouvelle manière de vivre la musique de façon originale, tous à vos clavier et vos écouteurs.
Attention, écouter de la musique trop fort entraine une réduction de l’audition, mais vous pouvez quand même vous faire plaisir!

onedayonesong

Dernier de mes projets, et c’est bien celui qui me tiens le plus à coeur à vrai dire. En effet, réunir l’univers de la musique, du design et de la comm, quoi de mieux?
Voila le projet dawn studio est en cour de construction. Son utilité? Apporter tout ce qu’il y a besoin dans la promotion de la musique.

Cela comprend la création graphique et web (flyer, pochette de CD, logo, site internet..etc), la communication et la presse (création d’un ligne de conduite pour la sortie d’un CD, création d’une campagne de communication pour un festival ..etc), la vidéo (prise live, montage d’un clip, teaser ..etc) jusqu’au son en lui même (enregistrement, mixage, mastering, le tout dans un studio).

Nous pouvons aussi vous soutenir sur un projet personnalisé du moment ou cela a un rapport avec la musique.

Equipe fixe :

Intéressez? contactez moi

Voila, le premier EP de scythe est bientôt disponible, ce n’est qu’une question de jours.

Vous pouvez dès à présent réserver votre CD, contactez moi.

Venez découvrir comment obtenir ces magnifiques effets de lumière à travers la sélection de 28 tutoriels proposée par le site Webdesignledger.com.

c’est par ici

Hésitez pas à me dire ce que vous en pensez.
Un poil branlant, manque un peu de stabilité, mais ça passe encore.

A suivre : explication des intentions graphiques et autres.

1. Blend Fu

2. Brush King

3. Celestial Star

4. Brusheezy

5. My Photoshop Brushes

6. PS Brushes

7. Chez Plumeau

8. Q Brushes

9. Get Brushes

10. Shizoo

11. In Obscuro

12. Brush Fed

13. Bio Rust

14. Valhalla

15. Hybrid Genesis

16. Fractured Sanity

17. Aethereality

18. Art Flower

19. Paper Lilies

20. deviant ART

21. Free photoshop [ http://www.freephotoshop.com/html/free_brushes.html ]

22. PS Brush [ http://www.psbrush.com/ ]

23. Bash Carpo [ http://bashcorpo.dk/brushes.php ]

24.Tomle Din [ http://tomledin.com/stuff/brushes.html ]

25. Personainternet [ http://www.personainternet.com/echoica//brushes.php ]

26. Suite Psds [ http://suitepsds.com/psds.php?cid=226 ]

27. Lovely Trash [ http://www.lovelytrash.org/brushes.htm ]

28. Blinding Light [ http://blinding-light.com/download/brushes/0 ]

29. Pootato [ http://pootato.org/downloads?dl_cat=1 ]

30. Anna Von Holdt [ http://www.annikavonholdt.com/brushes/y.htm ]

31. Photoshop Brushes [ http://www.photoshopbrushes.com/brushes.htm ]

Round-Up’s

1. Splatter and Watercolour Brushes For Photoshop | Smashing Magazine
2. 100 Awesome High Resolution Photoshop Brushes | Photoshop Roadmap
3. 1000+ Free High Resolution Photoshop Brush Sets | Noupe
4. 146 Photoshop Brushes | Deviant ART
5. Tasty Tattoo Photoshop Brushes, Vector Art, and PNGs | Design Fruit
6. 75 Insane High Res Photoshop Brushes | Elite by Design
7. Free Hi-Res Watercolor Photoshop Brushes | BittBox
8. 33 Beautiful Border And Corner Brush Sets | 1st Web Designer
9. 42 Free Nature And Floral Photoshop Brush Sets | 1st Web Designer
10. Over 550 Photoshop Brush Packs Free for Commercial Use | Arbent
11. FREE abstracts and cool Photoshop brushes hand-picked from Deviantart | Francess Munganai
12. 200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter | Vandelay Design
13. 1000+ great Photoshop free brushes | Abduzeedo
14. 35 Tutorials for Mastering Photoshop Brushes | Vandelay Design

2. EveryStockPhoto

EveryStockPhoto site is becoming more and more popular, now there are 4,4 million free photos!

3. MorgueFile

One more site worth looking for.

“This morgue file contains free high resolution digital stock photographs and reference images for either corporate or public use. The purpose of this site is to provide free image reference material for illustrators, comic book artist, designers, teachers and all creative pursuits.” - Quote from their homepage.

4. Flickr

Everybody know about this site with their main purpose as photo management and sharing application. Great place for inspiration and searching for good photographs, but don’t forget to check author’s license, before using them.

5. Deviantart

Very popular community and also very good photos sometimes can be found there, but yes, don’t forget about license and asking authors first for their permission.

6. Kavewall

All images are separated in 18 different categories with really handy navigation.

7. StockVault

More than 11,000 stock photos are available for now.

8. Image*After

Image*After is a large online free photo collection. You can download and use any image or texture from our site and use it in your own work, either personal or commercial and currently there are more than 20,000 free textures and images available.

9. CreatingOnline

10. AllDigitalDreamer

11. FreeFoto

FreeFoto.com is made up of 122879 images with 157 sections organized into 3386 categories for now, pretty impressive indeed.

12. DreamsTime

Over 4 million photographs are over here for free or 0.20$/image.

13. FreeRange

All images are at least 2400 x 1600, and photos can be used for commercial or personal projects.

14. FreeDigitalPhotos

15. FreeStockImages

16. TurboPhoto

17. Visipix

18. FreePhotosBank

19. Cepolina

Over 8,000 photos available for now, each photo can be downloaded in five formats - up to 1024×768px.

20. BigFoto

This interesting site offers high resolution and really beautiful photos of continents.

21. OpenPhoto

20 different categories with high quality nature and architectural photos.

22. ShutterStock

4,9 million royalty-free stock photos with almost 80 000 new photos every week.

23. PdPhoto

Several thousands of royalty free pictures here and free for use.

24. FromOldBooks

FromOldBooks site offers scanned images, engravings and pictures from old books

25. FreeImages

2500 original stock photos for free.

26. DexHaus

27. PublicDomainPhotos

More than 5,000 free photos out there and free for commercial use.

28. FreeLargePhotos

29. ImageBase

Every picture is free to use and really high resolution - from 1600×1200 until 3072×2048px!

30. PhotoRack

All pictures listed at PhotoRack are Free to use for personal and commercial projects.

If You know some more good free stock photo sites, please share with us, to evolve our design community!!

Petit exemple d’animation typographique très réussie.

Hello, populas, j’ai décidé de lancer une rubrique, celle de la dod-sphère.

Le but de cette rubrique est de rédiger un articles sur un blog, un site ou une création artistique de mon entourage. En essayant d’avoir une critique objective de ceux-ci, je vais m’efforcer d’être le plus honnête possible. Le but, bien évidement, est de promouvoir les artistes qui m’entoure et qui me tienne a cœur.

Pour cette première édition je vais vous présenter le blog de Anthony Witman, un étudiant de SRC Montbéliard.

Son Blog est intéressant d’un point de vue graphique. Il est sobre, sombre, les couleurs sont homogènes et le tout fonctionne assez bien. Le contenu varie, mais il s’agit pour lui de présenter certains de ses travaux. Les fonctionnalités souhaitées par Anthony vis a vis de sont blog sont donc évidement acquises.

N’hésitez pas à jeter un coup d’œil sur ce petit bijoux de clarté. RDV : Evade.fr

Hésitez pas à me dire ce que vous en pensez.

A suivre : explication des intentions graphiques et autres.