Aller aux prises avec l'édition d'image de base dans Sketch App 3

Fonction d'édition d'image de l'application 3 de Sketch: Simple plutôt que universel

Sketch App 3, bien qu'il ne soit pas aussi complet que Photoshop, offre une méthode d'édition d'image bitmap simple, y compris des fonctionnalités telles que la saturation, la luminosité, le contraste, le flou gaussien, le mode mélange, les outils de baguettes et de baguettes magiques. Cependant, il ne convient pas aux ajustements d'images complexes, au filtrage et aux opérations.

Le montage d'image non destructif de l'application Sketch est l'un de ses plus grands avantages, permettant des tests rapides de plusieurs idées et variantes. Des caractéristiques clés telles que la luminosité, le flou gaussien et le mode mélange peuvent être utilisés efficacement pour créer des conceptions Web modernes sans ouvrir Photoshop.

Bien que Sketch App 3 ait des limites, il est très facile de maîtriser ses capacités d'édition d'image une fois qu'elle comprend son objectif. Pour une retouche photo plus avancée, un logiciel de retouche photo dédié peut toujours être nécessaire.

J'ai parlé de l'application Sketch récemment. Je le mentionne toujours comme une excellente application mobile et outil de concepteur d'interface utilisateur.

J'ai également dit que je pense que la comparaison de Sketch avec Photoshop est stupide car c'est un outil d'édition Photo .

Mais la vérité est que Photoshop est devenu si polyvalent que nous le comparons à presque tous les autres outils de conception - Sketch 3 ne fait pas exception.

En fait, Sketch est plus similaire à Adobe Fireworks, qui a de la chance pour les développeurs (codage bohème), car les feux d'artifice ne sont plus développés. CHAMPS LUCKET, stratégie commerciale intuitive; ce que vous appelez, Sketch l'application comble un écart et il fait un excellent travail.

Si vous avez vécu sur Mars au cours des deux dernières années, voici quelques backstory à ce sujet. L'application Sketch est actuellement dans la version 3.2 (version stable) et vous pouvez l'acheter auprès de Bohemian codant pour un seul payé de 99 $.

Bien qu'il ne fonctionne que sur Mac OS X, il a balayé l'industrie du design.

Alors, ne pouvons-nous pas utiliser Sketch pour modifier les images?

euh, c'est presque la même chose.

En fait ... vous le pouvez, mais ne vous attendez pas à des ajustements d'image, des filtres et des opérations complexes. Au lieu de cela, ce à quoi vous devez vous attendre, c'est la forme la plus simple de montage d'image bitmap que vous pouvez imaginer, comme ces fonctionnalités:

saturation
luminosité
contraste
Blur gaussien
Mode mixte
Crop
Magic Wand

Même l'outil

Magic Wand , je pense que c'est trop compliqué. Dans le cas de la conception de l'interface utilisateur, je n'ai jamais compris pourquoi il existe.

Cependant, de nombreuses autres fonctionnalités nous permettent de concevoir pour les tendances actuelles. La photographie et les «grandes images» sont les plus populaires en ce moment, que nous utilisons un contraste élevé, des images influentes ou des arrière-plans flous. Mélanger de grandes images en couleurs unis ou des arrière-plans «super gradient» est également une tendance majeure.

Mais cela fonctionne pour la conception Web, et même alors, cela peut être une habitude instinctive de terminer ces choses dans Photoshop et de copier le bitmap final dans Sketch.

Bien sûr, si vous souhaitez manipuler la tête de votre chien et créer un hybride de chien / grenouille aux yeux laser, Photoshop est certainement le meilleur choix pour vous, mais si vous vous en tenez à une seule application, votre travail est le processus Des résultats meilleurs et non destructeurs en temps opportun. Si vous souhaitez en savoir plus sur la conception non destructive, vous devez regarder Créer des illustrations dans Sketch et les exporter sous le nom de SVG (ci-dessous), une partie de notre cours de conception d'interface utilisateur Sketch.

Chargez le joueur… Commençons par l'ajustement des couleurs.

Réglage des couleurs

Copiez d'abord l'image bitmap sur le canevas - une série d'options de personnalisation apparaîtra immédiatement à droite;

