›

Outils design

colas_colas_ Membre
octobre 2014 modifié dans API UIKit #1

Bonjour !


 


Je suis en train de créer quelques images pour mon appli. J'en profite pour apprendre les "images set" (.xcassets, .imageSet).


 


Quels outils utilisez-vous pour transformer une image (disons qu'on part de @3x) en une .imageSet ?


 


Dans le gratuit, j'ai trouvé Asset Catalog Creator Free, mais il me semble qu'il ne marche que pour les icônes (512, 256, etc. au lieu de @2x, @3x, @1x. Il est pas mal, mais ce n'est pas ce qu'il me faut.


 


De manière plus générale, je propose de lancer une petite discussions sur les outils que vous utilisez pour le design. (on pourrait même créer un fil à  part, avec les outils en général)


 


 


PS : j'ai le souvenir d'une discussion qui parlait de ça, mais je n'arrive pas à  la retrouver.


Réponses

  • colas_colas_ Membre
    #2

    Color Picker 5


     


    Voici le lien pour un outil gratuit qui permet d'avoir toujours à  portée de main un color picker.


    Il insère une icône dans la barre des menus, ce qui fait qu'il est accessible depuis n'importe où.


    Il est assez pratique.


     


    Color Picker 5


  • AliGatorAliGator Membre, Modérateur
    #3
    Un bête workflow Automator fait l'affaire pour ma part.
  • colas_colas_ Membre
    #4

    Prepo


     


    J'ai trouvé ce logiciel Prepo, qui semble faire l'affaire. Il ne gère pas les @3x... mais peut-être que ça viendra !


    Il prend une (des) images en entrée et :


    - resize à  la taille indiquée


    - génère les @2x correspondants


  • GeoffreyGeoffrey Membre
    #5

    @aligator : l'automator fait quoi, divise par 2/3 et 1/3 une image @3x ?


  • AliGatorAliGator Membre, Modérateur
    octobre 2014 modifié #6
    Pour l'instant j'ai pas mis à  jour mon workflow automator, celui que je me suis fait est un simple flow de type "Service", qui consiste en simplement à  réduire le(s) fichier(s) image(s) sélectionné(s) à  50% et enlever le @2x du nom. Et j'en ai un autre qui fait l'inverse (200% et ajoute @2x).

    Du coup je sélectionne dans le Finder mes fichiers Retina, je fais clic-droit -> Services -> "Générer les non-retina" et boum.

    Faudrait que je le mette à  jour un de ces 4 pour rajouter le @3x en effet.
  • GeoffreyGeoffrey Membre
    #7

    Ok merci (j'utilisais le gratuit Resizer, mais il ne gère pas le @3x pour le moment)


  • Paisible.frPaisible.fr Membre
    #8

    IconKit 


     


    https://itunes.apple.com/fr/app/iconkit/id507135296?mt=12


  • CéroceCéroce Membre, Modérateur
    #9

    Personnellement, j'utilise Sketch, et l'export en @3x ne fut qu'une case à  cocher...


  • samirsamir Membre
    #10


    Personnellement, j'utilise Sketch, et l'export en @3x ne fut qu'une case à  cocher...




     


    On peut importer un psd avec Sketch ? 

  • CéroceCéroce Membre, Modérateur
    #11


    On peut importer un psd avec Sketch ? 




    C'est avant tout un logiciel de dessin vectoriel. 


    L'import Illustrator est assez mauvais, le SVG marche bien.


    Aucune idée pour les couches vectorielles de Photoshop.

  • GeoffreyGeoffrey Membre
    #12

    Tu peux importer des svg, tu peux transformer des png en svg aussi (bon c'est pas parfait) mais Sketch globalement c'est de la bombe !


  • colas_colas_ Membre
    #13

    Sketch a l'aie d'être génial en effet. J'ai pris l'habitude d'utiliser AI... mais je vais sûrement changer !


     


     


    Pour dessiner les icônes (avec souvent un effet 3D, des reflets), quel outil utilisez-vous ?


     


    exemple : 


  • GeoffreyGeoffrey Membre
    #14

    Sketch aussi :) (mais je fais que du flat donc je sais pas si je suis objectif)


  • DrakenDraken Membre
    #15
    Est-ce que Pixelmator permet de faire ce genre de choses ?
  • GeoffreyGeoffrey Membre
    octobre 2014 modifié #16

    Je pense que oui (je ne l'utilise plus beaucoup).


     


    Sinon : https://dribbble.com/shots/984836-iPad-App-icon-made-with-Sketch


     


    https://dribbble.com/shots/1057025--Flux-Icon


     


    Des icônes faites avec Sketch


  • ObjectiveSwiftObjectiveSwift Membre
    #17

    Affinity Designer est peut-être mieux que Sketch, enfin j'ai préféré. Manque quelques trucs mais pour une v1 il est déjà  énorme (et moins cher).


     


    https://affinity.serif.com


  • GeoffreyGeoffrey Membre
    #18

    L'avantage actuel de Sketch est qu'il existe multitude de ressources (UIKit, etc...) disponible (ce qui faisait, il y a longtemps, la force d'Omnigraffle par exemple).


     


    Après ca a l'air prometteur oui. Tu l'utilises beaucoup ?


  • CéroceCéroce Membre, Modérateur
    #19


    Affinity Designer est peut-être mieux que Sketch, enfin j'ai préféré. Manque quelques trucs mais pour une v1 il est déjà  énorme (et moins cher).


     


    https://affinity.serif.com




    Il n'est pas tout à  fait comparable non plus. 


    Sketch est conçu pour les designers graphiques, pas pour les illustrateurs.

  • ObjectiveSwiftObjectiveSwift Membre
    #20

    Céroce : Oui c'est pas faux.


     


    Geoffrey : Non pas encore, j'ai quand même fait un tour approfondi pour voir ce qu'il avait dans le ventre mais pas en production. Une mise à  jour majeure est en préparation.


  • GeoffreyGeoffrey Membre
    #21

    J'attends de voir, je commence à  peine à  maitriser (un peu ) sketch ^^


  • Paisible.frPaisible.fr Membre
    #22

    Prepo vient d'être mis à  jour en v. 2.2.2


    Cette version prend en charge iOS 8 et les icônes @3x


  • GeoffreyGeoffrey Membre
    octobre 2014 modifié #23

    Ca a l'air pas mal, j'essayerais ca :)


     


    Edit : Prepo est vraiment très bien !! Resize directement possible dans l'app, organisation par projet, EXCELLENT (et gratis !!)


  • Paisible.frPaisible.fr Membre
    #24


    C'est avant tout un logiciel de dessin vectoriel. 


    L'import Illustrator est assez mauvais, le SVG marche bien.


    Aucune idée pour les couches vectorielles de Photoshop.




     


    Attention tout de meme :


    Personne n'a dis qu'il faillait que les icones @1X, @2X et @3X soit simplement le fruit d'un re dimensionnement (mise à  l'échelle) !


    Aussi vectorielles qu'elles soit une icone @3x passée en @1x peut tout simplement engendrer quelque chose de illisible (genre gros paté)


     


    En fait c'est un vrai problème graphique. Par exemple du temps du plomb le dessin d'un caractère en corps 72 et en corps 9 n'était pas le fruit d'un simple redimensinnement mais chacune possédait son propre dessin selon le corps. D'une part pour eviter les problèmes de "bouchage" des espaces vides par l'encre et d'autre par part pour des questions de lisibilité.


     


    Idem, si vous reprenez les anciens "Inside Mac" (le volume : Macintosh Human Interface Guidelines) il me semble bien qu'il est mentionné que les icones de petites tailles n'ont pas forcement le même dessin (nottament celles de 16px * 16px dans MacOS < 9)



    Bon maintenant vu la taille des icones actuelles (meme les @1x) le phenomene n'a plus beaucoup de chance d'apparaitre.

  • Zim513201Zim513201 Membre
    #25
    Moi je n'utilise que pixelmator pour creer mes images, on peut tout faire ! J'adore
  • CéroceCéroce Membre, Modérateur
    #26

    Personne n'a dis qu'il faillait que les icones @1X, @2X et @3X soit simplement le fruit d'un re dimensionnement (mise à  l'échelle) !

    Avec Sketch, on peut généralement dessiner à  l'échelle 1 et exporter facilement aux échelles 2 et 3.
    Si on souhaite donner davantage de détails, on peut bien sûr créer des icônes aux tailles plus grandes, mais en travaillant en vectoriel, ça permet d'ajuster plutôt que tout redessiner.
  • GeoffreyGeoffrey Membre
    #27

    Pour conserver les proportions dans Sketch il y a l'option "scale" qui est très très efficace (moi je designe plutôt en @3x)


Connectez-vous ou Inscrivez-vous pour répondre.