ArtBook - le blog des tutoriaux graphiques -

Artstutos

arthelius — Sun, 15 Mar 2009 18:54:35 GMT

Artstutos est le pendant artistique de Artbooktuto. Artstutos est un annuaire de tutoriaux artistiques traditionnels.
Vous retrouverez donc des tutos pour le dessin, la peinture, la sculpture, l'origami et bien d'autres arts.

N'hésitez pas à passer sur le site et à proposer vos tutos.

A bientôt

10 CMS à découvri

arthelius — Fri, 20 Feb 2009 16:06:24 GMT

Le temps ou créer un site dynamique demandait une formation de plusieurs années, et ou l’HTML faisait loi est révolu, grâce notamment aux CMS. J’entends déjà certains me dire « c’est quoi un CMS ? » CMS qui veut dire Content Management Systems en Anglais, ce qui nous donne en français : Système de gestion de contenu, nous permet de créer des sites en PHP (donc dynamique) et de les gérer avec une facilité incroyable.

Il existe de nombreux CMS, bien entendu je ne les ai pas tous essayés, étant donné qu’il faut à chaque fois pas mal de temps pour comprendre leur fonctionnement. Personnellement j’utilise Joomla pour les sites et Wordpress, qui est plus un CMS pour blog, d’ailleurs c’est avec cette utilisation que je m’en sers.
Mais ne voulant pas être têtu, je vous propose une petite liste de CMS (surement pas complète) ou vous n’aurez pas mon avis car je ne les connais pas, mais au moins un début de piste.

Joomla : en Français

Wordpress : en Français

Drupal : en Français

Frog CMS : en Anglais

ConcretCMS : en Anglais

CMS Made Simple : en Français

iweb : en Anglais

Radiant CMS : en Anglais

Magento : en Français

Silverstripe : en Anglais

Pour le reste je vous laisse avec notre ami Google et l'image que vous avez pu voir au début de cet article.

Arthelius

10 conseils pour réussir son webdesign

arthelius — Tue, 03 Feb 2009 08:00:26 GMT

10 conseils pour réussir son webdesign

1. Savoir améliorer sans tout vouloir réinventer

Vouloir un site original est une chose tout à fait normal, mais l’originalité à un prix, celle de ne pas être toujours accessible à tous. N’oubliez pas que « normalement » votre site sera visité par toutes sortes de personnes, et que celui-ci doit être accessible à la plupart.

De nos jours internet propose de nombreux outils déjà fortement complets utiles, à vous de les utiliser au mieux et de pourquoi pas les améliorer.

2. Harmonie

Il n’y a rien de pire qu’un site ou il y a un nombre incalculables de couleurs ou de polices. Cela créé un sentiment de bazar et désinvolture. Limité vous à 3 couleurs, et au même nombre de polices de caractères. Cela ne vous empêche d’utiliser toutes les nuances d’une couleur et de jouer sur un camaïeu plutôt que plusieurs couleurs très différentes.
N’oubliez pas aussi la symbolique des couleurs en fonction du sujet abordé sur votre site.

3. Garder sa personnalité

Les effets de mode font souvent venir beaucoup de visiteurs sur les sites, mais ces derniers sont changeant. Et en un rien de temps votre site deviens ringard, et surtout sans personnalité. Plutôt que de suivre les modes, garder votre style qui fait ce que vous êtes, et surtout qui vous permet de vous démarquer des autres. Reconnaissable au premier coup d’œil.

4. Pensez au contenu avant tout

Un joli site c’est très bien, mais un très joli vide c’est peu agréable. Le contenu est aussi important que le visuel, et si vous désirez avoir régulièrement des visiteurs celui-ci deviens même indispensable. Sans oublier que google déteste les sites statiques ou le contenu ne change jamais. Le contenu est donc important pour l’intérêt que vous porteront vos visiteurs , mais aussi pour votre référencement, un point à ne négligez sous aucun prétexte.
Autre point, pensez à ce qu’il y aura dans votre site, son sujet avant de commencer votre webdesign car celui-ci doit refléter le thème principal, sinon le visiteur sera vite perdu.

5. Ne pas réaliser un site pour les dernières versions des navigateurs

