15 conseils de conception Web et d'applications Photoshop CC

Beaucoup d'entre nous qui concevons pour des applications auront Photoshop CC dans notre arsenal d'outils, et si vous êtes comme moi, vous serez constamment à la recherche de moyens de travailler plus intelligemment. Aujourd'hui, j'aimerais partager quelques-uns des trucs et astuces de workflow que j'ai appris au fil des ans.

01. Concevez rapidement avec Adobe Comp CC

Adobe Comp CC peut être utilisé comme un moyen de démarrer rapidement sur un projet, que ce soit pour des décisions UX / UI, la conception ou autre. Une fois que vous avez commencé un projet dans Adobe Comp, vous pouvez configurer un système de grille et commencer facilement à ajouter du contenu de conception, de la mise en forme du texte à l'aide des polices Typekit aux images et graphiques. Lorsque vous avez terminé, vous pouvez intégrer ce que vous concevez dans Adobe Comp CC directement dans Photoshop CC et continuer à y travailler.

02. Configurer plus intelligemment

Afin de rationaliser votre flux de travail, le premier endroit que vous devriez regarder est votre configuration. Par exemple, il est facile de modifier votre espace de travail pour afficher davantage d'outils et de panneaux dont vous aurez besoin. Choisissez simplement «Fenêtre> Espace de travail> Graphique et Web». Cela ajoute et organise non seulement les panneaux que vous utiliserez le plus souvent, mais révèle également les outils de dessin dans la barre d'outils.



Vous pouvez également profiter de certaines préférences. Allez dans 'Photoshop CC> Préférences' ou 'Édition> Préférences', sélectionnez la catégorie 'Unités et règles' et définissez les unités de règle sur pixels (ou tout ce dont vous avez besoin) pour tous les nouveaux documents, quel que soit le profil (impression, Web etc.) a été utilisé pour le créer. Ensuite, allez dans 'Préférences> Performances> Historique et cache> Conception Web / UI'. Ici, vous pouvez optimiser les états d'historique pour la conception Web et d'interface utilisateur, et adapter les niveaux de cache à des fichiers plus petits avec de nombreuses couches.

Un dernier gain de temps. Sans aucun document ouvert dans Photoshop, appuyez sur la touche T pour sélectionner l'outil Texte horizontal dans le panneau Outils. Ensuite, allez dans la barre d'options et modifiez la police, la taille de la police, etc. - ces paramètres de mise en forme deviendront vos nouveaux paramètres par défaut pour tous les nouveaux documents à venir.

03. Travaillez plus vite avec les plans de travail

Depuis l'introduction des plans de travail dans Photoshop, la conception pour le Web ou les applications est devenue plus facile. Les plans de travail vous permettent de concevoir pour plusieurs tailles et orientations de périphérique différentes dans le même document et d'accélérer l'exportation. Voici quelques conseils:

  • alt + cliquez sur n'importe quelle icône «plus» qui apparaît autour d'un plan de travail lorsque le plan de travail est sélectionné pour le dupliquer
  • alt + faites glisser le plan de travail vers une nouvelle position pour le dupliquer
  • Sélectionnez un plan de travail en utilisant n'importe quelle méthode et appuyez sur ctrl + J pour le dupliquer
  • Appuyez sur Alt et cliquez sur un plan de travail dans le panneau Calques pour l'adapter à votre écran
  • Pour réduire tous les plans de travail à la fois, cmd + cliquez sur la flèche à côté du nom du plan de travail dans le panneau Calques
  • Pour exporter rapidement les plans de travail, choisissez 'Fichier> Exporter> Exportation rapide au format PNG'

04. Créer une grille

À l

À l'aide de la nouvelle commande de mise en page Guide, vous pouvez facilement configurer une grille en fonction de vos besoins

La plupart d'entre nous concevons une sorte de grille lorsque nous travaillons dans Photoshop. Les dernières versions de Photoshop CC facilitent cette tâche. Avec un document ouvert, choisissez «Affichage> Nouvelle mise en page du guide». Dans la boîte de dialogue qui apparaît, vous pouvez définir des repères verticaux et / ou horizontaux et appliquer cette grille aux plans de travail sélectionnés ou à tous les plans de travail d'un document.

05. Réutiliser des formes personnalisées

Pour gagner beaucoup de temps, vous pouvez enregistrer des formes personnalisées et les réutiliser

Pour gagner beaucoup de temps, vous pouvez enregistrer des formes personnalisées et les réutiliser

