Papa Geek
Papageek est content de te voir !

Ici tu pourras consulter des tutoriels, parler de tes passions de Geek, avoir accès à des liens sympa, tu pourras par la même occasion participer à la vie du forum en postant tes propres "Tutos", tes liens...

Bonne visite à toi ! REJOINS NOUS Very Happy



 
AccueilCalendrierFAQRechercherS'enregistrerConnexion

Partagez|

[Facile] Catégorie interface graphique : Mon beau tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageAuteur
MessageSujet: [Facile] Catégorie interface graphique : Mon beau tableau Mer 3 Nov - 10:54


Bienvenue sur mon premier tutoriel, j’espère qu’il vous aidera à assimiler des choses que vous ne saviez pas !

Ce dernier est assez simple, il s’agit donc de faire un jolie tableau qui vous le verrez sert beaucoup dans les interfaces graphiques de sites web !

C’est partie !

Ouvrez Photoshop :

Puis en haut à gauche cliquer sur Fichier Arrow Nouveau

Une fenêtre apparait ! Remplissez les champs comme ci-dessous :



Cliquez sur Ok.

Maintenant vous avez votre plan de travail.

Avant de passer à la partie intéressante vous allez devoir vous munir de vos outils aux préalables afin de gagner du temps et aussi en efficacité de travail ! bounce


Maintenant que vous disposez d’un bon plan de travail nous pouvons commencer le boulot !
Vous allez sélectionner le rectangle arrondi (u) puis vous allez tracer une forme comme ceci sur votre premier calque :

Pensez à renommer vos calques ! Pour ma part je vais le renommer « fond-table »


La couleur de mon rectangle arrondi est #d0a94c pour la choisir double cliquez sur de votre menu d’outils. Cette page va apparaitre :


Vous n’avez qu’a remplir comme ci-dessus et faire OK !

Désormais nous avons un peu près le même résultat, nous allons maintenant appliquer un style de calque à notre premier calque « fond table » !


Pour cela double cliquez sur la partie grise de votre calque !

Cette fenêtre apparait :


Allez dans contour cliquez deux fois sur le rectangle rouge puis choisissez la couleur noir, Maintenant toujours dans contour > Structure regardez la taille et mettez 2px (px = pixel), position : Extérieur, Mode de fusion : Normal et pour finir Opacité : 70%. Cliquez sur OK vous devriez obtenir ceci :

Votre rectangle arrondi est comme sa c’est gagné pour le moment ^^


A noté que vous pouvez rabattre les notifications de styles de calque en cliquant sur la petite flèche jaune Very Happy

Maintenant appuyer sur la touche de votre clavier CTRL + Cliquez sur votre forme dans la fenêtre Calque :


Une fois votre forme sélectionnée vous allez voir des pointillés tournés autour de votre forme « marron ».Créez un nouveau Calque puis sélectionnez le pot de peinture (ou appuyer sur la touche G de votre clavier) puis sélectionner une couleur blanche et remplissez votre forme.

Vous obtenez donc ceci :


Maintenant sélectionnez l’outil rectangle de sélection (raccourcis m) et tracez un rectangle comme ceci sur votre forme !




Appuyiez maintenant sur la touche Suppr de votre clavier, il devrait rester juste une partie blanche en haut de votre forme, si oui continuons, si non, et bien il faut que vous recommenciez !

Cliquez deux fois sur la partie grise du deuxième calque que nous avons créer (la forme blanche) pour lui donner un style de calque !

La fenêtre s’ouvre, allez dans Incrustation en dégradé : faites mode de fusion normal, Opacité : 60%, puis double cliquez sur le rectangle qui contient le dégradé une nouvelle petite fenêtre s’ouvre, à vous de choisir un dégradé (celui qui vous conviens) Very Happy
Pour ma part la couleur extrême gauche j’ai choisis #754f18 et pour l’extrême droite #dfab0e.

Faites OK puis encore OK et vous devriez obtenir ceci :



Maintenant il va s’agir de rendre mieux tout sa Very Happy Pour cela vous allez sélectionner le premier calque « fond table » et lui mettre une opacité de 50% pour cela vous devez allez ici :


Maintenant créez un nouveau calque que vous allez venir mettre sous « Fond table » et que vous allez appeler « Fond page » puis sélectionnez le pot de peinture et remplissez ce nouveau calque en blanc !

Et voilà le résultat final ! cheers


Je vous invite à regarder les prochains tutos pour allez plus loin.













Champi-geekPapa-GeekPapa-Geek
avatarNombre de messages : 37
Date d'inscription : 16/03/2009
Age : 27
Localisation : Toulon

Geek-Identity
Expérience:
27/1000  (27/1000)
Voir le profil de l'utilisateur http://papa-geek.netgoo.org
Revenir en haut Aller en bas
MessageSujet: partie 2 Mer 3 Nov - 17:53


cheers Come on ! On continu le tuto ce n'est pas fini Twisted Evil

Donc si je me souviens bien nous avions obtenu ceci !





