Forums Développement Multimédia

Aller au contenu

- - - - -

Pbde définition et taille avec dessins vectorisés sur Ai et autres questions

définition taille dessin vectorisé Illustrator page site

15 réponses à ce sujet

#1 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 05 May 2015 - 12:01 PM

Bonjour,

Voilà, j'aimerais savoir si il est possible de régler le souci suivant (je précise tout de suite que je débute dans illustrator et Ps , donc n'hésitez pas à me dire les trucs que je fais n'importe comment) :

Dans le cadre d'une création de site internet, j'ai prévu pour ma page d'accueil, entre autres, l'insertion de vignettes style "icones" dans lesquelles figurent du dessin et du texte dessinés manuellement et vectorisés/colorisés sous illustrator.
Mes vignettes sont carrées ; sur ma page de site, je les prévois d'environ 5cm pour les grandes, et d'environ 3 cm pour les petites. Sur le papier, je les ai dessinées à 8cm et 5cm (pour avoir un dessin au trait bien fini)), pensant ensuite sur illustrator les réduire à la taille finale choisie pour mon site.
Pour l'instant, voici comment j'ai procédé :
J'ai ouvert mes documents de départ (scans de séries de vignettes dessinées à la main) avec Ai, les ai vectorisés, colorisés, les ai "enregistrées pour le web" (création docs Jpeg) , puis j'ai pris mes docs JPEG et les ai ouverts avec Ps pour recadrer chaque vignette, et produire, donc, des vignettes indépendantes bien recadrées.
Bon. Le truc, là, c'est que quand je réduis ensuite ces vignettes sur ma maquette (réalisée avec Ai), j'ai une perte de qualité, ça fait style dessin bavé, je n'ai plus la définition de départ.
Comme je sais que sur Ai même, quand on agrandit ou réduit une image vectorisée, on ne perd pas en qualité, je me suis dit, bon, je vais créer un doc Ai de 5cmx5cm, y insérer un doc (contenant une vignette de 8cm, car je vais réduire toutes mes vignettes de 8cm à 5cm) et le réduire jusqu'à ce que ma vignette de 8 rentre sur mon doc vierge Ai de 5cm, mais là, : problème : le doc de 5cm apparait en grand, le scan collé apparaît en plus grand encore, et une fois le doc-scan-avec-vignette réduit dans la case de "5cm", il reste très grand, avec énormément de défauts visibles, et la vectorisation "magnifie"ces défauts.
L'image finale, même regardée/rendue à 5vrais cm est moche, elle a une bonne définition mais la vectorisation a rendu les traits et les défauts exagérés car elle s'est faite sur une image très grande.
A vrai dire, il n'y a que quand j'ouvre mon doc-scan-avec série de vignettes avec Ai sur doc vierge Ai paramétré au format A4, que je le vectorise-colorise à sa taille naturelle et qu'ensuite je le dézoome un peu jusqu'à ce que les vignettes fassent 5cm que j'ai un résultat satisfaisant visuellement à 5cm, mais nous sommes bien d'accord que quand je dézoome, ça n'est pas l'image finale que je dézoome, mais juste l'image sur l'écran ; l'image finale, elle restera à 8cm et le zoomage-dézoomage est juste là pour faciliter le ttravail sur Ai.
Donc ma question est la suivante : comment faire pour faire d'une vignette vectorisée à 8cm une jolie vignette de 5cm enregistrable ?
Je suppose que je m'y prends mal.
Ou alors peut-être me direz-vous : ben fais tes vignettes de 5cm directement à 5cm... Là, si je n'ai que cette solution, ça va pas être une très bonne nouvelle pour moi, car mes dessins sont moins fins dessinés direct en 5cm pour du 5cm définitif et avec la vectorisation ça arrondit trop les angles. Il me faut vraiment du 8cm pour du 5cm définitif ou du 5cm définitif pour du 3cm définitif.
Reste la solution du dessin direct sur Ai, mais là, je maîtrise pas du tout, je n'y arriverai pas...
Donc bah si l'un d'entre vous a une solution et peut me guider, je serais vraiment contente !

#2 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 05 May 2015 - 12:18 PM

Bonjour
Heu… tout cela est bien étrange et confus.

- Si tu y arrives en 8 cm, dans AI : le format étant vectoriel tu ne devrais plus avoir rien a faire. Ton soucis doit juste être d'importer ton AI dans photoshop : fichier / importer et le conserver en image vectorielle puis le positionner et le dimentionner à la taille voulue (NB : une fois dans ta maquette de site, sous PS, la notion de cm n'a plus aucune raison d'être, en web on ne parle qu'en pixels)

