Voici une nouvelle catégorie d’articles sans prétention qui présentera les derniers tutoriels écrits et vidéos sur le site Living Tuts, dont je suis le co-créateur je le rappelle. Commençons depuis son ouverture…

Ces nouveaux articles concernant Living Tuts seront publiés je pense toutes les 4 à 6 semaines dans 2 buts précis :

- vous informer de l’actualité du site depuis Design Spartan et des derniers tutoriels (Living Tuts est tout de même mon bébé – ainsi qu’à Yoann Marie bien sûr !)

- recueillir ici même vos feedbacks que vous ayez une opinion positive ou négative, la critique constructive ne peut qu’aider le site à s’améliorer

Commençons dans l’ordre antichronologique (du plus récent au plus vieux) :

Webdesign : Créer un design bleu et aéré pour un blog

Boostez votre productivité sur Illustrator à l’aide de Scripts

Digital Painting : Peignez une tête de dragon à partir d’un dessin

Design d’icône : Créez un visuel de votre logo en fausse 3D

Concept Art : Créez un Elémental de forêt

Digital Painting : Créer rapidement une eau réaliste

Concept Art – Character Design à partir de “Little-Story-Telling”

Digital Painting : Illustration d’un personnage dynamique

Digital Painting : Créez un drôle d’oiseau

Matte Painting : WAR – Scène de guerre

Et voici donc les tutoriels parus depuis l’ouverture du site, avec encore nous l’espérons un paquet d’autres à venir ! Nous vous remercions pour tous vos commentaires et votre soutien. Nous remercions tout particulièrement ceux qui partagent les tutoriels sur les réseaux sociaux et forums et tout simplement qui parlent du site.

Si vous avez des remarques concernant le site et surtout les tutoriels, c’est l’endroit pour et je suis à votre écoute ! De même si quelqu’un souhaite avoir des informations ou rédiger un tutoriel et faire partie des rédacteurs.

Le space art, relativement peu développé, est une forme d’art digital focalisé sur la beauté de l’espace. Pour créer ces images magnifiques, voici des tutoriels, ressources et sources d’inspiration sur le sujet.

Les artistes prennent un malin plaisir à créer une vision de l’espace telle qu’ils l’imaginent : une nébuleuse immense, des collisions planétaires ou encore des vaisseaux décollant d’une planète hostile. C’est souvent lumineux, coloré et rappelle l’immensité de l’espace. Voilà comment je définirais le space art si on me le demandait.

Voici donc ce que j’ai pu regrouper sur cette discipline particulière, je vous invite à partager vos artistes et ressources en commentaire pour que je les ajoute par la suite.

Tutoriels

Créer une planète en quelques étapes

Tutoriel pour Photoshop de collision planétaire

Tutoriel pour Photoshop pour créer une spectaculaire explosion en 3D dans l’espace

Tutoriel pour faire une nébuleuse

Tutoriel pour peindre une nébuleuse

Tutoriel pour Photoshop : la dernière supernova

Autre tutoriel pour peindre une nébuleuse

Guide avancé pour créer une planète

Pour plus de tutoriels :

35 Tutoriels sur le space art

Les tutoriels de Taenaron

14 tutoriels sur le space art

Ressources

Les ressources de Taenaron

Des brushs Photoshop dédiés au space art chez Vains Faktory

Inspiration

35 exemples de space arts surprenants

Galerie de Kaioshen

Galerie de JoeJesus

Galerie de gucken

Galerie de tsarye

Galerie de Patrick Arvidsson

Galerie de Dilekt

Merci à ceux qui ont contribué à cet article (notamment Orion). Si vous avez des artistes, des liens ou des ressources à partager absolument, je vous invite à le faire en commentaire !

Quatorzième sélection du meilleur du web et des soumissions des liens des lecteurs : ressources, tutoriels, articles intéressants ou juste bons pour l’inspiration, il est temps de ne prendre que le meilleur et de laisser le superflu !

30 webdesigns extrêmement colorés

