Une animation Flash a visiter. Juste pour rire!
Pourrez-vous arrêter la chute?
Une animation Flash a visiter. Juste pour rire!
Pourrez-vous arrêter la chute?
Créateurs, concepteurs, animateurs quand votre création vous échappe et sort du cadre, vous perdez le contrôle de l’image. C’est ce que raconte cette superbe animation.
Elle aurait pu être créée dans nos studios. Nos formations permettent de créer ce type de réalisation.
Ne boudez pas votre plaisir, venez voir ce site et découvrez nos cursus diplômants
Les détails sur la prochaine Creative Suite 6 dévoilés la semaine dernière par AppleInsider seraient légitimes selon diverses sources du site. Une série de descriptifs des applications de la suite avait été obtenue, extraite apparemment d’un sondage utilisateurs (lire Les contours de la CS6 se dessinent).
AppleInsider livre d’autres précisions sur quatre composants encore inédits. Maestro désigne un système en ligne chez Adobe pour l’archivage, l’échange, la synchronisation et la révision de documents entre plusieurs utilisateurs. Cet espace de stockage dans le nuage, donné à 100 Go, sera également accessible depuis une tablette pour travailler sur ces documents avec une application de type Adobe Idea (gratuit). Maestro pourra héberger toutes sortes de documents, audio et vidéo compris, avec une fonction de conversion (en PDF probablement) des fichiers de la CS que l’on souhaite partager.
On se souviendra que le responsable produit de Photoshop, John Nack a été chargé de piloter aussi le développement de logiciels graphiques pour la tablette d’Apple (lire Adobe prépare des applications pour iPad). Dans un autre domaine mais qui procède certainement de la même logique, Autodesk a par exemple sorti un compagnon iOS pour AutoCAD permettant de travailler (dans une certaine mesure) sur des projets depuis son iPhone ou iPad. Il y a fort à parier qu’Adobe adopte la même démarche (lire AutoCAD WS est arrivé sur l’App Store). Un client léger pour intervenir sur les détails d’un document, apporter ou recevoir des commentaires, avant éventuellement de les présenter à une assistance.
Second composant, Helium, pour la création d’animations, de widgets et de contenus interactifs basés sur le HTML5, les CSS3 et d’autres langages du web ou bibliothèque tels que JQuery pour le JavaScript. Les réalisations pourront être intégrées à des sites web ou des applications. Le moteur WebKit sera utilisé (il l’est déjà dans la CS5) pour la prévisualisation.
Puis vient Muse pour la création et la publication de sites web en HTML et CSS sans écriture de code ni la contrainte de modèles tout prêts, et de manière uniquement graphique. Adobe donnera accès à une collection de polices adaptées à une lecture sur le web, des widgets pourront être glissés dans les pages et personnalisés dans leur aspect avec les outils d’édition. Prévus aussi des modules YouTube, Google Maps, de diaporama ou de vidéo prêts à l’emploi. Toutes choses que l’on voit dans les éditeurs de sites grand public.
Une section blog pourra être mise en place sur ces sites et les clefs confiées à votre client pour son administration et le suivi des statistiques de visites. Adobe va pour cela proposer une plateforme d’hébergement (il s’y est déjà entraîné avec Photoshop.com et Acrobat.com) pour publier son site à des fins de test ou le lancer pour de bon.
Enfin le document parle de Time Tracker pour comptabiliser le temps passé sur un travail. Quantité de shareware sont spécialisés dans cette activité, mais elle sera ici intégrée à toutes les applications de la suite avec une interface commune. Le décompte du temps pourra être interrompu manuellement et sinon, il fonctionnera automatiquement. Ce plug-in pourra s’interfacer avec d’autres systèmes présents dans l’entreprise pour leur délivrer ces informations.
Voici un dossier concernant les domaines à maîtriser pour être webdesigner. Ces domaines sont abordés dans nos formations « infographiste multimédia ». Les 20 promotions qui sont sorties de chez Nextformation vous le diront.
Pour pratiquer le métier de webdesigner il faut plusieurs cartes dans son jeu au niveau des connaissances et des domaines à maîtriser. Aujourd’hui on se doit d’être quelqu’un de pluridisciplinaire afin de valoriser au mieux ses compétences et ainsi espérer trouver efficacement un emploi ou de nouveaux clients si vous êtes freelance.
Voici un petit tour des grands domaines que doit prendre en compte le webdesigner pour pouvoir effectuer les différentes tâches auxquelles il devra faire face.
La composition et le cadrage sont des points essentiels pour le travail, lorsque que l’on crée un site web ou une affiche il faut connaître les notions de mise en page, de marges, de blancs tournants afin de créer un équilibre visuel et jouer sur différentes lignes de forces. Dans les métiers de l’image, que ça soit illustrateur, photographe, graphiste on entend souvent la règle du nombre d’or qui est utilisée afin de créer des proportions idéales pour la structure de l’image.
Une très belle vidéo qui illustre bien l’idée du nombre d’or et des formules mathématiques pour la composition d’image.
Nature by Numbers from Cristóbal Vila on Vimeo.
Une autre notion à maîtriser est celle de la Couleur et qui pose le plus de problèmes généralement car lors d’une création on hésite et on peut passer facilement des heures à remettre en question tel ou tel choix colorimétrique. Les couleurs viennent générer un équilibre dans les compositions, elles permettent de créer ou de renforcer une identité et servent également à connoter des valeurs, car derrière chaque couleur se cache un sentiment ou une notion.
Kuler
Un article très complet sur Wikipédia