Vous venez d’installer la dernière version de votre navigateur préféré, et avez testé votre site sur celui-ci, et bonheur celui-ci passe à merveille. Mais voilà, dites vous que tout vos futurs visiteurs n’utilisent pas le même navigateur que vous, et pire encore, pas tous la même version, et histoire de compliquer la chose certaines personnes utilisent encore une résolution d’écran de 800x600 par exemple. Alors bien entendu vous ne pourrez jamais satisfaire tout le monde. Mais la moindre des choses est au moins de tester son site sur les navigateurs les plus courants. Voici les plus courants : Mozilla Firefox, Internet explorer, Opera, safari, Google Chrome.

6. Faire le bon choix de support technique

C’est joli un site en flash, mais si sa structure ressemble fortement à un site statique en HTML, cela n’a que peu d’intérêt. Pensez pratique avant toute chose. Un site de présentation peut être en flash aucun soucis, un site statique en HTML, un site dynamique en PHP. Et votre site ne sera que mieux référencé et logique.

7. Etre clair et précis

Eviter de noyer le poisson ou de faire un site avec des bannières en flash partout, allez droit au but et vos visiteurs vous en seront reconnaissants.

8. Se poser des questions

Posez vous el maximum de questions avant d’entamer votre travail. Quel est la cible du site ? Que quoi vais-je parler ? Quel est el but ? Vais-je faire des mises à jour régulièrement ?

Autant de questions que vous devrez vous poser avant de faire quoi que ce soit.

9. L’espace c’est le luxe

N’entassez pas vos informations sur un carré de 100pixels, ne faites pas non plus des articles de 1500 lignes. Mettez de l’espace dans votre site, faites le léger, et la navigation n’en sera que plus aisé.

10. Avoir un site accessible

Faites en sorte que tout le monde puisse comprendre votre site, les habitués du thème de votre site comme les nouveaux, il n’y a rien de plus désagréable pour un novice qui veut apprendre que de se sentir délaisser et larguer.

Livre qui s'ouvre et se ferme

arthelius — Sat, 31 Jan 2009 14:29:53 GMT

Livre qui s’ouvre et se ferme

Je vous propose aujourd’hui de réaliser un livre au style ancien, ou vous pourrez présenter vos travaux ou photos, le tout dans un livre qui s’ouvre. Comme vous pouvez le voir sur mon site d’illustration à cette adresse : www.vianney.fr/illustrations

Pour réaliser ce tuto nous aurons besoin, d’une bibliothèque de sons que l’on trouvait exclusivement dans flash 8, vous pourrez la télécharger ici (ensuite installer la dans C:/Programmes (ou program files)/Adobe/Flash CS3/ )
Et il nous faudra ensuite les différentes images de l’animation que j’ai au préalable transformé sous Photoshop (je suis bon avec vous lol), télécharger le ici.

Nous avons maintenant en mains, tous les outils nécessaires. Ouvrez un nouveau, et importer toutes les images de l’archive dans votre bibliothèque.

Ensuite la méthode va être simple, il va juste falloir mettre les différentes toutes les 5 images.
Commençons par la page de gauche et de droite. Faites glisser la page de droite sur la scène. Coller la en bas, à droite.

En faisant ceci, nous allons gagner du temps pour la suite, et surtout cette page sera toujours au bon endroit. Maintenant d’un simple clic droit, insérer une image-clé toutes les 5 images. Et cela jusqu’à la 95 images.

Maintenant il va juste falloir insérer les différentes images de l’animation toutes les 5 images. Je vous explique pour la première, et vous donnerai juste la liste ensuite. La page de gauche doit être supprimé sur toutes les images jusqu’à l’image 90. Il suffit de faire glisser les images sur la scène.
* image 5 = page_gauche02
* images 10 = page_gauche03
* image 15 = page_gauche04
* image 20 = page_gauche05
* image 25 = 05
* images 30 = 04
* images 35 = 03
* images 40 = 02
* images 45 = 01

Nous voici à la moitié de l’animation, pour le reste c’est la même chose mais à l’envers, on repart de 02 jusqu’à page_gauche01.

Votre livre est terminé mais afin de rendre l’animation plus réaliste nous allons simplement ajouter le bruit des pages qui tournent. Pour cela ajouter un nouveau calque.

