Tutoriels et Dossiers Webentraide http://www.webentraide.com/tutoriels/index.php/ fr 2006-04-06T23:06:02+02:00 daily 1 2006-04-06T23:06:02+02:00 Bientôt, les tutoriels http://www.webentraide.com/tutoriels/index.php/2006/04/06/1-bientot-les-tutoriels 2006-04-06T23:06:02+02:00 fr Co Généralités Les tutoriels seront placés ici progressivement, merci de votre patience !... Les tutoriels seront placés ici progressivement, merci de votre patience !

]]> Comprendre les calques http://www.webentraide.com/tutoriels/index.php/2005/01/11/8-calques-photoshop 2005-01-11T16:32:20+01:00 fr Co Photoshop La compréhension des calques dans Photoshop a souvent été une notion difficile à acquérir pour les débutants car abstraite. Il est néanmoins essentiel de bien en saisir le fonctionnement car il s'agit pour moi d'une des clefs majeures du logiciel. La compréhension des calques dans Photoshop a souvent été une notion difficile à acquérir pour les débutants car abstraite. Il est néanmoins essentiel de bien en saisir le fonctionnement car il s'agit pour moi d'une des clefs majeures du logiciel.

À quoi sert un calque ?

Il va vous permettre de structurer vos documents en plusieurs couches, de manière à attribuer facilement à chacune des propriétés différentes. Les calques peuvent être classés par dossier, ce qui implique qu'une multitude en est facilement gérable. Il va aussi vous permettre de gagner un temps fou pour le traitement de vos fichiers, vous permettant de ne revenir que sur la zone de votre choix.

Exemple terre à terre !
Imaginez que vous désirez faire des sandwiches pour toute votre famille. Vous avez un sandwich standard qui contient le pain, le fromage, le jambon et la laitue - vous préparez le même pour tous sauf que voilà, la petite soeur n'aime pas le camembert que vous avez choisi. La solution est simple, vous le retirez facilement et le remplacez par du Gruyères. Papa voudrait plus de jambon, vous en mettez double couche simplement. Si vous aviez préparé un plat de spaghettis à la bolognaise et que quelqu'un désirait en ôter la viande, ça n'aurait pas été aussi facile n'est-ce pas ?

Réaliser une image ou une maquette sur un même plan, cela revient à faire une bolognaise difficile à ajuster. Imaginez que vous peignez des cheveux sur un personnage - les mèches sur le visage ne vous satisfont pas, vous devez retoucher et les cheveux, et le visage (ceci correspond à la technique traditionnelle).

Réaliser une image multi-couches (en utilisant des calques) cela revient à faire un sandiwch et le modifier / personnaliser très facilement. Vous peignez votre personnage sur un calque (comme un calque en papier) et vos cheveux sur un autre calque puis vous les superposez pour les assembler. Si les cheveux ne vous plaisent pas, vous les retouchez individuellement sans gâcher le visage qui vous plaisait.

Attention - la comparaison sandwich / bolognaise n'inclut aucune notion de qualité :)

Où trouver les calques ?

Dans Photoshop, allez dans le menu Fenêtre > Calques. Une palette déplaçable devrait s'ouvrir (voir capture d'écran). Lorsque vous créez un nouveau document, un calque y est déjà présent par défaut - en général il s'agit d'un arrière-plan, souvent blanc. S'il n'est pas déjà blanc, remplissez-le pour l'exercice suivant.

calques photoshop

Créer des calques

Dans l'exemple ci-contre, j'ai d'abord créé un nouveau calque en appuyant sur l'icône "feuille" de la palette (voir capture d'écran ci-contre). J'ai ensuite sélectionné le nouveau calque créé (bleuté) en cliquant une fois sur celui-ci dans la palette.

J'ai ensuite placé sur mon document une ampoule dont je n'ai pas rempli l'intérieur de couleurs.

J'ai créé mon tout premier calque - voyons maintenant ses utilités.

calques photoshop calques photoshop

De l'utilité basique d'un calque

Essayez d'abord de changer la couleur du premier calque : sélectionnez-le comme cité au-dessus et utilisez l'outil pot de peinture pour le remplir de bleu.

L'ampoule se remplit aussi, mais pourquoi ? En fait l'ampoule n'est pas pleine, elle est toujours vide, mais transparente. Le damier gris-blanc, dans Photoshop, symbolise en effet la transparence et vous pouvez la constater dans votre palette de calques. Donc, basiquement, les calques peuvent servir à superposer des éléments partiellement transparents.

Pour aller un peu plus loin, créez un nouveau calque en-dessous de l'ampoule. Si le calque apparaît au-dessus, cliquez-glissez-le au-dessous en maintenant la souris enfoncée sur celui-ci. Dessinez quelque chose sur ce nouveau calque. Vous remarquerez que l'eau que j'ai placée dans le calque situé au-dessous de l'ampoule apparaît aussi au-dessous de celle-ci dans le document (capture d'écran 02).

Si vous déplacez le calque de l'eau au-dessus de l'ampoule de la même manière, il se produira l'inverse. Vous pouvez donc constater que l'arborescence des calques est plutôt logique : du bas au haut, le bas étant la base (arrière-plan).

calques photoshop calques photoshop calques photoshop]]> FAQ Poser http://www.webentraide.com/tutoriels/index.php/2005/01/08/5-faq-poser 2005-01-08T15:18:31+01:00 fr Co Poser Ce qui suit n'est pas un tutoriel à proprement parler. Il s'agit plutôt d'un regroupement d'astuces et de connaissances qui sera probablement utile à tout débutant. Cette F.A.Q. sera complétée régulièrement. Ce qui suit n'est pas un tutoriel à proprement parler. Il s'agit plutôt d'un regroupement d'astuces et de connaissances qui sera probablement utile à tout débutant. Cette F.A.Q. sera complétée régulièrement.

