Living Tuts : Tutoriels de qualité pour apprendre Photoshop, le webdesign, le développement web, le digital painting, etc…

Lancement du grand concours ″La vie en 2100″ !

Yoann — Wed, 23 Nov 2011 17:03:57 +0000

DesignSpartan et Living Tuts lancent aujourd’hui un grand concours de création graphique pour promouvoir la création et l’art digital. Nous nous sommes associés à de prestigieux partenaires afin de proposer un concours riche et des lots intéressants aux 4 vainqueurs !

Il était grand temps que ce concours dont on vous parle depuis des mois voit le jour ! Après un travail titanesque, voici enfin qu’il paraît au grand jour avec son site dédié. Petite présentation…

Le thème : ″La vie en 2100″

2100, une date à la fois proche et si lointaine ! On peut imaginer une infinité de possibilités pour cette fin de siècle.
Le monde sera-t-il idyllique et paradisiaque ou totalement dévasté par un cataclysme sans précédent ? La conquête spatiale sera-t-elle en marche ? Aura-t-on des pingouins ou des extraterrestres comme animaux de compagnie ? Les chats gouverneront-ils finalement le monde ?

Design Spartan et Living Tuts lance le challenge aux participants de répondre à la question : Que sera la vie en 2100 ? Utilisez vos talents d`artistes et vos outils d`édition d`images ou de 3D préférés pour imaginer le quotidien en 2100.

Comment participer ?

Rendez-vous sur le site dédié au concours (http://concours.designspartan.com) pour envoyer votre plus belle image depuis la page du site.

Vous avez jusqu`au 11 janvier 2012 à 23h59 (GMT+1) pour envoyer votre création graphique sur ce thème, ce qui vous laisse 7 semaines à compter d’aujourd’hui. A vous de réaliser votre meilleure création d`art digital : photomanipulation, illustration, 3D, matte painting… Laissez libre à court à votre imagination et à votre style!

4 gagnants seront sélectionnés par notre jury. Tout le monde a une chance de gagner, même les débutants ! Le prix de l`originalité récompense le concept le plus original ou le plus drôle sans se reposer uniquement sur les compétences techniques alors relevez le challenge !

Les lots

De très beaux lots de nos partenaires attendent les vainqueurs comme vous pouvez le voir ci-dessous (cliquez pour voir en grand) :

Rendez-vous sur le site du concours !

Le concours possède son propre site et vous y trouverez toutes les informations nécessaires, le jury passionné d’experts, le règlement complet, la page pour envoyer votre création et même une galerie des participations.

Grand concours de création : « La vie en 2100″

Merci à nos partenaires

Je vous invite à en apprendre plus sur eux sur la page d’accueil du site du concours où une présentation leur est dédiée, ou tout simplement en cliquant sur leur logo !

J’espère que cette initiative vous plaira et que vous serez nombreux à participer ! Si vous avez une question, n’hésitez pas à la soumettre en commentaire (mais lisez le site avant, normal toutes les réponses s’y trouvent).

Alors on se motive, on ouvre sa boîte à idée, son logiciel préféré et à l’attaque ! N’oubliez pas de répandre la nouvelle du concours autour de vous.

Bonne chance à tous !

Réaliser une icône ou un logo en CSS3

Mwea — Fri, 28 Oct 2011 15:06:54 +0000

Salut à tous, aujourd’hui je suis ici pour la rédaction d’un tutoriel sur la réalisation d’image en CSS3. Vous en avez sûrement déjà entendu parler, soit via Twitter si vous me followez, soit en ayant parcouru le web, en effet plusieurs créations du type ont déjà été postées sur le web comme par exemple le fail whale ou encore le logo opera.

Lorsque j’ai découvert ces réalisations, j’ai été assez impressionné de la qualité de ce travail et j’ai voulu me lancer moi aussi, mais je me suis rapidement trouvé face au mur. En effet, il n’existait, à l’époque, pas de tutoriels expliquant les techniques de programmation utilisées. Du coup j’ai fait des recherches, accumulé des connaissances et je suis là pour les partager.

Bon fini de blablater, je vais vous énoncer les points qui vont être abordées durant le tutoriel, tout d’abord : Les propriétés de transformations en CSS3, ensuite le principe des border-radius et enfin les dégradés en CSS.

Nous devons maintenant choisir un modèle, une image que nous allons reproduire. Pour ce tutoriel, j’ai choisi le logo de l’agence Weode dont font parti les deux fondateurs de Livingtuts qui sont Gaétan Weltzer et Yoann Marie.

Cette image peut apparaître en apparence simple, mais vous verrez que c’est une autre histoire lorsqu’il s’agit de la réaliser en CSS. Pour cela, nous allons donc suivre un cheminement en 5 étapes : La base, La partie gauche, Le centre, La partie droite et enfin Les dégradés. Voici la version finale que vous devriez avoir à la fin de ce tutoriel :

Avant de commencer :

Nous allons respecter dans ce tutoriel une syntaxe précise, cela permet de modifier le code plus facilement si cela est nécessaire. Pensez à faire de même lors de vos autres réalisations.
Les valeurs de placement, de hauteur ou de largeur peuvent changer d’une étape à l’autre, de plus celles-ci sont données mais le tutoriel n’a aucun intérêt si vous n’effectuer pas le travail de recherche qui permet de les trouver.
Pour ce tutoriel vous avez besoin de 2 logiciels : Chrome ou Safari et Notepad++.
Vous avez aussi besoin de l’image fournie dans l’archive placé au tout début du tuto.
Enfin, pensez à faire des sauvegardes de manière systématique et à tester votre travail, un plantage ou une panne de courant est vite arrivé.

I.La base

1.Le conteneur de l’image

Notre image sera composée de nombreuses divs aux multiples positions, couleurs et formes, il faut donc un conteneur afin que notre réalisation ne parte pas dans tous les sens. Pour cela nous créons une simple div en positionnement relatif d’une largeur et d’une hauteur de 768 pixels.

Je vous rappelle notre but : recréer une image uniquement avec CSS. Et vu qu’on cherche à faire un travail qui respecte au plus l’original nous mettons en background l’image précédemment téléchargée.

Je ne m’attarde pas plus que ça sur l’architecture de notre page de départ, là n’est pas le but du tutoriel et de toutes façons les fichiers de base vous sont fournis dans l’archive.

2. La forme

Notre but premier va être d’obtenir la forme simple de ‘W’. On remarque sans trop de difficulté que la forme est composé de 4 grandes parties,nous partons donc sur cette idée là , des modifications se feront peut être par la suite .

Commençons donc par rajouter ces 4 divs à notre code HTML.

PS : Je précise que certaines divs sont inutiles dans la créations du logo mais permettent seulement d’avoir un code clair et précis.

Ajoutons à ça un peu de css afin pouvoir voir apparaître ces divs.

/*=========================			Gauche		=========================*/
#g1
		{
		height: 50px;
		width: 50px;

		background: rgb(28,118,201);

		top: 0px;
		left: 0px;
		}

/*=========================			Centre		=========================*/

#gc1
		{
		height: 50px;
		width: 50px;

		background: rgb(28,118,201);

		top: 50%;
		left: 30%;
		}

#dc1
		{
		height: 50px;
		width: 50px;

		background: rgb(28,118,201);

		top: 50%;
		right: 30%;
		}

/*=========================			Droite		=========================*/
#d1
		{
		height: 50px;
		width: 50px;

		background: rgb(28,118,201);

		bottom: 0%;
		right: 0%;
		 }

Astuce :
Vous remarquerez que dans le tout début du css, je précise que toutes les divs faisant parti du conteneur sont en positionnement absolut, cela nous permet de ne pas avoir à rajouter à chaque nouvelle balise la propriété en question.

Nous avons maintenant nos 4 divs mais cela ne ressemble pas encore beaucoup a notre W

On va essayer d’arranger tout ça, mais avant laissez moi vous présentez 3 outils de transformation css qui sont mis à notre disposition.

Tout d’abord la fonction : Rotate. Comme son nom l’indique celle ci permet d’effectuer une rotation.Cette transformation se traduirait par la ligne :
```
-webkit-transform: rotate(20deg)
```
- Commençons par Skewx :Cette transformation se traduirait par la ligne :
```
-webkit-transform: skewx(20deg)
```
- Ensuite par Skewy :Cette transformation se traduirait par la ligne :
```
-webkit-transform: skewy(20deg)
```

Je pense que ces shémas sont plus explicatifs que la plupart des articles que l’on pourrait lire, on précise quand même la syntaxe pour utiliser ses propriétés :

transform : skewx(xdeg)

transform : skewy(xdeg)

transform : rotate(xdeg)

Rappel :
N’oubliez pas les particules -webkit- , -moz- et -o- afin de rendre compatible et compréhensible votre code pour tous les navigateurs.

Maintenant que vous connaissez vos outils comme les 5 doigts de la main ~~ou 6 pour les japonnais~~ (humour noir quand tu nous tiens ) commençons le chantier, vous pouvez débuter par la partie que vous voulez mais je vous conseille d’aller de gauche à droite.

Votre but à ce niveau de la réalisation est de chercher les valeurs CSS pour reproduire au plus précis la forme du W,ne vous souciez pas des couleurs et ne modifier donc que le CSS pour le moment.

Astuce :
Pour être plus précis dans votre travail, vous pouvez utiliser la propriété opacity, afin de superposer l’image et le CSS. Vous pouvez aussi modifier les couleurs de background afin de contraster et donc de mieux voir les différences.

Vous venez sûrement de rencontrer votre premier problème ( et ce ne sera pas le dernier je vous rassure), vous avez beau chercher vous n’arrivez pas à obtenir la forme voulue ni pour la partie gauche ni pour la partie droite.

On va donc modifier le code HTML en rajoutant une div pour chaque côté, je vous rassure vous n’aurez pas à rechercher toutes les valeurs , en effet, la largeur ou encore la rotation sont les mêmes que pour le premier bloc de chaque côté.

Astuce :
Dans Chrome vous pouvez modifier directement le CSS d’une div et immédiatement voir l’effet de votre modification. Il vous suffit de faire un clic droit et d’inspecter l’élément.

Maintenant que le code HTML a été corrigé , vous pouvez vous replongez dans le CSS. Vous devriez maintenant obtenir la forme de W souhaitée.

à€ ce stade du tutoriel, votre code CSS doit ressembler à peu de chose près à celui ci, si les valeurs ne sont pas tout à fait identiques ne vous en faites pas, mais la marge de précision est d’environ 8 pixels ou degrés. En dessus votre code nécessite d’être retravaillé.

/*=========================			Boite		=========================*/
.box div
		{
		position:absolute;
		}

#gauche,
#gauche-centre,
#droite-centre,
#droite,
#centre
		{
		height:100%;
		width:100%;
		background:transparent;
		border:none;
		top:0;
		left:0;
		}

/*=========================			Gauche		=========================*/
#g1
		{
		height: 298px;
		width: 125px;

		background: rgb(28,118,201);

-webkit-transform:rotate(-38.2deg) skewy(-12deg);
   -moz-transform:rotate(-38.2deg) skewy(-12deg);
	 -o-transform:rotate(-38.2deg) skewy(-12deg);
		transform:rotate(-38.2deg) skewy(-12deg);

		top: 257px;
		left: 158px;
		}
#g2
		{
		height: 220px;
		width: 126px;

		background: rgb(29,118,201);

-webkit-transform: rotate(-38.2deg) skewy(39deg);
   -moz-transform: rotate(-38.2deg) skewy(39deg);
	 -o-transform: rotate(-38.2deg) skewy(39deg);
		transform: rotate(-38.2deg) skewy(39deg);

		top: 183px;
		left: 69px;
		}

/*=========================			Centre		=========================*/

#gc1
		{
		height: 125px;
		width: 208px;

		background: rgb(28,118,201);

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		top: 313px;
		left: 250px;
		}

#dc1
		{
		height: 126px;
		width: 285px;

		background: rgb(28,118,201);

-webkit-transform: rotate(52deg) skewx(12deg);
   -moz-transform: rotate(52deg) skewx(12deg);
	 -o-transform: rotate(52deg) skewx(12deg);
		transform: rotate(52deg) skewx(12deg);

		z-index: 7;
		top: 343px;
		left: 286px;
		}

/*=========================			Droite		=========================*/
#d1
		{
		height: 118px;
		width: 294px;

		background: rgb(28,118,201);

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		top: 347px;
		right: 88px;
		}
#d2
		{
		height: 220px;
		width: 119px;

		background: rgb(28,118,201);

-webkit-transform: rotate(40deg) skewy(-40deg);
   -moz-transform: rotate(40deg) skewy(-40deg);
	 -o-transform: rotate(40deg) skewy(-40deg);
		transform: rotate(40deg) skewy(-40deg);

		top: 173px;
		right: 73px;
		 }

Voilà le résultat

Nous avons actuellement un W qui a une forme trait pour trait identique à celui d’origine à par pour un point : Les bordures.
En effet toutes les bordures de la lettres sont plus ou moins arrondies, c’est pourquoi je vais devoir vous expliquer comment fonctionne cette propriété CSS.

Comme pour « skew » lorsque l’on utile « border-radius » il faut prendre en compte les deux axes dont nous avons parlé précédemment. J’avoue ne pas être extrêmement doué pour les explications détaillées , c’est pourquoi j’ai confectionné cette petite image qui vous permettra je pense, de mieux comprendre les border-radius ».

à€ partir de ça, je pense que vous pouvez réussir à retrouver les arrondis de chaque coins. Pensez à utiliser l’inspection d’élément de chrome.

Astuce:
Lorsque l’on applique de nombreuses transformations à une div tel que la rotation ou le skew , on peut avoir du mal à retrouver le haut, le bas ou encore la gauche et la droite de celle ci. Pour se faciliter la tâche, ajouter des règles CSS permettant de savoir simplement ou ceux ci se trouvent. Par exemple en mettant une bordure jaune de 1 pixel en haut tandis qu’il y a une bordure rouge de 1 pixel à droite.

La première grande partie de ce tutoriel est finie, vous avez normalement réussi à atteindre notre but : Reproduire la forme de lettre. Votre code CSS ressemble actuellement à ça :

/*=========================			Boite		=========================*/
.box div
		{
		position:absolute;
		}

#gauche,
#gauche-centre,
#droite-centre,
#droite,
#centre
		{
		height:100%;
		width:100%;
		background:transparent;
		border:none;
		top:0;
		left:0;
		}

/*=========================			Gauche		=========================*/
#g1
		{
		height: 298px;
		width: 125px;

		background: rgb(28,118,201);
		border-bottom-left-radius:25px;

-webkit-transform:rotate(-38.2deg) skewy(-12deg);
   -moz-transform:rotate(-38.2deg) skewy(-12deg);
	 -o-transform:rotate(-38.2deg) skewy(-12deg);
		transform:rotate(-38.2deg) skewy(-12deg);

		top: 257px;
		left: 158px;
		}
#g2
		{
		height: 220px;
		width: 126px;

		background: rgb(29,118,201);
		border-top-left-radius:25px 43px;
		border-top-right-radius: 5px;

-webkit-transform: rotate(-38.2deg) skewy(39deg);
   -moz-transform: rotate(-38.2deg) skewy(39deg);
	 -o-transform: rotate(-38.2deg) skewy(39deg);
		transform: rotate(-38.2deg) skewy(39deg);

		top: 183px;
		left: 69px;
		}

/*=========================			Centre		=========================*/

#gc1
		{
		height: 125px;
		width: 208px;

		background: rgb(28,118,201);
		border-top-right-radius: 25px;

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		top: 313px;
		left: 250px;
		}

#dc1
		{
		height: 126px;
		width: 285px;

		background: rgb(28,118,201);
		border-bottom-right-radius: 25px;
		border-top-left-radius: 25px;

-webkit-transform: rotate(52deg) skewx(12deg);
   -moz-transform: rotate(52deg) skewx(12deg);
	 -o-transform: rotate(52deg) skewx(12deg);
		transform: rotate(52deg) skewx(12deg);

		z-index: 7;
		top: 343px;
		left: 286px;
		}

/*=========================			Droite		=========================*/
#d1
		{
		height: 118px;
		width: 294px;

		background: rgb(28,118,201);
		border-bottom-left-radius: 25px;

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		top: 347px;
		right: 88px;
		}
#d2
		{
		height: 220px;
		width: 119px;

		background: rgb(28,118,201);
		border-top-right-radius: 25px 35px;
		border-top-left-radius: 5px;

-webkit-transform: rotate(40deg) skewy(-40deg);
   -moz-transform: rotate(40deg) skewy(-40deg);
	 -o-transform: rotate(40deg) skewy(-40deg);
		transform: rotate(40deg) skewy(-40deg);

		top: 173px;
		right: 73px;
		 }

II. La partie gauche

Entamons maintenant la partie gauche de notre W. Comme vous le voyez il est constitué de plusieurs couches :

Pour l’instant nous allons uniquement nous occuper du 3ème et 2ème plan.

1. L’arrière plan

C’est simple pour celui-ci on a déjà créé la forme voulue dans la première partie, il ne nous reste donc plus qu’à créer le dégradé que l’on peut apercevoir ici :

Donc tout d’abord on va utiliser la pipette de photoshop pour savoir de quelle couleur est constitué le dégradé, ici il va de : #0f4773 (en bas) à #1c76c9 (en haut).

Ensuite on essaye de voir qu’elle taille le dégradé fait à peu près , je vous laisser chercher, personnellement je trouve : 131px soit environ 44% de la taille de notre div. On aura donc la fin de notre dégradé à 44%.

Maintenant que nous avons toutes les informations nécessaires direction :Colorzilla.com/gradient

L’éditeur de dégradé est le quasiment le même que celui de photoshop, vous avez donc juste à entrer les valeurs que nous avons trouvées.

Nous voilà donc avec :

#g1
		{
		height: 298px;
		width: 125px;

		background: rgb(28,118,201);
		background: -moz-linear-gradient(top, rgba(28,118,201,1) 0%, rgba(27,117,200,1) 43%, rgba(57,110,172,1) 44%, rgba(15,71,114,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,118,201,1)), color-stop(43%,rgba(27,117,200,1)), color-stop(44%,rgba(57,110,172,1)), color-stop(100%,rgba(15,71,114,1)));
		background: -webkit-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		background: -o-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		background: -ms-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c76c9', endColorstr='#0f4772',GradientType=0 );
		background: linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		border-bottom-left-radius:25px;

-webkit-transform:rotate(-38.2deg) skewy(-12deg);
   -moz-transform:rotate(-38.2deg) skewy(-12deg);
	 -o-transform:rotate(-38.2deg) skewy(-12deg);
		transform:rotate(-38.2deg) skewy(-12deg);

		z-index:10;
		top: 257px;
		left: 158px;
		}

à€ la place de :