Tutoriel : Créer une maison en 3D sur Illustrator

Guide en anglais sur les résolutions d’image pour l’impression

Le top motion designer français 4

Inspiration : 50 Créatures terrifiantes en digital painting

Moteur de recherche de photos gratuites sur les principaux sites de stocks photo

Les 150 cartes de visite les plus créatives

105 publicités bannies, controversées et interdites

Comme toujours j’espère que vous appréciez ces liens autant que moi ! N’hésitez pas à donner vos impressions sur ce qui vous a fait réagir.

J’ai glané pas mal de bons tutoriels ces dernières semaines et je vous ai concocté une petite sélection avec le digital painting à l’honneur mais aussi de la photomanipulation et quelques matte paintings.

Digital painting : Comment peindre un loup

Photomanipulation : Créer une tortue surnaturelle

Tutoriel de Matte painting

Digital painting : créer un décor intérieur à partir d’une base 3D

Digital painting : paysage à partir de photos et de 3D

Digital painting : excellent concept art de personnage

Photomanipulation : Faites une création abstraite sur le thème de la femme

Digital painting : Peignez une explosion de Transformers

Digital Painting : Créer un personnage méchant

Digital painting : Making of de « Seheiah »

Digital painting : créer une scène amusante

Matte painting post-apocalyptique

Digital painting : Making of de « Hecate »

Digital painting : Peignez une scène épique de dragon

Digital painting : Faites une scène fantastique

Digital painting : Faites une image cartoon pleine d’humour

Digital painting : Tenter le photoréalisme

J’espère que vous avez trouvé votre compte !

Treizième sélection du meilleur du web : ressources, tutoriels, articles intéressants ou juste bons pour l’inspiration, il est temps de ne prendre que le meilleur et de laisser le superflu !

Tutoriel en français pour créer un « méga menu déroulant » en CSS3

10 Cool Portfolios de Webdesigner

10 autres Cool Portfolios de Webdesigner

Sélection de Digital painting qui décoiffent (les premiers sont mauvais)

33 Nouvelles typographies pour designers

Collection de textures vintage pour designers

40 excellentes textures de tissus

Vous en rêviez nuit et jour, le site Living Tuts sur lequel je n’arrête pas de travailler est enfin mis en ligne et est fonctionnel.

Je ne vous ferais qu’un rapide article sur ce site et vous donnerai mon ressenti personnel sur le début de ce projet étant donné que plus de détails sont écrits dans l’article d’ouverture sur Living Tuts même.

Living Tuts : tutoriels de qualité

Qu’est-ce que Living Tuts ?

Il s’agit d’un site qui se remplira au fil du temps de tutoriels écrits et vidéos. Cette initiative est née à la suite d’une triste constatation : pourquoi faut-il toujours aller sur des sites anglophones pour trouver de bons tutoriels et surtout de haut niveau ?..

C’est dans cet esprit que j’ai entrepris de créer ce site de tutoriels ambitieux avec un ami – Yoann Marie – pour m’aider et m’assister dans ce lourd projet.

Ensemble nous avons donc réfléchi longuement à ce qu’il deviendra (car en effet le plus gros reste à venir dans les prochains mois) avant de commencer sa création. Vous trouverez donc des tutoriels sur Photoshop, sur le développement web, sur WordPress, Flash, etc…

L’identité visuelle de Living Tuts

Pas seulement créateur de sites Internet mais également graphiste et webdesigner, je me dois de vous parler un peu de l’identité visuelle de Living Tuts. Vous vous en doutez je me suis chargé de cette tâche en commençant tout d’abord par le logo qui se veut « frais » et original. La feuille métaphorise l’existence du site Internet : une jeune pousse qui deviendra gratuit et rappelle l’aspect vivant de Living Tuts (Living = vivant). De plus, elle rappelle également ce qu’est un tutoriel puisqu’on y voit de sa base jusqu’au bout de sa feuille les différentes étapes de sa création (Outil plume, aplat de couleurs, détails…).

