A. Préparer la sélection sur un nouveau calque

Commencez par créer le fond en sélectionnant le menu "Fichier" puis "Nouveau". Donnez le titre de votre choix au document, vérifier que ses couleurs soient bien RVB (par "mode"), changez l'unité de cm en pixel puis mettez 500 et 500. A présent, affichez la palette des calques ("Fenêtres" puis "Afficher Calques" ; si c'est déjà affiché, vous aurez "Masquer Calques"), en dessous de la croix qui permet de fermer la fenêtre se trouve une flèche vers la droite : cliquez dessus, et choisissez "Nouveau calque...", donnez lui le nom que vous voulez, en couleur mettant "Sans", en mode "Normal" et d'opacité 100%, puis cliquez sur ok. A présent, prenez l'outil "rectangle de sélection" (touche de raccourci M ou ligne 1 de la colonne 1 dans la palette d'outils), tracez un rectangle de taille importante (mais qui vous laissez une bonne bordure sur les côtés) au centre de votre zone de travail.

B. Choisir une couleur particulière avec le sélecteur de couleur

Dans votre palette d'outil se trouve deux carrés avec des couleurs : appuyez sur la touche X de votre clavier pour en voir un devenir blanc et l'autre noir, puis cliquez sur le noir ("définir la couleur de premier plan") : le sélecteur de couleur apparaît. Vous êtes par défaut dans un affichage "T", cliquez sur "B" (celui de la colonne "L", "a", "B") pour passer dans un affichage "B" (vous avez 9 types d'affichages, tous aussi efficaces que les autres, mais certains sont plus rapides pour une couleur précise). Vous avez dans ce sélecteur de couleur un rectangle mince et long qui vous affiche un dégradé du noir au bleu, cliquez sur une des deux petites flèches (il y en a une de chaque côté du sélecteur qui pointe dans sa direction) et positionnez la où vous voulez pour voir varier les couleurs disponibles. A présent, nous allons la positionner à un endroit précis : a "B" (celui de la colonne "L", "a", "B") mettez 98 (des informations automatiques vous sont données dans "C", "M", "J" et "N" que vous voyez comme suit : C à 64, a M à 61, J à 81, N à 7). Déplacez vous dans le carré contenant les couleurs pour voir que votre souris devient un petit rond : cliquez sur une couleur orangée puis cliquez sur OK. Vous venez d'aller chercher une couleur spéciale et de la définir comme couleur de premier plan.

C. Mettre la couleur et faire les contours

A présent, prenez l'outil "Pot de Peinture" (raccourci clavier G, ou ligne 6 de la colonne 2 dans la palette d'outils) puis cliquez sur la zone que vous avez sélectionné : elle devient de la couleur que vous avez choisi. Reprenez votre outil de rectangle de sélection, et cliquez n'importe où pour déselectionner.

A présent, faites un double clic sur le calque : vous voyez la fenêtre des "styles de calque" : cochez y "Ombre Portée", "Ombre Interne", "Contour", puis cliquez sur OK. Nous avons fait le tour !

Vous avez définit un cadre suivant la taille que vous vouliez et la couleur que vous vouliez, il reste maintenant à enlever les angles droits pour le rendre plus spécial. (figure 1)

Figure 1.

D. Les angles droits

Là où vous avez choisi "créer un nouveau calque", choisissez cette fois "aplatir l'image". Dans "Filtres" choisissez "Fluidité" (ou appuyez sur le raccourci clavier "Majuscule+Ctrl+X"). Dans la palette d'outil de Fluidité, prenez le "tourbillon horaire" (raccourci R). Positionnez vous à côté d'un angle, appuyez avec le bouton droit de votre souris, plus vous appuyez et plus la torsion sera intense, veillez donc à doser ! Faites ensuite cette torsion sur les trois autres angles, en variant avec le "tourbillon antihoraire" (raccourci L) si vous le souhaitez.

Pour produire les petits effets de turbulence de la figure 2, faites varier votre utilisation entre l'outil "déformation" (raccourci W : laissez appuyez sur le bouton droit et déplacez vous, l'intensité de l'effet est en fonction du déplacement) et l'outil "Turbulance" (raccourci A).

Vous avez personnalisez la forme de vos 4 angles droits (figure 2).

Figure 2.

E. Découper l'image

Créez 9 nouveaux fichiers d'une taille de 300x300 pixels (avec résolution 72, couleurs RVB et Remplir "Blanc") et disposez les autour de l'image pour votre "design". Prenez l'outil "rectangle de sélection" et sélectionnez l'espace formé par un angle droit (de l'endroit où la droite du côté de l'image n'existe plus à l'autre endroit de l'autre côté dans le même cas), regardez la figure 3 pour mieux comprendre.

Figure 3.

Une fois cet espace sélectionné, prenez l'outil "déplacement" (raccourci V ou première ligne de la deuxième colonne dans la palette d'outils), positionnez vous sur l'espace que vous avez sélectionnez, appuyez avec le bouton droit de votre souris sans relâcher et déplacez ainsi votre angle droit sur un des 9 fichiers blancs que vous avez créer. Un problème apparaît : dans le fichier blanc, il n'y a pas que l'angle droit car il n'a pas la bonne taille. Pour cela, prenez l'outil "recadrage" (raccourci C ou troisième ligne de la première colonne dans la palette des outils), et faites une sélection autour de votre angle droit comme vous l'aviez fait sur le fichier du "design". L'espace sélectionné apparaît normalement et le tour est gris, double cliquez dans l'espace de couleur normale : votre fichier contient maintenu uniquement l'angle droit. Dans la fenêtre des calques, aplatissez l'image.

F. Enregistrement

Dans "Fichier" choisissez "Enregistrer pour le web" choisissez JPEG (par défaut vous avez soit JPEG, soit GIF, soit PNG-8 soit PNG-24) et prenez "Haut" (c'est l'indicateur de qualité parmis quatre palliers : Bas à qualité 10, Moyen à qualité 30, Haut à qualité 60, Maximum à qualité 80), puis cochez "Progressif" et "Optimisé". Dans l'affichage des vignettes, prenez "4 vignettes", cliquez sur celle d'en haut à droite pour la sélectionner, et cliquez sur OK, donnez lui ensuite le nom de votre choix. Vous avez maintenant un angle prêt pour votre "design" ! (figure 4)

Figure 4.

G. Utiliser les fichiers
Voici les fichiers d'images dont nous disposons après avoir fait tout le traitement :

 

 

 

 

 

 

 

 

 

 

On sort ici de Photoshop, mais il sera important pour vous de savoir quoi faire de ces fichiers. On va utiliser Dreamweaver pour l'explication. Lancez dreamweaver et faites 9 calques : dans les 4 premiers, mettez les 4 angles comme image, dans les 5 suivants mettez ce qui reste comme image d'arrière plan. Disposez les images de façon à former le cadre et bougez les barres droites des côtés qui sont extensibles à l'infinie (elles peuvent se répéter à l'infinie en tant qu'image d'arrière plan), ensuite comblez l'espace au milieu par la couleur. Voici presque assemblé (pour bien vous montrer qu'il ne s'agit pas d'un même fichier...) le résultat :