Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1] 2   En bas

Auteur Sujet: Bouton créer dans PS ou AI ?  (Lu 19660 fois)

Anth

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 74
    • Voir le profil
Bouton créer dans PS ou AI ?
« le: décembre 07, 2012, 23:06:35 pm »

Bonsoir à tous, je cherche à faire un site internet (avec adobe Muse).
(Perso je préfèrerai créé le bouton sur Illustrator)

Mais quel est LA bonne méthode pour créer un bouton destiné au web. Le créer dans Photoshop ou Illustrator ?

Sous quel format l’enregistrer ?

Lorsque je crée mon bouton j'utilise d'office une résolution de 72ppp ?
Si le bouton est créé dans Illustrator il est possible de l'importer dans Adobe Muse ?




PS : Je précise que quand la souris passera sur le bouton, il ne changera pas d'aspect.
IP archivée

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : Bouton créer dans PS ou AI ?
« Réponse #1 le: décembre 08, 2012, 10:08:34 am »

Salut Anth,

Un bouton dans Photoshop ou Illustrator ... je dirais que c'est selon ton affinité avec l'un ou l'autre ... le final c'est du pixel, Photoshop permet de visualiser directement le résultat (pixel), si tu travailles avec Illustrator vas dans le menu Affichage > Aperçu en pixel pour avoir le même type de rendu. Que tu travailles en 72dpi c'est très bien, pour le format d'export pour le web, le PNG 24 (couche alpha) est certainement le meilleur format. Concernant Muse par contre j'ai pas encore testé.
IP archivée
Less is more

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1704
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #2 le: décembre 08, 2012, 10:10:56 am »

Mais quel est LA bonne méthode pour créer un bouton destiné au web. Le créer dans Photoshop ou Illustrator ?
Ça dépend de la tête que ton bouton aura. D'emblée, et pour un bouton simple, j'ai envie de te dire HTML+CSS.

Ensuite Photoshop ou Illustrator ça dépend également de ce que tu veux comme type de bouton.

Sous quel format l’enregistrer ?
En .png (Photoshop) ou alors en .svg (Illustrator)

Lorsque je crée mon bouton j'utilise d'office une résolution de 72ppp ?
D'après ce que j'entends autour de moi, le 72ppp est mort depuis belle lurette. Y compris pour les ordinateurs (fixe et portable). J'y connais pas grand chose là dedans mais il me semble que la résolution par défaut à changer et qu'elle est supérieur à ça (et je parle même pas des tablettes retina).

Si le bouton est créé dans Illustrator il est possible de l'importer dans Adobe Muse ?
J'en sais rien du tout. Je suppose que oui.
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : Re : Bouton créer dans PS ou AI ?
« Réponse #3 le: décembre 08, 2012, 10:23:33 am »

Salut Marroon,
C'est vrai que moi-même je ne réfléchis plus sur la résolution, j'ai cherché un peu et j'ai trouvé un article qui étoffe l'idée.
IP archivée
Less is more

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #4 le: décembre 08, 2012, 11:03:33 am »

Salut vous tous.
Pour AI ou PS comme mes compères, je dirai libre choix.
Pour la sortie, toujours comme mes compères, .png.

Pour la résolution, j'ai envie de dire, on s'en fout, les moniteurs affichant du pixel, une image de 150 pixels de large occupera 150 pixels sur l'écran, qu'elle soit en 72 ou 300 ppp… Seule sa taille physique (imprimée) changera.

Ci dessous 2 bouton que je viens de faire rapidement et qui ne parlent que d'eux-même.



Cool l'article metaroid !
« Modifié: décembre 08, 2012, 11:12:28 am par Eddy »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Anth

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 74
    • Voir le profil
Re : Bouton créer dans PS ou AI ?
« Réponse #5 le: décembre 08, 2012, 15:07:16 pm »

Merci à tous pour vos réponses.
Finalement j'ai décidé de faire un bouton qui change d'aspect quand on le survole, donc je l'ai créé dans PS.

Par contre pour les flèches de défilement je l'ai est créé dans Illustrator et enregistré en PNG comme vous me l'avez conseillé.
IP archivée

