Spartan (Gaétan Weltzer) montre les principales étapes de création d’une photomanipulation complexe avec Photoshop.

Introduction

Note 1 : Ce tutoriel a pour but de montrer et d’expliquer les étapes de création de cette image. Ce tutoriel est orienté pour utilisateurs avancés voire experts, je ne rentre pas dans les détails mais j’aborde la méthodologie et les principales étapes.

Note 2 : Le PSD à télécharger avec ce tutoriel (pour les inscrits) est une version réduite et largement simplifiée du PSD original, j’espère qu’il vous permettra de mieux comprendre la construction de l’image.

Note 3 : Le PSD à télécharger sert uniquement à apprendre et à comprendre. Il est protégé par le droit d’auteur et vous n’êtes pas autorisé à le modifier ou l’utiliser pour vos propres créations, partiellement ou totalement.

Avant toute chose, il me semble important d’expliquer le contexte de cette création. En effet, il ne s’agit pas d’une photomanipulation personnelle réalisée pour le tutoriel mais d’un projet d’illustration professionnel avec une ligne directrice à suivre et des contraintes. Réalisée pour l’association Eux pour Eux, la contrainte était d’utiliser la photo de Vanessa Demouy, personnalité française, qui m’a été fournie par le photographe Julien Bands. La photographie m’a donc été livrée volontairement « brute », sans retouche afin d’avoir le maximum de liberté.

 

Photographie de base © Julien Bands

A partir de cette photographie, il fallait développer une création originale, imaginer un univers tout en gardant la personnalité en photographie reconnaissable. Il fallait donc en tenir compte dans la composition et que cela cadre avec la perspective du décor. Autant de choses qui sont venus relever le défi pour la réalisation de cette photomanipulation :

Résultat final du tutoriel

Etape 1 : le croquis

Après avoir ouvert Photoshop et crée un nouveau document au format d’impression (environ A4), j’ai laissé libre court à mon imagination en peignant tout et n’importe quoi au pinceau. Je n’avais pas encore d’idée précise de la création.

Puis l’idée d’une création très colorée avec un navire volant m’est apparue :

Toujours avec le pinceau j’ai continué à tâtonnement de peindre la scène. Très tôt j’ai ajouté la personnalité détourée dans mon document. Comme je l’ai dit plus haut, elle est l’élément-clé de la composition, il faut donc en tenir compte dès le début. Il aurait été problématique qu’après plusieurs heures de travail je me rende compte que le personnage n’a plus de place ou qu’il s’intègre mal dans la création. D’ailleurs la lumière qui l’éclaire par l’arrière gauche correspond à peu près avec l’emplacement de la source de lumière principale du décor (derrière le bateau).

Le chemin sur lequel repose la femme et qui va jusqu’au navire est très important car il permet de relier le premier plan avec l’arrière-plan et de guider l’œil du spectateur dans la création. Ainsi elle n’est pas déconnectée de la scène et on peut imaginer qu’elle est descendue du navire par ce chemin et s’apprête à débuter une nouvelle aventure. Cela ajoute de l’intérêt visuel et aide à raconter une histoire.

A part la femme détourée qui a reçu un coup de Courbes pour réduire les rouges trop présents, tout le reste a été fait rapidement avec l’outil Pinceau. La femme a d’ailleurs tout de suite été retouchée au niveau des défauts du visage et quelques autres petits soucis, cela sans exagération.

J’ai glissé une photo d’aurore boréale en Superposition en haut à droite dans le ciel afin d’avoir plus tard une transition agréable entre l’eau et le ciel. Je détaille un peu plus la scène jusqu’à être satisfait de la tournure des choses et passer aux étapes suivantes :

A ce stade, il est intéressant de remarquer que 80% de la création est déjà posée : composition, couleur, placement du personnage, du navire, etc… Au final les étapes suivantes ne sont plus que du remplacement et du détail. A la fin de cette étape cruciale, on comprend déjà l’image, la majorité des informations sont présentes. Cela permet notamment au client de comprendre très tôt à quoi ressemblera la création finale.
 

Etape 2 : Utilisation des photos

Le navire

Ma scène est prête, je n’ai plus qu’à « passer au propre ». Je décide de chercher une photographie de navire collant à peu près à mon angle de vue et de l’incorporer à ma création. Après une longue recherche, c’est finalement un rendu 3D qui satisfera mes besoins.

Perspective de la scène – à ce stade le croquis du navire ne la respecte pas mais j’ai suivi ces repères pour placer proprement mon navire (cf image suivante)

Après un classique détourage, je place la navire dans le fond et je le transforme manuellement pour que sa perspective colle mieux à celle de ma scène. Sur l’image de base, le bas du navire était caché par l’océan, ce qui me contraindra plus tard à repeindre cette partie manquante. A fin de mieux intégrer le bateau à la lumière très particulière et colorée de ma scène, j’utilise de nombreux calques de réglages : Courbes de réglage, calques en mode Incrustation, Superposition, etc…

Je gomme plusieurs parties du navires qui ne sont pas nécessaires voire dérangeantes et je décide de garder l’effet translucide des voiles que j’avais trouvé en expérimentant sur mon croquis à l’étape 1. Je supprime donc les voiles de la photo originale, je les duplique et les place en mode Superposition. Après un long tâtonnement dans les réglages et les couleurs du calque, j’arrive finalement à obtenir l’effet voulu.

Le mur d’eau

Impatient de rendre les murs d’eau réalistes, je me dépêche d’ajouter de la texture et du détail à la partie de droite. J’ai téléchargé plusieurs photos de houle et de vagues que j’ai utilisé dans l’image. Détourées, distordues et transformées pour correspondre aux dimensions de mon mur d’eau, je place chaque calque selon plusieurs modes jusqu’à obtenir le bon réglage : Incrustation et Superposition notamment. Je prends soin avec un masque d’opacité de ne garder que les parties voulues et je repasse au pinceau sur un calque en Incrustation par-dessus pour éclaircir certaines zones de l’eau afin de garder cet effet lumineux. Cette partie s’est au début avérée beaucoup plus difficile que ce que je ne pensais.

Etape 3

Le fond

De la même manière qu’à droite, je commence à rendre le mur d’eau de gauche réaliste à l’aide de textures photographiques. Pour le haut des murs d’eau, je plaque une texture d’éclaboussures d’eau passée en mode Superposition avec comme toujours un masque d’opacité pour ne conserver que les parties voulues. J’ai ensuite travaillé le fond pour avoir plus de profondeur et un point de fuite qui attire l’œil.

Le navire

Je corrige encore un peu plus la perspective du navire pour que l’arrière rejoigne presque le point de fuite. J’ai également rapidement repeint le bas du navire qui manquait à l’origine et amélioré son intégration (lumière et couleur).

Le personnage

Il est grand temps que je m’attaque un peu plus à l’élément le plus important de la scène : la femme au premier plan. Son visage a déjà été retouché et il faut maintenant mieux l’intégrer : j’ai donc travailler à faire concorder la lumière qui la frappe avec celle de la scène. J’ai donc éclairci sa veste très sombre ainsi que tout son côté gauche qui reçoit une forte lumière bleutée. De l’autre côté une couleur rose/violette vient l’éclairer et ajouter du contraste. Plusieurs calques ont été utilisés afin d’obtenir un effet propre mais comme souvent c’est à l’aide de calques en Incrustation et Superposition placés en écrêtage que l’effet a été obtenu.

Etape 4 : Plus de profondeur et de détails

Je constate que l’image fait encore trop plate et il est difficile d’évaluer l’échelle et la distance du bateau à cause de l’absence de repères reconnaissables (tels que des immeubles, arbres, personnes, etc…). Je décide donc d’augmenter la profondeur de façon drastique en peignant sur un nouveau calque une perspective atmosphérique sur la partie lointaine (navire et bout du mur d’eau).

Je rajoute également quelques dauphins accompagnant le navire dans sa balade.

Etape 5 : Le chemin et plus de détails

La main problématique

Après une longue réflexion sur ce que j’allais faire de la main droite de Vanessa qui était coupée et inutilisable, j’eus l’idée de lui faire tenir une torche enflammée. Pour cela, rien de sorcier : je télécharge une main qui colle parfaitement à l’angle de vue, je télécharge une torche et j’intègre les deux à la création après avoir gommé l’ancienne main. Pour finir, j’ajoute une photo de flamme retouchée pour qu’elle colle parfaitement à l’image dont le calque est passé en mode Superposition.

Le chemin

Note : Toute cette étape est laissée « non écrasée » dans le PSD afin de comprendre toute la construction du chemin de verre

J’attaque enfin le chemin reliant le personnage au navire du fond. Vous pouvez voir en bas que j’ai d’abord testé de fines marches que j’ai rapidement abandonné. Il y a toujours une part d’expérimentation dans chaque création.

Test d’un chemin de verre rapidement abandonné

Voyons ensemble le détail de création des marches (aidez-vous du PSD à télécharger gratuitement au haut du tutoriel pour bien comprendre) :

1. Sur un nouveau calque, je commence par créer la forme du chemin avec l’outil Plume. Je passe le calque en Superposition et je diminue l’opacité à 60%.

 
2. Notez bien que tous les calques suivants sont passés en écrêtage du premier calque afin de ne faire effet que dans la forme du premier calque (tout ce qui dépasse ne sera pas affiché). Le deuxième calque qui est donc en écrêtage est un calque Normal où j’ai tout simplement peint au pinceau la couleur des marches : le dégradé du violet en bas au jaune en passant par le cyan.

 
3. Sur deux nouveaux calques j’accentue avec le lasso polygonal et le pinceau le relief des marches en ajoutant de la lumière au niveau des arrêtes vers le navire. Ainsi, on comprend que certaines marches flottent au-dessus des autres et on gagne en réalisme.

 
4. J’ajoute ensuite de la texture en ajoutant en Incrustation une photographie en noir et blanc d’une texture de glace. Pour finir cette étape, je duplique tout le fond de ma création (bateau, eau, ciel) sur un nouveau calque que j’inverse verticalement. Une fois placé en calque d’écrêtage, j’obtiens ainsi le reflet du fond sur les marches. Il reste à gommer les parties non désirées et à baisser l’opacité.

 
5. Dernière touche : l’intégration de la femme sur la première marche. Sur un calque je rajoute une ombre faite au pinceau et sur un second je rajoute le reflet des chaussures de la femme comme à l’étape précédente (duplication de la femme, inversion verticale, opacité diminuée). La seule difficulté réside dans la déformation du reflet pour qu’il soit réaliste au niveau des chaussures.

 
6. Pour obtenir le relief du chemin, lui créer de l’épaisseur, la technique est simple : je duplique tous mes calques du chemin, je les décale de quelques pixels vers le bas et je crée le fin plan vertical qu’il manque en modifiant la forme des marches directement sur le calque du bas. Pour cela, je joins le bas avec le haut là où c’est nécessaire avec le lasso et un coup de pinceau. Si c’est un peu flou, le PSD vous éclairera sur cette étape.

 
Plus de détails par ci par là :

Etape 6 : Derniers réglages et fin du tutoriel

Au niveau de la flamme de la torche, un calque en Superposition permet de créer sa lueur avec quelques coups de pinceau orange.

Pour finir, un calque de vibrance est appliqué par-dessus tous les calques aux réglages suivants : Vibrance +62 et Saturation +33 à 90% d’opacité. En réalité ce calque était présent dès les toutes premières étapes mais il n’a pas bougé depuis, seulement réajusté à la fin.

Après quelques corrections et améliorations mineures, la création est terminée :

Résultat final du tutoriel

J’espère que ce tutoriel de haut niveau vous aura permis de comprendre les majeures étapes de création de cette photomanipulation complexe.

Arnaud STECKLE vous montre comment intégrer un design de site e-commerce avec du HTML5/CSS3 codé « à la main ».

Bonjour à tous ! Bienvenue dans la troisième partie de notre tutoriel e-commerce. Après avoir vu ensemble toute la phase d’organisation et de réflexion créative, la création du design avec Photoshop, nous allons à présent construire notre page d’accueil à partir du PSD. Allons-y c’est reparti pour la dernière ligne droite !

00 – Comment s’organiser ?

Pour revenir sur le déroulement global du projet, nous sommes à l’étape précédant le développement final du site basé probablement sur un CMS e-commerce comme Prestashop ou Magento par exemple. Je rappelle en même temps que le développement ne sera pas traité dans ce tutoriel. Nous allons simplement créer une intégration dite « statique », qui pourra être remise à un développeur pour la rendre dynamique.

Souvenez-vous, dès le début du projet nous avons décidé d’utiliser HTML5 et CSS3 pour créer la page d’accueil et donc tout le site Fine Cookies. C’est un choix évident aujourd’hui pour ce type de site dans le sens où HTML5 est massivement utilisé. Vous verrez que même si la spécification n’est pas officiellement validée, nous utiliserons des balises simples et adaptées pour construire notre squelette.

Nous utiliserons CSS3 pour simplifier la mise en forme de certains éléments, en utilisant des propriétés de basiques comme pour rendre des coins arrondis ou encore faire des animations au survol. Bien entendu, tous les navigateurs (hum surtout Internet Explorer 8 et 9 ) ne supporterons pas ces différentes propriétés. Même sans CSS3, le site devra rester accessible à 100% et fonctionnel pour les navigateurs plus anciens (jusqu’à Internet Explorer 8). Nous allons voir ensemble comment faire face aux différents problèmes que l’on peux rencontrer lors de l’intégration.

Il n’y a pas de méthode « standard » pour intégrer un site web. Il y a bien entendu des principes de base à respecter, mais chacun possède sa propre méthodologie. Pour une compréhension optimale du tutoriel par le plus grand nombre, nous allons coder « à la main », sans pre-processeur CSS (comme Sass ou Less par exemple). Je ne vais pas revenir sur les bases de l’HTML5 et du CSS3, ce tutoriel suppose que vous possédez déjà un niveau intermédiaire. Voici comment nous allons procéder :

Processus :

1. Découpage des images avec Photoshop.
2. Création du squelette HTML.
3. Création du CSS.
4. Test et débogage final.

Pré-requis :

• La maquette Photoshop de la page d’accueil Fine Cookies.
• Votre éditeur favori (Notepad++, Coda, Sublime Text 2…).
• Des connaissances en HTML et CSS.
• Un arborescence web pour ranger votre projet :

Je vous propose de créer 3 dossiers pour y ranger les fichiers CSS, les images, ainsi que les fichiers Javascript. Le fichier HTML sera quant à lui situé à la racine.

Le suspense a assez duré, c’est parti allons-y !

01 – Découpage des images avec Photoshop

Le découpage permet d’isoler les images qui constituent le site. Il suffit d’enregistrer les images dont vous avez besoin pour reproduire au pixel près la maquette Photoshop en CSS. Pour se faire, utilisez les outils de sélection et de recadrage. (Personnellement je préfère éviter l’outil Tranche).

Pensez à enregistrer les images en passant par Fichier > Enregistrer pour le web et les périphériques. À cette étape, projetez-vous déjà dans la future mise en page CSS. Réfléchissez bien à quelles images vous allez découper, quels éléments graphiques devez-vous prévoir pour les fonds par exemple et aussi à quels éléments peuvent être rendus en pur CSS.

Très important, utilisez toujours le format d’image le plus adéquat, avec l’image la plus optimisée possible.  J’entends par là des images légères, en .png si il est nécessaire d’avoir un fond transparent, en .gif si l’image comporte un faible nombre de couleurs, en .jpg si c’est une photo. C’est une des contraintes de l’intégration qu’il ne faut pas prendre à la légère.

Ci-dessus, toutes les images découpées et prêtes à l’emploi pour l’intégration. Elles sont placées dans un dossier images.  Dans ce dossier images, vous pouvez voir un dossier « produits ». Ce dossier contient les photos des produits présents sur le site :

Il est temps à présent de réfléchir à la structure HTML de notre page d’accueil.

02 – Création du squelette HTML

Ah nous y voilà ! Le squelette ! Comment procéder ? Quels éléments HTML5 allons-nous utiliser pour regrouper des éléments de même type ? Pour afficher correctement un titre ? Je vous conseille de prendre la maquette sous les yeux, afin d’analyser les différents blocs principaux. Après réflexion, on peux en déduire dans les grandes lignes un découpage de la façon suivante :

En utilisant cette méthode nous pouvons déjà apercevoir la structure de base de notre futur site web. Nous verrons en détail les différentes balises tout au long du processus d’intégration. Commençons par le haut de page pour descendre progressivement tout au long du site.

Le markup HTML de base :

<meta charset="utf-8" />
<meta name="description" content="Fine Cookies est la boutique en ligne du tutoriel Living Tuts" />

Fine Cookies, boutique en ligne
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]--><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 	<link href="http://fonts.googleapis.com/css?family=Overlock:400,700" rel="stylesheet" type="text/css" /> 	<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css" /> 	<link href="http://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" type="text/css" />

 	<link href="css/reset.css" rel="stylesheet" media="screen" /> 	<link href="css/style.css" rel="stylesheet" media="screen" /> <!--[if IE]>
  		<link rel="stylesheet" media="screen" href="css/ie.css"/>
  <![endif]-->
 	<link href="images/favicon-fine-cookie.gif" rel="shortcut icon" type="image/x-icon" />

