Long Shadow Design : Tuto et Ressources

Nous évoquons souvent les tendances graphiques sur les réseaux sociaux où nous sommes présents (Facebook, Twitter ou encore Google+) et pour une fois, j’ai souhaité me pencher sur le Long Shadow Design. Véritable prolongement du Flat Design auquel tout le monde semble céder (Google ayant initié le pas, même Apple semble décider à s’y mettre), je vais profiter de ce billet pour vous montrer comment réaliser cet effet sous Illustrator et compléter avec différentes ressources.

Pour les amateurs de Photoshop, sachez qu’un script existe d’ores et déjà, nous y reviendrons plus bas.

[blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [divider type=”standard” text=”Go to top” full_width=”no” width=”1/1″ el_position=”first last”] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”]

TUTORIEL LONG SHADOW DESIGN SOUS ILLUSTRATOR

  • Dans un premier temps, je dessine mon rectangle avec fond de couleur et je récupère un logo (ou un texte, comme vous le souhaitez).

Long-Shadow-Design-01

  • Je duplique ensuite l’élément en maintenant Alt ET la touche Shift. Cela permettra d’effectuer un décalage contraint à 45°, valeur quasi standard dans le registre graphique du long shadow design.
  • Je vais ensuite sélectionner ma pomme du haut et la copier. Pour l’instant.

45degres

  • Je sélectionne ensuite mes deux pommes puis je me rends dans le menu supérieur “Objet” > “dégradé de formes” et “Options de dégradés“. Je choisis ensuite “étapes” et j’augmente le chiffre pour atteindre une transition continue entre les deux formes. Ici, 200 feront l’affaire.

degradedeformes
200etapes

  • Une fois ceci fait, je retourne dans le menu “Objet” > “dégradé de formes” et cette fois, je demande à “décomposer“. La forme étant dynamique, il nous sera impossible de la couper tout à l’heure pour qu’elle ne dépasse pas du cadre. Mais pour la couper, il faudra achever cela avec une dernière étape, celle de la fusion via la palette “Pathfinder” (dans le menu supérieur “fenêtre)”. Le logo étant décomposé en 2 parties principales, le logiciel l’assimile pour l’instant en tant que formes différentes alors que nous avons besoin d’UNE forme unique pour la longue ombre portée.

fusion

  • Je sélectionne le dégradé de formes que je vais passer en noir depuis le nuancier et je vais baisser l’opacité à 10% dans la barre de contrôle.

fusion

  • Je vais ensuite coller la pomme qui était en suspens depuis la deuxième étape. Mais détail important, je vais la “copier sur place” depuis le clic droit ou depuis le menu “édition“.

collersurplace

  • Maintenant, je vais prendre mon outil flèche blanche, je vais sélectionner l’ombre à 10% et le bloc de fond et demander une division dans la palette “Pathfinder“.

collersurplace

  • Je n’ai alors plus qu’à sélectionner la partie d’ombre en dehors du bloc (toujours en flèche blanche) et supprimer celui-ci. Votre effet de long shadow est terminé.

collersurplace

RESSOURCES LONG SHADOW DESIGN – PHOTOSHOP

  • Pour les utilisateurs Photoshop, voici un script gratuit à récupérer sur Deviantart. À mon sens, le résultat a besoin d’être un peau peaufiné mais le script automatisera cette tâche avec un certain succès.
  • photoshop-long-shadow-design

  • Toujours pour les utilisateurs Photoshop, voici un fichier gratuit dans lequel vous pourrez copier/coller vos éléments, le logiciel se chargeant ensuite d’adapter les ombres à l’élément soumis.
  • objetdynamique

    RESSOURCES LONG SHADOW DESIGN – CSS3

    • Pour les codeurs, voici un éditeur qui vous permettra d’appliquer un effet de Long Shadow en CSS3 sur des Google Fonts. Pratique !
    • Google-CSS

    RESSOURCES LONG SHADOW DESIGN – FREEBIES

    C’est tout pour aujourd’hui mais si vous avez d’autres fichiers à conseiller, n’hésitez pas ! 😉

    Commentaires

    • Stefane G
      15 mai 2014

      J’ai la même méthode sous illustrator.
      J’ai essayé maintes fois de trouver un script ou un plug, mais sans réussite !
      Je suis contraint à me taper les ombres longues à la main, sans cesse.
      Illustrator est un peu limité à ce niveau.

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    UNE QUESTION ? On vous répond ! Vous pouvez aussi appeler au 03 20 54 09 06 si vous n'êtes pas timide du téléphone. ;-)
    Emmanuel vous répondra sous 24h.
    Envoyer
    X