Deuxième étape, le webdesign, je vous laisse juger de vous-même le travail effectué et je vous invite à me donner votre avis. Cela reste dans le même style que le logo avec des couleurs gaies rappelant la vie et l’évolution avec toujours des clins d’oeil au « tutoriel ». Pour information, le site a été intégré au CMS WordPress pour gagner du temps et donc tout le thème a été réalisé par mes soins, ce qui fut bien long…

Beaucoup de travail réalisé et ce n’est pas fini car la version anglaise sortira d’ici peu de temps.

Encore une fois, voici l’url du site :

Vous êtes obligés d’y aller, aucune excuse ne sera tolérée !

Living Tuts : tutoriels de qualité

Le site est achevé mais certains modifications auront encore lieu dans les prochains jours et si vous voyez des bugs n’hésitez pas à les citer. J’en oubliais presque de vous dire que 3 tutoriels sont déjà disponibles sur le site ! Le premier n’est autre que mon tout premier tutoriel (paru sur Design Spartan il y a déjà plus de 2 ans) et 2 tutoriels inédits pour Photoshop écrits par 2 très bon rédacteurs que je vous laisse découvrir. J’attends votre avis sur le site, ses tutoriels et tout le reste !

Merci à ceux qui m’ont déjà soutenus et motivés dans ce projet. Yoann et moi-même espérons que vous en serez satisfait et que vous nous aiderez à le faire grandir.

Après de longues recherches, voici 10 tutoriels sur le matte painting (et même plus!) avec des techniques de professionnels parmi les plus connus. Rien de tel pour voir de A à Z ce qu’il est possible de faire avec Photoshop et quelques idées.

Je tiens tout de même à mettre en garde les personnes ne comprenant pas un mot d’anglais car tous ces tutoriels sont dans cette langue. En compensation, sachez qu’il y aura prochainement des tutoriels de matte painting de qualité sur Living Tuts, et en français !

Maintenant, place aux tutoriels, certains sont vieux et d’autres même indirectement liés au matte painting mais apportent des connaissances indissociables.

1. « Distant Shores » d’Andreas Rocha

On commence fort avec un tutoriel du monstre Andreas Rocha. A voir et à relire !

2. Matte painting d’environnement dans un tunnel

Original mais peu explicatif, il permet tout de même de comprendre comment l’image a été crée à partir des différentes photos.

3. Making of de Neokathmandu (n’essayez pas de l’écrire)

Un tutoriel intéressant mêlant montagnes et ville chaotique futuriste.

4. Réalisez une scène avec une tornade ravageuse

5. Matte painting médiéval

6. Matte painting dramatique

7. Matte painting du London National History Museum de Sorin Bechira

Encore une grosse pointure qui dévoile son processus de création d’un excellent matte painting.

8. Réalisez un matte painting entièrement en Digital painting

Pour changer un peu de la photo… Bien entendu le rendu ne sera pas photo-réaliste mais se rapproche plus d’un concept art.

9. LE guide pour peindre et réaliser des paysages

En matte painting comme en peinture, la composition est un élément clé et grâce à ce guide anglais de 23 pages, vous saurez tout ce qu’il faut savoir et ça vaut le détour ! A engloutir sans attendre ! (Ne vous fiez donc pas à l’image qui n’est pas très vendeuse, je l’accorde).

10. Livre de 94 pages sur le matte painting

Et oui, le meilleur pour la fin ! Ce lien pointe en fait vers un livre où de nombreuses astuces et pas moins de 9 tutoriels de matte paintings sont présents (dont 6 étaient déjà présentés sur Design Spartan) dont un tutoriel de Jaime Dusso, rien que ça !

Je pense pouvoir dire à l’heure actuelle que j’ai probablement vu et listé sur ce site tous les tutoriels gratuits de matte painting que l’on puisse trouver sur la toile. Alors gavez-vous ! De nouveaux tutoriels sur le matte painting très bientôt…

Alors quels sont vos tutoriels préférés et qu’en dites-vous ?

