Page 10 of 29

Windows 8.1

Windows 8.1Windows 8.1 va prochainement arriver sur vos petits écrans d’ordinateurs et de tablettes. Après avoir officiellement annoncé Windows 8.1, voici la vidéo officielle, qui se charge de nous livrer les principales nouveautés qui sont au programme de cette mise à jour de Windows :

Flat Design

C'est flat...design

Flat Design : Règles strictes et clairement établies, approche visuelle minimaliste parfois radicale ; réflexion globale sur le Web Design, partie intégrante d’un même mouvement comprenant le Responsive Design, volonté de bousculer les normes esthétiques imposées, au centre de quelques débats qui agite les acteurs concernés, etc. ; autant d’éléments qui pourraient permettre d’envisager le Flat Design comme l’expression d’une véritable intention artistique. Mais nous n’en sommes encore pas là…

ps : l’image d’intro du billet est un petit clin d’oeil à Say Fat, une boutique de tee-shirts appétissante…

Définition de Flat Design

Le Flat Design se caractérise par une approche visuelle minimaliste établie selon :

  • Une interface graphique y est essentiellement constituée d’aplats de couleurs
  • Dans sa forme la plus radicale : tout effet de dégradé, biseau, motif, texture ou volume sont définitivement écartés.
  • Si volume ou ombre il y a, ceux-ci sont représentés, selon ces mêmes spécificités : par de l’aplat.
  • Les formes simples (éléments graphiques et interactifs, icônes, interface globale) sont privilégiées
  • Les couleurs sont, le plus souvent, vives sur fond contrasté ; les couleurs primaires et secondaires étant largement privilégiées (teintes de bleus vifs, verts, jaunes, oranges, violets, notamment)
  • La palettes de couleurs est également plus étendues dans approche graphique (six à huit couleurs au lieu de trois dans la conception « classique »)
  • La structure des pages et la navigation, elles aussi, sont réduites à l’essentiel
  • En raison de cette simplification esthétique extrême, la typographie joue un rôle prépondérant et s’impose comme un élément graphique à part entière. Il en est de même pour la mise en page et les caractères de polices utilisés (« sans serif » sont préférés, à empattement variable). Le texte lui-même étant également réduit à l’essentiel

element flat design

Quelque infidélités ; le « presque flat »

Partant de ses fondements théoriques mais s’imposant une approche esthétique moins radicale, on constate des variations et divergences :

  • L’ajout (discret) de dégradés ou d’ombre portées
  • L’utilisation de textures
  • L’abandon de couleurs vives et saturées par l’ajout de blanc et de teintes globales d’orange, jaune ou bleu pour une esthétique rétro ; ou encore en privilégiant une palette de couleurs monochromatiques (dominante de bleu le plus souvent) accompagnées parfois d’une ou deux variations de couleurs (de cette variation, le vert est très populaire semble t-il).

La conception skeuomorphiste

Le Flat Design revendique, consciemment, une rupture totale à la conception skeuomorphisme. Ce terme consiste à donner à un objet virtuel l’apparence et tous les attributs d’un objet réel ; ceci, par l’emploi de texture (cuir, bois, papier), d’effets de transparence, de volume, etc. Tout l’inverse du minimalisme, donc.

icones flat design

