PCF HCFR (graphismes, tutos...) --- MAJ 11.10.2008 ---

[cedbh]

Ok Cedbh si tu as ça sous la main pas de problème c'est juste pour avoir les bouton et leur code si ça ne me plait pas je changerais à ma sauce.

Au fait les code sont déjà appris pour les boutons sur ce que tu vas m'envoyer?

Tiens voilà un petit .pcf
Je n'ai pas eu le temps de peaufiner 2 ou 3 boutons de la dream, mais bon, l'essentiel est là...

Toutes les fonctions sont apprises, et presentes dans les pages cachées (Page Boutons Raw)

[patjero]

Ok Cedbh si tu as ça sous la main pas de problème c'est juste pour avoir les bouton et leur code si ça ne me plait pas je changerais à ma sauce.

Au fait les code sont déjà appris pour les boutons sur ce que tu vas m'envoyer?

Tiens voilà un petit .pcf
Je n'ai pas eu le temps de peaufiner 2 ou 3 boutons de la dream, mais bon, l'essentiel est là...

Toutes les fonctions sont apprises, et presentes dans les pages cachées (Page Boutons Raw)

Je te remercie Cedbh ,

Je vais faire mumuse avec tout ça demain?

A+

[COUILLEROT]

*** TUTO CREATION BOUTON DEVICE SELECTION PART 1 ***


*** PARTIE 1 ***

Je vais dans un premier temps créer mon bouton central. Pour ce faire, je dois partir initialement d'une image sous fond transparent d'une dimension de 70px * 39px.





*** PARTIE 2 ***

A partir de cette image, je vais dans un premier temps agrandir la zone de travail : menu "IMAGE" > "CANVAS SIZE..." puis rentrez les nouvelles valeurs : 90px * 52px

Après avoir fait ce recadrage de la zone de travail, vous pouvez enregistrer ce bouton car ce sera notre DEVICE SELECTION OFF (et oui déjà ! )





*** PARTIE 3 ***

Nous allons maintenant créer notre DEVICE SELECTION ON. Pour ce faire, je vais appliquer la même procédure que pour les boutons DEVICE ON c'est-à-dire :


- une réduction de 80% de l'image (menu "IMAGE" > "IMAGE SIZE...")





- un recadrage de l'image en 90px * 52px (menu "IMAGE" > "CANVAS SIZE...")





- Appliquer des effets sur notre calque (menu "LAYER" > "LAYER STYLE..." voir ci-dessous)




- BLENDING OPTIONS : BLEND MODE > NORMAL et OPACITY > 50%




NE PAS FAIRE OK TOUT DE SUITE car sous cette même fénêtre, nous allons appliquer notre deuxième effet


- OUTER GLOW : BLEND MODE > normal, OPACITY > 100%, Couleur > blanche et SIZE > 10px




NOUS POUVONS MAINTENANT FAIRE OK !



*** PARTIE 3 ***

Pour le dernier effet, nous allons passer l'image en N&B tout simplement !

menu "IMAGE" > "ADJUSTMENTS" > "DESATURATE"




et voilà il suffit d'enregistrer en PNG cette image qui sera désormais notre DEVICE SELECTION ON

*** POUR FACILITER LA CREATION DES BOUTONS GAUCHES ET/OU DROITES DES DEVICES SELECTIONS, NE PAS REFERMER NOTRE IMAGE ***

bon Photoshop à tous !

Stef

[COUILLEROT]

*** TUTO CREATION BOUTON DEVICE SELECTION PART 2 ***

Dans ce petit tututiel, nous allons créer les boutons gauche et/ou droite des DEVICES SELECTION.

*** PARTIE 1 ***

Nous devons partir de notre image initiale d'une dimension de 70px * 39px. Pour accéder à cette image nous allons faire apparaitre l'historique du bouton que nous venons de créer.

----> menu "WINDOW" > "HISTORY"




dès que l'historique apparait il suffit alors de sélectionner le moment voulu (rappel : "canvas image..." de 70px * 39px)




*** PARTIE 2 ***

- passons tout d'abord l'image en N&B : menu "IMAGE" > "ADJUSTMENTS" > "DESATURATE"


*** PARTIE 3 ***

- après avoir passer l'image en noir et blanc, nous allons créer un masque de fusion sur notre image. Pour ce faire, nous devons faire apparaitre la fenêtre "LAYERS" : menu "WINDOW" > "LAYERS"