Détourer facilement un élément rendu

Q : J'ai rendu mon premier personnage et je voudrais pouvoir le reprendre facilement de manière à ce que le fond soit transparent. Comment m'y prendre ?

R : Il faut sauvegarder l'image en format .psd. Une fois que le rendu est fait, on sauve d'abord la scène en .pz3 (format des compositions Poser) et une deuxième fois en format Photoshop .psd (celui-ci est normalement lisible avec PSP aussi).
Le format .psd conserve une "couche alpha" que l'on va pouvoir sélectionner et effacer - pour avoir la transparence autour de son personnage.

Appliquer des morphs sur un personnage

Q : Je voudrais changer le visage de Victoria 3.0, mais je ne sais pas trop comment m'y prendre.

R : Tout d'abord, il vous faut acquérir les morphs de Victoria 3.0 (vendus séparément). Une fois ceux-ci installés, vous verrez qu'il existe deux types de morphs : les INJ (inject) et les REM (remove) - le système d'injection de morphs a été conçu pour alléger les personnages (on n'injecte que ce dont on a besoin).
Injecter ne suffit pas, il vous faudra tourner les molettes des morphs injectés pour les appliquer sur Victoria. Pour cela allez dans le menu Window > Parameter Dials. Une petite fenêtre contenant les molettes en question devrait s'ouvrir. Tournez les molettes ou entrez les valeurs numériques correspondantes au résultat souhaité de 0 à 1, en sachant que 0 est le minimum et 1 le maximum.

Des cheveux invisibles ?

Q : J'ai appliqué des cheveux sur mon personnage, mais on ne voit que des petits points. Que faire ?

R : En fait, les petits points sont bel et bien vos cheveux. Ces petits points représentent la transparence d'un objet - care généralement, les cheveux sont des objets solides, rendus semblables à des cheveux grâce à des fichiers de transparence. Une fois votre rendu fait, les cheveux apparaîtront normalement.

Des personnages qui semblent réels

Q : J'ai acheté Poser et voilà, il y a des personnages à l'intérieur mais ils ne me satisfont pas. Comment faire pour en obtenir des meilleurs ?

R : En fait, vous trouverez des modèles de bien meilleure qualité chez Daz (notamment Victoria 3.0). Mais cela ne suffira pas - il vous faudra acheter des textures (peaux) pour les rendre réels. Vous en trouverez toute une panoplie dans ma boutique personnelle.

Habits qui collent au corps

Q : Quand je charge des habits pour mon personnage dans la scène Poser, ceux-ci apparaissent décalés. Aussi, quand j'applique une pose à mon personnage, ils ne suivent pas.

R : En fait, la solution est des plus simples. Allez dans le menu Figure > Conform to... et choisissez le personnage auquel vous souhaitez appliquer l'habit.

Du contenu pour pas cher

Q : Je trouve que Poser est bien cher. De même, tous les objets additionnels à acquérir dépassent nettement mon budjet...

R : Il existe une solution légale ! Daz travaille actuellement sur un logiciel similaire à Poser : Daz|Studio. Celui-ci est entièrement gratuit. On trouve aussi très facilement de nombreux modèles gratuits de qualité sur Internet. Parmi les plus connus : Kozaburo (cheveux réalistes), Maya (personnage manga), Renderosity (absolument de tout).

Fichiers de transparences ?

Q : Je me demande de quoi il s'agit et comment ça marche.

Prenons un exemple : les cils de Victoria 3.0 ne sont en fait qu'un morceau de peau uniforme. Comment "faire semblant" qu'il y ait des vrais cils ? En créant une transparence. Il s'agit d'un simple fichier noir-blanc, ou le noir définit la zone de transparence. On va donc dessiner ses cils en blanc sur un fond noir. Poser va ensuite convertir l'espace noir en transparent dans le rendu final.

Distribuer une texture personnelle

Q : J'ai fait ma première texture et je voudrais la redistribuer. Que faire ?