#g1
		{
		height: 298px;
		width: 125px;

		background: rgb(28,118,201);
		border-bottom-left-radius:25px;

-webkit-transform:rotate(-38.2deg) skewy(-12deg);
   -moz-transform:rotate(-38.2deg) skewy(-12deg);
	 -o-transform:rotate(-38.2deg) skewy(-12deg);
		transform:rotate(-38.2deg) skewy(-12deg);

		top: 257px;
		left: 158px;
		}

2. Le 2ème plan

Comme vous aurez pu le remarquer le second plan est quasi-identique à l’arrière plan, vous n’avez donc pas grand chose à faire non plus dans cette sous partie.

On va simplement ajouter deux autres divs pour obtenir ceci :

Puis on ajoute les mêmes caractéristiques de #g1 et #g2 à #g1-min et #g2-min , en prenant soin, de réduire la taille afin que celle ci correspondent au mieux à l’image de base. Je vous renvois bien sur à l’astuce sur l’opacité et l’image de fond .

Maintenant que les bonnes mesures ont été trouvée, on change le background qui est ici :#b5d6ff.

Rappel : On oublie pas d’indiquer un z-index suffisant pour que les blocs s’affichent correctement

On a donc un CSS semblable à celui là :

#g1
		{
		height: 298px;
		width: 125px;

		background: rgb(28,118,201);
		background: -moz-linear-gradient(top, rgba(28,118,201,1) 0%, rgba(27,117,200,1) 43%, rgba(57,110,172,1) 44%, rgba(15,71,114,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,118,201,1)), color-stop(43%,rgba(27,117,200,1)), color-stop(44%,rgba(57,110,172,1)), color-stop(100%,rgba(15,71,114,1)));
		background: -webkit-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		background: -o-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		background: -ms-linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c76c9', endColorstr='#0f4772',GradientType=0 );
		background: linear-gradient(top, rgba(28,118,201,1) 0%,rgba(27,117,200,1) 43%,rgba(57,110,172,1) 44%,rgba(15,71,114,1) 100%);
		border-bottom-left-radius:25px;

-webkit-transform:rotate(-38.2deg) skewy(-12deg);
   -moz-transform:rotate(-38.2deg) skewy(-12deg);
	 -o-transform:rotate(-38.2deg) skewy(-12deg);
		transform:rotate(-38.2deg) skewy(-12deg);

		z-index:10;
		top: 257px;
		left: 158px;
		}
#g2
		{
		height: 220px;
		width: 126px;

		background: rgb(29,118,201);
		border-top-left-radius:25px 43px;
		border-top-right-radius: 5px;

-webkit-transform: rotate(-38.2deg) skewy(39deg);
   -moz-transform: rotate(-38.2deg) skewy(39deg);
	 -o-transform: rotate(-38.2deg) skewy(39deg);
		transform: rotate(-38.2deg) skewy(39deg);

		top: 183px;
		left: 69px;
		}

#g1-min
        {

        height: 298px;
        width: 118px;

        background:#b7d9ff;
        border-bottom-left-radius:25px;

-webkit-transform:rotate(-38.2deg) skewy(-12deg) ;
   -moz-transform:rotate(-38.2deg) skewy(-12deg)  ;
     -o-transform:rotate(-38.2deg) skewy(-12deg)  ;
        transform:rotate(-38.2deg) skewy(-12deg)  ;

        z-index:11;
        top: 253px;
        left: 160px;
        }

#g2-min
        {
        height: 182px;
        width: 119px;

        background:#b7d9ff;
        border-top-left-radius: 22px 32px;
        border-top-right-radius: 5px;

-webkit-transform: rotate(-38.2deg) skewy(38deg);
   -moz-transform: rotate(-38.2deg) skewy(38deg)  ;
     -o-transform: rotate(-38.2deg) skewy(38deg)  ;
        transform: rotate(-38.2deg) skewy(38deg)  ;

        z-index: 11;
        top: 195px;
        left: 68px;
        }

III. Le centre

1. Partie gauche