Une approche esthétique apparue presque en même temps que les plus lointaines origines d’Internet (souvenez-vous : les background de site Internet avec des feuilles à petits carreaux maintenues par un trombone. #nostalgie..) pour atteindre son ultime (et bien plus subtile toutefois) aboutissement chez Apple et l’iconographie de ses applications mobiles ; ceci, dans un jeu de broderies ou de matières d’un réalisme parfois ahurissant (!). Hypothèse sociologique et anthropologique : l’illusion de la réalité rassure devant les manifestions de ce monde virtuel, étrange et lointain. Tout est affaire d’illusion, toujours, trop.. « La vie a besoin d’illusions, c’est-à-dire de non-vérités tenues pour des vérités. » (Friedrich Nietzsche).

Le signe de maturité du Web Design ? 

Bien plus que l’affirmation de principes esthétiques et conceptuels, le Flat Design entend surtout résoudre les questions de fonction. Un champ d’expérimentation et de réflexion (pour les projets les plus aboutis) au travers desquels la fonction prime définitivement sur la forme : en d’autres termes, faire que l’apparence d’un élément graphique découle uniquement de sa fonction et de ses interactions pour apporter une solution simplifiée et cohérente aux besoins des utilisateurs ; une expérience utilisateurs (UX) optimale.

Signup flat design

Peut-être pourrait-on voir dans cette approche une signe de maturité du Web Design ? Car le Flat Design permet, finalement, à l’instar du Responsive Design (qui est à considérer comme l’aspect technique d’un même mouvement), d’interroger des fondements mêmes de la discipline et ses véritables enjeux : les éléments d’interaction et leurs articulations au sein du dispositif, la hiérarchisation et de l’information et son appropriation par l’utilisateur, etc. (voir les ces quelques réflexions complémentaires, entre autres, abordées dans l’introduction et état des lieux du Responsive Design).

Une simplification du discours (dans le sens : la démarche du projet en elle-même), en somme ; entre individus (concepteurs et utilisateurs) responsables et pleinement conscients dans leur rapport à l’objet. A ce titre, Allan Grinshtein (de LayerVault) faisait récemment référence à l’idée de « conception honnête » et exprimait la nécessité pour le designers de s’affranchir des codes visant à représenter les attributs du monde réel dans leur démarche conceptuelle.

Un courant artistique ?

L’enjeu finalement n’est pas si différent de ce qui se joue dans cette bonne vieille dualité théorique qui a depuis toujours échauffé les esprits (dans le sens : alimenté les débats) en design comme en architecture (le « Form follows function » de Louis Sullivan comme devise du fonctionnalisme) par exemple. Ceci avant de poser la nécessité d’un retour à la forme ; parce que l’humain dans toute sa complexité, ses désirs et sa Volonté (au sens de Schopenhauer) est bien plus que le simple rapport à la fonction et au rationnel ! I Need Something More s’efforcent de nous répéter les Dafts Punk dans le magnifique Touch (Daft  Punk, c’est placé !).

Là, toutefois, n’est pas la question. Et si les évènements semblent se faire écho, tout ça s’inscrit inexorablement dans le sens de l’histoire.

Et l’histoire de l’Art (peinture, architecture, littérature, ou cinéma, notamment), d’ailleurs, en est une parfaite illustration ; chaque nouveau mouvement s’opposant, de façon souvent radicale, au précédent (celui devenu une norme, tellement bien installée, tranquillou bilou, qu’elle en devient mortifère..) : l’impressionnisme succédant à l’académisme ; la nouvelle vague au cinéma de studio, l’architecture moderne faisant « table rase » de l’ornementation.

Mobile Flat Design

Toutes ces ruptures entretiennent presque toujours un rapport particulier à la technique. Plus précisément, les innovations technologiques et évolutions sociales conduisent certains à repenser les acquis et les règles imposées : la photographie et la révolution industrielle voient apparaitre les premières expressions de ce qui sera nommé l’impressionnisme ; le béton, notamment, favorisera l’architecture moderne ; l’apparition de nouveaux appareils (caméra et magnétophone) permettra aux cinéastes de quitter les studios et d’inventer de nouvelles formes narratives, etc.

Flat Design = Responsive Design

Bref, pas si éloigné de ce que laisse entrevoir notre affaire : le Flat Design et le Responsive Design, l’expression d’un même mouvement devant de nouvelles contraintes (vitesse de chargement, contenu adapté aux différents supports et contextes, etc. Voir nos dossier sur le Responsive Design à ce propos) et les nouveaux enjeux de la mobilité.

En fait, on serait bien tenté de dire, en contrepoint du débat actuel, que nous sommes face à une rupture et l’émergence d’une véritable intention artistique (ne mâchons pas nos mots !) dans la courte histoire du Web Design mais déjà riche ; au regard de cet « espace-temps Internet » dans sa fulgurante accélération et des mutations technologiques auxquels il est soumis.

Principales difficultés de cette apparente simplicité

Rapidement, si l’intention première s’inscrit dans cette simplification de la forme (esthétique) et du discours, le Flat Design appelle à une approche conceptuelle bien plus complexe et exigeante qu’il n’y parait. Complexe dans la mesure où rien, aucun artifice, ne permet de détourner de la véritable fonction de chaque élément ; chacun d’eux (des règles générale de la typographie jusqu’au choix des couleurs) jouant un rôle prépondérant dans la conception et la compréhension du dispositif.

Conclusion

Ici, chez tuto.com, on aime bien le Flat Design ; on trouve ça très swag (d’ailleurs la prochaine version du site s’inspire du flat design, disons presque flat  - voir capture – et vous devriez voir fleurir très prochainement des tutoriels et formations consacrée au Flat Design) !…

flat design tuto.com

Une petite preview de la v3 de tuto.com en flat design

Mais peut-être, tout ceci est-il bien plus simple, anecdotique et fugace qu’on veut bien se l’avouer et comme le témoignage (pas totalement contradictoire..) de François Le Pichon nous inviter à le penser..

Témoignage de François Le Pichon (Steaw NY)

Le Flat Design est incontestablement la grosse tendance UI Design du moment. Plus qu’un pivot esthétique, je parle du passage du skeuomorphisme à l’aplat de couleur, c’est également une tendance en parfaite adéquation avec le contexte technique du moment. Ainsi le responsive, le cross platform, le hosting, le templating, … tout est plus « simple » en Flat Design. Après, graphiquement, on voit de très belles choses, colorées, mais parfois un peu trop plate pour le coup. C’est un mouvement en maturation, reste à espérer qu’un juste milieu entre simplification et appauvrissement soit vite trouvé.

Ressources :

Pour approfondir le sujet :

Raccourcis After Effects (mac et PC)

A la demande générale, voici un nouveau regroupement de raccourcis clavier. Non pas (encore) pour Illustrator, Indesign ou Lightroom mais pour After Effects ! Et oui, elle est comme ça, la vie ; imprévisible.
Même principe : de jolies couleurs pour un ravissement oculaire de chaque instant, un reproduction scrupuleuse d’un clavier en mode découpage, accompagnée de quelques rapides conseils d’utilisation, et une liste de Combo pour les plus agiles..
Deux documents en un, cette fois, puisqu’il suffira aux partisans et rationalistes PC de remplacer Cmd par Ctrl. Parce que la vie.. La Vie, elle est simple, aussi ; comme le rire d’un enfant ; comme de dire : « Maman, je t’aime » avec des fleurs.. Enjoy !

 

N.B. Pour télécharger l’image : Clic image pour agrandir -> Clic droit ou Ctrl + clic -> Enregistrer l’image sous…

 

Raccourcis Photoshop PC

<a target="_blank" title="Raccourcis After Effects PC et mac" href="http://fr.tuto.com/images/blog/raccourcisAe.jpg"><img src="http://fr.tuto.com/images/blog/raccourcisAe-min.jpg" height="434" width="600" alt="Raccourcis After Effects PC et mac" /></a>
<br>
<p>Raccourcis After Effects PC et mac par <a target="_blank" href="http://fr.tuto.com" title="TUTO . com : Tuto Photoshop, Flash, After Effects, Indesign"> Tuto.com</a></p>

 

Bamboo Loop, l’appli qui donne le sourire

Wacom Bamboo App

Bamboo Loop est le nom d’une application mobile gratuite signée Wacom. Cette application vous permet d’annoter à la main ou au stylet vos photos et de les envoyer directement depuis l’application à vos proches. Ces derniers pourront y répondre à leur tour, de manière tout aussi visuelle et unique. Le tout pouvant être partager sur Facebook, Tumblr etc.

  • La création d’un compte est nécessaire (via votre email ou Facebook Connect).
  • Plusieurs styles graphiques vous sont proposés pour créer votre premier « loop » (à noter qu’une galerie de styles payants est dispo pour venir compléter la collection ; comptez 1,79€ par pack additionnel).
mon test de bamboo loop

Mon premier « loop » :p

Pour le moment, l’application n’est présente que pour iOS, mais une version Android arrivera prochainement.

Bamboo Loop

Wacom n’en est pas à sa première app mobile. Bamboo Paper était déjà sorti il y a quelques temps déjà et comptabilise plus de 5 millions d’utilisateurs à ce jour.

Raccourcis Photoshop (mac et pc)

On s’est dit que ça vous ferait plaisir.. Un joli et joyeux regroupement, de ce qui nous semble être les raccourcis clavier Photoshop les plus importants. Un peu manuel d’utilisation, aussi, qui assume pleinement le rose ; cette couleur à travers laquelle vous allez, désormais, voir votre life !

De quoi gagner en efficacité, en confort d’utilisation et en dextérité. Une liste d’enchainements de touches, d’ailleurs, qui peut faire parfois penser à Tekken, dans toute sa rageuse précision ! Bien maîtrisé, plus de limite. La puissance à portée de doigts.. Tout pour que Photoshop devienne, plus qu’un simple outil, un prolongement naturel de votre esprit créatif ; que les contraintes techniques ne soient plus jamais une entrave..
Mac ou Pc ; à chacun sa came ! A vous maintenant de télécharger, conserver, imprimer, découper ou partagez… Bref, à vous de jouer.

 

N.B. Pour télécharger l’image : Clic image pour agrandir -> Clic droit ou Ctrl + clic -> Enregistrer l’image sous…

 

Raccourcis Photoshop Pc

Raccourcis Photoshop PC

<a target="_blank" title="Raccourcis Photoshop PC" href="http://fr.tuto.com/images/blog/raccourcisPs-PC.jpg"><img src="http://fr.tuto.com/images/blog/raccourcisPs-PC-min.jpg" height="434" width="600" alt="Raccourcis Photoshop PC" /></a>
<br>
<p>Raccourcis Photoshop PC par <a target="_blank" href="http://fr.tuto.com" title="TUTO . com : Tuto Photoshop, Flash, After Effects, Indesign"> Tuto.com</a></p>

 

Raccourcis Photoshop Mac

Raccourcis Photoshop mac

<a target="_blank" title="Raccourcis Photoshop Mac" href="http://fr.tuto.com/images/blog/raccourcisPs-mac.jpg"><img src="http://fr.tuto.com/images/blog/raccourcisPs-mac-min.jpg" height="434" width="600" alt="Raccourcis Photoshop Mac" />
</a>
<br>
<p>Raccourcis Photoshop Mac par <a target="_blank" href="http://fr.tuto.com" title="TUTO . com : Tuto Photoshop, Flash, After Effects, Indesign">Tuto.com</a></p>

 

The Real Life Models

 

L’artiste photographe italienne Flóra Borsi vient de publier une série intitulée « The Real Life Models » qui tente de répondre à la question suivante : « et si les modèles de peintures abstraites étaient de vraies personnes ? ». Le résultat (obtenu avec Photoshop) est assez surprenant :  real-life-model real-life-model real-life-model real-life-model real-life-model

PSD gratuit de Mike Harrison

mike harrison-psd

Aujourd’hui je vous propose de découvrir Mike Harrison, artiste londonien et participant à la collection Fotolia TEN. Vous pouvez en effet récupérer son PSD gratuit pendant 24h seulement ici. Pour aller plus loin, je vous laisse découvrir son interview

After Effects CC

After Effects CC

After Effects CC a également le droit à son lot de nouveautés :

  • CineWare : nous l’avions déjà abordé sur ce blog, le rapprochement entre Maxon (Cinema 4D) et Adobe voit enfin concrétemnt le jour avec After Effects CC. Les scènes C4D peuvent donc être directement utilisées comme métrage dans After Effects CC, sans devoir rendre la scène au préalable.
  • Amélioration du contour : une fonctionnalité de Photoshop qui débarque sus After Effects. Vous pouvez désormais, préserver les détails d’éléments complexes comme les cheveux. Cette fonctionnalité vous permettra d’améliorer vos incrustations.
  • VFX : l’amélioration de la stabilisation : l’outil de stabilisation a été amélioré. Vous pouvez maintenant sélectionner les objets à stabiliser, inverser une stabilisation…
  • Amélioration de l’outil de suivi de la caméra 3D : apparition d’un outil d’optimisation du suivi pour affiner les points de suivi.
  • Flou de mouvements des pixels : permet de donner du réalisme à vos scènes d’action.
  • Cinema 4D Lite : est désormais inclus avec After Effects CC !
  • Intégration avec Adobe Anywhere : pour travailler vos compositions vidéo de manière collaborative.

After Effects CC After Effects CC After Effects CC After Effects CC

Photoshop CC

Photoshop CC logo

Photoshop CC est le nom de la nouvelle version de Photoshop ! Oubliez Photoshop CS, Photoshop CS Extented, désormais une seule version : Photoshop CC !

Nouveautés de Photoshop CC :

  • Camera Shake Reduction (le fameux filtre anti-flou). Nous vous parlions déjà de ce filtre anti flou de Photoshop CC ici même.
  • Filtre Netteté Optimisée : le nouvel algo de netteté intelligente, analyse les images afin d’amplifier la clarté et réduire le bruit et les contours lumineux générés par l’effet netteté. Vous pouvez ainsi améliorer la netteté d’une image tout en gardant un look naturel.
  • Suréchantillonnage intelligent : vous pouvez désormais changer la résolution de votre image sans en affecter apparence. Vous conservez les détails et la netteté !
  • Toutes les fonctionnalités de Photoshop Extented : c’est à dire les fonctions 3D de Photoshop CS6 Extended.
  • Export d’une maquette WEB vers Edge Reflow : sympa et pratique pour travailler sur du Responsive Design.
  • Camera RAW 8 : qui dit nouveau Photoshop, dit nouveau Camera RAW !
  • Forme vectorielle avec coins arrondis : Photoshop est également utilisé dans le Webdesign. Photoshop CC vous permet donc de redimensionner, ré-éditer, les coins d’un rectangle vectoriel de manière indépendante. De plus si cette forme est prévue pour une utilisation sur le web, vous pouvez exporter son code CSS, depuis Photoshop.
  • Sélection de formes et de tracés multiples : sélectionnez plusieurs tracés, formes ou masques à la fois.
  • Les actions conditionnelles
  • Amélioration de la peinture 3D : 100 fois plus rapide qu’avant !

Photoshop CC sera dispo en juin, dans Creative Cloud !

 

Un Lightroom like bientôt sur iPad

Lightroom iPad

Une application dans l’esprit de Lightroom devrait prochainement débarquer sur iPad. C’est l’un des responsables produit Lightroom, Tom Hogarty, qui a révélé l’existence de cette application, en exclusivité, dans une émission de Scott Kelby. L’idée est d’offrir un compagnon de travail à Lightroom, pour répondre à un besoin de mobilité dans le workflow du métier de photographe.

Cette premier prototype permettrait de :

  • Retoucher des images au format RAW (exposition, clarté, ombres et lumières, balance des blancs, contraste, vibrance, teinte, netteté, réduction du bruit, luminance, teinte auto, recadrage et rotation)
  • Synchronisation de la retouche, entre l’Ipad et le desktop (via le Cloud d’Adobe)
  • La possibilité de zoomer pour vérifier la mise au point et le détail du cliché

D’autres fonctionnalités pourraient être au rendez-vous, notamment toute la gestion du tri (ce qui ferait du sens pour une application mobile). On imagine un peu le scénario :

vous êtes en séance de shooting extérieur. Sur le chemin du retour (dans le train ou l’avion) vous pouvez commencer à trier vos photos, à les classer et démarrer quelques retouches. Ces dernières sont synchronisées dans le cloud et, une fois arrivé devant votre poste de travail, vous pouvez démarrer les choses sérieuses.

L’iPad sera-t-il assez puissant pour effectuer des retouches sur des images RAW de plusieurs centaines de mégaoctets ? La réponse est « oui ». La future application utilisera le système de retouche Smart Preview, qui permet de travailler sur une version plus légère de l’image et d’appliquer l’ensemble des modifications sur le fichier d’origine.

Sans surprise, on peut d’ores et déjà penser que cette application fera partie intégrante de l’offre Creative Cloud d’Adobe. Est-ce que cette application sera révélée à Adobe Max, peut être pas… Suspens !

© 2014 Blog Tuto.com

Theme by Anders NorenUp ↑