32
Découper une interface graphique sous Photoshop
Il existe des logiciels (comme image ready) qui permettent de couper une interface graphique simplement et efficacement, seulement moi je suis de la vielle école et j’adore faire tout moi-même. Dans cet article je vais donc vous expliquer comment analyser et comment choisir les éléments (et comment le faire) à couper de votre interface.
Mon interface terminé je vais aplatir les calques pour pouvoir travailler sur ma découpe. Je vais donc dans le menu calque > aplatir l’image. Normalement je me retrouve avec une image comme ci-dessous.
Je dois maintenant analyser mon interface et repérer les éléments que je vais devoir couper en premier. Pour ma part je remarque qu’un fond sera nécessaire à sa mise en page, je prends donc l’outil sélection et je sélectionne un motif qui va me permettre de créer le fond. Voici ce que j’ai découpé.
La particularité de ce fond c’est qu’il doit être répété sur la totalité de la largeur de la page, mais seulement une fois, ensuite je dois remplir la page d’une couleur uni. Et oui car notre fond en plus d’être un motif est composé d’un dégradé. Voici donc le code que j’utilise pour mettre en page un tel fond.
<body bgcolor="#062a39" style="background: url(images/fond.jpg) #062a39 repeat; background-repeat: repeat-x">
Pour faire simple qu’est ce que je doits faire ? J’ouvre mon logiciel de programmation HTML (comme web expert), puis dans l’explorer de Windows je crée un dossier appelé interface, puis un sous dossier appelé images. Dans Photoshop j’enregistre sous mon fond sous fond.jpg dans le dossier images récemment crée.
Avec mon logiciel je crée un fichier html que j’enregistre sous dans le dossier interface. C’est dans ce fichier que je dois changer le body de ma page par celui citée ci-dessus. Normalement j’arrive à ce résultat.
Sous Photoshop je retourne maintenant sur mon interface, je vais couper mon logo, pour cela je zoom en haut à droite et je crée une sélection autour de mon logo, j’appuie ensuite sur (ctrl) + (x) pour couper, puis sur (ctrl) + (n) pour créer un nouveau document.
Bon à savoir sous Photoshop, quand une sélection est placée dans le presse papier, un nouveau document et toujours crée avec les dimensions de cette sélection.
J’appuie donc sur entrée pour valider la création du document puis j’appuie sur (ctrl) + (v) pour coller ma sélection. J’enregistre sous cette image sous logo.jpg.
Pour l’intégrer à ma page j’ai deux choix, soit je l’intègre en tant qu’image et dans ce cas j’utilise le code :
<img src="images/logo.jpg" border="0">
Ou alors je place mon logo dans le fond d’un tableau et j’utilise le code :
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="129" width="304" background="images/logo.jpg"></td>
</tr>
</table>Avec la même technique je coupe le menu située sur la droite. J’inclus ensuite les images de ce menu dans mon fichier HTML. Et voici le rèsultat.
Ensuite j’ai un rectangle arrondis à découper. Ce genre de bloc peut être coupé soit en quatre image (une pour chaque coing) ou en deux images (une pour le haut une pour le bas, le milieu étant en html il ne nécessite pas d’image graphique). Comme je suis un peu fainéant je choisie la seconde méthode. Avec mon outil sélection je crée une image pour le haut et une pour le bas. Je les enregistre dans mon répertoire images.
Pour mettre ceci en page rien de plus simple, je vais utiliser un tableau de trois lignes. Une pour le haut une second avec un fond de couleur unie pour le milieu (le contenus) et une troisième pour le bas. Voici ce que cela donne en html.
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="13" width="757" background="images/haut.jpg"></td>
</tr>
<tr>
<td height="200" width="757" bgcolor="#f2f2f2"></td>
</tr>
<tr>
<td height="31" width="757" background="images/bas.jpg"></td>
</tr>
</table>Avec un peu plus de style je met mon tableau en page, et voici le rèsultat.
Pour le contenu des pages, j’ai choisies de faire du pur HTML, je n’ai donc rien à toucher sous mon Photoshop je vais donc vous expliquer brièvement comment inclure une feuille de style dans votre page.
Sous votre logiciel de programmation crée un document CSS si possible sinon créer un fichier html que vous enregistrez sous le nom feuille.css. Dans votre fichier index.html vous allez inclure en haut de la page le code suivant :
<!-- Import de la feuille de style CSS -->
<style type="text/css">
@import url(feuille.css);
</style>Maintenant dans votre feuille de style vous pouvez inclure vos styles, en voici un exemple :
.texte { font-family: Arial;
font-size: 11px; color: #f2f2f2;
font-weight: normal;
padding:0px;
text-align:justify;
text-decoration: none;
}Et pour appeler ce style vous écrivez ceci :
<div class="texte">Je place ici mon texte !</div>
Avec quelque petit truc j’arrive à ce rèsultat.
Oula mais je suis déjà à la fin de mon interface, dieu que cela est facile : ) Le footer est un rectangle arrondie et je connais maintenant la technique du tableau à trois ligne. Je répète donc ce que je connais et voici le résultat final 
Pour information cette interface graphique est mis en vente sur le site kitgrafik.com.
Voici quelques liens CSS et HTML pour continuer votre apprentissage :
- http://fr.html.net/tutorials/CSS/
- http://www.aidenet.com/css/index.htm
- http://zonecss.free.fr/
- http://www.tizag.com/ (anglais)
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 28 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
14 août 2007 18:46
Merci j’attendais sa avec impatience
Chapeau franchement..
Mon site : www.freetuning.eu (ouverture sous peu
Répondre ).-
-
14 août 2007 23:13, par Shinichi
Oui moi j’étais dans ce lot là ^^
Magnifique tuto comme d’habitude, merci d’avoir fait si vite je pense que je vais m’y essayer ^^
Répondre
-
-
17 août 2007 03:14, par Wonka
Au fait à l’occasion de l’ouverture de ton site, passe par ici pour nous prévenir
Répondre -
9 septembre 2007 10:56
hello, pense à acheter le nom de domaine (freetuning) avant d’en faire la pub.. ca m’étonne que personne ne l’ai acheté pour te le proposer à la vente
Répondre
-
-
15 août 2007 01:08
pas mal du tout, ya plus qu’à faire un tutoriel « comment faire un kit graphique de A à Z » et on seras des pros
Répondre -
15 août 2007 12:07
Oui , faire un design entier en tuto deviendrait vite célèbre :p
Mais bon , un magicien ne dévoilé jamais ses tours..
Répondre-
15 août 2007 19:17, par Wonka
Bah pourquoi pas ! Mais ce tutorial serait bien pour créer une interface et une seule, pas très original ... En fait il y a pas de truc pour réaliser une interface sympa ! Faut y aller au feeling
Répondre
-
-
15 août 2007 14:48
ouai, tellement connu, que tu n’auras plus qu’àà faire un tuto ou un accès payants avec toutes les tech, je peux te dire que t’aura plus besoin de job jusqu’à la fin de ta vie poru vivre tranquillement
Répondre -
21 août 2007 18:00, par azerty7301
je laisse un lien de plus pour apprendre le css/html...
www.siteduzero.com
Répondre-
21 août 2007 20:05, par Wonka
Je connais ce site, il est pas mal du tout
Répondre je le conseil également à tous :p-
9 septembre 2007 19:58, par Wonka
Bah je suis pas sur qu’il ai beaucoup de valeur ! C’est pour cela qu’il est encore tout à fait libre :D
Mais bon libre à toi de le prendre, m’enfin il y a quand même mieux comme nom de domaine, non ?
Répondre
-
-
-
7 novembre 2007 03:20, par Ludo
Je te suis depuis très longtemps Wonka, il y a quelques années quand je venais sur le site, il y avait 4 tutos !!!!
c’est fou ce que tu as abattu comme travail !!!!
Je tenais à te le dire, mes félicitations, j’ai moi-même énormément apprécié ce tuto sur la découpe, je procédais différemment et cette méthode me parait plus simple et agréable, merci en tout cas et bon courage à toi, ce site est tout bonnement génial.
Merci
Répondre-
7 novembre 2007 09:08, par Wonka
Et oui petit à petit le site fait son nid
Répondre
Merci pour ton commentaire qui me fait vraiment plaisir !
Je savais pas que j’avais des fidèles lecteurs de la première heure
Merci à toi de me lire tant d’année après l’ouverture de Wonka !
-
-
17 avril 2008 05:55, par Kiowa
Bonjour,
Je m’excuse d’avance pour les fautes d’orthographe que l’on pourrait retrouver dans ce messages.
Alors voilà, j’ai un petit problème. J’ai créer un interface mais je n’arrive pas à la découper comme il se faudrait pour le faire. Voici le lien direct de l’image :
http://img217.imageshack.us/img217/9550/espoirjeunesse5jq0.png
(p.s. : il y a une faute dans le header, elle à été corriger sur mon PSD, mais pas sur celle-ci...)
Alors je me demandais si quelqu’un ne saurait pas m’aider.
Merci d’avance !
Répondre-
17 avril 2008 09:46, par Wonka
Sympa ton graphisme ! Par contre il faudrait plutôt que tu essayes de couper et de coder sinon on vas pas s’en sortir ! Ensuite tu poses tes questions et ont essayeras de t’aider ensuite ! Bonne chance !
Répondre
-
-
21 mai 2008 00:46
Ce qui serait bien, c’est de mettre à jour certaine choses qui auraient déjà pu l’êtres (cad. « conformes ») plus tôt !!! Mais bon comme il n’est jamais trop tard pour bien faire, il n’est aussi jamais trop tard pour prêcher la bonne parole.
Refaites l’exercice SANS tableau, qu’en blocs et styles.
Update it
Répondre-
21 mai 2008 12:03, par Wonka
Oui je travail maintenant full CSS mais je ne mettrais pas à jour cet article. J’ai créer une rubrique dédié pour le CSS vous y trouerez les articles en adéquation avec la normes CSS et w3c
Répondre A voir donc dans les tutoriels CSS de ce site !
-
-
1er octobre 2008 17:48, par Kiowa
Bonjour,
Alors voilà, j’ai refait un design et j’ai réussi à le mettre sur l’internet avec les codes et tout. Mais le problème que je rencontre est le suivant :
Lors que la fenêtre internet, ouvre, ou est simplement plus petite (Si elle n’est pas ouvert en plein écran) Elle se déforme. En fait les images de l’interface viennent a s’entre-mêler (ou simplement se superposer, et ce, jusqu’a ce que la fenêtre soit réduite le plus possible.)
Alors je n’y comprend plus rien. pour voir simplement vous n’avez qu’a tester en jouant avec le cadrage de votre fenêtre sur ce site : http://graph.amos.design.free.fr/espoirjeun
les codes :
Répondre<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Espoir Jeunesse</title>
</head>
<body bgcolor="#062a39" style="background: url(images/fond.jpg) #062a39 repeat; background-repeat: repeat-x">
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td height="153" width="499" background="images/logo.jpg"></td>
</tr>
</table>
<br />
<br />
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td height="113" width="102" background="images/contact.jpg"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td height="113" width="97" background="images/1835.jpg"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td height="113" width="95" background="images/1217.jpg"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td height="113" width="122" background="images/accueil.jpg"></td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" align="left">
<tr>
<td height="109" width="206" background="images/topmenu.jpg"></td>
</tr>
<tr>
<td height="128" width="206" background="images/midmenu.jpg"></td>
</tr>
<tr>
<td height="128" width="206" background="images/midmenu.jpg"></td>
</tr>
<tr>
<td height="325" width="206" background="images/basmenu.jpg"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="56" width="797" background="images/balisetop.jpg"></td>
</tr>
<tr>
<td height="55" width="797" background="images/balisemid.jpg"></td>
</tr>
<tr>
<td height="75" width="797" background="images/balisebas.jpg"></td>
</tr>
</table>
</body>
</html>-
2 octobre 2008 12:40, par Wonka
Oui quand on joue sur la taile de la fenètre tout viens casser le placement de chacun, mais ca malheureusement on peux rien y faire, c’est le gout amer de la largeur extensible ! Pour que ca ne fasse plus ca il faut définir le largeur de ton site et ne plus en bouger. 900 pixels de large par exemple.
Répondre-
2 octobre 2008 17:25, par Kiowa
Ah d’accord je vois, mais alors c’est où exactement qu’il faut l’inscrire... je suis extrêmement visuel alors xD.
Je suppose que c’est avec le background, tout en haut non ?
Répondre-
2 octobre 2008 19:26, par Wonka
Dans la valeur de tes tableaux non ? Le fameux width=« » ...
Répondre
-
-
-
-
23 mars 2010 16:49, par fatima_maroc
hi , i enjoyed reading ur tutu its really interesting,as am a new learner of php i want more simple exempls plz .hop ill b like u sooooooooooooooooon :)i think :(
Répondre