Anth

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 74
    • Voir le profil
Re : Bouton créer dans PS ou AI ?
« Réponse #6 le: décembre 08, 2012, 15:53:17 pm »

Je viens d'intégrer les boutons PSD, et ça marche. :D
IP archivée

claude72

  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 620
    • Voir le profil
    • E-mail
Re : Re : Bouton créer dans PS ou AI ?
« Réponse #7 le: décembre 08, 2012, 17:43:31 pm »

Pour la résolution, j'ai envie de dire, on s'en fout, les moniteurs affichant du pixel,...

Tu peux laisser libre court à tes envies, et dire haut et fort qu'on s'en fout...

... puisqu'effectivement les navigateurs ne prennent en compte que les pixels, et affichent un pixel d'image par pixel d'écran.

Cependant, dans Photoshop il faut bien mettre une résolution... alors pourquoi pas 72 ppi, puisque c'est la résolution historique de l'affichage écran, et du Web.


(ceci dit, même si les écrans n'ont plus aujourd'hui des résolutions de 72 ppi, il n'empêche que le système du Mac et/ou de certains logiciels de mise en page et de traitement de texte continuent à calculer l'affichage, et plus précisément la conversion des millimètres en pixels sur la base de 72 ppi ! et c'est pourquoi un affichage à 100% d'une page A4 dans InDesignCS4 ou XPress7 ou IllustratorCS4 ne mesure jamais 21 x 29,7 cm sur l'écran...
... mais a en réalité une dimension à l'écran issue du ratio entre la résolution réelle de l'écran et 72 ppi !!!)


Edit pour préciser les versions des softs testées, puisque ça a changé avec la CS6 !
« Modifié: décembre 09, 2012, 14:37:12 pm par claude72 »
IP archivée
Tout finit toujours par s'arranger... même mal !

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1704
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #8 le: décembre 08, 2012, 19:01:36 pm »

Cependant, dans Photoshop il faut bien mettre une résolution... alors pourquoi pas 72 ppi, puisque c'est la résolution historique de l'affichage écran, et du Web.

Parce que 72 ppi ne veux plus rien dire depuis belle lurette et que maintenant il y a désormais une foultitude d'écrans de différentes tailles et de différentes résolutions  ;) Lire le lien de Metaroid.
« Modifié: décembre 08, 2012, 19:53:17 pm par marroon »
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

concierge

  • Administrator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 5699
  • Je suis dans l'escalier
    • Voir le profil
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #9 le: décembre 08, 2012, 22:28:51 pm »

Citer
Parce que 72 ppi ne veux plus rien dire
Bin si, 72 ppi… :)
IP archivée
C'est pas faux...

claude72

  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 620
    • Voir le profil
    • E-mail
Re : Re : Bouton créer dans PS ou AI ?
« Réponse #10 le: décembre 09, 2012, 12:39:39 pm »

Parce que 72 ppi ne veux plus rien dire depuis belle lurette et que maintenant il y a désormais une foultitude d'écrans de différentes tailles et de différentes résolutions  ;) Lire le lien de Metaroid.

Oui, j'ai lu...

... mais lis ce que j'ai écrit précédemment, tu verras qu'il dit exactement la même chose que moi au sujet du Web... (en revanche, il est un peu léger en ce qui concerne le Print, il le reconnaît lui-même...) :

1° la résolution n'a aucune importance pour des images destinées au Web, puisque l'affichage se fait de pixel à pixel (1 pixel d'image = 1 pixel d'écran)

2° il faut quand-même mettre une résolution dans Photoshop ! alors tu peux mettre 96, ou 256987 ou la résolution exacte de ton écran si tu la connais... ou pourquoi pas 72 ppi ? puisque de toutes façons il faut bien mettre un chiffre dans cette case !