Vive le doctype HTML5 ! Vous le connaissez maintenant mais il fait toujours plaisir à voir ! Simple à retenir, écrit en 5 secondes, voilà qui est efficace. C’est ainsi que débute une page HTML. Je précise ensuite l’encodage de la page en UTF-8 avec la balise meta charset. On remarque également sur cette balise que l’écriture est raccourcie par rapport a une balise Meta XHTML.

J’appelle ensuite un script Javascript conditionnel,  activé si le site est ouvert sur Internet Explorer 9 ou une version précédente. Ce script permet de contourner quelques problèmes liés à l’HTML5 : les anciens navigateurs ne reconnaissent pas les nouvelles balises (comme <nav> et <header> par exemple). Ce script permet de forcer le navigateur à reconnaître les balises et ainsi assurer la compatibilité du site.

Je charge également la librairie JQuery et un fichier Javascript personnel : hoverClass.js qui va permettre de gérer des effets de survol. Nous allons écrire ensemble ce fichier en fin de tutoriel. Suivent ensuite différentes balises <link> pour charger les polices utilisées sur le site depuis le service en ligne gratuit Google Fonts. Avec ces balises, les polices sont chargées directement dans votre site sans avoir besoin de stocker la police en local. C’est un gain de temps dans l’écriture future de votre CSS.

Attention tout de même, si un jour les serveurs Google Fonts sont HS, plus de polices sur votre site ! N’ayez crainte nous avons à faire à Google quand même !

Début du header et le sous-menu :

Nous entrons à présent dans le corps de notre page HTML. C’est n’est pas une image, c’est bien suite à la fermeture précédente de la balise <head> que nous ouvrons le <body> pour y construire le haut de notre site. Ici le header va englober tout le haut du site, avec les deux menus, et la partie de mise en avant produit. Vous allez comprendre pourquoi un peu plus tard dans la partie CSS… Rien n’est fait par hasard .

Allons-y, utilisons la balise HTML5 <header>. Cet élément est décrit comme un conteneur pour « un groupe d’outils d’introduction ou de navigation ». C’est donc exactement ce qu’il nous faut :

</pre>
<header><!--Début du haut de page-->
<div id="headContent">
<ul id="topLinks">
	<li> <span>Langue</span>
 <a href="#"><img title="Français" alt="Français" src="images/icon-fr.gif" /></a>
 <a href="#"><img title="English" alt="English" src="images/icon-gb.gif" /></a></li>
	<li><img title="Utilisateur" alt="Utilisateur" src="images/icon-user.png" />
 <a href="#">Connexion</a></li>
	<li id="panier"><img title="Panier" alt="Panier" src="images/icon-cart.png" />
 <a href="#">Mon panier (0)</a></li>
</ul>

Je déclare pour commencer une div#headContent pour servir de conteneur principal en plus du <header>. Certes en HTML cela peux paraitre inutile, nous avons <header> qui sert de conteneur. Mais vous allez voir à quel point cette petite <div> nous sera utile pour notre mise en page CSS.

La liste ensuite sert de base au petit menu en haut à droite du site. Souvenez-vous :

Le logo et le menu principal :

Dans l’ordre des choses, nous allons créer une structure pour notre logo et le menu principal. Le logo est déclaré avant le menu pour le placer plus logiquement par-dessus le menu principal en CSS. Pour le menu du site justement, j’utilise l’élément HTML5 <nav> pour contenir la liste de liens de navigation du site. J’aurai pu l’utiliser tout à l’heure sur le petit menu du haut, le résultat aurait été sémantiquement correct. Je préfère cependant clarifier les choses en le réservant à cette navigation principale.

<a id="logo" href="#">
  <img title="Fine Cookies" alt="Fine Cookies" src="images/logo-fine-cookies.png" />
</a></pre>
<nav><!--Dédut Menu Principal-->
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Nos biscuits</a></li>
	<li id="navFirst"><a href="#">Notre histoire</a></li>
	<li id="navSecond"><a href="#">Secrets de fabrication</a></li>
	<li><a href="#"> Nous contacter</a></li>
</ul>
</nav>
<pre><!--Fin menu Principal-->

Deux petites particularités a relever ici, les id sur deux éléments de la liste. Ils vont nous servir plus tard à séparer correctement le liens du menu de part et d’autre du logo. C’est une solution pour avoir une sémantique propre, en conservant tous les liens du menu dans la même liste. 

Le bloc de mise en avant produit et la fin du header :

Il est déjà plus que temps de finaliser notre header. Dernier élément à inclure, le bloc de mise en avant des produits. Il s’agit ici de déclarer les bonnes images et les bons éléments de texte, au bon endroit, pour pouvoir les placer correctement en CSS. On commence d’abord par la partie gauche, la tour de cookies, puis on déclare un bloc (#infosVisu) pour la partie de droite avec le texte.

</pre>
<div id="bigVisuel">
<img id="cookieTour" title="Massiv Pepit Cookie" alt="Massiv Pepit Cookie" src="images/img-cookie-tour.png" />
<div id="infosVisu">
<h1 class="fredokaFont">Massiv pepit
 <span>Pour les amoureux du chocolat</span></h1>
Découvrez le cookie Massiv Pepit, avec sa recette unique aux pépites de chocolat tellement généreuses que vous ne pourrez plus vous en passer !

 <img id="pepites" title="70% Cacao" alt="70% Cacao" src="images/img-pepites.png" />
 <a class="fredokaFont hoverBtn" id="btnGoCart" href="#">Miam, j’en profite !</a></div>
</div>
<pre>
<!--Fin du haut de page-->

La div#bigVisuel sert de conteneur au bloc. Nous allons nous en servir pour mettre la planche de support en image de fond en CSS. La div#infosVisu représente la partie droite. Comme nous pouvons le voir, elle contient les éléments texte, le visuel des pépites et le bouton d’ajout au panier. Celui-ci possède une classe .hoverBtn. Vous allez comprendre à quoi elle sert à la fin du tutoriel .

Début du contenu principal et bloc nouveaux produits :

Toujours en suivant notre cheminement, nous arrivons au niveau du bloc présentant les nouveaux produits. Changement radical après le header : nous sommes sur fond blanc. Chose importante à prendre en compte dans notre sémantique car nous attaquons une nouvelle partie. Nous sommes en présence de quatre individus de type cookies, alignés sur la même ligne. Que faire ? Je propose de créer un élément HTML5 <section> pour pouvoir les garder groupés. Rappel sur <section> : c’est un élément utilisé pour regrouper du contenu de manière thématique. Les produits présentés dans cette partie sont apparentés donc <section> est parfaitement adapté. Jetons un œil au code pour y voir plus clair :

</pre>
<div id="content"><section id="nouveauxProduits">
<h2 class="fredokaFont"><span>Si bons, si croustillants, craquez pour nos nouveaux biscuits</span></h2>
<article><a href="#"><img title="So Delicious" alt="So Delicious" src="images/produits/prod-big-sodelicious.jpg" /></a>
<h3 class="fredokaFont"><a href="#">So’ delicious</a></h3>
<a href="#">23€</a> les 500g

Totalement croustillant, le cookie So’delicious vous transportera dans cet élan de saveur, laissez-vous (...)</article><article><a href="#"><img title="Nature Spirit" alt="Nature Spirit" src="images/produits/prod-big-naturespirit.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Nature Spirit</a></h3>
<a href="#">10€</a> les 500g

Juste quelques pépites de chocolat pour vous faire subtilment frissonner à chaque bouchées.</article><article><a href="#"><img title="Butter & Pecan" alt="Butter & Pecan" src="images/produits/prod-big-butterandpecan.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Butter & Pecan</a></h3>
<a href="#">15€</a> les 500g

Simple, bon et essentiel, le cookie Butter & Pecan sans chocolat est idéal pour se faire plaisir en été.</article><article><a href="#"><img title="Cookie Dingler" alt="Cookie Dingler" src="images/produits/prod-big-cookiedingler.jpg" /></a>
<h3 class="fredokaFont"><a href="#">Cookie Dingler</a></h3>
<a href="#">30€</a> les 500g

Le cookie libéré ! Ne pas le laisser tomber, il est si fragile. À déguster du bout des doigts.</article>
<div class="cl"></div>
</section>

Quelques précisions :

• div#content : on déclare un bloc pour le contenu global du site.
• section#nouveauxProduits : la section qui va présenter les nouveaux produits.
• article : élément HTML5 qui permet de contenir toute forme de contenu « autonome ». Pour faire simple, utilisez cet élément pour du contenu pouvant être lu hors du contexte de la page, sans perdre son intégrité. Dans notre cas, les différents cookies peuvent être considérés comme des éléments <article>. Il contiennent chacun l’image du produit avec un lien, un titre de niveau <h3>, un paragraphe pour le prix et un autre pour la description.
• div.cl : une div générique qui va nous permettre en CSS de remettre les éléments en float, dans le flux de la page. Elle sera utilisée plusieurs fois dans notre squelette.

Souvenez-vous de la maquette :

L’argumentaire Fine Cookies :

Cette partie est assez similaire à la précédente. 4 blocs, contenus dans un bloc parent. La structure de base va donc être quasiment la même. Un élément <section> contenant des <article>.
Attention, par contre l’argumentaire comporte plus d’images que la partie précédente. Il faut tenir compte à la fois des numéros sous les images mais aussi des flèches entre les blocs. Comment faire pour intégrer tout cela facilement ? Regardez le code ci-dessous :

</pre>
<section id="presFinecookie">
<div id="presInt">
<h2 class="fredokaFont">Pourquoi sont-ils si savoureux ?  <span>Découvrez notre secret...</span></h2>
<article><img title="Des ingrédients soigneusement sélectionnés" alt="Des ingrédients soigneusement sélectionnés" src="images/img-1-ingredients.jpg" />
 <span class="number fredokaFont">1</span>
<h4 class="fredokaFont">Des ingrédients soigneusement sélectionnés</h4>
Fine Cookies prend le plus grand soin lors de la sélection de la matière première pour une qualité iréprochable du produit fini.</article><article><img title="Des recettes uniques depuis 1989" alt="Des recettes uniques depuis 1989" src="images/img-2-recettes.jpg" />
 <span class="number fredokaFont">2</span>
<h4 class="fredokaFont">Des recettes uniques depuis 1989</h4>
Toutes nos recettes sont basées sur les écrits légendaires de Don Cook, le fondateur même du Cookie à Paris en 1989.</article><article><img title="Une prépation 100 % à la main par nos patissiers" alt="Une prépation 100 % à la main par nos patissiers" src="images/img-3-preparation.jpg" />
 <span class="number fredokaFont">3</span>
<h4 class="fredokaFont">Une prépation 100 % à la main par nos patissiers</h4>
Pour garantir le meilleur résultat possible nos patissiers diplômés  préparent nos biscuits à la main. Du façonnage à la mise au four.</article><article><img title="C’est surtout grâce à vous !" alt="C’est surtout grâce à vous !" src="images/img-4-merci.jpg" />
 <span class="number fredokaFont">4</span>
<h4 class="fredokaFont">C’est surtout grâce à vous !</h4>
Vous avez élu Fine Cookies meilleures recettes de cookie en 2011. Grâce à vous, Fine Cookies est devenue la référence absolue du cookie dans le monde entier !</article>
<div class="fleches"></div>
<div class="cl"></div>
</div>
<div id="downFleche"></div>
</section>
<pre>

Nous avons plusieurs choses à voir ensemble sur cette partie. Faisons simple :

• section#presFinecookie va nous permettre de faire passer le site en fond rouge en affichant un background spécifique.

• h2.fredokaFont est une classe générique qui sera utilisée en CSS. Elle permettra de charger la police Fredoka One lorsqu’elle est nécessaire. Nous l’avons déjà utilisée plus haut.

• span.number nous permet d’afficher le numéro sous la photo. Il est possible de générer la totalité du fond en CSS3, mais j’ai tout de même privilégié une image à cet endroit pour des raisons pratiques.

• div.fleches est une div vide pour servir de support à un background-image contenant un sprite avec les flèches entre les images.

• div#downFleche va nous permettre d’afficher la flèche centrée en bas du bloc.

Vous êtes prêt à présent pour enchainer sur la partie « basse » du site, avec les produits du catalogue, les arguments de réassurance et les réseaux sociaux ! Dernière grosse étape avant de passer au footer.

Remontée du catalogue :

Quels éléments utiliser pour les produits du catalogue ? Nous pouvons par exemple reprendre un structure <section>, <article>. Pour changer quelque peu et voir d’autres manières de procéder, j’ai choisi ici d’utiliser principalement des <div> classiques. Il s’agit ici de bien déclarer les blocs pour faire une correcte grille de produits. D’après la maquette, nous sommes en présence de 6 blocs de produits, 5 petits et 1 bloc de taille plus importante. Rien qu’en analysant visuellement le design, nous pouvons en déduire qu’il faudra utiliser des classes différentes. Il convient également de penser aux éléments de survol : ce qui signifie de déjà prévoir les éléments HTML adéquats. En résumé :

• Un bloc conteneur global #bottomPage.

• Un bloc d’alignement à droite #catalogue.

• Un titre et des blocs produits h2, .produitMin et .produitBig.

</pre>
<div id="bottomPage">
<!--Début #bottomPage-->
<div id="catalogue">
<h2>Tout ce qu’il faut pour vous faire plaisir</h2>
<div class="produitMin">
<a href="#"><img title="Cacao Friese" alt="Cacao Friese" src="images/produits/prod-min-cacao-friese.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Cacao Friese</a></h3>
 <span><a href="#">23€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Marble Pave" alt="Marble Pave" src="images/produits/prod-min-marblepave.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Marble Pave</a></h3>
 <span><a href="#">13€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Shelly Foam" alt="Shelly Foam" src="images/produits/prod-min-shellyform.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Shelly Foam</a></h3>
 <span><a href="#">10€</a> les 500g</span></div>
</div>
<div class="produitBig">
<a href="#"><img title="Sugar Pallet" alt="Sugar Pallet" src="images/produits/prod-big-sugar-pallet.jpg" /></a>
<div class="bighoverBox">
<h3 class="fredokaFont"><a href="#">Sugar Pallet</a></h3>
 <span><a href="#">18€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Marbre Duo" alt="Marbre Duo" src="images/produits/prod-min-marbreduo.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Marbre Duo</a></h3>
 <span><a href="#">13€</a> les 500g</span></div>
</div>
<div class="produitMin">
<a href="#"><img title="Strawfilled" alt="Strawfilled" src="images/produits/prod-min-straw.jpg" /></a>
<div class="hoverBox">
<h3 class="fredokaFont"><a href="#">Strawfilled</a></h3>
 <span><a href="#">23€</a> les 500g</span></div>
</div>
<div class="cl"></div>
 <a class="fredokaFont hoverBtn" id="catLink" href="#">Voir le catalogue</a></div>

Décortiquons ensemble cette partie. Le premier bloc #bottomPage permet ici de définir la partie basse de notre site. Il permet aussi et surtout de revenir sur un fond de page blanc. Le bloc #catalogue suivant, nous permettra d’aligner le bloc à gauche. Vous pouvez voir que la structure des petits blocs est assez similaire. Le bloc de plus grande taille est différencié par une classe CSS spécifique .produitBig.

Petite précision par rapport au div.hoverBox. Il s’agit de blocs cachés qui apparaissent au survol de la souris. Ils contiennent le nom du produit ainsi que son prix. Grâce aux CSS3, nous allons voir qu’il est très facile de créer une petite animation sympathique au survol.

Bloc avantages :

Concentrons-nous à présent sur la partie droite présentant les avantages de commande chez Fine Cookies. C’est une partie complémentaire qui ne présente pas les produits, ni la société en elle-même. Sémantiquement il existe un élément HTML5 pour ce genre de partie, il s’agit de <aside>. Cet élément doit être utilisé pour du contenu indirectement apparenté. Pour savoir s’il convient d’utiliser <aside> ou non, demandez-vous si le contenu de l’élément peut être retiré sans affecter le sens du contenu principal du document ou de la section. C’est le cas pour notre partie.

Visuellement, il s’agit de trois étiquettes alignées, avec du texte, une image et un lien pour en savoir plus. Un titre principal englobe le tout. Nous allons utiliser une liste pour aligner facilement les blocs. Chaque <li> de cette liste contiendra un titre <h6> avec une image et un lien. Rien de bien compliqué sémantiquement pour cette partie. Voyez par vous même :

</pre>
<aside id="avantages">
<h5 class="cookieFont"><span>Savourez en toute liberté</span></h5>
<ul>
	<li>
<h6 class="fredokaFont">Livraison assurée dans 80 pays</h6>
 <img title="Livraison assurée dans 80 pays" alt="Livraison assurée dans 80 pays" src="images/img-etiquette-planete.png" />
 <a href="#">Trouver un point relais</a></li>
	<li>
<h6 class="fredokaFont">Dégustez-les chez vous en 24h chrono !</h6>
 <img title="Dégustez-les chez vous en 24h chrono !" alt="Dégustez-les chez vous en 24h chrono !" src="images/img-etiquette-box.png" />
 <a href="#">Commander maintenant</a></li>
	<li>
<h6 class="fredokaFont">100 points = -20% sur votre commande</h6>
 <img title="100 points = -20% sur votre commande" alt="100 points = -20% sur votre commande" src="images/img-etiquette-ticket.png" />
 <a href="#">Trouver un point relais</a></li>
</ul>
<div class="cl"></div>

Bloc réseaux sociaux :

Également contenu dans notre <aside>, les liens vers les réseaux sociaux. Il s’agit simplement de deux liens au sens propre, possédant chacun un identifiant. L’aspect du lien sous la forme de gros bouton arrondi va être entièrement géré en CSS.

</pre>
<div id="socialBox"><a class="fredokaFont hoverBtn" id="fbLien" href="#">Rejoignez-nous sur Facebook</a>
 <a class="fredokaFont hoverBtn" id="twitterLien" href="#">Suivez-nous sur Twitter</a></div>
<div class="cl"></div>
<pre><!--Fin #bottomPage-->

<!--Fin #content-->

Après avoir écrit les liens, il faut bien penser à fermer la balise <aside>, puis le conteneur du bas de page, pour enfin fermer le #content. Ouf ! Le plus gros de notre squelette est terminé ! Courage, il reste le pied de page, encore une vingtaine de lignes HTML a écrire avant de passer au CSS !

Le pied de page :

Quoi de plus adapté pour un pied de page que la balise HTML5 <footer> ? Cet élément est destiné à contenir des informations au sujet de l’élément qui le contient (ici <body>). Il va s’agir d’informations de copyright, de contact et de liens vers d’autres contenus. Rappel <footer> : la particularité de cet élément est qu’il peut être utilisé pour la totalité du document comme ici, mais il peut-être également utilisé à l’intérieur de <section> par exemple. Avant de déclarer le footer, nous allons juste placer une <div> qui contiendra le logo Fine Cookies, présent en rappel dans le footer. C’est parti pour le code :

</pre>
<div id="preFoot"><img title="Fine Cookies" alt="Fine Cookies" src="images/logo-fine-cookies.png" /></div>
<footer>
<div id="footContent">
<div id="address">
<ul>
	<li id="bigText">Venez nous rendre visite !</li>
	<li>Fine Cookies Shop</li>
	<li>14 rue Thomas Knoll</li>
	<li>77830 Toshop</li>
	<li id="tel">Tél : 01.00.82.85.09</li>
</ul>
</div>
<div id="legal">Fine Cookies 2012 -  © Copyright
 <a href="http://fr.livingtuts.com/" target="_blank">Living Tuts</a> et <a href="http://webdesignertrends.com/" target="_blank">Webdesigner Trends</a>.

Tutoriel Photoshop + Intégration HTML5, CSS3 - Création : <a href="http://webdesignertrends.com/" target="_blank">webdesignertrends.com</a> - Site et marque fictive.</div>
</div>
</footer>
<pre>

Comme vous pouvez le voir ci-dessus, nous avons une div#address. J’étais tenté d’utiliser la balise <address> en HTML5. Cependant cette balise doit utilisée uniquement pour contacter les auteurs du document cité. On ne doit pas l’utiliser pour l’adresse postale d’une entreprise sans relation avec l’auteur par exemple.

Nous y sommes ! Le squelette HTML de notre page est désormais terminé ! Pour le footer vous devez avoir un résultat assez semblable à celui-ci pour le moment :

Il est grand temps de passer au style non ?

 03 – Création du CSS

Après tout ce que nous avons traversé ensemble jusque ici, j’en suis presque ému, enfin notre maquette Fine Cookies va prendre vie . Terminé la maquette statique et sans vie ! Nous approchons du site web finalisé et navigable. Malgré tout le travail accompli jusqu’à présent, il nous reste plusieurs choses à faire. Nous allons voir ensemble comment habiller au mieux notre squelette HTML.

Pour y arriver, nous allons utiliser tous les outils CSS disponibles dans notre arsenal. Je pars du principe que vous avez de bonnes notions de CSS 2.1 et de CSS3, je vais donc simplement commenter le code en expliquant les points critiques. Le CSS3 tiens, parlons-en. Il va surtout nous servir a réaliser des transitions simples et diverses améliorations de mise en page. Assez de blabla, créez un fichier style.css et allez-y !

On commence sur de bonnes bases :

Le reset.css. Base incontournable d’un projet web solide, il va nous permettre de réinitialiser à 0 la valeur de certains éléments HTML, ainsi nous allons éviter les différences d’affichage sur les divers navigateurs. J’utilise personnellement celui de Eric Meyer. Créez un nouveau fichier CSS que vous appelez reset.css et placez-le dans le dossier CSS du site avec le code suivant :

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Pour en savoir plus sur la technique du reset CSS en général (même si je sais que vous la connaissez bien ), je vous invite à lire cet article sur Alsacréations.

Les classes de base :

Ouvrez votre fichier style.css, nous allons commencer par quelques classes de base.

/*/////////////////////////////////////////////////////////////////////
1 / DECLARATIONS DIVERSES
/////////////////////////////////////////////////////////////////////*/

.fredokaFont{
font-family: 'Fredoka One', cursive;
}

.cookieFont{
font-family: 'Cookie', cursive;
}

.cl{
clear:both;
}

/*----Petit effet soft les liens en CSS3-----*/
a, a:hover {
-webkit-transition-duration: 0.5s;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-moz-transition-property: color;
-ms-transition-duration: 0.5s;
-ms-transition-property: color;
-o-transition-duration: 0.5s;
-o-transition-property: color;
transition-duration: 0.5s;
transition-property: color;
}

body{
background-color:#eff0e9;
font-family: 'Overlock', cursive;
color:#69696c;
font-size:12px;
}

Je commence avec des classes pour les différentes polices utilisées sur le site. Ainsi nous allons pouvoir utiliser les polices Fredoka One et Cookie partout sans avoir à préciser sans cesse, un font-family spécifique.

Je rappelle que la police est chargée grâce à une balise <link> en HTML, depuis le service Google Font.

Je donne également un effet de survol doux à tous les liens avec la propriété CSS3 Transition que nous détaillerons par la suite. Pensez à bien préfixer les déclarations, car malheureusement elles ne sont pas encore supportées par tous les navigateurs.

Début du header et le sous-menu :

/*/////////////////////////////////////////////////////////////////////
2 / HEADER
/////////////////////////////////////////////////////////////////////*/

header{
height:605px;
background:url(../images/bg-header.gif) top center no-repeat;
}

#headContent{
width:960px;
margin:0 auto;
position:relative;
}