Si vous créez souvent certaines formes, vous pouvez facilement les enregistrer pour les réutiliser. Dessinez simplement la forme, puis sélectionnez l'outil de sélection de chemin (flèche noire), faites un clic droit sur la forme et choisissez «Définir une forme personnalisée». Cela enregistrera la forme avec le reste de vos formes personnalisées, accessibles en sélectionnant l'outil Forme personnalisée (sous l'outil Rectangle) ou dans le menu Forme sous la barre d'options.

06. Sélectionnez à l'aide des raccourcis

Partout où vous pouvez gagner un peu de temps dans votre flux de travail, c'est de l'or, et la sélection est l'un de ces domaines pour lesquels vous pouvez toujours apprendre plus de raccourcis. En voici quelques-uns à retenir:

  • À l'aide de l'outil Déplacer, sélectionnez l'option «Sélection automatique du calque» (ou «Sélection automatique du groupe») dans la barre d'options. Cela permet de cliquer facilement sur le contenu d'un plan de travail et de sélectionner le calque
  • Sinon, laissez la sélection automatique désactivée et cmd + cliquez sur le contenu pour l'activer temporairement
  • À l'aide de l'outil Déplacer et avec l'option `` Sélection automatique du calque '' activée, Maj + cliquez sur plusieurs objets pour les sélectionner tous
  • Sur un plan de travail, vous pouvez sélectionner automatiquement des objets individuels à l'aide de l'outil Déplacer: avec ce calque sélectionné, cliquez avec le bouton droit sur le contenu et choisissez le groupe parent (ou autre) dans le menu qui apparaît
  • S'il n'y a pas beaucoup de contenu en couches, faites glisser sur le contenu pour sélectionner plus d'un calque

07. Tackle dessin vectoriel

Au lieu de rechercher les propriétés vectorielles, vous pouvez les modifier avec le panneau Propriétés

Au lieu de rechercher les propriétés vectorielles, vous pouvez les modifier avec le panneau Propriétés

Lors de la conception pour le Web ou les applications, vous devrez créer des illustrations vectorielles. Cela est devenu plus facile avec chaque nouvelle version de Photoshop. Un exemple typique est la refonte du panneau Propriétés - où nous pouvons trouver les fonctionnalités les plus largement utilisées pour éditer des formes vectorielles en un seul endroit.

Voici quelques conseils simples de dessin et d'édition:

  • Pour faire glisser une forme pendant que vous dessinez, appuyez sur la barre d'espace, faites glisser la forme, puis relâchez la barre d'espace et continuez à dessiner
  • Pour dessiner à partir du centre, appuyez sur Alt pendant que vous dessinez
  • Pour contraindre les proportions, appuyez sur Maj pendant que vous dessinez
  • Si vous ne voulez pas que les formes s'alignent sur les bords du plan de travail, vous pouvez activer et désactiver les limites d'accrochage ('Affichage> Aligner sur> Limites du plan de travail')
  • Un dernier conseil: avant de dessiner des formes vectorielles, assurez-vous que l'option 'Aligner les outils vectoriels et les transformations en grille de pixels' est sélectionnée ('Photoshop CC> Préférences> Outils ou Edition> Préférences> Outils'). Cela garantit que vos vecteurs ont des bords nets.

08. Copier la mise en forme de la forme

Nous passons beaucoup de temps à mettre en forme nos créations. Pour gagner du temps, vous pouvez copier la mise en forme d'une forme à une autre. Dans le panneau Calques, cliquez avec le bouton droit sur un calque de forme et choisissez «Copier les attributs de forme» pour copier tous les attributs (trait / remplissage). Sélectionnez ensuite plus d'un calque ou groupe de calques et cliquez avec le bouton droit de la souris, en choisissant «Coller les attributs de forme». Il est également possible de sélectionner une forme avec l'outil de sélection de chemin - cliquez simplement avec le bouton droit de la souris sur la forme et choisissez «Copier le remplissage» ou «Copier le contour complet» pour copier et coller l'un ou l'autre.

09. Enregistrer les actifs dans les bibliothèques CC

Si votre entreprise vous permet de les utiliser, les bibliothèques CC sont une évidence pour enregistrer et réutiliser les actifs et le formatage

Si votre entreprise vous permet de les utiliser, les bibliothèques CC sont une évidence pour enregistrer et réutiliser les actifs et le formatage

Les bibliothèques CC facilitent l'enregistrement du formatage et des ressources (graphiques, par exemple) dans le cloud, que vous pouvez ensuite appliquer à des projets de conception ultérieurement. Pour réutiliser un graphique enregistré, faites-le simplement glisser du panneau Bibliothèques dans votre conception. Le contenu est lié à la ressource dans le panneau Bibliothèques (par défaut, mais il peut être incorporé), ce qui vous permet d'avoir des éléments cohérents et partagés comme un en-tête dans une série de fichiers Photoshop. Si vous mettez à jour l'élément Bibliothèque, l'élément sera mis à jour dans toutes vos conceptions.

Lier des objets intelligents est idéal pour mettre à jour le contenu de plusieurs projets

Lier des objets intelligents est idéal pour mettre à jour le contenu de plusieurs projets

Les objets intelligents liés vous permettent de placer un fichier source sur les PSD pour une édition non destructive. Avec les bibliothèques CC, cela peut vraiment accélérer votre flux de travail et généralement économiser sur la taille du fichier.

Par exemple, si vous concevez pour Retina (HiDPI) @ 1x, le contenu devra éventuellement être mis à l'échelle. Le contenu de votre image d'origine devra avoir une taille de @ 2x ou @ 3x. Il peut ensuite être importé en tant qu'objet intelligent en utilisant «Fichier> Placer lié». Si vous mettez à l'échelle la conception ou exportez à l'aide de méthodes telles que «Fichier> Exporter> Exporter sous», où vous pouvez modifier les tailles (2x), Photoshop sait utiliser les données d'image d'origine de l'objet intelligent.

11. Enregistrer les styles de calque

L

L'enregistrement des styles de calque permet de créer une plus grande cohérence

Nous appliquons des styles de calque à notre contenu pour ajouter un style non destructif comme des ombres, des dégradés et des traits. Cela signifie que nous utilisons très probablement le même style pour tous les objets. Vous pouvez enregistrer les styles de calque dans le panneau Styles pour vous permettre de les réappliquer ailleurs. C'est un moyen simple de conserver une apparence cohérente et de gagner du temps.

Appliquez d'abord des styles de calque à un calque ou à un groupe (l'application de styles de calque à un groupe est un moyen rapide d'appliquer le même style à un groupe d'objets). Ensuite, sélectionnez «Fenêtre> Styles> Créer un nouveau style». Donnez un nom au style, ajustez les paramètres et cliquez sur OK. Le style que vous avez créé sera désormais disponible dans le panneau Styles.