Il va falloir respecter quelques règles de base. Une texture se place toujours dans le dossier Poser prévu à cet effet (Poser5 > Runtime > textures > VotreNom). De plus, il faudra réaliser un fichier MAT pour permettre aux futurs utilisateurs de l'appliquer d'un clic - référez-vous à mon tutoriel à ce sujet pour en savoir plus. Les fichiers MAT se placent dans le dossier Poser5 > Runtime > libraries > Pose > VotreNom.
Lorsque vous redistribuez des textures, veillez à recréer cette arborescence dans un dossier vide, zippez-le tout et partagez !

]]> Comprendre les balises meta http://www.webentraide.com/tutoriels/index.php/2004/10/30/4-comprendre-les-balises-meta 2004-10-30T15:17:16+02:00 fr Co Articles web Les méta-tags sont un ensemble de balises HTML servant à identifier et à définir le contenu d’une page Internet, afin de les indexer / référencer correctement. Les moteurs de recherche vont généralement « lire » le contenu de ces balises grâce à des robots (programmes qui parcourent une page en analysant son contenu) et en extraient les informations à afficher lors d’une recherche. Notons qu’il s’agit d’une généralité, car les moteurs de recherche actuels ont des systèmes très différents. Altavista, par exemple, n’affiche que les 250 premiers caractères d’une page Web. Les métas peuvent aussi avoir d’autres fonctions utiles, telles que rediriger un internaute, par exemple. Les méta-tags sont un ensemble de balises HTML servant à identifier et à définir le contenu d’une page Internet, afin de les indexer / référencer correctement. Les moteurs de recherche vont généralement « lire » le contenu de ces balises grâce à des robots (programmes qui parcourent une page en analysant son contenu) et en extraient les informations à afficher lors d’une recherche. Notons qu’il s’agit d’une généralité, car les moteurs de recherche actuels ont des systèmes très différents. Altavista, par exemple, n’affiche que les 250 premiers caractères d’une page Web.
Les métas peuvent aussi avoir d’autres fonctions utiles, telles que rediriger un internaute, par exemple.

Structure

<head>
<meta name=“nom_du_meta” content=“contenu_du_meta” />
</head>

Il n'y a pas de balise méta de fermeture. Pas de sauts de lignes non plus, ils pourraient être mal interprétés.

Il existe deux types de méta-tags : les name et les http-equiv. Les http-equiv, sont, littéralement, les équivalents d’une adresse http. Ils servent par exemple, à rediriger automatiquement un internaute d’une page à une autre. Ce sont donc les navigateurs qui s’en servent (Explorer, Safari…).

Exemple, le méta refresh (rafraîchir / actualiser) :
(0 étant le nombre de secondes après lesquelles le navigateur doit actualiser la page).

<meta http-equiv=“refresh” content=“0; url=pageweb1.htm” />

Les name sont toutes celles qui ne correspondent pas aux navigateurs, donc toutes les autres.

Les plus utilisées

Description
Certains moteurs de recherche affichent le contenu de cette méta comme description du site Internet.
<meta name=“description” content=“Les tutoriels exclusifs d'ExileDesigns” />

Keywords (mots-clés)
Certains moteurs utilisent cette balise lors de la recherche par mots-clés. p.ex, vous tapez « webdesign + tutoriels » et vous pourriez tomber sur le site décrit ci-dessus.
<meta name=“keywords“ content=“tutoriel, tutoriels, web, html, exiledesigns, webdesign” />

Copyright
Comme son nom l'indique, permet de décrire le copyright de la page en question.
<meta name=“copyright” content=“Le contenu de cette page est © ExileDesigns 2004, tous droits réservés” />

Revisit after (revisite dans)
Indique au robots de revenir parcourir la page après un certain temps (en jours), utile pour les mises à jour fréquentes.
<meta name ="revisit-after" content="3 days" />

Pragma (no-cache)
Permet de prévenir les navigateurs de stocker des données dans le cache des utilisateurs.
<meta http-equiv=“Pragma” content=“no-cache” />

Refresh (actualiser)
Actualise automatiquement la page, 0 étant le nombre de secondes après lesquelles le navigateur doit exécuter l'actualisation.
<meta http-equiv=“refresh” content=“0; url=pageweb1.htm” />

Window-target (fenêtre cible)
Indique dans quelle cible une page doit se charger, permettant ainsi à une page de ne pas rester « coincée » dans les frames d'un référent.
<meta http-equiv=“Window-target” content=“_top” />

Robots
Permet d'indiquer à un robot quelles pages indexer ou ignorer. All par défaut signifie que le robot va indexer toutes les pages liées. On peut le remplacer par none (aucune) / index (seulement la page sur laquelle le robot se trouve, ne pas suivre de liens) / follow (peut suivre les liens librement) / noindex (ne doit pas indexer cette page).
<meta name=“robots” content=“all” />

Metas et frames

Les robots sont souvent incapables de parvenir au contenu des frames : ils s’arrêtent généralement au frames et se retrouvent donc sans informations suffisantes (rappelons que certains moteurs tels que Google et Altavista référencent le contenu textuel d’une page).

En général, lors de la construction d’un frameset, on ajoute dans la balise noframes quelque chose du genre « Désolé, mais votre navigateur n’interprète pas les frames ». Et c’est ce qui se retrouve ensuite dans la description de votre site lors d’une recherche avec Google. Pour éviter cela, vous pouvez vous servir de cette balise noframes comme d’un contenant HTML. Vous pouvez y ajouter des balises body, des liens, du texte… qu’un robot identifiera aisément.

Metas et documents autres

Les moteurs de recherche ne sont pas capables de lire à l’intérieur d’un fichier Flash, par exemple (chose désormais révolutionnée, Google peut, mais restent les autres navigateurs). Il convient donc de toujours placer votre fichier .swf à l’intérieur d’une page HTML, contenant, elle, les métas adéquats.

Légalement parlant

Vous ne pouvez pas utiliser des noms de marques ou de sites compétitifs dans vos méta-tags. Légalement, cela reviendrait à essayer de se faire passer pour une entreprise que vous ne représenteriez pas. De même, concevez votre propre liste de mots-clés, copier celle d’un autre site est un acte illégal.

Continuer les recherches

Voici une liste de liens utiles et intéressants pour ceux qui souhaiteraient approfondir le sujet.

]]> Un gif animé simple http://www.webentraide.com/tutoriels/index.php/2004/08/26/9-gif-anime 2004-08-26T16:37:18+02:00 fr Co Photoshop Le "gif" est un format d'image permettant entre autres de gérer une animation image par image. Ce tutoriel s'adresse aux personnes qui n'ont jamais réalisé un gif animé. Il vous guidera pas à pas à réaliser votre première image animée. Outils nécessaires : Photoshop et ImageReady Le "gif" est un format d'image permettant entre autres de gérer une animation image par image.
Ce tutoriel s'adresse aux personnes qui n'ont jamais réalisé un gif animé. Il vous guidera pas à pas à réaliser votre première image animée.

Outils nécessaires : Photoshop et ImageReady

Se préparer

Préparez toute votre animation sur un seul document .psd (extension propre à Photoshop) selon la règle suivante : un calque = une image.

gif animé

Passer à ImageReady

Passez à ImageReady une fois votre document prêt en cliquant simplement sur ce bouton de la palette à outils (voir capture).

gif animé

Créer les images de l'animation

Dans ImageReady, vérifiez que la fenêtre "Animation" soit ouverte car c'est avec elle que nous allons travailler (allez dans Fenêtre > Animation : vérifiez qu'animation soit coché par un petit "vu").

Dans cette fenêtre, "Créez des images à partir des calques" comme indiqué dans la capture d'écran ci-contre.

Vos images vont se placer dans la fenêtre animation, dans l'ordre où elles vont être jouées (voir capture 02). Vous les déplacez en cliquant-glissant, en modifiez le temps d'arrêt sur une image...

gif animé

Finalisation

Il est conseillé d'optimiser votre image histoire qu'elle ne soit pas excessivement lourde.
Allez dans Fenêtre > Optimisation, et jouez avec les paramètres mais sans changer le mode de l'image (gif).

Ensuite faites Fichier > Enregistrer une copie optimisée sous et le tour est joué.

]]> Réaliser un fichier RSR http://www.webentraide.com/tutoriels/index.php/2004/03/26/6-fichiers-rsr-poser 2004-03-26T15:23:04+01:00 fr Co Poser Le RSR est un format d'images utilisé par Poser pour générer des vignettes dans vos librairies. Pour que vos produits semblent plus professionnels et conviviaux, il est important de réaliser des vignettes indicatives pour vos fichiers MAT, par exemple, ou pour tout autre fichier Poser (cheveux, personnages, poses, etc). Il existe de nombreuses manières d'en réaliser. J'en ai expérimentées plusieurs; voici la façon que je préfère et que j'ai adoptée pour la réalisation de tous mes produits. Outils nécessaires : Photoshop (ou autre logiciel 2D) et p3do Explorer Le RSR est un format d'images utilisé par Poser pour générer des vignettes dans vos librairies. Pour que vos produits semblent plus professionnels et conviviaux, il est important de réaliser des vignettes indicatives pour vos fichiers MAT, par exemple, ou pour tout autre fichier Poser (cheveux, personnages, poses, etc). Il existe de nombreuses manières d'en réaliser. J'en ai expérimentées plusieurs; voici la façon que je préfère et que j'ai adoptée pour la réalisation de tous mes produits.

Outils nécessaires : Photoshop (ou autre logiciel 2D) et p3do Explorer

Le rendu

Tout d'abord, pensez que votre vignette devra être la plus descriptive que possible en vue de rendre la tâche de vos clients plus facile et visuellement plus accessible. Vous allez donc réaliser un rendu du produit que vous souhaitez publier. Voilà la méthode :