3° InDesignCS4/XPress7/IllustratorCS4 (et antérieurs) et/ou le système du Mac (OS 10.5 et antérieurs) calculent toujours l'affichage sur une base de 72 ppi, donc 72 ppi veut toujours dire quelquechose, au moins pour l'OS du Mac et/ou certains softs, car à chaque fois que tu affiches une page dans InDesign CS4 (et antérieurs), la taille de l'affichage de cette page est calculée pour un écran qui a une résolution de 72 ppi.
(et non pas 96 ppi comme dis le Monsieur dans le lien donné par Metaroid)
Et donc comme ton écran n'a pas réellement une résolution de 72 ppi, alors la page affichée n'est pas à la vraie dimension...
... mais ça se calcule : par exemple, mon écran PAO a une résolution de 89 ppi, le ratio entre les 89 ppi réel de l'écran et les 72 ppi utilisés par le système est égal à 1,236, donc il faut que j'affiche mes docs InDesign/XPress/Illustrator à 123,6% pour les visualiser en taille réelle.
Et ça marche ! tu peux faire l'essai toi-même.



Edit pour préciser les versions des softs testées, puisque ça a changé avec la CS6 !
« Modifié: décembre 09, 2012, 14:37:38 pm par claude72 »
IP archivée
Tout finit toujours par s'arranger... même mal !

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #11 le: décembre 09, 2012, 13:13:34 pm »

Bonjour Claude.
Si je te comprends bien, l'affichage de la taille réelle de ton doc (option dispo dans ID), tu as un affichage réduit de ton doc.

Je viens de faire un test sur CS5 et sur CS6.

Sur CS5 :
L'option "affichage réel", zoom à 100% donc, m'affiche un doc A4 réduit à 139 mm de large au lieu des 210 mm réels.
Sur mon 27 pouce de 2560 px de large, le ratio dont tu parles est de 1,513. Donc, le calcul que tu cites plus haut parait exact et je devrais zoomer à ±150% pour avoir un affichage

Sur CS6. Il y a un gros changement !
Cette même option (affichage réel) cochée dans ID CS6 m'affiche bien un doc de 210 mm de large. L'affichage est donc bien réel.
À se demander si c'est l'OS qui effectue ce calcul ou le logiciel utilisé. Si c'est la première option qui est juste, alors ID CS6 remet les pendules à l'heure !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1704
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #12 le: décembre 09, 2012, 14:17:07 pm »

Attention, ici on parle bien de web et surtout on parle d'affichage écran (et pas uniquement sur l'OS Mac qui est minoritaire dans le monde).

Donc, et je me répète, les différents écrans ont tous des résolutions et des affichages différents. Et malgré qu'il faille bien mettre quelque chose dans la résolution sur Photoshop, les 72 ppi n'ont, aujourd'hui, aucune légitimité quelconque mise à part que c'est une bonne base solide. (tout comme le mythe des 300 dpi en print).

Enfin, et comme le dis si bien l'article de metaroid : "Il va falloir diminuer la dépendance aux graphismes bitmap"
« Modifié: décembre 09, 2012, 14:22:46 pm par marroon »
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard

claude72

  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 620
    • Voir le profil
    • E-mail
Re : Re : Bouton créer dans PS ou AI ?
« Réponse #13 le: décembre 09, 2012, 14:25:06 pm »

Bonjour Eddy

Si je te comprends bien, l'affichage de la taille réelle de ton doc (option dispo dans ID), tu as un affichage réduit de ton doc.

Oui, il est réduit du ratio de 72 divisé par la résolution réelle de ton écran.



Citer
Je viens de faire un test sur CS5 et sur CS6.

Sur CS5 :
L'option "affichage réel", zoom à 100% donc, m'affiche un doc A4 réduit à 139 mm de large au lieu des 210 mm réels.
Sur mon 27 pouce de 2560 px de large, le ratio dont tu parles est de 1,513. Donc, le calcul que tu cites plus haut parait exact et je devrais zoomer à ±150% pour avoir un affichage

Oui, et 139 mm de largeur à l'écran multiplié par le ratio de 1,513 que tu as calculé à partir des résolutions donne bien 210,3 mm, qui est bien la taille réelle du doc.



Citer
Sur CS6. Il y a un gros changement !
Cette même option (affichage réel) cochée dans ID CS6 m'affiche bien un doc de 210 mm de large. L'affichage est donc bien réel.

Pas si gros que ça !!! Tu as peut-être remarqué que dans la liste des applications concernées je ne parle que de InDesign/XPress/Illustrator (voire des logiciels de traitement de texte) sans jamais inclure Acrobat !!!

