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 :
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
