Le blog qui soigne l'actualité du design graphique

Un bon « plan » sous illustrator !

29 avril 2014  |   20 Commentaires   |    |  

carte-dessin

Comment dessiner un plan de ville sous Illustrator en 30s

Qui n'a jamais eu à redessiner un plan de ville sous illustrator ?

Vous recevez généralement un plan scanné en basse définition, avec les indications de votre client à la main dessus. Votre rôle de designer sera de la simplifier, et le rendre compatible avec votre charte graphique. En fonction de la taille de la carte à redessiner cela peut s'avérer vraiment un travail laborieux !

Voici donc notre petite astuce maison.

openstreet-map-to-illustrator-vector

Exporter la carte vectorielle depuis OpenStreetMap

1- Se rendre sur http://www.openstreetmap.org, et choisir sa zone, et son zoom.
On peut aussi choisir parmi les différents styles de cartes (regular, transport, cyclable...).

2- Dans l'onglet "partager" à gauche de la carte, on peut choisir d'exporter sa carte au format "PDF". On peut aussi sélectionner une zone précise de la carte. Attention, au moment de l'export, leur serveur est parfois surchargé, il faudra peut-être s'y reprendre à deux fois.

3- Ouvrir le fichier Pdf dans illustrator. :-)

openstreet-map-to-illustrator-clean-error

Nettoyage de la carte sous illustrator

La carte est remplie de détails inutiles, et puis vous allez forcement souhaiter en changer les couleurs, etc.
Là c'est plus vraiment un secret, mais juste des bons tuyaux sous illustrator. Les options de la baguette magique permettent de sélectionner tous les objets de la scène qui aurait la même couleur de fond ou de contour. Pour cela, indiquez O comme tolérance et cliquez sur l'un des éléments à supprimer.

Vous allez vous rendre compte d'un défaut, les textes des noms de rues sont en mode "petits carrés". Le problème provient de l'encodage de la typographie "DejaVu" spécifique à OpenStreetMap. Nous n'avons pas réussi à régler ce problème, ce qui oblige à remettre à la main tous les noms de rues.

Pour supprimer tous les textes d'un seul coup il faut passer par le menu "Sélection / Objet / tous les objets textes". Vous pouvez aussi utiliser ce menu pour nettoyer votre plan illustrator !

openstreet-map-to-illustrator-text

Enfin pour terminer, un petit nettoyage des tracés s'impose. Ces derniers sont souvent remplis de "points", ce qui donne leur donne un petit aspect irrégulier. Le plus simple c'est d'aller dans le menu "Objets / Tracés / Simplifier les tracés", et éventuellement cocher l'option "ligne droite".

openstreet-map-to-illustrator-lignedroite

Après, c'est à vous d'attaquer le design graphique de votre carte sous illustrator !



À propos de notre agence de branding

Nous sommes une agence de conseil en stratégie de marques vous accompagne , avec son expertise, dans la conduite de vos projets de design de design de logos et d'identités sonores. Nos talentueux designers vous étonneront avec leur talent et leur aptitudes en matière de design de marques. Vous pouvez évidement consulter nos projets de branding corporate ou simplement à nous demander un devis pour votre projet. Consultez aussi notre blog de référence en matière de logotypes


Partager cet article :