1.
Dans Poser, modifiez la taille de votre scène. Allez dans le menu Window > Document Window size...
L'essentiel, c'est de la rendre carrée, car la taille finale de la vignette sera de 91x91. Veillez donc à ce que votre largeur et longueur soient identiques (p.ex. 400x400, 877x877, etc).

2.
Composez votre scène (souvenez-vous que pour être simple d'utilisation et efficace, il est important que votre vignette ne contienne que le minimum d'informations possible - de la manière la plus indicative que possible).
Pour une injection du visage de Victoria 3, par exemple, je ferai un simple rendu de la tête de Victoria, avec des cheveux et une texture, histoire qu'elle ait l'air plus naturelle et qu'elle ne semble pas horriblement blanche. J'utiliserai une lumière naturelle aussi (une vignette ne doit pas être "artistique") et une pose originale de manière à ce que ma vignette soit particulière (et pas ennuyeuse) et d'apparence soignée (pas artistique ne signifie pas pas professionnel).

3.
Rendez et (important) sauvez votre rendu en format Photoshop (.psd) comme désigné dans la capture d'écran ci-dessous. Sauver en format .psd va vous permettre d'avoir un fond transparent, grâce à la couche alpha qui est automatiquement générée lors de la sauvegarde.

Premiers pas dans Photoshop

Ouvrez avec Photoshop le fichier que vous venez de sauvegarder. Allez dans votre palette "couches" : vous verrez que s'y trovent des couches colorées ainsi qu'une couche noire et blanche (la couche alpha). Sélectionnez cette dernière (CTRL + clic sur la couche).

Retournez maintenant dans votre palette "calques". Votre personnage (ou l'espace qui l'entoure) est sélectionné. Si c'est l'espace autour qui est sélectionné, inversez la sélection (SHIFT + CTRL + I ou Sélection > Inverser).

Quand votre personnage est sélectionné, copiez-le et collez-le sur un nouveau calque. Effacez celui d'arrière-plan et vous avez une transparence exacte autour de votre personnage, ce qui vous permettra d'ajouter un fond original.

Créer un .png

Maintenant que votre rendu est prêt, nous allons réduire sa taille. Pensez à le recadrer auparavant, s'il y a lieu. Comme mentionné plus haut, une vignette doit faire 91x91 pixels. Réduisez donc à cette taile votre fichier (Image > Taille de l'image).

Décorez (mettez en valeur) votre vignette. En général, j'utilise un motif pour le fond, et j'ajoute un + ou un - pour les injections, parfois du texte, selon mes besoins. Vous pouvez faire à peu près tout ce qu'il vous plaira, mais veillez à ce que votre vignette soit remplie à 100% et ne contienne pas de transparences.

Quand votre fichier est prêt, sauvez-le en format PNG. Fichier > Enregistrer sous... et choisissez le format PNG.

Convertir en format .rsr

Maintenant, vous devriez avoir un fichier PNG sauvé quelque part sur votre ordinateur.

1. Ouvrez p3do Explorer et et parcourez vos répertoires pour retrouver ce PNG.
2. Quand vous l'avez en vue, sélectionnez-le et allez dans Tools > Convert Rsr2Png.
3. Dans la boîte de dialogue, assurez-vous que ".Png to .Rsr" soit coché.

Faire fonctionner le .rsr dans Poser

1. Placez votre fichier RSR dans le même dossier de librairie dans lequel se trouve le fichier à exécuter. Si vous avez par exemple un fichier MAT appelé "peau.pz2" dans le fichier Pose/Personnel de votre librairie, vous placerez votre RSR exactement à cet endroit là.

2. Il va falloir nommer votre fichier RSR exactement de la même manière que votre fichier à exécuter. Attention aux majuscules ! Par exemple : "Skin.pz2" > "Skin.rsr"

3. Ouvrez Poser ainsi que votre librairie : votre vignette devrait maintenant fonctionner !

]]> Peindre des drapés simples 2 http://www.webentraide.com/tutoriels/index.php/2004/03/26/11-peindre-drapes-photoshop 2004-03-26T01:30:25+01:00 fr Co Photoshop Ce tutoriel va vous apprendre une deuxième façon de peindre des drapés très simplement. Il fait référence à la version 7 de Photoshop : si vous utilisez une version autre, quelques différences pourraient apparaître au niveau des menus et commandes. Ce tutoriel va vous apprendre une deuxième façon de peindre des drapés très simplement.
Il fait référence à la version 7 de Photoshop : si vous utilisez une version autre, quelques différences pourraient apparaître au niveau des menus et commandes.

Esquisser le drapé

Créez un nouveau calque et esquissez les limites de votre drapé avec une brosse (outil pinceau) à bords durs.
Remplissez la zone avec le pot de peinture et assurez-vous de boucher les petits trous s'il y en a, pour avoir une masse uniforme.

