Design d'applications mobiles à partir de zéro avec Sketch 3 - Partie 3 (UI Design Avancé)

1. Bienvenue à la partie 3: D' accord. Bienvenue de retour. Ceci est la troisième partie de ce cours de conception d'applications mobiles, Alors assurez-vous d'avoir suivi la première partie et la deuxième partie avant de commencer celui-ci dans cette section. Troisième partie. Nous travaillons sur l'identité visuelle et la conception personnalisée de notre application qui nous permettra d' approfondir les meilleures pratiques de conception de fonctionnalités d'esquisse avancées. Je ne peux pas concevoir beaucoup d'autres choses. Si vous ne l'avez pas Je ne sais pas que défie pour le cours dans la première partie ou en partie pour vous assurer que vous le faites. C' est votre dans le robinet de projet de classe. Et maintenant je te laisse encore avec Adrianne. Alors amusez-vous, les gars. 2. Inspiration et tendances: Bienvenue dans la deuxième partie du cours. Pas qu'il ait jamais couru avec un design standard. Il est temps de commencer à penser à son identité visuelle. À quoi cela ressemblera se sentir comme les couleurs et les téléphones allaient utiliser. Il s'agit d'un concept visuel de l'application. Une grande partie de ce processus consiste à trouver de l'inspiration. L' inspiration n'est pas un cadeau des dieux qui vous vient de nulle part. La meilleure façon de s'inspirer est de regarder d'autres œuvres. Et si vous avez l'impression que c'est voler d'autres personnes, je D. Eh bien, c'est un peu le but. En tant que conférenciers qui ont dit bons artistes copier de grands artistes volent. Et si, parce qu'ils disent que je pense que nous sommes bons à y aller, il y a beaucoup de chemin pour recueillir des informations sur Internet. Un bon et facile est d'avoir un conseil d'administration et d'intérêt où vous êtes référé références que vous aimez. Nous vous recommandons également de prendre des captures d'écran pour voir que vous aimez lorsque vous naviguez sur l'application sur votre téléphone. Créer votre propre collection est un dicton permanent. Gardez toujours les yeux ouverts. Il y a beaucoup d'endroits où vous pouvez trouver de l'inspiration sur Internet. Jetons un coup d'oeil à quelques-uns des meilleurs Dribble Dribble est le spectacle jusqu'au site Web. Pour les concepteurs, beaucoup d'incroyables concepteurs d'applications mobiles concepteurs graphiques Illustrators sont très actifs dans cette plate-forme et téléchargent leur travail en cours tous les jours. Vous pouvez à la fois pour les photos populaires, je vais chercher des thèmes spécifiques. Il y a un excellent outil de collier qui vous montre la couleur principale utilisée dans la prise de vue. Si vous trouvez un concepteur dont, là où vous le souhaitez, vous pouvez explorer ses photos et même les suivre s'il crée un compte, n'importe qui crée un compte, mais vous devez être invité à pouvoir pousser. Tu veux des dessins. Vous pouvez également vérifier être donc point net, qui est également un grand site de vitrine de design. Depuis que nous travaillons sur l'application mobile, il ya quelques sites Web qui affichent des captures d'écran plus par comme vous les gars et les flux modèles, P t T R et s dot com. Vous pouvez généralement bro captures d'écran par tâches ou vous je modèles. Donc, disons que nous travaillons sur le profil dans notre application. Nous pouvons jeter un oeil à la façon dont les autres APS affichent les profils utilisateur. Le site moins aimerait partager avec vous est peu de gros détails qui viennent. C' est un sang qui rassemble intelligent, criminel détaillé, différents sites Web, différents sites Web, APS et utiliser Il coule. Ce n'est pas toujours une question de design, mais c'est vraiment impressionnant de voir jusqu'où les designers peuvent aller. Je vous recommande également de vous inscrire sur le côté Bardet Io Sidebar a été créé par le tel accord, si un temps très cool au concepteur. Il s'agit d'une liste des cinq meilleurs liens de conception de la journée qui vous sont envoyés chaque matin par email. Il vous tient à jour avec de nouveaux produits, nouveaux articles et toutes sortes de choses liées au design. Alors partageons avec vous ce que nous avons remarqué des tendances d'aujourd'hui. Signe inapt sur le U Exide Nous voyons de plus en plus de gestes. Les gestes sont l'interaction que vous faites avec vos doigts devrait juste attendre étant des cartes, par exemple, Du côté américain, la conception plate est maintenant obligatoire, mais vous verrez également de nombreux points d'accès pour essayer d'être plein écran avec le contenu. Snapchat, par exemple, a un UX vraiment étrange, mais une fois que vous êtes dans le contenu, c'est toujours plein. Donc, vous avez totalement dedans, en mettant un peu brouillant vos antécédents. Une des grandes caractéristiques de croquis est maintenant dans l'alternative à une mise en page de sprint de doctrine en arrière-plan. Enfin, vous verrez de plus en plus d'icônes de contour au lieu de pictogrammes gras. Un bon exemple de cela est urbain être dernier rebranding total. Maintenant que nous savons où trouver l'inspiration, apprenons à maîtriser le croquis pour être en mesure de faire face. Il t'aime et même crée tes propres idées. Ça va être dans la prochaine leçon. 3. Couleurs et sélecteur de couleurs: Bienvenue dans cette vidéo, nous allons parler des couleurs. Un bon design devrait fonctionner sans aucune couleur. C' est la raison pour laquelle nous avons utilisé les appels d'offres de l'IRS dans notre première version. Cependant, couleur est l'un des premiers éléments du design qui sera perçu par l'utilisateur, et donc il joue un grand rôle dans la perception esthétique de votre design. Mais avant de traiter nos couleurs dans des palettes de couleurs, je veux vous montrer comment fonctionne le sélecteur de couleurs. Dans l'esquisse, ouvrez un nouveau fichier et dessinez un carré. Maintenant, cliquez sur le bouton de champ et donnez-lui la couleur que vous aimez. Lorsque vous déplacez le sélecteur de couleurs dans le bulletin de vote, les chiffres ci-dessous se déplacent. Ce sont les périmètres qui ont défini la couleur. Les vieux disent la même chose, mais de différentes manières. C' est comme dire le même mot dans différentes langues. Croquis sur les trois U. Hex est un code unique de six chiffres et lettres qui définissent votre couleur. RVB est un moyen de composer la couleur en équilibrant les sont qui signifie rouge G pour un vert et être pour la valeur bleue peut être comprise entre zéro et 235. Donc si vous Opportunity, Faisal, Fred et zéro de vert et bleu. Tu te lèves, tu lis. Si tu avais 235 de bleu, tu deviens violet et ainsi de suite. Si vous cliquez sur le bouton RVB, vous allez transformer RVB en HSB. H représente qui ? Le Qui est une couleur dans sa forme pure. Lorsque nous nous référons aux couleurs comme le rouge, bleu, orange jaune, où vous parlez généralement de qui est qui a été loué de 0 à 3 60, vous pouvez voir où ils sont ici sur l'échelle de couleurs s stand pour la saturation. Il se réfère à la pureté de la plage de valeurs de saturation de l'OMS de 0 200 qui correspond au pourcentage de saturation de la couleur. Plus la couleur est saturée, plus elle sera proche du pur qui moins elle est saturée, plus elle est proche du blanc. Enfin être synonyme de luminosité. Il est fondamentalement comment comme ou sombre qui est comme la saturation luminosité plage de valeur de 0 200%. Vous pourriez parfois aussi avoir à faire face à des couleurs qui sont définies par C. M. Y que. Ce profil couleur est dédié à la conception d'impression. Si une marque donne vous semblez comme une référence pour leur image de marque ou une nuance de ponton aller à couleur qui devait être que venir à converti dans la langue que vous voulez. La dernière impression que vous pouvez éditer est le A qui signifie Alfa. C' est l'opacité. La valeur peut être comprise entre zéro et 100% Donc, si nous créons un autre carré devant les heures et changer la capacité sera en mesure de voir le 1er 1 à la nouvelle. Veuillez noter que le changement de capacité ne modifie pas la valeur de votre ex ou RVB. C' est une information supplémentaire. Donc, si vous voulez donner des informations claires à, le développeur de la conception, l'équipe devrait leur donner l'hexadécimal ou leur RVB et la transparence si ce n'est pas 100% le but entier de cette écoute était de vous faire comprendre comment fonctionne le sélecteur de couleur. J' ai essayé de le rendre aussi simple que possible, mais si vous le trouvez technique, ne vous inquiétez pas. Celui-ci vous empêche de l'utiliser et de comprendre ce qui suit sur la façon de les ulémas. Vos devoirs pour cette leçon sont de jouer à ce jeu par milieu de faction. Ils créent des jeux étonnants et drôles. Il suffit de cliquer sur ce lien dans la prochaine leçon verra comment choisir. La couleur utilisera l'application indépendante 4. Bonne pratique : Palettes de couleurs: Maintenant que nous savons comment le sélecteur de couleurs fonctionne dans le croquis, laissez passer la couleur volonté. Maintenant que nous savons comment le sélecteur de couleurs fonctionne dans le croquis, L' utilisation de notre application dans cette leçon permettra de créer un jeu de couleurs. La brillance du collier est fondamentalement le choix des couleurs sera utilisé dans nos conceptions. Ce sont trois exemples de schémas de couleurs. On verra deux façons de venir avec la scène de la fac. Le premier est de choisir une couleur de base et de compléter la honte avec des teintes de cette couleur et des nuances de gris. C' est le plus facile et souvent le plus efficace. Juste quelques notes secondaires ici pour définir le terme que je viens d'utiliser. Si la couleur est rendue plus claire en cachant le blanc, le résultat est appelé une tente. Si le noir est ajouté, la version plus foncée est appelée une nuance, et si le gris est ajouté, le résultat est un ton différent. Un second cadre que vous pouvez utiliser pour trouver une coalition Reacher pourrait être le premier, sélectionner un appelant de base, puis sélectionner une couleur secondaire en utilisant des principes d'harmonie et finalement croire à la honte et juste nuances et des tons intenses. Nous parlerons de cette méthode dans la prochaine vidéo. Dans les deux cas, la première étape est trop importante. La couleur principale. C' est généralement la couleur de votre marque. Si vous n'avez pas encore de marque ou de galerie en tête, il n'y a pas de formule magique ou d'outil qui le choisira pour vous. Mais ne vous embêtez pas trop avec ça. Jetez un oeil à d'autres abdos Brooks qui conçoivent sur dribble et choisissez une couleur que vous aimez. Si vous êtes vraiment bloqué, ouvrez le fichier d'esquisse nommé Couleurs dans ce dossier de leçon et choisissez l'une des couleurs que nous avons sélectionnées pour vous. Utilisons le premier milieu pour créer une honte simple et efficace pour l'application. Ouvrez votre fichier principal. Tout cela dans ce dossier de leçon. Nous allons le faire sur une nouvelle page dans le même fichier. Cliquez sur cette petite icône à côté de Page 1, puis cliquez sur le plus. Notre fichier a maintenant deux pages créant notre tableau et nommez-le couleurs. Créez un carré et donnez-lui la couleur que vous avez sélectionnée. Pour nous, ce sera le code hexadécimal. 125688 C'est notre couleur principale. La couleur de la marque Instagram. Maintenant, dupliquez le carré quatre fois et mettez ce carré cinq à côté de l'autre gardera le même qui, mais en jouant avec la saturation et la luminosité obtiendra cinq teintes différentes. Nous allons commencer avec un peu de bleu, qui utilisera pour les éléments actifs en vous, j'ai dit. La saturation à 87 et la luminosité à 53 puis un gris clair pour les éléments inactifs. Situation à trois justesse. 67 qu'une saturation gris plus foncé à zéro et la luminosité à 33. Et enfin, une situation noire ou gris très foncé. Un 12 et la luminosité à 10 comme nous allons utiliser ce collier souvent. Une bonne pratique consiste à les ajouter. Pour utiliser le panneau de surveillance. Sélectionnez une couleur, ouvrez l'onglet Couleur du champ et cliquez sur Plus pour chaque commutateur. Ainsi, vous aurez toute la couleur à portée de main. C' est ça. Fait la même chose pour votre projet. Créez votre propre jeu de couleurs et ajoutez-les à votre onglet de couleurs. Vous serez beaucoup plus produit de cette façon. La vidéo suivante est facultative. Il traite de la couleur comment principe maney et l'ajout de différentes couleurs à la honte. N' hésitez pas à le garder et à revenir quand vous le souhaitez. Si vous voulez concevoir l'Europe le plus rapidement possible, mais si vous voulez ajouter d'autres couleurs à votre obscène et ne savez pas comment les choisir. Ensuite, continuez et regardez la vidéo suivante. Nous vous expliquerons comment et vous montrerons comment utiliser un outil très utile. 5. L'harmonie des couleurs (en option): bonjour encore Dans la vidéo de préface, nous vous avons montré comment créer un rasheem de charbon simple et efficace. Si vous êtes satisfait de cela, vous pouvez aller dans la vidéo suivante Si vous voulez plus d'une seule couleur dans votre équipe et que vous voulez en savoir un peu plus sur l'harmonie des couleurs, je n'ai pas regardé le reste de cette vidéo. Nous partons également d'une couleur de base, mais cette fois utilisera le principe d'harmonie pour choisir les couleurs secondaires. La roue de couleur est particule est utile dans la création fait sorte de couleur de réfrigérateur. Semble que la couleur traditionnelle semble motifs sont une combinaison de couleurs basée sur leur relation les uns aux autres. Les machines traditionnelles peuvent vous aider à trouver rapidement des harmonies et des palettes intéressantes . La couleur monochromatique semble être composée de différents tons, nuances intenses. Qui est dans un particulier qui ? Ce sont le schéma de couleurs le plus simple à créer car l'ancien pris de la même couleur monochromatique cerceau semble avoir tendance à être unifié et harmonieux. Cela les rend assez efficaces pour établir dans l'humeur générale. L' inconvénient est qu'ils peuvent devenir monotones en raison du manque de diversité des couleurs complémentaires de qui . Semble sont basés sur la couleur opposée l'une à l'autre. sur la roue de couleur, par exemple, rouge et vert ou bleu et orange. couleurs gratuites sont difficiles à utiliser à fortes doses, mais fonctionnent bien lorsque vous voulez quelque chose à se démarquer. La couleur de compliment est préférable d'utiliser plus que la couleur d'accent. Pas de contraction orange sur la page. Déplorant d'acheter un bleu sera très efficace. Par exemple, comme joué complémentaire est honteux. Major est celui qui, plus deux autres également l'espace de son complément. Ce schéma de couleurs a le même contraste visuel fort qu'un éclat de couleur complémentaire, mais a moins de tension. collisions analogues sont basées sur des ajustements de couleur. de l'autre est sur la roue de couleur. schémas de couleurs analogues sont souvent trouvés dans la nature. Ils sont assez harmonieux et agréables à l'œil. Cependant, ils ne fournissent pas beaucoup de contrastes. Choisissez une couleur pour dominer la couleur moyenne, une seconde pour soutenir la couleur principale et la couleur 30 pour les accents. Vous pouvez, bien sûr, j'ai juste des piqûres, des nuances et des tons dit. Là, vous êtes la clé entre les couleurs, dont nous parlerons dans le deuxième arbre. La couleur du grenier semble utiliser des couleurs qui sont uniformément espacées autour de la roue de couleur. Ils offrent à la fois contraste et harmonie. Il était l'une des couleurs est la couleur dominante et les deux autres pour les accents. Deux couleurs tragiques ou doubles complémentaires. Elle utilise quatre couleurs disposées en deux paires complémentaires. La couleur riche semble hors de ses nombreuses possibilités de variations, mais il peut être un peu difficile d'équilibrer. Donc, mais la meilleure façon d'utiliser une honte comme celle-ci est d'utiliser une couleur comme couleur primaire et l' autre comme accents. Bon, essayons maintenant de prendre un de ces semble traditionnel et de voir comment nous pouvons jouer avec elle et, bien que pour le faire, fonctionnera avec adobe color. Va à colorier cet adobe qui vient. L' application est faite à partir d'une roue de couleur que vous pouvez faire plus grand ou plus petit en cliquant dessus. Cinq couleurs a. affiché ici. Les analystes sur la roue cinq est un bon nombre pour commencer à travailler sur votre éclat de collier, mais vous pourriez vous retrouver avec plus de cinq couleurs. Plus loin sur la route, vous pouvez sélectionner traditionnel semble analogue, monochromatique et ainsi de suite et déplacer la couleur autour tout en gardant la géométrie de la machine. Et vous pouvez également utiliser la brillance personnalisée où vous pouvez faire tout ce que vous voulez, vous pouvez choisir le modèle de couleur que vous voulez utiliser. Nous utiliserons HSB parce que nous le savons. Voyons si on peut travailler à Lagos Shihm. Notre couleur de base est celle-ci au milieu. Il a une flèche blanche ici et ici, et nous pouvons la changer en cliquant ici, exemple, par exemple, ou en la déplaçant sur la roue sur la couleur. Nous pouvons ajuster la saturation et la luminosité pour jouer avec des points, des nuances et des tons et ajouter du contraste à nos palais. N' oubliez pas d'aller chercher quelques inspirations sur le Web. Dribble a une grande fonctionnalité qui montre la couleur utilisée dans la conception, et si nous cliquons sur la couleur, vous verrez d'autres modèles qui utilisent cette couleur. C' est génial si vous voulez voir quelles couleurs le concepteur utilise avec cette couleur de base . Si vous voulez aller avec lui pour choisir pour vous, choisissez deux couleurs sur la palette de matériaux dot com et laissez la magie se produire. Vous pouvez également vous amuser à jouer avec des glacières point Co. C' est un outil adjectif pour générer cinq sweat-shirt vu en appuyant simplement sur votre barre d'espace. La meilleure façon d'aller mieux à cela est de pratiquer, essayer d'explorer ce que nous avons appris et de trouver des combinaisons de couleurs que vous aimez juste pour le bien de cela. Il n'est pas nécessaire que ce soit pour un projet spécifique. Juste profiter de jouer autour, amusez-vous. 6. Typographie: Bonjour encore et cette vidéo va prendre sur la typographie. Ce n'est pas quelque chose sur lequel vous devriez passer trop de temps. ce moment, le processus de traitement des textes et de choix des polices ou des polices est vraiment itéré, car il est très difficile de choisir un téléphone sans le dire dans le contexte. Et la meilleure chose à faire est généralement de commencer avec Helvetica, puis d'expérimenter quand vos conceptions sont un peu plus avancées. Ce qui est important de comprendre que la typographie est à la fois verbale et visuelle, Cela signifie que la façon dont le texte ressemble influence le lecteur à lire ou non et influence la façon va lire le contenu, la police, la taille. La position des techniciens peut donc nuire à votre contenu. C' est pourquoi il est important d'avoir une compréhension générale de la façon dont ces choses fonctionnent. Les premières choses d'abord. Polices de caractères. caractères sont généralement ce que les gens font référence lorsque vous parlez de fonds, et s'il vous plaît ne faites jamais de polices de caractères comme je l'ai fait sur ce titre. La police de caractères est une conception pour un ensemble de caractères ont un leurre et fois New Roman sont deux polices différentes. Par exemple, nous verrons également dans une minute qu'ils appartiennent à deux familles différentes de polices de caractères. Donc, si c'est une police de caractères, qu'est-ce qu'un fonds ? Eh bien, c'est normal d'utiliser le fonds comme un nouveau visage du Sénat, mais juste pour que vous sachiez, j'ai téléphoné est une taille, un poids et un style précis d'une police de caractères. Il y a trois familles de caractères principales. Serif San, Serif et script. Commençons par le shérif. Un serif est une petite ligne attachée à la fin d'un trait dans la lettre ou le symbole, une police avec des temps serif, New Roman's appartient à la famille stéréo. polices de caractères graves utilisent également une combinaison de péché et de traits de pensée. caractères Serif semblent un peu conservatrices, mais sont faciles à lire pour les pièces plus longues. Parlons maintenant d'un peu sérieux en français. Le mot fils signifie sans. C' est pourquoi les polices de caractères résultent. Serif sont appelés sans serif, contrairement aux polices de caractères serif, Sunseri. Si vous avez dans les coups, ils ont l'air plus mère sont parfaits pour les titres et le bouton. Ils sont également généralement faciles à lire. Contrairement à certaines familles de caractères appelées script, fonds de script imitent et écrivent les logos ou titres souvent utiles, qui ne sont pas utilisés pour le corps du texte. Il y a des dizaines de sous-catégories que vous n'avez pas besoin de connaître à leur sujet pour produire un excellent design. Mais si vous êtes intéressé, consultez ce site Web. Le lien n'est pas une description. Alors, comment combiner les polices de caractères ? Pourquoi il est toujours plus facile de travailler avec une seule police de caractères mélangeant deux polices différentes peut parfois donner de beaux résultats. Si vous voulez essayer, j'évite d'utiliser deux téléphones de la même famille. La principale raison pour laquelle vous souhaitez utiliser une autre police de caractères est d'ajouter un peu de contraste. Par conséquent, utilise une deuxième police de caractères qui n'est pas trop similaire à celle du 1er 1 et modifiez la taille, poids ou la couleur. C' est ce que je fais sur cette lumière. Par exemple, pour mon application, je vous recommande fortement d'utiliser une seule face de type dans l'application. En faisant cela, vous vous assurerez de garder la cohérence et d'éviter d'avoir l'air bâclé. Revenons à vérifier pour jeter un oeil à l'éditeur de tuiles de texte. L' alignement sur est quelque chose que vous devez avoir vu avant dans le mot ou tout éditeur de texte Wits fait référence à l'esprit des manuels scolaires. Ça dit Oto. Par défaut, cela signifie que la zone se développera pour s'adapter au texte. Si vous avez dit de le corriger, l'esprit de la boîte est fixe et le texte se développe ci-dessous avant de conclure cette vidéo, un mot sur l'espacement. Il fait référence à l'espace entre les caractères, la ligne de texte et les paragraphes. Une bonne pratique est d'avoir un espacement entre les lettres 1,2 et 1,5 fois la taille du téléphone pour le corps texte, utiliser une plus petite quantité de off qui est, basant sur un titre qui dans le corps un point Y savoir quel est le point pour cette leçon . Dans la prochaine, je vais vous montrer un excellent outil à saules pour travailler plus efficacement avec les piles dans votre conception. 7. Bonne pratique : styles de texte: Bienvenue dans cette leçon permettra d'améliorer notre productivité en s'asseyant différents textiles afin qu'elle puisse lui donner un texte. Bloquez les bonnes propriétés en un seul clic. Retournons à son dossier en cage. Ouvrez celui de ce dossier de leçon pour être sûr d'être à jour. Eh bien, arrêtez avec le nom du profil utilisateur. Sélectionnez le texte dans le panneau de droite. Vous voyez que c'est un Helvetica Neue medium 16 en bleu, au-dessus des propriétés du texte. Vous ne devriez pas voir de textile. Cliquez dessus et plus grand style de deck. Nommez-le Nom d'utilisateur. Maintenant, sélectionnez le bloc de texte commun que vous voyez sur la droite qu'il est dans Helvetica Neue Regular en 16 et chien Gris. Cliquez sur aucun textile et créez-en un nouveau. Nommez-le. Commentaire. Enfin, faites la même chose pour le texte qui affiche depuis combien de temps la photo a été publiée. Une heure d'image, et c'est tout. Pour vous montrer comment on pourrait l'utiliser. Créons une version étendue de l'alimentation de la maison, sélectionnez le hors-bord de la maison et pourrait être badigeonné. Prenez la poignée en bas et tirez-la ci-dessous. Faites glisser votre barre de baignoire en bas. Insérez le manuel et mettez le nom d'un utilisateur. Disons Claudia Schiffer, puis la sélection prend bloc. Cliquez sur le panneau textile et définissez-le comme profil utilisateur et boom magique. Le grand dicton c'était sa caractéristique est que si vous avez fait le textile, tous les éléments qui l'utilisent seront mis à jour instantanément. Si vous changez la couleur sur la taille du téléphone, par exemple, une bonne habitude est de créer un inventaire de vos différents textiles, alors faisons-le. Nous allons le faire sur la deuxième page de notre dossier, alors allez à la page 2, créez un panneau de boutons et nommez-le textiles. Ensuite, tapez le nom de votre textile différent dans les blocs de prises séparées, commentaire de profil utilisateur droit. Un autre pour le temps, leur dit avec les régimes appropriés prend, vous aurez maintenant tout votre textile en un seul endroit. Le développeur appréciera vraiment. Quant aux polices de caractères, vous ne devriez pas avoir une tonne de textiles. Et n'oubliez pas de garder votre rocher entre eux. Jouer avec les chercheurs, les téléphones et la taille de deux mètres prend de l'importance. Le plus grand exemple de la typographie en Irak de contenu est médium qui viennent dans les différents articles de Bro et voient comment les textes sont liés entre guillemets blancs, paragraphes denses et légendes discrètes. C' est proche de la perfection dans cette leçon. Nous Alors comment définir les textiles ? Ce n'est pas obligatoire car vous pouvez être basé sur chaque bloc de texte, mais cela vous aidera vraiment à travailler efficacement. Aucun d'entre vous n'a de couleurs et de texte. Passons à travers nos propres icônes. 8. Dessiner des icônes: dans cette section va approfondir les possibilités de dessin d'esquisse en redessinant les cônes de la barre d'onglets I. Concevoir ces icônes nous fera passer par beaucoup de fonctionnalités, alors restez concentré et tout va bien se passer. abord, allons à la page Guide de style du fichier Horror. C' est là que nous mettrons chaque élément en utilisant nos designs. Nous avons déjà mis des couleurs et du texte. Nous allons ajouter maintenant sont des icônes. Dans la vidéo suivante, nous allons voir comment transformer cette icône en symboles afin que chaque fois que vous les modifiez, ils soient également modifiés dans votre page de création. On va commencer par celui d'Aegis. L' icône de la caméra Instagrams icône de la caméra est un peu abstraite mais ne fait pas partie de son identité. C' est un cercle à l'intérieur d'un carré, conduit carré de 31 pixels dit la couleur à quelque chose que vous pouvez voir. Disons orange, dit le registre des couleurs. Quatre. Maintenant, appuyez sur oh pour dessiner un cercle, dessinez un cercle de 22 pixels de large. N' oublie pas de tenir le quart. Pourquoi grandir slugged un carré et le cercle cliquez une fois sur, aligner horizontalement et une fois sur aligner verticalement quand je suis sûr que deux éléments sont alignés par le centre, nous allons faire notre première opération booléenne. Les opérations booléennes sont utilisées pour combiner des formes ensemble. plus utilisés sont les ajouts et les soustractions, mais nous sommes presque utilisés. Imo Sélectionnez votre cercle et le carré. Maintenant, cliquez sur le bouton S'abonner. Cela va extraire le cercle du carré. Vous avez maintenant un carré avec le trou au milieu et dans la liste des calques. Les deux objets ont émergé en un maintenant, dessinant qu'un cercle de 15 pixels de large. Placez-le au centre de votre place et vous y allez. On a l'icône de la caméra. Mettons tout ce qu'il ou dans pour le moment, sélectionné pour les formes et cliquez sur Groupe. Cela va créer un dossier dans The Loyalist pour renommer un dossier. Vous pouvez plus facilement double-cliquer sur son nom ou sélectionné et appuyez sur. Venez sur notre nom le dossier Icahn et cette caméra de cour. Maintenant, c'est génial. Une autre icône. Allons avec l'activité et la notification. Eichel. Cette icône est une combinaison d'une bulle de conversation et d'un cœur. Nous allons commencer par le cœur, a conduit un clic de cercle neuf par neuf et glisser tout en appuyant sur pour concourir un cercle. Un site placé un deuxième cercle à côté du 1er 1 Ils doivent se chevaucher de deux pixels. Sélectionnez les deux cercles et fusionnez-les en une seule forme en cliquant sur l'icône de l'union. Maintenant, les deux cercles sont loués à une forme, mais si je double-clique sur la forme à elle, il esquisse avec seulement un moi bas pour éditer un hors de la forme afin qu'il ait fait. La nouvelle forme dans son ensemble devra y inonder. Sélectionnez les deux cercles Couvent et Quicken Flatten. Maintenant, si je double rapidement sur l'esquisse de forme considérera la forme comme un élément que je serai en mesure d'éditer. Maintenant, ça l'a transformé en un beau cœur. Sélectionnez le point en bas du cercle gauche et dilatée en appuyant sur Supprimer sur votre clavier. Faites la même chose pour le point en bas du cercle droit. Sélectionnez les deux points au milieu et supprimé. Vous découvrirez qu'il y en avait deux. Maintenant, sélectionnez le point au milieu dans sa position Y sur le côté droit type plus 10. Cela fera baisser notre point de 10 pixels. Maintenant, on va jouer avec les courbes occupées. Des filles occupées. J' avais l'habitude de dessiner des formes arrondies qui ne sont pas des normes géométriques. Ils sont assez difficiles à maîtriser, mais vous vous y habituerez dans les courbes occupées. Chaque point est défini par une ou deux poignées. Déplacer ces poignées modifiera votre forme entière. Prenons une petite pause de notre cœur et dessinons un carré pour voir comment la carrière de cette bizarrerie dessinée et double-cliquez dessus. Pour faire apparaître des points de dessin, cliquez sur l'un des points du panneau de droite. Vous pouvez voir que le coin de la rue est sélectionné là. Trois autres types de coins. Du mérode. Vous avez deux poignées symétriques, déconnectées. Deux poignées peuvent être déplacées indépendamment. Une symétrique S. C' est un mélange entre les deux précédents pour gérer bordée rassis, mais peut être déplacé indépendamment le long de l'accès. Maintenant, faisons-le la place et revenons au cœur. Le fond de notre cœur sera une astuce si bien dit pour manipuler droit. Cela signifie qu'il n'y a plus de poignée maintenant. Nous allons donner une meilleure forme à notre maison. Sélectionnez le point à gauche, les deux lignes qui apparaissent sur la poignée qui définit la forme des courbes, la courbe supérieure définie ci-dessus ne modifiera que la forme ci-dessous. Sélectionnez donc une symétrique dans le panneau de droite. Maintenant fait glisser le point de la traite des poignées ci-dessous. Jusqu' à ce que votre cœur ressemble à son plein d'amour mène à la même chose du côté droit. Cliquez sur le point qu'une symétrique et drain a traîné la poignée ci-dessous comme l'autre. N' est-ce pas un cœur merveilleux plein d'amour ? Vous pouvez créer votre forme comme nous venons de le faire en utilisant la souris, mais vous pouvez également utiliser les coordonnées pour la poignée dans le point. Si vous voulez être plus précis maintenant, prenons soin des portes à bulles si fraîches de 29 pixels de large. Cliquez sur le casier pour le déverrouiller et a dit la haine un 28 pour le compresser un peu. Maintenant, cliquez sur insérer la forme et le triangle. Cliquez et faites glisser à travers le triangle, dit la haine dans l'esprit à neuf. Faites pivoter les triangles vers le point de pointe vers le coin inférieur droit sélectionné pour les formes et les fusionnez en un avec la fonction d'union. Cliquez sur aplatir pour le transformer en une nouvelle forme. Maintenant, placez le cœur au milieu de la bulle. Sélectionnez le cœur et la bulle et cliquez sur Soustraire. C' est ça. Rapide sur la forme dans la liste des calques et nommez-lui l'activité de soulignement Icône. Maintenant, faisons le profil. Icône Appuyez sur. L' icône de profil est composée de deux rectangles modifiés. Dessinez le premier rectangle de 25 pixels de large et 11 pixels de haut double rapide sur la forme pour l' éditer . Lorsque vous au-dessus de la bordure du rectangle, vous verrez un stylo avec un peu plus. Cela vous permettra d'ajouter des points sur votre forme. Nous voulons un autre point au milieu de la frontière supérieure. Pour ce faire, maintenez le commentaire tout en survolant le segment et cliquez sur. Cela placera votre point exactement au milieu. Maintenant, sélectionnez ce nouveaux points et utilisé l'IRA sur votre enfant Boyd pour le placer quelques syllabes pics . Assurez-vous que les poignées de votre point sont définies comme repas et drogue un ou utilisez la flèche sur votre clavier de la poignée jusqu'à ce qu'elles atteignent l'extrémité du rectangle. Maintenant, on va faire le visage. Nous allons commencer par dessiner un rectangle, dit les esprits à 11 et ils détestent à 14 dit le coin Rogers au maximum. Maintenant, cliquez sur le bouton de transformation, sélectionnez l'un des coins inférieurs et faites-le glisser ou utilisez la flèche sur votre clavier pour le déplacer un peu vers le centre. Joue toute la forme du visage au-dessus de la poitrine, les aligner et les regrouper. Nommez l'icône de ce dossier. Profil de soulignement. Comme un exercice, vous devrez dessiner la maison et rechercher l'icône par vous-même ouvert fichier existence Dans ce dossier de leçon, vous trouverez les icônes verrouillées en arrière-plan. Une bonne idée sera de commencer par un carré pour l'icône d'accueil dans un cercle pour l'icône de recherche . Mais tu pourras être plus créatif une fois que tu auras fini. concurrence avec les icônes dans le fichier principal à côté des autres icônes. Si vous voulez ignorer cette étape, prenez les icônes que nous avons déjà dessinées pour vous. Dossier. Maintenant que nous l'avons fait, toutes ces icônes les transformeront en symboles dans la prochaine leçon. 9. bonnes pratiques : Symboles: salut à nouveau dans cette section utilisera une fonction de symbole dès que vous utiliseriez un élément plusieurs fois dans votre application, nous vous recommandons de le transformer en symbole. Si vous le faites, vous n'avez qu'à éditer votre élément qu'une seule fois, et chaque instance de l'élément dans votre fichier sera mise à jour. Nous l'encourageons également aux gestionnaires. Symbole sur une autre page, ouvrez le fichier principal et allez à la page deux. Si vous avez bien fait six, vous devriez avoir toutes les icônes retirées en ponts. Leçon. Si vous n'ouvrez pas cette cage, les fichiers dans ce dossier leçon et commencer à partir de là. Dans Instagram, la barre d'onglets n'est pas un fond de chien, et toutes les icônes sont blanches à l'exception de l'onglet de la caméra dont l'arrière-plan est toujours bleu. Commençons par l'appareil photo a grandi avec 75 pixels de large et 50 pixels de haut, Rectangle a dit la couleur à Instagram Blue Place l'icône de l'appareil photo au milieu. Aligner horizontalement était le bouton dis et verticalement avec celui-ci. Maintenant, nous allons prendre soin des autres icônes sera réglé sur les statuts pour tous les cônes oculaires actifs et inactifs, et nous allons commencer par l'actif créer dans notre tableau et le nommer actif a dessiné un rectangle noir de 75 pixels de large et 50 pixels de haut dupliqué côté à côté quatre fois. Maintenant, placez les icônes dans les enchevêtrements ITRI et les aligner à la fois un citrons verticalement et horizontalement. Parfait. Nous allons maintenant créer l'état inactif. Dupliquez le tout à bord et nommez-le inactif. Réglez tout le fond noir en gris foncé avec le code hexadécimal à cinq 272 A. Afin de différencier instantanément un robinet entre actif et inactif, mettra un peu de transparence dans les icônes. Quand ils sont inactifs. Sélectionnez toutes les icônes directement dans DeLay une liste du tableau Odd inactif et a déclaré la transparence à 60%. Maintenant, nous allons commencer à jouer avec des symboles. Sélectionnez le rectangle et l'icône d'accueil dans l'actif sont ennuyés. Cliquez sur Créer un symbole. Cela transformera vos calques du bleu à un groupe violet clair dans votre liste de lecture. Cela signifie que ce dossier est un symbole, alors méfiez-vous quand vous l'avez fait jamais instance, sera mis à jour. Si, pour certaines raisons spécifiques, vous voulez détacher et limiter d'être symbole droit, cliquez ou contrôler, cliquez sur son nom et cliquez sur ne toucher à partir du symbole. Nommez votre onglet de symbole sur disco qui soulignent sur faire la même chose pour l'icône de recherche et nommez-le onglet souligné soulignement de recherche sur l'onglet activité soulignement soulignement de l'activité sur et l'onglet profil onglet Profil sur Faisons la même chose pour les inactifs à bord. Nommer chaque couche d'icône Cet onglet de règle soulignait le nom de l'icône et le score off. Enfin fait l'icône de la caméra dans le symbole de l'air et le nom de l'onglet soulignement caméra pas du tout ou assemble déjà bien créé baignoire sont pour le rendre vraiment clair, vraiment génial, et vous vous ennuyez. Créez une nouvelle barre de bain intégrée et renommez-la. Nous pourrions copier le symbole du cannabis, mais tous les symboles sont aussi maintenant dans la bibliothèque de symboles. Cliquez sur insérer des symboles et sélectionnez un symbole d'accueil. Soit sur off faire la même chose et joue une recherche à côté de lui joue une caméra que l' activité. Et enfin, l'onglet de profil Sélectionnez Olo Symboles et les groupes nommés la barre d'onglet de navigation de groupe. Ça pourrait être le groupe entier est commun. Voyez, et revenons à la page 1. Cliquez sur l'écran d'accueil à bord basé sur un groupe avec Come envie placer à la bonne position dans le hors-bord et dans les listes DeLay. Débarrassez-vous du dossier de navigation précédent comme travail dans l'onglet d'accueil sur Lee. L' icône d'accueil doit être définie comme active. Vérifiez que les autres nous ont fait partir. Copiez ce groupe et placez-le dans le tableau exploré. Passez à la maison Off comme ça et la recherche sur comme ça. C' est cool, non ? Pour finir cette leçon. Continuez simplement en mettant en surbrillance l'onglet droit dans les écrans de droite. C' est ça. Notre APS qui ressemble vraiment à l'authentique, et nous savons comment le faire maintenant. La meilleure façon d'utiliser le symbole dans la prochaine leçon va découvrir le dioxyde de capture qui contient des chantes incroyables et même quelques mots. Je parle de branchements 10. Gagner du temps avec les plug-ins: nous reviendrons. Nous avons déjà traversé un grand nombre de fonctionnalités qui sont intégrées dans le croquis. Jetons maintenant un coup d'oeil à ce qui a été construit dessus. Plug-ins plug ins sont informés qui n'ont pas été créés par l'équipe d'esquisse, mais par la communauté étonnante arounds attraper parfois. La compensation et les fonctionnalités manquantes vous aident à être plus productif, organisé ou simplement amusant. Pour vous dire la vérité, je n'ai pas éloigné tous les plug-ins qui ont été créés pour le croquis, mais parmi la communauté il y a un gars intelligent et les autres qui ont créé une fiche dans quatre connecteurs. C' est une boîte à outils de croquis à froid. C' est une grande application qui rassemblent tous les plug-ins, les rendre faciles à installer et les garder à jour, puisque les éviers doivent rue obtenir et nous allons commencer par installer croquis deux dollars aller croquis à buck qui viennent et télécharger le croquis boîte à outils. Mieux maintenant, ouvrez le oui, va installer quelques branchements. Comme vous pouvez le voir, il y a beaucoup de branchements disponibles. N' hésitez pas à les accompagner et à lire les descriptions. Si vous ne comprenez pas ce qu'ils font tous, ne vous inquiétez pas, nous non plus. Nous commencerons par installer trois connecteurs. Recherchez un générateur de contenu nommé. Cliquez sur l'installation. Celle-ci nous permettra de ressentir des formes multiples. été exécuté les images en un clic. Assez incroyable. Cherchez également les spécifications techniques. Celui-ci va générer un bloc de texte qui affiche toutes les propriétés, souvent des objets tels que son col latéral , poids de trait etc. Vous développez, vraiment apprécier, Enfin livré plug in nommé E. I Aiken Isar et l'installer bien, vous celui-ci plus tard dans le cours. Maintenant, jouons avec ce plug in. Revenons au croquis. Une bonne façon d'essayer le générateur de contenu. Il est dupliqué l'écran d'exploration. Maintenant, sélectionnez des images plus anciennes. Tu te rappelles tout le temps qu'on a passé à importer des photos dans ces carrés ? Eh bien, cliquez sur les fiches et les photos du générateur de contenu et cliquez sur Nature et Urban et Boom en un seul coup. Nous avons daté toute la année avec de nouvelles photos. Voyons maintenant un autre exemple. Copiez le vers le haut et l'aneth. Tout ce qui est dedans fera une liste de personnes dessiner un cercle et placer un texte diffamation à droite sélectionné pour les éléments et les dupliquer ci-dessous. Comme vous le ferez pour une liste. Faisons cinq rangées maintenant. Cinq photos sélectives. Les espaces réservés cliquent sur brancher dans Clinton générateur persona photos et sélectionnez boom femelle à nouveau 11 qui s'est passé. Maintenant, sélectionnez les cinq étiquettes de texte, plug-ins, les générateurs de contenu, ne poursuivez aucun nom et sélectionnez femelle. Nous avons maintenant un nom aléatoire d'utilisateurs féminins. N' est-ce pas très cool ? Eh bien, veux-tu ? Les autres branchements dans les leçons à venir ? Mais si vous vous sentez comme un aventurier, retournez à la boîte à outils de croquis et installez un autre plug ins dans les leçons suivantes va créer le guide de style et aussi pratiquer un peu. 11. Styleguide et pratique: Bienvenue dans cette leçon, nous allons voir comment saluer un guide de style. Le guide étoile rassemble en un seul endroit toutes les informations de conception de votre application. Un stock. Je devrais inclure des couleurs, téléphones, draps, des marges et tous les éléments avec leurs terrasses de différence. Ça devrait ressembler à ça. Il s'agit d'un document que vous devez toujours tenir à jour et partager avec votre équipe. Vous pouvez également l'imprimer et l'accrocher quelque part dans le bureau que nous avons déjà commencé. J' ai été ciblé à la page 2 de notre document. Donc nous allons continuer là. Nous allons commencer par importer les dernières icônes personnalisées auront besoin d'ouvrir le fichier nommé I cônes Actions Instagram dans ce dossier de leçon Nous les avons dessinés pour vous. Mais si vous voulez défier vos compétences, n'hésitez pas à les attirer tout seul. Peut-être les hors-bord et les paie sur la plage. Deux de votre fichier principal Nous avons maintenant nos doigts, tous les éléments dont nous avons besoin pour concevoir une version améliorée de l'APP. Nous commencerons par le flux de travail de la caméra. Retournez à la page 1 transformera ceci en ceci. Et il a commencé avec le premier clic vert sur le nom d'Abu et dit que la couleur de fond en gris foncé code hexadécimal 333333 Pour apporter une expérience plus immersive à notre utilisateur va cacher la barre d' état et tous les éléments dans la barre de navigation apportera également à de nouveaux notre utilisateur. La possibilité de filmer des vidéos et la possibilité de choisir des photos directement à partir de sa bibliothèque pour cela va créer trois nouveaux onglets au bas de l'hors-bord au lieu d'icônes. Utilisera des niveaux de texte, comme cet écran sera à l'écran photo. Tourné le titre à la couche de texte photo dro et la bibliothèque de droits dans la capitale pourrait être le bloc de texte de côté et les placer h deux bord. Faites la même chose avec le troisième bloc de texte photo de droite dans le second bloc X et la vidéo dans un certain bloc. Maintenant, sélectionnez les blocs Street X et faites glisser la poignée droite du groupe jusqu'à sa position sur le bord des hors-bords. Nous sommes maintenant sûrs que nos trois blocs de texte ont la même taille de texte centré sur les tabas photo , donc nous allons les désactiver en bleu clair de notre jeu de couleurs. Maintenant, nous allons mettre à jour le deuxième démarrage de l'écran en assis l'arrière-plan du coude. Faites le même chien gris. Cachez la barre d'état, mais gardez l'arrière et la suivante. Comme ils font partie de notre navigation. Supprimez les champs. Montres garder le texte, mais dit leurs couleurs au blanc. Nous allons créer quelque chose de bien plus fantaisie en allant votre guide de style pour choisir les outils d'édition, les copier et les baser ci-dessous. L' image a maintenant dessiné dans 130 pixel haut rectangle dit la couleur au noir et placez-le au bas de votre écran. Placer le générateur prend couche dans la liste des calques. Sélectionnez l'image principale et redimensionnez dupliquée afin qu'il devienne un 70 par 70. Pixel Square a dit que la couleur rouge utilisé pour quatre plaît certains ils vont au-dessus du premier nom de filtre dans le rectangle noir pour apaiser le même ongle sur les différents noms. Bien que de différencier les différents filtres va altérer l'image sur les différentes femelles. Sélectionnez tout le reste. Nous allons ajouter un deuxième clic de couleur sur l'icône plus dans la section de champ dit la nouvelle couleur à un 50 personne blanc transparent. Maintenant, sélectionnez seulement la deuxième vignette rapide ici et sélectionnez la lumière douce déserts et mâle et sélectionnez saturation pour la 4e 1 Sélectionnez gravure de couleur et ainsi de suite dans le dernier écran va juste améliorer la sélection du réseau social. Revenez à votre guide de style ou l'élément icônes dans ce dossier de leçon pourrait être l'ensemble du groupe d'icônes sociales et remplacer celui que nous avons dessiné abondamment. Comme c'est la fin de notre appareil photo Flo, nous allons dessiner un plus grand bouton pour partager l'image, cacher le prochain dans la barre naff et a dessiné un rectangle de 55 pixels de haut dit la couleur à notre actif Lou et droits partage dans dissenteur. C' est ça. Comme un exercice pour cette leçon, vous devrez remplacer tous les éléments ont été importés dans ce gars cravate dans les écrans de droite . De cette façon, vous devrez gérer presque tous les écrans de l'application. Alors allez-y dans la leçon suivante, verra eu à exporter des éléments. Et nous utilisons également un tout nouveau pour écrire des spécifications et avoir une conversation amicale avec les développeurs . 12. Exporter et Specs: Hé, on a presque fini. Dans la première partie du cours, nous avons vu comment exporter vers l'extérieur afin que nous puissions partager les différents écrans de l'application que nous avons conçue. Depuis lors, nous avons créé des éléments personnalisés, donc nous allons maintenant voir comment les exporter. Commençons par la partie facile. Ouvrez votre fichier instagram ou celui de ce dossier Leçons. Si vous voulez être sûr d'être à la pointe des débats, étendons-nous notre guide de style ? Sélectionnez un élément. L' icône d'accueil, par exemple, Ne pas inclure le rectangle de chien en arrière-plan. Le développeur en aura besoin. Maintenant, cliquez sur Rendre Exportable. L' élément n'est pas prêt à être exporté. Lorsque vous exportez des éléments, vous devez toujours choisir le format PNG. C' est un format très polyvalent, et c'est le seul qui garde la transparence. Voyons maintenant quelque chose d'un peu plus compliqué. Résolution IOS APS peut s'exécuter sur plusieurs tailles d'écran. Regarde une dette. Ce document montre quelle est la taille de toutes les tailles réelles d'iPhone. Les dimensions sont exprimées en points et en pixels ferait une note de côté ici pour expliquer la différence entre les résolutions et les points et les pixels. Un pixel est la plus petite unité de mesure sur un écran. Les pixels sont de minuscules carrés qui font partie de l'écran, et si vous regardez de très près l'écran, vous pourrez les voir ainsi que les espaces qui les séparent. Point est une mesure indépendante de la Révolution. Le point peut être créé à partir d'un ou plusieurs pixels sur l'écran non rétine. Chaque point est composé d'un pixel. Dans le cas de l'affichage de la rétine, chaque point comme une haine de deux Inuit pixel de deux pixels, sorte qu'il fait de port pixel. Donc, il y a le même nombre hors point sur la rétine et sur un écran non rétine sous la même taille, mais pas le même nombre de pixels. Mais quand nous concevons, nous devons en tenir compte sur notre ordinateur. Les dimensions sont exprimées en pixels de la même taille, non en fonction de la taille variable. Donc, un point soulevé sera quatre fois plus grand qu'une religieuse, Regina Point. C' est pourquoi, si vous concevez un dollar avec l'intelligence off 40 pixels et la hauteur de 30 pixels pour l' iPhone trois, il devra redimensionner les vents à travers 80 pixels et le haut à 60 pixels. Si vous vouliez apparaître aussi grand sur l'iPhone quatre ou cinq et à 120 par 90 pour les derniers appareils. C' est un x deux x et trois X est la chose cool que vous pouvez remarquer est que même s'il y a différentes tailles, tous les iPhone X de l'iPhone pour avoir le même rapport et iPhone 41 être utilisé beaucoup plus longtemps, donc ne vous inquiétez pas pour l'instant, Concevoir à un X, comme nous l'avons fait avec nous tous, pour mettre à l'échelle facilement nos éléments une résolution différente lorsque nous les exportons, c'est une bonne habitude de garder si un jour vous rejoignez une grande entreprise fabriquant des ABS, il y a des chances que tous les abs sont en train de concevoir un X. Maintenant, cliquez sur le plus à côté du bouton d'exportation. Cela va créer une autre version de la même mon cône. Dans une autre résolution pour iPhone six plus, vous devez définir la taille à trois x. Regardez comment le suffixe se met à jour automatiquement. Si vous concevez pour les téléphones Android, vous trouverez toute la convention de dénomination sur cette page. Malheureusement, vous devez définir ceci pour chaque élément car kitsch ne vous offre pas les paramètres lorsque vous sélectionnez une autre icône, mais cela ne prend pas si longtemps à faire. Et nous n'avons pas autant d'icônes personnalisées. Nous vous recommandons vraiment deux savait comment exporter des éléments sur votre propre, mais la nouvelle application récemment, et il est assez impressionnant Il s'appelle Zeppelin que je dois. Il vise à faciliter la discussion entre les développeurs et les concepteurs, et il le fait vraiment bien. Zeppelin génère un guide de style non doublé et le maintient à jour afin que tout le monde travaille sur la même base. Si vous travaillez sur un seul projet, c'est gratuit. Alors téléchargeons cette application rapidement sur le bouton Démarrer et créez un compte. Maintenant, téléchargez l'APP, placez-le dans votre dossier d'applications ouvert. Oui, et cliquez sur Create First Project Select IOS et cliquez sur Create. Revenons à notre dossier d'évasion. Sélectionnez le tableau Home Art, cliquez sur Plug in Zeppelin et exportez hors-bord. Comme vous le voyez, le raccourci est venu sur E chiots tyrolienne et cliquez sur les importations pour votre première grue . Zeppelin vous demandera dans quelles dimensions vous faites. Notre signe. Sélectionnez un X car il est en train de devenir une nouvelle norme. Votre écran est important, et il est venu avec beaucoup d'informations dans ses bagages est, Jetons un coup d'oeil. Nous commencerons par créer cette bibliothèque West. Il suffit de cliquer sur cette icône pour d'autres Swatch. Vous êtes le développeur peut cliquer sur n'importe quel élément pour voir les dimensions, et les marges peuvent aller à l'actif. Touchez pour exporter l'élément dans chaque résolution à la fois. Et si vous voulez ajouter une note, suffit de cliquer à l'endroit où appuyer sur. Commenter où vous voulez dans l'écran, par exemple, pour le bouton d'options. Une fois que c'est arrêté, je peux partager ou reposer une photo. Toutes ces annotations sont votre voix dans le fichier. Il évite les malentendus entre vous et les autres membres de votre équipe en tant que frères et sœurs. Un excellent outil de collaboration. Nous vous encourageons vraiment à inviter vos coéquipiers, retourner dans le tableau de bord et cliquer sur inviter car notre up s'est vraiment amélioré dans la première partie du cours. Il est également temps de mettre à jour notre icône APP avec quelque chose de plus conforme à ces tendances, et c'est ce que nous ferons dans la prochaine leçon. 13. Les bases de l'application: Hey, maintenant que notre application est belle, mettons à jour notre icône aussi. Instagram a été initialement publié en 2010. À ce moment-là, le train était que j'étais cinq et plus vieux que Murphy, euh, effets. Tout le monde devait avoir l'air brillant et brillant et les icônes étaient censées être un peu comme si elles étaient faites de moins. Rappelez-vous, c'est la raison pour laquelle Instagram s'est terminé avec cette icône. Depuis lors, il est devenu une véritable partie de l'identité d'Instagram, donc je serais vraiment surpris si la refonte de son Mais nous ne savons jamais. Faisons semblant que nous sommes en train d'accrocher Instagram aujourd'hui et prenons un peu plus comme ce que bygones ressemble aujourd'hui va transformer cela en ceci. Ouvert le combat avec la première version de notre application. Vous pouvez le trouver dans ce dossier de leçon va créer une icône plate agréable et un peu plus complexe pour notre application. Dupliquez le Kaboul sur la droite, changez le nom de l'à bord en pieds d'icône, aussi. Débarrassez-vous des deux calques de texte, mais modifiez également la couleur d'arrière-plan. Pour sortir de la cote D B C 682 sur cratère haute dégrade cercle la taille du cercle du milieu sur la grille vérifier. Il devrait avoir un diamètre de 544 pixels. Centre il a bien tendance à la couleur à E. Huit d C. C. Sept. Maintenant, nous allons entendre un autre cercle avec un diamètre de 424 pixels siècle ainsi et change de couleur à 413 F 51 Créer 1/3 et même plus petit cercle pour présenter l'objectif de l'objectif. Il a besoin d'un truc. Donnez-lui le diamètre de 98 pixels changera son collier en blanc semi-transparent avec une capacité de 30%. Maintenant, nous allons regrouper les trois cercles et renommer l'objectif du groupe. Placez ce nouveau groupe sous le dossier de l'avidité et ajustez la position du cercle plus petit. Placez-le ici, assurez-vous qu'il touche le bord du cercle intérieur. C' est un autre effet simple pour le faire. L' icône, un peu plus agréable a conduit un carré de la taille du plus grand cercle, donc 544 par 844 centre et changer sa couleur en blanc avec une capacité de 10%. Mettez le menteur à l'intérieur. Le groupe d'objectifs est entré en mode victime en double-cliquant sur la forme ou en frappant. Entrez l'endroit où la forme est sélectionnée. Sélectionnez le coin inférieur droit et appuyez sur Entrée pour le supprimer. Nous avons maintenant un triangle droit. Enfin, sélectionnez le plus grand cercle dans les listes de pose, faites clic droit et utilise le masque. Ok, prenons soin de la ceinture brune. Maintenant. Créez un rectangle avec l'esprit plus grand que le côté de l'icône. Donc 1024 pixels et lui donnera la hauteur de la recherche de son côté. Donc 1034 divisé par trois, et nous allons l'arrondir. Changez la couleur en marron. 935 b. Trois b. Placez-le en haut et assurez-vous qu'il est derrière l'objectif. Ensuite, c'est les quatre couleurs que nous allons dessiner. Rectangle était d'une largeur de 60 pixels. Aliant était la ligne à gauche sur la grille. Dupliquer ou un picotement quatre fois et les mettre à côté de l'autre. Changez leurs couleurs aux codes X suivants F f 003 C F f d. Cinq doubles Ooh double o e 190 un pour un groupe O. E. A. E. A. Ces quatre rectangle avec le brun et appelé les couleurs de groupe ont finalement utilisé le rectangle brun comme un masque. Assurez-vous que son groupe est Bill of the Lens Group dans le panneau de gauche. Nous pouvons maintenant passer au viseur. Carré brut était côté de 180 pixels. Donnez-lui un collier, inscrivez-vous 14 et utilisez la même couleur que leur cercle intérieur de la lentille. Ensuite, mettez dans le groupe de couleurs, puis ne pas aligner verticalement avec le rectangle brun. Maintenant, vérifiez la marge en haut et déplacez-la vers la droite jusqu'à ce qu'elle ait la même marge en haut. Et à moins de créer un cercle avec un diamètre d'un rouge, 50 pixels ont changé le champ en blanc avec une capacité de 30%. Mettez-le dans le groupe de couleurs et centrez-le avec un carré. Il suffit de changer le nom du groupe en haut et de regrouper les quatre couleurs dans un groupe. Vous aurez couleurs froides a dessiné un autre cercle avec un diamètre de 40 pixels, a dit que la couleur est 30% Transparence blanc et le placer à peu près là. Mettez-le dans le groupe de baignoire et le groupe trois formes. Nous venons de ruiner un groupe appelé viseur va enfin ajouter une ombre à l'objectif. Commencez par créer un rectangle avec un côté largeur de diamètre de l'objectif, qui est de 544 pixels rotation maintien décalage vers la rotation concernée par incréments de 15 degrés et alignez-le avec l'objectif comme ça, voulez-vous ? Le dégradé sélectionne le champ de dégradé et modifie une révision du dégradé en plaçant ce point de collier ici et celui-ci du côté opposé change la couleur des deux premiers. Capacité noire. 10% et nous avons eu les deux dernières capacités blanches. 0 %. Enfin vraiment dans Liar pour l'ombre et le placer en dessous de la tête de groupe moins Zoom out. Ok, pas mal. Comme vous pouvez le voir, vous pouvez créer presque n'importe quoi en utilisant des formes simples et basiques. Transférez-les et combinez-les si vous voulez essayer différentes choses et les comparer. Il suffit de dupliquer le hors-bord avec l'icône et d'expérimenter. Par exemple, Voyons à quoi il ressemblerait si nous étions m se vanter. Dupliquez l'Abu avec l'icône. Nous venons de redessiner dans le nouveau contexte difficile à bord. Je ne pouvais pas vieillir mettre les couches dupliquées dans un groupe et le renommer M Bus Hide. Le groupe chercheur de gin de l'arrière-plan original en ajoutant une sensation de noir semi-transparent était une nécessité de 10% et cacher le groupe du MBA et redimensionner le bord de l'icône. Donc ça ressemblait à ça. Mettez l'ombre dans le groupe de braises Easy, non ? Ok, alors renommons ce tableau bizarre. Maintenant que nous avons un fantaisiste I. Cohn, exportons d'abord, allons dupliquer notre icône. Mettez-le à gauche et débarrassez-vous du bord que je pouvais. Pourquoi on fait ça ? Parce que vous devez télécharger des icônes de nos carrés, pas autour de lui carrés. Apple s'appliquera au masque avec les coins arrondis pour vous. Maintenant, nous allons créer un nouveau fichier avec toutes les tailles d'icônes. Il en aura besoin. Parce que sont tous les deux du fichier précédent dans votre nouveau fichier sur Let's Use un peu de plug in Magic. Tu te souviens de la prise comme un Naser ? Nous ne le laissons pas plus tôt dans ce cours. Ça va être vraiment utilisé pour l'instant. Je vous l'ai déjà dit qu'Apple demande une quantité incroyable de tailles d'icônes. Eh bien, sélectionnez votre carton clic sur la fiche A je peux, non plus. Et les voici, des formats plus anciens. Maintenant, il vous suffit de cliquer sur le bouton d'exportation et vous avez toutes vos icônes. C' est ça. Nous avons maintenant un Nikon que même l'équipe de conception derrière Instagram pourrait être. L' affaire est éteinte. Ok, maintenant votre tour d'expérimenter, Recréer les trois versions et également essayé de travailler sur une ou deux idées de votre propre. Il peut s'agir de petits ajustements, tailles de citron ou de couleurs ou de design entier. Qui aime voir ce que vous venez avec dans la prochaine vidéo créerait des captures d'écran APP Store aussi chic que notre icône. 14. Captures d'écran de l'App Store v2: Hé, on a presque fini. Maintenant que nous avons terminé la conception de notre application, montrons-la au monde correctement. Avant de télécharger votre application, un utilisateur potentiel devra gérer différents éléments marketing. Le nom de votre AB, la légende, le I Cone deux commentaires potentiels de description et les captures d'écran. Initialement, ils ont été créés pour afficher quelques captures d'écran de l'application, sorte que vous auriez une idée de ce que le haut ressemble. Mais avec tant de lacunes dans l'histoire, les gens ont commencé à utiliser l'écran comme des outils marketing puissants. Il est devenu un endroit pour expliquer quand vous vers le haut, est-ce que vous pouvez afficher la grande légende a été beaucoup d'impact montrer comment utiliser l'application de sorte à quel point votre concepteur est grand en utilisant des effets de fantaisie et ainsi de suite. Nous avons laissé tomber quelques exemples dans ce dossier de leçon, mais pour créer un message impactant, vous devez vous mettre à la place de vos utilisateurs. Et le bon point est que nous l'avons déjà fait avec nos histoires d'utilisateurs. Au lieu de simplement montrer, Screenshots de l'APP va intégrer l'écran appareil froid et mettre une légende au-dessus de lui pour dire ce que l'APP est pour quelque chose comme que nous avons quelques années leurs histoires pour raconter ce que seront les cinq principes . Et il y a cinq onglets. N' oubliez pas que dans ce dossier de leçon, vous trouverez les écrans de chaque étape. Nous pourrions concevoir la capture d'écran absolue à partir de zéro, mais encore une fois, la communauté de croquis a obtenu notre retour à Manto. Créé un très grand fichier qui vous aide à créer une capture d'écran cool en quelques minutes. Merci à lui, ouvrez le fichier générateur de captures d'écran de magasin APP dans ce dossier de leçon en haut Il y a un tutoriel sur la façon d'utiliser ce fichier, mais passons par le ensemble. Dans ce fichier. Tout est lié entre eux, sorte que vous devez travailler soigneusement dans d'autres et de le faire fonctionner. abord, importez chacun de votre écran dans la première rangée de tableaux. Commençons par la caméra. Quant à nous, c'est la caractéristique de base d'instagram. Cliquez sur l'onglet couleur du champ et remplacez l'image par la capture d'écran de l'appareil photo. Jetez un oeil ci-dessous. Les captures d'écran ont été réduites. Faites la même chose pour l'écran d'accueil tiré de la recherche, l'activité et enfin de profil. J' ai fait l'arrière-plan vers le haut et dit la couleur de remplissage au look bleu instagram ci-dessous. Ça commence à avoir l'air bien. Maintenant, modifions les légendes ouvertes. Fichier d'histoires utilisateur dans ce dossier de leçon. Les histoires d'utilisateurs sont les piliers de notre application. Ils disent aussi exactement avec l'abstinence, pour avoir plus d'impact, nous allons commencer chaque légende avec le verbe. Le 1er 1 sera pris, partagez de belles photos, puis voyez vos amis photos et moments. Adaptons-nous. Je veux voir l'image des autres personnes pour découvrir l'image des autres et va tourner. Je veux savoir sur l'activité des gens sur l'AB pour voir l'activité des gens. La légende du profil sera l'accès. Ce que les gens voient de vous. Copier en fonction de chaque légende dans les trois blocs de texte X afin de le faire fonctionner sur iPhone six plus petites majuscules, maintenant désactivé pour l'ombre portée qui ont l'air un peu vieux mode. C' est ça. Si vous préférez utiliser une autre couleur de l'iPhone, nous pouvons facilement choisir entre l'argent, or et le noir dans le menu des symboles. Maintenant que tout est réglé, cliquez sur Exporter Icône et créer un dossier pour exporter toutes vos captures d'écran droite efficace sont place peut maintenant briller sur le magasin APP. Dans la prochaine vidéo, nous allons voir comment nous pouvons le faire briller partout sur le Web 15. Vitrine des produits: Hey, notre application est maintenant magnifique. Voyons comment nous pouvons le montrer au monde dans les autres. Pour ce faire, nous allons placer notre application dans de vraies photos pour lui donner un peu de contexte et obtenir des images sympas. Vous pourriez avoir directement vos propres images, mais il y a quelques outils sympas pour le faire efficacement. Allez à Deng qui viennent avec trois extrémités sur ce site. Vous pouvez intégrer vos écrans dans un contexte différent. Il y a aussi un endroit frappé ce filet, mais leurs images sont un peu ennuyeux avec essentiellement des gens en costume. Trouvons un truc amical pour les hipsters. Celui-ci ira bien. Vite dessus. Tirez une capture d'écran de votre application. Si vous n'en avez pas, il y en a si vous voulez dans ce dossier de leçon et voilà. Vous pouvez enregistrer l'image sur votre bureau et commencer à créer vos kits de presse. Aussi. Maintenant, vous pouvez avoir besoin d'un site Web. Nous ne passerons pas trop de temps là-dessus car ce n'est pas le but du discours. Mais s'il y a une chose dont vous devriez vous souvenir, c'est que le seul but d'un site Web de sieste est de faire télécharger l'application. Il y a beaucoup d'outils pour faire des sites Web magnifiques, mais vous trouverez des modèles cool sur étonnamment, par exemple, sur la grippe. Enfin, disons quelques mots sur un démarré qui font une main de produit vraiment bon travail qui viennent un protecteur que vous pouvez découvrir tous les jours dans les nouveaux abdos et les produits de base sélectionnés par une grande communauté. En ce qui concerne les concepteurs, il existe une grande collection pour rassembler les meilleurs outils à utiliser. Vous reconnaissez quelques-uns que nous avons utilisé à cette adresse comme frontrunner. C' est un excellent moyen pour Dale. Le monde que vous existez pourrait être le premier endroit pour se détendre et voir les réactions des gens. Par exemple, les soumissions sont limitées par les utilisateurs sélectionnés, mais nous sommes autorisés à publier. N' hésitez pas à nous contacter lorsque votre application sera terminée et disponible et sera heureux de vous aider . Merci. Donc, en suivant ces cours dans la prochaine vidéo, nous allons faire un été, mais tout ce que nous avons vécu et aussi une petite surprise 16. Conclu: Hé, c'est ça. Félicitations. Tu l'as fait. Vous avez suivi toutes les leçons du discours. Nous espérons vraiment que vous avez apprécié. Votre projet final est de créer un personnalisé conçu pour trois écrans hommes de votre flux de fonctionnalités clés sur d'utiliser le modèle de graphique d'écran App Store pour mettre en valeur les écrans. Nous voulons également que vous conceviez une aversion à l'égard de votre icône APP en utilisant les techniques les plus avancées que vous avez apprises. N' hésitez pas à essayer de nouvelles choses pour libérer votre créativité. Alors téléchargez vos captures d'écran absolues sur ces belles vues icona. Étaient impatients de voir comment votre travail acharné a porté ses fruits. Alors c'est tout, les amis, merci beaucoup d'avoir suivi ce cours apprécierait vraiment si vous pouviez nous donner un avis indiquant à quel point vous aimez ça. Le film est un très important pour nous sur vraiment utile pour les étudiants de faire ce spectacle. Alors s'il vous plaît dire au monde ce que vous pensez que les petits cadeaux que vous trouverez dans ce dossier de leçon de trouver avec l'application instagram entièrement design um sur. Nous avons reconstruit tous les écrans et toutes les icônes, et nous sommes sûrs que c'est assez proche du feu sur lequel travaille l'équipe Instagram à Menlo Park, Californie. N' hésitez pas à votre frère et partagez ce fichier autant que vous le souhaitez. Nous espérons que vous continuerez à vous entraîner seul. Euh, on va travailler sur ton projet. Nous sommes là pour vous. Si vous voulez partager des choses avec nous, vraiment, nous vraiment, vous tiendrons au courant avec des mises à jour sur les choses cool que nous trouvons. N' oubliez pas de vérifier les classes et votre boîte de réception de temps en temps. Merci encore et amusez-vous.