Illustrations en style plat. Flat Design - des origines à nos jours. Le résultat du dessin d'une illustration dans le style « Flat »
Pour site Web.
Aujourd'hui, nous allons examiner la création d'illustrations pour un site Web en style Flat.
Tout d’abord, ouvrez Photoshop et créez un document en spécifiant les dimensions suivantes :
Créez un nouveau calque et remplissez-le avec la couleur #81b0d5 :
Créons un effet de ciel bleu. Pour cela, créez un nouveau calque et à l'aide d'un pinceau blanc doux avec une opacité de 25%, dessinez une tache à peine perceptible d'assez grande taille au bas du rectangle :
Prenons position pour les appareils. Pour ce faire, créez deux rectangles d'épaisseurs différentes et remplissez celui du haut avec #6982A1 et celui du bas avec #7591AE :
Dessinons maintenant les nuages. Pour ce faire, créez un rectangle aux coins arrondis et deux cercles avec l'outil Ellipse. Créons le deuxième nuage en copiant le premier, en le reflétant et en réduisant l'échelle :
Convertissons nos nuages en objets intelligents et appliquons-leur les styles suivants :
L'arrière-plan de nos appareils est prêt, commençons maintenant à créer les objets d'illustration eux-mêmes.
Tout d’abord, dessinons un ordinateur portable plat. Dessinons la base de l'ordinateur portable à l'aide de l'outil Rectangle. Largeur de base 230 px, hauteur – 10 :
Remplissez la base avec la couleur #8EA1AB. Rendons le bas de la base arrondi. Pour cela, utilisez l'outil perspective pour rapprocher les points inférieurs du rectangle :
Et avec l'outil Plume en maintenant enfoncé le bouton Alt, ajoutez des arrondis :
Nous ferons la même chose de l'autre côté de la base.
Créons un écran d'ordinateur portable. Faisons-en un rectangle aux coins arrondis. Le rayon d'arrondi est d'environ 7 pixels. Remplissez la forme avec la couleur #71838B :
Veuillez noter que la largeur et la hauteur de l'écran de l'ordinateur portable doivent correspondre à la taille HD afin que l'image ne paraisse pas trop caricaturale. Autrement dit, les proportions des appareils réels doivent être respectées.
Un autre point important est que l’écran doit être plus étroit que la base. Comme il est plus éloigné, selon les règles de perspective, il devrait être plus petit.
Ajoutons une petite encoche à la base. Vous pouvez simplement copier la base, la réduire et la peindre avec une couleur plus claire :
En général, le style Flat est un style très simplifié de dessin d’illustrations et d’icônes. Mais les principaux étaient ceux qui donnaient aux objets une forme reconnaissable - il devrait y en avoir.
Ajoutons un écran et un point culminant de la webcam. Puisque l’écran de l’ordinateur portable brille, il serait logique de le rendre d’un blanc pur. Nous respectons les proportions.
Note. Les éléments d’une illustration plate ne doivent pas être flous. Pour ce faire, on agrandit chaque élément et on l'ajuste avec l'outil « Echelle » :
À l'aide des outils « Rectangle » et « Texte », remplissez l'écran de graphiques et de texte multicolores :
Créons un groupe de calques et envoyons-y tous les détails de l'ordinateur portable.
Créons un autre groupe de calques et plaçons-le sous le groupe d'ordinateurs portables. Commençons par dessiner le moniteur.
De la même manière que dans la première illustration - un ordinateur portable, nous allons créer un écran aux coins arrondis. Remplissez le cadre du moniteur avec la couleur #8EA1AB.
N'oubliez pas les proportions. Si vous ne connaissez pas les proportions des appareils, il est préférable d’en télécharger des photos sur Internet et de les mesurer avec une règle. Par exemple, il existe une bonne ligne mySize pour Windows.
N'oubliez pas également de « traiter » les alias en les mettant à l'échelle :
Ajoutons une sorte de logo ou de bouton au bas du cadre du moniteur et dessinons un support. Nous étirons le support du stand en un petit triangle en transformant la perspective. Couleur du support et logo : #71838E, la couleur de la base du support est la même que celle de la base de l'ordinateur portable - #8EA1AB :
Alignez les éléments au centre en sélectionnant le cadre par rapport auquel on souhaite appliquer l'alignement et l'élément lui-même :
En haut à gauche, dessinez un carré sur le moniteur et écrivez un texte aléatoire illisible, comme nous l'avons fait dans l'écran de la première illustration :
Pour cette illustration, nous utilisons n’importe quel fichier . Vous pouvez trouver des polices compactées sur le site fonts4web.ru en sélectionnant la catégorie «Condensé».
Au bas de l'illustration du moniteur, ajoutez 6 carrés multicolores mesurant 10 x 10. Les couleurs des carrés correspondront aux couleurs des points du diagramme - #728CB8, #FF7285, #F1B23A, #728CB8, # 59BBFF et #CFC8CC :
Regroupons les carrés et alignons-les au centre par rapport à l'illustration du moniteur.
A l'aide de l'outil Ellipse, tracez plusieurs cercles dispersés aléatoirement autour du graphique de la couleur correspondante. Tracez un cercle blanc à l’intérieur de chaque point du graphique. Les couleurs de chaque point peuvent être tirées des carrés :
Sous tous les points, créez un calque et tracez une courbe reliant les centres de tous les points avec l'outil « Plume », après avoir sélectionné au préalable le mode plume – « Contour » :
Ensuite, dans le menu contextuel, en cliquant avec le bouton droit de la souris, sélectionnez « Contour du trait ». Réglez l'outil sur « Pinceau ».
Options de pinceau :
Opacité du pinceau – 100 %.
Appliquez la couleur #5E7BAC à la forme obtenue :
Dessinons une loupe qui agrandira le deuxième nœud du diagramme. Pour ce faire, créez un nouveau cercle et remplissez-le avec la couleur #E7EEF8. Ajoutez un trait de 3 px au cercle, couleur #CFC8CC :
À l'aide de l'outil Rectangle arrondi, dessinez une poignée de loupe allongée en utilisant la couleur # 74838E et placez-la selon un angle :
Maintenant, à l'intérieur de la loupe, dans un nouveau groupe de calques, nous allons dessiner un nœud agrandi avec des rectangles et des cercles. Pour vous assurer que le nœud agrandi et les lignes de connexion ne dépassent pas les limites de la loupe, pixellisez le groupe avec le nœud agrandi et créez un masque d'écrêtage :
En conséquence, nous devrions obtenir un moniteur comme celui-ci :
Dessinons une illustration d'un iPad. N'oubliez pas les proportions, la webcam et le bouton en bas de l'appareil. Le cadre est de la même couleur que le cadre de l'ordinateur portable. Nous pouvons copier la webcam et le bouton de l'ordinateur portable et du moniteur. Couleur du bouton #889BA3 :
Copions les 3 premiers carrés du moniteur et collons-les au bas de l'iPad. Ci-dessous, nous écrirons un texte aléatoire en gris clair :
Dessinons un diagramme circulaire multicolore :
Un tel diagramme peut être dessiné à l'aide de l'outil Ellipse. Nous réalisons des sections du diagramme en copiant le cercle et en coupant le contour. Pour découper le contour, vous pouvez pixelliser l'ellipse et découper ce qui n'est pas nécessaire avec l'outil « Lasso rectiligne ».
La dernière étape consiste à dessiner une illustration iPhone dans laquelle placer le contenu. Nous dessinons le contenu en utilisant des formes primitives – « Ellipse » et « Rectangle » :
Le fond de notre illustration peut être rendu « Bruyant ». Pour cela, sélectionnez l'arrière-plan, allez dans le menu « Filtre > Ajouter du bruit » et définissez les paramètres suivants :
Notre illustration est prête. Merci de votre attention et bonne chance à tous !
Salut tout le monde!
Aujourd'hui, nous allons examiner la création d'illustrations pour un site Web en style Flat.
Tout d’abord, ouvrez Photoshop et créez un document en spécifiant les dimensions suivantes :
Créez un nouveau calque et remplissez-le avec la couleur #81b0d5 :
Créons un effet de ciel bleu. Pour cela, créez un nouveau calque et à l'aide d'un pinceau blanc doux avec une opacité de 25%, dessinez une tache à peine perceptible d'assez grande taille au bas du rectangle :
Prenons position pour les appareils. Pour ce faire, créez deux rectangles d'épaisseurs différentes et remplissez celui du haut avec #6982A1 et celui du bas avec #7591AE :
Dessinons maintenant les nuages. Pour ce faire, créez un rectangle aux coins arrondis et deux cercles avec l'outil Ellipse. Créons le deuxième nuage en copiant le premier, en le reflétant et en réduisant l'échelle :
Convertissons nos nuages en objets intelligents et appliquons-leur les styles suivants :
L'arrière-plan de nos appareils est prêt, commençons maintenant à créer les objets d'illustration eux-mêmes.
Tout d’abord, dessinons un ordinateur portable plat. Dessinons la base de l'ordinateur portable à l'aide de l'outil Rectangle. Largeur de base 230 px, hauteur – 10 :
Remplissez la base avec la couleur #8EA1AB. Rendons le bas de la base arrondi. Pour cela, utilisez l'outil perspective pour rapprocher les points inférieurs du rectangle :
Et avec l'outil Plume en maintenant enfoncé le bouton Alt, ajoutez des arrondis :
Nous ferons la même chose de l'autre côté de la base.
Créons un écran d'ordinateur portable. Faisons-en un rectangle aux coins arrondis. Le rayon d'arrondi est d'environ 7 pixels. Remplissez la forme avec la couleur #71838B :
Veuillez noter que la largeur et la hauteur de l'écran de l'ordinateur portable doivent correspondre à la taille HD afin que l'image ne paraisse pas trop caricaturale. Autrement dit, les proportions des appareils réels doivent être respectées.
Un autre point important est que l’écran doit être plus étroit que la base. Comme il est plus éloigné, selon les règles de perspective, il devrait être plus petit.
Ajoutons une petite encoche à la base. Vous pouvez simplement copier la base, la réduire et la peindre avec une couleur plus claire :
En général, le style Flat est un style très simplifié de dessin d’illustrations et d’icônes. Mais les principaux étaient ceux qui donnaient aux objets une forme reconnaissable - il devrait y en avoir.
Ajoutons un écran et un point culminant de la webcam. Puisque l’écran de l’ordinateur portable brille, il serait logique de le rendre d’un blanc pur. Nous respectons les proportions.
Note. Les éléments d’une illustration plate ne doivent pas être flous. Pour ce faire, on agrandit chaque élément et on l'ajuste avec l'outil « Echelle » :
À l'aide des outils « Rectangle » et « Texte », remplissez l'écran de graphiques et de texte multicolores :
Créons un groupe de calques et envoyons-y tous les détails de l'ordinateur portable.
Créons un autre groupe de calques et plaçons-le sous le groupe d'ordinateurs portables. Commençons par dessiner le moniteur.
De la même manière que dans la première illustration - un ordinateur portable, nous allons créer un écran aux coins arrondis. Remplissez le cadre du moniteur avec la couleur #8EA1AB.
N'oubliez pas les proportions. Si vous ne connaissez pas les proportions des appareils, il est préférable d’en télécharger des photos sur Internet et de les mesurer avec une règle. Par exemple, il existe une bonne ligne mySize pour Windows.
N'oubliez pas également de « traiter » les alias en les mettant à l'échelle :
Ajoutons une sorte de logo ou de bouton au bas du cadre du moniteur et dessinons un support. Nous étirons le support du stand en un petit triangle en transformant la perspective. Couleur du support et logo : #71838E, la couleur de la base du support est la même que celle de la base de l'ordinateur portable - #8EA1AB :
Alignez les éléments au centre en sélectionnant le cadre par rapport auquel on souhaite appliquer l'alignement et l'élément lui-même :
En haut à gauche, dessinez un carré sur le moniteur et écrivez un texte aléatoire illisible, comme nous l'avons fait dans l'écran de la première illustration :
Pour cette illustration, nous utilisons n’importe quelle police condensée.
Au bas de l'illustration du moniteur, ajoutez 6 carrés multicolores mesurant 10 x 10. Les couleurs des carrés correspondront aux couleurs des points du diagramme - #728CB8, #FF7285, #F1B23A, #728CB8, # 59BBFF et #CFC8CC :
Regroupons les carrés et alignons-les au centre par rapport à l'illustration du moniteur.
A l'aide de l'outil Ellipse, tracez plusieurs cercles dispersés aléatoirement autour du graphique de la couleur correspondante. Tracez un cercle blanc à l’intérieur de chaque point du graphique. Les couleurs de chaque point peuvent être tirées des carrés :
Sous tous les points, créez un calque et tracez une courbe reliant les centres de tous les points avec l'outil « Plume », après avoir sélectionné au préalable le mode plume – « Contour » :
Opacité du pinceau – 100 %.
Appliquez la couleur #5E7BAC à la forme obtenue :
Dessinons une loupe qui agrandira le deuxième nœud du diagramme. Pour ce faire, créez un nouveau cercle et remplissez-le avec la couleur #E7EEF8. Ajoutez un trait de 3 px au cercle, couleur #CFC8CC :
À l'aide de l'outil Rectangle arrondi, dessinez une poignée de loupe allongée en utilisant la couleur # 74838E et placez-la selon un angle :
Maintenant, à l'intérieur de la loupe, dans un nouveau groupe de calques, nous allons dessiner un nœud agrandi avec des rectangles et des cercles. Pour vous assurer que le nœud agrandi et les lignes de connexion ne dépassent pas les limites de la loupe, pixellisez le groupe avec le nœud agrandi et créez un masque d'écrêtage :
En conséquence, nous devrions obtenir un moniteur comme celui-ci :
Dessinons une illustration d'un iPad. N'oubliez pas les proportions, la webcam et le bouton en bas de l'appareil. Le cadre est de la même couleur que le cadre de l'ordinateur portable. Nous pouvons copier la webcam et le bouton de l'ordinateur portable et du moniteur. Couleur du bouton #889BA3 :
Copions les 3 premiers carrés du moniteur et collons-les au bas de l'iPad. Ci-dessous, nous écrirons un texte aléatoire en gris clair :
Dessinons un diagramme circulaire multicolore :
Un tel diagramme peut être dessiné à l'aide de l'outil Ellipse. Nous réalisons des sections du diagramme en copiant le cercle et en coupant le contour. Pour découper le contour, vous pouvez pixelliser l'ellipse et découper ce qui n'est pas nécessaire avec l'outil « Lasso rectiligne ».
La dernière étape consiste à dessiner une illustration iPhone dans laquelle placer le contenu. Nous dessinons le contenu en utilisant des formes primitives – « Ellipse » et « Rectangle » :
Le fond de notre illustration peut être rendu « Bruyant ». Pour cela, sélectionnez l'arrière-plan, allez dans le menu « Filtre > Ajouter du bruit » et définissez les paramètres suivants :
Notre illustration est prête. Merci de votre attention et bonne chance à tous !
Le résultat du dessin d'une illustration dans le style « Flat » :
Le design plat a commencé à se développer et à être mis en œuvre activement en 2010 et a remplacé le skeuomorphisme détaillé et tangible avec ses ombres, ses reflets et ses textures.
Le design plat s'est opposé aux méthodes de rendu « réel » des objets au profit de solutions plus simplifiées et esthétiquement simples.
Le skeuomorphisme est un objet ou un élément de sa conception réalisé comme une imitation d'un autre objet ou matériau. Cette direction du design s’efforce d’incarner l’apparence réelle des objets en utilisant des textures, des ombres et des dégradés réalistes.
Voici quelques exemples de skeuomorphisme qu'Apple développait activement à l'époque.
Le design plat s'inspire de trois mouvements artistiques : le minimalisme, le Bauhaus et le style typographique international (également connu sous le nom de style suisse). Et le premier produit brillant dans le style design plat était l'interface Métro depuis les fenêtres.
Il y avait une typographie contrastée, des éléments plats et des couleurs vives. Peu de temps après, le flat design a pénétré l’illustration et constitue aujourd’hui une tendance importante et puissante, y compris en stock.
En fait, dessiner et concevoir dans un style plat n’est pas aussi simple qu’il y paraît, et plusieurs principes fondamentaux jouent ici un rôle important.
- Pas d'effets inutiles. Ombres, reflets, textures : tout cela manque dans le design plat. Il décrit uniquement les contours d'un objet réel et utilise la visualisation bidimensionnelle des objets.
- Simplicité des éléments. L'utilisation de formes simples et de contours clairs souligne la légèreté du design. Les éléments doivent stimuler l’envie d’interagir avec l’objet : appuyer, toucher, toucher. La simplicité des éléments ne signifie pas la simplicité de leur conception, mais seulement la simplicité des formes et des contours. Les formulaires simples sont intuitifs pour l’utilisateur et améliorent la convivialité.
- Travail minutieux avec les polices. Ils doivent être contrastés et compléter le design existant. Les polices peuvent être complexes et inhabituelles, mais compréhensibles pour l'utilisateur.
- Couleurs vives. La couleur, comme la police, est un élément important du design plat. La plupart des palettes de couleurs de conception plate sont basées sur 2 à 3 couleurs primaires, mais il existe également des exemples de couleurs plus variées. Le design plat utilise des couleurs nettes et lumineuses, sans transitions ni dégradés inutiles.
- Minimalisme. Dans le design plat, les « cloches et sifflets » inutiles et les approches complexes de visualisation des éléments doivent être évitées.
Au lieu d'une révolution, il y a eu une évolution et maintenant le plat dans ce style évolué prend de l'ampleur. Voici quelques exemples réussis d'appartements d'aujourd'hui. 
Personnellement, j'aime le style flat pour son minimalisme et le fait qu'il permet de se concentrer sur la qualité, sans se cacher derrière des reflets et des reflets comme un emballage de bonbon. Pour la conception Web, le plat est bon pour sa flexibilité et la possibilité d'une élaboration plus approfondie des interactions. Pour les illustrations - simplicité et fraîcheur relatives.