#gc1
		{
		height: 125px;
		width: 208px;

		background: rgb(0,153,186);
		background: -moz-linear-gradient(top, rgba(0,153,186,1) 0%, rgba(4,110,130,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,153,186,1)), color-stop(100%,rgba(4,110,130,1)));
		background: -webkit-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
		background: -o-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ba', endColorstr='#046e82',GradientType=0 );
		background: linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
		border-top-right-radius: 25px;

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		z-index:10;
		top: 313px;
		left: 250px;
		}
		#gc1:before
				{
				height: 125px;
				width: 45px;

				display: block;
				content: '';

				background:#27516f;

		-webkit-transform: rotate(1deg);
		   -moz-transform: rotate(1deg);
			 -o-transform: rotate(1deg);
				transform: rotate(1deg);

				z-index:11;
				top: 313px;
				left: 250px;
				}
		#gc1:after
				{
				height: 131px;
				width: 123px;

				display: block;
				content: '';

				background: rgb(4,194,209);
				background: -moz-linear-gradient(top, rgba(4,194,209,1) 0%, rgba(1,221,240,1) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4,194,209,1)), color-stop(100%,rgba(1,221,240,1)));
				background: -webkit-linear-gradient(top, rgba(4,194,209,1) 0%,rgba(1,221,240,1) 100%);
				background: -o-linear-gradient(top, rgba(4,194,209,1) 0%,rgba(1,221,240,1) 100%);
				background: -ms-linear-gradient(top, rgba(4,194,209,1) 0%,rgba(1,221,240,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04c2d1', endColorstr='#01ddf0',GradientType=0 );
				background: linear-gradient(top, rgba(4,194,209,1) 0%,rgba(1,221,240,1) 100%);
				border-top-left-radius: 25px;
				border-right:5px solid #07b8c6;

		-webkit-transform: rotate(90deg);
		   -moz-transform: rotate(90deg);
			 -o-transform: rotate(90deg);
				transform: rotate(90deg);

				z-index:11;
				margin-top: -127px;
				margin-left: 80px;
				}

La partie gauche centrale se construit en 3 parties.

Tout d’abord j’ai modifié le background du bloc principal #gc1 , puis j’ai utilisé les pseudo-classes :after et :before pour créer les deux autres blocs, cela me permet d’économiser des divs et donc d’avoir un code plus léger.

Le second avantage de ces pseudo-classes et que les transformations associées au bloc principal leur sont aussi associées, nous n’avons donc plus besoin de rechercher à chaque fois de nouvelles valeurs pour les transformations CSS3, il faut cependant bien penser à ajouter les 2 lignes sinon les blocs n`apparaîtront pas:

display: block;
content: '';

Enfin j’ai ajouté la ligne z-index à chaque fois, afin de pouvoir superposer les blocs comme je le souhaite, plus la valeur de z-index, plus la couche qui y est liée sera haute.

Maintenant, j’ajoute une seconde div que je nomme gc2 afin de créer la bordure supérieure qu’on peut apercevoir ici en rouge :

J’utilise une seconde div car avec la propriété border, nous ne pourrions pas obtenir un rendu aussi précis

On a donc :

et on ajoute le CSS de gc2:

#gc2
		{
		height: 125px;
		width: 208px;

		background: #00ffff;
		border-top-right-radius: 25px;

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
	 -o-transform: rotate(-50deg) skewx(-12deg);
		transform: rotate(-50deg) skewx(-12deg);

		z-index:2;
		top: 311px;
		left: 246px;
		}

2. La partie droite

#dc1
		{
		height: 126px;
		width: 285px;

		background: rgb(0,214,232);
		background: -moz-linear-gradient(left center, rgba(0,255,255,1) 0%, rgba(0,214,232,1) 50%);
		background: -webkit-gradient(linear, left top,right top, color-stop(0%,rgba(0,255,255,1)), color-stop(50%,rgba(0,214,232,1)));
		background: -webkit-linear-gradient(left center, rgba(0,255,255,1) 0%,rgba(0,214,232,1) 50%);
		background: -o-linear-gradient(left center, rgba(0,255,255,1) 0%,rgba(0,214,232,1) 50%);
		background: -ms-linear-gradient(left center, rgba(0,255,255,1) 0%,rgba(0,214,232,1) 50%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d6e8', endColorstr='#00ffff',GradientType=0 );
		background: linear-gradient(left center, rgba(0,255,255,1) 0%,rgba(0,214,232,1) 50%);
		border-bottom-right-radius: 25px;
		border-top-left-radius: 25px;

-webkit-transform: rotate(52deg) skewx(12deg);
   -moz-transform: rotate(52deg) skewx(12deg);
	 -o-transform: rotate(52deg) skewx(12deg);
		transform: rotate(52deg) skewx(12deg);

		z-index: 7;
		top: 343px;
		left: 286px;
		}
		#dc1-1
				{
				height: 128px;
				width: 288px;

				overflow:hidden;

				background: rgb(10,233,249);
				background: -moz-linear-gradient(top, rgba(10,233,249,1) 0%, rgba(7,227,246,1) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(10,233,249,1)), color-stop(100%,rgba(7,227,246,1)));
				background: -webkit-linear-gradient(top, rgba(10,233,249,1) 0%,rgba(7,227,246,1) 100%);
				background: -o-linear-gradient(top, rgba(10,233,249,1) 0%,rgba(7,227,246,1) 100%);
				background: -ms-linear-gradient(top, rgba(10,233,249,1) 0%,rgba(7,227,246,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ae9f9', endColorstr='#07e3f6',GradientType=0 );
				background: linear-gradient(top, rgba(10,233,249,1) 0%,rgba(7,227,246,1) 100%);

				border-top-left-radius: 25px;
				border-bottom-right-radius: 25px;

		-webkit-transform: scale(.9);
		   -moz-transform: scale(.9);
			 -o-transform: scale(.9);
				transform: scale(.9);

				z-index:7;
				top: -1px;
				left: 8px;
				}
				#dc1-1-1
						{
						height: 170px;
						width: 251px;

						background:#08eaff;
						border-top-left-radius: 64px 41px;

				-webkit-transform: rotate(211deg);
				   -moz-transform: rotate(211deg);
					 -o-transform: rotate(211deg);
						transform: rotate(211deg);

						left: 81px;
						top: -75px;
						}

Ici la réalisation se fait en cinq parties. Tout d’abord on modifie le dégradé du bloc principal, ensuite on crée une div à l’intérieur de dc1, elle nous servira de conteneur pour le dégradé oblique et en même temps on y ajoute un dégradé. On remarque l’utilisation de la propriété scale , celle ci permet tout simplement de changer la taille de notre bloc , ici sa valeur est (.9) nous réduisons donc le bloc à 90% de sa taille originelle, donc ici 90% de 128px et 288px.

Son utilité n’est pas franchement vérifiée ici ( je l’avoue ! ) mais je tenais simplement à vous montrer que celle ci existait, et que dans certaines situations elle peut se révéler bien utile, je vous donnerai un exemple dans la fin de ce tutoriel.

Pour le dégradé oblique, rien bien compliqué, on applique une rotation , on cache le superflu grâce à overflow:hidden et le tour est joué. Vous pourrez peut être rencontré un problème d’arrondi avec l’un des angles , malheureusement, nous ne pouvons pas vraiment le compenser pour le moment, penser donc à chercher des valeurs approchées pour le border-radius, afin d’avoir quelqu’un chose d’à peu près arrondi

Côté html on a donc ça :

On va maintenant s’occuper du « reflet » en bas à droite, il faut donc ajouter une div nommée dc1-1-2 , on lui applique un background de couleur #08EAFF , puis on utilise la pseudo-classe :before pour pouvoir créer un effet similaire à celui ci :

Pour obtenir ce résultat : On utilise les propriétés skew et rotation. #dc1-1-2:before est de la même couleur que #dc1-1-1.

Enfin, nous en finissons avec la partie centrale avec deux nouvelles divs :

Elles servent à créer ces deux bordures :

Ici , rien de compliqué non plus , faites juste bien attention aux différentes valeurs de z-index.

Au final vous obtenez ceci :

#dc2
		{
		height: 125px;
		width: 48px;

		display: block;
		content: '';

		background: #0ddce6;

-webkit-transform: rotate(54deg) skewx(12deg);
   -moz-transform: rotate(54deg) skewx(12deg);
	 -o-transform: rotate(54deg) skewx(12deg);
		transform: rotate(54deg) skewx(12deg);

		z-index: 7;
		top: 318px;
		left: 383px;
		}
#dc3
		{
		height: 116px;
		width: 121px;

		background: #245775;

		-webkit-transform: rotate(54deg) skewx(12deg);
		-moz-transform: rotate(54deg) skewx(12deg);
		-o-transform: rotate(54deg) skewx(12deg);
		transform: rotate(54deg) skewx(12deg);

		z-index: 6;
		top: 404px;
		left: 423px;
		}

IV. La droite

/
*=========================         Droite      =========================*/
#d1
        {
        height: 107px;
        width: 294px;

        background:cyan;
        border-bottom-left-radius: 25px;

-webkit-transform: rotate(-50deg) skewx(-12deg);
   -moz-transform: rotate(-50deg) skewx(-12deg);
     -o-transform: rotate(-50deg) skewx(-12deg);
        transform: rotate(-50deg) skewx(-12deg);

        top: 343px;
        right: 89px;
        z-index:4;
         }

        #d1:before
                {
                height: 116px;
                width: 294px;

                display: block;
                content: '';

                background: rgb(0,153,186);
                background: -moz-linear-gradient(top, rgba(0,153,186,1) 0%, rgba(4,110,130,1) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,153,186,1)), color-stop(100%,rgba(4,110,130,1)));
                background: -webkit-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
                background: -o-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
                background: -ms-linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ba', endColorstr='#046e82',GradientType=0 );
                background: linear-gradient(top, rgba(0,153,186,1) 0%,rgba(4,110,130,1) 100%);
                border-bottom-left-radius: 25px;

                margin-top: 3px;
                 }
#d2
        {
        height: 220px;
        width: 118px;

        background: rgb(28,118,201);
        border-top-right-radius: 25px 35px;
        border-top-left-radius: 5px;

-webkit-transform: rotate(40deg) skewy(-40deg);
   -moz-transform: rotate(40deg) skewy(-40deg);
     -o-transform: rotate(40deg) skewy(-40deg);
        transform: rotate(40deg) skewy(-40deg);

        top: 173px;
        right: 75px;
         }
#d3
        {
        height: 315px;
        width: 122px;
        overflow: hidden;
        background: transparent;
        border-top-right-radius: 43px 35px;
        border-top-left-radius: 5px;

        -webkit-transform: rotate(40deg) skewy(-40deg);
        -moz-transform: rotate(40.2deg) skewy(-40deg);
        -o-transform: rotate(40.2deg) skewy(-40deg);
        transform: rotate(40.2deg) skewy(-40deg);

        z-index: 5;
        top: 168px;
        right: 107px;

        }
        #d3-1
                {
                height: 298px;
                width: 119px;

                background: rgb(56,110,173);
                background: -moz-linear-gradient(top, rgba(56,110,173,1) 0%, rgba(56,110,173,1) 50%, rgba(42,92,153,1) 75%, rgba(31,77,138,1) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,110,173,1)), color-stop(50%,rgba(56,110,173,1)), color-stop(75%,rgba(42,92,153,1)), color-stop(100%,rgba(31,77,138,1)));
                background: -webkit-linear-gradient(top, rgba(56,110,173,1) 0%,rgba(56,110,173,1) 50%,rgba(42,92,153,1) 75%,rgba(31,77,138,1) 100%);
                background: -o-linear-gradient(top, rgba(56,110,173,1) 0%,rgba(56,110,173,1) 50%,rgba(42,92,153,1) 75%,rgba(31,77,138,1) 100%);
                background: -ms-linear-gradient(top, rgba(56,110,173,1) 0%,rgba(56,110,173,1) 50%,rgba(42,92,153,1) 75%,rgba(31,77,138,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#386ead', endColorstr='#1f4d8a',GradientType=0 );
                background: linear-gradient(top, rgba(56,110,173,1) 0%,rgba(56,110,173,1) 50%,rgba(42,92,153,1) 75%,rgba(31,77,138,1) 100%);

        -webkit-transform: rotate(0deg) skewy(47deg);
           -moz-transform: rotate(0deg) skewy(47deg);
             -o-transform: rotate(0deg) skewy(47deg);
                transform: rotate(0deg) skewy(47deg);

                top: -51px;
                right: 2px;
                border-top-right-radius: 11px;
}

Dans cette quatrième et avant dernière partie, nous nous attaquons à la partie droite du logo, pour cette partie, on réutilise quasiment tout ce qui a été vu avant.

Tout d’abord , on applique une couleur cyan pour la « couche inférieur » puis on utilise la pseudo-classe :before pour créer le dégradé qui va de #0099BA à #046E82.

Vous pouvez écrire background : cyan, la couleur sera reconnue !

Ensuite , on ajoute une div nommée d3 ainsi qu’une autre div à l’intérieur de celle-ci nommée d3-1, d3 fait office de conteneur, il doit simplement empêcher le dégradé de d3-1 de dépasser en haut, la forme oblique en bas du dégradé est donnée par l’utilisation de skew sur d3-1.

N’oubliez pas overflow:hidden

Enfin nous réalisons la même opération que pour la partie gauche, on crée une partie plus claire avec deux nouvelles divs à l’intérieur de d3-1. J’utilise la propriété scale par flemmardise et j’assume , je n’ai pas à chercher de nouvelles valeurs, je multiplie simplement par 0.9.

				#d3-1-1
						{
						height: 176px;
						width: 83px;

						overflow: hidden;

						background: #B5D6FF;
						border-bottom-left-radius: 5px;
						border-top-left-radius: 25px 35px;

				-webkit-transform: scale(.9) rotate(43.2deg) skewy(48deg);
				   -moz-transform: scale(.9) rotate(43.2deg) skewy(48deg);
					 -o-transform: scale(.9) rotate(43.2deg) skewy(48deg);
						transform: scale(.9) rotate(43.2deg) skewy(48deg);

						z-index: 7;
						top: 17px;
						right: 19px;

						}
				#d3-1-2
						{
						height: 205px;
						width: 119px;

						overflow: hidden;

						background: #B5D6FF;
						border-bottom-left-radius: 5px;
						border-top-left-radius: 25px 35px;
						-webkit-transform: scale(.9) rotate(-2deg) skewx(-3deg);
						-moz-transform: scale(.9) rotate(-2deg) skewx(-3deg);
						-o-transform: scale(.9) rotate(-2deg) skewx(-3deg);
						transform: scale(.9) rotate(-2deg) skewx(-3deg);
-webkit-transform: scale(.9) rotate(-2deg) skewx(-3deg);

						z-index: 6;
						top: 94px;
						right: 3px;
						}

Nous avons un maintenant une page HTML qui ressemble à ceci :

V. Les dégradés

Nous voilà à la fin du tutoriel , il ne nous reste plus qu’à faire les dégradés qui sont dans chaque partie. Sauf que ici nous sommes confrontés à un problème de taille, il n’existe aucun moyen de ne pas utiliser d’image pour contenir ces dégradés, à cause de leurs formes trop complexes, que vous pouvez voir ici en noir.

Et comme je l’ai dit plus haut, notre but est de n’utiliser absolument aucune image et d’avoir pour seule requête HTTP le fichier CSS.

Nous allons donc utiliser une image, sans pour autant augmenter le nombre de requête ! Pour cela nous allons simplement utiliser les data URI. Derrière ce nom barbare, ce cache une technique révolutionnaire qui permet de remplacer une image par du simple code ( parfois lourd) ce qui augmente la taille de nos fichiers mais en échange diminue le nombre de requête.

Je vous invite donc à vous munir de l’outil Plume de Photoshop afin de détourer les deux parties qui nous intéressent pour au final obtenir ces deux images :

Nous les convertissons maintenant au format voulu grâce à ce site internet : datauri.com

Il vous suffit de faire un « glisser/déposer » avec les deux images puis de copier le code donné , vous obtenez pour la première image (gauche) :

data:image/png;base64,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

Et pour l’image de droite :

data:image/png;base64,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

Maintenant, il vous suffit de créer deux divs nommées gd et dd, vous intégrer les codes obtenu comme si ceci étaient des images pour un background , puis enfin , vous trouvez le bon positionnement.
Votre page HTML ressemble à ceci :

Et vous venez d’ajouter ce morceau de CSS :

/*=========================Dégradé droite/gauche=========================*/

#gd
		{
		height: 335px;
		width: 326px;
		background: url(data:image/png;base64,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);

		overflow: hidden;

		z-index: 20;
		top: 219px;
		left: 19px;
		}

#dd
		{
		height: 209px;
		width: 247px;

		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAADRCAYAAAAQeSR4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAKTtJREFUeNrsnXl8VNXZx59z7jJrZiYJWYGQAGFHICugaEEUBRQXKotIRMGlda+FyotiEaQgFrW8xYVqsWmRSqUoTY2mUQpFKZaKvCKIBARFQiCELGSSWe77RzJkZnLvnXsns9yZPD8+8/mQuctsz/f+zrnnOc8hgiAAqnvq0Flh4DfnhJHnm4U0uxNMLgEYEwf1lBC3RQ/nrDqoETuOY4jDqocaEwcNYtt1LGlKN0MtfsPRFYtfQfdSnR30n5x0T/3ncdctZy9CGgBMaNtCLu1DQMUFn4j+WSG3s44Be6IBangG7GJ7GXnSkGyA7ykFt9gZ9Cw0pZrISbFjKQG3kSMNyUb4Xmq7mYc6m178teNJBJ27+2jfKaHwvUOue76rF+b7QylHLFEVUUqPU35WQoIMbunXKJfaxBBw2fRQY+LbWiUEfC8wDCGuZCOc0rPQJPaRGAruNBM5zlJwSFxcXL0scETqG+FZsKeZQtPqQbi7icq+dk+vrHLNuGCH6epZCxJ2ogZnEi3QVV29FH8Twb9cmdTeaWY4aebhQoYZjica4HSWFQ4PSYGDCHc3B7v8iGtOkwOmKY5nhbDHoasrfnkSIqJJsJcW0nYhGJwCnxVmQnlRT9iNcHcj7TjmmlR2xD3v3EWYEQKW0dWj6+rSF1kCZelm+HbWcFjTLxGqEO44187jrol/O+S662wzzFIb/aGAHV098q7OENh+TwEsHpYKBygiEL+O/deDjnvPXBRmCQBt978FoeMRQILXI9iNQqBdJc4pf5zys6r4uH6v0PFP3WeXe5cyBwa3SXRPlyBMfeuA8DMAHAqLS3101Dn53a+c889dFG7mOOrz83tHPlFoc4Kcm6jYKCh1db9zCrKuLijyOX/Albq6P+A+ri4ot1nfdylzYHCbfHTeDilHa6EvOnecqfKoc/K7Xznmn7vovjmgs3m7grfNCSqOQ1fXoqtPrm+BZHTuOFLFN86p733lmF/bLEwDAGAZRkXQ+rmCd9Sjq8ecq+s5aEK440QfHnFOe++QY/75ZmGq5zlKSdDnE6RAVwE7CXKjoOYOvCAOeufjlNOm8LomC3unm3KCetA7w674nOUZZqhCuONA73/tvHn7V475dXZhsvfv7D8SQoK8fYyuHluunmiAGpse7Ah3jKvssGP63w455l1oB9vzOzMiTfJwwI6urj1XL+7ZltyCcMc42Nu/csyvbxEm+W9jFDTJvWFHV48bVy8v7kXLEe4Y1ntfOWb97VDrXQ0tMNF/WzCcoqvHh6vnJMLBtPbptgh3DGrbQcecskOtJY2tncH2BJmgJMDR1ePN1cuvz6UbPX8g3DEHduucskOOksZWQQTstl+bZZlLgSAoTutEV491V8+ywpHhqbAf4Y4xNTmA2fZlyz0ffeOY3uTwFFgQd6627nZnugVVkzXQ1WPJ1YkA5TOG0ee9tyPcMaDGVmD++mXL/R994/hNszNAtKuwIXT1uHH1ilnD6Zq+iXAc4Y4psAXmr1+2ioMtIpalMjEtbUPo6jHr6hWT+pPSK7NJp9JWCLeGVd8icFv/r/WBj6paf90iAbZ/P4xQqiKk0NVj3NUr8jNJ5c2DO26iIdwxoAt2Qf/O/7U8sOOo47kWl3QcdO6HqXBEdPWYdvWcRDi4IJ+ulGzFIUbaBPsvXmATNX3soJMg0NVjydVTTLDxp8XM47JdNERJW6ptFkx/OdDy0M5jjmdbXYF59v7pOY5RSzC6egy6uoGFbQ+NZh5J4MUrrCLcWgT7omDacsD+0M4qx7MOt1yEEPGfnpAwpTaiq2vF1RkC5fcVMYtSTVAX6PMj3BrRuYtCwpYv7A/vPOZ4xuH2/dEl4SJKAjwcExbQ1aPk6hV3jmKWDepBDiv5zAi3BlTTJNje/sL+0L+OO37pdAcOMO8Nnt+eZRlVoKOrx5yrV04ZSF8v6kV2K/2MCHeUdabJbfvzfvuju791PuVyBx+khFAQBC1MQ0RXD4OrVxb1IuU3DqKb1HwuhDuaYDd6wHY85ZQBW0nQenbR1jREdPVQuPrAHmTf/HxmtdrPgXBHST80uFM2f25/9NMTjifcgrqgVQO/tooLoKur3djDRErvK2J+Ecx7R7ijoFP17pTN++2Pf3rCsdAb7GCDmGMpKJnkia4eO65OAMDEw9ZHxrAPmjhwIdwxoO8vuNM3729+dM8Jx0J3gPQFpe5FfVJOY7VkELq690YTD1sfGs0+pmTIC+HWgI6fd/V+e7/90c++czza5thC4E60AvDlYyoWSwZ1b1fnGSibM5JdlZNIjncl3hDuCOnYeVd26b7mXxz4wXmvokL4gjLwOb8hMPmYQlfXuquzFMpvGsK8mp9J9nQ15hDuCOjoOVff0n3NT3xZ7ZzvVgA2UQE+DRB86Oqx4+oshYrxfemWa/rRbaGIO4Q7zPq6xpn7x33NTxysds4TpMKMQPB9bzWuiq6uWVdnCFQMTaGf3jaM2RCq2EO4wwx2qQ/YHT+tOFfBgS8LDbq65l0dAKBPIjn04Bj2yVDGH8IdJn11xjnkT/9tXvhVtbNEUHD1DgZ8nmfbthOF0KCra87VCQCkmMimnxRzPw91DCLcYdCX1c7hpf9pfuLrGucs9R1q5eBf6m/LLieFrq5lVzfxsO2+InaRTQ92hFvjOvBD64g//de+6LAP2J2DkyjqUCsFX5l9oatry9X1LJTNL2CX9rGRk+GIRYQ7hPr3txfHvv1F60NHa90zAiEpdBF8jmOVLTyArq5JV+coVEwfyv7v8DS6P1zxiHCHSJ8cu3jVyzvPPlsvmMeq+/GDA997CEyheaGra8TVWQqVE/oxW8b3ZcrCGZMUsey6dlc1XbV+Z82qg6ftY0FojwehfVkfAbyfuvQAxeD7Pjz/CAHRs6l6HZkdBa9/6lyp46HqBSXOIQjqQJd83yq+GPndvH9g6T+lxBCozM+kH80Yzr4S7rhE5+6idh5tmvjKrrPPHq5uKez48QOPX6kY/VLQrlRWqRxdPbquTgAgJ5EcvLeIWx6J2ES4u6CPjzROeu1f5575+owHbM/PLQSIGRI0+AAAeo5TCLrvSQQ1FxHsq4e0rw4EIM1MSn8ymv95pOIT4Q5SlV83Tt7wr3PPHKlpyfM8ZzUbAxn2pS3Bgg8AQCiRDrLO6U/o6hpwdZuebH1gNPdYOIa8EO4Q6sNDDdN+t/vcL4+ebR3h/TzHsIpzR4UAIUMCnUBpLKKrR93VDSyUzy/glmRaSE0k4xThVqltX1yY88e95xceO9c63D+wZB0VQFXSuNTNHN6/Sa7GTdDVI+7qPAOVM0dwa4ak0oORjlWEW4W27r9QsvHT2v/5/oIjVywI26ZfCiJxoMCHFYJPVQ6uoqtHz9UNLJRfN4AtvTKbqYhGvCLcCrXlv3Xz3txTu+TUBWdf9YEtBNidKAafEBL0hAV09ci5Os9CZVFvpmLaYLY0WjGLcCvQn/fVzX9zT+3/nK53ZgdlmQG7zoIq8DsHanDTENHVw+PqLAUYmkL3zMvj1kQzbhHuAHrrs7p7S/fW/kIJ2Ip5DhJ8Hc+pAh1dPfKuzhCAnCS6fn4h/2S0YxfhllHp3vMPbNp7/mfVDVJgd0RBgtEgG9qhAJ+h6hMK0dUj5+oEAFLNZNNd+fxSEx9cxVKEOwL6w7/PP7Tps/OPn2lw9lbizzzHBt0uV7qnooki6OpRc/VEA9k6v4BfkpEQ2SEvhFuFfv9p7aOb/1P3aE2jB2wlhc+o0pqGCs7X2f14jrkUWQJRsdYUunpEXD1BB2VzRnKr+ifTKq3EMcLtp9/trl349r7zD59tcmaqCXI+wEJ8ysEXh59lqOTJvGFHV4+8qxs4qJg8kHszvyezR0uxjHD7gH2uHWxXptLY8jwhgKDKOdSDTxSdAF09sq6uY6FyXDa7bcpAdrPW4hnhbtcru84u+ct/635ae9GVrhRo/+cEmWoLXQGfZRkVzoauHilX56gAIzOYXXNGcuu0GNMINwD89p9nn3rn87oH6ppdKaqAVmzvXQOfZalyaNDVI+LqniGvkjzdMq3GNYtgt4F93gtstUCbjXqxWdwhA58GqKmBrh5ZVycEINNCSu8r1i0ya2DIC+EW0Ysf1zy7bX/dvRfs7qSgHNrTPGufzBHsQn6BwRcUF+9CVw+/qycZyLZ7inWLexhJg5bju9vCvbbyzKp3D1yYX293JwUDtPchVIpsRVM85QNRx3HtrQL5QgDo6pFxdYuOlM/N41dk2+hJrcd4t4R7RXn1byu+qp9R7+3YQRmr0N4nZtrvlksdEPwSQrS9v+0bqNLlfdDVw+fqRg4qbxnKr8vLZPbGQpx3K7ibWt3MmoozL1ccaphxsdWdEEQrGQKXWZDeEswSQkQRpOjq4XZ1HQs7fpTDbZnYn90eK/HOdiewn/vwzMsVh+rnNzuEkAF9aXMIVxLx7MixnKKcU3T18Lo6x8CuvEx2x+yR/PpYivluAXdji5t57sPq1/5xuGGeGNhBA6109yDBZxjawXbQdb3Q1bvi6jwDMCiF2ffTMbqlsRb3cQ/3Bbtbv/qD6tc+PtIwx+4QQgs0AJgNetHa3kTp3TSZuKWUqDUhdPUQujolANmJdMOCIt3iWIx9Nt7B/lX56df/eaRxlt0pgKAWZgW7MBI55XLF/BWDLxGeKkwIXT1IVycA0NNCN91doHsyyUCaEG4Nqa7ZpV/1QfXrO9rBDiXQ3rvQINZkVgK+jmcVI4WuHnpXTzWTrSV5uuW9rPR0rDIQl3DXXnSZVrx/+ve7q5qmtziFkAPtc7OFZUUnfgS7DrsHfEZ2lpmKm0Po6qp/10QDKbtpqO63g1OZg7HMQdzB3djiZlZ9UP273VWN7WCHHmjxPYhc7KoHX/ADJch0K3R1daAn8KTi2lxu05U5bEWssxB3cL/w0Znf7K5qnCEJdtd5D+JIdeBzHCtrdCTIdCt0dXlXN3Cw4/Js9r1pQ/jSeGAhruB+edfZJZWHG2Y0tbojALTQEYcBE9BUVF4RAFiqrvADunrXXZ1jAIalsXvm5uleihce4gbudz6vK3n3i7p76ppdSeEG2iOTXi95MnWrePqeQG0dRHT1roFOiQD9k5hX7i7ULYkns4sLuP/5TePEP+ypfeL0Bf9ihqEH2vspNkBppWDBF8QcMSQlg9DVxbpBva1004Ii/WKLjjgQbg3pULV94Ks7zz57orZ1YNiAlgSUSA5rkSDT0nQ822mGZ2dQQlUyCF091US2zc3TL09PoLUQZ4ppuL+vc6Q/X3Hmt4er7YVCxIDuEM8ykpGnOInFTwzLir8dIuOI6OpBuXqykZTNHKFfE+tDXnEHd2OLm3nhozMv/N+p5gkuIXJAB92RVwx+4HOjq3fd1RP0tPL6gfybo7PYXRCnilm4X6g885tPqppm2J1C1IDu4nJgnXbm2wszBA5UdPWuuLqBg12X92G3TxnEb4Y4VkzCvaai+rl/iA15BQl06Ma2ieJziuU2M5Rc+sO/9INS1tDV5S9BOgYgL5P7uCRfvxbiXDEH96bPzt//9y/rSy4NeUUc6DYZ9ToQBDUriQQe+Wa8Fx7w28MbdnT14FydoQC5Kez6uwr1T0M3UEzB/eGhhmkbPz23pPaiSKXSCADtA2L7dMzQLCFEFHQgBVHQ0dWVuTpDAHKTmTfuH21YZOKJC+HWkL78wT583Y6a56obvJf5EdTyHTJRBZkmasDX63gVHUh0dTWuTglAdhJTev9ow+PJGq9Y2u3gPnHekfns+6d/99351txoAu2dsti2dpfiauUBoWAoo6K4ALq6UlcnBKC3jdl8/2jDongcy45puOvtbm7530/94eszzYVuIbpAdwodoeOVxQNZORSEBG3c6Ooy32nfJKb0rkLD0t5Wegq6mTQP96/Kf3j9wKnmCU63FoBW2wRXBn5bYQb5VgC6ujpXJwCQZWM2l+QblvdPZqqgG0rTcD/3YfWvd37TOM3eKoQV6GBgDiX4DKXtd94VrguNrh7Q1XtZ6ZY78vQrB6Ywh6GbSrNwb/qs9v73D16Y09jiTtAi0MGFtHiQe27O+Tqb8ldAV/fdkmmh227PM6wens7uh24sTcL94Vf1037/ybkl55qkhryi69Amo77zJAWZyCRBQu/rbOjqSi5t6Ql0+8wR+rV5Pdm90M2lObg//6457zcf1/zad8gr+kD7rA0mF22CTI1VkeOM/kNgipwNXV1MKSZSfssw3foxfbgdgNIW3CfOt2au/uD0a9/VtfaNNtByZ2AYJjhPEnlflNJL71dxQT909U6wJxlJxQ1DdBvG9+PLEGuNwX2uyZnwTNkPf/j6jD3PLWgPaO+dxJw72AVHvE8VdJnebu7qNj3Zcd0Afen1A3VbEGkNwv30u9/+6cD3rW1DXhoEugudQsnX0Ok4yZAOukxvN3N1i47sumaAbtPNw3QbEWcNwr303W9f/8ehuqluwoGe57QJNMgMxwmCdPjJQMkQRtLNiMznRldvk5knu8f349+eMUL/CqKsQbhf3Xn6iW2fn5vXYHcBgEsUbi0AHfT5BUEysNsmgYlHtdzMRnR1ACNH9ozry227I9/wEmKsQbi3f1E7Y8PO08+ca3L6BC4hRLNAG/W6kL0XNTOc0NU7vgcDB3vHZPNldxcaVyPCGoR799H6q1a9f/K1Hy60+pQQbWl1gC5A0zwaDn1pbTCGSs72UrOEkEFkCEzpvOXu7Op6BqCoF19+/2jjMsRXg3AfrbH3Xbz1+F9P1LYk+G9rsreohjvcQHuLEip5bBsgRBH4DCWywY+u3nlXngEY1ZNbc2chgq1JuGsaHbaH3zr6j+Pn7DapIS9P07xLQAvqj1JykWAoCepSI/gXKyedyyITGUq7u6uzFGBYBrd+fpHpyXirLx43cP/sz1XvH/zhYrZLZsjL6XIBx7KaAVos0INdxRNAAJ7nREo0+VZFJTKUdjdXZ6kAQ9O4DfcUGxfbDMSO2GoQ7oVbjr31SVVDscMlj1TDRTskWcyaAVrsoK6s4smKTBTxPw5dvb2lRABGZHDr5xWalqaYaB0iq0G4f/3h96ve+6J2ht3hDoYlTQAt/aS6VTwp7Vg0SNoR0dUpARiazm0oKTAuy7TQGsRVg3Bv/e+5kjd2Vy9sbFFel87hdPo2zUN0Q6wrBxn0vNRq3DIn7AxwR9NeZvpiN3d1AgCDUtmNdxYal/WyMqcRVfWi4X6BnUfqJy7/24nf1110qjqu8aK97VcWvCO00xOigSFAECuFBDhIAMGn9LAg85A+uQB6HdcJ9A7gZc4i+F4Y/N+b55/cm+m8yesvQfpPEHF1z0Pt/Qrxz9r5PANS2E1zC4wrshOZk4ipBp27bcjr2Ds1jV25uRl5h5ZySEqo9HFE2akZSiVXFVHapI13V++XzG65I9+4ckAP9ggiqkG4PUNeJ8+3JASbbNbWNGeiCrQ/RMKl9T2J8nNLUCy35KyaJm089dX7JDLbZo00rhmaxh5APDUK96Obqz4INOQVsGnebIfEBFNYgRaCXkJQxSqe7bvy/sk5Kpac7Q6u3tvKbJ8xwrg2vxe3B9HUKNwLtxx7a8+xhsJAQ14hMtuIAa20TLnU+SkJMGtZ4ULy8ejqGRZafstlhvVjs3msoqJVuJ8r/+7Xaoa8AjfNXZJN84gA7f8SggSYksR697cJKF7Trhu5eqqZVt44xLBhfD8dVlHRKtxb/nN23pufnnlUzZBXIDU128Hm1TQPVf9ZLdV6Havs5QVpvoUuuF68unoPE90xdYjhjesH6bGKilbh3nmkfuLKv598Xe2QV6jb6CEBWuQUlLKg9K6Z2F6eIbBQuF68uHqige6eNFBfOm2ooRRR1CjcX1c35/7inWN/7dqQl7RcLjcwMgvvhQtof8+Tr64kDz4ltFM+eaj6srHo6hYd3XtNrn7TbSOMGxBDjcJd0+iwPfbnqg++r2sxhWvhjoaLzWAzmyIOtE9/mel8cVGzimfb3wIIXjCQMPRlY8HVTTzZP76/bsucfOM6RFCjcDe2uJhH3ur6kJdyFkMPtBDsVSDQEV6H+M5P93JZP0q7g6sbObL/qr76d+4uMmMVFS3Dvey9E3/89/HQDHkFktPtkm2ahxtosQsLUViCl1IqMVXU7zXi3NUNDIWx2bqy+8easdiCluF+ZvuJl0M55BWwlXDRDlazMXoOLYg1M5UlslDScW45gOPZ1XkGoKgPv/auIvNSxE7DcP/h0zMPvflJ9b12p6CtTxOmJvelzDIVKaaCRClkohDgeHJ1ngEo7K1bN7/Y/GQCVlHRLtwfHb4w+dmyky9GA2yXW+SueRiA9t+qqDsgcUo9z8vUJlcOcKy6OksBxmTr195ZaF6WaKBNiJxG4T7w/cURj2w++rdQJqmoUavD2VY1NAJAez9JibcTq1vFkzLSNitXfD8eXJ2lAhRn6dbNLTAtTzVjFRXNwl1d70h6cNM3H58PZ5KKErh5PiJA+wDqM9VTkEncIBKvI4j2xdUsqRNrrk4JQH4v3YY5BQkr0xOYWkRNo3A32F3cvaVHPj121m4TotzNdgnu9vLC4QXaf7OyfBXfxHOe5UQAlgA9jlydEoCRPfmNcwrMK7NszCnETMNwP77lWNn+k025bg3cP3O63MCzVFWjvAurBCk6RMpIqVgZZEEc9HhxdSIIMCyd3zwn37yyXzJbhYhpGO5ntp94ueLg+YlOtzbujNtbWoFXMEssFEB3FXz/KZ4QoAUQD64+OI3bOqfAvHJQKncY8dIw3G/8q/rxNz+pvrfVpa0hL7dE0zwcQHMc27ZIgtRtMxKgOa/iZlSsu/qAFG777HzzquEZ/H5ES8Nwf3T4wuTV5d89p7mxbL+mebgc2nMTjG1vWksmrAjimWqelFNBpNkqBnqsu3rfZLZ8Zp5pTUEvHVZR0TLc0R7yCtw0dwQoexw8zKE6VmyiSScw4sTVsxLZyukjzS+NzdZjFRUtw11d70j6yR+P7IzmkJeiprk70F3z0ABNKSO69E/Ac3vW5SYqVt2IQVfvaWV23XqZad2E/gasoqJluD1DXidqg69YGo2mecgdWmwqaIDDvGHwLgulpkhgrLl6WgKz56bhpleuG2TciihpHO6HNx+t1MqQVyC1tDqAZ9mwAi2/QXrCBGUYmdrkgmrQtejqySa678Zhpg3ThpmwiorW4X5m+4mXdxy+cIUzFsj2gpYoyApTD7SEmyo8mEJHIcRQlf7Vkqtb9cyBKYNNb/x4hBmrqGgd7g27Ti/U4pBXwKa503ep31ABLda8DnQoUWiJoSjoH01Xt+rpwSlDjG/MKUjAKipah/uDg3XTniv/bpUWh7wCyd7qADYEZY+lDqGUKm2VX9pNx3ERL+gfKVc36whcO9C46c4iy1pEJ0acmwa/krx2m+YhSDElRKZhLnF+xu+CINeXjSVXN/EErh5gXH57vmUlYhMbotcOsW1bekPWfXqOxuQHcDrdHcGpconPQIfQ9kX7Oh7tK2nKrO0pBFhaU3KVTb+Ncu/Ne5XNQCtt+pzDb1lR2a/La6OOA5g02Lh0bqFlhVlHXIhNjMANADCzMOWVBydkLtexsefgLa0OVS6tjH8/wgJcFDzgcyzTfpjXkroyB0d6SV1BBnapi4mOJXDNAOPKWaMsz1v11I7IxBjcAAAPTch8smRM2is8E3uACyCEDuhLt7kD0tzppJShIHRiVJCGXeOuzlKA8bnGtbfnW1YnGrGKSszCDQDw5NSs+64fllTG0tgC/FLTPBRA+/wpyLHc6TSevr8vNNKwa9nVKQhwZT/D+jkFlpUpZqYOUYk9EbEffcarhz7fc6x+hMsdOx/EbNAHV51F4iCWZYDnAiXJ+F4EjTre+05c4CM63Wwjil6KqNgod5mWujFHCcC4voYNd422Lc1KZLHYQjw4t0cb5uYWjuxtPhJLBt4VhxYT4ymtpPCuE8+y4k1c2aaw9lydAMDobEPp3CLrCgQ7DuFO0DOOV+bkjs7poa+LlVEyV6dmhnqgA3WtL/Eq8vCeBSbXl5W/wRX9vnp+b93muYWW5X2TueOIRxzCDQCQZuFqX70jtyjNwsfE0Ie9tVU10HLBThmi6iKgdF8tu/qonrqtcwutKwem8lhFJZ7hBgAYkGY48toduUVJJjZ2PpEKoAP3ppVhzLFMSO5QR9PVh6TrymcXWNcMz9RhFZXuADcAwMjepn0vzOg3xaxjNP9hXBJ3AFXmtoAPdwABE1n8Fy0IxbhzJF19YCpXeXuBZXVhln43ItGN4AYAGD/QWhYLWWz2VkeXgFbTEfcGH9oLIYZz3Dlcrp6TzO2emW99/vIcQyXi0A3hBmjLYntsYs+leo1nsXUVaEFoc2JBFfjK0zq15OpZNm7vzDzrmgm5Rqyi0p3hBgC4/0cZy+ZqPIvN5XYHBbQ3cG31xpVkkoP4WLiCtM5ou3qGldk/M8/y/HWDTVhFBeFuk9az2FpaHUEB3el2WoDxL88/Sqj8LTcNunqqiTl420jLi1OHmTcjAgi3j9bN7jfliv6WPbE20UQpPKLTuKX63ioTR6Lt6olGpurWkZZ1t460vIHhj3CL6re39x9XnGPZy2mwie72aporBaSTc0PguSKeQhGdbmIpTByJtKtb9fT4LSMS1s0usK7H0Ee4JZWgZxwvzOx77ZAM43FGYzfR7a2OIIBW2QoA/9U/vbeJgx5NVzfrKUwbnvDqncU2rKKCcAdWipmre3Fmv6v79jDUUhJH34p/01aimUs8a4HJkKgFVzfyBG4bZf357ALragx5hFux+qXoq9bN7jeup01n11IeulvoygoiCqG7dHNNZjgqyq5u4AhMH2l9cvpIy4tmHcUqKgi3Og3JMB5cdWvODSlmTjMfTOldc38WGZFa6GJ9bo5lJQeX5cadI+nqPEvgxuEJy28bZVlr0VMHhjvCHZTG5VoqlkzJutNmjI08dFEgBOVfiHd9NTnrjparMxRg6rCENbPybc8nGhmsooJwd003j0re+PNrez1sNWgjD90tk+Ah9SQhgqobVgHYjoqrM0SA6web183Ot63GKioId8g0d0zqSyVj0tZqYaJJS6tDEdC+TxDZG1aCIABLqWxapzzA4XV1SgAmDjRvuL0wcXWmla3BEEe4Q6qfT+r12A2XJW3WzEQTIRDQKr80yiierBFJVycCwJW5pk1zihJX9kniTmJ4I9xh0erpOTMnDUksi/ZEE7dbCNQwD3jzrJOI/EHRcvWx/YxbSooSf9m/B1+FoY0Kq7X+6tbsG4uinMXmdrvUObTIRG7/p9QU9I+Uqxf1MWwvKU5cPihNh1VUUOGH26xjXNHOYnMqLOEqgG8dNKlJ3JxneV6F486RcPVRvQwVd45OWn5Zph6rqKAiAzdAWxbbutn9r8xNNZyOVhZbIJAuraXtV3RBDFjaXnUlFMv0hMLVh2XodpUUJy7P723Yg+GMiijcAADZybqTL87sd3W0sthcbkFhj5sEXEJI/AaX+mV6QuHqA1J0e0uKk5aPyTHuwFBGRQVugOhmsTmdLvke96UVQ+Rb5SzDiA9HyYIYHlfPTuYPzB2duOKqXFM5hjEqqnADtGWxPX1jn9mJUchik60n5rWP1L+2JjkR3Vd+2Cr0rt7Lxh0uKU5cce2ghG0YwihNwA0AcMNlSZsej0IWm9stdKlqogACEIGoziYLtaunJ7DH7yhOXDllmAWrqKC0BTdARxZbJB3c6XTJt8lBXZppsNlkXXH1tAT2+JyipF/dMsK6EUMXFUgknAUNAmnZ9hMvb95bc2+9PTIzEXmObV9sr/NnppS51OwWu+fHcUxbcYaOr07kf1JPeG8iCvfzVY8E9tQ9l/dYcutIK5ZHQmnXuT16amrWfVMuS9ps0kXmbbSVXxLEnZh0Ln7om3FO/Wo2hD5HXMrVrQYGSoqTliPYqJiBGwBg6dQ+t1+Za62MRJqq0+WW5E58OVtpSqVAD9XML4/MOgpzi5Meu3G49VUMV1RMwW3SUdfKW3JuGtXHfCASaaqCzAaJ6sDAMowspZ0rMYXG1Q0sgTmFSYtvHmFbj1VUUDEHNwBAsolteOG2fleP6GU6HO40VbeCRQv8YaVA5FfPDIOr8yzArMLEZdPzbC9ZDdSOoYqKSbgBADJtfM2vbs2ZlptqOB3OLDafxQI7kSYBOyHqVs/soquzBODHeYlrZuQnrk3CKiqoWIcbAGBgmuHwM9Oyf9wnSdcQ1qa5xBLecgsIyS/TEzpXpwTg5pG2dbMLElenmNk6DFFUXMANADC6b8Kup2/sM7unjQ9bQT+32+2DHqVEcoonS1nVUzCDdXUCAtxwmXXDnOKklRlWDquooOILbgCAqwfZtj96Tc8H0yzhyUP3XyxQshcgABBKulRYQY2rXz/UWloyOnlFViJ/CkMTFZdwAwDMKEh55c6xacvClcXmPdotkMDVV0JVWEEK9ImDzFtKRicvz0nmj2NYouIabgCAB8ZnLp1ZmLIuHHnogldCC5HofTMME9Sa2Gpd/Yr+5rJ5Y3osG4hVVFDdBW4AgMWTez84eXjos9h8muYSlk2g62tiB3L1oj6mHXeP7fH0sEzDAQxHVLeCGyD8WWw++HmtFOSdtdbVNbHFnhjRy7BnwRU9luT1Nu7FUER1S7g9WWxFOZa9fAiz2NrqkMsAL5O1pmZNbDG2h6Tr999zRcqS4mzTLgxDVLeFG6Ati+256TlTLgthFpvT5QZKiGi7nPNLOZXhV7Wr90vRHblnXOqScf3NFRiCqG4PN4BvFlsoiy36gutZQki+OHmwrt4niT9+35Wpi64emLAdww+FcHvJk8U2OMN4KhRpqoJC6OUQVurqPW3cqXvHpSy+bohlK4YeKtyKarGGrmjXN/UTntr27dtHzjQndfVcbbO+2r8QQoChFBiG+hZW8P/iZC8spNN+6Rau5mcT038yeZh1C4YdCp1bRlf0t1Q+OCHzsawkXYgmVnhc2A2U8Yx8y5QaVuHqSUa24cHxaY8h2CiEW6FuHpW8cd7lacvSLVyX5jp7t14EgI5CiD64ypQalmmWW/QUHhyf+thNI2ylGG4ohFuF5l+RvvqOMWkre5iDT1N1+U0kUV1YQcLVjTyFn/4o7eEpw21YHgmFcAejhyZkPjltZI8NXUpTbYeYZ1nocrkkaAP7/itTF00bYVtv4rGKCgrhDlpP35C1YOLgxG1GPriP5GmaE58lhYIrl8SxAPOvSFl6y6ik/7XoGQeGGQrh7jrgM8cPtFUEk6bqFkQmZAYx84ujBOaNSVk9PS/ppUSsooJCuEMjm5G1P31D1ozivsGtCc4wjFhLXfHML0oBZhclr5tZkLwGq6igEO4QK93K1z59Q5+Zw3uajqjNYiPQkaEmqJz5RYgAt+UnbbijuMcKrKKCQrjDpP6p+qpf3thn5tBM40k1WWz+tculQBdz9ZtGJG0qGZOyolcifxrDCoVwh1Eje5v2LZ6cdWf/FENtKM7nDbo/7NcPs227+/KUpTnJuuMYUiiEOwJSk8XGc1xQsI8fkFBxz7jUxbmp+iMYTiiEO4K6eVTyxvnj0p9Ot/KyY800iFkoV/RP2PWTH6UvGpJhOIihhEK4o6B5Y9PW3DE6tUtZbP7KzzLtf2B8+uMjehn3YRihEO4oSi6LjWPVZbYN72k8/PDVGQ/nZ5n2YAihEG4N6OkbshZcOyRxq38WGyXK4R6SYTjyyNUZD4zpa96B4YNCuLUE+I19ZkwYZCv3Blxpd7t/iv7kokmZC67MTcDySCiEW2uy6BnH0qlZs68aYK3kGeJTqEFOWUl8zaLrMheM7ZeAjo1CuLWqdCtf+8T1ve8u7puwj1VQbTHdwjUsmtRzwY8GWMoxZFAIt8aV00N//KmpfWYX5yTslWuWp5hZ+y+u67ng2iHWbRguKIQ7RjQo3XD44aszHhmaYRBdxsdmYGDhpJ4Lpgy3bcZQQSHcMabCPqbd912V/kT/VP1J7+fNOgo/uybzvomDrZswTFAId4xq0hDr1vmXpy7NSuJrAAAMHIVHrs54bMpw2+tmHVZRQcWmWPwK2nRrXtIb9XZXcumemoUzCnqsnTYyaX0CVlFBxbBitm55uFR11p7dw8x9j+WRULGu/x8AxwjlN4U7sUkAAAAASUVORK5CYII=);
		overflow: hidden;

		z-index: 20;
		top: 209px;
		left: 510px;
		}

Conclusion

Nous avons fini notre icône, comme vous le voyez cela ne fut pas aussi simple qu’on aurait pu le penser. Si il fallait retenir certaines choses de tout ce que nous avons pu voir dans ce tutoriel, je dirais tout d’abord que CSS3 propose une multitude de propriétés qui sont inutilisées et qui méritaient d’être mise en valeur, avec de l’imagination nous pouvons tous faire, les data URI c’est magique , mais surtout : les techniques utilisées aujourd’hui sont très récentes ( je vous ai mis un résumé tout en bas du tutoriel ), ou du moins compatibles uniquement avec les navigateurs à jour tel que Chrome 11 ou Firefox 7, n’utilisez pas cette méthode de création dans le cas d’un site grand public, vous perdriez énormément de visites. Voilà voilà , c’est tout ce que j’ai à dire (ça fait déjà beaucoup !) j’espère que ce tutoriel vous aura permis d’améliorer vos connaissances, d’enrichir votre savoir, et surtout, qu’il vous aura plu.

Liste des points abordés

Perfectionnement des connaissances en positionnement CSS (relative,absolute,..)
Utilisation des transformations CSS3 2D (rotate, skewx,skewy)
Syntaxe : -prefix- transform : modif(xdeg);
-prefix-: -webkit- , -moz- , -ms- , -o- , ou -khtml- .
modif : rotate , skew , skewx ou skewy .
x : le degré de transformation.
Manipulation des pseudo-classes :before et :after
Utilisation des data URI

Digital Painting TIPS#3 : Peignez une illustration de A à Z

Asahi — Fri, 22 Jul 2011 21:06:57 +0000

Asahi (Pierre Raveneau) présente son dernier tutoriel de digital painting dans une vidéo de 4h20.

Salut a tous, que de temps passé depuis mon dernier tutoriel, pas mal de soucis aussi, notamment mon déménagement précipité hors du Japon à cause du tsunami et du tremblement de terre (enfin plutôt la centrale nucléaire). Bref, désolé de cette attente .

Résultat final du tutoriel

Ce tuto comme dit dans la vidéo n’est pas à proprement parler porté sur UN tips en particulier , mais plutôt une série de tips qui suivent la réalisation d’une illustration de A a Z . Je ne saurais pas dire exactement tout ce qui est traité dans cette longue vidéo , mais pour sûr il y a :

- mise en couleur

- rendu

- utilisation de références

- utilisation de textures

- etc…

J’espère que vous apprécierez ce tutoriel et si jamais vous avez des points que vous voudriez voir plus détaillés ou de nouveaux points pas encore abordé, n’hésitez pas à me le notifier pour un futur tutoriel en commentaire.

Résultat final du tutoriel

Cheers !!

Asahi

Choisir sa carte son

D-JiA — Wed, 06 Jul 2011 22:01:10 +0000

D-JIA (Nicolas Giannuzzi), compositeur et Sound Designer sort sa deuxième rubrique sur la musique assistée par ordinateur, il nous conseillera cette fois-ci sur le choix d’une carte son.

Trouver une carte son qui répond à ses besoins n’est pas une chose aisée. Les marques ne cessent de proposer différentes solutions avec de nombreuses caractéristiques techniques. Nous allons donc voir qu’est-ce réellement une carte son et quels sont les repères pour trier et effectuer le bon achat.

En ce qui me concerne, j’en possède une pour pouvoir brancher un casque et deux enceintes de monitoring tout en restant indépendant des caractéristiques de l’ordinateur. Par ailleurs, je branche un micro pour utiliser un vocodeur et divers synthétiseurs. Je peux la considérer comme le coeur de mon système étant donné que c’est par là que transite le son.

I/ Caractéristiques principales d`une carte son

1) Connectiques