Ne vous souciez pas trop des détails de la forme pour le moment. Aussi, ne vous préoccupez pas du drapé passant au-dessus d'endroits de votre scène où vous ne souhaiteriez pas qu'il apparaisse. Nous effectuerons les corrections plus tard.

Assombrir les bords

Vous allez principalement travailler avec l'outil doigt. Mais d'abord préparez le terrain.

Il va vous falloir des zones sombres - sélectionner donc l'outil assombrir (densité +) avec les données suivantes :
Tons moyens / Une brosse grande et aux bords doux, et une exposition moyenne (j'ai utilisé 60%).

Avec cette brosse, assombrissez donc tout le contour du drapé (peut varier selon les ombres et lumières de votre scène).

L'outil "doigt"

Tout d'abord assurez-vous que vous vous trouvez sur le calque du drapé et séectionnez-le (CTRL + clic sur le calque dans la palette). Sélectionnez l'Outil doigt : Mode normal / Intensité élevée (allez seulement jusqu'à 99%).

Maitenant commencez à tracer acec l'outil : assurez-vous que vous commencez un tracé de l'intérieur de la sélection. Aussi, suivez les courbes que votre tracé devrait avoir (dans mon exemple de haut en bas). Vous pouvez finir le tracé à l'extérieur de la sélection, il semblera plus naturel ainsi. Voir capture d'écran 1.

Une fois que c'est fait sur toute la longueur, passez en mode "assombrir" et refaites-le.

Vous pouvez aussi esquisser des ombres depuis le bas vers le haut, si vous avez d'autres parties de votre drapé qui devraient être assombries. Pour ce faire, abaissez l'intensité : vous obtiendrez des ombres plus petites. Ne le faites que si vous le jugez nécessaire.

Détailler et corriger

Maintenant reprenez l'outil d'assombrissement avec les mêmes données qu'à la phase 2 de ce tutoriel.
Assombrissez les bords ainsi que quelques ombres que vou souhaiteriez plus sombres.

Corrigez les bords de votre drapé avec l'outil gomme, en utilisant une brosse au contour doux si vous avez la main qui tremble ou dur si vous êtes déjà expérimentés.
Essayez, en corrigeant, de moduler la forme de votre drapé de façon à ce qu'il soit cohérent à vos ombres.

Pour effacer les morceaux de drapés délicats (par exemple sur un poignet), passez l'opacité du calque drapé à 80% : vous verrez ainsi au travers de celui-ci. Effacez avec soin, avec l'outil gomme (petit pinceau).

Changer les couleurs

Vous arrivez au bout ! Si vous souhaitez changer la couleur de votre drapé, allez dans Image > Réglages > Teinte / Saturation.

Assuez-vous que l'option "Redéfinir" soit cochée et amusez-vous avec les paramètres jusqu'à obtenir un résultat satisfaisant.

]]> Dynamiser ses pages avec PHP http://www.webentraide.com/tutoriels/index.php/2004/01/30/3-dynamiser-ses-pages-avec-php 2004-01-30T15:11:59+01:00 fr Co Php / MySQL Les frames sont souvent inesthétiques, imprécises, difficiles à gérer et n'apportent pas grand chose à l'amélioration de la gestion de vos sites. Le PHP est une bonne manière de pallier à leurs manques et de vous faciliter les choses si vous souhaitez un site à interface unique. Les avantages d'une mise en page en PHP ? Grosso modo, il va vous permettre de faire tenir votre site sur une seule page tout en conservant un contenu 100% traditionnel et la quantité d'informations que vous souhaitez et ce, sans aucun problème. Ceci va améliorer le temps de chargement de vos pages : tous vos graphiques ne seront chargés qu'une seule fois. Mais surtout, il va vous faciliter la vie pour les mises à jour. Les frames sont souvent inesthétiques, imprécises, difficiles à gérer et n'apportent pas grand chose à l'amélioration de la gestion de vos sites. Le PHP est une bonne manière de pallier à leurs manques et de vous faciliter les choses si vous souhaitez un site à interface unique.

Les avantages d'une mise en page en PHP ? Grosso modo, il va vous permettre de faire tenir votre site sur une seule page tout en conservant un contenu 100% traditionnel et la quantité d'informations que vous souhaitez et ce, sans aucun problème.
Ceci va améliorer le temps de chargement de vos pages : tous vos graphiques ne seront chargés qu'une seule fois. Mais surtout, il va vous faciliter la vie pour les mises à jour.

Structure

Vous avez une page principale, mettons index.php, sur laquelle va se trouver votre interface, proprement fractionnée grâce aux tableaux. Réservez-y une place suffisamment large pour y faire apparaître le contenu futur et laissez-la vide pour l'instant. Cette page sera votre base.

Dans cette base, à l'endroit prévu, vont venir se placer toutes vos autres pages. Comment ?
Nous allons y placer un script qui va inclure les pages de contenu à l'intérieur de la page de base grâce à l'utilisation simple de liens un peu particulier.