Tout d'abord, sélectionnez la boîte "Réglage des couleurs" marqué. Ici, nous serons en mesure d'ajuster la luminosité, la saturation et le contraste de l'image, mais pour ce court tutoriel, nous réduirons la saturation à zéro.

Mode mixte

Appuyez sur la touche "R" pour démarrer la forme rectangle et dessinez-la directement sur le haut de l'image. La fonction d'adsorption d'alignement automatique de Sketch devrait en faire un jeu d'enfant, mais vous pouvez revérifier la taille de l'inspecteur . Là, décochez le bordure et sélectionnez Remplir → Gradient linéaire et réorganisez vos deux couches à l'aide du raccourci clavier CMD ALT Down .

revenez à l'image (qui devrait maintenant être en haut), modifiez opacité à "25%" et Mode de mélange à "Light Soft" - c'est ce que nous comment nous comment nous Pour utiliser le mode de mélange pour créer un fond de site Web aux couleurs vives mais subtile.

Astuce: le mode de mélange convient en fait à diverses couches, pas seulement aux images .

Blur gaussien

restaurer opacité à "100%". Au lieu de cela, nous brouillerons l'arrière-plan, une tendance commune dans la conception Web moderne, qui permet une meilleure attention à la typographie sur des sites Web avec de grands écrans de lancement d'images. Sélectionnez la boîte de flou gaussienne et tournez-la à 50 pixels.

Vous devez remarquer presque immédiatement que le flou est au-delà de la taille de notre boîte - nous pouvons résoudre ce problème en appliquant un masque. Cliquez avec le bouton droit sur le rectangle dans la barre latérale de la couche gauche et cliquez sur Utiliser comme masque.

Notez que tous ces changements sont non destructifs;

Crop (meilleur moyen)

Sélectionnez maintenant le rectangle et essayez de le redimensionner, ou vous pouvez utiliser le inspecteur pour déclarer la nouvelle dimension. Étant donné que l'image est masquée, elle ne dépasse jamais la limite de notre rectangle, ce qui est la meilleure façon de faire jusqu'à présent, car non seulement nous pouvons déclarer une taille spécifique, mais nous ne causons pas non plus de dommages destructeurs à l'image.

Crop (soi-disant méthode)

À ce stade, il peut être utile d'annuler tout ce que nous avons fait jusqu'à présent avec cmd z ; seule votre image d'origine est laissée sur votre toile. Si vous double-cliquez sur l'image, vous aurez accès à une série d'opérations plus destructrices telles que Crop et invert .

Vous devez d'abord faire le choix, vous pouvez utiliser pour sélectionner ou Magic Wand pour le terminer. La baguette magique fonctionne comme prévu, mais elle n'a pas le même contrôle de tolérance que Photoshop, et le choix de base n'offre aucune fonctionnalité d'adsorption ou la règle, vous devez compter entièrement sur votre propre intuition et souris contrôle. En plus de Clipping et inversion , vous pouvez également choisir remplir ou vectorisation le choix que vous faites.

Conclusion

Ma conclusion finale est que nous devons toujours utiliser Photoshop pour des tâches d'édition d'images complexes ou destructrices.

L'application Sketch ne fournit tout simplement pas suffisamment de flexibilité pour utiliser ces outils efficacement. Cependant, nous avons appris quelques astuces simples pour éviter d'avoir à allumer Photoshop en ce qui concerne les images Bitmap, ce qui deviendra rapidement une habitude pour ceux qui utilisent Photoshop depuis des années.

Il est facile d'être un maître d'édition d'image dans l'application Sketch 3 lorsque vous comprenez les utilisations et les limites de l'application Sketch 3.

Les fonctionnalités que j'ai mentionnées au début de l'article, luminosité , Blur Gaussian et Mode mixte (pour n'en nommer que quelques-uns), peut maintenant même être filtré avec les miroirs CSS sont implémentés dans la conception Web moderne. C'est peut-être la raison pour laquelle ces fonctionnalités d'édition d'image fonctionnent parfaitement, tandis que d'autres fonctionnent moins efficacement.

Croquis de l'application Image d'édition FAQ

(La partie FAQ du texte d'origine est omise ici car le contenu de cette partie ne correspond pas aux exigences pseudo-originales de l'image et est plus longue. Si nécessaire, une demande pseudo-originale de la partie FAQ peut être faite séparément.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!