• Entrées analogiques : elles permettent de faire entrer une source sonore dans la carte son. Ma voix capturer par un micro ou le son d’un synthétiseur. Il y a différents types d’entrées analogiques mais principalement des entrées Jack 6.35 et XLR (Voir ci-dessous).

Jack 6.35 :

Un Jack peut être de différentes tailles. Dans une carte son généralement nous trouverons des jack 1/4″, soit 6,35 mm. Plus rarement, des jack 3,5 mm qui correspondent aux prises des casques pour les lecteurs MP3.

XLR :

L’origine du nom vient de la société Cannon. Le L de XLR signifie « Latch » pour le loquet et le R signifie « Rubber » pour le ruban. On trouve généralement ces câbles pour brancher des micros. Ils ont l’avantage d’être robuste et d’avoir un clip de sécurité.

Combo Jack/XLR :

Ces connectiques sont très couramment utilisées surtout dans les cartes sons d’entrée de gamme car pour un même emplacement on peut brancher un Jack 6.35 ou un XLR indifféremment. Ceci à pour conséquence d’économiser de la place et de réduire le nombre d’entrées car on ne peut pas brancher les deux en même temps.

• Sorties analogiques : elles permettent de faire sortir le son pour l’envoyer dans un casque, des enceintes ou une console de mixage.