Ensuite rendez vous dans Fenêtre>Bibliothèque commune>Sons.

Maintenant choisissez le son book drops et faites le glisser sur votre scène, ajouter une image clé en 50 et reglissez le son book drops.

Il reste une petite touche finale, rendre l’animation un peu plus fluide, pour cela rien de plus simple double cliquez sur la cadence (voir photo), et passez la en 28 images/secondes.

J’ai essayé d’être le plus clair possible, mais les tutos pour flash sont les plus compliqués à écrire mais aussi à comprendre, je pensais donc refaire ce tuto mais en vidéo en fonction des demandes, si vous désirez donc avoir ce tuto en vidéo laissez moi un petit commentaire.
De plus je pensais le complété avec un second tuto sur les pages qui tournent avec un simple clic, de même si vous désirez voir ce tuto faites le moi savoir.

Arthelius

Si vous la moindre question, merci de la poser sur le forum (enregistrement obligatoire)

Nouveau site : ArtsTutos

arthelius — Tue, 27 Jan 2009 14:42:12 GMT

Après les tutos pour les logiciels, je m'attaque aux tutos artistiques.
Enfin pas tout seul.

Ce site vous propose de nouveaux tutoriaux dans de nombreuses

disciplines artistiques.

Et cela dans le total respect des auteurs, puisque chaque tuto renvoie sur sa page d'origine.

Si vous désirez ajouter vos tutos, rien de plus simple, il suffit
de cliquer sur le lien qui se trouve en haut sur le site.

Bonne visite, et souhaitons bonne chance à ce site qui est une

première sur le web francophone.

Le site

Pack Textures papiers avec motifs

arthelius — Fri, 16 Jan 2009 11:05:32 GMT

ça faisait longtemps que je ne vous avais pas proposé un petit pack de texture, et bien la chose est réparé avec ce pack.

Nombre de textures : 5
Taille : 2500 x 3500 pixels

Lien

[tuto vidéo] Dessiner une paquerette

arthelius — Fri, 09 Jan 2009 13:55:00 GMT

Voilà le retour des tutos en vidéo. J'ai pris en compte vos très importantes remarques, et j'ai donc changer de logiciel pour pouvoir enfin vous proposez quelque chose de lisible.

Voilà le résultat, dites moi ce que vous en pensez.

Effet étiquette en feutrine

arthelius — Thu, 08 Jan 2009 09:06:36 GMT

Effet étiquette en feutrine

Voici un petit effet amusant pour vos illustrations enfantines ou pour les scrapbookeuses qui utiliseraient Illustrator (je ne sais pas si elles sont nombreuses ?)

Créer un nouveau document, puis prenez l’outil texte.

Tapez votre texte (prenez une polie assez arrondie), et rendez vous dans Texte>Vectoriser.

Maintenant ouvrez le menu des contours. Il est possible que votre texte devenu une forme, n’est pas de contours, dans ce cas, ajoutez lui juste une couleur de contours.

Le but maintenant est de réussir le même style que sur la photo qui suit. Je dis cela car selon la police ou la taille de votre texte vous ne devrez pas indiqué le même genre de réglages. Pour ma part le contours fait 0.5 pt, et les pointillés 1 pt.

Copiez/collez votre texte, puis retirer les pointillés de votre texte en décochant la case dans le menu contours. Puis indiquez 3 pts (selon vos polices et taille, bien entendu). Pour ce qui est de la couleur cliquez sur le nuancier puis sur la couleur rose, et ensuite sur le guide des couleurs. Cela a pour but de vous proposez toute une palette de nuance à partir de la couleur rose. Choisissez la seconde case en partant de la droite.

Maintenant retourner sur les contours et mettez des extrémités arrondies, puis des sommets arrondies.

Refaites un simple Ctrl+V, et cette fois ci mettez un contours de 5 pts, vous pouvez directement ajouté les sommets et extrémités arrondies. Et dans le nuancier choisissez la couleur beige.

Maintenant il suffit plus que tout juxtaposés. N’oubliez pas de changer les ordres avant de les placer les uns sur les autres. Le beige en arrière plan, le rose dessus, et enfin le texte en points.

Et voici le résultat sur du jean :

Arthelius