Script de base

Nous allons tout d'abord créer un script qui va être extérieur à vos pages (il y sera inclus par la suite). Créez une page appelée rubrique.php et copiez-collez-y le code suivant :

<?php
if (!$file) { $file = "default"; } if ($folder) { $page = $folder.'/'.$file.'.php'; }
else { $page = $file.'.php'; } if (!file_exists($page)) { $page = 'accueil.php'; }
?>

Ce script va définir la structure des liens et de l'intégration des pages. Remarquez la ligne $page = $folder.'/'.$file.'.php'; - elle définit le chemin d'accès de vos fichiers : la variable $folder sera le dossier dans lequel la page contenu à intégrer se trouve, la variable $file sera le nom de cette page, sans l'extension et le .php définit que les pages à inclure devront toutes avoir l'extension .php.

Le script définit aussi que s'il y a échec (si la page n'existe pas, ou n'est pas trouvée), la page accueil.php (page par défaut) se chagera à sa place. Il définit à la fois que c'est cette page qui sera chargée à l'ouverture de votre site.

Intégration dans la page

Commencez par créer votre page par défaut. Faites simple pour commencer et comprendre, placez-y simplement un texte. Dans votre code HTML, supprimez les balises html, body et head ainsi que tout ce qui se trouve entre les balises head.

Créez-en une deuxième, différente pour pouvoir les reconnaître. Donnez à la première le même nom de fichier défini dans le script rubrique.php (dans mon exemple il s'agit de accueil.php). Donnez à la deuxième un nom quelconque, avec l'extension .php (par exemple page.php).

Faites en sorte que votre index.php, rubrique.php et accueil.php soient à la racine et que votre page de contenu soit placée dans un dossier (par exemple un dossier contenu).

Maintenant que vous avez deux pages de contenu (dont celle par défaut), fermez-les et passez à votre page contenant l'interface (dans mon exemple index.php). Avant la balise head, placez-y le code suivant :

<?php include("rubrique.php"); ?>

Placez ensuite le code suivant à l'endroit exact où vous souhaitez que vos pages apparaissent (dans la cellule de tableau préparée auparavant).

<?php include($page); ?>

Les liens

Sur votre page index.php, créez un lien avec la structure suivante :

index.php?folder=contenu&file=page

Où contenu est le nom du dossier dans lequel vous voulez entrer (il peut évidemment y avoir aussi des sous-dossiers du style contenu/affaires) et où page est le nom de fichier de la page de contenu à appeler, sans l'extension.

Testez, tout devrait fonctionner.]]> Iframes, comprendre et apprendre http://www.webentraide.com/tutoriels/index.php/2004/01/10/2-iframes-comprendre-et-apprendre 2004-01-10T14:59:51+01:00 fr Co Html, xhtml, css Une Iframe, c'est un cadre (frame) que vous pouvez placer à l'intérieur de vos pages, avec le contenu de votre choix. Contrairement à la frame normale, l'Iframe, grâce aux tableaux, peut se placer n'importe où sur la page de manière totalement indépendante. L'Iframe conserve les propriétés des frames simples : vous pouvez en faire changer le contenu grâce aux liens externes et aux attributs target. Une Iframe, c'est un cadre (frame) que vous pouvez placer à l'intérieur de vos pages, avec le contenu de votre choix. Contrairement à la frame normale, l'Iframe, grâce aux tableaux, peut se placer n'importe où sur la page de manière totalement indépendante. L'Iframe conserve les propriétés des frames simples : vous pouvez en faire changer le contenu grâce aux liens externes et aux attributs target.

Comprendre et visualiser

C'est une page totalement indépendante (appelée cadre.htm) qui a ses propriétés propres (fonds, couleurs, images, textes, etc). Sa taille peut être définie.

Elle peut bien sûr contenir des liens, mais attention : ceux-ci se chargent à l'intérieur de l'Iframe. Essayez de cliquer sur le lien à l'intérieur de l'Iframe en jaune. Il y a bien sûr un moyen d'ouvrir un lien interne à une Iframe à l'extérieur de celle-ci.

Vous pouvez aussi influencer le contenu de cette Iframe par des liens extérieurs. Cliquez ici pour voir.

Créer l'iframe et la placer

Commencez une nouvelle page HTML et incluez-y tout ce que vous souhaitez voir apparaître dans votre fenêtre. Conservez la structure de base HTML (avec les balises head et body). Ne vous inquiétez pas pour la largeur du texte, il s'alignera plus tard à la largeur de votre Iframe.

Ensuite, prenez la page qui va contenir l'Iframe (votre page principale) préparez l'emplacez de l'Iframe et placez-y le code suivant :

<iframe src="cadre.htm" width="300" height="150" name="iframe">Votre navigateur ne gère pas les Iframes.</iframe>