• Entrées et sorties stéréo RCA : appelées aussi CINCH, elles sont couramment utilisées pour l’audio et la vidéo. Le câble rouge est pour le son à droite et le blanc à gauche (Voir ci-dessous).

RCA :

Le nom « RCA » vient de « Radio Corporation of America ». Très utilisé depuis les années 70 pour les cassettes audios mais depuis l’arrivé du numérique on a tendance à préférer le HDMI.

• Entrées et sorties numériques : principalement S/PDIF (Sony Philips Digital Interface), elle permettent de travailler le son sur du matériel numérique possédant une connectique compatible. Cela permet d’éviter l’utilisation des entrées et sorties analogiques et ainsi ne pas faire une conversion (Voir ci-dessous).

S/PDIF optique :

Sous sa forme optique, c’est à dire avec de la fibre optique utilisant un connecteur TOSLINK. Son nom vient de TOShiba-LINK et LINK voulant dire lien.

S/PDIF coaxial :

Sony/Philips Digital InterFace pour Interface numérique Sony/Philips a été conçu pour transmettre des données audionumériques. Ici, nous l’avons sous sa forme coaxiale en cuivre.

• Entrées et sorties MIDI : la norme MIDI est une interface de communication qui permet à plusieurs instruments de fonctionner ensemble. Cela sert, par exemple, à contrôler le son d`un synthétiseur logiciel avec un clavier MIDI externe. Aujourd’hui on trouve de plus en plus de solutions USB pour le MIDI, d’ailleurs tous les contrôleurs MIDI récents possèdent un port USB pour directement communiquer avec l’ordinateur sans passer par une carte son (Voir ci-dessous).

MIDI :

La norme midi a été développé par Dave Smith au début des années 80. Elle permet d’échanger des données entre les instruments électroniques. Des signaux pour donner des ordres sont envoyés dans cette connectique à 5 broches.

• Connexion avec l’ordinateur : il y a différentes façons de connecter une carte son à un ordinateur. Généralement, un port firewire 400, 800 ou un port USB 2. Nous pouvons trouver aussi des cartes sons se mettant à l’intérieur de l’ordinateur avec une connexion PCI (Voir ci-dessous).

Firewire – USB :

Deux connectiques permettant de relier la carte son à l’ordinateur. Firewire a été inventé par Apple au début des années 90 et permet une transmission avec un haut débit, c’est très important pour les projets lourds. L’USB est une autre façon de transmettre des informations et est théoriquement plus lent que le Firewire, mais il a tendance à être plus démocratisé.

2) Convertisseur

Le nombre de bits : important pour la qualité du rendu sonore. Actuellement les cartes sons proposent une résolution de 16 ou 24 bits la plupart du temps. Plus le nombre de bits est élevé, plus le son sera précis. Avec 16 bits, cela représente 65 536 possibilités de valeurs. Pour 24 bits, on atteint 16,7 millions possibilités de valeurs. Les CD Audio travaillent avec une résolution de 16 bits. Dans un contexte professionnel il est préférable de travailler au minimum avec 24 bits et de convertir tout à la fin en 16 bits.

L`échantillonnage : Il s`agît d’une fréquence exprimée en hertz. Théoriquement c`est le nombre d`échantillons produits chaque seconde. Plus cette fréquence est élevée et meilleure sera la qualité. L`oreille humaine est capable d`entendre les sons allant de 20 Hertz à 20 KiloHertz. Pour enregistrer un son de bonne qualité, il faut au minimum travailler avec une fréquence de 44,1 KiloHertz. Cette dernière correspond aux normes des CD Audio. Toutefois, si la carte son le permet il est conseillé de travailler à 48 KHz.

3) Pilotes audios

Quand on connecte sa carte son sur l`ordinateur, le séquenceur audio nous propose de faire un choix sur le pilote a utilisé. Nous allons présenter les trois principaux :

WDM : Windows Driver Model est un pilote sur Windows pour gérer le flux audio et vidéo. Il est apparu sur Windows 98SE.

ASIO : Abréviation de «Audio Streaming Input Output » pour Entrée Sortie de Flux Audio. Il a été développé par la société Steinberg. L`intérêt majeur de l`utilisation de ce pilote est la performance face au WDM ainsi que la faible latence. Généralement les cartes sons professionnelles sur Windows utilisent l`ASIO.

CoreAudio : Il permet d`utiliser la partie audio du système d`exploitation d`Apple Mac OS X. Il gère les protocoles audio et MIDI. Les cartes sons sur Mac utilisent le CoreAudio.

III/ Une carte son pour chaque budget

Avant d`effectuer un achat il faut savoir ce que la carte son est capable de faire. Elles ont toutes à la base la même fonction, acheminer le son vers un casque, un ordinateur ou une console de mixage. Elles le font toutes avec plus ou moins de qualités et d’options. Elles ne doivent pas altérer le son et être compatibles avec notre matériel en fonction des connectiques. Il faut éviter d’utiliser les cartes déjà intégrées dans les ordinateurs car elles ne sont pas optimisées pour travailler le son. Nous verrons un aperçu des offres proposées aussi bien pour les gros budgets que les plus petits.

1) Carte son d’entrée de gamme

Entre 100 et 300 euros nous pouvons trouver :

Tascam – US 144 MK2

Carte son très appréciée pour sa qualité d`enregistrement. Pour un prix abordable elle réalise les principales fonctions d`une carte son de petit Home Studio.

Caractéristiques principales :
- 2 entrées analogiques Jack 6.35
- Entrée et sortie numérique coaxiales
- Sortie stéréo RCA
- 2 entrées XLR avec alimentation phantom*
- Sortie casque
- Entrée et sortie MIDI
- USB

___________________________________________________________

• L’alimentation phantom fournit un courant électrique continu pour un micro qui en a besoin. On pourra parfois trouver « 48V » qui correspond à la tension de cette alimentation.

Presonus – Audiobox

Très standard qui n`apporte pas d`évolution surprenante, Presonus est connu pour la qualité de ses préamplificateurs*. Bon rapport qualité/prix. Il est de plus livré avec Artiste Studio One pour découvrir leur séquenceur phare. Très minimaliste c’est un bon début pour s’initier aux cartes sons et à la musique assistée par ordinateur.

Caractéristiques principales :
- 2 entrées combo XLR/Jack avec alimentation phantom
- 2 sorties analogiques
- Sortie casque
- Entrées et sorties MIDI
- USB

___________________________________________________________

• Un préamplificateur ou préampli sert à recevoir et adapter le signal avant de l’envoyer à l’amplificateur. Ce dernier aura le rôle d’augmenter le volume et en théorie sans déformation sonore.

M-Audio – Fast Track Pro

Carte son correcte avec un prix bas pour toutes les personnes voulant commencer à faire de la MAO.

Caractéristiques principales :
- 2 entrées combo XLR/Jack avec alimentation phantom
- 2 sorties analogiques
- 2 entrées et sorties RCA
- Sortie casque
- Entrées et sorties MIDI
- Entrées et sorties numériques coaxiales
- USB

Edirol – UA 25EX

De même, bonne carte son répondant à la plupart des besoins sans avoir à investir dans une haut de gamme. Elle a l’avantage d’avoir une entrée et une sortie numérique avec l’optique.

Caractéristiques principales :
- 2 entrées combo XLR/Jack avec alimentation phantom
- 2 sorties analogiques
- Sortie casque
- Entrée et sortie numérique optiques
- Compresseur audio intégré
- Entrée et sortie RCA
- Entrées et sorties MIDI
- USB

2) Carte son haut de gamme

Pour un home studio plus conséquent il est préférable de choisir une carte son avec un nombre d’entrées raisonnable. Dans ce cas, il vaut mieux voir du côté des consoles de mixage*. Dans cette gamme les connectiques seront plus complètes et nombreuses et la qualité de la conversion analogique/numérique sera meilleure. Nous pouvons trouver :

RME – Fireface 800

Cette carte est considérée comme une référence. Elle est réputée pour son routing* étendu, sa qualité audio et ses très bons préamplificateurs. Elles possèdent aussi de nombreuses entrées et sorties avec une très bonne restitution de la dynamique sonore.

Caractéristiques principales :
- 10 entrées et sorties analogiques
- 4 entrées micro XLR avec alimentation phantom
- Sortie casque
- Entrée et sortie numérique optiques
- Entrée et sortie numérique coaxiales
- Entrée et sortie MIDI
- Firewire 400 et 800

___________________________________________________________

• Une console de mixage ou table de mixage est un matériel électronique permettant de mélanger des signaux sonores.
• Le routing pour routage en français sont les chemins possibles dans un réseau. Par conséquent, ce sont les différentes possibilités que peuvent emprunter le signal sonore entrant.

Apogee – Ensemble

Carte son très pro avec la qualité Apogee connue pour la précision de ses convertisseurs. Développée pour Mac, elle ne possède pas de connecteurs MIDI.

Caractéristiques principales :
- 4 entrées analogiques
- 8 sorties analogiques
- 4 entrées micro XLR avec alimentation phantom
- 2 sorties casque
- Entrée et sortie numérique optiques
- Entrée et sortie numérique coaxiales
- Limiteur intégré
- Firewire 400

MOTU – TRAVELER MK3

Carte son conçue aussi bien pour le studio que la scène et peut être utilisée comme un processeur d’effets*, ce qui est très rare. Elle ne possède pas de connecteurs MIDI.

Caractéristiques principales :
- 4 entrées analogiques
- 8 sorties analogiques
- 4 entrées micro XLR avec alimentation phantom
- Entrée et sortie numérique coaxiales
- 2 entrées et sorties numérique optiques
- Sortie casque

___________________________________________________________

• Un processeur d’effets permet de manipuler le son pour le modifier avec des effets particuliers, par exemple une réverbération.

III/ Etude de la M-Audio FireWire 410

Internet devient un outil fabuleux pour chercher mais décrypter seul les caractéristiques d’une machine n’est pas quelque chose de facile. Je conseille Audiofanzine pour toutes vos recherches car c’est bien détaillé. Nous allons étudier la M-Audio FireWire 410 pour se dégourdir, les informations techniques sont tirées d’Audiofanzine.

Audionumérique :
Convertisseur A/N : 24bits/96kHz.
Convertisseur N/A : 24bits/192kHz.

E/S Analogiques :
2 entrée(s) à gain variable XLR.
Alimentation phantom.
8 sortie(s) Jack 6,35.
Sortie Casque.

E/S Numériques :
S/PDIF Optique : 1 entrée(s).
S/PDIF Optique : 1 sortie(s).
S/PDIF Coaxial : 1 entrée(s).
S/PDIF Coaxial : 1 sortie(s).

E/S MIDI :
1 entrée(s) MIDI.
1 sortie(s) MIDI.

La partie audionumérique concerne le convertisseur qui permet à l’ordinateur d’enregistrer un instrument analogique dans un format qu’il peut reconnaître, c’est à dire le numérique. « A » signifie Analogique et « N » Numérique. Pour convertir de l’analogique au numérique (c’est à dire enregistrer par exemple une guitare sur un ordinateur), la limite sera de 24 bits et de 96 KHz pour la fréquence échantillonnage. Ce sont des taux élevés qui permettent une qualité sonore plus que correcte étant donné que le format CD est de 16 bit avec une fréquence échantillonnage de 44,1 KHz.

Les entrées analogiques sur cette carte son travaillent en parallèle. Si nous regardons bien il y a 4 entrées, 2 combo XLR/Jack et 2 entrées Jack à l’arrière. Si nous branchons un Jack en façade, celui de l’arrière sera désactivé. Cependant nous pouvons permuter entre l’avant et l’arrière. Il faut donc bien faire attention de savoir comment la carte son fonctionne pour ne pas se faire piéger lors de l’achat. Par ailleurs, l’alimentation phantom doit obligatoirement être présente car certains micros ont besoin d’un courant électrique pour fonctionner. Les deux sorties casques représentent un réel avantage pour travailler en groupe ou pour tester son mixage avec deux casques différents sans tout le temps enlever et remettre le jack et ainsi abîmer la connectique.

La possibilité d’avoir une entrée et une sortie numériques coaxiales et optiques est avantageuse car on dispose au final de deux sorties numériques et cela permet aussi d’avoir une plus grande compatibilité avec le matériel que nous disposons.

Enfin, nous avons nos très classiques entrée et sortie MIDI. Les cartes sons haut de gamme ne possèdent pas toujours ces connectiques car elles ne sont focalisées que sur la partie audio. En effet, le MIDI n’en n’est pas car c’est du code avec un protocole de communication.

Conclusion

Je conseillerais au début d’investir dans une carte son peu onéreuse pour s’habituer au concept et découvrir ce qu’elle peut nous procurer comme avantage. Puis, évoluer vers une plus haut de gamme si on en ressent le besoin. En ce qui me concerne, j’ai commencé avec une M-Audio FireWire 410 puis une Edirol UA 25EX car elle sont très complètes et répondent tout à fait à mes attentes. Pour une haut de gamme, la solution de la RME Fireface est très intéressante car il y a quasiment tous les types de connectiques et elle offre une très bonne restitution du son.

Cette troisième et dernière découverte s`arrête donc ici ! Vous possédez maintenant toutes les connaissances nécessaires pour pouvoir aborder le prochain module qui se consacrera au Sound Design avec un premier chapitre sur l’histoire et l’évolution des synthétiseurs matériels.
___________________________________________________________

Récapitulatif du lexique

• L’alimentation phantom fournit un courant électrique continu pour un micro qui en a besoin. On pourra parfois trouver « 48V » qui correspond à la tension de cette alimentation.
• Un préamplificateur ou préampli sert à recevoir et adapter le signal avant de l’envoyer à l’amplificateur. Ce dernier aura le rôle d’augmenter le volume et en théorie sans déformation sonore.
• Une console de mixage ou table de mixage est un matériel électronique permettant de mélanger des signaux sonores.
• Le routing pour routage en français sont les chemins possibles dans un réseau. Par conséquent, ce sont les différentes possibilités que peuvent emprunter le signal sonore entrant.
• Un processeur d’effets permet de manipuler le son pour le modifier avec des effets particuliers, par exemple une réverbération.

Créer un site d`entreprise de A à Z 3/3 : L’administration en PHP/MySQL

Design Spartan — Mon, 27 Jun 2011 21:20:24 +0000

Design Spartan (Gaétan Weltzer) clôt ce tutoriel de création de site par le développement de l’administration en PHP/MySQL.

L’objectif de ce tutoriel assez long est d’offrir un cas pratique avec une réflexion derrière. En situation réelle pour une entreprise, comment se passe la réalisation d’un site Internet de présentation ? Par où commence-t-on et comment finit-on, voici ce que nous allons voir ensemble. Mais tout d’abord, voici les captures d’écran de l’administration terminée et dynamique de cette troisième partie :

Captures d’écran de l’administration fonctionnelle de Real Tea

A lire avant de commencer

Plutôt que de faire un simple tutoriel de webdesign, je souhaite vous emmener dans la création d’un site Internet pour une entreprise fictive de A à Z : de la phase de réflexion jusqu’à la mise en ligne du site en passant par le webdesign, l’intégration et le développement. Néanmoins pour ce long exercice, nous ne nous pencherons dans la phase de réalisation que sur la page d’accueil étant donné que les autres pages sont simplement déclinées de celle-ci. Ainsi je parlerais des autres pages sans voir en détail le webdesign ou l’intégration.

Pour cet exercice, je vais vous montrer le procédé de création d’un site-vitrine qui est à peu près le même pour la majorité des entreprises souhaitant présenter leur activité et entrer en contact avec de potentiels clients. Pour tout de même partir dans l’originalité et montrer comment on peut s’adapter au cas par cas (notamment en matière de webdesign), j’ai décidé de réaliser le site d’une entreprise de vente de thé de qualité qui possède plusieurs boutiques en France. Le but de ce tutoriel est de partir de cet exemple précis (que vous ne rencontrerez probablement jamais) pour vous apporter des connaissances, des techniques et une méthodologie propre à la plupart des sites web, que ce soit en webdesign, en intégration, en développement ou en gestion de projet.

Page du tutoriel – ce qui a été crée dans Photoshop puis intégré en HTML5/CSS3 dans les précédentes parties

Ce tutoriel est découpé en 3 parties :

- La réflexion puis le webdesign : élaboration de la charte graphique et du design du site Internet

- L’intégration HTML5/CSS3

- Le développement PHP/MySQL des front et back office (administration)

3/3 : L’administration en PHP/MySQL

Cette troisième et dernière partie couvre les bases d’une administration à savoir :

- créer la base de données

- créer la page d’authentification

- ajout / suppression d’une actualité- ajout / suppression d’une page du site

- affichage dynamique sur la page d’accueil (en front office) des dernières actualités

- récupération des adresses emails sur l’accueil pour la newsletter

Ces quelques points seront suffisants pour comprendre le fonctionnement et ce qui est nécessaire à un site-vitrine administrable par une tierce personne. L’exemple est ici simple et basique pour ne pas se perdre dans les détails et éviter un tutoriel interminable. Cela vous permettra de réaliser des sites avec un espace d’administration et l’ajout / suppression de contenu dans une base de données et enfin de l’afficher sur la partie visible du site, aussi appelée front office.

Je remercie Jérôme, notre développeur professionnel, pour son coup de main sur cette troisième partie du tutoriel !

1. Redirection d’index.php

Le premier fichier que le visiteur verra en se connectant au site est bien entendu le fichier index. Pour notre administration, il ne contient que quelque lignes qui vont en fait rediriger l’utilisateur vers le formulaire de connexion :

2. Créer la base de données

Que ce soit sur un serveur en ligne de votre hébergeur ou en local à l’aide de Wamp, la procédure est la même, passant par PhpMyAdmin.

Plutôt que de créer les tables une à une, nous sommes extrêmement généreux chez Living Tuts en vous donnant la base de donnée « realtea » déjà crée et remplie !

Depuis votre navigateur préféré, accédez donc à PhpMyAdmin. Allez dans l’onglet « Importer » pour créer automatiquement la base de données et la remplir. Cliquez sur « Parcourir » et choisissez le fichier « database.sql » qui n’est autre qu’un fichier texte contenant les requêtes nécessaires à la création et au remplissage des tables les unes après les autres. Vous pouvez l’ouvrir pour y trouver les requêtes nécessaires à la création des tables, tout est expliqué juste en-dessous. Une fois le fichier sélectionné, cliquez sur « Exécuter » et c’est terminé ! Vous n’avez plus rien à faire.

Normalement un message de confirmation a dû apparaître et vous annoncer que les tables ont été ajoutées.

Aller plus loin : les requêtes SQL expliquées

Depuis l’accueil de PhpMyAdmin (soit dans l’onglet Bases de données), créez la base de données en rentrant son nom « realtea ». Ne vous trompez pas dans le nom de la base, sinon il faudra penser à le changer dans le fichier de connexion à la base de données. Choisissez ensuite dans la liste déroulante l’interclassement « utf8_general_ci » qui est l’encodage standard, comme pour le format des fichiers des pages et le charset dans la balise meta des pages pour ne pas se faire chier avec les problèmes récurents d’accents.

Votre base est crée ! C’est aussi simple que ça ! Mais elle est vide. Oh.

La création des 3 tables n’a rien de compliqué mais quelques spécificités entrent en jeu, voici les requêtes permettant leur création. Chaque champ est explicité en-dessous.

Table news

CREATE TABLE IF NOT EXISTS `news` (
`id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(150) NOT NULL,
`text` text NOT NULL,
`date` datetime NOT NULL,
`valid` tinyint(1) NOT NULL DEFAULT ’1′,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