20 commentaires :

  1. Ariane :

    moi j’ai besoins de vectoriser des bâtiments. quels sont les différentes étapes à suivre?

  2. Gambetta :

    Bonjour, j’ai téléchargé la police DejaVu qui se trouve un peu partout et je l’ai installée. Je n’ai pas de petits carrés, ça fonctionne parfaitement ! Merci beaucoup.

  3. vasken :

    Bonsoir,
    je n’arrive pas à télécharger, j’ai le droit à « Error The server is too busy at the moment. Please wait a few minutes before trying again. » mais rien ne se passe après plusieur essaie. Quelqu’un aurais une solution? J’ai essayer le jpeg et le svg même message.

  4. Singula Mbaye Amadou :

    je ne sais pas comment le télécharger , mais , je vais essayer comment télécharger.

  5. Singula Mbaye Amadou :

    Je ne sais pas comment le télécharger mais , je vais essayer de trouver comment télécharger.

  6. Hervé :

    Vous pouvez tout simplement vectoriser votre carte bitmap sous illustrator à partir de la version CS5. Avant on utilisait Streamline.
    Salut à tous

  7. Pieren :

    Curieux « plan ». Certes, 30 secondes pour exporter mais ensuite il faut retaper tous les noms de rue à la main… Comme dit cquest, il faut créditer OSM mais la license du produit dérivé d’OSM n’a pas être obligatoirement libre (voir sur le site osm.org) et n’a pas besoin ni de s’inscrire ni de demander quoi que ce soit pour utiliser les données. Sinon, il existe d’autres moyens que de faire un simple « export » qui est limité par la taille et la disponibilité du serveur : http://wiki.openstreetmap.org/wiki/Exporting_to_Adobe_Illustrator

  8. cquest :

    Quelques rectifications:
    – les œuvres dérivées des données OSM n’ont pas à être sous licence libre. Vous pouvez choisir la licence de votre choix. Seules les données géographiques constitutives d’OSM sont sous licence ODbL qui impose le partage à l’identique
    – il n’y a pas besoin d’être contributeur à OSM pour avoir le droit d’utiliser les données OSM
    – oui, l’export depuis le site web est souvent indisponible… un peu surchargé le pauvre ;)

    Il y a des moyens plus simples et efficace pour produire une carte. TileMill cité dans les commentaires en est un.
    Malheureusement l’export SVG ou PDF est difficilement exploitable ensuite sous Illustrator. Beaucoup trop d’objets, les textes « explosés » en lettre à lettre.
    Il y a d’autres techniques possible… venez en discuter sur http://forum.openstreetmap.fr/ ;)

  9. Super astuce, j’en ai justement besoin pour mon prochain projet ;)

  10. Je vous conseille de tester https://www.mapbox.com/tilemill/ c’est gratuit et permet d’exporter en svg :)

  11. A ceux qui rencontrent des problèmes, il faut utiliser le panneau « partager » plutôt que le bouton « exporter ».

  12. belnea :

    Testé sous safari. ça fonctionne. changez de navigateur, non ?

  13. Anso :

    Merci pour cette astuce très pratique !

  14. PARENT Camille :

    Superbe astuce mais malheureusement l’exportation ne marche pas :(

    Bien bien dommage !

    J’espère que ça sera restauré pour la rentrée :)

    Même le site openstreetmap est génial !

  15. Chester :

    Chouette astuce, si ça marchait… Pas moyen d’exporter le plan, j’ai essayé toute la matinée et j’obtiens toujours le même message d’erreur… Vraiment dommage car openstreetmap propose de chouettes fond de plan, du moins pour un étudiant en archi du paysage.

  16. charles :

    Pour info, l’utilisation des données est soumise à licence : toute oeuvre dérivée doit être libre, de même licence avec la mention openstreemap. Non ?
    (mais vu que les cartes sous droit d’auteur classique sont déjà décalquées massivement, cela ne changera pas grand chose. Curieuses pratiques pour des pros directement concernés par le « plagiat »…)

  17. junior MAMBA :

    Merci pour le tuyau du site openstreetmap

  18. Sinon pour des cartes interactives, Google met à disposition un outil de personnalisation assez complet :
    http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

    Et voilà ce qu’il est possible de faire avec :
    http://snazzymaps.com/

    Bon c’est différent de votre article mais ça peut toujours servir ;)

  19. @LeLoup: Merci votre précision !

  20. Leloup :

    C’est une chouette solution mais attention aux droits d’auteur d’OpenStreetMap.
    Après lecture, il faut être créditeur OpenStreetMap avant d’utiliser les données…
    Belle journée.

Laisser un commentaire






Newsletter
Laissez-nous votre email et recevez votre dose mensuelle de Graphéine dans votre boite mail.