Une autre règle qui peut aider dans vos réalisations est celle de la couleur complémentaire. Les couleurs qui se trouvent opposées dans le cercle chromatique sont appelées couleurs complémentaires. Selon Goethe et Itten qui étaient de grands chercheurs, artistes et théoriciens sur l’art de la couleur, la combinaison des deux couleurs complémentaires est perçue comme particulièrement harmonieuse.
La typographie est l’élément de base, c’est elle qui est au fondement de notre société et ainsi de notre métier de communication visuelle. Il faut connaître les règles qu’elle comporte afin de l’utiliser de façon réfléchie et efficace afin de transmettre les messages et valeurs souhaités. La typographie est le reflet des tendances des différentes époques de notre société du début du XXeme siècle à nos jours et a connu de multiples formes et styles de caractères.
(+) http://www.typographe.com/
L’animation doit être également prise en compte par le webdesigner car les créations sur le web demandent très souvent un travail de vidéo ou d’animation flash afin de créer des interactions avec l’internaute, des système de survol dynamiques, des bannières publicitaires ou des vidéo de présentation en motion design. Pour cela il doit connaître les différentes techniques d’animations entre celles réalisées sur informatique en passant sur celles faites à la main avec le stop Motion par exemple.
Les technologies sont au coeur de notre métier, en tant que webdesigner nous avons choisi de travailler sur les médias du numérique. Ainsi il faut comprendre et connaître les différents points auxquels nous faisons face (ou ferons face) dans un avenir proche.
En premier lieu, pour se donner la possibilité de réaliser des sites web, il faut d’abord connaître le fonctionnement d’Internet avec les différentes étapes sur la création et la mise en ligne d’un site. Pour cela il faut s’intéresser à des principes très techniques entre les hebérgeurs, les noms de domaines (DNS), les clientq FTP, le fonctionnement des serveurs, … mais je ne m’attarderais pas sur ces différentes parties qui demandes beaucoup de précisions.
(+) http://fr.wikipedia.org/wiki/Internet
Ensuite vient le langage de la création de sites avec le XHTML et le CSS que le webdesigner doit connaître afin d’imaginer des maquettes fonctionnelles et réalisables avec les technologies employées. Je pense qu’il n’est pas inutile de connaitre et savoir utiliser le langage de programmation en PHP et Javascript, même si ces langages spécialisés sont le domaine des webdéveloppeu, il faut les connaitre pour mieux dialoguer et travailler ainsi sur les grands sites.
(+) sur le siteduzero.com Apprenez à créer votre site web
(+) sur le siteduzero.com Concevez votre site web avec php et mysql
Alsacreations.com
Alsacréations permet de trouver une grande quantité d’astuces et de tutoriels pour l’intégrations HTML et CSS, PHP, Javascript,…
Un autre critère important est la question d’accessibilité, on entend généralement par là la possibilité aux personnes à mobilité réduite ou autre handicape de pouvoir accéder facilement à un site. Mais l’accessibilité est un enjeu beaucoup plus large car elle comprend la prise en compte des différentes tailles d’écran afin qu’une personne sur un 13 pouces puisse voir le site aussi bien que sur celui qui possède un écran de 24. Il y a aussi la question des navigateurs où l’on se doit de faire fonctionner le site sous un grand nombre de navigateurs notamment avec la véritable bête noir des intégrateurs qui est IE6 (beaucoup utilisé en entreprises). Depuis ces dernières années la question de l’accessibilité s’est étendue aux mobiles, désormais nous devons prendre en compte la fonctionnalité des sites sur les téléphones.
Les autres notions qui sont intéressantes de connaître sont celles de l’ergonomie et de l’architecture d’informations qui permettent de penser un site sous tous les angles afin de prendre en compte l’utilisateur, sa navigation et ses besoins pour l’amener rapidement à ce qu’il cherche tout en créant un design de qualité. On entre ainsi dans les métiers de conception web.
La culture visuelle et la veille sont essentiels si l’on veut se tenir à jour dans les métiers de la création où tout évolue et change très vite. La créativité, c’est en quelque sorte avoir beaucoup d’inspiration. Pour créer quelque chose d’original il est plus facile de le faire quand on connaît ce qui à déjà était fait.
Il y a plusieurs façons de nourrir sa culture visuelle, entre la lecture de livres, de blogs, naviguer sur les sites de créations comme Behance ou DeviantArt… Mais je pense qu’il est également important de s’intéresser à des univers qui s’éloignent du web afin de trouver l’inspiration et l’originalité. Je pense notamment au domaine de l’art contemporain ou dans le monde du design produit qui permettent une ouverture d’esprit sur les réalisations qui font l’oeuvre d’une véritable réflexion qu’on ne trouve peut être pas assez sur le web car nous restons à la demande d’un client qui veut simplement être sur internet pour communiquer mais ne cherche pas à aller plus loin…
Un webdesigner n’est pas seulement un créatif qui fait de beaux visuels ou des sites tendances, c’est une erreur de dire ça. Un webdesigner requiert avant tout de la réflexion afin de répondre à un problème donné, il met sa créativité au service d’un client. Un bon webdesigner est une personne qui sait s’adapter rapidement et efficacement à l’univers auquel il doit faire face.
Il reste encore tant de choses…
Cet article touche à sa fin pour le moment car je pense qu’il reste encore beaucoup de notions qu’un webdesigner doit connaître afin de réaliser pleinement son travail. J’espère que les différents domaines cités ciblent bien les bases que vous connaissez déjà ou que vous souhaiteriez approfondir.
Prochainement, nous reviendrons plus en détail sur chacun des points cités dans cet article
C’est presque le débat de fond que nous développons dans la formation « Infographiste Multimédia« . Beaucoup de graphistes traditionnels découvrent les CSS. Mais abandonner « Photoshop » demande un effort considérable. Et pourtant!
Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS c’est ce que nous nous efforçons de faire comprendre. Jeter un pont entre les graphistes et les développeurs, quel rêve!
Depuis longtemps je me dit qu’un jour je saurai faire une maquette complète d’un design web dans Photoshop. Pourtant, je lance Photoshop à chaque fois, et dès les principes graphique en place, je lance mon éditeur web préféré pour commencer l’intégration tout de go ! Dans mon fors intérieur, j’ai toujours trouvé que peaufiner une maquette dans les moindres détails dans Photoshop était souvent chronophage : on se focalise sur les détails graphiques (le bidule, un peu plus à droite, c’est possible ?) au lieu de privilégier la bonne distribution des informations dans l’espace.
Si la maquette Photoshop (ou Illustrator) rassure le client sur vos compétence en graphisme, elle ne dit rien sur votre talent de webdesigner, c’est-à-dire d’organisateur d’espace sur le web en vue de favoriser le clic et la navigation !
Voici quelques raisons qui expliquent pourquoi les webdesigner devraient se passer de Photoshop :
1. On ne peut pas cliquer sur une maquette. C’est probablement la première raison qui fait que nous avons abandonné les maquettes statiques. Elles ne sont pas réelles. Le papier ne l’est pas plus, mais il ne provoque pas les mêmes attentes. La présentation à l’écran d’une maquette réalisée sous Photoshop devrait fonctionner. Mais vous ne pouvez pas faire défiler les menus déroulants, ni saisir du texte dans un champs dessiné. Vous ne pouvez pas non plus cliquer sur un lien. A l’inverse, un prototype HTML/CSS est une vraie expérience.
2. Photoshop fournit trop d’outils qui nous scotchent sur les détails. Lorsqu’on utilise Photoshop, on ne peut pas s’empêcher d’accorder de l’attention aux alignements, aux couleurs, aux formes, etc. Tout ces petits détails qui auront certainement leur importance… mais plus tard. L’essentiel est invisible pour Photoshop !
3. Dans Photoshop, le texte n’est pas le même que sur le web. Quand on regarde une maquette réalisée sous Photoshop, on ne peut pas modifier le texte sans retourner dans le logiciel pour changer le texte, enregistrer le fichier, l’exporter au format gif/png/jpg, etc. On ne peut pas le mettre en ligne et demander à quelqu’un de recharger la page dans cinq secondes comme il est possible de le faire en éditant rapidement un fichier HTML. On doit dire : Donnez-moi quelques minutes… Par ailleurs, les polices de caractères n’ont jamais le même aspect ni la même taille qu’en HTML. Ce n’est pas la même expérience.
4. Photoshop met l’accent sur la production, pas sur la productivité. Photoshop sert à construire quelque chose qui doit « paraitre », pas quelque chose qu’on peut utiliser. Lorsqu’on s’inquiète seulement de l’apparence des choses, on passe trop de temps en « fignolage ». HTML/CSS permet d’être productif en permettant d’aller de l’avant après chaque modification.
5. On refait souvent les mêmes choses dans Photoshop. D’accord, vous avez passé trois jours sur une maquette. Et après ? Maintenant, il faut tout transformer en HTML/CSS. C’est du temps perdu. On peut prendre ce temps pour faire l’intégration HTML/CSS et passer plutôt du temps à l’améliorer, au lieu de tout construire/déconstruire. Si l’on est pas assez rapide en HTML/CSS, on peut passer plus de temps à apprendre à travailler plus vite.
6. Photoshop n’est pas un logiciel très collaboratif. J’ai déjà touché du doigt cet aspect plus haut, mais laissez-moi enfoncer le clou : HTML/CSS vous permet de faire des changements, d’enregistrer et de voir le résultat. C’est le flux de collaboration que nous avons mis en place : laissez-moi changer ça, ça y est, faites F5 ! Ces changements prennent quelques secondes. Attendez, je vais placer cet élément à gauche plutôt qu’à droite. F5 ! Toujours quelques secondes. Pas besoin de sélectionner un outils, de modifier quelques éléments manuellement, d’enregistrer, d’exporter, de télécharger, de donner au client le nouveau nom de fichier, etc. HTML/CSS est idéal pour faire des prototypes itératifs ; ce n’est pas le cas de Photoshop…
7. Phostoshop est lourdingue. Même après des années de pratique intensive de ce logiciel je trouve toujours que l’utilisation d’un crayon et du papier est plus naturelle que de faire des aller-retours dans la barre d’outils. Un crayon peut dessiner n’importe quoi, tandis que dans Photoshop, vous devez utiliser l’outil texte pour saisir du texte, l’outil forme pour dessiner une forme, la barre d’option pour ajuster tout ça, etc.
Rien de tout ce qui précède n’est là pour dénigrer Photoshop, par ailleurs le plus remarquable de logiciels, mais nous avons trouvé que plonger les mains dans le code HTML et CSS apporte une meilleure expérience créative. La voie du code est vraie comme Photoshop ne le sera jamais. C’est ce que tente de faire comprendre la partie web de la formation
J’imagine que beaucoup trouveront cette prise de position un peu extrême et se demanderont ce que l’on peut bien intégrer en HTML/CSS si on a pas fait de maquette avant…
En gros, on peut très bien dessiner une maquette sur le papier en commençant par le zoning global et en donnant des indications graphiques plus ou moins précises en fonction de la nature de la commande. Par exemple, dans la plupart des cas, il n’est pas nécessaire que la maquette soit exacte au pixel près, tant que le résultat final tient compte des détails.
L’avantage ? Selon, les méthodes de travail il sera ainsi possible de lancer Illustrator (ou de prendre son crayon) pour « dessiner » quelque chose sans se préoccuper de la largeur de la page ou de l’espace entre les colonnes. Ces éléments pourront trouver une réponse plus tard.
Je suis convaincu que même pour des projets ayant une charge graphique forte, il est possible de proposer l’univers graphique d’un côté pour s’assurer que la cible est prise en compte, et le prototype fonctionnel de l’autre pour valider les grands principes ergonomique et navigationnels. Sachant que le premier influe sur le second et vice-versa ! Tiens, j’ai bien envie de relire Transcender CSS sous cet angle, pas vous?
Ces propos de Bruno Bichet, sont largement partagés par Nextformation. Il est infographiste depuis 1993, formateur en création de site web depuis 2001 et intégrateur web depuis 2005. Il anime le blog CSS4 design
L’histoire du design et du graphisme sur ce site. A consulter absolument si vous êtes Infographiste Multimédia
rt@MininiWebdesign des polices pour les graphistes. Merci à Virginie qui a trouvé un bon job, bravo!
Pour le webdesigner d’aujourd’hui comme pour le peintre d’hier, le choix d’une bonne palette de couleur est déterminant pour la réussite d’une oeuvre, fut-ce un site web. Pour y parvenir, voici quelques ressources en ligne pour obtenir rapidement des palettes de couleurs de qualité, tout en s’amusant.
La couleur ? Longtemps elle a semblé échapper à toute appréhension, son caractère « accidentel » a découragé toute science. Sur elle on ne pouvait fonder un art. D’où la prééminence du dessin. Puis Newton établit que la lumière blanche n’est pas homogène mais composée. A sa suite, Buffon puis Goethe font leur place aux couleurs d’origine physiologique qu’ils rapportaient à l’oeil percevant. Les années 1840 marquent, elles, le grand tournant dont nous demeuront les héritiers : Chevreul, savant chimiste, remet en question les rapports admis de l’oeil avec l’objet perçu. Il établit la loi générale qui régit la perception des rapports entre couleurs contiguës. Une revalorisation de la couleur s’ensuivit qui a excercé une influence considérable sur plusieurs générations de peintres : Delacroix, les impressionnistes, Van Gogh, Gauguin, Seurat, Signac, les symbolistes, les futuristes et Delaunay. Le changement de paradigme ouvre sur la conquête des voies propres de la couleur qui conduiront la peinture jusqu’à l’abstraction.
Art et science de la couleur. Chevreul et les peintres, de Delacroix à l’abstraction. Edition revue et augmentée. George Roque. Gallimard, Collection Tel. 2009. Vous pouvez suivre sur la plate-forme e-learning de nextformation le cours sur l’histoire de l’art
Toucan fait partie des outils de création et d’édition en ligne proposés par Aviary. Vous pourrez très facilement créer vos palettes de couleur et les sauvegarder. Il est possible de lier Aviary à son compte Flickr pour piocher des couleurs dans votre stock de photos. Cerise sur le gâteau, il est possible de visualiser une palette de couleurs selon différentes affections de la vision telles que : protanopy, protanomaly, deutéranopy, deutéranomaly, tritanopy, tritanomaly, achromatopsy ou achromatomaly. Pratique pour s’assurer que les informations véhiculées par les couleurs seront accessibles pour tous !
L’outil indispensable pour chercher l’inspiration ou créer votre palette de couleur à partir de couleurs choisies d’après un nuancier (analogique, monochromatique, triade, complémentaire) ou en fonction de différentes teintes ou saturation. Des curseurs interactifs vous permettront d’affiner les choix initiaux en toute liberté selon votre intuition ou vos savants calculs quelque soit le mode colorimétrique de base : HVS, RGB, CMYK, LAB, HEX
Il est également possible de déterminer une palette de couleur d’après une image que vous aurez téléchargée depuis votre poste de travail ou depuis le meilleur site de photo au monde : flickr. Vous obtiendrez une palette de couleur que vous pourrez modifier en faisant varier les points chauds de l’image en question au cas où les couleurs par défaut passeraient à côté d’une couleur significative de l’image. Vous pourrez également faire varier les couleurs par défaut selon six modes prédéfinis.
Créé par Paul Burgess, ColorSuckr génère votre palette de couleur à partir du profil chromatique de votre image une fois que vous aurez indiqué son URL. Il est également possible de choisir une palette d’après une photo présente sur flickr en précisant un mot-clé. L’originalité vient du fait que l’on peut — pour chaque dominante de couleur — afficher les palettes de couleur déjà créées sur COLOURlovers. C’est un excellent exemple de mashup dans la pure tradition du web 2.0 !
COLOURlovers est un générateur de palettes qui prend la température de ce qui se fait de mieux en terme de nuanciers à travers le monde autant qu’il influe sur les tendances à venir. COLOURlovers permet à chacun (publicitaire, designer, graphiste, architecte, etc.) de chercher parmi des centaines de nuanciers, de les comparer entre eux et de se tenir au courant de ce qui se passe dans le milieu de la couleur, le tout en version française !
L’originalité de cet outil est d’être compatible avec votre iphone : prenez une photo depuis votre appareil, envoyez-là à l’adresse colors@mailchimp.com et patientez pour la réponse !
« Pour commencer, choisissez une couleur en utilisant le sélectionneur de couleur, et une palette composée d’un camaïeu de 6 couleurs sera calculée automatiquement. » Ce site comblera les fanas de couleurs grâce à la possibilité de sauvegarder des sets de couleurs aux formats Photoshop et Illutrator ! Voire de se faire envoyer les camaïeu par email !
Dans le même esprit que Color Palette Generator le site extrait les couleurs d’une photo et propose une fonction « schemes » qui propose un dégradé selon les couleurs trouvées. Notez que si les couleurs ne vous conviennent pas, vous pourrez cliquer à nouveau pour avoir une autre proposition. Il est possible de tagger les couleurs et d’effectuer des recherches par tag ce qui s’avère très pratique quand on cherche une couleur par association d’idée.
Un peu plus frustre d’apparence, mais néanmoins très utile. Voir ma petite note sur ce Color Blender pour une traduction du mode d’emploi.
Comme les autres, ce site permet de définir une palette de couleur mais se distingue en offrant l’utilitaire ColorPix pour prélever les couleurs visibles à l’écran. Le zoom va jusqu’à 2800% ce qui devrait suffire. L’application peut se lancer au démarrage et une option permet de placer la fenêtre au premier-plan ou la réduire dans la barre des tâches. En appuyant sur une touche, la couleurs sélectionnée est verrouillée. Redémarrez si cette fonction ne marche pas.
Colorotate offre une belle interface (bien qu’un peu confuse au premier abord) pour créer, mixer, mélanger les couleurs pour obtenir de palettes de couleurs. Le plus de Colorotate est d’afficher les palettes selon plusieurs types de déficiences visuelles.
Je n’ai pas vraiment été convaincu par l’ergonomie et le look and feel de Colorjack Studio, mais qui sait, peut-être trouvera-t-il son public. En revanche, vous serez peut-être intéressés par les autres outils disponibles sur le site, comme Color Galaxy et Color Sphere.
Tous les jours une ressource colorée sous la forme d’une palette de couleur à télécharger pour Photoshop, Illustrator, etc. mais aussi sous forme de fichier CSS ou HTML.
Crée une palette de couleur d’après un tag, une couleur hexadécimale (ne mettez pas le symbole# devant), l’URL d’une image ou en fonction d’une image sur votre disque dur. Propose également de modifier la tonalité des couleurs en diminuant la saturation.
Très bel outil pour créer des sets de couleurs modifiables globalement en jouant sur la saturation, le constraste ou en ajustant chaque couleur séparément.
Cet article provient de : Bruno Bichet, infographiste depuis 1993, formateur en création de site web depuis 2001 et intégrateur web depuis 2005.
Dans les formations web, il y a toujours quelques jours dédiés au logiciel fireworks qui permet de résoudre rapidement les questions d’images pour le web sans faire appel au poids lourds du genre (Photoshop etc…)
Formation Adobe Fireworks : Découvrir l’espace de travail de Fireworks CS5 from Nakatomi on Vimeo.
Dans la rubrique 2D une nouvelle page vous présente les travaux réalisés par les promotions Borodine et Ellington, 2 promotions de graphistes qui achèvent la période PAO, prépresse (Photoshop, indesign, illustrator). Catherine Biry, le chef de produits, vous invite à regarder leurs réalisations