[id]
C’est l’identifiant primaire de la table donc il est en auto incrémentation et non signé pour doubler le nombre de possibilités comme il n’y a pas d’id négatif.

smallint signed => – 32 767 à 32 767
smallint unsigned => 0 à 65 535 ( De quoi faire quelques news… )

[title]
Varchar 150 caractères ou plus il faut voir si on va avoir des titres concis ou un paragraphe entier. A moduler selon les besoins.

[-text]
Format Text ( pas de limite de taille ) dans la limite du raisonnable, ça prend de la place mais cela laisse le choix au niveau du content.

[date]
Le meilleur format pour travailler facilement sur des filtre de recherche ou des formatage de résultat dans les requêtes.

[valid]
Booléen (1 valide, 0 non valide) pour ne jamais avoir à supprimer une entrée ( par défault à 1). Ceci est important à noter, par exemple lorsque vous supprimez une actualité, vous ne l’effacez pas de la base de données mais son champ valid est uniquement passé à 0. Ainsi cela évite les erreurs irrécupérables de suppression de données ou encore de hacking.

Table users

CREATE TABLE IF NOT EXISTS `users` (
`id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
`login` varchar(150) NOT NULL,
`pass` varchar(32) NOT NULL,
`mail` varchar(150) NOT NULL,
`valid` tinyint(1) NOT NULL DEFAULT ’1′,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

[id]
Comme au-dessus.

[login]
Comme au-dessus.

[pass]
Cryptage md5 du mot de passe 32 caractères.

[mail]
Utile pour récupérer le mot de passe en cas de perte.

[valid]
Comme au-dessus.

Table newsletter

CREATE TABLE IF NOT EXISTS `newsletter` (
`id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`mail` varchar(150) NOT NULL,
`valid` tinyint(1) NOT NULL DEFAULT ’1′,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

[id]

Comme au-dessus.
[mail]

Comme au-dessus.
[valid]

Comme au-dessus.

Important : Pour la suite du tutoriel, veillez à modifier les informations de connexion à la base de données si vous n’avez pas les mêmes paramètres qu’ici (login : « localhost », mot de passe : « root »).

3. La page d’authentification

Comme pour toute administration, il faut un minimum de sécurité. La fameuse page d`identification est un classique duquel on ne se dérobe plus.

Créez un nouveau fichier PHP. Notre gentil développeur a pris soin de commenter le code. Dans les grandes lignes nous avons une partie HTML qui correspond au formulaire de connexion puis une partie en PHP au début qui n’intervient que si le formulaire a été soumis. On teste alors les données entrées (login et mot de passe) avec celles de la base de données et si tout est bon, on redirige vers la page d’accueil de l’administration, sinon on peut ajouter le comportement que l’on souhaite (message d’erreur…).

Il y a trois choses à noter pour la sécurité :

- la première est la protection contre les injections SQL (cf code commenté en-dessous)

- les mots de passe sont encryptés en md5 pour augmenter la sécurité

- si la mot de passe est bon, on commence par créer un cookie pour garder la session ouverte. La durée de ce cookie est d’une heure, une durée relativement court vu qu’il s’agit d’une interface d’administration.

 0) # Si login pass et valid ok
 {
 setcookie('id', $id, time()+3600); # Création des cookies
 setcookie('mdp', $mdp, time()+3600);

 $_SESSION['id'] = $id; # Création des sessions
 $_SESSION['mdp'] = $mdp;

 header('Location: actu.php'); # Redirection

 exit();
 }
 else # Sinon
 {
 # Login ou Mot de passe incorrect
 }

 mysql_close($cnx); # Déconnexion
}

?>


 
 
 Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com

 

 
 
 

 

 

 
 
 
 Actualités
 Pages
 Se déconnecter
 
 
 

 

 
 
 
 

 

 
 
 Identifiant
  
 

 Mot de passe
  
 Mot de passe oublié ?
 
 
 

 

 
 
 Retrouvez-nous aussi sur : 
 
 

  © Gaétan Weltzer   Tous droits réservés - tutoriel pour Living Tuts : www.livingtuts.com

4. Ajouter/supprimer une actualité

Rappelons-nous du tout premier tutoriel à l’étape de réflexion. Nous avions décidé très en amont que les utilisateurs (notre client fictif Real Tea) pourrait ajouter dynamiquement du contenu. Il s’agit des actualités présentes sur le site ainsi que de la création de nouvelles pages qui pourraient par exemple être : « Comment préparer nos thés » ou encore « Notre équipe », etc… Sur la page d’administration des actualités nous avons 4 choses pour rester simple et concis pour le tutoriel :

- ajout d’une nouvelle actu en remplissant un formulaire

- liste des actualités déjà présentes sur le site

- suppression d’une actualité listée

- redirection vers une actu (bêtement, un lien « lire l’actualité » qui renvoie vers la page de l’actualité)

Pour ce qui est des explications, je n’ai pas grand chose à dire, tout est commenté ! En une ligne, on teste au tout début si on a reçu le paramètre GET « delete », si tel est le cas, on supprime l’actualité qui a été supprimée. Si l’utilisateur a cliqué sur « Créer une actualité », on récupère les données (date, titre, texte) et on les rentre dans la base. Et enfin on cherche dans la base les actualités à afficher sous le formulaire de la page.




 
 
 Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com

 
  

 
 
 

    
    
    

 

 

 

 
 
 
 Actualités
 Pages
 Se déconnecter
 
 
 

 

 
 
 
 

 

 
 
 Ajouter / Supprimer une actualité
 

 Ici vous pouvez ajouter ou supprimer une actualité. Celle-ci apparaîtra automatiquement sur la page d'accueil et pourra ensuite être lue en entier lorsque le visiteur clique dessus.

 
 Date
  
 

 Titre de l'actualité
  
 

 Description (limité à  1000 caractères - il est conseillé de rester synthétique dans la description)
  
 

 
 

 
 Actualités déja publiées
 

 
 
 
 
 
 '.$news[$i]['title'].'
 

 
 '.$news[$i]['date_d'].' 
'.$news[$i]['date_b'].' 
 

 
 '.$news[$i]['text'].'
 
 > Voir l\'actualité
 Supprimer
 
 


 
 ';
 }

 ?>
 

 

 

 
 
 Retrouvez-nous aussi sur : 
 
 

  © Gaétan Weltzer   Tous droits réservés - tutoriel pour Living Tuts : www.livingtuts.com

5. Ajouter/supprimer une page

Cette interaction fonctionne en fait exactement comme pour les actualités. On peut en ajouter ou en supprimer, la requête ainsi que la page possèdent la même structure.




 
 
 Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com

 

 
 
 

 

 

 
 
 
 Actualités
 Pages
 Se déconnecter
 
 
 

 

 
 
 
 

 

 
 
 Ajouter / Supprimer une page
 

 Ici vous pouvez ajouter ou supprimer une page. Celle-ci apparaîtra automatiquement sur la page d'accueil et pourra ensuite être lue en entier lorsque le visiteur clique dessus.

 
 Titre de la page
  
 

 Description (limité à  1000 caractères - il est conseillé de rester synthétique dans la description)
  
 

 
 

 
 Pages déja crées
 

 
 
 
 
 
 '.$pages[$i]['title'].'
 

 
 '.$pages[$i]['text'].'
 
 > Voir la page
 Supprimer
 
 


 
 ';
 }

 ?>
 

 

 

 
 
 Retrouvez-nous aussi sur : 
 
 

  © Gaétan Weltzer   Tous droits réservés - tutoriel pour Living Tuts : www.livingtuts.com

6. Se déconnecter

Il n’y a pas grand chose à dire sur cette partie. On détruit la session ainsi que le cookie puis on redirige vers l’index.

7. On rend le site dynamique dans sa partie visible

A ce stade, on peut ajouter ou supprimer des contenus dans la base de données, mais ils ne sont pas encore visibles sur le front office ! Cela signifie que les visiteurs du site ne voient toujours que le texte écrit en dur en HTML à l’étape 2 du tutoriel (l’intégration HTML). Il faut donc rajouter un peu de PHP dans la partie visible du site pour qu’il cherche les bonnes informations dans la base de données à l’aide d’une requête puis qu’il l’affiche là où nous le voulons depuis le départ. Cela signifie qu’il faudra veiller à garder la même structure dans la page HTML en ajoutant le contenu dynamique dans la bonne balise au bon endroit pour ne pas perdre une classe ou un id et ainsi avoir un affichage erroné car aucun CSS n’est associé au texte.

Première chose à faire : Reprenez les fichiers du front office (ne vous trompez pas !) et trouvez index.html. Pour que notre script marche, il faut transformer ce fichier html en fichier PHP, changer juste l’extension afin d’avoir « index.php ».

Note : dans les fichiers du tutoriel, le fichier index du site visible se nomme « index_front.php ».

Ensuite nous allons ajouter du php au tout début avant la première ligne :

Si vous avez suivi, nous nous connectons à la base de données puis ensuite on teste si la variable « email » a été envoyé. Si tel est le cas, cela veut dire qu’un utilisateur a entré son adresse email pour s’inscrire à la newsletter. Son adresse est donc entrée dans la table « newsletter » de notre base.

NB : Dans le cadre du tutoriel, nous partons du principe que l’input HTML5 de type « email » suffit à prévenir au cas où l’utilisateur rentre du texte qui n’est pas sous forme d’un email, par exemple test@test.com. En condition réelle, pensez à rajouter un test en PHP avant de l’entrer dans la base de données.

Ensuite, on récupère les trois dernières actualités valides. Il ne nous reste plus qu’à les afficher là où il faut, c’est-à -dire dans le bloc « actualités ».


 
 ACTUALITES
 
 
 
 
 
 '.$news[$i]['title'].'
 

 
 '.$news[$i]['date_d'].' 
'.$news[$i]['date_b'].' 
 

 
 '.$news[$i]['text'].'
 Lire la suite
 


 
 ';
 }

 ?>

Toute dernière chose : pour être sûr que votre formulaire pour la newsletter marche bien, veillez à avoir rempli l’attribut action avec « index.php » comme il suit :

Et voilà , nous avons fait le tour de cet énorme tutoriel !

Pour résumer nous avons vu ensemble :

- la partie de réflexion et de début de gestion de projet afin de définir les besoins et contraintes du site

- le webdesign, création de la charte graphique et ergonomie

- intégration en HTML5/CSS3

- développement de l’administration permettant à Real Tea de se connecter à un back office pour ajouter/supprimer actualités et pages puis de les afficher dynamiquement dans la section visible du site ainsi que l’enregistrement de l’email de l’utilisateur pour la newsletter.

Je rappelle encore une dernière fois qu’il s’agit là de la base d’un CMS. Cette administration de site pourrait être développée sans fin encore et encore au niveau des contenus, des messages, des fonctionnalités, de la sécurité, ajouter de l’AJAX, etc… On pourrait en faire un livre ! Néanmoins il vous apporte les connaissances nécessaires à l’élaboration d’une petite administration, après c’est à vous d’aller plus loin ! J’espère comme toujours qu’il répondra à vos attentes et qu’il boucle ce très long tutoriel comme il se doit. Ce fut pour moi un plaisir de rédiger ce tutoriel en 3 parties, bien qu’éprouvant ! J’espère vous avoir enrichi par ma méthode de travail professionnelle et la technique ainsi que les connaissances nécessaires derrière.

Merci à Jérôme, développeur de Living Tuts, pour le coup de main pour cette troisième partie du tutoriel.

Je vous dit à bientôt pour un prochain tutoriel !

Créez une animation typographique en vidéo 2/2 : After Effects

lhenalee — Wed, 11 May 2011 18:14:21 +0000

Lhenalee (Thomas Normanno) vous guide dans la création d’une animation typographique en vidéo avec Photoshop et After Effects.

Salut tout le monde ! Voici enfin la seconde partie du tutoriel

Dans la partie précédente…

Un petit rappel s’impose avant tout ! Dans la première partie, nous avons créé notre typographie sur Photoshop, et nous avons fait des particules à l’aide de Trapcode Particular dans After Effects. Vous l’aurez donc compris, Photoshop et After Effects sont très complémentaires. Nous avons vu qu’After Effects peut être aussi utile dans la conception d’une image mais cette fois nous allons nous attarder sur l’animation pure et dure !
C’est une partie très intéressante, dans le sens ou à partir d’une maquette (PSD), nous devons trouver une manière d’animer cette dernière, avec les incroyables capacités que nous offre After Effects.

Dans ce vidéo-tutoriel nous allons donc procéder en plusieurs étapes :

Tout d’abord assurez-vous d’avoir votre PSD bien rangé sous la main. Ensuite After Effects ainsi que le plugin Trapcode Particular de Red Giant seront nécessaires ! En ce qui concerne la musique, libre à vous de choisir votre morceau préféré, dans notre exemple, il s’agit de l’end title de Tron (Daft punk).

-Nous commencerons donc par importer notre PSD dans After Effects.
-Ensuite nous allons animer les différents éléments typographiques.
-Et pour finir la création et l’animation des différentes particules.

Si vous avez bien suivi la première partie de ce tutoriel, vous ne devriez pas avoir de problème pour suivre celle-ci qui aborde à quelques détails prêt les même principes !

Le résultat final

Le tutoriel en vidéo :

Nous avons enfin totalement terminé ce tutoriel ! Dans cette dernière partie nous avons donc animer notre PSD avec des effets simples et efficaces comme le flou directionnel, de plus nous avons vu les nombreuses possibilités que Particular nous offre !

En conclusion, à la fin de ces deux tutoriels, vous aurez assimilé de nombreuses techniques souvent utilisées en motion design ou autre avec After Effects :

-Création typographiques (Utilisation des texture, des modes de fusions et styles de calque…).
-Importer un PSD dans After Effects.
-Animation des éléments typographiques créés sous Photoshop.
-Approche de Particular (animation avec lumière, création de différents styles de particules..).

De plus, outre les grands points abordés, nous avons vu de nombreux détails qui ne sont pas anodins ! Si vous avez bien suivis ce tutoriel de A à Z, vous aurez donc appris plein de techniques et méthodes différentes qui vous seront sûrement utiles dans vos prochains travaux ! N’hésitez pas à poser vos questions sur Living Tuts si vous êtes bloqué ou si vous avez simplement besoin d’un conseil.

On se retrouve pour un prochain tutoriel très bientôt ! Celui-ci abordera de façon plus professionnelle, « la chaine de travaille » et la conception d’une animation à partir d’un storyboard, avec un vrai client.
Je ne vous en dit pas plus, un peu de patience et à bientôt !

Approche Théorique du Webdesign

Heather — Sat, 07 May 2011 10:28:31 +0000

Heather (Thomas Vuillermet) explique quelques bases du webdesign dans un tutoriel théorique.

Bonjour à tous, voilà un petit dossier pour vous parler de méthodologie et de théorie, en matière de webdesign. Je pense que si vous en êtes à lire ceci, c’est que le domaine vous intéresse et que vous avez pu observer durant de longues années les sites web sur lesquels vous êtes tombés.

Je ne prétends pas être expert en la matière, loin de là , simplement, il y a 2-3 ans, un tutoriel de ce style m’aurait été d’une grande aide. Et par conséquent, si ce document peut vous être utile, j’en serais ravi.

Un point sur vous.

Le webdesign est un métier, et il est très important de prendre l’approche qu’il faut avec ce mot là . Un métier s’apprend plutôt facilement de nos jours. On peut en conclure que l’apprentissage est une chose très rapide, mais c’est la correction de vos multiples défauts qui peut prendre le temps d’une vie.
Je veux dire par là qu’il est bien plus facile de juger un webdesign correctement que d’en faire un correctement !

Un point sur le Design

Design veut dire « concevoir, réaliser ». Et c’est ce que beaucoup de graphistes oublient. Ce n’est pas simplement « je met ce titre en rouge, et ce texte en Helvetica parce que ça rendra bien ». Ce qui intéresse un designer, c’est « Quelle est la couleur la plus adaptée pour ce titre, et quelle typographie pour ce texte ? » Derrière un design graphique, une recherche est à faire en amont, tant au niveau symbolique, qu’au niveau lisibilité, cohérence, et utilisabilité. Je pense que pour remplir ce type de « devoir » envers la cible le minimum est un message clair, concis et une création simple. Plus le visuel est chargé, plus il est difficile à lire, et le but premier est déjà raté.

Et aujourd’hui, les communautés graphiques, les écoles, les magazines, ont tendance à « donner » une technique plutôt poussée pour apprendre à maitriser des logiciels, mais très peu abordent le sujet de la simplicité du message et de sa mise en forme. De la même manière, les gens qui ont besoin d’une identité graphique ou d’un webdesign par exemple, en oublient de vérifier si le prestataire à qui ils parlent a une réelle technique et culture graphique, si c’est bien un designer, et non un « artiste » qui bidouille quelques lignes de code. Tout le monde tend à oublier la philosophie du design.

La perfection ne réside pas dans la beauté puisqu’elle est subjective, mais dans la justification, et la réalisation de ce qu’on lui demande.

Le design graphique, c’est de la psychologie, aussi.

Quelle type de réaction est sensé se produire chez un utilisateur si j’utilise cette typographie sur ce fond ? A quoi s’attend l’utilisateur sur cette page ? La prévisibilité est à prendre en compte de manière à combler les attentes de l’utilisateur.

La simplicité d’utilisation ne doit pas être délaissée au profit d’enjolivures visuelles inaptes au design. Nous ne faisons pas de décoration, ni d’illustration. (Loin de moi l’idée de dénigrer les illustrateurs, mais c’est un autre métier).

Et même sans parler de visuels complètement « cheap », la typographie et la mise en page sont généralement bâclées, puisqu’irréfléchies.

Donc voici une petite (toute petite) liste, qui vous permettra de suivre une procédure « normale » de conception d’un webdesign. Je ne parlerai donc pas de pratique ici, mais uniquement de théorie. Je veux aussi vous dire qu’il est préférable de connaître toutes ces règles pour mieux les enfreindre, il est inutile de dire que mon coté « minimaliste » que je mets en avant n’est pas sensé vous empêcher de surprendre avec ce que vous voulez, tant que c’est de bon gout, et justifié !

Quelle type de personne mon site cible-t-il ?

Si vous parlez de hi-tech, ou si vous parlez de bateau, votre site n’aura pas la même portée. Par conséquent, il vous faut définir une cible, qui pourrait s’avérer utile de connaitre lors des prochains choix. Ce qui peut nous intéresser par exemple, c’est si votre cible serait potentiellement un utilisateur averti, équipée d’un écran avec une bonne résolution et d’un navigateur de qualité, ou si elle serait capable de qualifier votre contenu d’important, au point de peut-être pouvoir justifier quelques publicités par exemple.
De la même manière, vous pourrez vous engager aux cotés d’un web qui va de l’avant, en avertissant les utilisateurs d’IE que leurs navigateurs ne vaut pas grand chose, mais là n’est pas le débat. De la même manière, votre cible ( et par conséquent votre contenu ) est sensé influencer votre contenu.

Comme lors de la création d’un logotype par exemple, si vous voulez véhiculer une image « sérieuse », autant adopter un style graphique simple, tandis qu’un site qui se veut proche de ses utilisateurs, complice, peut se permettre plus de fioritures !

Le contenu

Il est très important de faire un point sur le contenu avant de commencer quoi que ce soit. Je ne pense pas qu’il soit nécessaire de préciser grand chose de plus à ce sujet, mais il faut avoir en tête ce point là pour toutes les autres étapes.

L’arborescence

Voilà , le premier point qui est généralement négligé.
L’arborescence se traduit par l’organisation de vos pages. A partir de quelle page puis-je aller à telle autre ? Cette étape est généralement mentale, naturelle, pour un site de petite taille, mais prend de l’importance pour des sites dotés d’une arborescence un peu plus complexe.
S’il y a beaucoup de page, comment vais-je organiser mon/mes menu(s) ? Dois-je les diviser en catégories ? Quelle catégorie mérite d’apparaître dans les menus principaux ?

Le Zoning

Voilà donc la première étape que l’on pourrait qualifier de « graphique ». Par gain de temps, je conseillerais de faire cette étape sur papier. C’est l’étape où on délimite pour chaque page des zones correspondantes aux menus, aux contenus, au logo,… Si elles changent de contenu, elles sont susceptibles de changer de mise en forme. Pensez avant tout utilisabilité : un menu est d’autant plus utile s’il est bien placé tout comme le contenu. Beaucoup de webdesigners utilisent des « grilles » pour cette étape. Certains utilisent même le nombre d’or, pour construire des pages harmonieuses dans la construction, chacun sa technique, mais voilà une étape à ne pas négliger.
Passons ensuite à une étape un peu plus intéressante graphiquement.

Exemple de zoning basé sur le nombre d’or (en largeur uniquement)

Le Contraste

Voilà la base du design. Le contraste permet de mettre en valeur certaines choses, sans pour autant mettre des petites fleurs et des effets biseautés sur chaque élément graphique.
Il y a 6 formes de contrastes importantes : le contraste de forme, de rotation, de taille, de couleur, de position et de texture.
Il est important « d’imposer » un « code », que vous partagerez implicitement avec les utilisateurs, pour qu’ils ne soient pas perdus à chaque nouveau clic.

La couleur et la forme

Il est primordial d’avoir une bonne connaissance en symbolique notamment pour tout ce qui concerne les formes et les couleurs. Un site qui présentera des formes arrondies et des couleurs pastels sera plutôt destiné à des femmes, tandis qu’un site en noir et blanc, avec des formes un peu plus brutales, se verra en train de passer un message de sérieux, à qui l’ont fait plus facilement confiance. C’est tant de choses qu’analysent, inconsciemment ou pas, chaque utilisateur à sa manière. Faites attention quand même, dans d’autres pays, les symboles peuvent changer radicalement !

Le code que vous établirez avec vos utilisateur, au niveau du contraste, des formes et des couleurs, s’appelle l’identité visuelle.

La typographie

La typographie possède des règles, qui résultent de constats qu’ont fait certains typographes. Avant d’utiliser une typographie, réfléchissez comme le créateur de cette fonte : dans quel but a-t-elle été crée ? Quel message transmet-elle ? Par exemple, Futura est une police géométrique, elle impose à l’utilisateur un peu plus de temps de lecture pour comprendre le sens des mots. Ce genre de police est complètement adaptée à un titre ou un logo. Les empattements donnent un coté traditionnel, tandis qu’une typographie linéale de type Verdana donnera un effet plus récent, plus numérique.

En cours, ma professeur m’a conseillé de n’utiliser que du Verdana, sur du support numérique. Cette typographie a été créée pour le web, et elle a fait ses preuves sur ce support, mais je ne suis pas pour un web ou il n’y aurait que du Verdana partout, par conséquent, faites vos choix, mais pour moi, c’est tout vu !

L’échelle typographique est quelque chose de très important. La plus utilisée est celle que vous voyez dans Photoshop, ou la plupart des éditeurs de textes. Elle a été créée au 16ème siècle. Mais vous êtes libre d’en créer une et de vous y tenir, elle vous permettra de hiérarchiser l’information et de faciliter la mise en page et la lecture.

Les marges et gouttière, l’interlignage, la justification, l’emphase, la ponctuation flottante… Ce sont pleins de paramètres à prendre en compte pour une mise en page qui en vaille la peine ! Que ce soit encore une fois en webdesign, ou dans la construction de n’importe quel document voué à être lu. Le nombre de caractères par ligne est aussi à prendre en compte. Par exemple, il est prouvé qu’une ligne idéale à la lecture sur un écran est composé de moins d’une centaine de caractères.

Tout ceci se gère en CSS, et il est important d’avoir de bonnes bases en tant que webdesigner.

Voilà par exemple le site d’une très bonne agence de communication (selon moi) basée en Suède :

Vous noterez la simplicité du site. Il semblerait que leur rapport sidebar/contenu soit proche du nombre d’or, aussi.

La tendance en ce moment, c’est une typographie vraiment au centre du webdesign, relativement énorme. On aime ou on n’aime pas, mais ça fonctionne quand même pas mal. Voici 2 exemples, l’un plutôt épuré, l’autre un peu moins.

Le Développement

Dans l’idéal, un développeur confirmé développera pour vous, mais vous devez au moins discuter avec lui, pour être sur que le design finira comme vous l’avez conçu. Notamment au niveau de la typographie, car un intégrateur ne fait pas forcément attention à tous les paramètres que vous utilisez dans votre maquette.
Sinon, c’est à vous que revient la lourde tâche de prendre encore plus de décisions.
Pour quel navigateur vais-je devoir perfectionner mon site web ?
Mon site est-t-il accessible, et valide W3C ? Quelle tolérance dois-je avoir vis à vis des résolutions d’écran ? Quel technologies/CMS puis-je me permettre d’utiliser ? Comment puis-je optimiser mon SEO (Search Engine Optimization) ? Quel hébergement est le plus approprié ? Vous vous devez ensuite de faire les tests en conséquence et travailler sur l’évolution possible du site. Mais ce sont d’autres compétences, et je n’en parlerai pas aujourd’hui.

Conclusion

Voilà ! Je pense qu’on a fait le tour des choses les plus importantes. En gardant en tête ce processus de création et en travaillant les points ou vous vous sentez faible, vos créations seront bien plus élaborées et finies que la plupart des webdesigns (amateur ou non) que l’on peut observer.

J’espère que ce petit tutoriel aura été instructif pour vous.
Je prends en compte tout les commentaires constructifs, pour pouvoir répondre peut-être plus complètement et concrètement à d’autres besoins de connaissances !

Au plaisir,

Créez une animation typographique en vidéo 1/2 : Photoshop

lhenalee — Sun, 01 May 2011 12:06:42 +0000

Lhenalee (Thomas Normanno) vous guide dans la création d’une animation typographique en vidéo avec Photoshop et After Effects.

Bonjour à tous ! Dans la première partie de ce tutoriel, nous allons concevoir un effet typographique à l’aide de Photoshop CS5 et After Effects. Ensuite dans la seconde partie, nous réaliserons une animation sous After Effects à partir de la maquette réalisée dans la partie 1.

Dans cette première partie nous utiliserons tout d’abord Photoshop pour concevoir notre typographie, et nous verrons ensuite comment importer ce PSD dans After Effects avec tout ses calques et groupes ! Il est donc bien plus pratique de commencer les visuels/maquettes dans Photoshop pour les animer ou les retravailler par la suite dans After Effects !

Vous pouvez voir les résultats ci-dessous :

Résultat final du tutoriel (partie 1/2)

Résultat final du tutoriel en vidéo (partie 2/2)

Mais un peu de patience et commençons en ouvrant Photoshop ! :)

Étape 1 : Commencer à créer le fond

Nous allons commencer par créer notre nouveau document. Le choix de la résolution est très important ! En effet, la maquette sera importée sous After Effects pour être retravaillée et animée dans la Partie II. De ce fait, je vais choisir une résolution de 1280 x 720 qui est une résolution HD.

- Double cliquez sur le calque arrière plan que vous renommez « Fond« , et remplissez (MAJ + F5) ce calque avec la couleur #201e1b. Appliquez un « Filtre => Bruit => Ajout de bruit, avec une valeur comprise entre 1 et 2« .

- Créez un nouveau calque « Dégradé Blanc« , prenez ensuite l’outil dégradé (G), modifiez ensuite les réglages de sorte à avoir un dégradé de blanc avec une opacité de 100% qui va au blanc, opacité 0%. Et sélectionnez le « mode radial« . Faites ensuite un dégradé du milieu haut jusqu’à environ 75% de la hauteur et passez le calque en mode « Lumière tamisée« . Dupliquez maintenant ce calque (CTRL + J) et appliquez lui un « FIltre => Atténuation => Flou gaussien ( 250 pixels)« .

- Faites un nouveau calque « Black ». Prenez l’outil ellispe (m) puis tracez un cercle qui recouvre 80-90% de l’image et qui part du milieu de celle-ci tout en restant appuyé sur ALT. Ensuite inversez la sélection « CTRL + MAJ + I », puis ajoutez un contour progressif « ALT + CTRL D » de 250 pixels. Remplissez (MAJ + F5) avec la couleur noir et passez le calque en mode « Lumière tamisée ». Dupliquez ce calque et baissez son opacité à 50%.
- Sélectionnez maintenant tous vos calques et groupez-les (CTRL + G). Nommez le groupe « Background« .

Tout ça pour un simple fond ? Oui ! Ne perdez pas espoir, passons maintenant à la suite.

Résultat final du fond

Étape 2 : Création du texte secondaire

Passons maintenant à la création du texte qui se trouve au-dessus et en-dessous du principal. Pour la rédaction de ce tutoriel, j’ai décidé d’écrire les mots-clés suivants (« Photoshop », « After Effects », « Motion design » et sur « Livingtuts »…). Je vous fais confiance pour personnaliser ce tutoriel.

- Commencez par écrire le texte avec l’outil « Texte Horizontal (T)« . Dans mon exemple : « PHOTOSHOP – AFTER EFFECTS – MOTION DESIGN« .
- Ouvrez la fenêtre « Caractère« , celle-ci va nous permettre de configurer notre texte. J’ai utilisé la police « Champagne & Limousines » que vous pouvez trouver sur Dafont. Vous pouvez regarder les différents réglages sur l’image ci-dessous.

- Double cliquez maintenant sur le calque texte et dans le style de calque faites les mêmes réglages que l’image ci -dessous.

- Créez un nouveau calque « lueur » et prenez l’outil ellipse (m) puis tracez un cercle ovale qui recouvre la moitié de la hauteur du texte et toute la largeur. Remplissez (MAJ + F5) la sélection de blanc et passez le calque en mode « Lumière tamisée« . Nous allons maintenant transformer ce calque en masque d’écrêtage. Retenez bien cette technique car je pense qu’elle peut vous être utile dans vos prochaines créations.

Le masque d’écrêtage permet à un calque de prendre la forme du calque juste en-dessous. Il s’active en pressant (CTRL + ALT + G) ou dans les menus du haut (Calque => Créer un masque d’écrêtage). Dupliquez (CTRL + J) maintenant ce calque et repassez-le en masque d’écrêtage (CTRL + ALT + G) et baissez son opacité à 70%.

- Reprenez le calque texte et dupliquez-le. Passez-le en suite au-dessus de tous les calques (Pas de panique ! les masques d’écrêtage vont s’enlever, pensez à les remettre !:))
Passez ensuite ce nouveau calque texte en mode incrustation et baissez son opacité à 60%.
Répétez l’étape ou dupliquez tous les calques et renommez le texte pour écrire le reste. N’oubliez pas de grouper vos calques pour ne pas vous perdre !
Voici le résultat que vous devriez obtenir à la fin de cette étape.

Résultat final du texte secondaire

Étape 3 : Création de la typo principal

Nous allons maintenant passer au texte principal, pas une minute à perdre, c’est parti !

-Créez un nouveau texte. Dans l’exemple, nous écrirons « Tutoriel » mais une fois de plus, libre à vous d’écrire ce qui vous passe par la tête Centrez celui-ci et appliquez les mêmes réglages présents ci-dessous. Vous pouvez télécharger la police « Bebas » sur Dafont.

Dupliquez le texte, et masquez le calque texte tout en haut. Sur le calque texte en dessous appliquez un nouveau style de calque :

- Incrustation couleur : #c1913e.

- Contour : Taille => 2 px et couleur => #c1913e.

Nous allons maintenant créer des calques à partir des effets appliqués. Cliquez (droit) sur les effets et sélectionnez « Créer des calques« , vous avez maintenant deux calques supplémentaires que nous fusionnons avec le calque texte. Nous appliquons un dernier effet à celui-ci : Ombre portée : Mode de fusion => Normal, Opacité => 86, Angle=> 120 , Distance=> 6, Maigri=> 0, Taille=> 9.

Affichez ensuite le calque texte du haut et changez la couleur de la typo par #4f8e85. Ajoutez un style de calque :

- Ombre portée : Mode de fusion => Normal, Opacité => 100, Angle=> 120 , Distance=> 1, Maigri=> 0, Taille=> 1.

- Ombre interne : Mode de fusion => Normal, Opacité => 75, Angle=> 120 , Distance=> 1, Maigri=> 0, Taille=> 1.

Renommez maintenant les calques de texte : « Tutoriel face » pour le calque positionné tout en haut et « Tutoriel dos » pour le calque en dessous.

Il est maintenant temps de texturer tout ca ! Prenez la texture fournie dans les fichiers sources ou encore une texture de votre choix (Mur, béton, etc) et placez là au-dessus du calque « Tutoriel face« , mettez le calque en mode « Incrustation » et passez le en masque d’écrêtage. Dans le panneau « Teinte/Saturation« , baissez la saturation à -100%.

Nous allons maintenant donner un peu plus de relief et de contraste à cette typo, rien de plus simple. Créez un nouveau calque au dessus de la texture et passez le en « masque d’écrêtage » et en mode de fusion « Lumière tamisée« .
Vous allez maintenant peindre par dessus avec une brush abstraite comme des nuages (La première brush trouvée sur Google correspond parfaitement ) en noir pour accentuer les couleurs et en blanc pour éclaircir.
L’utilisation d’une tablette graphique est un plus dans cette étape. Une fois satisfait du résultat vous pouvez dupliquer ce calque et baisser son opacité à 40%.
On ajoute encore une nouvelle texture, il s’agit cette fois d’une texture de flamme disponible dans les fichiers sources ou bien vous en trouverez très facilement dans Google Image. Passez là en mode « Incrustation » avec une opacité de 40% et réglez la « teinte » à -38 et la « saturation » à - 33.

Pour modifier légèrement les couleurs vous pouvez créer un nouveau calque de réglage => Courbes, et modifier légèrement avec les trois courbes RVB. N’oubliez pas de mettre ce calque en « masque d’écrêtage ».

Vous pouvez répéter l’étape qui consiste à utiliser les textures sur le calque « Tutoriel dos« .

Pour finir, créez un calque « Trait haut » et à l’aide de la plume, tracez une droite qui prend la largeur de l’image. Réglez votre pinceau (Epaisseur : 1 ou 2 px, opacité à 100% et dureté à 100%.) Dans le panneau forme, cochez « Dynamique de la forme ». Allez ensuite dans le panneau « Tracé » et cliquez (Droit) sur votre tracé => « Contour du tracé« . Prenez l’outil « Forme » et cochez « Simulez la pression«

Appliquez une ombre portée : Normal, Opacité => 100, Angle=> 90, Distance=> 2, Maigri=> 0, Taille=> 1.

Dupliquez le calque et renommez le « Tracé Bas ». Déplacez-le en dessous du texte principal.

Voici à quoi devrait ressembler votre panneau de calque ainsi que votre image à la fin de l’étape 3.

Résultat final de la typo principal

Étape 4 : Création des particules avec After Effects !

Attention, c’est maintenant que ça va se corser ! Commencez par ouvrir After Effects (Cs3-Cs4-Cs5) et assurez-vous d’avoir le plugin de Red Giant, Trapcode Particular que vous trouverez ici.

Nous allons créer toutes nos compositions dans un premier temps pour être tranquille par la suite.

-Créez trois « compositions » nommées « FX1« , « FX2« , « FX3 » avec les paramètres suivants :

-Nous allons maintenant importer le PSD crée précédemment, allez dans « Fichier » => « Importer » => « Fichier » ou « CTRL+I« . Sélectionnez votre PSD et utilisez les réglages suivants :

Voilà notre maquette est désormais disponible dans la fenêtre « Projet » et prête pour être travaillée avec After Effects sous forme de composition. Si vous avez bien nommé et groupé vos calques, vous aurez plus de facilité pour vous y retrouver.
Cependant, nous allons laisser notre maquette de coté pour l’instant, et nous allons commencer la création des particules.

- Allez dans la composition « Fx1 » et créez un nouveau solide (« Calque » => « Créer » => « Solide » ou « CTRL+Y ») que vous nommerez « Smoke ». Assurez-vous qu’il soit à la bonne résolution (1280×720) sinon cliquez sur « Créer taille de la composition« .
- Appliquons l’effet Particular à notre solide, « Effet » => « Trapcode » => « Particular« . Vous pouvez apercevoir tous les paramètres dans la fenêtre « Effet ». Vous pouvez vous amuser à déplier tous les onglets pour vous rendre compte de toutes les possibilités qu’offre ce plugin ! Pas de panique nous n’utiliserons pas tout.

- Il vous suffit de rentrer les mêmes réglages que ci-dessous :

-Dans la « timeline » déplacez vous à 3 sec, les particules agissent au cours du temps donc vous n’aurez aucun résultat si vous restez à 0 sec. Dupliquez le solide « Smoke« , « CTRL+D« . Vous devriez avoir une sorte de fumée bleue comme ceci :

-Nous allons maintenant créer des fines particules de lumière, créez un nouveau solide « CTRL+Y » que vous nommez « Etoile » et appliquez l’effet « Particular » et entrez les réglages suivants :

-Passez le solide en mode « Addition » et dupliquez le « CTRL+D« . Vous devriez maintenant avoir ceci :

- Nous avons terminé avec la composition « FX1« , passons tout de suite à la composition « FX2« . Nous allons réaliser un fil de particules qui suit un tracé, c’est une méthode très utilisée avec « Particular ».
- Créez un nouveau solide et à l’aide de l’outil « plume » (« G« ) tracez une courbe comme ci-dessous :

- Toujours dans la même composition, créez une nouvelle « lumière » (« Calque » => « Créer » => « Lumière« ) et nommez là « Emit« . Sélectionnez le solide noir où se trouve le tracé et appuyez sur la touche « M« . Vous devriez maintenant voir la propriété « tracé du masque« , cliquez sur celle-ci et copiez la (« CTRL+C« ), vous pouvez supprimer le solide il ne nous sert plus à rien ! Sélectionnez maintenant la « lumière » « Emit« , cliquez sur « P » pour afficher l’option « Position » que l’on sélectionne aussitôt, et faites un petit collage « CTRL+V » ! A ce niveau,une petite explication me semble nécessaire.

L’étape que nous venons de réaliser est très simple, à partir d’un « masque » (Tracé à la plume) sur un solide nous avons copié les propriétés de ce tracé pour les transmettre à une lumière dans le but de l’animer ! Vous devez donc maintenant avoir une lumière constituée de trois images clé qui se déplace de 0 à 2sec (Faites glisser le curseur dans la timeline pour apprécier le résultat).

Vous l’aurez compris, la lumière va servir d’émetteur pour nos particules. Celle-ci vont suivre le chemin tracé par notre lumière.

- Créez un nouveau « solide » nommé « Fil » et appliquez l’effet « Particular« , pour lier les particules à la lumière, cochez « Light(s) » dans « Emitter Type« . Un message d’erreur devrait apparaître, cliquez sur « Options » et dans la fenêtre qui apparaît, écrivez le nom de votre « lumière« , à savoir « Emit« , dans la case de Gauche. Vos particules sont dorénavant complétement liées à notre lumière !

-Vous pouvez maintenant créer trois autres solides « Particules« , « Smoke » et « Fil2« . Vous pouvez retrouver les réglages des 4 solides ci-dessous (cliquez pour voir en grand) :

Une fois tous ces réglages appliqués, vous devriez avoir un résultat semblable à celui là :

-Copiez les 4 solides ainsi que la lumière et collez-les dans la composition « FX3« . Sur le solide lumière appuyez sur « U » (Raccourcis qui permet de voir toutes les images clé) et cliquez sur le chrono pour enlever celles-ci, nous allons en fait changer l’animation donc nous répétons l’étape qui consiste à créer un solide et un tracé pour ensuite l’appliquer à une lumière. Cette fois, vous allez faire un cercle avec l’outil « Ellipse ».

-Sélectionnez la « lumière« , appuyez sur « P » et faites « ALT + CLICK » sur le chrono du paramètre position, nous allons entrer une simple « expression » : Wiggle(100,150);
-Sélectionnez la dernière image clé et positionnez-là à 1 sec.

-Vous devriez normalement avoir un résultat plus ou moins proche de l’image ci-dessous ! :

Le tutoriel touche enfin à sa fin . Encore un peu de courage, nous y sommes presque !

- Créez une composition nommée « FX3.1 » dans laquelle vous glissez la composition « FX3« . Dupliquez « FX3« , cliquez droit sur celle-ci et faites « Géométire » => « Basculer Horizontalement« . Dupliquez ces deux compositions et redimensionnez-les en appuyant sur le raccourci « S » pour faire apparaitre l’option « Échelle«

Il ne nous reste plus qu’à compiler tout ça ensemble et faire quelques derniers réglages !
- Nous allons enfin ouvrir notre maquette . Dans la fenêtre projet, ouvrez la composition de votre maquette importée précédemment, dans mon cas, il s’agit de la composition « Crea ». Nous allons retrouver tous les éléments de notre PSD et si vous avez bien rangé celui-ci, vous ne devriez pas avoir de problème !

NB : Les groupes sous photoshop sont des compositions dans After.

- Il vous suffit simplement d’importer les compositions « FX1« , « FX2 » et « FX3.1 » et de les positionner juste au-dessus de la composition « Background« .
- Dupliquez « FX2 » et basculez-là horizontalement et verticalement et dupliquez « FX3.1« .

- Ajoutons un dernier effet, créez un nouveau solide blanc et appliquez lui l’effet « Bruit de turbulence » (Dans « Effet » => » Bruit et grain » ). Changez la valeur de « l’évolution » => 0x + 319 ° et dans « Transformation« , décochez « Echelle uniforme » et entrez la valeur de 1000 à « Hauteur d’échelle«

- Ensuite ajoutez l’effet « Volet linéaire » (Dans « Effet » => « Transitions » ). Changez les valeurs suivantes : « Pourcentage » => 60%, « Angle » => 0x +0 ° et « Contour progressif » => 375. Passez maintenant ce solide en mode « Incrustation« .

- N’oubliez pas de vous positionner à une seconde dans la timeline et décalez la composition « FX1 » de 1 à 2 sec vers la gauche de sorte à obtenir plus de particules ! Vous pouvez vous positionner à différents moments de la timeline pour avoir différentes images. Je vous encourage fortement à jouer avec toutes ces particules et de tester toutes les options qu’offre Trapcode Particular ! Pour exporter votre image, allez dans « Composition » => »Enregistrer l’image sous » => « Fichier« .
Une fenêtre « File d’attente de rendu » va apparaître, pour choisir la destination de notre PSD, cliquez sur le texte en orange à coté de « Destin » et sélectionnez votre destination et le nom de votre fichier. Vous pouvez maintenant cliquer sur rendu.

- Ouvrez le PSD, dupliquez l’image et passez-la en mode « Lumière Tamisée » et baissez l’opacité à 50%.

Félicitations si vous êtes arrivés jusqu’au bout de ce tutoriel, voici l’image finale :

Tout d’abord, j’espère que vous aurez apprécié ce tutoriel et surtout qu’il vous a permis de progresser et assimiler différentes techniques. J’ai essayé d’être le plus clair possible dans mes explications, n’hésitez surtout pas à poser des questions ! Je vous encourage aussi à me faire part de vos impressions, remarques, critiques, suggestions voire encouragements dans le but d’améliorer les prochains tutoriels
Prochainement dans la partie II, nous animerons tous ces éléments afin de créer un court opening d’une dizaine de seconde !

Je vous laisse donc patienter et je vous dit à la prochaine

Créer un site d`entreprise de A à Z 2/3 : Intégration HTML5 / CSS3

Design Spartan — Wed, 27 Apr 2011 19:35:56 +0000

Design Spartan (Gaétan Weltzer) vous montre comment créer un site d’entreprise de A à Z en commençant par la phase de réflexion puis le webdesign.

A lire avant de commencer

Page du tutoriel – ce qui a été crée dans Photoshop dans la première partie et ce que nous allons maintenant intégrer en HTML5/CSS3

Ce tutoriel est découpé en 3 parties :

- La réflexion puis le webdesign : élaboration de la charte graphique et du design du site Internet

- L’intégration HTML5/CSS3

- Le développement PHP/MySQL des front et back office (administration) - bientôt

2/3 : L’intégration en HTML5

Comme vous le savez, dans la première étape, nous avons réalisé la phase de réflexion ainsi que le webdesign de la page d’accueil. Dans le cadre du tutoriel, nous ne réaliserons que cette page étant donné que les autres pages en sont déclinées. Pour information, ce tutoriel est destiné à un public intermédiaire, je n’expliquerais donc pas depuis zéro comment fonctionne l’HTML ou encore le CSS.

Nous avions donc décidé dès le début du projet de nous orienter sur les technologies HTML et CSS pour l’intégration et la navigation sur le site. Comme c’est aujourd’hui dans l’air du temps, j’ai décidé de réaliser cette page (et donc le site fictif en entier) en HTML5. Cela permettra non seulement de voir le découpage, le balisage ainsi que la mise en forme du design, mais également de découvrir certaines nouveautés dans la façon de construire ces pages.

Le choix de l’HTML5 pour ce tutoriel s’impose de lui-même : si son but est de vous apprendre de nouvelles choses ou de parfaire vos connaissances, autant le faire avec les dernières technologies ! D’autant plus qu’elles peuvent en grande partie déjà être utilisées aujourd’hui comme nous allons le voir. Cela est tout de même à utiliser avec parcimonie car n’importe quel projet aujourd’hui ne pourra pas forcément jouir de l’HTML5/CSS3, tout comme certaines propriétés et nouveautés ne sont pas utilisables du tout pour le moment à cause des « vieux navigateurs ». Comme vous allez l’apprendre, beaucoup de problèmes peuvent être contournés. En route !

Note : Comme toujours, je ne m’occupe pas du tout d’Internet Explorer 6 dans le tutoriel.

Voici comment se déroulera l’intégration. Chaque intégrateur a sa propre méthodologie, la mienne est plus ou moins celle-ci :

- squelette HTML5 : écriture des balises, mise en place de la sémantique et du référencement naturel (je précise que je ne vais pas m’attarder dans ce tutoriel à optimiser le référencement car ce n’est pas son but)

- mise en page CSS3 : j’écris le CSS et je découpe les images du webdesign en même temps, en commençant du haut de la page vers le bas

- test et débogage : tester sur les différents navigateurs et régler les différences

Ce dont vous avez besoin :

Il n’y a pas de besoin particulier pour ce tutoriel si ce n’est :

- un éditeur de texte (Dreamweaver, Notepad, etc…),

- Photoshop pour découper la maquette

- de préférence plusieurs navigateurs (Firefox, Chrome, Safari, IE, etc…)

- deux typographies déjà utilisées précédemment à l’étape 1 (Melbourne ainsi que Ginko)

- des connaissances de base en HTML et CSS

Et c’est parti !

Etape 1 : Le découpage

En général je découpe la maquette en même temps que j’écris le CSS pour mettre en page le site mais pour être clair au début de ce tutoriel, voici comment la maquette a été découpé. Ce n’est pas compliqué, dans Photoshop à l’aide de l’outil Tranche, Sélection ou encore Recadrage, j’enregistre toutes mes images dans un format optimisé.

Qu’est-ce que j’entends par « optimisé » ? Tout simplement il s’agit de découper les images et images de fond de la meilleure taille possible afin de l’intégrer facilement en CSS. De même, souvent le choix entre le format Jpeg et PNG se pose. Il faut alors réfléchir à la contrainte d’intégration, de design et de poids de l’image.

Toutes les images du site découpées depuis la maquette et prêtes à l’emploi

Etape 2 : le squelette HTML5

On attaque ici un gros morceau ! Il faut d’une part comprendre la structure, le découpage en balises mais également ingérer les nouveautés de l’HTML5 en plus de la « logique sémantique« .

Comme vous avez dû en entendre parler, l’HTML 5 c’est plein de nouvelles choses :

- des nouvelles balises comme

- des nouvelles propriétés

- mais aussi une écriture qui respecte mieux la sémantique

Oui oui vous le savez déjà … Bon alors j’arrête de radoter et on passe à notre page d’accueil de Real Tea !

Avant d’attaquer le code, analysons la page

Etant donné que je code cette page en HTML5, j’ai préféré passer par une étape alternative afin de mieux comprendre la structure de notre page HTML. Cela m’a permis de réfléchir au découpage du site et notamment au choix des balises HTML5 les plus adaptées pour chaque bloc d’information.

Car oui, l’information est plus que jamais ce qui va orienter la structure de votre squelette HTML5 ! C’est ici pour moi que se trouve le plus grand changement. Je peux même parler de « chamboulement », mais heureusement tout s’apprend et les bénéfices sont nombreux !

Si je reprends ma maquette sous les yeux, voici ce que je peux en tirer en montrant tout de suite les balises les plus importantes pour ma page. Cela permet en un clin d’oeil de « prévoir » le code qui doit être écrit.

Structure non détaillée de notre page en HTML5

J’expliquerais au fur et à mesure les nouvelles balises HTML5 et si la question se pose, aussi pourquoi cette balise et pas une autre.

Le début est toujours le même : le markup

Voici les premières lignes de code de notre site avec quelques nouveautés qui seront expliquées en-dessous :




 
 
 Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com

On peut noter un DOCTYPE écrit beaucoup plus simplement qu’avant ainsi que la définition courte du charset utf-8.

Ensuite arrivent l’appel de notre CSS ainsi qu’une feuille de style alternative pour Internet Explorer dans les conditionnelles de forme .

Dernière chose très importante : les 2 scripts appelés. Ils nous permettent de contourner un des premiers problèmes liés à l’emploi de l’HTML5 aujourd’hui.

En effet, une des premières choses qu’on va vous dire est que les anciens navigateurs ne reconnaissent pas les nouvelles balises (comme

, etc…) et donc le navigateur ne pourra pas les interpréter et il n’affichera rien (ou une erreur). Et bien c’est vrai mais heureusement, le Javascript permet de contourner ce problème en forçant les navigateurs à reconnaître ces balises.

Sans rentrer dans les détails, je vous redirige vers HTML5 Shiv, projet de Google que nous utilisons ici. Voici donc un point-clé à retenir absolument si vous souhaitez créer des sites en HTML5. Ce markup classique et efficace permet de commencer n’importe quel projet HTML5 sans problème.

Le menu de navigation

Le menu de navigation est l’occasion pour nous de présenter la nouvelle balise

dont le nom parle presque de lui-même.

Terminé les

pour faire vos menus, maintenant il y a la balise

spécialement conçue pour englober les menus de navigation.

Le code n’est pas plus compliqué que ce qui suit :


 
 Accueil
 Real tea
 Nos thés
 Trouvez-nous
 Nous contacter

Dans cette nouvelle balise, on utilise une liste non ordonnée

Le haut du site : la zone forte

Là encore on intègre quelques nouveautés si vous jetez un oeil à l’image qu’on a vu au début présentant la structure de la page.

On a tout d’abord la partie tout en-haut contenant le logo et le visuel qui est le header de notre site. Quoi de plus logique que d’utiliser la nouvelle balise

à la place d’une div ?

Je n’ai même pas besoin de préciser à quoi sert cette balise, si ? Une précision tout de même alors : il peut y avoir plusieurs balises

dans la même page. En effet son emploi n’est pas restreint à la page entière mais peut aussi s’appliquer à d’autres balises. Comme on le verra plus tard, d’autres blocs peuvent avoir une entête (exemple : la balise

Le logo est placé dans une balise puisqu’il sert aussi de lien vers la page d’accueil dans un soucis ergonomique.

Note : La div « container » ne sert ici qu’à la mise en page comme on le verra plus tard. Sémantiquement elle n’a aucun apport.

Sous le header nous avons la zone forte qui contient la photo de la tasse de thé, le gros titre ainsi que 3 blocs de texte.




  
    
    
    Découvrir nos thés

    
  

  
   75 variétés de thé
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.
  

  
   Des thés de Chine
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  

  
   Des conseils détente
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in..

Il y a plusieurs choses à relever ici.

La première est que toute cette partie est contenue dans une balise
qui comme son nom l’indique représente une section de la page distincte du reste. Elle sert simplement à découper les portions de la page (lorsqu’aucun autre type ne convient mieux comme
,
, etc…).
Dans cette
, nous avons un
(et oui comme je l’expliquais au-dessus, il peut y avoir plusieurs headers dans une même page). Pourquoi cette balise
? Tout simplement car si on isole la
du reste de la page (comme si elle était la page entière), nous avons au début une image plus un gros titre qui sert ici parfaitement de header (=entête) au bloc.
L’emploi de la balise
: elle sert à englober un contenu qui n’est pas indispensable à la page et est souvent associé à une légende (pas dans notre cas)

Et juste en-dessous, plutôt que de faire 3 div pour les 3 colonnes de contenu, la nouvelle balise
a toute son utilité.

Quelques mots sur la balise

: En des termes simples, la balise

contient toute forme de texte pouvant être assimilée à un article et pouvant être lu hors du contexte de la page sans perdre son intégrité. Par exemple : article de blog, commentaire d’un blog, texte explicatif… Une astuce pour utiliser cette balise : si votre texte contient au moins un titre et un (ou plusieurs) paragraphe et qu’il pourrait très bien être lu dans un flux RSS ou encore partagé sur unr éseau social sans perdre son sens et son intégrité, alors il s’agit d’un

Autre information concernant la balise

: je le répète afin que cela soit clair, même une balise

peut contenir plusieurs types de balises pour structurer son contenu :

,

, … mais aussi un