Parceque Acrobat a un fonctionnement particulier depuis déjà quelques versions : regardes dans les préférences d'Acrobat, à la rubrique "Affichage", tu y verras qu'Acrobat (même le Reader) propose d'utiliser :
- soit une résolution "Système", qui est différente de 72 ppi et variable selon les écrans, (sur celui que j'utilise là pour internet c'est 85 ppi)
- soit une résolution personnalisée, qui est par défaut à 72 ppi...

Si tu choisis d'utiliser la résolution "Système", l'affichage sera alors exact.
Si tu choisis d'utiliser la résolution "Personnalisée" à 72 ppi, tu retrouveras la même "erreur" d'affichage que dans InDesign CS5, avec la nécessité d'utiliser ton ratio de 151,3% pour rétablir la taille réelle d'affichage.


Citer
À se demander si c'est l'OS qui effectue ce calcul ou le logiciel utilisé. Si c'est la première option qui est juste, alors ID CS6 remet les pendules à l'heure !

Ça c'est la bonne question !!! une chose est (quasi) sûre, c'est l'OS qui sait où aller chercher dans l'écran pour connaître sa taille, et qui sait faire le calcul entre la taille de l'écran et le nombre de pixels affichés pour obtenir la résolution...

... ensuite, c'est un peu l'inconnue.

Cependant, si cette info de résolution réelle était vraiment gérée par l'OS du Mac (comme le laisse sous-entendre le réglage d'Acrobat qui parle de "Résolution système", alors ça voudrait dire que tous les logiciels qui donnent un affichage erroné auraient leur propre moteur de calcul de l'affichage indépendant de l'OS et fonctionnant avec une valeur fausse de 72 ppi, alors que la bonne info de la bonne résolution est dispo dans l'OS, mais ces logiciels ne seraient pas foutus de l'utiliser ???

Perso, je pense plutôt que l'OS calcule toujours en 72 ppi, et que le "système" auquel Acrobat fait référence dans ses préférence n'est pas l'OS de l'ordinateur, mais le "système" du logiciel, et donc que c'est chaque logiciel qui fait le calcul et qui rétablit l'affichage à sa véritable taille... donc c'est plutôt ID CS6 qui "remet les pendules à l'heure" (pour reprendre ton expression), ayant été programmé pour être capable d'afficher des tailles correspondant réellement à ce que demande l'utilisateur...
... comme Acrobat le fait depuis (au moins) la version 6 !!!

En fait, on n'aura probablement jamais la réponse...

... mais quoi qu'il en soit, même si on n'est pas sûr de quel "système" il s'agit, une chose est sûre, c'est que :
- InDesign jusqu'à CS5 d'après tes essais,
- XPress 7 et Illustrator CS4 de mon expérience...
... affichent leurs pages en utilisant encore une résolution d'écran de 72 ppi !!!
« Modifié: décembre 09, 2012, 14:30:13 pm par claude72 »
IP archivée
Tout finit toujours par s'arranger... même mal !

marroon

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1704
  • Wisinaute
    • Voir le profil
    • Studio graphique et imprimeur typographique
    • E-mail
Re : Bouton créer dans PS ou AI ?
« Réponse #14 le: décembre 09, 2012, 14:35:22 pm »

Sur CS6. Il y a un gros changement !
Cette même option (affichage réel) cochée dans ID CS6 m'affiche bien un doc de 210 mm de large. L'affichage est donc bien réel.
À se demander si c'est l'OS qui effectue ce calcul ou le logiciel utilisé. Si c'est la première option qui est juste, alors ID CS6 remet les pendules à l'heure !

Euh...J'ai pas du tout ça moi (Windows). J'ai un outil dans mon écran qui me permet d'afficher les formats en surbrillance sur mon écran et un document A4 à 100% dans Indesign CS6 ne fait absolument pas 210x297mm...

[EDIT] Mon doc A4 fait 300x215mm (en réelle toujours).
« Modifié: décembre 09, 2012, 14:38:50 pm par marroon »
IP archivée
L'échec, c'est la réussite du con. - Frédéric Dard
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum