Skip to the content
Blog Tuto.com

Le blog de tuto.com

Show menu Hide menu

La plateforme de cours en ligne qui booste vos compétences numériques 🤩
Tous les tutos gratuits
Catégories
  • Actu & Nouveautés
  • Annonces
  • Conseils & Astuces Logiciels
  • Conseils Formations
  • Dossier
  • Employabilité
  • Freelancing
  • Interviews
  • Photographie
  • Programmation
  • Ressources gratuites
    • 3D
    • Bureautique
    • Code
    • Graphisme
    • Inspiration
    • Photo
    • Typographie
    • Vidéo
  • Actu & Nouveautés
  • Annonces
  • Conseils & Astuces Logiciels
  • Conseils Formations
  • Dossier
  • Employabilité
  • Freelancing
  • Interviews
  • Photographie
  • Programmation
  • Ressources gratuites
    • 3D
    • Bureautique
    • Code
    • Graphisme
    • Inspiration
    • Photo
    • Typographie
    • Vidéo

Recevez automatiquement nos superbes articles par email :

le champ email est requis !

non, merci

voir notre politique de protection des données

D’autres articles pour vous
  • Le retour d'Isabelle après sa formation suivie en Digital Painting
    Le retour d'Isabelle après sa formation suivie en…
  • Redonner vie à un rêve d’enfant grâce au digital painting : le portrait de Nicolas
    Redonner vie à un rêve d’enfant grâce au digital…
  • Du Print au Code : Audrey Soler et son magnifique parcours en développement Web
    Du Print au Code : Audrey Soler et son magnifique…
Derniers articles
  • 10 kits d’identité visuelle gratuits pour booster l’image de votre marque
  • Se former en ligne à Illustrator : Sandy partage son expérience
  • 11 Presets Lightroom gratuits pour sublimer vos photos macro
  • 21 prompts ChatGPT efficaces pour Community Managers (avec bonus formations)
  • 7 plugins Notion gratuits pour vos projets

Long Shadow Design

12 juillet 2013 / Jean-Charles

LongShadow

Tendance et conversation

C’est incroyable ; à peine une tendance apparait, le temps de quelques échauffourées tout en exaltations contrastées (de cette volonté de participer, en toute circonstance, à la grande conservation du monde ; comme nous !), que celle-ci est aussitôt remplacées par la suivante. Décidément rien ne résiste au cours inexorable du web ! Et à son étonnante capacité de (re)production. Car, d’emblée cette pensée nous saisie d’effroi ; si tout est tendance, c’est que plus rien ne l’est vraiment… Non ?

Et déjà un nouveau débat s’engage sur cette question : le Flat Design avec des Long Shadow est-il toujours du Flat Design ? Ça promet !… Bref.

Prolongement esthétique

Le Long Shadow Design emprunte très largement ses spécificités au Flat Design (lui-même quasi conséquence du Responsive Design) autant qu’il en prolonge l’intention initiale, dont le minimaliste esthétique, parfois radical, pouvait trouver rapidement ces limites.

Le Long Shadow Design propose donc de ramener volume et profondeur à un Flat Design qui, d’abord, s’en était totalement dépouillé. Ceci, en allongeant démesurément l’ombre d’un objet graphique ; cette ombre semblant ne trouver de limite qu’au travers des éléments de la page dans lesquels elle s’inscrit.

long-shadow-3

long-shadow-2

long-shadow-1

Orthodoxie

Le Long Shadow Design repose, tout autant que le Flat Design, sur des règles esthétiques strictes :

  • L’ombre est représentée le plus souvent en aplats de couleurs
  • La projection de l’ombre, quant à elle, correspond à au moins 2,5 fois la diagonale de l’objet, depuis lequel elle s’étire
  • L’orientation de cette projection s’effectue selon un angle de 45 degrés. Vers la droite, de préférence !

long-shadow-6

En gros, ça rigole pas. Même si on constate déjà, parmi les graphistes les plus dissidents, l’emploi de dégradé ou l’ajout d’une nuance de couleurs en rapport avec la teinte de l’objet. Certains choisissent même de l’orienter vers la gauche. Les fous !
Dans tous les cas, ces caractéristiques tendent à faire de cette ombre exacerbée, au-delà de sa fonction première (et secondaire..), un élément de design à part entière, particulièrement expressif. Tout baigné qu’il est par la lumière déclinante..

long-shadow-7

long-shadow-4

Le charme expressionniste

Aussi, le Long Shadow Design s’applique essentiellement sur des logo, icônes et boutons de l’interface. Et nombreux, parmi la grande communauté du webdesign, sont déjà sur l’affaire.
Autant dire que rien n’épargne à cette nouvelle tendance : logo de grandes marques, Google, Twitter, Facebook, icônes Apple, Superman, etc. Comme un grand ravalement de façade…

(Re)bref, tendance ou pas tendance, le Long Shadow Design, ça ne manque pas de charme, comme aurait pu dire ma grande tante.
Nous, ici, chez Tuto, on dit qu’on trouve ça swag (oui, comme le Flat Design..) ! Question d’époque.
Ressources :

Tuto Long Shadow avec Photoshop ET Illustrator

Générateur de Long Shadow, en format psd et dans les règles (!) : http://graphicburger.com/long-shadow-generator/

Long Shadow en CSS3 : http://codepen.io/awesomephant/pen/mAxHz

Générateur visuel de code CSS3: http://sandbox.juan-i.com/longshadows/ (Merci bpdesign !).

Extension Photoshop Long Shadow (CS6 et CC) : http://lab.rayps.com/lsg/

(1185)

Categories: Actu & Nouveautés

Tags: design, Flat Design, icones, logo, Long shadow design, ombre, responsive design

« PSD gratuit : Alexey Samsonov Dragon Ball : 25 rendus ZBrush »

1 Comment

  1. bpdesign

    12 juillet 2013 at 22 h 05 min

    hello voici une autre source sympa : http://sandbox.juan-i.com/longshadows/

1 Pingback

  1. Pingback: (Anthony) : Le long shadow dans le Flat Design | We Wild Web
Liens utiles
  • Formations 3D
  • Formations Certifiantes
  • Formations Graphisme & Print
  • Formations Photographie & Retouche
  • Tuto.com
  • Tutos Illustrator
  • Tutos Photoshop
  • Tutos Procreate
Nous suivre
  • Facebook
  • Instagram
  • Linkedin
  • Twitter

© 2025 Blog Tuto.com

Up ↑

Inscrivez-vous à notre newsletter !

Recevez automatiquement nos superbes articles par email :

le champ email est requis !

non, merci

voir notre politique de protection des données

voir notre politique de protection des données

Inscription validée, merci !

[Cette fenêtre va se fermer automatiquement]