Si vous avez la moindre question, rendez vous sur le forum.

Dessiner une étiquette

arthelius — Sat, 27 Dec 2008 16:23:16 GMT

Encore un effet que l’on retrouve régulièrement sur le web (2.0 ?) mais qui pourtant est souvent réalisé avec photoshop, et bien moi j’ai décidé en bon défenseur d’Illustrator de vous le proposer avec ce dernier.

Créer un nouveau document, puis prenez l’outil rectangle.

Dessinez un rectangle, puis un second au dessus plus petit qui représente la partie triangulaire que vous avez pu apercevoir dans l’exemple.

Ensuite prenez l’outil flèche blanche, et sélectionnez le point en haut à gauche sur le petit rectangle. Et en ne lachant pas votre souris, faites le glisser vers le centre afin d’obtenir un angle plus petit. (les pointillés ne sont la que pour vous montrer, en aucun cas ils n’apparaissent sur votre document)

Recommencez l’opération avec le point en haut à droite.

Maintenant sélectionnez le grand rectangle et le trapèze, puis cliquez sur le pathfinder « Ajout à la forme » (faites bien attention à ce que vous deux formes se touchent)

Puis dessinez un cercle parfait en maintenant la touche Maj, ce cercle doit venir se poser sur le haut de la forme. N’hésitez pas à utiliser l’outil alignement central pour aligner les deux formes.

Maintenant sélectionnez la forme rectangulaire et le cercle, puis utilisez le pathfinder « Soustraction de la forme ».

Ensuite allez dans Effets>Spécial>Ombre portée. Ramenez les valeurs à 1 mm, n’hésitez pas à cocher la case aperçu et à faire vos propres réglages.

Puis sélectionnez votre forme, et appliquez lui un dégradé de -90°, de couleur blanc – noir à 10%.

Maintenant reprenez l’outil rectangle, puis dessiner un rectangle qui viendra se poser sur votre étiquette.

Appliquez un contour de 0.5 pts, bleu foncé.

Puis appliquez un dégradé du bleu clair au bleu foncé, et grâce à l’outil dégradé, dessiner un dégradé en coin.

Maintenant copier/coller votre rectangle, prenez l’outil flèche blanche, sélectionnez le point en haut, à droite, et supprimez le, et passez le rectangle en blanc.

Placez le reflet par-dessus le rectangle de couleur, ajoutez du texte si vous le désirer. Et ajouter lui une transparence de 25%.

Maintenant faites pivoter le tout, à environ -45°, et le tour est joué !

Vous pouvez le décliner en différentes couleurs, et avec du texte à l'intérieur.

Arthelius

Si vous avez des questions, rendez vous sur le forum.

Grille Usée

arthelius — Fri, 26 Dec 2008 12:21:40 GMT

Grille usée

Un petit tuto simple, pour un effet peu recherché, mais qui nous fais réviser un fonction peu utilisée l’ajout de motif.

Créez un document de 10 x 10 pixels.

Créez un nouveau calque.

Puis supprimez le calque « arrière plan.

Ensuite prenez l’outil sélection rectangle, choisissez une couleur grise, et dessiner une bande de 2 pixels grise à gauche. (Si besoin est utiliser la loupe pour voir ce que vous faites)

Refaites de même en bas, sur 2 pixels.

Maintenant allez dans Edition>Utiliser comme motif, nommé ce motif « grille » et cliquez sur ok.

Ensuite créez un nouveau document de 500 x 500 pixels, appliquez un fond gris (plus clair que celui de votre motif, bien sur).Puis créez un nouveau calque.

Allez dans Edition>Remplir, et choisissez dans le menu déroulant votre motif, cliquez sur ok.

Voilà votre grille, rendons la un peu plus usée, simplement en vous rendant dans Filtre>Bruit>Ajout de bruit.

Mettez 27, et en uniforme et monochromatique.

Maintenant prenez l’outil gomme, et choisissez un brush plutôt destructuré, et gommez le bas, selon vos envies.

Il suffit juste maintenant de double cliquez sur le calque de la grille et d’ajouter une ombre portée. Au besoin, faites quelques réglages (vous pouvez vous reporter à la photo)

Le résultat :

Arthelius

Pour toutes vos questions, rendez vous sur le froum.