Je vous offre encore une tournée de ressources trouvées sur le web parmi des dizaines (centaines?) de liens ces derniers jours : inspiration, tutoriels, trucs utiles ou même inutiles, à vous de vous faire une idée !

Je vous invite comme toujours a dire en commentaires ce que vous avez préféré.

La liste pour tout vérifier avant la mise en ligne d’un site

Un pong très « navigateur Internet »…

70 Publicités créatives et designs de juin 2010 chez olybop

20 créations sur le thème de la musique (Lien des lecteurs de DjMart)

15 Tutoriels avec du texte 3D

35 Excellents Tutoriels pour créer vos propres icônes

Vidéo : Waiting For ‘Superman’ – Jr Canest

(via lazyheart)

Voici mon petit tour du web où je vous apporte quelques ressources pour vos designs, articles et doses d’inspiration. Non ne me remerciez pas, je vous en prie.

100 logos haut en couleurs !

70 exemples de pages d’erreur 404 des plus originales (lien des lecteurs de MaRevueWeb)

Webdesign : 48 exemples d’excellentes mises en page

60 Typographies manuscrites gratuites

45 fichiers vectoriels de qualité gratuits

26 beaux designs de formulaires de contact

Guide juridique pour créer un site internet à usage professionnel (lien des lecteurs de LuciferX)

J’en profite pour remercier ceux qui contribuent aux liens des lecteurs et partagent leurs articles, liens et ressources.

La propriété CSS « content », qui n’est pas supporté par Internet Explorer (pas de surprise, en effet), permet  de réaliser des mises en page particulières et offrent de nombreuses possibilités. Relativement peu utilisée, elle permet d’ajouter du contenu avant ou après un élément spécifié.

Comment ça marche ?

Fonctionnant en couple avec les pseudo-classes :before et :after, elle vous permet donc d’ajouter de nombreuses choses, et c’est bien là sa force :

• - inherit : il s'agit de l'héritage

• - [URI] : un lien vers une page web
• - [string] : une chaîne de caractères : un mot, une phrase…
• - normal : aucun contenu généré
• - open-quote : ouvre un guillemet (‘  » ‘ par défaut)
• - close-quote : ferme un guillemet (‘  » ‘ par défaut)
• - no-open-quote : n’ouvre pas un guillemet (pas dur à deviner en effet)
• - no-close-quote : ne ferme pas un guillemet
• - attr([nom de l'attribut]) : la valeur d’un attribut [nom de l'attribut] de votre choix
• - counter([nom], [style]) : la valeur du compteur [nom].
• - counters([nom], [string], [style]): la valeur de tous les compteurs [nom], séparés par [string].

Exemples

1. Noter automatiquement l’url d’un lien après celui-ci

Design Spartan est un site trop cool !

a:after {content: " (" attr(href) ")";}

Cette syntaxe particulière permet de dire que l’on veut, après la lien <a>, ajouter entre parenthèse le contenu (chaîne de caractère) de l’attribut href de ce même lien <a>. Cela peut paraître bizarre mais il s’agit de logique.

Résultat :

2. Réaliser un paragraphe de citation avec des guillemets originaux

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor dolore magna aliqua.

p.citation { text-indent:9px; }
p.citation:before, p.citation:after {content:url("quote.png"); }

Je spécifie donc que mes paragraphes « citation » auront comme contenu additionnel avant et après eux une image.

Résultat :

3. Ajouter des sigles avant chaque élément d’une liste

ul#ma_liste li:before {content:">>";}

Résultat :

Plus d’exemples

Au cours de mes recherches, je suis tombé sur le très bon site Babylon Design où quelques exemples de l’utilisation possible de cette propriété sont exposés (avec entre autre la réalisation d’un bouton extensible en largeur, des listes hiérarchisées, etc…):

La prorpiété « content » sur Babylon-Design

Je rappelle enfin que malgré que l’on puisse ajouter du texte de cette manière, les informations importantes doivent être écrites en HTML et que le CSS ne sert qu’à la mise en forme.