- cliquez sur le petit carré (voir ci-dessous) pour créer notre masque de fusion !




- Ensuite, cliquez sur le bouton "DEGRADE" dans la barre d'outils de Photoshop :




- nous allons appliquer le dégradé dans notre image : soit une opacité de 0% à 100% ; donc appliquez le dégradé soit de la gauche vers la droite ou de la droite vers la gauche, tout dépend en fait de quel bouton (gauche ou droite) vous vous atelé

Vous devez obtenir ceci :




*** PARTIE 4 ***

- Nous allons encore réduire de 50% l'opacité de notre image. Rendons-nous sur notre désormais habituelle fenêtre : menu "LAYER" > "LAYER STYLE" > "BLENDING OPTIONS" et abaissons l'opacité de 50%




- au final, nous obtenons ceci :



nous avons désormais notre BOUTON DEVICE DROITE OFF que nous pouvons maintenant enregistrer (en PNG) !


*** PARTIE 5 ***

passons aux choses sérieuses avec la version ON de ce bouton !

- Pour commencer, il faut que nous appliquions une réduction de 80% de l'image et un recadrage pour revenir à notre taille initiale, soit 70px * 39px. Donc c'est toujours le même principe qu'évoqué dans le tuto précédent :

- réduction de 80% : menu "IMAGE" > "IMAGE SIZE..."
- recadrage de la zone de travail : menu "IMAGE" > "CANVAS SIZE..." à 70px * 39px







*** PARTIE 6 ***

d'après l'image que nous obtenons, nous allons lui appliquer un effet du type "INNER GLOW" : menu "LAYER" > "LAYER STYLE" > "INNER GLOW"

- changeons tout d'abord la couleur en cliquant sur le petit carré blanc et rentrez les nouvelles valeurs RGB : R=255 / G=99 / B=0 (en fait c'est la couleur utilisée du logo HCFR !!!)





- une fois la couleur validée, rentrez les autres valeurs : BLEND MODE > SCREEN - OPACITY > 100% - SIZE > 50px




une fois ces valeurs entrées, faire OK et enregistrez (au format PNG) ce bouton qui sera votre DEVICE SELECTION DROITE ON !


un conseil : utilisez la fonction "HISTORY" pour créer les boutons de gauche

re-bon photoshop à tous !

[cedbh]

Ah ben enfin!

J'ai retourné les fonctions de toshop dans tous les sens pour trouver comment tu passais au bouton actif!!!!

(et j'avais pas trouvé....)

[COUILLEROT]

Ah ben enfin!

J'ai retourné les fonctions de toshop dans tous les sens pour trouver comment tu passais au bouton actif!!!!

(et j'avais pas trouvé....)

ça y est ! je n'ai désormais plus de secrets à vous dévoiler ! vous connaissez maintenant tous mes trucs...

Stef

[sonata31]

Allez je suis sûr que tu en as encore quelques uns en réserve

Et puis il y a une chose que tu ne pourras jamais partager : le fait que tu sois tombé dans photoshop en naissant

Louis

[ludel]

tout nikel ces tutos

[ludel]

j'aurai besoin d'un petit coup de main steph

pourrais tu me faire des boutons pour le sattelite avec les genres de programmes a regarder

je m'explique je voudrais en fait faire des raccourcis du style

cinema,decouverte,jeunesse,sport,infos,HD,musique

voila j'appelle a tes lumieres :mdr:

merci bien

ludo

[COUILLEROT]

je vais essayer ludel

par contre, pourrais-tu me donner une idée de taille pour ces boutons ?

Stef

[COUILLEROT]

un peu dans ce style là ?

[ludel]

je les vois plutôt rectangulaire avec un texte design et pourquoi pas le fond comme ca dechire!!

ce fond la avec "decouverte" dessus pour voir si ca fait pas trop

pour la taille des bouton je sais pas trop disons qu'il faut que deux boutons rectangulaire rentre ds une page(en largeur bien sur)

merci steph

++ludo

[cedbh]

[color=red][b][size=18]

..............



- une fois la couleur validée, rentrez les autres valeurs : BLEND MODE > SCREEN - OPACITY > 100% - SIZE > 50px

J'étais pas si loin...

Par contre, à ton avis, en Francais, le mode de fusion "screen", ce serait "superposition"???



Merci Stef.

[COUILLEROT]

comme ceci ?

[COUILLEROT]

"SUPERPOSITION" = "SCREEN"

Stef