| Accueil | Tutoriels | Forum | Chat | Liens | FAQ | Contact |
Blog
Affiché 26768 fois - difficulté : 
Il s'agit de reproduire le design de mon ancien "blog" qui tournait sous dotclear. Au delà des aspects techniques, essayez de voir comment l'harmonie du design apparaît tout au long de sa conception. Certaines étapes pourraient être simplifier (entre autre avec les incrustations en couleurs), cependant, je pense qu'il est important d'utiliser cette option de fusion pour pouvoir modifier son design au fur et à mesure qu'il avance. Il me semble en effet difficile de trouver les bonnes couleurs dès le premier essai.
Source : http://www.teknopole.com
Tutorial :
| Créez un nouveau document de taille voisine de 500*450 pixels, puis remplissez le fond de blanc. Créez un nouveau calque (ctrl + maj + N). Faites une sélection rectangulaire centré prenant toute la hauteur de votre document et de largeur 430 pixels. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Puis créez un nouveau calque, et refaites un rectangle gris mais de largeur plus faible (environs 400 pixels, 404 pour ma part). | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ouvrez alors les options de fusions de ce calque, et ajoutez une ombre portée. Choisissez un gris (#cccccc). Réglez le mode de l'ombre à normal puis augmentez l'opacité jusqu'au maximum. Choisissez une provenance de 90°. Diminuez la distance de l'ombre à 0 pixels, grossissez là à 100%, puis réglez la taille à 3 pixels. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez maintenant une incrustation en couleur, et choississez la couleur blanche (#ffffff). | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez maintenant un contour de couleur rouge foncé (#602320). Diminuez la taille à 2 pixels, et réglez sa position à l'intérieur. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous devriez obtenir. Les traits horizontaux aux extrémités haute et basse du document ne sont pas souhaitables. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Pour les effacer, faites edition > transformations manuelle (ctrl + T), puis tirez l'ancre du haut vers le haut et celle du bas vers le bas | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez ensuite un nouveau document de taille 3*3 pixels avec un fond transparent. Avec l'outil crayon en taille 1 pixels, marquez trois pixels en diagonal. Puis faites edition > utiliser comme motif, et nommez le comme bon vous semble. Vous pouvez ensuite fermer ce document sans le sauvegarder. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Reprenez vous document d'origine. Puis créez un nouveau calque. Puis faites une sélection rectangulaire un peu moins large que la précédente (celle qui correspond au rectangle rouge sur mon illustration). | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Faites alors edition > remplir. Voici ce que vous devriez obtenir. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Réglez ensuite l'opacité du calque à 13% dans la fenêtre de calque. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Récupérez maintenant une photo de nuages (prise sur stock xchng), comme celle de l'illustration. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Placez la en haut de votre document, puis récupérez un rectangle d'environs 376*60 pixels (taille de mon rectangle). Pour ce faire, sélectionnez sur votre photo de départ une telle zone, puis copiez là. Et collez la alors dans votre document. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Comme vous pouvez le constater, la photo est d'un ton assez bleu, qui ne correspond pas à celui de notre design. Pour ce faire, nous allons ajoutez dans un premier temps des options de fusions pour l'intégrer à notre design. Commençons par une ombre portée de couleur #cbaab1 en mode normal, d'opacité 100%. Diminuez la distance à 0 pixels, et réglez le grossissement à 100%. Pour finir, diminuez la taille de l'ombre à 1 pixel. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez maintenant une incrustation en couleur de gris-marron (#bbb4ac). Réglez également le mode de fusion à couleur. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez maintenant un contour blanc (#ffffff) de taille 1 pixel, en position intérieure. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. Vous remarquerez que l'image correspond déjà un peu mieux à notre design. Cependant, vous m'accorderez que l'image reste cependant trop sombre. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Pour augmentez la luminosité de notre image, faites image > réglages > niveaux (ctrl + L) Puis modifiez le dernier niveau d'entrée à 240 et les niveaux de sorties à 97. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| La photo devient alors bien plus clair, et concorde mieux avec le design. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez ensuite un nouveau calque. Il faut maintenant créer le menu. Créez une petite bande blanche de 23 pixels de haut. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez ensuite un nouveau calque. Puis créez un rectangle noir de taille 370*19 pixels. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez une incrustation en couleur à ce calque. Choisissez un marron clair (#ece9e4) | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez maintenant un contour gris (#cbcbcb) de taille 1 pixel, en position intérieure. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ajoutez ensuite vos liens. La police utilisé est Verdana, en taille 11 points, sans aucun superflu. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez ensuite un nouveau calque. Faites une sélection rectangulaire sur votre barre de menu, sans qu'elle se superpose sur le contour (cf. illustration). | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Diminuez alors l'opacité du calque à 46%. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez un nouveau calque. Rajoutez ensuite un bloc pour contenir le titre de votre billet, d'une taille approximant les 366*34 pixels. Remplissez ce rectangle de marron (#efece7). | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ouvrez les options de fusions, et ajoutez un contour intérieur, de couleur #5b5b5b. Diminuez sa taille à 1 pixel. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici alors ce que vous obtenez. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez un nouveau calque. Comme pour le menu, faites un rectangle blanc sur la moitié supérieure de votre dernier bloc que vous remplissez de blanc. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Diminuez son opacité à 31%. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez ensuite un grand bloc pour contenir le contenu de vos billets, de manière identique à votre bloc titre. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Découpez alors votre design, et remplissez votre blog. Pour ma part, je me suis contenté d'utilisé un générateur de texte (lorem ipsum pour ceux qui ne connaitrait pas). Votre blog est donc fin prêt à tourner ! | - Illustration - |
Commentaires
15 commentaires postés sur ce tutorial
----------------------------------------------------------------------------------------
tork le 19/11/2006
franchement c'est super joli ... mais j'ai une question. Est-ce qu'on peut publier notre oeuvre sur le net ? (en clair est-ce qu'on peut faire un site a partir uniquement de Photoshop)
Si oui comment ?
Sinon merci pour tous vos tutos
----------------------------------------------------------------------------------------
Cuddle le 17/2/2007
be non ^^
----------------------------------------------------------------------------------------
Nass le 22/2/2007
Ce serai pas mal la même section, mais les explications ce serait pour The Gimp.
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
Poster un commentaire :
Liens sponsorisés