/*-----Liens du haut de page----*/
#topLinks{
width:350px;
float:right;
padding:20px 0 0 0;
}
#topLinks li{
display:inline;
text-align:right;
margin:0 0 0 20px;
font-weight:400;
}

#topLinks span{
margin:0 5px 0 0;
}

#topLinks li img{
vertical-align:top;
}

#topLinks a{
text-decoration:none;
color:#69696c;
}

#topLinks a:hover, #topLinks a:visited, #topLinks a:focus{
color:#e84743;
}

#topLinks #panier{
font-weight:700;
}

#topLinks img{
margin:0 5px 0 0;
}

Souvenez-vous de l’HTML, le header englobe le menu principal, le sous-menu du haut ainsi que le bloc de mise en avant du produit. Je commence par donner une hauteur au header pour y placer l’image de fond rayée et en perspective. Je déconseille de travailler sur des hauteurs fixes pour des fonds, mais c’est indispensable ici à cause de l’effet de perspective du design.

Ci-dessus, une partie de l’image de fond du header.

#headContent défini la zone « utile » de la maquette à 960 pixels de large. Le mini-menu est stylé de manière classique en plaçant la liste en display:inline avec des marges pour séparer les liens.

Le logo et le menu principal :

*-----Logo Fine Cookies----*/

#logo{
width:177px;
display:block;
margin:0 auto;
position:relative;
top:10px;
z-index:2;
}
/*--Léger mouvement animé au survol du logo---*/

#logo:hover{
top:15px;
}

#logo, #logo:hover{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

/*---Menu principal------*/
nav{
position:absolute;
top:45px;
font-size:14px;
color:#29888c;
text-transform:uppercase;
background:url(../images/ombre-nav.png) bottom center no-repeat;
padding:0 0 8px 0;

}

nav ul{
padding:20px;
width:920px;
background:url(../images/pat-menu.gif);
border-bottom:1px solid #959789;
border-radius:4px;

}

nav ul li{
display:inline;
padding:0 14px 0 0;
margin:0 14px 0 0;
background:url(../images/img-sep.png) right center no-repeat;
}

nav ul li:last-child {
background:none;
padding:0;
margin:0;
}

nav ul #navFirst{
background:none;
}

nav ul #navSecond{
padding:0 14px 0 0;
margin:0 14px 0 195px;
background:url(../images/img-sep.png) right center no-repeat;
}

nav a{
color:#29888c;
text-decoration:none;
}

nav a:hover{
color:#e84743;
}

Le placement particulier du logo au centre du menu, m’avait contraint à le déclarer avant la balise <nav> en HTML. Je vais le placer en position:relative par-dessus le menu principal. Pour réussir un placement parfait, je place la navigation en absolu à 45 pixels du haut de la page. Pour mieux comprendre cet empilement de couches, voici une petite vue 3D des éléments dans le navigateur :

Le fond du menu est réalisé avec une image de texture répétée, l’ombre est définie par une image de fond. 

Bonne nouvelle, l’arrondi CSS3 avec border-radius n’a plus besoin d’être préfixé ! Les navigateurs évoluent et c’est tant mieux ! Il existe d’ailleurs un intéressant article à ce sujet sur Generated Content.

Comme vous pouvez le voir, les #navFirst et #navSecond permettent de séparer les liens du menu de part et d’autre du logo. Parlons du logo, il est animé au survol grâce aux transitions CSS3. Il est simplement décalé de 15 pixels vers le bas tout en souplesse. Testez, vous verrez

Le bloc de mise en avant produit et la fin du header :

/*/////////////////////////////////////////////////////////////////////
3 / BLOC VISUEL ACCROCHE
/////////////////////////////////////////////////////////////////////*/

/*---Bloc contenant global---*/
#bigVisuel{
width:960px;
height:480px;
margin:0 auto;
background:url(../images/img-planche.png) bottom center no-repeat;
}

/*---Visuel tour de cookie---*/

#cookieTour{
display:block;
float:left;
width:330px;
margin:0 0 0 60px;
}

/*---Texte de complet du visuel---*/
#infosVisu{
width:515px;
float:right;
padding:55px 0 0 20px;
position:relative;
}

#infosVisu h1{
font-size:72px;
color:#e84743;
text-transform:uppercase;
line-height:40px;
}

#infosVisu h1 span{
font-size:53px;
color:#eea914;
text-transform:none;
}

#infosVisu p{
font-size:14px;
font-weight:400;
width:500px;
padding:0 0 0 8px;
line-height:16px;
}

/*----Pepites Choco----*/

#pepites{
position:absolute;
top:216px;
display:block;
width:191px;
}

/*--Bouton J'en profite---*/

#btnGoCart{
display:block;
position:absolute;
left:253px;
top:217px;
width:182px;
height:27px;
text-decoration:none;
text-transform:uppercase;
color:#FFF;
font-size:13px;
padding:13px 0 0 50px;
background:url(../images/btn-gocart.png) no-repeat;
}

75 lignes d’un coup, d’un seul, cela peut paraître beaucoup. En fait, rien de compliqué, détaillons ensemble :

• #bigVisuel : ce bloc sert de conteneur. Je place la planche comme support à la tour de cookies en background aligné au centre et en bas du bloc.
• #cookieTour : est la partie gauche contenant simplement l’image des cookies.
• #infosVisu : est la partie droite avec les textes stylés selon le webdesign.
• #pepites : visuel des petites de chocolats placées en position:absolute pour sortir le bloc du flux de la page, en le plaçant bien sur la planche.
• #btnGoCart : un lien avec la propriété display:block pour lui ajouter une image de fond et une taille bien définie.

Au final c’est simple non ? Une petite vue 3D pour y voir plus clair :

Félicitation, le haut de page est déjà terminé ! Courage, on continue tout de suite…

Contenu principal:

/*/////////////////////////////////////////////////////////////////////
4 / CONTENU DU SITE
/////////////////////////////////////////////////////////////////////*/

#content{
border-top:1px solid #cacbc0;
background-color:#FFF;
padding:0 0 100px 0; /*--Pour gèrer le logo du bas--*/
}

Pour définir le contenu principal du site, j’utilise une div avec un id#content. Je vais ainsi rendre le fond blanc sur toute la largeur du viewport des internautes, conformément à la maquette. Nous verrons à l’étape du footer à quoi sert le padding ajouté ici.

Bloc nouveaux produits :

/*/////////////////////////////////////////////////////////////////////
Ligne nouveaux produits
/////////////////////////////////////////////////////////////////////*/

#nouveauxProduits{
width:960px;
margin:0 auto;
padding:40px 0;
}

#nouveauxProduits h2{
font-size:20px;
color:#e84743;
text-align:center;
text-transform:uppercase;
background:url(../images/sep-titre-rouge.jpg) center repeat-x;
margin:0 0 10px 0;
}

/*---Astuce pour afficher correctement le fond double trait---*/
#nouveauxProduits h2 span{
background-color:#FFF;
padding:0 10px;
}

/*---Style des blocs de produits---*/
#nouveauxProduits article{
float:left;
width:220px;
text-align:center;
font-size:14px;
margin:0 20px 0 0;
}

#nouveauxProduits article img{
border-bottom:1px solid #e84743;
width:220px; /*--On force l'image en CSS à 220px de large,
mais lors de la dynamisation c'est à redimensionner avec un script--*/
}

#nouveauxProduits article img:hover{
border-bottom:1px solid #981b18;
}

#nouveauxProduits article h3{
color:#e84743;
font-size:16px;
margin:5px 0 15px 0;
}

#nouveauxProduits article h3 a{
color:#e84743;
text-decoration:none;
}

#nouveauxProduits article h3 a:hover{
color:#EEA914;
}

#nouveauxProduits .prix{
font-weight:700;
margin:0 0 15px 0;
}

#nouveauxProduits .prix a{
font-size:15px;
color:#FFF;
background-color:#e84743;
padding:5px;
text-decoration:none;
}

#nouveauxProduits .prix a:hover{
color:#FFF;
background-color:#EEA914;
}

Souvenez-vous de notre élément HTML5 <section> avec l’id #nouveauProduits. Ici je le style comme n’importe quel autre bloc, en lui donnant une largeur fixe et en le centrant dans le navigateur avec margin:0 auto.

Petite parenthèse : savez-vous comment reproduire l’effet graphique des lignes autour du titre en CSS ?

La réponse est au-dessus dans le CSS ! Nous avons déclaré en HTML un élément h2 pour le titre. Inclus dans cet h2, un span contenant le texte.

L’astuce consiste à charger l’image des doubles traits en image de fond du h2, puis à ajouter un fond blanc au span pour servir de cache et le tour est joué !

Le reste du CSS est simple à comprendre. Je fais « flotter » les blocs à gauche avec un float:left pour former une ligne. Pour que l’effet fonctionne, il convient de définir une taille fixe aux blocs avec un marge pour les séparer. J’ajoute également divers effets simples en CSS lors du survol. La couleur du prix change par exemple et cela en tout fluidité grâce aux propriétés de transtions CSS3 ajoutées au début du fichier.

Les différentes couches de cette partie en vue 3D.

L’argumentaire Fine Cookies :

/*/////////////////////////////////////////////////////////////////////
Présentation de l'entreprise
/////////////////////////////////////////////////////////////////////*/
#presFinecookie{
background:url(../images/bg-down-arrow.jpg) #e84743 top center no-repeat;
/*-Wrapper principal rouge-*/
}

#presInt{
width:960px;
margin:0 auto;
padding:35px 0 0 0;
position:relative;
/*-Pour ensuite placer les flèches--*/
}

/*-Titre principal---*/
#presInt h2{
font-size:22px;
color:#FFF;
text-align:center;
margin:0 0 20px 0;
}

#presInt h2 span{
color:#eea914;
text-transform:uppercase;
margin:0 0 0 8px;
}

/*--Mise en page des blocs---*/

#presInt article{
width:220px;
float:left;
margin:0 20px 50px 0;
position:relative; /*-Pour ensuite placer la bulle du numéro--*/
text-align:center;
color:#FFF;
}

#presInt article h4{
font-size:16px;
margin:25px 0 15px 0;
}

#presInt .number{
font-size:18px;
display:block;
width:39px;
height:31px;
background:url(../images/icon-bulle-num.png) no-repeat;
padding:8px 0 0 0;
position:absolute; /*--Placement facile sur l'image du dessus--*/
top:195px;/*--Mesuré sur la maquette PSD---*/
left:97px; /*--Mesuré sur la maquette PSD---*/
z-index:2; /*--Les chiffres restent sélectionnables--*/
}

#presInt article p{
font-size:14px;
}

/*--Fleches entre les arguments---*/
.fleches{
position:absolute;
width:554px;
height:36px;
background:url(../images/sprite-fleches.png) no-repeat;
top:260px;
left:180px;
z-index:0;    /*--Mise à l'arrière plan au même niveau que les images--*/
}

/*---Fleche de "fermeture du bloc--*/

#downFleche{
background:url(../images/img-down-arrow-red.jpg) #FFF bottom center no-repeat;
height:11px;
margin:0 0 25px 0;
}

