Des arrondis dans une page web ?
patrice
-
PhP Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
PhP Messages postés 1770 Date d'inscription Statut Membre Dernière intervention -
bonjour tt le monde je viens de terminer un site pour le suivant je voudrais realiser des arrondis voir des cercles sur la page que dois je aopprendre?quel est le chemin a suivre pour y parvenir? merci beaucoup
A voir également:
- Des arrondis dans une page web ?
- Supprimer une page dans word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capturer une page web complète - Guide
- Créer une page web - Guide
12 réponses
Bonjour,
Les tableaux de ton site sont les endroits délimités par des <table> </table>.
Je suppose que tu souhaites arrondir les coins des bordures (en haut et à gauche) de tes images ?
Pour les arrondis, tu peux réaliser les fichiers des coins eux-mêmes (10x10 px).
Plus les images des bordures reliant chaque coin (10x10 px aussi) que tu répéteras horizontalement ou verticalement.
Il faudra ensuite les placer dans des <th> de ton tableaux :
à la place des border:10px solid purple;
C'est aussi faisable dans des <div> avec des CSS.
Tu peux aussi créer des images de tes bordures entières avec un coin arrondi et les placer en fond des cellules.
Si les dimensions des cellules de tes tableaux sont toutes différentes, ça risque d'être lourd à maintenir.
Bien que la 1re méthode soit plus simple à gérer (ça marche pour tous les <th>), c'est ce que j'ai choisi de faire pour ne pas avoir à recréer de cellules :
http://gihef.bey.free.fr/CCM/bijoux/page_1.htm
Il faudra bien-sûr en fabriquer d'autres pour les pages où les dimensions ne correspondent pas :
http://gihef.bey.free.fr/CCM/bijoux/index.htm
J'ai testé dans Safari, Opera et Firefox. Ça fonctionne.
Sont jolis les joubi.
Et puis, ces quelques remarques, qui t'aideront j'espère :
+ Il y a un “< width="600px">” qui traîne dans la page d'accueil :
http://gihef.bey.free.fr/CCM/bijoux/index_1.htm
Tu peux le supprimer.
+ J'ai annulé le petit “effet” dentelé et les puces dans la bordure gauche du menu avec : list-style-type: none dans les <ul>;
+ Tu peux éviter les espaces dans les noms de fichiers (page%201.htm). Si tu souhaites un espacement, emploies plutôt un “_” (page_1.htm).
+ Certaines de tes images sont beaucoup trop grandes.
Par exemple, “p1010078.jpg” fait 1920x2560 px et 460 ko.
Or tu l'affiches en 170x250 px.
Adapte les dimensions, réduis la taille, avant de le faire dans ton code.
Il en est de même avec les images de chaque bijou. J'apprécie de les voir de près, mais ils ne tiennent pas en entier dans mon écran (1600x1000) (-;
C'est long à charger et tout le monde n'a pas l'ADSL.
+ Revois le menu de http://www.bijouxfantaisies.fr/boucles%20d'oreilles.htm
+ J'ai corrigé quelques petites fautes, d'espaces entre autres (excuse les miennes) http://gihef.bey.free.fr/CCM/bijoux/index.htm
+ Des titres plus évocateurs (page 1, 2…) seraient possibles ? Colliers : série 1, 2 ?
+ Il est préférable, ici, de citer les liens en entiers, avec le http:// :
www.bijouxfantaisies.fr/
http://www.bijouxfantaisies.fr/
Ça nous évite un copier/coller (-:
Les tableaux de ton site sont les endroits délimités par des <table> </table>.
Je suppose que tu souhaites arrondir les coins des bordures (en haut et à gauche) de tes images ?
Pour les arrondis, tu peux réaliser les fichiers des coins eux-mêmes (10x10 px).
Plus les images des bordures reliant chaque coin (10x10 px aussi) que tu répéteras horizontalement ou verticalement.
Il faudra ensuite les placer dans des <th> de ton tableaux :
<table> [th coin haut-gauche] [th milieu] [th coin haut-droite] [th milieu] [th image] [th] [th coin bas-gauche] [th] [th] </table>
à la place des border:10px solid purple;
C'est aussi faisable dans des <div> avec des CSS.
Tu peux aussi créer des images de tes bordures entières avec un coin arrondi et les placer en fond des cellules.
Si les dimensions des cellules de tes tableaux sont toutes différentes, ça risque d'être lourd à maintenir.
Bien que la 1re méthode soit plus simple à gérer (ça marche pour tous les <th>), c'est ce que j'ai choisi de faire pour ne pas avoir à recréer de cellules :
http://gihef.bey.free.fr/CCM/bijoux/page_1.htm
Il faudra bien-sûr en fabriquer d'autres pour les pages où les dimensions ne correspondent pas :
http://gihef.bey.free.fr/CCM/bijoux/index.htm
J'ai testé dans Safari, Opera et Firefox. Ça fonctionne.
Sont jolis les joubi.
Et puis, ces quelques remarques, qui t'aideront j'espère :
+ Il y a un “< width="600px">” qui traîne dans la page d'accueil :
http://gihef.bey.free.fr/CCM/bijoux/index_1.htm
Tu peux le supprimer.
+ J'ai annulé le petit “effet” dentelé et les puces dans la bordure gauche du menu avec : list-style-type: none dans les <ul>;
+ Tu peux éviter les espaces dans les noms de fichiers (page%201.htm). Si tu souhaites un espacement, emploies plutôt un “_” (page_1.htm).
+ Certaines de tes images sont beaucoup trop grandes.
Par exemple, “p1010078.jpg” fait 1920x2560 px et 460 ko.
Or tu l'affiches en 170x250 px.
Adapte les dimensions, réduis la taille, avant de le faire dans ton code.
Il en est de même avec les images de chaque bijou. J'apprécie de les voir de près, mais ils ne tiennent pas en entier dans mon écran (1600x1000) (-;
C'est long à charger et tout le monde n'a pas l'ADSL.
+ Revois le menu de http://www.bijouxfantaisies.fr/boucles%20d'oreilles.htm
+ J'ai corrigé quelques petites fautes, d'espaces entre autres (excuse les miennes) http://gihef.bey.free.fr/CCM/bijoux/index.htm
+ Des titres plus évocateurs (page 1, 2…) seraient possibles ? Colliers : série 1, 2 ?
+ Il est préférable, ici, de citer les liens en entiers, avec le http:// :
www.bijouxfantaisies.fr/
http://www.bijouxfantaisies.fr/
Ça nous évite un copier/coller (-:
Bsr
Ce qu'il te faut c'est un logiciel de retouche d'image (genre Photoshop mais comme il est payant choisit GIMP qui lui est gratuit) au tout autre soft si tu trouves celui-là trop complexe.
Une fois que tu as appris à t'en servir et que tu obtients un résultat qui te convient, il faut évidemment tenir compte des impératifs du web.
Par ex si tu veux faire une page avec des coins arrondis tu vas devoir utiliser des tableaux : imagine un tableau de 3 lignes et de 3 colonnes au centre c'est le contenu de ta page tout autour de l'habillage (les 8 autres cases)
Evidemment seule la cellule du centre est très grandes les autres sont plus petites.
C'est un ex mais il existe pleins d'autres techniques.
Ce qu'il te faut c'est un logiciel de retouche d'image (genre Photoshop mais comme il est payant choisit GIMP qui lui est gratuit) au tout autre soft si tu trouves celui-là trop complexe.
Une fois que tu as appris à t'en servir et que tu obtients un résultat qui te convient, il faut évidemment tenir compte des impératifs du web.
Par ex si tu veux faire une page avec des coins arrondis tu vas devoir utiliser des tableaux : imagine un tableau de 3 lignes et de 3 colonnes au centre c'est le contenu de ta page tout autour de l'habillage (les 8 autres cases)
Evidemment seule la cellule du centre est très grandes les autres sont plus petites.
C'est un ex mais il existe pleins d'autres techniques.
re PHP pas tt compris... il faut que je fasse un tableaux pyuis en arrondir un angle avec photoshop mais une fois le tablo fait sur bloc note plus possible de l amener sur pshop??? apparemment j ai rien pige...sourire merci de ton aide a plus
Non tu fais ton tableau sur le bloc note normalement sauf qu'ensuite une fois que tu as réalisé ton chef-d'oeuvre sur PhotoShop tu utilises les styles pour formatter ton tableau : notemment les tailles des cellules et tu ajoutes tes images en tant qu'image de fond
Un ex : le code est toujours de l'HTML mais il y a en plus des informations de style
Voir le résultat en couleur :
http://www.nobodysperfect.freesurf.fr/design/tableau_arrondi.htm
Un ex : le code est toujours de l'HTML mais il y a en plus des informations de style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
<!--
body
{
font-family:arial;
font-size:10pt;
}
.contenu
{
color:#FFFFFF;
font-family:arial;
font-size:10pt;
padding-left:10px;
vertical-align:top;
font-weight:bold;
}
.titre
{
color:#FFFFFF;
font-family:arial;
font-size:14pt;
font-weight:bold;
margin:0px;
}
.deco_haut
{
height:24px;
background-image: url("haut.bmp");
}
.deco_corps
{
height:200px;
background-image: url("corps.bmp");
}
//-->
</style>
</head>
<body>
<table style="width:605px;" cellspacing=0>
<tr class="deco_haut">
<td>
</td>
</tr>
<tr class="deco_corps">
<td class="contenu">
<p class="titre">Ici on met le texte que l'on veut ...</p>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
</td>
</tr>
</table>
<br/>
Le même tableau avec une bordure révèle le montage ...
<table style="width:615px; border-color:#FF0000; border-style:solid;" border=2>
<tr class="deco_haut">
<td>
</td>
</tr>
<tr class="deco_corps">
<td class="contenu">
<p class="titre">Ici on met le texte que l'on veut ...</p>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
Essai de texte un peu plus long pour remplir un tant soi peu le tableau .<br/>
</td>
</tr>
</table>
</body>
</html>
Voir le résultat en couleur :
http://www.nobodysperfect.freesurf.fr/design/tableau_arrondi.htm
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour merci PhP pour ta patience ok j ai compris les codes mais mon probleme est de faire passer mon tableau du bloc note a photoshop je n y arrive pas il y a surement un moyen mais il m est inconnu .... merci encore autre chose mon 1er site est www.bijouxfantaisies.fr j espere tes critiques car elles me feront progresser merci beaucoup
Bjr
Désolé je ne comprends pas ce que tu entends par faire passer le tableau du bloc-note sur Photoshop ????????!!!!!!!
C'est rien que du texte dans le bloc note ....
Dans Photoshop tu ne fais pas de tableau : on en peut pas !!!
Enfin si en dessinant chaque ligne mais c'est très ch...
A la limite tu affiches ta page HTML avec ton tableau vide avec les bordures, tu cliques n'importe où sur ta page puis tu fais [Alt Gr]+[Imp Ecran].
Ensuite sous Photoshop menu [Fichier][Nouveau] puis coller.
Tu obtiens une image de ta page HTML que tu peux mettre sur un calque dans Photoshop pour t'aider
Pour remplir ton tableau :
Tu fais juste une image que tu découpes ensuite en plusieurs morceaux de facon à remplir les cases de ton tableau "virtuel" HTML.
Bien sûr tu t'arranges pour que la taille de ton image fasse grosso-modo la taille du tableau que tu désires obtenir.
Une fois que tu as découpé avec PhotoShop tu sauves chaques images (en JPG ou BMP) et tu vas te servir des tailles des images pour donner les dimensions exactes aux cellules de ton tableau HTML : c'est important !
Désolé je ne comprends pas ce que tu entends par faire passer le tableau du bloc-note sur Photoshop ????????!!!!!!!
C'est rien que du texte dans le bloc note ....
Dans Photoshop tu ne fais pas de tableau : on en peut pas !!!
Enfin si en dessinant chaque ligne mais c'est très ch...
A la limite tu affiches ta page HTML avec ton tableau vide avec les bordures, tu cliques n'importe où sur ta page puis tu fais [Alt Gr]+[Imp Ecran].
Ensuite sous Photoshop menu [Fichier][Nouveau] puis coller.
Tu obtiens une image de ta page HTML que tu peux mettre sur un calque dans Photoshop pour t'aider
Pour remplir ton tableau :
Tu fais juste une image que tu découpes ensuite en plusieurs morceaux de facon à remplir les cases de ton tableau "virtuel" HTML.
Bien sûr tu t'arranges pour que la taille de ton image fasse grosso-modo la taille du tableau que tu désires obtenir.
Une fois que tu as découpé avec PhotoShop tu sauves chaques images (en JPG ou BMP) et tu vas te servir des tailles des images pour donner les dimensions exactes aux cellules de ton tableau HTML : c'est important !
bonjour a tous merci a PHP et gihef trop doues vs deux sourire bon y a des trucs que j ai pigé d autres ou c est du chinois j ai cherche le code css pour <th id="accueil1"> et <th id="accueil2"> mais galere pas reussi c est arrondis de "malheur " m ont prit tout mon dimanche en vain.... j envie votre savoir a tt les deux....sourire mais un jour.... s il vs treste encore un peu de patience.... merci merci merci
- http://gihef.bey.free.fr/CCM/bijoux/
- clic-droit sur le fond de la page
- Afficher la source ou Code source
- trouver : <link rel="stylesheet"…
Le nom de la feuille de style n'a pas changé.
Donc :
- http://gihef.bey.free.fr/CCM/bijoux/macharte.css
C'est le même pour tous avec une image différente, et donc les dimensions, pour chaque situation.
+ Pour que ça colle précisément, il serait bon que toutes les images des pages de présentation aient exactement la même dimension.
+ Pour faciliter notre lecture, merci de passer à la ligne de temps en temps :
“bonjour a tous
merci a PHP et gihef trop doues vs deux sourire
bon y'a des trucs que j'ai pigé d'autres ou c'est du chinois
j'ai cherche le code css pour <th id="accueil1"> et <th id="accueil2"> mais galere pas reussi
c est arrondis de "malheur " m'ont prit tout mon dimanche en vain....
j'envie votre savoir a tt les deux....sourire mais un jour....
s'il vs treste encore un peu de patience....
merci merci merci”
De rien (-:
- clic-droit sur le fond de la page
- Afficher la source ou Code source
- trouver : <link rel="stylesheet"…
Le nom de la feuille de style n'a pas changé.
Donc :
- http://gihef.bey.free.fr/CCM/bijoux/macharte.css
C'est le même pour tous avec une image différente, et donc les dimensions, pour chaque situation.
+ Pour que ça colle précisément, il serait bon que toutes les images des pages de présentation aient exactement la même dimension.
+ Pour faciliter notre lecture, merci de passer à la ligne de temps en temps :
“bonjour a tous
merci a PHP et gihef trop doues vs deux sourire
bon y'a des trucs que j'ai pigé d'autres ou c'est du chinois
j'ai cherche le code css pour <th id="accueil1"> et <th id="accueil2"> mais galere pas reussi
c est arrondis de "malheur " m'ont prit tout mon dimanche en vain....
j'envie votre savoir a tt les deux....sourire mais un jour....
s'il vs treste encore un peu de patience....
merci merci merci”
De rien (-:
Bsr,
Merci pour les compliments .
Juste un petit détail : tous les codes CSS ne servent qu'à faire de la mise en forme (couleur, police, positionnement, taille des éléments) mais ils n'interviennent en aucune manière sur les graphiques eux-mêmes.
N'espère pas trouver une propriété "magique" CSS qui va ajouter un joli arrondi à ton tableau HTML : ca n'existe pas !
En fait on ne peut pas dessiner avec les CSS.
Si tu veux un arrondi tu dois le dessiner à la main ou utiliser une image toute faite.
Je ne cacherais pas que c'est bcp de travail (surtout sous Photoshop ou équivalent. Et puis avec une souris c'est pas le top ... et encore je suis loin du compte ! Faut absolument que je m'achète une tablette graphique décidément ...)
A côté du temps passé pour le design, la programmation n'est rien
Mais si tu persévères tu vas y arriver.
Tu as déjà un site ce qui n'est pas si mal !
Mais plutôt que d'utiliser des tableaux tu peux aussi faire une seule grande image dont tu te sers comme fond de page et ensuite tu viens positionner dessus tes textes.
Avec le haut débit, le temps où il fallait bidouiller pour que les images soient les plus "légères" possible (en termes de taille de fichiers à transférer) est à mon sens révolu. Alors pourquoi pas ?
(sincèrement désolé pour les malheureux internautes qui surfent encore avec des vieux modems 56k, snif, snif, LOL)
Merci pour les compliments .
Juste un petit détail : tous les codes CSS ne servent qu'à faire de la mise en forme (couleur, police, positionnement, taille des éléments) mais ils n'interviennent en aucune manière sur les graphiques eux-mêmes.
N'espère pas trouver une propriété "magique" CSS qui va ajouter un joli arrondi à ton tableau HTML : ca n'existe pas !
En fait on ne peut pas dessiner avec les CSS.
Si tu veux un arrondi tu dois le dessiner à la main ou utiliser une image toute faite.
Je ne cacherais pas que c'est bcp de travail (surtout sous Photoshop ou équivalent. Et puis avec une souris c'est pas le top ... et encore je suis loin du compte ! Faut absolument que je m'achète une tablette graphique décidément ...)
A côté du temps passé pour le design, la programmation n'est rien
Mais si tu persévères tu vas y arriver.
Tu as déjà un site ce qui n'est pas si mal !
Mais plutôt que d'utiliser des tableaux tu peux aussi faire une seule grande image dont tu te sers comme fond de page et ensuite tu viens positionner dessus tes textes.
Avec le haut débit, le temps où il fallait bidouiller pour que les images soient les plus "légères" possible (en termes de taille de fichiers à transférer) est à mon sens révolu. Alors pourquoi pas ?
(sincèrement désolé pour les malheureux internautes qui surfent encore avec des vieux modems 56k, snif, snif, LOL)
Effectivement.
Je pensais avoir été assez explicite. Mais bon, on ne l'est jamais assez.
Il faut donc une image différente en fond de cellule à chaque fois que la cellule du tableau contient quelque chose d'une taille différente.
Dans mes exemples, il m'en a fallu 3. Une, identique partout, dans la page
http://gihef.bey.free.fr/CCM/bijoux/page_1.htm
(c'est pour ça que “ il serait bon que toutes les images des pages de présentation aient exactement la même dimension”)
et 2 autres pour les 2 situations, l'image et le titre dans la page
http://gihef.bey.free.fr/CCM/bijoux/index.htm
Pour ce qui est de la réalisation des images, c'est plus simple que ce qu'indique PhP.
Je ne me suis pas servi d'un logiciel de traitement bitmap comme Gimp ou Photoshop (bonjour la galère), mais d'un logiciel de dessin vectoriel. D'Inkscape précisément. On en parle ici :
http://www.commentcamarche.net/faq/sujet-1471
Et là, ça devient aisé.
- Choisir l'Outil Courbes de Bézier
http://www.image-dream.com/membre/up/anonym/a7ffa462d41d6a3ab4edd3cf83f10f4c.png
- Tracer un L à l'envers (<Ctrl> aide à maintenir dans l'axe)
http://www.image-dream.com/membre/up/anonym/ec8bcdfea8ba9f0d214aeacdb1dea2c4.png
Ça se fait en 3 clics.
- Choisir les extrémités et les coins arrondis (1), une épaisseur de 10 px (2) et la couleur voulue (3) pour le trait
http://www.image-dream.com/membre/up/anonym/3207ba13d0fd8a1ad526c741b8d54a88.png
- Convertir le trait en chemin
http://www.image-dream.com/membre/up/anonym/c0970c32fa93fc3e5dc4b7986ec995b1.png
Ça crée un objet avec des contours
- Ôter les nœuds superflus
http://www.image-dream.com/membre/up/anonym/905d433ba9548cd253ca6fe92edd0915.png
- Déplacer ceux qui conviennent et les adapter
http://www.image-dream.com/membre/up/anonym/b61aedde0b7258c037ee43aa166af864.png
Pour changer les dimensions de l'image,
- Sélectionner les 2 nœuds de l'extrémité à étendre (1)
- En saisir un et déplacer (2)
http://www.image-dream.com/membre/up/anonym/fa003f6a2cac1bb0e5a0113706bf81be.png
Si on utilisait l'Outil de sélection, les épaisseurs s'adapteraient aussi et ça créerait des déformations.
Voilà, ce n'est pas plus dur que ça.
Après exportation en png, ça fait des fichiers assez légers (de 1 100 octets à 1 600 octets) à la transparence parfaite.
Regardez aussi ici pour le vérifier :
http://gihef.bey.free.fr/CCM/ASV/logos_ASV.html
à partir du ballon… Ça s'intègre au poil dans la couleur de fond. Beaucoup mieux qu'en gif (les images du haut).
Vivement qu'on puisse faire confiance à tous les navigateurs pour qu'ils affichent correctement le svg.
Je pensais avoir été assez explicite. Mais bon, on ne l'est jamais assez.
Il faut donc une image différente en fond de cellule à chaque fois que la cellule du tableau contient quelque chose d'une taille différente.
Dans mes exemples, il m'en a fallu 3. Une, identique partout, dans la page
http://gihef.bey.free.fr/CCM/bijoux/page_1.htm
(c'est pour ça que “ il serait bon que toutes les images des pages de présentation aient exactement la même dimension”)
et 2 autres pour les 2 situations, l'image et le titre dans la page
http://gihef.bey.free.fr/CCM/bijoux/index.htm
Pour ce qui est de la réalisation des images, c'est plus simple que ce qu'indique PhP.
Je ne me suis pas servi d'un logiciel de traitement bitmap comme Gimp ou Photoshop (bonjour la galère), mais d'un logiciel de dessin vectoriel. D'Inkscape précisément. On en parle ici :
http://www.commentcamarche.net/faq/sujet-1471
Et là, ça devient aisé.
- Choisir l'Outil Courbes de Bézier
http://www.image-dream.com/membre/up/anonym/a7ffa462d41d6a3ab4edd3cf83f10f4c.png
- Tracer un L à l'envers (<Ctrl> aide à maintenir dans l'axe)
http://www.image-dream.com/membre/up/anonym/ec8bcdfea8ba9f0d214aeacdb1dea2c4.png
Ça se fait en 3 clics.
- Choisir les extrémités et les coins arrondis (1), une épaisseur de 10 px (2) et la couleur voulue (3) pour le trait
http://www.image-dream.com/membre/up/anonym/3207ba13d0fd8a1ad526c741b8d54a88.png
- Convertir le trait en chemin
http://www.image-dream.com/membre/up/anonym/c0970c32fa93fc3e5dc4b7986ec995b1.png
Ça crée un objet avec des contours
- Ôter les nœuds superflus
http://www.image-dream.com/membre/up/anonym/905d433ba9548cd253ca6fe92edd0915.png
- Déplacer ceux qui conviennent et les adapter
http://www.image-dream.com/membre/up/anonym/b61aedde0b7258c037ee43aa166af864.png
Pour changer les dimensions de l'image,
- Sélectionner les 2 nœuds de l'extrémité à étendre (1)
- En saisir un et déplacer (2)
http://www.image-dream.com/membre/up/anonym/fa003f6a2cac1bb0e5a0113706bf81be.png
Si on utilisait l'Outil de sélection, les épaisseurs s'adapteraient aussi et ça créerait des déformations.
Voilà, ce n'est pas plus dur que ça.
Après exportation en png, ça fait des fichiers assez légers (de 1 100 octets à 1 600 octets) à la transparence parfaite.
Regardez aussi ici pour le vérifier :
http://gihef.bey.free.fr/CCM/ASV/logos_ASV.html
à partir du ballon… Ça s'intègre au poil dans la couleur de fond. Beaucoup mieux qu'en gif (les images du haut).
Vivement qu'on puisse faire confiance à tous les navigateurs pour qu'ils affichent correctement le svg.
Et, si on choisissait la 1re méthode du <7>, on pourrait utiliser la même réalisation à laquelle on ferait subir des découpes.
- Créer un carré de 10 px x 10 px (le dupliquer pour pouvoir le réutiliser)
- Le superposer à un des coins
http://www.image-dream.com/membre/up/anonym/103339f734b5e49229b48def48558370.png
- Sélectionner les 2 dessins
http://www.image-dream.com/membre/up/anonym/55e5df0a27a92d426821d22f974989d3.png
- Choisir Chemin—Division
http://www.image-dream.com/membre/up/anonym/71f0909a778b9c2ca01048afe6570156.png
- Recommencer ailleurs
http://www.image-dream.com/membre/up/anonym/cb8844d14405b6c4759805a0d854131e.png
En quelques minutes…
- Créer un carré de 10 px x 10 px (le dupliquer pour pouvoir le réutiliser)
- Le superposer à un des coins
http://www.image-dream.com/membre/up/anonym/103339f734b5e49229b48def48558370.png
- Sélectionner les 2 dessins
http://www.image-dream.com/membre/up/anonym/55e5df0a27a92d426821d22f974989d3.png
- Choisir Chemin—Division
http://www.image-dream.com/membre/up/anonym/71f0909a778b9c2ca01048afe6570156.png
- Recommencer ailleurs
http://www.image-dream.com/membre/up/anonym/cb8844d14405b6c4759805a0d854131e.png
En quelques minutes…
Bonsoir,
Ha bah oui tout' suit' l'artillerie lourde dessin vectoriel, courbes de bézier, opérations booléennes sur les formes et j'en passe ... LOL
C'est pas loyal ! Moi j'avais que Photoshop ;-)
Et pour finir les png qui requièrent un horrible hack pour s'afficher correctement sous IE (en exploitant pleinement la couche alpha s'entend) ! IE est mort, vive FF !
Bon prince, je te laisse le soin d'expliquer pourquoi il vaut mieux utiliser le format png que gif pour gérer la transparence . (prépare une démo d'enfer !)
Sinon chapeau bas pour l'explication !
Pas facile hein d'expliquer simplement des choses qui paraissent tellement évidentes.
J'ai dû m'y reprende à plusieurs fois rien que pour la phrase :
"les images soient les plus "légères" possible (en termes de taille de fichiers à transférer)" Tout ca parce que je ne voulais pas utiliser les mots Ko ou poids de l'image ... Et encore je ne suis pas complètement satisfait.
bon zou demain boulot
Sur ce coin, coin !
Ha bah oui tout' suit' l'artillerie lourde dessin vectoriel, courbes de bézier, opérations booléennes sur les formes et j'en passe ... LOL
C'est pas loyal ! Moi j'avais que Photoshop ;-)
Et pour finir les png qui requièrent un horrible hack pour s'afficher correctement sous IE (en exploitant pleinement la couche alpha s'entend) ! IE est mort, vive FF !
Bon prince, je te laisse le soin d'expliquer pourquoi il vaut mieux utiliser le format png que gif pour gérer la transparence . (prépare une démo d'enfer !)
Sinon chapeau bas pour l'explication !
Pas facile hein d'expliquer simplement des choses qui paraissent tellement évidentes.
J'ai dû m'y reprende à plusieurs fois rien que pour la phrase :
"les images soient les plus "légères" possible (en termes de taille de fichiers à transférer)" Tout ca parce que je ne voulais pas utiliser les mots Ko ou poids de l'image ... Et encore je ne suis pas complètement satisfait.
bon zou demain boulot
Sur ce coin, coin !