Salut et bienvenue à toi petit Trashien.
Dans ce nouveau tutoriel by PokémonTrash, nous allons apprendre à faire une page web complète.
Oui, une page web. Une page comme celle sur laquelle vous êtes en ce moment ! Ce qui implique que vous allez également devoir vous occuper du codage, mais avouons-le, sans ce petit plus, ce serait nettement moins drôle :p
Donc pour ce tutoriel, vous allez avoir besoin de :
- Quelques petites connaissances des outils de Photoshop.
- Quelques notions de Html et de Css (je ne vais pas faire un cours là-dessus, de nombreux sites proposent d’excellents tutoriels.
Lien du site démo
Comme vous pouvez le constater, nous n’allons pas tout à fait faire un site pour naviguer, mais plutôt une sorte de portail, avec des liens, et une présentation quelconque de votre site, ou autre. Nous allons commencer. Ouvrez ce bon vieux Photoshop, puis créez un nouveau document de taille 800*800 pixels. Vous pouvez mettre un fond transparent, mais je vous conseille vivement de laisser le fond blanc afin de mieux visualiser votre rendu.
Maintenant, appliquez une couleur (évitez les dégradés, vous allez comprendre pourquoi). Notez que ce sera la couleur de votre page, c’est pour cela que je vous déconseille un rouge flashy.
Pour ma part, avec l’outil pot de peinture, je vais prendre une couleur qui s’accorde avec le mini-site, un bleu/gris (#bfd1e6).
Pour l’instant, ce n’est rien de bien extraordinaire, on va doucement aborder quelque chose de plus complexe, ne vous inquiétez pas.
Nous allons mettre un petit carré de 400400 pixels. Ce carré nous servira de « zone de texte » pour notre site. Si vous n’avez pas envie de prendre votre règle pour mesurer la taille exacte, (chose que je conçois parfaitement :p ) créez un nouveau document de 400400 pixels que vous ferez glisser sur votre plan de travail.
Note : Vous pouvez faire un carré plus ou moins grand, mais retenez bien ses dimensions, dans le cas contraire, vous aurez de gros problème avec le codage....
Voilà le travail, j’ai coloré ce carré en blanc afin qu’on puisse le différencier du reste, je vous invite à faire la même chose :
Maintenant, il va s’agir de centrer ce petit carré, mais au préalable, nous allons juste y rajouter un petit cadre, vous verrez, c’est très esthétique.
Pour ce, cliquez sur le petit « fx » en dessous de la fenêtre des calques => contour.
Une fenêtre va alors s’ouvrir, mettez les réglages suivants :
Taille: 3px
Position: extérieur
Mode de fusion : normal
Opacité : 100%
Type de remplissage : couleur
Et choisissez la couleur de votre choix (#2e607d pour moi).
Maintenant, petite manœuvre pour centrer ce petit carré :
Sur le calque du petit carré (le 2ème normalement), avec l’outil rectangle de sélection, faites une sélection qui occupe toute la largeur, mais pas toute la longueur, comme ceci :
Puis, allez dans :
Calque => Aligner les calques sur la sélection => Centres dans le sens horizontal.
Cela va donc centrer horizontalement votre image.
Maintenant, toujours avec l’outil rectangle de sélection faites une autre sélection qui fait toute la hauteur, mais pas toute la largeur de l’image (le contraire d’avant) puis :
Calque => Aligner les calques sur la sélection => Centres dans le sens vertical.Voilà ! Maintenant, notre petit carré est centré, nous allons pouvoir enfin continuer.
On en arrive à une autre sorte de graphisme, nous allons passer à la décoration .
Premièrement, vous pouvez, si vous le voulez, changer la couleur de fond du petit carré, le blanc, c’est assez fade. Je vous conseille de prendre une couleur proche de celle du fond mais un peu coupée avec du blanc (#e0e9f3 pour moi)
Voilà donc le résultat :
Passons donc au plus important, la décoration. C’est là que votre imagination entre en jeu. Brushs, renders, et autres motifs seront de mise. Je ne vais pas vous apprendre ça, faites vraiment comme vous le sentez.
Tant que j’y suis, surtout, pensez à ne pas mettre de brushs ou autres à l’intérieur du petit carré, ainsi on gardera une lisibilité optimisée.
(le Queulorior proviens de « pearlsaurus » )
Maintenant, passons à la 2ème partie de ce tutoriel : Le Codage !Comme dit plus haut, pour suivre cette partie, il vous faut tout de même les bases en xHTML et en CSS afin de pouvoir suivre convenablement.Ouvrez donc votre éditeur de texte (dreamweaver pour moi, mais notepad++ convient
Et mettez le traditionnel :```html
Tutoriel PokémonTrash
```Ce que nous allons faire, vous allez voir, est d’une simplicité déconcertante :p
À l’intérieur des balises `` nous allons insérer ce qu’on appelle les divisions.
Comme leur nom l’indique, elles permettent de fragmenter la page en plusieurs éléments, leur propriétés se modifient bien évidemment dans le CSS, mais nous nous en occuperons juste après.
Pour le design final que l’on désire, 2 divisions nous suffisent amplement :Appelons donc la première division « design » sachant qu’elle nous servira effectivement à intégrer tous le design. Nous allons également déjà mettre le 2ème division que je vais appeler « texte » puisque encore une fois, celle-ci nous servira à configurer l’emplacement du texte.
On obtient donc ça :
```html
Tutoriel PokémonTrash
```Je vais vous surprendre en vous disant que le codage en HTML est terminé ? :p
En fait, vous aurez une dernière chose à faire là-dessus : Mettre votre texte, mais ce n’est pas vraiment du codage...
N’oubliez pas d’enregistrer la page avec l’extension .html
Bref, une fois ceci fait, nous allons commencer à faire le CSS.
Sur votre éditeur de texte, ouvrez donc un nouveau document.
Nous allons commencer avec les réglages indispensables du « body »
```css
body
\{
width: 800px;
margin: auto;
margin-top: 0px; background-color:# bfd2e6;
\}
```Alors, quelques explications :
width : 800px ; Je dis donc que la largeur doit faire 800 pixels, ce qui correspond à la largeur de notre « planche » faite sur Photoshop.
margin: auto ; va tout simplement permettre de centrer notre contenu.
margin-top: 0px ; ici, cela ne servira à rien puisque la valeur est de 0px, mais si vous voulez décoller l’image du haut de la page, il suffit de mettre 10px ou bien 20px ou la valeur que vous désirez.
background-color:# bfd2e6 ; pourquoi mettre un fond de couleur alors que nous avons déjà une image me diriez vous? Et bien, cette couleur correspond à la même que celle que j’ai utilisé pour faire le fond de mon image, cela va donc permettre de faire une sorte de continuité de la couleur et ainsi éviter la coupure bleu/blanc qui est très laide.On en a fini avec body, passons donc aux paramètres de notre « planche » :```css
#design
\{
width: 800px;
height: 800px;
margin: center;
background-image:url(images/planche.png);
\}
```
Notez le # avant le « design » n’oubliez pas que pour demander les divisons, on utilise les # et pour demander les classes, on utilise un . (un point quoi).
Donc avec ces propriétés CSS, je modifie directement la division « design » que nous avons faite dans le HTML (si vous avez appelé cette division autrement, mettez le nom en fonction de ce nom, cela va de soi).
Donc :
width: 800px; comme avant, il faut préciser que notre image fait 800px de large.
height: 800px; on précise également sa hauteur.
margin: center; nous permet de centrer notre image.
background-image:url(images/planche.png); et donc enfin le chemin qui fera apparaitre notre planche en tant qu’image de fond. Faites très attention au chemin que vous donnez.
Si l’image se trouve dans le même dossier que votre page css et html (disons que votre dossier s’appelle « site ») le chemin sera juste « planche.png » si elle se trouve dans un sous dossier nommé par exemple « images » (ce qui est mon cas), le chemin sera donc « images/planche.png ».
Cela paraît anodin, mais c’est le genre d’erreur dont on ne se rend pas forcément compte, je vous mets juste en garde .
Pour ma part, j’obtiens ça :
Voilà, nous sommes arrivés à la fin de ce tutoriel, certes pas compliqué, mais le résultat est plutôt sympathique, je suis sûr que cela vous a été utile .
Sur ce, je vous souhaite une bonne journée et à bientôt !L’équipe de PokémonTrash.
Certes ce n’est pas beau, mais pas d’inquiétudes, une fois le réglage fait, retirez cette propriété .