Visuellement parlant, nous sommes au niveau de la large barre rouge avec les arguments sur les cookies. Les quatres blocs sont placés de la même façon que les précédents, c’est-à-dire en flottants. Les éléments particuliers ici sont les chiffres placés en absolu sur les images, ainsi que les flèches liant visuellement les images.

Pour aller plus dans le détail :

• #presFinecookie : le conteneur qui permet de placer la flèche du haut en image de fond (bg-down-arrow.jpg).
• #presInt .number : c’est ainsi que le chiffre est positionné sur les images. Avec une position:absolute et un z-index:2 pour rester cliquable.
• .fleches : charge une image de fond que je place à nouveau en absolute par dessus les images des arguments. Souvenez-vous, il s’agissait d’une <div> vide en HTML.
• #downFleche : autre <div> vide vue ensemble tout à l’heure, elle permet ici de charger une petite image de fond pour reproduire la flèche du bas.

Le capture ci-dessous détaille les blocs importants :

Remontée du catalogue :

/*/////////////////////////////////////////////////////////////////////
5 / REMONTEE PRODUITS DU CATALOGUE
/////////////////////////////////////////////////////////////////////*/
#bottomPage{
width:960px;
margin:0 auto;
}

#catalogue{
width:480px;
float:left;
}

#catalogue h2{
color:#e84743;
font-size:19px;
text-transform:uppercase;
}

Pour commencer cette partie, je place d’abord la structure de base. Un conteneur principal, #bottomPage pour tous les éléments du bas de page. Ensuite #catalogue pour définir la colonne de gauche qui contiendra les produits. J’enchaine ensuite sur les styles des petits blocs de produits.

Styler un bloc de produits :

/*--Style des "petits" blocs de produits--*/
.produitMin{
float:left;
width:140px;
height:139px;
margin:0 20px 20px 0;
border-bottom:1px solid #e84743;
text-align:center;
color:#FFF;
position:relative;
overflow:hidden; /*--On cache ainsi l'onglet (hover Box) en bas du bloc--*/
}

.produitMin:hover{
border-bottom:1px solid #981b18;
}

Je donne une taille fixe au bloc .produitMin. Carré, il fait pourtant 140 x 139 ? Ce n’est pas un erreur, je prévois simplement un pixel de libre en bas pour ajouter une bordure (border-bottom) comme sur la maquette. Je modifie également la couleur de cette bordure au survol. J’utilise overflow:hidden pour cacher les éléments qui seraient susceptibles de dépasser de la box. Nos petits blocs de produits sont presque terminés. Il est temps de gérer le positionnement du bloc d’informations produit. Vous savez, celui qui doit apparaitre au survol :

Masquer les informations produit :

/*--Positionnement de l'onglet d'infos--*/
.hoverBox{
width:140px;
height:40px;
background:url(../images/bg-hover-product-min.png) no-repeat;
padding:10px 0 0 0;
overflow:hidden;
position:absolute;
top:140px; /*--On place le bloc en bas, pour qu'il soit caché
et ensuite le faire apparaître au survol--*/
}

.hoverBox a{
text-decoration:none;
color:#FFF;
}

.hoverBox h3{
font-size:16px;
}

.hoverBox span{
font-size:14px;
}

C’est une <div> appelée .hoverBox. Je lui donne une taille bien définie de 140px (ce qui correspond à la largeur de la div .produitMin). Je veille bien à lui attribuer la propriété overflow:hidden qui va prévenir les débordement de texte éventuels. Je le place ensuite en position:absolute à 140 pixels du haut, c’est ainsi qu’il va disparaître de l’écran, grâce à la propriété overflow:hidden de .produitMin. Nous obtenons ainsi un beau bloc caché que nous pouvons simuler de la manière suivante :

Le tout est bien placé, reste à présent à gérer l’animation au survol.

Gérer l’animation au survol en CSS3 :

/*--Gestion de l'animation de l'onglet ---*/
.produitMin:hover > .hoverBox{
top:90px;
}

.produitMin >.hoverBox, .produitMin:hover > .hoverBox{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

J’utilise une fois de plus une transition CSS3 :

• Transition-property:top me permet de dire que je vais modifier la propriété top de l’élément ciblé, ici .hoverBox.
• Transition-duration:0,5s indique la durée de la transition.
• Avant ça j’indique que si je survole la div.produitMin, je fais monter .hoverBox de 90 pixels.

C’est simple, rapide et sans Javascript ! La transition CSS, permet également l’effet inverse. Une fois que l’utilisateur retire sa souris, .hoverBox rentre gentillement dans sa cachette

Scénario d’animation au survol de la souris.

Comment faire pour le « gros » bloc de produits ?

/*--Style des "gros" blocs de produits--*/
.produitBig{
float:left;
width:300px;
height:299px;
margin:0 20px 20px 0;
border-bottom:1px solid #e84743;
text-align:center;
color:#FFF;
position:relative;
overflow:hidden; /*--On cache ainsi l'onglet (hover Box) en bas du bloc--*/
}

.produitMin:hover{
border-bottom:1px solid #981b18;
}

/*--Positionnement de l'onglet d'infos--*/
.bighoverBox{
width:300px;
height:53px;
background:url(../images/bg-hover-product-big.png) no-repeat;
padding:10px 0 0 0;
overflow:hidden;
position:absolute;
top:300px;  /*--On place le bloc en bas, pour qu'il soit caché
et ensuite le faire apparaître au survol--*/
}

.bighoverBox a{
text-decoration:none;
color:#FFF;
}

.bighoverBox h3{
font-size:16px;
}

.bighoverBox span{
font-size:14px;
}

/*--Gestion de l'animation de l'onglet ---*/
.produitBig:hover > .bighoverBox{
top:246px;
}

.produitBig >.bighoverBox, .produitBig:hover > .bighoverBox{
-webkit-transition-duration: 0.5s;
-webkit-transition-property:top;
-moz-transition-duration: 0.5s;
-moz-transition-property: top;
-ms-transition-duration: 0.5s;
-ms-transition-property: top;
-o-transition-duration: 0.5s;
-o-transition-property: top;
transition-duration: 0.5s;
transition-property: top;
}

La réponse est : exactement la même méthode, mais adaptée avec les bons identifiants et aux bonnes tailles ! C’est à dire en utilisant les bonnes classes, ici .produitBig et .bighoverBox.

Lien vers le catalogue :

/*---Lien catalogue pour en savoir plus----*/

#catLink{
background:url(../images/btn-voir-catalogue.png) no-repeat;
width:140px;
height:20px;
display:block;
color:#FFF;
font-size:13px;
text-align:center;
text-decoration:none;
padding:6px 0 0 0;
float:right;
margin:0 20px 0 0;
}

Pour finaliser cette partie à 100%, il suffit de styler le lien vers le catalogue. J’ajoute l’image de fond découpée au début et je lui donne une taille fixe. Je le positionne avec un float pour qu’il reste aligné à droite de la colonne. La partie du catalogue est terminée ! Voyons ce que donne le rendu 3D, pour bien comprendre l’étendue des couches qui forment cette partie.

Il est temps de s’occuper du bloc présentant les avantages de commande chez Fine Cookies.

Bloc avantages :

/*/////////////////////////////////////////////////////////////////////
6 / COLONNE AVANTAGES
/////////////////////////////////////////////////////////////////////*/

#avantages{
width:480px;
float:right;
}

#avantages h5{
font-size:35px;
color:#eea914;
text-align:center;
background:url(../images/sep-titre-orange.jpg) center repeat-x;
margin:0 0 10px 0;
}

/*---Astuce pour afficher correctement le fond double trait---*/
#avantages h5 span{
background-color:#FFF;
padding:0 10px;
}

Je commence comme d’habitude par placer la structure générale du bloc. Il mesure 480 pixels et est placé en flottant à droite du bloc précédent. Je traite le titre avec les doubles traits de la même façon que les autres, en utilisant l’astuce du span contenu dans le h2. Le titre étant en place, je passe au style de la liste.

/*---Style d'un bloc d'avantages----*/
#avantages li{
width:129px;
padding:0 5px;
height:341px;
float:left;
margin:0 20px 0 0;
text-align:center;
display:block;
position:relative;
background:url(../images/bg-etiquette.jpg) no-repeat;
}

#avantages li h6{
font-size:15px;
text-transform:uppercase;
margin:60px 0 30px 0;
color:#29888c;
line-height:18px;
}

#avantages ul li a{
position:absolute; /*Pour que le lien soit toujours placé
en bas même si le titre h6 est plus long*/
bottom:50px;
display:block;
text-align:center;
width:129px;
font-size:12px;
color:#e84743;
}

#avantages ul li a:hover{
color:#eea914;
}

J’ai découpé une image de fond pour les étiquettes, bg-etiquette.jpg. Je la place sur le fond de chacun des éléments li. Une fois placée en float puis en position:relative, j’obtiens le résultat suivant :

Je style ensuite le titre et le lien pour qu’ils correspondent à la maquette.

Petite astuce sur le placement du lien en bas du bloc : il est placé en position:absolute. Ainsi il se trouve en dehors du flux du bloc, si le titre du haut devient plus grand, le lien restera collé en bas quoi qu’il arrive  .

Au final, voilà quelque chose qui ressemble plus à la maquette :

Bloc réseaux sociaux :

/*/////////////////////////////////////////////////////////////////////
7 / BLOCS RESEAUX SOCIAUX
/////////////////////////////////////////////////////////////////////*/

#socialBox{
margin:20px 0 0 0;
}

#socialBox a{
display:block;
width:120px;
height:55px;
float:left;
padding:30px 20px 0 80px;
border-radius:4px;
font-size:14px;
text-transform:uppercase;
color:#FFF;
text-decoration:none;
}

#socialBox #fbLien{
background:url(../images/icon-facebook.png) 25px 20px #3b5998 no-repeat;
margin:0 20px 0 0;
}

#socialBox #twitterLien{
background:url(../images/icon-twitter.png) 20px 25px #00aced no-repeat;
}

Souvenez-vous, pour réaliser les deux blocs menant vers Facebook et Twitter nous avons placé deux liens en HTML avec des id. Je les place dans un bloc commun #socialBox pour ainsi leur donner des propriétés CSS communes en les ciblant avec #socialBox a. J’applique comme vous pouvez le voir une taille fixe, en flottant, puis je donne un arrondi commun de 4px aux deux blocs. J’utilise enfin #fbLien et #twitterLien pour charger l’image et la couleur de fond des liens.

Le « pre footer » :

Avant de styler le pied de page à proprement parler, nous avons déclaré en HTML un bloc #preFoot qui contient le logo Fine Cookies. Il s’agit de la « planche en bois » qui est présente sur toute la largeur du site, en bas de page. Voilà comment elle est positionnée en CSS :

/*/////////////////////////////////////////////////////////////////////
8 / FOOTER
/////////////////////////////////////////////////////////////////////*/

/*--Barre de bois + logo----*/
#preFoot{
background:url(../images/img-planche-footer.jpg) 0 50px repeat-x;
position:relative;
top:-50px;
margin:0 0 -100px 0;
}

#preFoot img{
display:block;
width:177px;
margin:0 auto;
}

Je pense bien a utiliser un repeat-x sur l’image de fond pour qu’elle occupe toute la largeur de l’écran quelle que soit la résolution de l’utilisateur. Le bloc est positionné en relative avec une marge négative pour créer l’effet de superposition du logo. Celui-ci est placé au centre automatiquement par un margin:0 auto. Il est également décalé du haut grâce au padding ajouté à l’étape du #content. D’après la maquette nous obtenons le résultat suivant :

Le footer (ça y est, nous y sommes !) :

/*---Footer---*/

footer{
background:url(../images/bg-rayures.jpg) repeat;
}

#footContent{
width:960px;
margin:0 auto;
text-align:center;
}

#address{
width:300px;
margin:0 auto;
border-radius:4px;
background:url(../images/bg-ombre-address.png) bottom center no-repeat;
padding:0 0 12px 0;
}

#address #bigText{
font-size:16px;
text-transform:uppercase;
font-weight:700;
margin:0 0 20px 0;
}

#address ul{
font-size:14px;
padding:70px 0 5px 0;
background:url(../images/pat-menu.gif) repeat;
}

#address ul li#tel{
margin:15px 0;
}

Dans l’ordre, voilà comment est stylé le pied de page :

• Je place l’image de fond des rayures sur le pied de page (<footer>).
• #footContent me permet de définir une zone fixe de 960px pour y placer le contenu.
• #address est le bloc central du pied de page. Il contient les coordonnées de Fine Cookies. Je lui applique une image de fond pour créer l’ombre sous le bloc. Il est possible de le rendre entièrement en CSS. Dans un souci de compatibilité navigateur, j’ai préféré utiliser une image ici.
• #adresse ul : la liste qui contient les coordonnées. Je lui applique la même texture que la navigation principale en image de fond.

Une toute dernière chose, la phrase de copyright et l’intégration pourra passer en phase de débug !

Les mentions légales :

/*--Mentions légales----*/

#legal{
margin:30px 0 0 0;
padding:0 0 30px 0;
}

#legal p{
margin:0 0 2px 0;
}

#legal .bold{
font-weight:700;
}

#legal a{
color:#69696C;
text-decoration:none;
}

#legal a:hover, #legal a:visited, #legal a:focus{
color:#E84743;
}

Rien de sorcier pour cette dernière phrase. Juste du style de texte, à la bonne couleur, avec les bonnes polices pour correspondre à la maquette. Voilà le résultat :

Félicitations ! L’intégration HTML5/CSS3 est terminée ! Testez sous différents navigateurs pour voir le résultat !

04 – Test et débogage final

Étape importante avant de fournir votre intégration finalisée au développeur. Vérifiez votre code et le rendu sous différent navigateurs. Pas de soucis particulier avec Firefox, Chrome ou Safari mais on peux constater de légers problèmes avec Internet Explorer 8. Je ne parle pas des coins qui ne sont pas arrondis par exemple, ou des transition CSS qui ne sont pas gérées de manière fluide. C’est le cas en effet, mais pas de soucis tant que les informations sont claires, lisibles et correctement utilisables. Certaines propriétés CSS3 ne seront jamais supportées par IE8, nous devons donc faire avec. C’est parti, allons à la chasse aux insectes bugs !

Bug 1 – Visuellement le menu principal est décalé :

On peux rapidement en déduire qu’il s’agit de problèmes de marges entre les liens. Pour y remédier, je vais créer un fichier CSS dédié à Internet Explorer que je nomme ie.css. La feuille de style est déjà chargée dans le <head> du document HTML. J’ajoute le CSS suivant pour corriger les espaces :

nav ul li{
padding:0 13px 0 0;
margin:0 13px 0 0;
}

nav ul li.last{
background:none;
padding:0;
margin:0;
}

La propriété last-child n’étant pas prise en compte par IE8, j’ai ajouté une classe .last au dernier <li> du menu principal.

Bug 2 – le texte n’est pas cadré correctement dans les liens sociaux :

Le texte passe sur deux lignes dans le bloc Facebook. Pour corriger ce problème, je vais modifier la taille de police uniquement sur IE en ajoutant à ma feuille de style conditionnelle :

#socialBox a {
font-size:13px;
}

Finalement ce n’était pas si terrible non ? La chasse au bug est terminée ! Avant de conclure ce tutoriel, je vous propose une petite amélioration Javascript en bonus.

Bonus : amélioration Javascript au survol des images

Pour donner de la vie à notre interface, je vous propose un petit script personnalisé. Souvenez-vous au début du tutoriel nous avons chargé un fichier hoverClass.js. Il va nous permettre de réaliser un fade-in/fade-out au survol des images et des boutons. Il va agir à la fois sur les éléments qui possèdent la classe .hoverBtn mais aussi sur toutes les images qui sont contenues dans un <article>. Voilà comment transcrire cette explication en Javascript :

$(document).ready(function(){
$('article img, .hoverBtn').hover(

function(){
$(this).stop().fadeTo('slow',0.6);
},
function(){
$(this).stop().fadeTo('slow',1);
});
});

Pourquoi en Jquery ? Simplement pour vous montrer différentes possibilités et aussi pour conserver cet effet intéressant sur Internet Explorer.

Pour conclure :

Le tutoriel est officiellement terminé ! Je tiens a préciser qu’en intégration, il existe bien entendu plusieurs manières de procéder. Il est donc normal que vous soyez tenté d’utiliser d’autres balises ou méthodes suivant les cas. En tout cas, je reste à votre disposition pour toutes questions. Vous pouvez retrouver l’intégration finale en ligne sur finecookies.fr.

Merci à tous ceux qui ont suivi attentivement les 3 grosses étapes de conception du site Fine Cookies. J’espère que j’ai pu vous fournir une bonne vision de ce que peut être un projet web. En parcourant ensemble la phase d’organisation et de réflexion créative, la création du design avec Photoshop et maintenant cette intégration HTML5/CSS3 vous possédez un panel d’informations considérables pour progresser ou tout simplement vous lancer dans un vrai projet.

Si le tutoriel vous a plus, je compte sur vous pour le partager un maximum avec vos amis graphistes, webdesigners, ou tout simplement curieux ou passionnés du web .

À bientôt pour un prochain tutoriel ! En attendant retrouvez moi sur mon blog .

Design Spartan (Gaétan Weltzer) clôt ce tutoriel de création de site par le développement de l’administration en PHP/MySQL qui a été mis à jour avec un code optimisé.

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.

NOTE : Le tutoriel a été mis à jour (en janvier 2013) avec un code beaucoup plus optimisé. Je remercie Samy, 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 :

<?php

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

exit();

?>

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(50) NOT NULL,
`mail` varchar(150) NOT NULL,
`token` varchar(50) NOT NULL,
`token_date` datetime NOT NULL,
`valid` tinyint(1) NOT NULL DEFAULT ’1',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

<pre>

[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.

[token]

Utile pour enregistrer le token de connection.
[token_date]

Utile pour enregistrer la date du token de connection.
[valid]

Comme au-dessus.

Connexion à la base de données

Pour la suite du tutoriel, nous allons créer une page « idents.php » qui va vous permettre de vous connecter à votre base de données. Nous allons utiliser PDO qui est une interface arrivée avec PHP 5 permettant de gérer toutes les opérations sur une base de données. L’avantage de PDO est qu’il permet d’écrire un code générique qui utilisera exactement les mêmes méthodes PHP quelque soit le SGBD (Système de Gestion de Base de Données) utilisé. Vous retrouverez la documentation associée ici : http://php.net/manual/en/book.pdo.php

Voici idents.php :

<?php
session_start(); # Ouverture des sessions

define('HOST', 'localhost');
define('USER','root');
define('PASSWORD','');
define('BDD','realtea');
define('PORT','3306');

try
{
	$bdd = new PDO('mysql:host='.HOST.';port='.PORT.';dbname='.BDD, USER, PASSWORD);
}
catch(Exception $err)
{
	die('erreur ['.$err->getCode().'] '.$e->getMessage());
}
?>

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.

<?php

include_once 'idents.php';

if(isset($_POST['login'], $_POST['mdp'])) # Si le formulaire est soumis
{
 if (!empty($_POST['login']) && !empty($_POST['mdp']))
 {

 $login = $_POST['login']; # Protection des Injection SQL ect...
 $mdp = sha1($_POST['mdp']);

 $login_q = $bdd->prepare("SELECT * FROM users WHERE login = :login AND pass = :mdp AND valid = '1'");
 $login_q->execute(array(
	'login' => $login,
	'mdp' => $mdp
 ));

 if($login_q->fetchColumn() > 0) # Si login pass et valid ok
 {
 $user = $login_q->fetch(PDO::FETCH_OBJ);

 $token = sha1(uniqid().$user->id.sha1(uniqid()));
 setcookie('token', $token, time()+3600); # Création des cookies
 $user_id = $user->id;
 $setToken_q = $bdd->prepare("UPDATE users SET token = :token, token_date = NOW() WHERE id = :user_id");
 $setToken_q->execute(array(
	'token' => $token,
	'user_id' => $user_id
 ));
 $token = null;
 $_SESSION['login'] = $user->login; # Création des sessions

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

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

?>
<!DOCTYPE html>
<html lang="fr">
 <head>
 <meta charset="utf-8" />
 <title>Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com</title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 <!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" media="all" href="ie8.css"/><! [endif]-->
 <!--[if lte IE 7]>
 <link rel="stylesheet" type="text/css" media="all" href="ie7.css"/>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

 </head>

 <body>

 <!--[if IE]><div id="fond_ie"><! [endif]-->
 <nav id="menu_top">
 <ul>
 <li><a href="#">Actualités</a></li>
 <li><a href="#">Pages</a></li>
 <li><a id="deco" href="logout.php">Se déconnecter</a></li>
 </ul>
 </nav>
 <div></div>

 <div>

 <header id="header_top">
 <a id="logo" href="#">
 <h1><img src="images/logo.png" alt="Real Tea : société spécialisée dans le thé rare de qualité"/></h1>
 </a>

 </header>

 <section id="connexion">
 <form method="post" action="connexion.php">
 <label for="id">Identifiant</label>
 <input id="login" name="login" type="text" required /> <!-- Remplir ce champ est requis -->
 <br/>
 <label for="mdp">Mot de passe</label>
 <input id="mdp" name="mdp" type="password" required /> <!-- Remplir ce champ est requis -->
 <a href="#" id="pwd_oubli" >Mot de passe oublié ?</a>
 <input type="submit" value="Connexion">
 </form>
 </section>

 <div></div>

 <footer id="footer_site">
 <aside>
 <p>Retrouvez-nous aussi sur : </p><p style="float:left;"><a href="#"><img src="images/fb.png" alt="Joignez-nous sur Facebook"/></a> <a href="#"><img src="images/twitter.png" alt="Joignez-nous sur Twitter"/></a></p>
 </aside>

 <p id="copyright">© Gaétan Weltzer  Tous droits réservés - tutoriel pour Living Tuts : <a href="http://www.livingtuts.com">www.livingtuts.com</a></p>

 <div></div>
 </footer>

 </div>
 <!--[if lte IE 8]></div> <! [endif]-->
 </body>
</html>

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.

<?php

include_once 'idents.php';

date_default_timezone_set('Europe/Paris'); # Définition du Time Zone

$token = '';
if(isset($_COOKIE['token']) && !empty($_COOKIE['token']))
	$token = $_COOKIE['token']; # Récupération des Cookies & Ou Sessions

 $token = $token; # Protection des Injection SQL ect...
 $login_q = $bdd->prepare("SELECT * FROM users WHERE token = :token AND valid = '1'");
 $login_q->execute(array(
	'token' => $token
 ));

if($login_q->fetchColumn() == 0) # Si login pass et valid nok
{
 header('Location: connexion.php'); # Redirection

 exit();
}

if(isset($_GET['delete']) && !empty($_GET['delete'])) # Si le paramètre delete est spécifié dans l'URL
{
 $id = $_GET['delete']; # Protection des Injection SQL ect...
 $delete_q = $bdd->prepare("UPDATE news SET valid = '0' WHERE id = :id");
 $delete_q->execute(array(
	'id' => $id
 ));
}

if(isset($_POST['date1'], $_POST['titre'], $_POST['desc'])) # Création d'une news
{
	if(!empty($_POST['date1']) && !empty($_POST['titre']) && !empty($_POST['desc']))
	{
	 $date = date('Y-m-d H:i:s', $_POST['date1']); # Protection des Injection SQL ect...
	 $title = $_POST['titre'];
	 $text =$_POST['desc'];

	 $insert_q = $bdd->prepare("INSERT INTO news VALUES ('', :title, :text, :date, '1')"); # Insertion dans la table d'une nouvelle news
	 $insert_q->execute(array(
		'text' => $text,
		'title' => $title,
		'date' => $date
	 ));
	}
}

$news = array();

$selectAll_q = $bdd->prepare("SELECT id, title, text, DATE_FORMAT(date, '%b') AS date_b, DATE_FORMAT(date, '%d') AS date_d, valid FROM news WHERE valid = '1'"); # Selection de toutes les news valides
$selectAll_q->execute();

while($result = $selectAll_q->fetch(PDO::FETCH_ASSOC))
{
 $news[] = $result; # Replissage du tableau avec ces valeurs
}

?>
<!DOCTYPE html>
<html lang="fr">
 <head>
 <meta charset="utf-8" />
 <title>Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com</title>

 <link rel="stylesheet" href="style.css" type="text/css" />
 <link rel="stylesheet" type="text/css" href="inc/css/calendar-eightysix-v1.1-vista.css" media="screen" /> <!-- Template du calendar JS -->

 <!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" media="all" href="ie8.css"/><! [endif]-->
 <!--[if lte IE 7]>
 <link rel="stylesheet" type="text/css" media="all" href="ie7.css"/>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

 <script type="text/javascript" src="inc/js/mootools-1.2.4-core.js"></script>  <!-- Frameworks JS Mootools Core -->
 <script type="text/javascript" src="inc/js/mootools-1.2.4.4-more.js"></script>  <!-- Frameworks JS Mootools More -->
 <script type="text/javascript" src="inc/js/calendar-eightysix-v1.1.js"></script>  <!-- Plugin Mootools Calendar Eightysix -->

 <script type="text/javascript">

 // Très bonne doc du calendar : http://dev.base86.com/scripts/mootools_javascript_datepicker_calendar_eightysix.html

 window.addEvent('domready', function()
 {
 MooTools.lang.set('fr-FR', 'Date', {
 months: ['Janvier', 'Févrié', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
 days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
 dateOrder: ['date', 'month', 'year', '/']
 });

 MooTools.lang.setLanguage('fr-FR');

 new CalendarEightysix('date1',
 {
 'theme': 'vista',
 'defaultView': 'day',
 'startMonday': true,
 'format': '%d/%m/%Y',
 'createHiddenInput': true,
 'hiddenInputName': 'date2',
 'disallowUserInput': true
 });
 });

 </script>

 </head>

 <body>

 <!--[if IE]><div id="fond_ie"><! [endif]-->
 <nav id="menu_top">
 <ul>
 <li><a href="actu.php">Actualités</a></li>
 <li><a href="page.php">Pages</a></li>
 <li><a id="deco" href="#">Se déconnecter</a></li>
 </ul>
 </nav>
 <div></div>

 <div>

 <header id="header_top">
 <a id="logo" href="#">
 <h1><img src="images/logo.png" alt="Real Tea : société spécialisée dans le thé rare de qualité"/></h1>
 </a>

 </header>

 <section id="actu">
 <header>
 <h2>Ajouter / Supprimer une actualité</h2>
 </header>

 <p>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.</p>

 <form method="post" action="actu.php">
 <label for="date1">Date</label>
 <input id="date1" name="date1" type="date" required /> <!-- Remplir ce champ est requis -->
 <br/>
 <label for="titre">Titre de l'actualité</label>
 <input id="titre" name="titre" type="text" required /> <!-- Remplir ce champ est requis -->
 <br/>
 <label for="desc">Description <em>(limité à 1000 caractères - il est conseillé de rester synthétique dans la description)</em></label>
 <textarea id="desc" name="desc"></textarea> <!-- Remplir ce champ est requis -->
 <br/>
 <input type="submit" value="Créer l'actualité">
 </form>

 <header id="header_liste_actu">
 <h2>Actualités déja publiées</h2>
 </header>

 <!-- boucle affichant les dernières actus -->
 <ul id="news">
 <?php
 foreach($news as $nw) # Boucle qui affiche les news
 {
 echo '
 <li>
 <article>
 <header>
 <h3><a href="#">'.$nw['title'].'</a></h3>
 </header>

 <footer>
 <time datetime="2011-01-01" pubdate>'.$nw['date_d'].' <span><br/>'.$nw['date_b'].'</span></time> <!-- l\'atribut booléen pubdate signifie que le "time" spécifié est bien celui de l\'article au cas où il y aurait plusieurs <date> dedans-->
 </footer>

 <div>
 <p>'.$nw['text'].'</p>
 <div>
 <p><a href="#"> Voir l\'actualité</a></p>
 <p><a href="actu.php?delete='.$nw['id'].'">Supprimer</a></p>
 </div>
 </div><!-- /.entry-content -->

 </article>
 </li>';
 }

 ?>
 </ul>

 </section>

 <div></div>

 <footer id="footer_site">
 <aside>
 <p>Retrouvez-nous aussi sur : </p><p style="float:left;"><a href="#"><img src="images/fb.png" alt="Joignez-nous sur Facebook"/></a> <a href="#"><img src="images/twitter.png" alt="Joignez-nous sur Twitter"/></a></p>
 </aside>

 <p id="copyright">© Gaétan Weltzer  Tous droits réservés - tutoriel pour Living Tuts : <a href="http://www.livingtuts.com">www.livingtuts.com</a></p>

 <div></div>
 </footer>

 </div>
 <!--[if lte IE 8]></div> <! [endif]-->
 </body>
</html>

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.

<?php

include_once 'idents.php';

date_default_timezone_set('Europe/Paris'); # Définition du Time Zone

$token = '';
if(isset($_COOKIE['token']) && !empty($_COOKIE['token']))
	$token = $_COOKIE['token']; # Récupération des Cookies & Ou Sessions

 $token = $token; # Protection des Injection SQL ect...
 $login_q = $bdd->prepare("SELECT * FROM users WHERE token = :token AND valid = '1'");
 $login_q->execute(array(
	'token' => $token
 ));

if($login_q->fetchColumn() == 0) # Si login pass et valid nok
{
 header('Location: connexion.php'); # Redirection

 exit();
}

if(isset($_GET['delete'])) # Si le paramètre delete est spécifié dans l'URL
{
 if (!empty($_GET['delete']))
 {
 $id = $_GET['delete']; # Protection des Injection SQL ect...
 $delete_q = $bdd->prepare("UPDATE pages SET valid = '0' WHERE id = :id");
 $delete_q->execute(array(
	'id' => $id
 ));
 }
}

if(isset($_POST['titre'], $_POST['desc'])) # Création d'une page
{
 if (!empty($_POST['titre']) && !empty($_POST['desc']))
 {
 $title = $_POST['titre']; # Protection des Injection SQL ect...
 $text = $_POST['desc'];

 $insert_q = $bdd->prepare("INSERT INTO pages VALUES ('', :title, :text, '1')");
 $insert_q->execute(array(
	'title' => $title,
	'text' => $text
 ));
 }
}

$pages = array();

$selectAll_q = $bdd->prepare("SELECT * FROM pages WHERE valid = '1'"); # Selection de toutes les pages valides
$selectAll_q->execute();

while($result = $selectAll_q->fetch(PDO::FETCH_ASSOC))
{
 $pages[] = $result; # Replissage du tableau avec ces valeurs
}

?>
<!DOCTYPE html>
<html lang="fr">
 <head>
 <meta charset="utf-8" />
 <title>Real Tea : Tutoriel pour Living Tuts - fr.livingtuts.com</title>

 <link rel="stylesheet" href="style.css" type="text/css" />

 <!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" media="all" href="ie8.css"/><! [endif]-->
 <!--[if lte IE 7]>
 <link rel="stylesheet" type="text/css" media="all" href="ie7.css"/>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

 </head>

 <body>

 <!--[if IE]><div id="fond_ie"><! [endif]-->
 <nav id="menu_top">
 <ul>
 <li><a href="actu.php">Actualités</a></li>
 <li><a href="page.php">Pages</a></li>
 <li><a id="deco" href="logout.php">Se déconnecter</a></li>
 </ul>
 </nav>
 <div></div>

 <div>

 <header id="header_top">
 <a id="logo" href="#">
 <h1><img src="images/logo.png" alt="Real Tea : société spécialisée dans le thé rare de qualité"/></h1>
 </a>

 </header>

 <section id="actu">
 <header>
 <h2>Ajouter / Supprimer une page</h2>
 </header>

 <p>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.</p>

 <form method="post" action="page.php">
 <label for="titre">Titre de la page</label>
 <input id="titre" name="titre" type="text" required /> <!-- Remplir ce champ est requis -->
 <br/>
 <label for="desc">Description <em>(limité à 1000 caractères - il est conseillé de rester synthétique dans la description)</em></label>
 <textarea id="desc" name="desc"></textarea> <!-- Remplir ce champ est requis -->
 <br/>
 <input type="submit" value="Créer la page">
 </form>

 <header id="header_liste_actu">
 <h2>Pages déja crées</h2>
 </header>

 <!-- boucle affichant les dernières actus -->
 <ul id="news">
 <?php
 foreach ($pages as $page) # Boucle qui affiche les pages
 {
 echo '
 <li>
 <article>
 <header>
 <h3><a href="#">'.$page['title'].'</a></h3>
 </header>

 <div>
 <p>'.$page['text'].'</p>
 <div>
 <p><a href="#"> Voir la page</a></p>
 <p><a href="actu.php?delete='.$page['id'].'">Supprimer</a></p>
 </div>
 </div><!-- /.entry-content -->

 </article>
 </li>';
 }

 ?>
 </ul>

 </section>

 <div></div>

 <footer id="footer_site">
 <aside>
 <p>Retrouvez-nous aussi sur : </p><p style="float:left;"><a href="#"><img src="images/fb.png" alt="Joignez-nous sur Facebook"/></a> <a href="#"><img src="images/twitter.png" alt="Joignez-nous sur Twitter"/></a></p>
 </aside>

 <p id="copyright">© Gaétan Weltzer  Tous droits réservés - tutoriel pour Living Tuts : <a href="http://www.livingtuts.com">www.livingtuts.com</a></p>

 <div></div>
 </footer>

 </div>
 <!--[if lte IE 8]></div> <! [endif]-->
 </body>
</html>

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.

<?php

include_once 'idents.php';

$token = '';
if(isset($_COOKIE['token']) && !empty($_COOKIE['token']))
	$token = $_COOKIE['token']; # Récupération des Cookies & Ou Sessions

$insert_q = $bdd->prepare("UPDATE users SET token = '', token_date = '' WHERE token = :token AND valid = '1'"); # Insertion de l'adresse email dans la table
$insert_q->execute(array(
	'token' => $token
));

session_destroy();
$_SESSION = array();

setcookie('token', '', time()-3600); # Destruction des cookie

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

?>

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 :

<?php

include_once 'idents.php';

if(isset($_POST['email'])) # Si le formulaire de newsletter est soumis
{
 if (!empty($_POST['email']))
 {
 $email = $_POST['email']; # Protection des Injection SQL ect...
 $insert_q = $bdd->prepare("INSERT INTO newsletter VALUES('', :email, '1')"); # Insertion de l'adresse email dans la table
 $insert_q->execute(array(
	'email' => $email
 ));
 }
}
?>

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 ».

<aside id="news">
 <header>
 <h2>ACTUALITES</h2>
 </header>
 <ul>
 <?php

 $count = count($news); # Nombre de news

 for($i=0;$i<$count;$i++) # Boucle qui affiche les news
 {
 echo '
 <li>
 <article>
 <header>
 <h3><a href="#">'.$news[$i]['title'].'</a></h3>
 </header>

 <footer>
 <time datetime="2011-01-01" pubdate>'.$news[$i]['date_d'].' <span><br/>'.$news[$i]['date_b'].'</span></time> <!-- l\'atribut booléen pubdate signifie que le "time" spécifié est bien celui de l\'article au cas où il y aurait plusieurs <date> dedans-->
 </footer>

 <div>
 <p>'.$news[$i]['text'].'</p>
 <p><a href="#">Lire la suite</a></p>
 </div><!-- /.entry-content -->

 </article>
 </li>';
 }

 ?>

 </ul>
 </aside>

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 :

<form method="post" action="index.php">
<input name="email" type="email" placeholder="Mon adresse email" required> <!-- Remplir ce champ est requis -->
<br/>
<input type="submit" value="Je m'inscris">
 </form>

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.

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

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

Arnaud STECKLE vous explique en détails comment créer un design de site e-commerce avec Adobe Photoshop.

Bonjour à tous ! Bienvenue dans la seconde partie de notre tutoriel e-commerce. Après avoir vu ensemble toute la phase d’organisation et de réflexion créative, vous allez ici apprendre à réaliser la maquette de la page d’accueil du site. Notre outil principal de création sera Adobe Photoshop. Tout au long du tutoriel, je vais vous donner mes astuces pros à utiliser au quotidien pour travailler mieux, être plus efficace et éviter les tâches répétitives. Nous allons combiner de nombreuses techniques et utiliser une large palette d’outils. Allons-y c’est reparti !

(Résultat final – cliquez dessus pour voir en taille réelle)

01 – La base du design

Vous avez déjà probablement ouvert Adobe Photoshop . Pour commencer, créez un nouveau document (CTRL+N ou Pomme+N) en 72dpi, 1920 pixels de large sur 2570 pixels de haut. Notre futur design sera basé sur une grille. Malgré l’évolution des résolutions d’écrans, je vais utiliser la bonne vieille grille 960.gs. Elle nous permettra de placer les éléments du site de manière propre et ainsi de faciliter l’intégration future en HTML. Pour gagner du temps vous pouvez également installer le fabuleux plug-in Photoshop GuideGuide, qui vous permet de créer des grilles en quelques secondes. Vous voilà armé jusqu’aux dents pour commencer la création.

Avec l’outil Pot de peinture (G), remplissez le fond du document avec la couleur #eff0e9.

02 – Création du header avec le menu principal

Sur un nouveau calque, créez un cercle de 138 pixels de diamètre de couleur #e84743 que vous placez aligné au centre du votre document à 8 pixels du haut. Il s’agit là de la base du logo. Je vous invite à enregistrer l’image ci-dessous pour récupérer le logo Fine Cookies.

Une fois le logo placé comme ci-dessous, nous allons dessiner le menu principal.

Sur un nouveau calque « Barre Menu« , dessinez un Rectangle arrondi (U) avec un angle de 4 pixels sur une hauteur de 50 pixels et sur toute la largeur de notre grille. Nous allons à présent créer une ombre originale sous la barre de menu. Dupliquez la forme (CTRL + J ou Pomme+J). Glissez ce calque sous le calque « Barre Menu ». Remplissez- le de noir, tout en le décalant de 10 pixels vers le bas (Shift + Flèche Bas). Vous obtenez le résultat suivant :

Sélectionnez le calque « Barre Menu copie », puis faites un CTRL+T (Pomme + T) pour utiliser l’outil de redimensionnement. En faisant un clic droit sélectionnez « Déformation« .

Dans le menu de déformation (la barre du haut dans Photoshop), choisissez « Arc Inférieur » et donnez-lui une inflexion de -2,4% puis validez.

Dernière étape de notre ombre, donnez-lui un effet d’ombre. Et oui il est temps ! Je vous invite à faire un « Flou Gaussien » sur cette forme, via le menu Filtre > Atténuation > Flou gaussien. Réglez le flou sur un rayon de 5%. Une fois cette opération terminée, diminuez l’opacité du calque à 70% et gommez légèrement les bords avec l’outil « Gomme » (E) ou en utilisant un masque de fusion.

Pour lui donner de l’impact ajoutez un léger motif de papier que vous pouvez par exemple trouver sur Subtle Pattern.

Astuce : Comment ajouter un motif à une forme dans Photoshop ?
Tout d’abord, ouvrez l’image que vous souhaitez utiliser comme motif dans un nouveau document Photoshop. Puis allez sur Edition > Utiliser comme motif. Et voilà, rien de plus simple ! Votre motif est prêt. Utilisez-le ensuite via un effet de calque par exemple.

Ajoutez à présent le motif à la barre de menu, en ajoutant un effet de calque, sur le calque « Barre Menu« . Suivez les instructions de la capture d’écran ci-dessous :

Les liens de navigation

Avant dernière étape de la création du menu, l’ajout des liens. Créez un nouveau calque, avec une zone de texte (T). Ajoutez les liens en utilisant la police gratuite Fredoka One disponible sur Google Font . Elle servira tout au long du design comme police de titre. J’ai choisi une taille de 14 pixels avec la couleur #29888c.

Dernière étape de finalisation, dessinez des petites croix servant de séparateurs de liens sur un nouveau calque avec l’outil Crayon (B). J’ai utilisé la couleur #c12521.

Félicitation, notre menu est désormais terminé !

Liens annexes du header

Il nous reste encore du travail pour finaliser entièrement notre header. Comme vous pouvez le voir sur la maquette finale, nous avons trois liens d’accès au-dessus du menu principal. Ces liens discrets permettent respectivement de choisir la langue du site, d’accéder à son espace client et de consulter son panier.

Pour les mettre en place, créez une zone de texte. J’ai utilisé la police Overlock disponible également sur Google Font avec une couleur #8b8b90. Les différentes icônes proviennent du site Icon Finder. Ajoutez une ombre interne aux différents liens pour amener un élément de détail supplémentaire.

Créez ensuite un nouveau groupe de calque par lien (CTRL +G) pour ranger votre PSD au fur et à mesure de la création. C’est une étape essentielle, essayez d’avoir le réflexe.

03 – Création bloc de mise en avant produit

Dans cette nouvelle étape, nous allons travailler sur le visuel d’accroche du site web. C’est un visuel qui doit être impactant pour retenir l’attention de l’internaute et surtout l’inviter à en savoir plus. Il doit donc être soigné dans les moindres détails. Pour commencer, je place une photo de planche en bois, que j’ai préalablement détourée, sur toute la largeur de ma grille. Vous pouvez trouver l’image en utilisant Freepik par exemple. Suivant le zoning, c’est elle qui va supporter les produits à mettre en avant, avec des larges visuels, avec du texte et un bouton.

Sur un nouveau calque, je place ensuite un visuel de cookie préalablement détouré.

Je dessine des ombres avec la même technique vue pour le menu, c’est-à-dire en créant une forme ,puis en utilisant un flou gaussien pour créer un effet d’ombre.

Pour donner du dynamisme à la création, je vais ajouter quelques pépites de chocolat détourées à côté de la tour de cookies. Utilisez encore la même technique pour réaliser les ombres sous les pépites.

Avant même de placer du texte, pour donner des arguments produit, je vais mettre en place deux infobulles qui donnent des indications sur notre produit.

Dessinez un petit panneau de couleur blanche à l’aide de l’outil « Rectangle Arrondi » (U) en choisissant un arrondi de 4 pixels (comme d’habitude pour les propriétés de forme, regardez en haut de l’écran de Photoshop). Combinez deux rectangles pour créer une pointe et donc une mini-infobulle. Ajoutez-lui une ombre portée et le même motif que le menu principal.

Placez les arguments dans une zone de texte avec la police Fredoka One en utilisant la couleur #29888c. Créez un groupe de calques avec tout ces éléments en l’appelant « Mini Panneau 1″. Dupliquez le groupe pour créer de toutes pièces et en quelques secondes le second panneau.

Texte d’accroche

Il est temps à présent de créer notre accroche textuelle. Pour se faire, je vais utiliser trois zones de textes avec deux niveaux de titres différents et un paragraphe :

• Pour la première, utilisez la police Fredoka One, en taille 72 pixels avec la couleur #e84743.
• Pour la seconde, utilisez la police Cookie (quel hasard tiens ! ) disponible à nouveau sur Google Font , en taille 53 pixels avec la couleur #eea914.
• Enfin pour le paragraphe, Overclock Regular entre en jeu en taille 14 pixels avec toujours la couleur #8b8b90.

Finir le bloc en beauté

Pour terminer sur une action concrète, nous allons créer un bouton, invitant les internautes à accéder à la fiche produit, en dessinant un bouton en forme de flèche. Créez un rectangle arrondi de 2 pixels de couleur #e84743, puis un carré de la même couleur. Faites-le pivoter pour obtenir une flèche puis fusionnez les calques.

Ajoutez ensuite le texte « Miam, j’en profite ! » avec la police Fredoka One en corps 13 pixels de couleur blanche (#FFFFFF). Pour faire un rappel du panier, ajoutez l’icône du panier utilisée dans le header en utilisant une « Incrustation couleur » pour la faire ressortir en blanc. Sélectionnez votre bouton, et pour lui donner du volume, ajoutez lui un effet de Biseautage :

Ajouter l’ombre de la planche

Pour donner plus de réalisme à la planche, il convient de lui ajouter une ombre. Sur un nouveau calque, que vous placez sous le calque de la planche, créez un Rectangle noir (U) de 960 pixels de large sur environ 70 pixels de haut. Faites un CTRL+T pour activer l’outil de « Déformation » et sélectionnez « Perspective« .

Vous allez à présent donner à votre forme noire la même perspective que la planche au-dessus. Pour ce faire, cliquez sur la poignée en haut à gauche de la forme en maintenant la touche « Shift « et le clic appuyé, tout en amenant la poignée vers l’intérieur de la forme.

Vous obtenez le résultat suivant :

Pour créer l’effet d’ombre utilisez Filtre > Atténuation > Flou Gaussien comme vu précédemment pour le menu, avec ici un rayon de 10%. Gommez le surplus pour avoir un effet harmonieux comme sur le visuel ci-dessous.

04 – Un bien joli fond de site

Le background actuel du site est bien sympathique mais manque quelque peu d’impact. Pour donner de la profondeur au site, nous allons mettre en place un fond composé de bandes. Elles vont faire partie de l’identité globale du site et de la marque en rappelant inconsciemment les stores devant les magasins de biscuits.

Il existe de nombreuses techniques pour créer un tel fond, comme utiliser un motif ou dessiner des formes. Nous allons utiliser la seconde. Créez un nouveau groupe de calques (CTRL+G ou Pomme+G) au-dessus du calque « Background« . Ici nous allons dessiner une série de rectangles pour créer les rayures. Commencez par dessiner un rectangle vertical de 475 pixels de haut sur 40 de large avec la couleur #e5e8db en partant du coin haut gauche du site. Dupliquez ensuite le calque (CTRL+J ou Pomme+J) et décalez-le de 40 pixels vers la droite.

Répétez l’opération autant de fois que nécessaire pour couvrir toute la largeur du document. Vous obtenez au final un beau « mur » avec des rayures ! Facile et rapide non ?

Mise en perspective

Pour faire la jonction avec la prochaine partie du site, plutôt que de terminer de manière brutale la partie du haut, je vais faire continuer le fond en suivant la perspective de la planche. Voici comment procéder :

• Dupliquez le groupe de calques avec les rayures.
• Réduisez les rectangles en leur donnant une hauteur d’environ 200 pixels.
• Fusionnez ensuite le nouveau groupe de calques ou créez un objet dynamique vectoriel.

Utilisez la même technique qu’à l’étape 3, lors de la l’ajout de l’ombre sous la planche. C’est-à-dire en utilisant l’outil perspective pour déformer les rayures et les faire coïncider avec la perspective de la planche.

Au final, je créée un masque de fusion sur le groupe de calques contenant les rayures pour atténuer le bas et faire une belle finition.

Dans Photoshop on privilégiera toujours les méthodes non destructives en utilisant les masques de fusion plutôt que la gomme par exemple. Ainsi en cas d’erreur vous pourrez toujours revenir sur vos pas.

Félicitations, toute la partie d’accroche et le fond du site sont terminés ! Il est temps de passer à la suite. On y va !

05 – Présenter les nouveaux produits

D’après le cahier des charges, après avoir retenu l’attention de l’internaute grâce à notre visuel d’accroche, nous allons lui présenter les dernières nouveautés de la boutique. Fiez-vous toujours au zoning pré-établi pour avancer sur la conception de votre design.

Créez un nouveau groupe de calques « Content » qui va contenir la totalité du contenu du site. Dessinez un rectangle blanc sur toute la largeur du document et sur 1645 pixels de haut. Ajoutez-lui un contour selon les paramètres suivant :

Ce rectangle servira de fond pour le reste du site.

Ajouter un titre à la partie

Créez une zone de texte avec la police Fredoka One que vous connaissez bien désormais. Utilisez la couleur #e84743 avec un corps de 20 pixels, aligné au centre de notre site. Pour venir « soutenir » ce titre, dessinez deux traits de part et d’autre avec l’outil « Crayon » (B). Vous obtenez le résultat suivant :

Créer un ensemble image et texte puis dupliquer le groupe

Pour gagner du temps lors de la création de nos blocs produits, je vous conseille d’en créer un seul à 100%. Une fois que vous êtes satisfait du résultat, dupliquez ce groupe de calques pour mettre en place tous vos produits. Commençons notre premier groupe :

- Créez un nouveau calque avec le nom « Masque« . Dessinez un carré de 220 pixels. (Il sera le support de l’image produit). Ajoutez-lui une légère ombre portée pour souligner la future image.

- Glissez une photo de produit dans Photoshop et placez-la au dessus du calque « Masque » précédent.

- Faites un « Masque d’écrêtage » en faisant un clic droit sur l’image de cookie. Ainsi la photo de produit ne dépassera pas du cadre.

Notre bloc visuel étant en place, nous allons poser le titre, le prix, ainsi qu’un petit descriptif de l’article. Sur différents calques, placez les éléments comme indiqué sur la capture ci-dessous :

Pour le prix, dessinez simplement un rectangle rouge derrière le texte blanc. (Évident non ? ). Le premier bloc produit est maintenant terminé. Dupliquez ce groupe trois fois en laissant une marge de 20 pixels entre chaque blocs. Placez-les bonnes photos de produits, les bons titres, avec les bonnes descriptions et vous voilà avec une nouvelle partie accomplie !

Je le répète, mais rangez vos calques tout au long de la conception pour avoir un PSD propre pour l’intégration future.

06 – Mettre en image la saveur des cookies

Voici la prochaine mission qui vous attend. Comment réussir à convaincre les internautes que les produits vendus par Fine Cookies sont des produits de qualité ? D’après le cahier des charge, vous pouvez dégager certains arguments. Des ingrédients soigneusement sélectionnés, des recettes uniques, une préparation à la main, etc.

Nous allons littéralement mettre en image les qualités de la marque en utilisant des photos engageantes. De plus cette partie de la page d’accueil du site doit ressortir et contraster avec le reste de la page. Pour y arriver, nous allons dessiner une large barre rouge (#e84743) avec l’outil « Rectangle ». Utilisez une hauteur de 510 pixels. Ajoutez-y deux triangles, un en haut l’autre en bas pour symboliser le lien entre la partie du haut et la future partie catalogue du bas du site.

La base désormais posée, placez le titre principal de la partie en haut au centre du bloc, d’après la capture ci-dessous :

Les arguments seront représentés par 4 blocs. Nous allons donc utiliser la même technique que précédemment. C’est à dire, un bloc soigné, puis une duplication avec remplacement d’image.

• Créez un cercle (U) #FFFFFF de 210 pixels de diamètre. Il servira de masque pour nos images.
• Créez un second cercle #eea914 de 35 pixels de diamètre. Il servira d’indicateur avec un chiffre dédié.

Ajoutez les effets suivants au second cercle :

Ouvrez une image de blé dans Photoshop (trouvée sur www.sxc.hu). Glissez-la au-dessus du cercle blanc et faites un masque d’écrêtage. Placez ensuite le texte en blanc avec un titre habituel en Fredoka One et le texte description avec de l’Overclock Regular.

Créer un cercle avec Adobe Illustrator

On pourra se satisfaire de ce sympathique bloc rond, mais il manque encore de personnalité. Nous allons étoffer la création avec quelques éléments graphiques. Je vous invite à ouvrir Adobe Illustrator. Si vous ne possédez pas le logiciel vous pouvez récupérer la forme vectorielle dans le PSD final de la maquette.

Dans Illustrator, créez un nouveau document RVB. Dessinez un cercle de 210 pixels de diamètre avec un contour blanc de 0,25pt et sans remplissage de forme. Dans la fenêtre « Contour » choisissez un trait « à la main ».

Vous obtenez alors rapidement une forme qui servira à encercler notre bloc. Copiez la forme dans Photoshop et placez la au dessus de la photo.

Notre bloc étant terminé, dupliquez à présent le groupe trois fois en les plaçant à intervalles réguliers. Vous pourrez vous occuper du contenu plus tard, il s’agit simplement de travailler sur la structure pour le moment. Derniers éléments graphiques pour habiller le tout, de petites flèches « faites main » pour relier les blocs. Dessinez-les avec l’outil « Pinceau » (B) avec votre souris ou tablette graphique.

Vous pouvez également utiliser des brushs comme ceux-ci par exemple : Hand Drawn Arrow Photoshop Brushes.

Félicitations, encore un bloc de contenu achevé. Courage vous n’êtes pas loin d’avoir terminé. Mais il reste tout de même des choses à faire et à apprendre. Alors on s’accroche et on continue !

07 – L’extrait du catalogue, un élément essentiel en e-commerce.

La partie inférieure du site comporte une remontée de produis du catalogue, comme prévu dans le zoning.  Au niveau design nous allons continuer sur un fond blanc, histoire de bien contraster avec la partie supérieure rouge. Utilisons 6 colonnes de notre zoning, autrement dit, la moitié gauche de notre design.

Je procède toujours de la même manière : un titre, des rectangles à utiliser comme masques pour les images. Commencez par écrire un titre avec la police Fredoka One, couleur #e84743 et 19 pixels.

Dessinez à présent un carré de 140 pixels. Comme dans la partie 05, ajoutez lui l’ombre portée suivante :

Dupliquez les carrés pour former ce qui va être notre grille de produits. Pour donner du rythme à la présentation des produits, placez 5 petits carrés et un grand comme sur la capture ci-dessous.

(Les carrés seront blancs au final, ils sont gris ici uniquement pour qu’ils soient visibles pour vos petits yeux ).

Occupons-nous du premier bloc produit. Il servira de modèle pour toute la grille. Glissez une image de produit dans Photshop, puis créez un masque d’écrêtage pour qu’elle soit bien contenue dans le cadre.

Pour gagner de la place en hauteur, nous allons placer les informations produits directement avec un cadre transparent sur la photo :

• Dessinez un rectangle #ee7572 au-dessus de la photo de produit sur la moitié de sa hauteur.
• Diminuez l’opacité du calque du rectangle à 80%.

Pour en faire une forme originale, nous allons « couper » les coins du rectangle. Pour ne pas détruire notre forme de base, utilisez un masque de fusion.

• Ajoutez un masque de fusion au calque du rectangle.
• Dessinez un cercle d’environ 16 pixels diamètre, que vous placez sur un du coin supérieur gauche du rectangle.
• Maintenez la touche CTRL et cliquez sur le cercle dans la pile de calques pour faire une sélection.
• Cliquez ensuite sur le masque de fusion du calque du rectangle. Allez dans le menu Édition > Remplir et ajouter du noir. Grâce à cette opération vous masquez le coin supérieur du rectangle.

Répétez l’opération pour le coin supérieur droit du rectangle. Ajoutez les informations du produit en texte blanc avec nos polices habituelles. Vous obtenez le résultat suivant :

Vous savez comment faire un bloc, donc rien de plus simple pour réussir à mettre en place les autres. Dupliquez les groupes et composez votre grille. Adaptez simplement la taille pour le bloc de plus grande taille.

Pour terminer cette partie, il est essentiel de donner la possibilité à l’internaute de voir encore plus de produits en accédant facilement au catalogue. Vous avez la solution ? Je propose pour ma part de créer un bouton en bas de notre grille de produits. Dessinez un rectangle arrondi (4 pixels) et dans un souci de cohérence, copiez-collez le style du calque à partir du bouton du header (voir plus haut dans la partie 03).

Attaquons nous à présent aux blocs censés mettre en confiance l’internaute lorsqu’il commande en ligne.

08- Mettre en confiance l’internaute

Le but ici est d’avancer des arguments commerciaux pour rassurer l’internaute. Nous allons dessiner des étiquettes de prix, accompagnées de visuels pour mettre en avant les arguments. Pour commencer mettons en place le traditionnel titre en utilisant ici la police Cookie, en couleur #eea914, en corps 35 pixels. Ajoutez deux petites lignes avec l’outil Crayon (B) de chaque côté pour soutenir le titre.

Nous allons créer le premier bloc de 138 pixels de large. Utilisez l’outil « Rectangle arrondi » pour créer la forme de base avec la couleur #eff0e9. Utilisez un second rectangle pour dessiner la pointe. Enfin utilisez un cercle pour symboliser l’accroche de l’étiquette. Jetez un œil à la capture ci-dessous pour y voir plus clair.

Pour donner de la vie à cette étiquette ajoutez-lui une ombre et une texture de papier que vous pouvez récupérer sur Subtle Pattern par exemple.

Voici le résultat attendu :

A présent, ajoutez un titre avec la police Fredoka One en corps 15 pixels de couleur #29888c. En bas de l’étiquette, ajoutez du texte qui symbolisera un lien avec la police habituelle Overclock Bold 15 pixels de couleur #e84743. Avant d’habiller les arguments avec les visuels, dupliquez le bloc trois fois.

Nous voici avec trois bloc à illustrer. Le but est de faire passer le message au travers d’un visuel fort qui s’intégrera parfaitement dans le design. Commençons par le bloc de livraison. Nous allons l’illustrer avec une planisphère. Pour être orignal, utilisez une photo de cookie sans pépites de chocolat, que vous pouvez trouver sur le site www.photoxpress.com par exemple. Une fois détouré placez le cookie à la bonne taille dans le bloc.

Téléchargez ensuite une carte du monde en format vectoriel (pour avoir un fond transparent). Vous pouvez trouver une sélection sur Speckyboy par exemple. Placez la carte sur le cookie. Passez le calque en « Incrustation couleur » pour lui donner une teinte réaliste. J’ai utilisé #3d2b21. Modifiez le mode de fusion du calque pour le passe en mode « Lumière Crue ». Ajoutez ensuite une légère ombre sous le cookie et le tour est joué !

Les deux visuels des blocs suivants ont été conçus sur le même principe : en utilisant une photo de base combinée à un élément existant du design. Utilisez une boîte pour symboliser la livraison, et un ticket pour le programme de fidélité. Je n’entrerai pas plus dans les détails, il s’agit simplement d’apposer le logo Fine Cookies sur les objets.

Dupliquez simplement le calque du logo se trouvant dans le header pour le placer sur les objets.

09- Créer du lien social

Essentiels sur les sites d’aujourd’hui, les liens vers Facebook et Twitter ne peuvent être oubliés. Même si dans notre cas, ils interviennent en bas de page, ils trouvent toute leur place à côté du catalogue et des éléments de réassurance. Pour marquer les esprits et les rendre reconnaissables en un coup d’œil, nous allons dessiner deux rectangles arrondis avec un aplat de couleur :

• Le premier en bleu #3b5998 de Facebook avec une taille de 220 x 85 pixels. Ajoutez par dessus du texte blanc avec Fredoka One 14 pixels. Placez-le du côté droit, laissez le côté gauche pour le célèbre « F ». Vous pouvez trouver le logo sur la page officielle du site : Facebook.
• Faites de même pour Twitter en utilisant un rectangle similaire de la couleur #00aced. Téléchargez le logo du réseau social sur la page officielle au format .PNG ou .EPS.

Au final les liens sont simples et reconnaissables au premier coup d’œil

10 – Finir en beauté

Je peux apercevoir les gouttes de sueurs qui dégoulinent le long de votre front, je ressens la tension et l’impatience de terminer ce design avec un beau pied de page. Quelle chance, nous y sommes !

Pour terminer la page d’accueil, dessinons ensemble le footer. Nous allons placer une barre séparative en utilisant un motif de bois.

Dupliquez le calque de la planche du header et placez ce nouveau calque dans un groupe que vous nommez « Footer« . Dupliquez à nouveau deux fois ce calque. Placez-les sur toute la largeur du design.

Sélectionnez la planche de gauche et faites un CTRL+T > Transformation > Symétrie Axe Horizontal pour que les couleurs soient « raccords » sur toute la longueur du bois. Effectuez la même opération pour la planche de droite.

Sélectionnez les trois calques de planches dans la palette des calques puis faites un Clic droit > Fusionner les calques. Avec l’outil de sélection (M), sélectionnez la partie haute des planches pour les supprimer et ne garder que la face avant de la planche :

Après la suppression vous obtenez ceci :

Dupliquez le logo du header pour le placer au centre de la planche. Créez ensuite un rectangle arrondi blanc de 300x 220 pixels, que vous placez sous le logo telle une feuille de papier. Ajoutez-lui la même texture de papier que le menu principal.

Rappel : pour copier un effet, sélectionnez un calque et avec un clic droit choisissez « Copiez le style du calque ».

Ajoutez également une ombre au bloc selon la technique vue pour le menu principal (voir la partie 02). Pour finaliser ce bloc, ajoutez l’adresse du magasin avec la police Overclock en couleur #29888c.

Placez une dernière phrase de mentions légales en bas de page en utilisant toujours la police Overclock avec la même couleur. Dernier détail, dupliquez la ligne du header pour créer le fond du footer. Avec ce fond en rayures vous finissez sur une note graphique qui est totalement en adéquation avec le haut de page.

Que dire ? Je ne trouve pas mes mots ! Vous avez TER-MI-NE !

Dernier conseil avant de fermer votre PSD, rangez une dernière fois vos calques !

Conclusion

Nous avons parcouru ensemble 10 grosses étapes pour venir à bout de cette page d’accueil de site e-commerce. J’espère que ce tutoriel Photoshop vous a plu, que vous y avez pris du plaisir et bien entendu appris des choses. Je vous invite dès à présent à partager ce tutoriel avec vos amis !

N’hésitez-pas à laisser vos questions et remarques en laissant des commentaires. Je vous donne également rendez-vous à la partie 3 pour parler de découpage et d’intégration à l’aide d’HTML 5 et CSS 3.

À très bientôt sur Living Tuts (et bien évidement sur mon blog www.webdesignertrends.com). !

Arnaud STECKLE vous explique comment créer un webdesign de site e-commerce en passant par différentes phases types de conception de projets web.

Bonjour à tous ! L’objectif de ce tutoriel est clair : vous allez créer un modèle de site e-commerce ! De la maquette sous Photoshop à l’intégration statique, vous allez apprendre à construire un projet web pas à pas. Pour rendre le tutoriel pertinent, je vais le placer en situation réelle, comme si vous aviez affaire à un client, avec de réelles attentes. Afin de détailler un maximum d’étapes et avoir une vision globale du projet, je vais le découper en 3 grandes parties :

1. La phase d’organisation et de réflexion créative.
2. La conception du webdesign sous Photoshop.
3. L’intégration du template avec HTML5 et CSS3.

Au final, vous disposerez d’une intégration statique, prête à être dynamisée avec votre langage côté serveur préféré (PHP, ASPX…). Je m’arrête volontairement après cette étape d’intégration pour vous laisser le choix du CMS ou de la technique à utiliser. Je laisse simplement cette part du travail qui est plutôt réservée à un développeur web. Pour ne pas alourdir le tutoriel, la phase commerciale et stratégique est ici laissée de côté. Ne l’oubliez pas, nous allons surtout traiter le problème d’un point de vue graphique. C’est parti !

A- Organisation du projet

Notre entreprise fictive s’appelle Fine Cookies, une société connue et reconnue pour ses savoureux biscuits. Malgré sa présence avec une boutique « physique », Fine Cookies ne possède pas encore de site Internet. Souhaitant développer ses ventes et sa présence en ligne, elle est à la recherche d’un professionnel du web pour réaliser son premier site e-commerce. Grâce à votre portfolio, votre expérience et vos contacts, vous êtes très rapidement contacté par Fine Cookies qui souhaite vous rencontrer pour discuter ensemble de la création d’un site web et d’un cahier des charges.

- Cerner les attentes du client

Nous y voilà ! La définition globale du projet commence en général par une réunion pour la future élaboration d’un cahier des charges. Après votre rendez-vous avec Fine Cookies, vous savez mieux désormais quelle est la philosophie de l’entreprise, quelle est son histoire. Vous avez clairement défini les points suivants avec le client :

• Quels sont les objectifs du site ?
• Quelle est la cible visée ?
• Quelle image doit véhiculer le site ?
• Quel est le délai de mise en ligne ?
• …

Vous avez également pris le temps de consulter si l’entreprise possède une charte graphique et quelles est son exigence d’un point de vue graphique. Vous avez aussi expliqué clairement à votre client quel est le déroulement d’un projet web et quelles sont les étapes de validations obligatoires. Autant de questions à maitriser dès le première contact, pour construire le projet sur de solides fondations.

Dans notre cas fictif, la marque souhaite solidement s’implanter en ligne pour mieux se faire connaître en France, booster ses ventes et percer outre-Atlantique, en vue d’y installer des boutiques d’ici les 3 prochaines années. Même si son activité s’est diversifiée avec le temps, le produit phare de Fine Cookies reste encore le cookie . Le créateur de biscuit cible une clientèle large, en proposant des prix abordables, en misant toujours sur une qualité irréprochable. La société est d’ailleurs connue pour son respect des ingrédients et sa maitrise parfaite des recettes, qui au final, offrent des saveurs authentiques et préservées. Les consommateurs offrent très régulièrement des produits Fine Cookies à leurs proches en toutes occasions.

Avant de terminer la réunion, le responsable vous montre également quelques sites qu’il trouve a son goût, mais également ce que propose ses concurrents directs. Fine Cookies possède pour l’instant « une identité visuelle » très basique, basée sur de la typographie Comic Sans MS (autant dire que tout est à faire…).

Grâce à ce rendez-vous, vous avez pu mettre en lumière certains mots clés qui vous ont permis de cerner les attentes de l’entreprise. Vous devez sûrement déjà avoir plusieurs idées et pistes en tête. Pensez à bien structurer les informations en prenant des notes, pour établir le futur cahier des charges et imaginer l’identité globale du site.

- L’élaboration du cahier des charges

Le cahier des charges sert à détailler les différentes contraintes vues ci-dessus avec votre client, mais aussi et surtout à définir précisement les contraintes fonctionnelles, temporelles et budgétaires. Il est normalement établi par le client. Il n’est pas rare que cet exemplaire client serve uniquement de base. En effet, l’idéal pour un client « sans expérience dans le web » est simplement de vous faire confiance. Vous êtes le professionnel du domaine, faites votre boulot. Tout comme Fine Cookies qui n’a pas besoin de vos conseils en matière de farine à utiliser pour ses biscuits au chocolat . Attention, je parle tout de même de travailler en équipe.

Le cahier des charges du client va vous permettre de définir ensemble un cahier des charges fonctionnel complet, dans lequel vous porterez toute votre expertise.

Commencez par saisir les différents détails du projet énoncés préalablement, pour que la lecture du cahier des charges permette de cerner en un clin d’œil de quel type de projet il s’agit. Toujours en fonction des informations fournies par le client, proposez une arborescence complète du projet. Celle-ci vous permettra de voir l’étendue du site et ainsi la quantité de travail à fournir. Elle précisera à votre client le contenu textuel et photographique à fournir si besoin. L’arborescence donnera également un aperçu des fonctionnalités proposées.

Tiens, parlons des fonctionnalités !

Une fois la boutique lancée, le client souhaite ajouter des produits à son catalogue. Vous devez être en mesure de proposer une solution e-commerce qui soit adaptée à ses besoins. Dans cet exemple, n’étant pas développeur, vous allez donc travailler sur la question avec un développeur web. Nous avons besoin d’une boutique « standard » avec les spécifications suivantes :

• Gestion de plusieurs langues
• Fonctionnalité basique de panier
• Compte utilisateur sécurisé
• Éditer des bons de réductions
• Choisir un coffret cadeau lors de la commande
• Proposer un site capable d’évoluer si besoin

Vous conseillez également à votre client de mettre des produits en avant et de faire des offres promotionnelles pour booster les ventes.

D’après ces fonctionnalités, vous pouvez aborder la présentation des technologies mises en œuvre pour la réalisation du projet. Dans notre exemple, il s’agit d’une boutique codée en HTML5 / CSS3. Le développement sera assuré par un développeur qui utilisera probablement un CMS e-commerce comme Prestashop pour ne citer que cet exemple. Il est également important de faire la lumière sur le fonctionnement de l’hébergement du site car c’est un des éléments qui entrera dans la facturation client.

Il s’agit là bien évidement d’un déroulement en version simplifiée, qui est à détailler d’autant plus dans un réel cahier des charges.

Établir un zoning des pages.

Prochaine étape, la réalisation d’un zoning. Il sert à schématiser les pages du sites à l’aide de blocs. Le but est de montrer les différentes zones de contenu présents sur votre page. C’est une étape indissociable du futur design. Il permet de définir l’organisation de la page et sert de support au client. Après avoir établi un zoning de quelques pages clés du site, il vous reste tout de même encore du chemin avant d’attaquer votre design.

Zoning final de la page d’accueil Fine Cookies

Pour permettre au site de se faire connaître comme le souhaite votre client, vous lui présentez votre stratégie de communication et vos leviers webmarketing. Campagne Google Ad-Words ? Jeu sur Facebook ? Campagne vidéo virale ? Autant d’arguments à soulever, mais à détailler dans un cahier des charges à part entière. En effet, il s’agit ici que de simples suggestions, qui donneront lieu à d’autres projets et d’autres budgets une fois le site mis en ligne. Elles montrent toutefois votre professionnalisme et votre souci d’accompagnement client, de la conception à la réussite et le succès final en ligne.

Pour en revenir au site en lui-même, il vous reste à présenter votre gestion du temps en fonction des impératifs techniques et des souhaits de votre client. Un retro-planning permettra de faire toute la lumière sur les étapes importantes du projet. Essayez de rendre le tout visuel, intéressant et attractif. Faites participer le client aux moments clés de validations du projet, en organisant des réunions régulières.

Dernier chapitre et pas des moindres : le budget. Pour vous aider à chiffrer votre projet voici quelques sites et ressources :

• La facturation d’un webdesign par Design Spartan
• Le site de Marie Julien pour ses informations pour freelances
• Le kit de survie du créatif par Metiers-graphiques.fr

Après cette explication détaillée du cahier des charges, je vous propose un petit récapitulatif pour avoir le plan sous les yeux en un clin d’œil.

Récapitulatif du cahier des charges :

• Présentation de l’entreprise, avec sa philosophie, son histoire…
• L’objectif du site web
• L’arborescence
• Les fonctionnalités
• Les technologies mises en œuvre
• Zonings
• Communication et webmarketing (publicité, suivi et reporting)
• La gestion du temps (retro-planning)
• Le budget.

B- Réflexion créative

Votre devis est signé, vous avez déjà encaissé un acompte, à présent c’est à vous de jouer ! Vous entrez dans la phase que j’appelle ici « réflexion créative ». C’est ici que vous allez développer plus en détails vos zonings, trouver de l’inspiration, faire vos recherches graphiques. Le cahier des charges étant bien défini vous possédez déjà les zonings et l’idée globale de l’identité de la marque. Au vue de la charte graphique inexistante, vous avez également proposé de créer un logo en plus de la création du webdesign. Voyons ensemble comment organiser le tout au mieux, pour attaquer le webdesign sous Photoshop en toute tranquillité.

- Chercher de l’inspiration :

Vous avez déjà avancé sur cette partie lors de l’élaboration préalable du cahier des charges. En analysant les sites concurrents et en parcourant les blogs et galeries de design (comme Webdesignertrends par exemple ) vous avez déjà peut-être une petite idée du style graphique. Si non, surfez, faites un tour en ville, prenez l’air, et surtout éloignez-vous temporairement de votre machine. Griffonnez, notez-vous des mots clés, recherchez, le tout pour au final placer les produits de Fine Cookies dans leur univers. Cet univers précis se construira avec des couleurs, des typographies spécifiques, et votre style graphique propre.

- Créer un mood-board :

Un mood-board est un poster constitué d’images inspirantes pour vous immerger dans l’univers de votre futur site. Parcourez le web et analysez tout ce qui se rapporte à l’univers des cookies. Servez-vous également des images fournies par votre client si tel est le cas. Créez un large document Photoshop ou même un simple document avec un logiciel de traitement de texte pour avoir toutes les images sous les yeux. Vous allez ainsi en dégager des couleurs, y voir des éléments récurrents, pour petit à petit vous amener à créer une image de marque et un design cohérent pour votre site.

- Créer le logo : faites des schémas, déchirez, recommencez  !

Créer un logo est une tâche complexe qui nécessite beaucoup de réflexion et du temps. En effet, à lui seul, le logo va représenter la marque. Il est donc important de le soigner, de lui donner du sens et de l’efficacité. Pour plus de conseils sur la création d’un logo je vous renvoie aux très bons sites et articles :

• Comment réaliser un logo exceptionnel
• 9 mistakes designers make when creating a logo
• The Psychology of logo design
• Logo Design love
• Logo Pond
• Comment un logo peut valoriser votre entreprise ?

Pour vous donner un exemple concret de création de logo, voici comment j’ai procédé pour Fine Cookies. Après m’être inspiré de divers exemple et conseils en tout genre, j’ai commencé a dessiner une vague forme de logo lors de la recherche graphique du webdesign sur papier. Intuitivement je suis parti sur un disque, qui évoque à lui seul le cookie ! Ce disque va servir de base au logo en lui apportant de solides fondations graphiques. Débuter sur une forme basique est une bonne manière de procéder pour créer un logo.

Recherches graphiques sur papier

Pour accompagner ce disque, je dessine ce qui pourrait devenir la typographie représentant la marque Fine Cookies. D’après le mood-board créé précédemment, je me rends compte qu’une typographie manuscrite correspondrait parfaitement à Fine Cookies. En effet, elle permettra de diffuser l’image authentique que la marque souhaite transmettre, en rappelant les enseignes des magasins d’époque par exemple. C’est tout naturellement que je me dirige en priorité vers des typographies gratuites. Mes recherches me mènent à la police Cookies (quel hasard ), disponible gratuitement sur Google Font.

Après divers essais de compositions avec la typographie, je me met à abandonner l’idée du disque. En effet, il devient une contrainte pour placer les mots « Fine » et « Cookies ».  Au fil des essais et des croquis, je reviens tout de même sur ce disque, qui donne un impact fort à l’identité. C’était donc une bonne idée au final ). Je décide d’accompagner le logo d’une baseline « eat them all ! » (mangez les tous). J’utilise l’anglais car j’ai toujours en tête que la marque souhaite percer outre-Atlantique. Ce souffle international doit être facilement lisible et rattaché au logo. Pour rester simple, j’ai choisi une police sans empattement (Fredoka One) qui se mariera très bien avec notre police Cookie. Je commence ensuite à placer les éléments et tester différentes couleurs :

Recherches graphiques pour le logo Fine Cookies

Rappelons-le l’image de marque doit refléter la philosophie et le type de société en un clin d’œil. Dans notre cas, un site de biscuits se doit d’utiliser des couleurs « alimentaires« , comme le rouge ou l’orange par exemple. Le beige peut-être très bien utilisé comme couleur complémentaire pour atténuer ces couleurs chaudes. Après réflexion j’abandonne rapidement les couleurs sombres ou le bleu qui ne renverrai pas la bonne image . Il manque tout de même un éléments massif pour soutenir le logo. Il s’agit encore une fois de ce fameux disque, que je décide de remplir en rouge.  J’ajoute également du bruit dans le fond pour donner un côté usé. Au final, j’obtiens un logo :

• Identifiable facilement
• Utilisant deux typographies différentes
• Qui peut-être apposé sur tout type de support, autant sur le web, que sur un magasin par exemple

La planche en bois dans le visuel ci-dessous est un élément de la charte future. Elle soutient l’identité authentique et quelque peu vintage de la marque.

Logo final de Fine Cookies

- Hiérarchiser les informations et pensez à l’ergonomie :

Lors de la définition plus précise de votre zoning papier, pensez à bien définir un ordre d’importance dans les informations que doit véhiculer le site. Quoi mettre en avant ? Pourquoi ? Par quelle astuce graphique le faire ressortir ? Autant de questions auxquelles vous pouvez déjà répondre à partir de cette étape. Bien évidement une fois arrivé à l’étape de conception, vous trouverez sûrement d’autres alternatives et d’autres problèmes. Une bonne préparation en amont est toujours payante au final. Pensez déjà à l’ergonomie du site, à comment les internautes vont utiliser le site, se déplacer, scanner les informations. N’oubliez-pas que le site doit être agréable et simple à utiliser pour maximiser les conversions.

- Contraintes techniques et intégration web :

C’est une des différences fondamentales dans notre métier de webdesigner. Même si nous sommes issus d’un monde créatif comme un graphiste par exemple, nous ne pouvons pas faire abstraction des contraintes  inhérentes à la création d’un site web. De très bonne bases en intégration constituent un énorme plus pour créer des maquettes qui seront parfaitement intégrables et fidèles à la création Photoshop. Certaines données seront dynamiques et variables alors pensez-y. Ne vous mettez pas des bâtons dans les roues, pensez à l’optimisation de l’intégration et au référencement. Vous allez gagner énormément de temps par la suite.

Pour conclure

Vous avez parcouru une très bonne partie de la phase en amont du webdesign. Se mettre dans le bain permet d’y voir plus clair et d’imaginer la quantité de travail nécessaire pour arriver à un site concluant et réussi. Avec cette préparation intensive, vous êtes prêt pour ouvrir Adobe Photoshop et enfin passer au webdesign pur et dur ! N’hésitez pas à poser toutes vos questions en laissant un commentaire ci-dessous. Suivez-moi, je vous invite à consulter la seconde partie de ce tutoriel !

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 !

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 :

1. 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.
2. 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.
3. Pour ce tutoriel vous avez besoin de 2 logiciels : Chrome ou Safari et Notepad++.
4. Vous avez aussi besoin de l’image fournie dans l’archive placé au tout début du tuto.
5. 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.

</pre>
<div>
 <!-- Conteneur de l'icone						-->
<div id="gauche">
 <!-- Partie Gauche								-->
<div id="g1"></div>
</div>
 <!-- /Partie Gauche								-->
<div id="centre">
 <!-- Partie centrale 							-->
<div id="gauche-centre">
 <!-- Partie Gauche centrale 					-->
<div id="gc1"></div>
 <!-- Bloc Principal								--></div>
<div id="droite-centre">
 <!-- Partie droite centrale						-->
<div id="dc1"></div>
 <!-- Bloc Principal                             --></div>
</div>
<div id="droite">
 <!-- Partie droite								-->
<div id="d1"></div>
</div>
 <!-- /Partie droite								--></div>
<pre>
												<!-- /Conteneur de l'icone						-->

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.

1. 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)

   
   
   

2. Skew est une fonction qui fonctionne sur deux axes, celui des ordonnées (x) et des abscisses (y) , on peut traduire Skew par  «  pencher   » ou  «  dévier   ». On pourra donc  «  dévier   » les différents axes d’un bloc afin de lui donne la forme que l’on souhaite obtenir.
   • 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é.

</pre>
<div>
 <!-- Conteneur de l'icone						-->
<div id="gauche">
 <!-- Partie Gauche								-->
<div id="g1"></div>
 <!-- La base inférieure(partie sombre)			-->
<div id="g2"></div>
 <!-- La base supérieure(partie sombre)			--></div>
 <!-- /Partie Gauche								-->
<div id="centre">
 <!-- Partie centrale 							-->
<div id="gauche-centre">
 <!-- Partie Gauche centrale 					-->
<div id="gc1"></div>
 <!-- Bloc Principal								--></div>
<div id="droite-centre">
 <!-- Partie droite centrale						-->
<div id="dc1"></div>
 <!-- Bloc Principal                             --></div>
</div>
<div id="droite">
 <!-- Partie droite								-->
<div id="d1"></div>
 <!-- Couche inférieure							-->
<div id="d2"></div>
 <!-- La base supérieur (partie sombre)			--></div>
 <!-- /Partie droite								--></div>
<pre>
												<!-- /Conteneur de l'icone						-->

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 :

</pre>
<div id="gauche">
 <!-- Partie Gauche								-->
<div id="g1"></div>
 <!-- La base inférieure(partie sombre)			-->
<div id="g2"></div>
 <!-- La base supérieure(partie sombre)			-->
<div id="g1-min"></div>
 <!-- La seconde base inférieure(partie claire)	-->
<div id="g2-min"></div>
 <!-- La seconde base supérieure(partie claire)	--></div>
<pre>

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 :

</pre>
<div id="gauche-centre">
 <!-- Partie Gauche centrale 					-->
<div id="gc1"></div>
 <!-- Bloc Principal								-->
<div id="gc2"></div>
 <!-- Bordure Claire								--></div>
<pre>

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 :

</pre>
<div id="dc1">
 <!-- Bloc Principal                             -->
<div id="dc1-1">
 <!-- Partie Claire								-->
<div id="dc1-1-1"></div>
 <!-- Reflet 1 (dégradé)							--></div>
 <!--/Partie Claire								--></div>
<pre>

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 :

</pre>
<div id="droite-centre">
 <!-- Partie droite centrale						-->
<div id="dc1">
 <!-- Bloc Principal                             -->
<div id="dc1-1">
 <!-- Partie Claire								-->
<div id="dc1-1-1"></div>
 <!-- Reflet 1 (dégradé)							-->
<div id="dc1-1-2"></div>
 <!-- Reflet 2									--></div>
 <!--/Partie Claire								--></div>
<div id="dc2"></div>
 <!-- Ombre 1									-->
<div id="dc3"></div>
 <!-- Ombre 2									--></div>
<pre>

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;</pre>
<div>-webkit-transform: scale(.9) rotate(-2deg) skewx(-3deg);</div>
<div>-moz-transform: scale(.9) rotate(-2deg) skewx(-3deg);</div>
<div>-o-transform: scale(.9) rotate(-2deg) skewx(-3deg);</div>
<div>transform: scale(.9) rotate(-2deg) skewx(-3deg);</div>
<pre>
-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 :

</pre>
<div class="box">
 <!-- Conteneur de l'icone						-->
<div id="gauche">
 <!-- Partie Gauche								-->
<div id="g1"></div>
 <!-- La base inférieure(partie sombre)			-->
<div id="g2"></div>
 <!-- La base supérieure(partie sombre)			-->
<div id="g1-min"></div>
 <!-- La seconde base inférieure(partie claire)	-->
<div id="g2-min"></div>
 <!-- La seconde base supérieure(partie claire)	--></div>
 <!-- /Partie Gauche								-->
<div id="centre">
 <!-- Partie centrale 							-->
<div id="gauche-centre">
 <!-- Partie Gauche centrale 					-->
<div id="gc1"></div>
 <!-- Bloc Principal								-->
<div id="gc2"></div>
 <!-- Bordure Claire								--></div>
<div id="droite-centre">
 <!-- Partie droite centrale						-->
<div id="dc1">
 <!-- Bloc Principal                             -->
<div id="dc1-1">
 <!-- Partie Claire								-->
<div id="dc1-1-1"></div>
 <!-- Reflet 1 (dégradé)							-->
<div id="dc1-1-2"></div>
 <!-- Reflet 2									--></div>
 <!--/Partie Claire								--></div>
<div id="dc2"></div>
 <!-- Ombre 1									-->
<div id="dc3"></div>
 <!-- Ombre 2									--></div>
</div>
<div id="droite">
 <!-- Partie droite								-->
<div id="d1"></div>
 <!-- Couche inférieure							-->
<div id="d2"></div>
 <!-- La base supérieur (partie sombre)			-->
<div id="d3">
 <!-- Conteneur base inférieure					-->
<div id="d3-1"></div>
 <!-- Base inférieure (partie sombre)			--></div>
</div>
 <!-- /Partie droite								--></div>
<pre>
												<!-- /Conteneur de l'icone						-->

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 : dataurl.net

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 :

</pre>
<div id="gd"></div>
<div id="dd"></div>
<div id="gauche">
 <!-- Partie Gauche								-->
<div id="g1"></div>
 <!-- La base inférieure(partie sombre)			-->
<div id="g2"></div>
 <!-- La base supérieure(partie sombre)			-->
<div id="g1-min"></div>
 <!-- La seconde base inférieure(partie claire)	-->
<div id="g2-min"></div>
 <!-- La seconde base supérieure(partie claire)	--></div>
<pre>
											<!-- /Partie Gauche								--></pre>
<div id="centre">
 <!-- Partie centrale 							-->
<div id="gauche-centre">
 <!-- Partie Gauche centrale 					-->
<div id="gc1"></div>
 <!-- Bloc Principal								-->
<div id="gc2"></div>
 <!-- Bordure Claire								--></div>
<div id="droite-centre">
 <!-- Partie droite centrale						-->
<div id="dc1">
 <!-- Bloc Principal                             -->
<div id="dc1-1">
 <!-- Partie Claire								-->
<div id="dc1-1-1"></div>
 <!-- Reflet 1 (dégradé)							-->
<div id="dc1-1-2"></div>
 <!-- Reflet 2									--></div>
 <!--/Partie Claire								--></div>
<div id="dc2"></div>
 <!-- Ombre 1									-->
<div id="dc3"></div>
 <!-- Ombre 2									--></div>
</div>
<div id="droite">
 <!-- Partie droite								-->
<div id="d1"></div>
 <!-- Couche inférieure							-->
<div id="d2"></div>
 <!-- La base supérieur (partie sombre)			-->
<div id="d3">
 <!-- Conteneur base inférieure					-->
<div id="d3-1">
 <!-- Base inférieure (partie sombre)			-->
<div id="d3-1-1"></div>
 <!-- Seconde base supérieure (partie claire)	-->
<div id="d3-1-2"></div>
 <!-- Seconde base inférieure (partie claire)	--></div>
 <!-- /Base inférieure							--></div>
</div>
<pre>
											<!-- /Partie droite								-->

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,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);
		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

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

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).

• 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).

• 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).

• 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).

• 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).

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.

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 !