12. Filtrer les couches

Le filtrage de vos calques peut rendre l

Le filtrage de vos calques peut rendre l'édition ciblée beaucoup plus facile

Si vous avez beaucoup de couches dans vos fichiers de conception Web ou d'application, il peut devenir difficile de localiser le contenu dans le panneau Calques. Le filtrage des calques est un excellent moyen de se concentrer sur des calques spécifiques. Vous pouvez filtrer en fonction du nom, des effets appliqués, des plans de travail et bien plus encore.

Par exemple, vous pouvez filtrer la liste pour voir tous vos boutons par nom («bouton»). Lorsque vous avez terminé, vous pouvez désactiver le filtrage en basculant le bouton rouge en haut du panneau Calques, révélant à nouveau tous les calques.

13. Copiez le CSS

Copiez le CSS du contenu directement dans le panneau des couches pour une utilisation dans le développement

Copiez le CSS du contenu directement dans le panneau des couches pour une utilisation dans le développement

Dans le panneau Calques, vous pouvez copier le CSS généré par Photoshop à partir du contenu du calque. Vous pouvez ensuite utiliser ce code dans votre processus de développement. Accédez au panneau Calques et sélectionnez un calque ou un groupe, cliquez avec le bouton droit sur l'un des calques ou groupes et choisissez «Copier CSS». Vous pouvez ensuite coller le CSS dans un éditeur.

14. Exporter des actifs

Toutes les options d

Toutes les options d'exportation dont vous avez besoin lorsque vous utilisez l'option Exporter

La capacité d'exporter des ressources à utiliser dans le processus de développement est l'une des raisons pour lesquelles de nombreux concepteurs Web utilisent une application comme Photoshop. Voici quelques moyens rapides d'exporter des actifs:

  • Pour exporter des plans de travail au format PNG, choisissez «Fichier> Exporter> Exportation rapide au format PNG». Si vous souhaitez choisir un format de fichier différent, vous pouvez choisir 'Fichier> Exporter> Exporter sous'
  • Pour changer l''Exportation rapide 'en quelque chose d'autre que PNG, ouvrez' Photoshop CC> Préférences> Exporter ou Modifier> Préférences> Exporter ') et modifiez les options d'exportation
  • Pour exporter quoi que ce soit au format PNG, sélectionnez-le dans le panneau Calques, cliquez avec le bouton droit de la souris et choisissez `` Exporter rapidement au format PNG ''
  • Pour exporter quoi que ce soit, sélectionnez-le dans le panneau Calques, cliquez avec le bouton droit de la souris et choisissez «Exporter rapidement au format PNG» ou «Exporter sous». Là, vous pouvez également choisir d'exporter plusieurs tailles (@ 1x, @ 2x, @ 3x etc.)

15. Aperçu sur un appareil

Aperçu rapide sur un appareil à l

Aperçu rapide sur un appareil à l'aide de l'application mobile Adobe Preview CC et du panneau Aperçu de l'appareil dans Photoshop

À l'aide du panneau Aperçu de l'appareil de Photoshop et de l'application mobile Adobe Preview CC sur un appareil, vous pouvez prévisualiser vos conceptions Photoshop sur plusieurs appareils iOS. Les modifications que vous apportez dans Photoshop CC sont même affichées dans Preview CC en temps réel, au fur et à mesure que vous les effectuez. Dans le panneau Aperçu de l'appareil, vous pouvez connecter plusieurs appareils iOS à Photoshop via USB ou Wi-Fi, à condition que l'application mobile Adobe Preview CC soit installée.

Nous sommes tous parfois coincés dans nos manières et avons besoin d'un coup de pouce pour essayer de nouvelles fonctionnalités. Photoshop propose désormais de nombreuses façons de gagner du temps lors de la conception pour le Web ou pour les applications. J'espère que vous découvrirez au moins quelques-unes des nouvelles options qui peuvent vous aider à rationaliser votre processus de conception.

Cet article a été initialement publié dans magazine net numéro 288; achetez-le ici !

Articles Liés: