Utilisation Des Tranches Dans Photoshop

[d0v3]

Bonjour à tous,

 

La réponse à ma question doit vous paraître évidente mais bon... je ne trouve pas la solution.

 

J'ai une image que je souhaite diviser en plusieurs tranches pour définir à chacune de ces différentes tranches un lien directement depuis photoshop.

Mon but est d'afficher une image avec différents liens sur mon site internet.

 

J'ai compris comment utiliser l'outil tranche de cette manière :

- Je crée mes différentes tranches auxquels j'attribue un URL et une Cible.

- J'enregistre le fichier dans "Enregistrer pour le web"

- Je choisi l'option JPEG, puis j'enregistre au format HTML + Image.

- Résultat : j'ai un dossier avec mes différentes tranches ainsi que le code HTML pour l'intégration.

- Je transfère les images vers mon répertoire prestashop.

- Je récupère leur lien que je remplace dans mon code HTML

 

En faisant cela, je m'aperçoit qu'il me manque des morceaux d'images qui ne sont pas dans ce dossier créé par photoshop, des morceaux auxquels je n'ai affecté aucun URL et qui se situe entre les différentes tranches créées.

 

En clair, comment faire pour créer des tranches sur une image tout en conservant le "fond" ?

 

Merci beaucoup pour votre aide !

 

[Alexandre Carette]

bonjour,

Est ce qu'on peux avoir une url de site pour se pencher sur ton problème ?

[d0v3]

Bien entendu

 

http://www.boutondemanchette.fr/content/168-selection-cadeaux-de-noel      -> Voila le résultat... pourtant lorsque j'ouvre le lien photoshop, toute les parties s'assemble à la perfection.

[iXs]

C'est parce que les CSS de ton thème ajoute du padding sur les TD :

table td, table th {
   padding: 9px 10px;
   text-align: left;
}

du coup sur le code fourni par Photoshop il faudrait que tu ajoutes des padding:0 sur tous les TD :

<td rowspan="2" style="padding:0;">

 

 

 

Sinon plus rapide, tu edites le fichier CSS de ton thème et tu ajoutes dedans :

 

table#Table_01 td{

padding:0;

}

[Alexandre Carette]

Ok, alors ton code utilise des tables html ca ne pourra donc pas etre responsive.

 

Comme tu as activé la compression de tes css je ne peux pas voir le fichier css ou il y a cette règle mais ca doit etre dans le global.css de ton theme logiquement... (sinon desactive le CCC dans les performances pour m'aider):

 

tu as:

table td, table th {
    padding: 9px 10px;
    text-align: left;
}

Ca t ajoute du padding: padding: 9px 10px; a tout tes tableaux

 

Ajoute une classe css dans ton code: class="no-padding"

<table class="no-padding" id="Table_01" style="height:1653px;" border="0" cellpadding="0" cellspacing="0" width="1200">

<tbody><tr><td colspan="19"><img src="/img/cms/NOEL/htmlnoel/espace.gif" alt="espace.gif" height="589" width="1200"></td>
</tr><tr><td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-03.gif" alt="espace-03.gif" height="220" width="12"></td>
<td colspan="2"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/offre1.gif" alt="offre1.gif" border="0" height="153" width="277"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-05.gif" alt="espace-05.gif" height="220" width="25"></td>
<td colspan="5"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/offre2.gif" alt="offre2.gif" border="0" height="153" width="270"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-07.gif" alt="espace-07.gif" height="220" width="23"></td>
<td colspan="5"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/ofrre3.gif" alt="ofrre3.gif" border="0" height="153" width="272"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-09.gif" alt="espace-09.gif" height="220" width="26"></td>
<td><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/cadeau-dexception.gif" alt="cadeau-dexception.gif" border="0" height="153" width="272"></a></td>
<td colspan="2" rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-11.gif" alt="espace-11.gif" height="220" width="23"></td>
</tr><tr><td><img src="/img/cms/NOEL/htmlnoel/espace-12.gif" alt="espace-12.gif" height="67" width="8"></td>
<td><img src="/img/cms/NOEL/htmlnoel/espace-13.gif" alt="espace-13.gif" height="67" width="269"></td>
<td colspan="5"><img src="/img/cms/NOEL/htmlnoel/espace-14.gif" alt="espace-14.gif" height="67" width="270"></td>
<td colspan="5"><img src="/img/cms/NOEL/htmlnoel/espace-15.gif" alt="espace-15.gif" height="67" width="272"></td>
<td><img src="/img/cms/NOEL/htmlnoel/espace-16.gif" alt="espace-16.gif" height="67" width="272"></td>
</tr><tr><td rowspan="6"><img src="/img/cms/NOEL/htmlnoel/espace-17.gif" alt="" height="843" width="12"></td>
<td colspan="4"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/prestige.gif" alt="" border="0" height="222" width="375"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-19.gif" alt="" height="247" width="26"></td>
<td colspan="5"><a href="self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_18.gif" alt="" border="0" height="222" width="374"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-21.gif" alt="" height="247" width="29"></td>
<td colspan="6"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_20.gif" alt="" border="0" height="222" width="373"></a></td>
<td rowspan="6"><img src="/img/cms/NOEL/htmlnoel/espace-23.gif" alt="" height="843" width="11"></td>
</tr><tr><td colspan="4"><img src="/img/cms/NOEL/htmlnoel/espace-24.gif" alt="" height="25" width="375"></td>
<td colspan="5"><img src="/img/cms/NOEL/htmlnoel/espace-25.gif" alt="" height="25" width="374"></td>
<td colspan="6"><img src="/img/cms/NOEL/htmlnoel/espace-26.gif" alt="" height="25" width="373"></td>
</tr><tr><td colspan="6" rowspan="3"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_25.gif" alt="" border="0" height="572" width="483"></a></td>
<td rowspan="4"><img src="/img/cms/NOEL/htmlnoel/espace-28.gif" alt="" height="596" width="21"></td>
<td colspan="10"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_26.gif" alt="" border="0" height="360" width="673"></a></td>
</tr><tr><td colspan="10"><img src="/img/cms/NOEL/htmlnoel/espace-30.gif" alt="" height="24" width="673"></td>
</tr><tr><td colspan="5"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_29.gif" alt="" border="0" height="188" width="323"></a></td>
<td rowspan="2"><img src="/img/cms/NOEL/htmlnoel/espace-32.gif" alt="" height="212" width="27"></td>
<td colspan="4"><a href="http://www.maisondelacravate.fr/" target="_self"> <img src="/img/cms/NOEL/htmlnoel/page-noel-1170-2-(David)_31.gif" alt="" border="0" height="188" width="323"></a></td>
</tr><tr><td colspan="6"><img src="/img/cms/NOEL/htmlnoel/espace-34.gif" alt="" height="24" width="483"></td>
<td colspan="5"><img src="/img/cms/NOEL/htmlnoel/espace-35.gif" alt="" height="24" width="323"></td>
<td colspan="4"><img src="/img/cms/NOEL/htmlnoel/espace-36.gif" alt="" height="24" width="323"></td>
</tr><tr><td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="12"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="8"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="269"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="25"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="73"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="26"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="82"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="21"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="68"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="23"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="180"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="29"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="23"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="27"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="13"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="26"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="272"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="12"></td>
<td><img src="/img/cms/NOEL/htmlnoel/spacer.gif" alt="" height="1" width="11"></td>
</tr></tbody></table>

Dans ton global.css tu ajoutes une regle:

.no-padding table td, table th {
padding: 0;

}

tu as été plus rapide que moi iXs

[Oron]

Bonjour

 

Photoshop ou Prestashop ? merci de corriger ou de voir sur un forum photoshop

[Eolia]

 

Ok, alors ton code utilise des tables html ca ne pourra donc pas etre responsive.

 

 

Hum... je ne suis pas vraiment d'accord avec ça.

Ce qui rend le responsive possible, ce n'est pas la structure mais le dimensionnement css. Si celui-ci est en % le responsive est possible^^

 

Oron c'est l'heure d'aller dodo ou alors il faut suivre

[Oron]

Oron c'est l'heure d'aller dodo ou alors il faut suivre

 

Je ne connais pas photoshop et je ne sais pas si photoshop fait des pages html.

 

[Alexandre Carette]

 

Hum... je ne suis pas vraiment d'accord avec ça.

Ce qui rend le responsive possible, ce n'est pas la structure mais le dimensionnement css. Si celui-ci est en % le responsive est possible^^

 

oui tu as raison faut que je me penche sur le sujet merci pour cette correction : http://creersonsiteweb.net/page-bootstrap-tableau-table-responsive-design

Edited November 25, 2015 by Alexandre-KM (see edit history)

[Alexandre Carette]

par contre pour ce cas la faudra utiliser le systeme de grille de bootstrap et coder les slices images avec des div pour que les images puissent se mettre les unes en dessous des autres lors de la resolution mobile

Edited November 25, 2015 by Alexandre-KM (see edit history)

[d0v3]

Merci pour vos réponses. Vu la technicité de la chose, j'ai décidé de trancher mon image pour ensuite assembler à la suite les morceaux et enfin leur attribuer un lien depuis presta.

 

Bonne journée