Vous pouvez bien évidemment changer la largeur de votre Iframe (attribut width) ainsi que sa longueur (attribut height). Et remplacez bien sûr cadre.htm par l'adresse de votre propre page, si vous l'avez appelée d'une manière différente.

Notez que si vous souhaitez inclure plusieurs Iframes dans une même page, il vous faudra leur donner un nom différent (attribut name) pour éviter les conflits de liens.

Gérer le contenu par des liens externes

Pour créer des liens externes qui vont influencer le contenu de l'Iframe faites comme suit.

Tout d'abord assurez-vous que la balise iframe contienne bien l'attribut name (dans mon code disponible plus haut, il y est, avec la valeur iframe).

Créez votre lien, et ajoutez à l'intérieur de la balise a l'attribut target, avec pour valeur le nom que vous avez donné à votre Iframe (chez moi : iframe).

Voici un exemple de lien :

<a href="sitespreferes.htm" target="iframe">Mes sites web préférés</a>]]> Peindre des drapés simples http://www.webentraide.com/tutoriels/index.php/2003/11/29/10-peindre-drapes-photoshop 2003-11-29T01:23:39+01:00 fr Co Photoshop Dans ce tutoriel, je vais apprendre aux utilisateurs de Photoshop comment peindre des drapés simples à intégrer dans leurs compositions. Le tutoriel a été écrit pour Photoshop 7, il pourrait y avoir des différences si vous utilisez une version antérieure. Dans ce tutoriel, je vais apprendre aux utilisateurs de Photoshop comment peindre des drapés simples à intégrer dans leurs compositions.
Le tutoriel a été écrit pour Photoshop 7, il pourrait y avoir des différences si vous utilisez une version antérieure.

Esquisser le drapé

Définissez le drapé, en esquissant le contour la zone où il sera placé, à l'aide d'un pinceau dur. Remplissez ensuite la zone avec l'outil Pot de peinture et faites en sorte d'avoir une masse de couleur uniforme en couvrant tous les trous, s'il y en a, avec le pinceau.

Il n'y pas besoin de s'occuper des détails pour le moment. La zone peut être définie d'une manière assez grossière. Elle sera retouchée plus tard.

Peindre les premières ombres

Choisissez l'outil Densité + en utilisant les données suivantes : tons moyens. Choisissez un grand pinceau aux bords flous : nous allons esquisser les premières ombres (j'ai utilisé un pinceau de largeur 65).

Il va vous falloir modifier l'opacité de votre pinceau en fonction de la couleur que vous utilisez. J'ai utilisé 50% pour ce bleu assez sombre, et j'aurais baissé le pourcentage si j'avais dû travailler sur une couleur plus claire.

Commencez toujours par le haut et descendez, ou de la gauche vers la droite (si vous êtes droitier) et tracez des courbes d'un geste rapide et léger, pour un maximum de fluidité. En traçant vos courbes, essayez de vous imaginer un drapé réel.

Ne commencez jamais vos courbes à l'intérieur de votre drapé. Partez toujours d'une extrémité extérieure pour aller vers une autre extrémité et finissez toujours à l'extérieur.

Ajouter des détails aux ombres

Prenez un pinceau doux plus petit (à bords flous), toujours avec l'outil Densité +. Réalisez des courbes plus petites, de la même manière que dans la phase 2.

Réaliser un drapé correctement n'est qu'une question de sensibilité. Il va probablement vous falloir répéter ces phases plusieurs fois avant d'arriver au résultat souhaité.

Ajouter du volume

Votre drapé devrait déjà avoir un semblant de volume. Pour l'améliorer, prenez l'outil Densité - et reprenez les mêmes paramètres utilisés avec l'outil Densité + en phase 2.

Réalisez de la même manière des courbes, dans les endroits où vous n'êtes pas encore passés avec l'outil densité +.
Votre drapé devrait maintenant avoir sa forme définitive.

Corriger et ajuster

Corrigez les bords de votre drapé avec l'outil Gomme (pinceau doux). Essayez de lui donner une forme qui corresponde à vos ombres.

Ombrez ensuite les bords de votre drapé (avec l'outil Densité +). Assurez-vous de faire correspondre vos ombrages à l'éclairage de votre scène.

Ajouter de la puissance et changer les couleurs

Dupliquez le calque contenant le drapé et passez celui supérieur en mode Incrustation. Cette fois votre drapé a vraiment plus de volume.

Si la couleur et le contraste ne vous satisfont pas, vous pouvez les changer grâce aux options d'image (teinte et saturation, et luminosité et contraste).

Incruster un motif

Si vous souhaitez inscruster un motif sur votre drapé, choisissez un motif (tile) aux couleurs légère et allez dans Edition > Utiliser comme motif.

Choisissez ensuite votre calque de drapé, sélectionnez-le, créez-en un nouveau au-dessus et remplisez-le du motif en allant dans Edition > Remplir > et choisissez le motif.

Passez ce calque en mode incrustation. Vous pouvez baisser l'opacité si le résultat est trop brillant.

]]>