Créez un nouveau calque au dessus du calque "Haut table", et nommez le "reflet" !
Maintenant sélectionnez le calque "Haut table", appuyez sur la touche CTRL de votre clavier et cliquez sur le calque. Vous pouvez voir sur votre image si la sélection c'est bien effectué grâce aux petits pointillés autour Basketball Donc ceci :


Maintenant sélectionnez le calque reflet, puis prenez le pot de peinture en prenant au préalable la couleur blanche #ffffff, puis remplissez votre sélection antérieure !

Sa vous donnes donc ceci :


A présent servez vous de l'outil Ellipse de sélection et faite un tracé comme ceci :



Exclamation Soyez attentif

Allez dans menu --> Sélection --> Invertir. Ce qui donne ce résultat :


Appuyez sur la touche SUPPR de votre clavier, Puis effectuez une opacité de 30% sur le calque reflet comme je vous l'avez appris dans me premier "Tuto" !

Et sa donne ceci TADAM ! ! :



Very Happy Sa commence à ressembler a quelque chose !


Arrow Bon on se motive ce n'est pas fini ! !

Maintenant on va mettre du texte et des petits détails pour rendre mieux tout sa rabbit

Sélectionnez votre calque "Haut table" puis créez un nouveau calque qui comme par magie ira se mettre juste au dessus Shocked Prenez votre Outil Texte (horizontale par défaut), puis en haut de votre fenêtre photoshop choisissez l'écriture Agency FB (simple), Puis cliquez sur la partie supérieur de votre Tableau et écrivez par exemple "PapaGeek"(Taille 24, écriture noire #000000).

Sa donne sa !


Une fois arrivé a ce résultat on a fait le gros du travail, mais le but de ce tuto est de vous apprendre des procédés, je ne peux pas vraiment vous aidez pour l’imagination, donc comme nous sommes dans le contexte d’un site, en l’occurrence de « PapaGeek » et bien je décide avec mon imagination que ce sera le module de connexion du site.


C’est parti !
Je me pose la question que faut il sur un module de connexion ?
• Dans un premier temps il faut indiquer que c’est le module de connexion
• Dans un second temps, on doit y inscrire sont identifiant (Id) ainsi que son Mot de passe (Mp ou Pass)
• Dans un troisième temps, il faut un bouton Ok ou Se connecter bref un bouton pour accéder au contenu visible uniquement par les membres !
• Et pour finir l’éventualité que la personne à oublié son mot de passe ou qu’elle n’est pas encore membre du site.
Avant de commencer mon module, je sais déjà ce que j’ai à faire Cool
Notre tableau étant terminé je vous propose donc de créer un groupe de calque afin que nous puissions continuer à travailler !



Cliquez sur le petit dossier en bas surligné en Jaune puis vous verrez apparaitre en gris le Groupe de calque (Groupe1) surligné lui aussi en jaune. Vous n’avez plus qu’à faire glissé un à un vos calque jusqu'à la barre grise de groupe 1 et le tour et joué ! Renommez ce groupe « Base Table » en double cliquant sur l’écriture « Groupe1 ».

Vous devriez obtenir ceci :


Créez un nouveau calque que vous appellerez « barre_connec »
Sélectionnez la couleur blanche #ffffff.

Puis prenez l’outil rectangle arrondi (raccourci u) et tracé un rectangle comme suivant :


Faite un clique droit sur la partie Grise du calque « barre_connec » et sélectionnez l’option « Dupliquez le calque… » Une fenêtre apparait, remplacez dans « En tant que : » le « barre_connec copie » par « barre_connec2 » comme ici :


Faite Ok

A présent, vous pouvez déplacer la « forme blanche » grâce aux flèches de votre clavier, appuyez sur la flèche BAS et descendez la forme blanche comme ceci :



Nous venons donc de créer nos deux champs de saisis ! Bravo ^^
On passe donc a l’étape suivante Twisted Evil
Vous allez pixeliser ces deux derniers en cliquant droit sur chacun d’eux puis en sélectionnant l’option « Pixeliser le calque », une fois cette étape passe, sélectionnez le calque « barre_connec2 » faite un clique droit dessus et sélectionnez l’option « Fusionner avec le calque inférieur » vous devriez donc obtenir ceci :



Maintenant maintenez enfoncé la touche CTRL de votre clavier et cliquez sur le petit carré blanc du calque « barre_connec » vos deux champs de saisis sont donc sélectionnés simultanément, héhé ! Créez un nouveau calque que vous nommerez « color-barre », puis sélectionnez la couleur marron #9d6d4c, pour finir remplissez au pot de peinture votre sélection. Vous obtenez donc ceci :


La suite bientôt !



Champi-geekPapa-GeekPapa-Geek
avatarNombre de messages : 37
Date d'inscription : 16/03/2009
Age : 27
Localisation : Toulon

Geek-Identity
Expérience:
27/1000  (27/1000)
Voir le profil de l'utilisateur http://papa-geek.netgoo.org
Revenir en haut Aller en bas

[Facile] Catégorie interface graphique : Mon beau tableau

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Papa Geek :: Tutos graphismes :: Tutos officiels-