- Si tu tiens absolument à réduire tes icons dans AI, il y aun outil "Mise à l'échelle" (s) qui fait ça très bien. Il suffit de calculer le taux de réduction et encore AI sait très bien le faire : tu tapes 100*5/8 pour passer de 8 à 5 cm…)

- Si avec ces 2 solutions tu as toujours ton soucis, c'est que les défauts que tu vois sont dus au principe même des pixels : un fichier pixellisés de 8cm en 72dpi contient plus de pixels qu'un fichier pixellisé de 5cm en 72dpi/ Plus de pixels = une meilleure qualité d'image. Il ne peut pas en être autrement et c'est toute la différence entre Illustrator et Photoshop justement.

#3 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 05 May 2015 - 13:34 PM

Bonjour dldler,

Merci pour tout ce que tu me dis, ces deux solutions dont tu me parles vont parfaitement répondre à mon problème...
Donc oui, étrange et confuse est l'explication de mon souci, car pour moi, Ps, Ai , la question des pixels et de la taille des images représentent des univers qui me sont étrangers ; je m'approprie les ingrédients de ces univers un peu comme le citadin s'approprie le jardinage pour la première fois de sa vie , c'est à dire d'une manière loufoque, grossière, et pas très pro, c'est clair.
Il faut que je raisonne en pixels, ça oui. Le pb est que je ne vois pas les choses très clairement. encore.
Par exemple, là, mes vignettes Ai de 8cm copiées-collées + recadrées sous Ps ne font pas toutes exactement la même taille à la sortie, et je ne sais pas si c'est parce que Ps (réglé à 72dpi) agrandit par exemple certaines images Ai pour pouvoir mettre tous les pixels nécessaires à au maintien d'une certaine qualité de l'image de base (une image avec beaucoup de traits et de couleurs), par exemple, ou si la raison de ces différences de taille provient juste du fait que peut-être j'ai un peu plus rogné certaines vignettes par rapport à d'autres, mon recadrage n'étant pas ultra précis.

En tout cas, dldler, si je m'assure que toutes mes vignettes fassent par exemple 141 px par 141px, elles auront bien toutes la même taille "en cm", n'est-ce pas ?

#4 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 05 May 2015 - 14:43 PM

Citation

En tout cas, dldler, si je m'assure que toutes mes vignettes fassent par exemple 141 px par 141px, elles auront bien toutes la même taille "en cm", n'est-ce pas ?

mmmmmmmmmmm…


Ah…


Je vais faire simple :
Disons plutôt que s'ils font tous les deux 141 px par 141 px, ils feront la même taille en pixels.
Et comme tu montes ta page web en pixels, ils seront visuellement de la même taille sur ta page. C'est ce qui compte, non ?

En fait, parler de "cm" pour une page web (et pour tous les trucs en pixels en général) me gêne beaucoup.

#5 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 05 May 2015 - 17:19 PM

Bon d'accord, je vois, faut que je dise un gros adieu définitif aux cm, quoi... :roll:

Bon, ben ce qui est sûr, c'est que oui, je monte ma page en pixels et me voilà rassurée de savoir que quoi qu'il arrive, si toutes mes images font 141x141px elles seront toutes à 141x141px !!! Bon, enfin j'ai compris, trève de plaisanterie. Après tout, j'avais qu'à réfléchir avant, tout ce qui est sur une page, dont les pixels sont tous de taille identique :mrgreen: et qui mesure un même nombre de pixels qu'une autre chose a une taille identique :smile:

A propos de pages de site, d'ailleurs, là, pour mes pages, le gars qui va m'aider à faire le mien (une personne qui a comme hobby la création de sites et qui fait cela pour les gens en échange de services -le service que je lui rendrai en échange sera la réalisation d'une fresque murale (un monde génial, où on compte en cm...)) m'a parlé de largeur de page de 960px et de faire mes vignettes en fonction de cette largeur, j'aurais aimé avoir un second avis sur le choix de cette largeur : est-elle suffisante, sachant que mon site devrait plutôt être vu, d'après mes estimations, sur des écrans fixes et larges, (et que je dois compter, juste, sur la présence d'une barre de défilement verticale) ? Je me permets de poser la question même si je ne suis plus tout à fait dans le sujet de départ, parce que j'imagine que pour un pro, la réponse juste est simple à donner, j'espère que ce n'est pas grave si je dévie un peu du sujet.

En tout cas, par rapport au problème de départ, voici le retour : j'ai essayé la solution 1 que tu m'as proposée, et l'importation n'apporte pas d'amélioration par rapport à la manière dont j'avais procédé. Par contre, en fait,,à tout bien réfléchir, je n'avais fait mes réductions de taille d'images que sur la maquette (sur ma page de mise en page illustrator), mais en fait, quand je règle la taille en pixels sur Ps (en faisant image>taille de l'image) et que je baisse le nombre de pixels jusqu'à atteindre 141 pixels, eh bien là, l'image réduite est de meilleure qualité que l'image d'origine à 224 pixels (Ha ha ! Tu as vu, c'est fini, les cm, je n'en parle plus, adios ). Je vais essayer la solution 2 par curiosité, pour voir le résultat, mais en fait, la solution basique de base que j'aurais dû adopter tout de suite sans venir embêter tout le monde , eh bien elle va pas si mal , donc mis à part si la solution 2 fait des miracles encore plus miraculeux, je choisirai la "solution normale".

Merci beaucoup, en tout cas, dldler, pour ta patience avec les filles qui parlent en cm.

#6 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 06 May 2015 - 10:14 AM

Voir le messageJolie-chouette, le 05 May 2015 - 17:19 PM, dit :

Bon d'accord, je vois, faut que je dise un gros adieu définitif aux cm, quoi...
Oui, quand on travaille en pixels pour quelque chose qui se ne se mesure qu'en pixels, y ajouter une autre unité de mesure qui n'a rien à voir ne peut qu'être facteur de confusion.



Voir le messageJolie-chouette, le 05 May 2015 - 17:19 PM, dit :

A propos de pages de site, d'ailleurs, là, pour mes pages, le gars qui va m'aider à faire le mien (une personne qui a comme hobby la création de sites et qui fait cela pour les gens en échange de services -le service que je lui rendrai en échange sera la réalisation d'une fresque murale (un monde génial, où on compte en cm...)) m'a parlé de largeur de page de 960px et de faire mes vignettes en fonction de cette largeur, j'aurais aimé avoir un second avis sur le choix de cette largeur : est-elle suffisante, sachant que mon site devrait plutôt être vu, d'après mes estimations, sur des écrans fixes et larges, (et que je dois compter, juste, sur la présence d'une barre de défilement verticale) ?
Je crois que tu vas le regretter.
Prévoir la largeur d'un site en pixel c'est une méthode qui date du siècle dernier, ce qui n'est pas étonnant de la part d'un amateur.
Aujourd'hui un site doit s'adapter à toutes les tailles d'écran, de celui du plus petit smartphone jusqu'au 27" qui trône sur certains bureaux.

Je ne sais pas sur quoi tu bases ton estimation mais il faut savoir que durant le dernier trimestre 2014 plus de 65% des internautes étaient des mobinautes.
Et ça ce n'est pas une estimation, ce sont les chiffres de Google.


Est-ce que tu échangerais la gestion de ta comptabilité, de ton patrimoine, de ta santé, de la construction de ta maison, etc. avec quelqu'un dont c'est "le hobby" ???
Créer un site web c'est un métier.
:cool:
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#7 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 06 May 2015 - 19:32 PM

Bonsoir JRB,

Je sais que tu as tout à fait raison.
Malheureusement, je n'ai vraiment pas d'argent, je démarre avec presque rien, impossible de m'adresser à un professionnel, si je lui dis ce que je peux lui donner, cela serait se moquer de lui.
J'ai commencé dans un premier temps à essayer seule de faire un site en prenant un thème WP, mais je ne suis arrivée à rien de bon.
La personne qui va me faire mes pages HTML doit en principe ensuite transformer la structure de mon site en thème wordpress, je lui ai envoyé ce soir un message pour lui demander si on pouvait parvenir, au stade de cette deuxième étape, à rendre mon site plus souple, je ne sais pas trop ce qui est possible ou non avec WP (ou disons : accessible à un amateur), ni jusqu'où il va accepter de se compliquer la vie pour moi, mais même si mon site reste rigide, je sais que je ne renoncerai pas à cette formule, car je n'ai pas le choix. Si mon affaire marche et que je dégage un peu d'argent, alors là, oui, je changerai ça et confierai à quelqu'un le soin de me faire un beau site ultra responsive, car au fond, c'est évidemment exactement ce que je souhaiterais avoir pour mon entreprise.

#8 elle-ere

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 368 messages

Posté 07 May 2015 - 09:36 AM

Bonjour à tous,
La lecture du premier message donne l'impression d'un sérieux micmac.
Pour revenir à Illustrator (suivant la version ?)
Disons une version qui gère les plans de travail multiples,
Nouveau document RVB de base A4, ou Web 800x600
- Importer une image scannée, la vectoriser, coloriser...
(admettons 8x8cm à réduire à 5 cm),
- Afficher les règles,
clic droit sur une des règles, unité Pixels.
- Panneau transformation,
conserver les proportions entre l et h éventuellement,
choisir tout transformer dans le menu du panneau,
modifier la Largeur (admettons 141px) modifier éventuellement la Hauteur,
- Plan de travail (modifier) MAJ+o ou outil plan de travail,
en haut à gauche du panneau Contrôle (appelé Barre d’options sur PS)
Paramètres prédéfinis,
choisir ajuster aux limites de l’illustration.
ou l’illustration sélectionnée si plusieurs illustrations
- (Enregistrer .ai)
- Exporter choisir le format (jpg, gif...), puis les options d’enregistrement.
- Vérifier l’aperçu sur un navigateur ?
Remarque :
Il est possible de placer plusieurs illustrations (images) dans le même document avec chacune un plan de travail respectif.
Avec plusieurs images à exporter cocher utiliser les plans de travail,
(même principe que pour l’impression), Etendue pour choisir la plage, les fichiers crées auront un indice -01-02 etc.
LR

#9 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 10 May 2015 - 20:01 PM

Bonjour elle-ere,

Merci de d'avoir pris le temps de me répondre.
Oui, je sais que mon exposé est un sérieux mic-mac, reflet d'une manière de s'y prendre encore plus mic-mac.
J'ai essayé de faire ce que tu me proposes de faire.
Jusqu'au modifications de largeur et de hauteur dans le panneau transformation, tout va bien (enfin tout va bien si je sélectionne au préalable tous les éléments qui composent l'illustration que je souhaite modifier), mais après, je suis perdue ; le pb aussi, je pense , c'est que je n'utilise Ai qeu pour vectoriser et coloriser des dessins (relativement simples point de vue composition) pour l'instant, donc je travaille sans créer de plans de travail. Du coup je ne suis pas à l'aise avec ta méthode et ne trouve pas les trucs.
Entre le moment où j'ai laissé mon premier message et ce soir, on m'a conseillé déjà de ne pas retravailler mon doc sur Ps à partir d'un enregistrement JPEG de mon doc Ai pour ne pas perdre en qualité, donc depuis, j'ouvre mon doc Ai avec Ps, recadre, fais mes réductions dans image>taille de l'image et seulement après , je fais mon enregistrement final en JPEG, et mes images sont déjà moins mauvaises
J'imagine que ta méthode est encore bien mieux, mais j'attends d'être plus avancée dans mon utilisation d'Illustrator avant de l'employer, car là, je n'arrive pas trop à te suivre , à retrouver les trucs et j'ai un peu peur de changer des paramètres et ensuite d'oublier ce que j'ai changé et que ça me pose ensuite des problèmes. Je manque trop de repères encore, mais je garde précieusement tes indications, sans compter que cela semble être la bonne méthode à utiliser quand on a plusieurs illustrations sur une page.

#10 elle-ere

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 368 messages

Posté 12 May 2015 - 20:55 PM

Bonjour J-c.
Si ta version d'Illustrator est antérieure à CS5 (ou15), je comprend que tu ne trouves pas les trucs.
Ta version ? je pourrai te faire parvenir une aide en fin de semaine.
De toutes façons il y a toujours au moins un plan de travail dans une composition.
Un plan de travail est délimité par des lignes continues représentant la taille maximale de la surface imprimable.
La zone de travail est située en dehors du plan de travail et s’étend jusqu’au bord de la fenêtre carrée de 558,8 cm de côté. Elle représente un espace dans lequel on peut créer, modifier et stocker les éléments d’une illustration avant de les
placer sur le plan de travail. Les objets placés dans cette zone sont visibles à l’écran, mais ne s’impriment pas.
LR

#11 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 13 May 2015 - 13:21 PM

Bonjour LR,
Eh bien j'ai cs6, donc j'aurais dû trouver, d'après ce que tu dis.
Je vais refarfouiller un peu par-ci par-là, pour voir, mais bon, à mon premier essai, je suis vite restée coincée sans pouvoir avancer.

@ laurentte3, je suis dans illustrator, pas dans inkscape ;-)

#12 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 16 May 2015 - 11:42 AM

Voir le messageJolie-chouette, le 13 May 2015 - 13:21 PM, dit :

@ laurentte3, je suis dans illustrator, pas dans inkscape ;-)
Inutile de lui répondre, laurentte3 est un spammeur sans scrupule qui poste n'importe quoi pour placer son lien et qui ne reviendra pas.
:mad:
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#13 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 18 May 2015 - 22:48 PM

Ah, d'accord, merci pour l'info, JRB...Je savais pas que ce genre de pratiques de "spammeurs" existaient à ce point...

#14 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 19 May 2015 - 16:25 PM

D'ailleurs depuis son cas a été réglé, il a disparu.
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#15 elle-ere

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 368 messages

Posté 19 May 2015 - 21:48 PM

Bonjour JC
Comme promis, je donne des précisions sur les plans de travail.
- A l’ouverture d’un nouveau document, si on valide directement après le choix du profil de document (par ex Web taille 800x600), ce dernier comporte un seul plan de travail.
- Au passage, même si de nombreuses modifications sont effectuées sur ce document, le fichier de base ne sera pas modifier, il n’y a aucun risque.
- Pour convertir une illustration vectorisée en fichier bitmap sur Illustrator CS5 et plus, je propose deux approches mais de nombreuses autres sont possibles.
Première approche :
Un seul plan de travail sur lequel sont placées les illustrations qui doivent composer l'image à exporter. (Illustrations terminées et à la bonne taille. Attention toujours nombre entier de pixels)
1 Fichier>Exporter, ne pas cocher “Utiliser les plans de travail”, sélectionner le type de fichier, puis bouton “Enregistrer” là choisir les différents paramètres et “Ok”, c’est fait, l'image est recadrée automatiquement au limites de l'illustration.

Deuxième approche :
Un seul plan de travail ou plusieurs et une ou plusieurs images différentes à exporter.
1 Il faut sélectionner tous les éléments qui composent une image, le mieux est de les grouper (créer un groupe).
Les sélectionner Objet>Associer ou Cmd+g ou CTRL+g, ainsi pour sélectionner le groupe il suffira d'un simple clic à l’aide de l’outil de sélection.
2 Pas indispensable mais je préfère, faire glisser le groupe dans la zone de travail située en dehors du plan de travail en le copiant, pour cela appuyer sur ALT en faisant glisser.
3 Dans le panneau Outils activer l’outil Plan de travail(fig 1).
Image attachée: aide_plan de travail-01.png
Le contour du plan de travail passe en traits interrompus, le fond de l’écran s’assombrit et le curseur change de forme...
4 Faire glisser le pointeur à proximité de la future image pour créer un nouveau plan de travail (rectangulaire), peu importe les dimensions (fig 2).
Image attachée: aide_plan de travail-02.png
Ce nouveau plan de travail devient le plan actif.
5 Dans le nouveau panneau de contrôle associé (en haut à gauche fig 3) dans Paramètres prédéfinis,
Image attachée: aide_plan de travail-03.png
choisir “Ajuster aux limites de l’illustration sélectionnée”. (résultat fig 4)
Image attachée: aide_plan de travail-04.png
6 Répéter l’opération précédente pour les autres images si besoin.
7 Fichier>Exporter, sélectionner le type de fichier, cocher “Utiliser les plans de travail” et dans le champ “Étendue” déterminer la plage puis bouton “Enregistrer” là choisir les différents paramètres et “Ok”, si la plage comporte plusieurs plans de travail les noms de fichiers porteront un indice -01 -02 etc (dans l’ordre de création des plans de travail).
Petit plus :
Pour découper une illustration suivant un rectangle bien défini.
1 Tracer avec l’outil Rectangle un rectangle qui servira de découpe, la découpe sera au limites du rectangle avec contour inclus si # 0 attention!
Si on veut un contour pour l’image exportée, il faut l’aligner à l’intérieure du rectangle ou prendre en compte cette épaisseur en sachant que 1pt = 1px. (ex : pour un rectangle de 100px de large et une épaisseur de contour de 10pt, la largeur de l’image exportée sera de 110px)
2 Le rectangle étant sélectionné, reprendre les étapes 3 à 7 de la deuxième approche (sans la 6) , si le rectangle est gênant, on peut le supprimer juste après l’étape 5. (fig 5)
Image attachée: aide_plan de travail-05.png
LR

#16 Jolie-chouette

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 20 May 2015 - 11:13 AM

Merci, LR, pour cet exposé très détaillé , je vais regarder tout ça très attentivement et tout essayer !




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP