DETRUK

Detruk c'est fini... la suite sur "All For Design"

2009-07-14T15:45:00.003+02:00

Detruk c'est fini... la suite sur "All For Design"

Cela fait maintenant 2 mois que j'ai décidé de me lancer dans une refonte complète de ce blog. Ce travail touche à sa fin et j'ai l'honneur de vous présenter le blog "All For Design". Le design a été entièrement repensé, je change d'hébergeur et j'opte pour le très célèbre Wordpress.

Seul le contenu reste le même avec toutefois certaines améliorations. Je profite de cette refonte pour vous proposer une nouvelle rubrique "Interview" inaugurée par Bruno Bichet de CSS 4 Design qui nous parle de son métier. Vous trouverez également plus de tutoriaux orientés HTML/CSS et je partagerai bien sur certaines astuces "Wordpress" qui m'ont beaucoup aidé à construire le blog. Bref, si vous appréciez Detruk, vous ne pourrez qu'aimer "All For Design".

Voici un screenshot du nouveau blog (cliquez pour l'image complète)

Je n'alimenterai donc plus Detruk, ce post sera le dernier.

Merci à tous ceux qui ont suivi ce blog durant plus d'une année. Pour continuer à me lire et découvrir de nouveaux articles, je vous donne rendez-vous dès maintenant sur... All For Design!

dotMobi WordPress Mobile Pack : Wordpress pour mobiles

2009-05-20T21:04:00.000+02:00

dotMobi WordPress Mobile Pack : Wordpress pour mobiles

Le Wordpress Mobile Pack est un plugin Wordpress permettant la portabilité de votre site web sur les appareils mobiles. Il a été conçu par James Pearce, Vice Président des technologies émergentes chez "dotMobi". Si le nom "dotMobi" ne vous dit rien, il s'agit d'un grand groupe industriel basé à Dublin (leader mondial du développement et de la découverte de contenu mobile de qualité) qui gère les noms de domaines mobiles et qui est à l'origine du célèbre ".mobi". Le groupe encourage l'innovation de l'industrie mobile en donnant aux fournisseurs de contenu les outils nécessaires pour s'assurer que le Web fonctionnera sur les téléphones avec rapidité, précision et pertinence.

Il existait déjà des solutions permettant de rendre votre site web accessible sur les téléphones mobiles. Je pense notamment à l'article "Veerle's blog goes mobile" publié sur le blog de Veerle Pieters.

La solution que propose James Pearce s'adresse uniquement aux utilisateurs de Wordpress et ses fonctionnalités semblent dépasser de loin tout ce existe aujourd'hui dans ce domaine...

Le Wordpress Mobile Pack offre :

Une détection de la provenance de vos visiteurs et les oriente si besoin sur le thème adapté aux mobiles
Une détection du type d'appareil mobile utilisé par vos visiteurs
La possibilité de switcher d'un thème à l'autre une fois sur le site
Un thème "spécial mobiles" entièrement paramétrable et personnalisable
Une fonction permettant d'adapter automatiquement votre contenu web pour un support mobile : suppression des médias, partition des grandes pages, adaptation de la taille des images, simplification automatique des css...
Un panneau d'administration accessible depuis un téléphone
Un widget lecteur de codes QR

Vous pourrez trouver ce plugin sur le site "Mobiforge", une communauté de développeurs spécialisés dans le domaine du mobile. Ce site s'adresse à tous ceux qui s'intéressent au développement et au design d'applications mobiles. Vous pourrez y trouver de nombreux articles traitant de design, de développement et de tests en tous genres.

Le site propose également un forum, un blog ainsi qu'un ensemble d'outils pour le développement sur mobiles (Templates de sites, outils de création et de test, framework etc...). Vous l'aurez compris, si vous vous intéressez à ce domaine, Mobiforge est un site à placer dans vos favoris.

Quelques liens pour finir :

> Wordpress-mobile-pack.1.0.8223

> La communauté Mobiforge

> L'article de James Pearce présentant son plugin

> Le même article traduit "approximativement" en Français (Google Traduction)

> Le site web dotMobi

Twitter Feed : automatisez vos tweets !

2009-05-19T21:28:00.000+02:00

Twitter Feed : automatisez vos tweets !

Au fil du temps, Twitter a su s'imposer pour devenir aujourd'hui la référence du microblogging. Nombreux sont ceux qui s'en servent comme d'un outil de communication à part entière.

Il existe un service qui va peut-être vous simplifier la vie et vous faire gagner du temps. Twitter Feed vous permet de lier votre compte Twitter à votre blog pour automatiser la parution d'un tweet dès qu'un article est publié sur votre blog. Il vous suffit pour cela de créer gratuitement un compte sur Twitter Feed pour avoir accès à ce service.

L'interface est simple et efficace. Il existe plusieurs options vous permettant de définir le contenu de vos tweets automatisés. Vous pouvez reprendre le titre de l'article venant d'être publié sur votre blog, opter plutôt pour la description ou bien choisir d'inclure les deux dans votre tweet.
Vous pouvez également choisir le texte qui précédera le titre de l'article.

ex : [Nouveau post sur Detruk] suivi du nom de l'article.

Plusieurs fréquences d'actualisation sont proposées, le plus court étant 30min. Twitter Feed vérifiera ainsi les mises à jour de votre blog toutes les demi-heures et créera un tweet pour chaque nouvel article publié.

Si vous possédez plusieurs blogs vous pourrez créer plusieurs flux. Si vous vous posez la question, sachez que ce service est complètement gratuit.

Pour être moi-même un utilisateur de Twitter Feed, je peux vous confirmer que ce service marche très bien et que j'en suis maintenant devenu un utilisateur régulier.

Quelques liens pour finir :

> Twitter Feed

> Twitter

> Detruk sur Twitter

Web design+ : les standards du web vus par Harry Roberts

2009-05-17T14:40:00.001+02:00

Web design+ : les standards du web vus par Harry Roberts

Web Design+ est un récapitulatif de bonnes pratiques concernant la création web. Quel doctype choisir, comment améliorer l'accessibilité d'un site, quelles sont les bonnes habitudes lorsqu'on créé un formulaire, quel CSS-reset choisir, etc...

Ce petit manuel a été conçu par Harry Roberts, un développeur de 18 ans, exerçant son métier au Royaume-Uni. Malgré son jeune age, Harry possède déjà une bonne maitrise technique puisqu'il est spécialisé dans les CSS, les standards web, la sémantique XHTML et l'accessibilité.

Web Design+ s'adresse plutôt à ceux qui connaissent déjà le HTML et les CSS mais qui souhaitent parfaire leur technique en s'appropriant les bonnes pratiques. Lorsqu'on parle d'intégration web, même s'il existe différentes façons pour aborder un même problème, il y a néanmoins des solutions génériques, propres, respectueuses des standards. Ce sont ces solutions que vous trouverez dans ce guide.

Je sais qu'il existe de très nombreux documents présentant les standards du web. L'intérêt de celui-ci réside dans la clarté, la simplicité des explications, l'étendue des sujets traités et leur côté très pragmatique. C'est selon moi, un document qui peut s'avérer très utile en cas de doute sur un problème de construction de page web ou tout simplement pour en apprendre plus sur les standards, la sémantique ou sur l'accessibilité.

Web Design+ fait partie de CSS Wizardry, le site d'Harry Roberts sur lequel vous trouverez de nombreuses ressources parmi lesquelles son propre framework css "Typogridphy", une rubrique "Toybox" où vous trouverez de nombreux snippets (php, css, xhtml), "Clecktionary" un dictionnaire humoristique dédié aux natifs de la ville de Cleckheaton (UK).

Quelques liens pour finir :

> Web Design+

> CSS Wizardry

> Le portfolio d'Harry Roberts

Zoom sur les travaux d'Emre Turhal

2009-05-10T19:38:00.001+02:00

Zoom sur les travaux d'Emre Turhal

Aujourd'hui, zoom sur un artiste que j'affectionne tout particulièrement et qui fait partie de mes "références" en matière de création numérique.

C'est au cours de mes flâneries sur DeviantArt que j'ai découvert les travaux d'Emre Turhal, un jeune artiste Turc très talentueux. Il est Directeur Artistique, Graphiste, Illustrateur et ses travaux valent vraiment le coup d'œil.

A seulement 24ans, Emre possède déjà son propre style avec des œuvres assez sombres, composées de formes déstructurées, de personnages déchirés, le tout enrobé d'une bonne dose de créativité et d'une grande maitrise technique. Bref, un artiste vraiment intéressant à mon goût.

Comme des visuels valent mieux qu'un long discours, voici quelques-uns de ses travaux...

J'aurais ainsi pu vous présenter des dizaines de visuels tant le portfolio de l'artiste est fourni. A ce propos, si vous souhaitez voir ses travaux, je vous conseille d'aller sur son espace DeviantArt plutôt que sur son site perso très (trop?) minimaliste.

En tous cas, Emre Turhal reste un de mes artistes favori, tant par son style graphique que par sa parfaite maitrise des outils de création numérique... Chapeau m'sieur !

Quelques liens pour finir :

> Emre Turhal sur Deviant Art

> Site perso de l'artiste

Power to the poster : des posters à imprimer gratuitement

2009-04-26T14:59:00.004+02:00

Power to the poster : des posters à imprimer gratuitement

En naviguant au hasard du web, de lien en lien, on fait parfois de bonnes découvertes. C'est le cas pour le site "Power to the poster" qui présente une série de posters de qualité format 11x17 pouces (soit 3300x5100px). Ce qui différencie cette galerie des autres sites du genre, c'est la possibilité d'imprimer vous-même les œuvres qui vous intéressent sans payer un centime. Des œuvres de qualité, proposées gratuitement au public, voilà de quoi susciter l'intérêt.

Le but affiché du site est plus de faire passer un message axé "peace, love and ecology" (et plutôt anticapitaliste...) que de faire des bénéfices sur la vente des œuvres proposées.

Puisque le dépôt d'œuvres est ouvert au public, n'importe qui peut proposer ses posters qui, après validation, se verront enrichir une galerie déjà composée de plus de 130 affiches...

Pour vous faire une petite idée de l'univers graphique des posters proposés, en voici quelques-uns...

Love Is About Souls By Mitchell Bartlett

Captivity By Ahmet Erdogan

DOWN-UP By Justin Kemerling

Trabajemos By J. Carlos Campuzano

Quelques liens pour finir :

> Power to the poster : le site

> Power to the poster : le blog

Photoshop : centrage et points de force, 2 scripts bien utiles

2009-04-19T12:10:00.000+02:00

Photoshop : centrage et points de force, 2 scripts bien utiles

Si vous travaillez sur Photoshop, je pense que vous utilisez les repères et les guides pour mieux construire vos images. Personnellement je cherche régulièrement le centre de mon document et très souvent les points de force de mon image. Je ne vous ferais pas l'affront de vous expliquer ce qu'est le centre d'une image mais une petite explication s'impose pour les points de force...

Si vous divisez une image en 3 dans le sens vertical et faites de même dans le sens horizontal vous obtiendrez des lignes qu'on appelle "lignes de force". Leur intersection forme 4 points appelés "points de force". Lorsque vous construisez une image il est important de placer les éléments principaux en fonction de ces points car notre œil est attiré en priorité sur ces derniers.

Vous n'êtes pas sans savoir que Photoshop possède un outil d'automatisation de tâches fort utile qu'on appelle "Script" ou "Actions" en Français.

Plutôt que de calculer à chaque fois le centre de votre image puis d'y placer vos repères ou pire, de sortir la calculatrice pour repérer où sont les tiers du document, il est intéressant d'utiliser les Scripts pour laissez Photoshop faire le travail à votre place. Pourquoi se compliquer la vie?

Aujourd'hui je vous propose donc 2 scripts qui placeront des repères au centre et aux tiers de votre image afin d'y repérer d'un coup d'œil les lignes et points de force.

Dans un premier temps il vous suffit de télécharger les scripts ICI. Ensuite, vous devez placer le fichier "Graphisme.atn" dans le dossier Actions (ou Scripts en Anglais) de Photoshop. Ce dossier se situe dans C:\ProgramFiles\Adobe\Photoshop\Presets\Actions.

Ensuite, dans Photoshop, vous affichez la fenêtre de Scripts (raccourci F9), en haut à droite de celle-ci, cliquez sur la petite flèche pour accéder au menu, choisissez "Charger des scripts..." et allez chercher le script que vous venez de télécharger.

Un nouvel ensemble "Graphisme" apparaît maintenant dans votre fenêtre. Ce dossier comprend un script "centre" et un script "points de force". Pour lancer l'une où l'autre des actions, placez-vous sur l'un des deux scripts et cliquez sur le bouton "Play" en bas de la fenêtre de scripts. (le bouton est symbolisé par un triangle). Et Voilà! Vos repères apparaissent sur votre image.

Quelques liens pour finir :

> Wikipédia : la composition d'une image

> Adobe Help center : Utilisation des scripts

Picture & Co, futur lieu d'échange pour tous les créatifs

2009-04-14T10:36:00.000+02:00

Picture & Co, futur lieu d'échange pour tous les créatifs

Picture & co est un blog dédié à tous les artistes numériques quelle que soit leur orientation : 2D, 3D, Web, vidéo, photo, etc. Réalisé en 2005 par Stéphanie Guillaume, il est ensuite devenu le site officiel du magazine Creanum.

Il renaît aujourd’hui (mars 2009) sous le même nom mais sous la forme d'un blog. Son but est de proposer aux créatifs un lieu unique où trouver des chemins vers les ressources dont ils ont besoin au quotidien.

Pour ceux qui ne la connaissent pas, Stéphanie Guillaume est la rédactrice en chef des magazines "Advanced Creation" (anciennement "Advanced Photoshop") et "Web Design". Elle travaille également pour les magazines "Creanum", "Compétence Mac", "Compétence Photo" et réalise des ouvrages pour l'éditeur Dunod.

Picture & co propose des articles sur l'actualité numérique. Vous y trouverez également de nombreux liens. Si vous souhaitez vous tenir informé des tendances, des événements ou si vous cherchez des liens vers des ressources, vous êtes au bon endroit. 3D, 2D, PAO, Webdesign, Matériel, Evenements, Livres, etc... les domaines couverts sont très nombreux.

Le projet de Stéphanie est de faire évoluer ce blog en un lieu de partage et d'échange destiné à tous les créatifs. "un lieu central où chaque artiste numérique pourra trouver toutes les infos qu’il recherche : les magazines spécialisés, les éditeurs de logiciels, les sites de ventes, les astuces et tutoriels, etc.".

L'initiative est bonne et j'attends avec impatience de voir comment va évoluer Picture & co. Petite remarque personnelle pour terminer, je n'en ai pas encore parlé mais on pourra remarquer le design réussi, créé par "Yichi", VikiWorks studio.

Quelques liens pour finir :

> Picture & co : le blog

> Le site personnel de Stéphanie Guillaume

Zoom sur Colorbunch, le portfolio de Philipp Schilling

2009-04-04T19:50:00.002+02:00

Zoom sur Colorbunch, le portfolio de Philipp Schilling

Philipp Schilling est un graphiste allemand qui, malgré son jeune age (20ans) possède 2 atouts qui ont su l'aider à se démarquer : créativité et technicité.

Il présente ses travaux sur son portfolio Colorbunch, très sobre et efficace (made by Indexhibit). Vous pourrez y découvrir des œuvres certes assez peu nombreuses pour le moment mais plutôt variées et toutes très abouties.

Pour vous donner un aperçu, voici quelques-uns des travaux de l'artiste... (Cliquez sur les images pour les agrandir)

Quelques liens pour finir :

> Colorbunch : portfolio

> Le blog de Philipp Schilling (Allemand)

> Philipp Schilling sur Twitter

> Philipp Schilling sur Myspace

> Espace FlickR

> Philipp Schilling sur DepthCore

Arts graphiques : 19 sites pour suivre les tendances

2009-03-28T18:47:00.001+01:00

Arts graphiques : 19 sites pour suivre les tendances

Tout d'abord je tiens à m'excuser du manque de posts sur ce blog depuis quelques temps. Entre le travail, ma petite femme et une semaine "off", je n'ai pas vraiment eu le temps de faire de nouveaux articles... Pour me rattraper un peu voici une sélection de 19 sites (magazines, blogs, galeries) qui vous permettront de suivre les tendances actuelles en matière de création graphique. Design, Graphisme, Photographie, Animation, Typographie, Web design etc... Voici une petite sélection de mes endroits favoris du web...

1983 est selon son auteur un "journal/scrapbook" sur le design. Sur ce blog, Kenny Wan, graphic/web designer et photographe amateur vous présente ses découvertes et ses coups de cœur. Les lecteurs peuvent participer en envoyant par mail ce qu'ils souhaitent proposer.

Abduzeedo est le blog de Fabio Sasso, un designer Brésilien. Si vous souhaitez suivre les tendances en matière de création graphique et de web design, c'est vraiment un site à mettre dans vos favoris. En plus d'articles fort intéressant, vous trouverez tous les jours un post intitulé "Daily Inspiration" qui présente les coups de cœur des auteurs du blog mais également des lecteurs. Vous pouvez vous-même poster sur ce blog ou via Twitter après vous être inscrit. Je vous conseille donc vivement d'aller faire un tour sur ce site qui est vite devenu pour moi une référence.

Behance Network est un réseau permettant aux créatifs de présenter leur travaux mais également de créer des groupes de travail. Si vous êtes invités par un utilisateur de Behance, vous pourrez utiliser les outils mis à disposition pour créer votre portfolio sur le site. Sans invitation, vous pourrez toutefois visualiser les œuvres présentées. C'est un très bon endroit pour suivre les tendances... Il existe également le Behance Magazine et le Creatives Outfitter (online shop).

Creative Tempest est une galerie présentant des artistes talentueux. De nombreux domaines sont abordés (digital painting, illustration, street art...) et la qualité des œuvres et des artistes présentés est toujours au rendez-vous. Vous ne trouverez pas de publicité "visible" sur le site qui a préféré opter pour des annonces subliminales. Toute les 5 secondes, un message publicitaire s'affiche durant 1/2000eme de seconde... Allez, je vous laisse je vais acheter du coca...

Pour ceux qui ne connaitraient pas encore Deviant Art, ce site est une véritable mine d'or de la création en tous genres. Vous pouvez vous inscrire et uploader vos œuvres pour les soumettre à la critique. A moins d'avoir quelque chose de précis à chercher, il est bon de se balader sur Deviant Art en naviguant de lien en lien. Une création vous intéresse, vous arrivez sur la page de son auteur. Après avoir visité sa galerie, vous pourrez aller faire un tour sur ses favoris... Et, là, vous trouvez une œuvre qui vous plait puis vous allez visiter la page perso de son auteur etc etc etc.... Sur Deviant Art on peut trouver le pire comme le meilleur, le tout est de bien savoir chercher. Petite info pour conclure, ce site est un très bon endroit pour trouver des textures gratuites...

Le blog Dirty Mouse est presque exclusivement alimenté par ses lecteurs. Graphisme, Web design, Illustration, Photographie, Design produit et design d'intérieur sont autant de domaines sur lesquels vous pourrez trouver l'inspiration en vous rendant sur le blog updaté plusieurs fois par jour.

Encore une autre source d'inspiration très intéressante. Le site Form Fifty Five possède de nombreux contributeurs sur des sujets très variés : Design, Photographie, Typographie, Graphisme, Art, Print, Web etc...

Sur Ffffound, non seulement vous pouvez partager vos coups de cœur en contribuant à l'alimentation du blog mais vous pourrez également vous voir proposer des sujets en relation avec vos propres goûts. Le système est simple, vous pouvez taguer les posts qui vous intéressent particulièrement. Plus vous placez de sujets en favoris, meilleures seront les propositions qui vous seront faites par le site. En plus de ce système de votes/propositions assez sympa, la qualité des choix proposés font de Ffffound une bonne source d'inspiration et donc, un endroit à placer dans vos bookmarks!

Sur son blog Grafik Cache, Dave Smith, un designer Irlandais de 26 ans nous fait partager ses sources d'inspiration. Design, photographie, architecture, lectures, expo, typographie, illustration, animation... la liste des domaines présentés dans ce blog est longue.

Grafica Real est un projet commencé en Janvier 2009 par Samuel Jesse, un jeune étudiant en Multimédia & Design. Ce site est à mi-chemin entre le Magazine et le blog. Il couvre principalement le domaine de la conception graphique au sens large (ressources, tutoriaux, revues, street art, mode etc...).

Graphic Exchange est le site de Fabien Barral, graphiste freelance Français passionné des arts graphiques. Vous y trouverez ses propres créations mais également ses sources d'inspiration. En plus de cela, ce site vous permet d'échanger vos travaux print (s'ils sont retenus) avec Fabien qui propose pour sa part certaines de ses œuvres. Un bon concept non ?

Made in England a été créé par un certain "Cookie", designer, illustrateur et...aventurier. Le site traite de domaines très variés et les sujets et artistes proposés sont très souvent de bonnes surprises. Le ton frais et humoristique confère à ce blog un petit plus appréciable.

Le blog Original linkage créé par Bob Sakoui, directeur artistique dans une agence de pub basée à Londres, propose de nombreux articles sur des sujets très variés (Design, Photographie, Musique, Packaging, Illustration, Animation etc...).

Si la notoriété de Reform & Revolution n'est plus à faire c'est très certainement dû à la qualité des artistes et œuvres proposés sur le site. Si vous voulez avoir un aperçu de ce qui se fait de mieux en matière de création graphique, c'est l'endroit idéal.

Andrew Gibbs a créé The Dieline en 2007. Ce site est exclusivement dédié au packaging. Vous y trouverez les meilleurs exemples en la matière, créés par des artistes très talentueux.

The Strange Attractor est un site qui traite de design, d'art, de musique et de science. Le site est alimenté par ses lecteurs ainsi que plusieurs contributeurs "officiels". Il a été créé par Pete Barnett, Designer et musicien vivant à Chicago et par Brendan Crich, dessinateur et musicien vivant dans le Colorado.

Si vous aimez la typographie, Type Neu sera surement vous combler. Le site présente de nombreux projets artistiques, tous en rapport avec l'art de la typo. A noter que ce site est couplé avec Reform & Revolution (présenté plus haut)

Le site Visuelle a été créé par David Bennett (This-Studio.co.uk). Vous y trouverez de nombreux liens et projets en rapport avec le design, le graphisme, la photographie, la typo etc... Encore une autre source d'inspiration à ne pas rater...

Yay!everyday est un bon site pour s'informer des tendances en matière de design, de photographie et autres... La qualité des oeuvres et artistes présentés ne vous décevra pas. Une référence là aussi...

Misstigri, une artiste à découvrir !

2009-03-18T06:57:00.001+01:00

Misstigri, une artiste à découvrir !

Ce blog étant plutôt axé sur le web design et le graphisme en général j'ai un peu hésité avant de faire ce post. Mais après tout, la peinture est également un domaine qui m'intéresse donc pourquoi ne pas en faire profiter les lecteurs... surtout lorsqu'il s'agit d'une artiste de talent.

Elle est peintre, illustratrice et graphiste indépendante sur la région de Nantes. Son style est reconnaissable dès le premier coup d'œil mais pour en avoir le cœur net il suffit de regarder au bas de la toile. Si vous voyez le nom de "Misstigri", alors vous y êtes !

On peut lire sur son site que l'artiste puise son inspiration dans des domaines aussi variés que la mode, la bd, l'animation et bien entendu la peinture. Armée de peinture acrylique, pastels gras, posca et matériaux divers, Misstigri donne vie aux "demoiselles" qui habitent ses toiles, des fées mystérieuses, envoutantes et sensuelles aux allures de Geisha.

Pour vous donner un petit aperçu de son talent, voici quelques une de ses toiles...

Je suis loin d'être un fin connaisseur en matière de peinture mais je peux dire sans trop me tromper que cette artiste possède beaucoup de technique et de créativité (c'est peut-être pour cela qu'une de ses toiles trône en bonne place au dessus de mon lit :) ). Si vous souhaitez découvrir son univers, rendez-vous sur la région Nantaise où Misstigri y expose ses œuvres...

Quelques liens pour finir :

> Le site web de Misstigri

> Misstigri sur MySpace

> 1001 bijoux : page de Misstigri

> Misstigri sur Amka Shop

> Misstigri sur Imagedeco

> Misstigri sur Skinizi

Dualform, l'excellent portfolio de Cyrill Clunev

2009-03-13T07:12:00.001+01:00

Dualform, l'excellent portfolio de Cyrill Clunev

Je visite régulièrement de nombreux portoflios sur le web et il arrive que je m'arrête et que je me dise : "Wahoo, ce mec là déchire !. Le portfolio "Dualform" est un de ceux-ci. C'est sur un design très épuré, très sobre, que Cyrill Clunev, un jeune graphiste Russe de 25 ans nous fait partager son travail. La carrière professionnelle de cet artiste a commencé en 2005 où Cyrill a travaillé en temps que graphiste et motion designer pour des studios de St Petersbourg. Début 2008 il devient designer senior avant de passer naturellement directeur artistique.

L'artiste expérimente différents styles mais a un faible pour les créations abstraites contemporaines et minimalistes. Ses oeuvres révèlent un grand professionnalisme et un véritable souci du détail. Du très beau travail à mon goût. Reste à dire que si vous souhaitez bénéficier de ses services, Cyrill Clunev est disponible en Freelance, il suffit de prendre contact !

Quelques liens pour finir :

> DualForm portfolio

> Cyrill Clunev sur Behance

> Cyrill Clunev sur FlickR

> Cyrill Clunev sur DeviantArt

Stencil Art : 19 sites pour trouver l'inspiration

2009-03-08T21:06:00.001+01:00

Stencil Art : 19 sites pour trouver l'inspiration

Le Stencil Art est littéralement "l'art du pochoir". La technique est à première vue assez simple puisqu'elle consiste à convertir une image en zones noires et blanches. Une des deux parties est découpée au cutter afin de créer un pochoir dont les zones creuses seront recouvertes de peinture (les artistes utilisent le plus souvent des bombes de peinture aérosol) afin de reproduire l'image de base, façon pochoir...

Des artistes talentueux ont su pousser cette technique à l'extrême pour créer des œuvres complexes et très souvent pleines de sens. L'état d'esprit anti-conformiste qui entoure l'univers du Stencil Art explique certainement la nature souvent contestataire des œuvres qui recouvrent certains des murs de nos villes. Voici une sélection de 19 sites où vous pourrez découvrir l'univers du stencil art.

Contemporary Graphic Design by Taschen

2009-02-24T07:56:00.001+01:00

Contemporary Graphic Design by Taschen

Si vous aimez les beaux livres et si vous souhaitez avoir un aperçu de ce qui se fait de mieux dans les arts graphiques en ce moment, je vous conseille l'excellent livre "Contemporary Graphic Design" édité chez Taschen. Dans ce très bel ouvrage Charlotte and Peter Fiell nous présentent un aperçu des travaux de 115 graphistes contemporains.

Les auteurs ont choisi de présenter plusieurs œuvres par artiste (print, web, collages, montages, travaux perso) et de leur réserver une page, un espace personnel où ils nous expliquent leur travail, leurs motivations, leur vision personnelle des arts graphiques. Ainsi, nous pouvons en connaître un peu plus sur ces "nouveaux" talents et donc mieux appréhender les œuvres qu'ils nous délivrent.

Le peu de livres édités chez Taschen que je possède sont tous de très bonne qualité et celui-ci ne fait pas exception à la règle. C'est un ouvrage que je conseille pour tous ceux qui s'intéressent au graphisme et souhaitent avoir à portée de main une source d'inspiration exceptionnelle.

Le livre est disponible chez Taschen aux alentours de 30€. Le prix n'est pas excessif selon moi car la qualité de l'ouvrage est au rendez-vous. De plus, le travail de recherche des deux auteurs Charlotte and Peter Fiell est vraiment remarquable avec plus de 550 pages de visuels remarquables et d'artistes hors-pair...

Quelques liens pour finir :

> Contemporary Graphic Design : Taschen

> Contemporary Graphic Design : Amazon

Design Spartan portfolio...open!

2009-02-22T18:33:00.002+01:00

Design Spartan portfolio...open!

Gaétan Weltzer alias "Spartan" a récemment ouvert son portfolio. Vous connaissez peut-être déjà son blog "Design Spartan" dans lequel le jeune artiste nous fait partager son univers et sa passion du digital painting.

A présent, vous avez donc accès à l'ensemble de ses travaux regroupés dans ce nouveau portfolio "one page" simple mais efficace. Malgré ses 19 ans, cet artiste a déjà un fort potentiel si l'on en juge par la qualité de ses travaux.

Pour vous donner une idée de son talent voici une petite sélection d'œuvres made by Spartan :

> Photo-manipulation / Digital painting [Triptique_Geometric series]

> Digital painting [L'élémentaire de pierre / In Memory]

Après avoir vu ces quelques exemples, je pense que personne ne pourra nier le talent de Gaétan n'est-ce pas ? Pour ceux qui souhaitent en voir plus, je vous invite à vous rendre sur son portfolio pour consulter l'intégralité de ses travaux. Et si le digital art vous intéresse, rendez-vous sur son blog où vous pourrez découvrir des artistes talentueux, trouver de nombreux liens, des tutoriaux ainsi que des explications sur toutes ses réalisations. Je ne serai pas étonné que l'on entende parler de Spartan d'ici peu de temps...

Quelques liens pour finir :

> Design Spartan : le portfolio

> Design Spartan : le blog

> Interview de Gaétan Weltzer sur Pixenjoy

> Digital Painting Tutorial par Gaétan [vidéo]

The Webdesigner's idea book

2009-02-21T20:01:00.004+01:00

The Webdesigner's idea book

Vous l'aurez surement remarqué, de plus en plus de galeries de sites inondent le web... Dans le lot, on trouve quelques bonnes références dont le site Design Meltdown. Avec plus de 20.000 sites répertoriés, triés par thèmes, couleurs, layout... cette galerie créée par Patrick McNeil est un bon moyen de suivre les tendances du web design.

Voyant qu'il avait sous la main un sacré paquet de références, le créateur du site a décidé de choisir les meilleurs sites, de les classer et de les présenter dans son livre : "The Webdesigner's idea book".

La présentation est simple et efficace : 6 rubriques principales permettent de classer les sites proposés : par Types (blog, portfolio, e-commerce...), par styles (retro, collage, 3D...), par thèmes (nature, splatters, workplace...), par Couleurs, par Eléments (icons, rounded corners, ornate backgrounds...), et enfin par Structures (horizontal, tabs, one page...). Les sites sont présentés par l'intermédiaire de screenshots (de 1 à 4 selon les sites), et chaque catégorie est introduite par quelques mots de l'auteur. Petit bonus supplémentaire, vous avez également accès aux palettes de couleurs des sites (palettes présentées par le site Colour Lovers).

Même si vous pouvez tout à fait trouver l'inspiration ou vous informer des tendances actuelles via les galeries de sites sur le web, je trouve qu'il est bon de retrouver la sensation du papier, de toucher, de tourner des pages... Un peu de matériel ça ne fait pas de mal non? D'autant plus que le support est de bonne facture : papier glacé, format carré, et près de 250 pages d'exemples. A oui, dernière chose...le livre est proposé sur Amazon aux alentours de 15$, un bon rapport qualité/prix selon moi.

Quelques liens pour finir :

> The Webdesigner's idea book : en vente sur Amazon

> Site web de Patrick McNeil

> Patrick McNeil : Finding Inspiration from Design

> Web design index 8 : ZE selection de sites

Mobile Awsomeness : Inspiration web design mobile

2009-02-14T12:19:00.001+01:00

Mobile Awsomeness : Inspiration web design mobile

Quoi ? Encore une enième galerie de sites web ? Oui mais cette fois-ci, Mobile awsomeness est un site traitant du design de sites pour mobiles. En plus du classique screenshot de présentation, pour chaque site, 4 pages sont présentées ce qui permet de se faire un bon aperçu de l'ensemble. Comme sur presque toutes les galeries, un système de vote permet de donner votre avis et le flux rss vous donne la possibilité de récupérer les mises à jour en temps réel.

La rubrique : "Mobile Web ressources" est, selon moi, la valeur ajoutée du site. Si le monde du design et du développement sur mobile vous intéresse, vous trouverez ici de nombreuses ressources : une liste de livres traitant du sujet, une partie "Guides Frameworks and platforms", une liste d'outils de validation, et des liens vers des émulateurs pour tester vos sites sur une interface appropriée. Enfin, une partie entière est réservée pour l'Iphone.

Un site plutôt intéressant pour tous ceux qui souhaitent découvrir les tendances en matière de design de sites réservés aux mobiles. Sans compter sur la qualité des ressources proposées dans la rubrique "Mobile web ressources". A voir donc !

Quelques liens pour finir :

> Mobile Awsomeness : le site

> Mobi Forge : une mine d'info concernant le développement de sites pour mobiles

Designers Toolbox : une adresse très utile...

2009-02-13T20:17:00.009+01:00

Designers Toolbox : une adresse très utile...

C'est tout à fait par hasard que je suis tombé sur le site Designers Toolbox. Si vous ne connaissez pas l'endroit, voici le topo : ce site est une véritable boite à outils pour toute personne travaillant dans la création de sites web ou dans le domaine du print.

Designers Toolbox se décompose en trois rubriques principales auxquelles s'ajoute un espace personnel pour les utilisateurs souhaitant ouvrir un compte sur le site.

Dans la rubrique "Design Life" vous trouverez différents articles traitant du design en général, une sélection hebdomadaire de sites web intéressants etc...
La partie "Store" sur laquelle vous pourrez acheter de nombreuses ressources telles que des backgrounds format psd, des templates de documents divers et variés (contrats client, contrats de maintenance, devis pour travalleurs freelance etc...) ainsi que des ressources vectorielles. Autre chose intéressante, le site vous propose un outil pour créer votre portfolio. Je n'ai pas testé mais le service est gratuit les 15 premiers jours donc ça peut valoir le coup d'oeil...

Mais c'est sans doute la rubrique "Design Ressources" qui est la plus intéressante... Là c'est la caverne d'Ali Baba ! Vous pourrez y trouver de nombreuses ressources entièrement gratuites : Templates pour print (enveloppes de différentes tailles, dossiers, jaquettes de cd/dvd vierges, business cards etc...) et de nombreux outils pour vous aider dans la création de vos maquettes web.

Pour les Web designers, je vous conseille d'aller faire un tour sur le lien "Web Safe Area" où vous pourrez télécharger gratuitement des templates (format psd) de fenêtres de navigateurs (Safari,Firefox et IE) sur différentes résolutions. Dans le même esprit, via le lien "Web browser elements", le site met gratuitement à disposition les psd de tous les éléments pour vos formulaires (boutons radio, check-box, textarea, input-button, input-text, etc...) sur plusieurs navigateurs et en fonction des systèmes d'exploitation (XP, Vista, Mac). Ces ressources seront vraiment un gain de temps si vous créez des maquettes web donc n'hésitez pas à les télécharger, c'est gratuit !

Le site met également de nombreux outils à disposition : une liste des tailles standard des bandeaux web, les éléments graphiques de l'Iphone (Iphone GUI), un générateur de texte "lorem ipsum", une liste des principaux caractères spéciaux codés en html etc...

Vous l'aurez compris, Designers Toolbox est une adresse très utile, ne serait-ce que pour les nombreuses ressources et outils mis gratuitement à votre disposition.

Quelques liens pour finir :

> Designers Toolbox : le site

> Designers Toolbox : Web Browser elements

> Designers Toolbox : Web Safe Area

Template psd pour customiser Twitter

2009-02-08T17:33:00.006+01:00

Template psd pour customiser Twitter

Est-il encore nécessaire d'introduire Twitter ? Le célèbre réseau social créé il y a bientôt 3 ans est devenu au fil du temps un "lieu" quasi incontournable pour exposer ses états d'âme du moment, partager ses découvertes ou simplement pour discuter par "Tweets" interposés.

Sur Twitter il est possible de customiser sa page en changeant l'image d'arrière plan, la couleur du texte et des liens etc... Pour ceux qui souhaitent décliner l'univers graphique de leur site web ou blog sur leur page Twitter, il peut-être intéressant de passer par une maquette Photoshop avant d'appliquer les changements directement en ligne. Il est toujours plus facile de passer par une maquette avant de modifier une page web. N'ayant pas trouvé de template psd représentant précisément l'interface de base de Twitter, j'ai décidé d'en créer un moi-même.

Ayant maintenant terminé ce travail, je mets à disposition ce fichier psd. Je me suis appuyé sur une résolution de 1407px x 1200px. J'ai recréé toutes les zones modifiables, texte et liens compris. Vous n'avez donc plus qu'à ajouter votre image de fond, et changer le modèle de couleurs grâce aux options de fusion des calques. Cliquez sur la jolie boite pour télécharger le psd !

Quelques liens pour finir :

> Twitter : le site

> Detruk sur Twitter

Si le "packaging" vous intéresse, rendez-vous sur l'espace deviantArt de "Digital Phenom"...

Photoshop : Utiliser les couches pour des sélections parfaites

2009-01-25T11:14:00.001+01:00

Photoshop : Utiliser les couches pour des sélections parfaites

Aujourd'hui je voudrais vous présenter une solution rapide et efficace pour détourer des objets sur Photoshop.

Il est parfois difficile de sélectionner des images que je qualifierai de "complexes" comme par exemple des cheveux, des poils, ou tout autres petits détails.

Il existe de nombreuses méthodes pour effectuer ce genre de tâches mais je vais opter pour les couches RVB car c'est, selon moi, la solution la plus rapide et la plus polyvalente dans le sens où on pourra les utiliser pour sélectionner n'importe quel type d'objet, dans presque tous les environnements.

Pour illustrer ce petit tutoriel je vais utiliser la photographie d'une araignée (disponible ici) dont les fins poils pourraient sembler assez laborieux à détourer un à un sans l'utilisation des couches RVB...Vous pouvez cliquer sur les images pour les visualiser en taille réelle.

C'est parti !

Lorsque vous ouvrez l'image dans Photoshop, vous êtes par défaut sur la fenêtre "Calques". Vous pouvez constater que le détourage de cet animal n'est pas forcément aisé même si cela est facilité par le fond blanc. Un zoom important met en évidence de nombreux petits détails (comme les poils des pattes) qu'il serait difficile de sélectionner avec des outils tels que la baguette magique, la plume ou encore en mode masque. Je vous propose d'utiliser les couches RVB pour sélectionner notre animal.

Nous allons donc cliquer sur l'onglet "Couches" pour visualiser les couches Rouge, Vert et Bleu composant cette image. Pour ce travail de sélection en utilisant les couches, je vous conseille d'opter pour leur affichage en niveau de gris plutôt qu'en couleur. Pour basculer d'un mode d'affichage à l'autre allez dans "Edition" > "Préférences" > "Interface" > "Afficher les couches en couleur", et décochez la case pour afficher les couches en niveau de gris.

Lorsqu'on travaille avec les couches, le but est d'isoler l'objet que l'on souhaite sélectionner en augmentant son contraste avec l'arrière plan. Dans notre cas, nous allons donc "remplir" notre araignée avec la couleur noire, tandis que nous allons rendre l'arrière plan complètement blanc. Ainsi, le contraste entre l'animal et la fond sera maximum, la sélection sera donc quasi parfaite. Dans un premier temps, nous allons donc chercher laquelle des 3 couches Rouge, Vert ou Bleu, présente le plus grand contraste entre l'araignée et le fond. Nous allons donc cliquer successivement sur chacune des 3 couches pour observer le résultat. L'image ci-dessus représente le rendu en fonction de la couche sélectionnée.

Nous voyons donc que c'est sur la couche Bleue que le contraste est le plus grand. Pour ne pas détériorer notre image, nous allons travailler sur une copie de cette couche. Pour celà, soit : clic droit sur la couche Bleue : "Dupliquer la couche", soit on fait glisser la couche Bleue sur l'icone de duplication (à côté de la corbeille). Nous avons donc maintenant une couche "Bleue Copie" en bas de la pile de couches.

Rappelez-vous que la finalité de ce travail est d'obtenir une araignée entièrement noire sur un fond blanc. Pour améliorer encore le contraste, nous allons utiliser une fonction de Photoshop assez peu connue : "Appliquer une image". Le but sera de fusionner la couche "Bleu copie" sur elle-même afin d'augmenter son contraste. Pour appliquer des opérations de fusion sur les couches, une autre solution consiste à passer par la fonction "Opérations" de Photoshop ("Images" > "Opérations").

Après avoir choisi "Appliquer une image" vous devez définir quelle couche fusionner. Pour nous ce sera la couche "Bleue copie". Et vous devez choisir l'opération à appliquer, cela correspond aux modes de fusion. Nous allons opter pour le mode améliorant au mieux le contraste de l'animal. Nous choisirons l'opération "Produit" car le résultat (directement visible dans l'aperçu) semble correct. Vous pouvez maintenant valider en cliquant sur ok. La valeur chromatique de chaque pixel de la couche va donc être multipliée par elle-même. Le résultat sera donc une couche plus foncée. Attention, même si certains modes de fusion permettent un contraste maximum, ils vont engendrer la perte de certains détails de l'image. Il faudra donc trouver le meilleur compromis entre un contraste élevé et la conservation des détails de l'image.

Voici à quoi ressemble notre image après produit de la couche "Bleu copie" sur elle-même. Il reste encore certains détails à corriger car le contraste n'est pas parfait. Même s'il est difficile de s'en rendre compte sur le screenshot ci-dessus, le fond n'est pas complètement blanc et certaines parties de l'animal tirent plus sur le gris foncé que sur le noir. Nous allons donc utiliser les niveaux pour améliorer le rendu.

Pour faire apparaître les niveaux : "Image" > "Réglages" > "Niveaux" ou Ctrl + L. Pour augmenter le contraste nous allons faire glisser le curseur noir vers la droite et déplacer le curseur blanc vers la gauche. L'image ci-dessus vous présente le rendu avant-après. Même si ce n'est pas flagrant sur ce screenshot, cette opération de correction via les niveaux est très efficace lorsque vous utilisez les couches pour sélectionner vos objets.

Après correction via les niveaux, il faudra parfois apporter de petites corrections. Dans notre cas, nous voyons qu'il reste encore des parties claires sur notre araignée. Pour corriger cela, prenez le pinceau (B), opacité 100%, taille 15px, dureté 100% en mode "Normal" et peignez en noir sur les parties blanches. Petite astuce : Pour ne pas détériorer les parties déjà sélectionnées, utilisez le mode "Lumière tamisée" pour révéler les parties noires sans abîmer les parties blanches. A l'inverse, utilisez le mode "Incrustation" pour révéler les parties blanches sans modifier les parties noires. Ces 2 modes sont très efficaces lorsque vous devez améliorer le contraste d'un petit détail de l'image. On utilisera le pinceau en mode "Lumière tamisée" pour noircir un cheveux sur un fond blanc. A l'inverse on utilisera le mode "Incrustation" pour blanchir un fond gris-clair sans détériorer les parties noires de la couche.

Après le passage du pinceau, voici à quoi ressemble notre image. A première vue c'est bien! Nous avons un contraste quasi parfait. Maintenant, souvenez-vous que lorsque nous travaillons sur les couches, les parties blanches représentent les zones sélectionnées. En l'état actuel, la sélection se fera donc sur notre contour. Il va donc falloir inverser les couleurs des couches.

Pour inverser les couleurs, utilisez le raccourci "Ctrl+i". Notre araignée passe en blanc sur fond noir.

Avant de récupérer la sélection, vous pouvez corriger les derniers détails mis en évidence par l'inversion des couleurs. Si vous agissez au milieu d'une large zone noire ou blanche, utilisez le pinceau(B) en mode normal, opacité 100%. En revanche, si vous devez peindre à la frontière entre une zone noire et une zone blanche, préférez le mode "lumière tamisée" ou "incrustation" selon si vous peignez une zone noire ou blanche (cf : paragraphe plus haut). Petite astuce : voici 2 raccourcis utiles lorsque le pinceau (B) est sélectionné : Pour avoir le noir comme couleur de premier plan c'est la touche (D), pour faire basculer le noir en arrière plan et utiliser la couleur blanche en premier plan, c'est la touche (X).

Maintenant que notre contraste est parfait, nous allons transformer notre couche en sélection en cliquant sur l'icone représentée par un petit rond en pointillés en bas de la fenêtre de couches. Attention à bien cliquer sur la couche "Bleu copie" auparavant afin de l'activer.

L'araignée étant à présent sélectionnée, nous allons réactiver la couche RVB, en cliquant dessus. L'image repasse en couleurs, la sélection est toujours visible.

Afin d'utiliser cette sélection, il faut revenir sur la fenêtre "Calques" (F7).

Maintenant, utilisez l'outil de sélection (M), placez-vous à l'intérieur de la sélection et faite un clic droit : "Calque par Copier". Autre possibilité, placez-vous sur le calque de fond et utilisez le raccourci : Ctrl+J. Cela va copier l'araignée détourée sur un nouveau calque situé en haut de la pile. Pour mieux visualiser la qualité de la sélection, vous pouvez créer un nouveau calque placé sous l'araignée détourée et le remplir d'une couleur vive. J'ai utilisé du rose pour visualiser le résultat. Petite astuce : Il arrive qu'il reste une frange de 1px autour de votre sélection. Pour corriger cela, allez dans : "Calques" > "Cache" > "Retirer le cache Noir" ou "Retirez le cache Blanc". Cela aura pour effet de supprimer le surplus noir ou blanc autour de votre objet.

Ce tutoriel est maintenant terminé, le but était de mettre en évidence la puissance des couches RVB pour effectuer des sélections complexes. Si certaines parties ne sont pas assez claires, n'hésitez pas à m'envoyer un mail pour toutes explications supplémentaires. Vous pourrez télécharger l'image utilisée pour le tutoriel sur la banque d'images "Stock X-Change" à cette adresse : http://www.sxc.hu/photo/964417. Les techniques décrites dans l'article ont été mises en évidence par Scott Kelby, formateur Photoshop aux USA, rédacteur en chef du magazine "Photoshop user" et président de la NAPP (National Association of Photoshop Professionals).

Quelques liens pour finir :

> Scott Kelby : le site

> Aide Photoshop : les couches

> Aide Photoshop : les modes de fusion

> Stock XChange : le site

The Big Picture : Inspiration photographique d'Alan Taylor

2009-01-03T20:17:00.002+01:00

The Big Picture : Inspiration photographique d'Alan Taylor

The Big Picture est un photoblog faisant partie du site web du Boston Globe. 3 fois par semaine, Alan Taylor (développeur pour boston.com) y propose un dossier de photos issues de sources diverses (National Geographic, Life, MSNBC.com, Reuters, etc...). Nous sommes ici dans l'univers du photojournalisme : un sujet thématique illustré par des photographies à couper le souffle.

Actuellement vous pourrez trouver sur le site une dizaine de dossiers très diversifiés comme par exemple le championnat du monde de saut à ski, Israel et la bande de Gaza, Guatanamo Bay etc...

Ce qui différencie The Big Picture c'est clairement la qualité des photos proposées. C'est absolument incroyable. On comprend vite que nous avons à faire à des photographes professionnels (avec du materiel qui doit couter très cher...)

Voici un petit exemple de ce que vous trouverez sur le site :

The Big Picture n'est pas propriétaire des visuels. Le site exploite simplement une licence permettant de les partager en nommant systématiquement les sources. Il est donc interdit de réutiliser ces photographies sans accord préalable.

Quelques liens pour finir :

> The big Picture : le site

> Boston Globe : le site

> Kokogiak : le site d'Alan Taylor

JotForm : une aide à la création de formulaires

2009-01-02T17:10:00.006+01:00

JotForm : une aide à la création de formulaires

Si vous n'excellez pas dans la création de vos formulaires html, le site "JotForm" s'est donné pour mission de vous aider gratuitement, pour peu que vous possediez une connection Internet...

Après une inscription sur le site vous pourrez créer votre formulaire grâce à une interface très complète et intuitive. Un système de drag'n drop vous permet de déposer les éléments dont vous avez besoin à l'intérieur de votre page. Si la mise en page ne vous convient pas, vous pouvez à tout moment les déplacer avec la souris. TextArea, Radio button, Check-box, Dropdown menu, Upload button, Captcha, Rating system etc etc... Tout y est.

Vous avez la possibilité de changer le style général de votre formulaire en modifiant le background (couleurs, image de fond), la police etc... Le header et le footer sont également entièrement personnalisables (possibilité d'inclure une image notamment). Pour vous faire gagner du temps 6 templates sont proposés (Certains sont cependant difficilement utilisables...ex : post-it yellow).

Bien entendu, chaque élément du formulaire est paramétrable : taille des champs de saisie, nombre maximum de caractères, champs obligatoires ou non, options diverses... Jotform vous donne même la possibilité de placer des outils de paiement (payment tools) qui vont lier votre formulaire à votre compte (paypal ou autre) afin de proposer la vente d'objets dont vous pourrez paramètrer le contenu et les options. Une fois créé, vous pourrez prévisualiser votre travail, l'enregistrer (zip comprenant la page html, les images et les javascript) ou encore le partager.

Même si rien de vaut la création personnelle, il faut bien avouer que ce site facilite grandement la création de formulaires et constitue une solution très complète, simple d'utilisation et entièrement gratuite.

Voici à quoi ressemblent les 6 template proposés par JotForm. Le formulaire comprend tous les éléments qu'il est possible d'inclure :

Baby blue

Default style

Industrial Dark

Jot-Theme

Paper Grey

Post-it Yellow

Si vous êtes intéressés, voici l'adresse de JotForm : http://jotform.com/

Photos gratuites et libres de droits : 17 sites

2008-12-22T22:32:00.006+01:00

Photos gratuites et libres de droits : 17 sites

Il m'a semblé utile de regrouper dans un post une liste de sites proposant des images gratuites et libres de droits. Il est impossible de tous les énumérer tant ils sont nombreux sur le net. Cependant, j'en ai sélectionné 17 qui me semblent intéressants au niveau de la qualité des images qu'ils proposent, de la quantité mais également au niveau de la pertinence du tri qui en est fait.

Bajstock propose plus de 1800 images libres de droits classées par catégories. Chacune d'entre elles contient des albums présentant des photos de très bonne qualité. A noter que les anglophobes seront heureux puisque le site est en Français.

le lien : http://www.bajstock.com/main.htm

Crestock est à la base une banque d'images de très bonne qualité certe, mais payante. J'ai inclu ce site car il propose tous les jours une photographie ou une illustration gratuite. Il suffit de vous enregister (c'est gratuit) pour accéder à ce petit cadeau quotidien.

le lien : http://www.crestock.com/

DigitArt est un site qui propose des formations Maya, Photoshop et Première. Vous y trouverez également une banque d'images HD. A l'heure où j'écris ce post le site propose 240 images classées dans 40 catégories.

le lien : http://digitart.fr/banque-images.html

Dreamstime vous propose des images libres de droits en téléchargement gratuit à partir du moment où vous êtes enregistré. L'inscription est gratuite. Les images sont classées par catégories. L'ergonomie du site est assez moyenne à mon goût mais les images proposées sont de très bonne qualité.

le lien : http://www.dreamstime.com/

Free Photo Bank vous permet de télécharger des images sous licence Creative Commons. Pour toute utilisation, il faudra donc nommer l'auteur. Les images sont classées dans 15 catégories elles-mêmes composées de dossiers. Sur ce site vous pouvez voir les informations liées à la photo : type d'appareil, sensibilité, focale, vitesse etc...

le lien : http://www.freephotobank.org

Free Pixels a misé sur un tri assez poussé. Vous pouvez choisir parmi des catégories, faire une recherche libre, choisir dans une liste déroulante ou encore au sein d'un nuage de tags. Les images proposées sont de bonne qualité et vous n'avez pas besoin de vous inscrire pour les télécharger.

le lien : http://www.freepixels.com

Free Range Stock ne propose pas de catégories mais vous pouvez faire une recherche sur un ou plusieurs termes ou sur un nom de photo. Vous devez vous inscrire pour télécharger les photos.

le lien : http://www.freerangestock.com

Image After propose un vaste choix d'images et de textures gratuites à utiliser pour vos projets personnels ou professionels. Tout est classé par catégories. Ne pas se fier au design plutôt archaïque, ce site est un must.

le lien : http://www.imageafter.com

La Logothèque est la solution si vous cherchez des ressources vectorielles (logos ou autres). De nombreuses catégories sont proposées ainsi qu'un forum dans lequel on pourra vous aiguiller dans votre recherche...

le lien : http://www.lalogotheque.com/fr/logotheque.php

Lost & Taken propose des textures de toutes sortes. Un nuage de tags assez original permet de cibler votre recherche. Le site dispose également d'un store où vous pourrez trouver textures, ressources vectorielles et brushes pour 2€.

le lien : http://www.lostandtaken.com/

Mandolux est le site de "Mando Gomez". Il y propose ses photos dans différents formats. Il y a assez peu d'images mais la qualité est excelente... Pas de catégorie, que des archives classées par années. A la base, le téléchargement est gratuit mais vous pouvez faire un don via paypal.

le lien : http://www.mandolux.com/

Morgue File vous propose 7 catégories de photos elles-même décomposées en sous-rubriques. Là aussi, vous pouvez avoir accès aux données propres à l'image (nom de l'appareil, exposition, focale, vitesse etc...) lorsque celles-ci ont été renseignées. La qualité des photos est bonne.

le lien : http://www.morguefile.com/

Open Photo vous permet de télécharger gratuitement des photos de très bonne qualité, gratuitement. 20 rubriques de tri, pas besoin de s'inscrire pour télécharger les images.

le lien : http://www.openphoto.net/

Photogen propose de nombreuses catégories et une option de recherche avancée. Ici il vous faudra vous inscrire pour avoir le droit de télécharger les photos.

le lien : http://www.photogen.com/

StockVault est l'un des sites les plus complet dans le domaine de l'image libre de droits. De nombreuses catégories et sous-catégories de recherche. Des images d'une très bonne qualité et nul besoin de s'enregistrer pour télécharger. Bref, un site que je recommande vivement.

le lien : http://www.stockvault.net/

Stock XChange est, tout comme StockVault, une référence. Même si un enregistrement est nécessaire pour avoir accès aux images, la qualité et la quantité en valent la peine. Le site propose également une partie payante. Si l'envie vous dit d'acheter une photo, je vous conseille de vous ballader dans la partie gratuite car on y retrouve parfois les mêmes images...

le lien : http://www.sxc.hu/

Texture king sera la dernier site de cette liste. Comme son nom l'indique, le site vous propose de nombreuses textures, classées en catégories. Ici, tout est gratuit et libre de droits. La qualité est au rendez-vous donc si vous cherchez des textures, je vous conseille cette adresse!

le lien : http://www.textureking.com/

Mise à jour de cette liste suite aux commentaires...

Pixelio est un autre site que je ne connaissais pas. Mais comme j'écoute attentivement les remarques de mes lecteurs :) , alors je suis le commentaire de Bango qui fait référence à ce dernier site de téléchargement d'images. Attention, ici mieux vaut parler Allemand... Il faudra vous enregistrer pour pouvoir télécharger les visuels. Si comme moi vous ne comprenez pas tout de cette langue, Google traduction pourra très certainement vous aider...

le lien : http://www.pixelio.de/

J'ajoute également Photo Libre à la liste suite au commentaire de Ja Web Studio. Le site est Français, pas besoin de s'inscrire pour télécharger. Les photos sont de bonne qualité. 21 rubriques, plus de 7000 photos à télécharger gratuitement. Le site interdit cependant l'utilisation commerciale des images et il vous faudra mettre un lien renvoyant sur "Photo Libre".

le lien : http://www.photo-libre.fr/

Adobe Configurator 1.0: Ultime personnalisation de Photoshop CS4

2008-12-20T12:09:00.014+01:00

Adobe Configurator 1.0 : personnaliser Photoshop CS4

Depuis l'arrivée de Photoshop CS4 et de sa version extended, les possibilités créatives se sont démultipliées. A présent, grâce au nouvel outil de transformation de Photoshop CS4 "Echelle basée sur le contenu", nous pouvons transformer une image carré en image panoramique sans déformation outrancière. Nous avons maintenant la possibilité de créer de nouveaux objets 3D et agir sur leurs propriétés, les peindre, etc... Bref, ces nouvelles moutures CS4 et CS4-extended ouvrent la voie vers de nouvelles possibilités créatives très prometteuses.

Comme si cela ne suffisait pas, Adobe nous offre maintenant la possibilité de customiser l'interface de Photoshop grâce au puissant outil d'Abode Labs : Adobe Configurator 1.0

Avec ce nouveau plugin vous allez pouvoir créer des palettes d'outils entièrement personnalisées. L'interface est très intuitive grâce à la technologie offerte par Adobe Air. Un système de glisser-déposer vous permet de poser dans votre future palette d'outils tout ce dont vous aurez besoin.

Par exemple, vous faite du Webdesign, vous avez régulièrement besoin de : créer des nouveaux documents au format web. Vous ferez alors glisser un bouton "action" dans votre fenêtre auquel vous assignerez l'action "créer un nouveau document format 800x600, 72dpi, arrière plan transparent." Et voilà! Bien entendu, il vous faudra au préalable créer tous vos scripts dans Photoshop et bien les nommer afin de pouvoir les utiliser dans Adobe Configurator.

A première vue, il n'y a pas de différence avec les scripts Photoshop si ce n'est que là, tout sera disponible dans une seule et même palette, que vous allez nommer comme bon vous semble et à laquelle vous pourrez accéder très facilement dans Photoshop.

Adobe Configurator vous permet de faire glisser dans votre nouvelle palette tout ce que vous offre Photoshop. Tout est réparti dans 4 onglets à gauche : "Tools" pour les outils, "Commands" pour les fonctions comme "ouvrir un document, charger des formes, afficher l'histogramme, afficher en cascade les documents ouverts etc etc. Le troisième onglet regroupe les actions. C'est grâce à cet outil que vous pourrez ajouter des boutons d'action dans votre palette.

Enfin, l'onglet "Widget" vous permet d'ajouter des images (locoal ou web), un player pour y charger des vidéos Flash, et enfin, du texte (pratique pour le texte lorem ipsum qui sera maintenant accessible directement dans Photoshop!...)

Avec cette fonctionnalité Widget, vous aurez compris qu'Adobe Configurator ouvre la voie à un tout nouveau type de tutoriaux...interactifs. A présent, vous pourrez suivre pas à pas les étapes de votre tutoriel et cliquer sur les différents boutons de la palette pour exécuter les actions. Si cela ne suffit pas, vous visionnerez la vidéo pour voir comment l'auteur a réalisé telle ou telle étape du tuto. Bref, une révolution ! Je suis sûr que nous verrons apparaitre d'ici peu une foule de nouveaux tutoriaux de ce nouveau genre.

Il me semble qu'Adobe Configurator est un outil qui va révolutionner notre façon d'utiliser Photoshop et ouvre une nouvelle voie dans la réalisation de tutoriaux interactifs. Le chemin vers des interfaces personnalisées et interactives est tout tracé. Pour finir, si vous souhaitez utiliser Adobe Configurator, il vous faudra Photoshop CS4 ou CS4-Extended. Le logiciel fonctionne grâce à Adobe Air que vous devrez donc installer si vous ne l'avez pas déjà fait. Enfin, Adobe Configurator 1.0 est entièrement gratuit et disponible sur le site Adobe Labs. Have fun...

Quelques liens pour finir :

> Adobe configurator 1.0 : le logiciel > Adobe Air sur Adobe.com > Article de John Nack à propos d'Adobe Configurator (en) > Adobe configurator 1.0 : présentation vidéo (en)

PS : Je peux partager la palette "Webdesign" créée pour cette présentation et visible en screenshot. Si vous êtes intéressé demandez-moi et je vous l'enverrai...

Aviary : Des outils de création en ligne entièrement gratuits

2008-12-17T22:55:00.009+01:00

Aviary : Des outils de création en ligne entièrement gratuits

Si Aviary s'est donné pour mission de "rendre la création accessible à tous", on peut considérer que c'est en partie chose faite avec la suite aviary tools.Cet ensemble de logiciels disponibles en ligne gratuitement se compose pour le moment de 3 outils en version beta :

- Phoenix pour la création et la retouche d'image. Cet outil ressemble un peu à Photoshop. Vous pourrez y retrouver le système de calques, les filtres, les options de fusion. Vous créez de toute pièce votre image ou vous l'importez depuis votre pc ou depuis le net. Une palette d'outils propose des formes de selection, baguette magique, pinceaux, formes, etc... Bref, si vous utilisez Photoshop, vous ne serez pas vraiment perdu.

Screenshot Phoenix

Avec Peacok, Aviary propose un nouveau moyen de créer des images. A première vue c'est assez perturbant mais après quelques minutes on comprend de suite la logique. Dans cette interface, les outils sont présentés sous forme de fenêtres que l'on peut connecter entre elles afin d'y ajouter des effets.

Ex : Pour appliquer un réglage d'histogramme à votre image, il vous suffit de connecter le module "layer" (qui est la base de votre image) au module histogramme. En double cliquant sur chaque module, on accède à leurs paramètres. C'est un système très efficace et incroyablement riche d'effets et de filtres en tous genre. L'interface de Peacock est une solution vraiment créative qui ouvre de nouvelles voies, très intéressantes d'un point de vue ergonomique.

Screenshot Peacock

Toucan est un logiciel permettant de jouer avec les couleurs. Les solutions qui proposent ce service sont nombreuses : ColourLover, Kuler, ColorBlender, Color Palette generator, 9rules logo color etc etc... Rien de bien nouveau donc, si ce n'est que chez Aviary, tout est à portée de main. On peut définir des couleurs directement à partir de la roue colorimétrique, dégager les couleurs composant une image préalablement uploadée, enregister ses propres nuanciers et visualiser les compositions des autres utilisateurs bref, tout est là.

Screenshot Toucan

La suite d'outils Aviary est en constante évolution. De nombreux logiciels viendront s'ajouter à la liste :

- Raven : création vectorielle (disponible en version Alpha pour les utilisateurs ayant un compte)

- Myna : Audio editor

- Eagle : Pixel pattern recognition

- Owl : Desktop publishing

- Penguin : Word processor

- Pigeon : Painting simulator

- Hummingbird : 3D modeler

- Ibis : Font creator

- Roc : Music generator

- Starling : Video editor

- Tern : Terrain generator

Quelques liens pour finir :

> Aviary Tools : le site > Aviary : Phoenix > Aviary : Peacock > Aviary : Toucan

Tutoriel Photoshop : Utilisation du Halo

2008-12-14T16:43:00.016+01:00

Tutoriel Photoshop : Utilisation du Halo

L'utilisation du halo de lumière dans Photoshop peut parfois dérouter. Je m'explique... Si votre document comporte un seul calque et que vous souhaitez ajouter un halo sur l'image, pas de souci. Vous activez le seul calque en cliquant une fois dessus puis vous allez dans "Filtre" > "Rendu" > "Halo".

La difficulté arrive lorsque l'image comporte plusieurs calques et que vous souhaitez ajouter un halo sur toute l'image. Le problème réside dans le fait qu'un halo ne peut-être appliqué que sur un seul calque et qu'il s'étendra sur les éléments qui le composent mais pas au delà.

Une première possibilité consiste à créer un nouveau calque en aplatissant les éléments existant [Maj+Ctrl.Alt+E un raccourci très utile]. Le problème c'est qu'avec cette opération, vous ne pourrez plus modifier votre image...

Il existe une petite astuce qui vous permet d'ajouter un halo sur un calque "invisible". Seul la lumière du halo se verra et elle s'étendra sur la surface que vous souhaitez.

Pour cet exemple on va imaginer que le halo devra pouvoir s'étendre sur toute l'image. Donc, voici la marche à suivre en 5 étapes...

Premièrement on sélectionne toute l'image [ctrl+A]

Ensuite on créé un nouveau calque [ctrl+Maj+N] que l'on va placer en haut de la pile

On va remplir ce nouveau calque avec un gris neutre [MAJ+F5 pour remplir et on choisit 50% gris]

A présent, nous allons changer le mode de fusion qui est défini par défaut sur "Normal" pour choisir le mode "Lumière Crue". La couleur grise qui remplissait le calque est maintenant invisible.

Maintenant on peut placer notre halo sur ce même calque [filtre > rendu > halo].

C'est terminé, notre halo de lumière s'applique bien sur la totalité de notre image. On peut même le faire disparaitre en masquant le calque sur lequel il s'applique. Si l'éclairage ne vous convient pas, vous pouvez également tester cette astuce avec les autres modes de fusion de type "lumière" (tamisée, ponctuelle etc...)

Inspiration : modèles de navigation créatifs

2008-11-30T10:24:00.009+01:00

Inspiration : modèles de navigation créatifs

La navigation est un élément central des sites web. Les webmaster, web designer et autres graphistes savent parfois mettre en œuvre toute leur créativité pour placer l'utilisateur au centre du dispositif de navigation. Le meilleur moyen de capter l'attention de l'internaute c'est de lui donner les moyens de vivre le web et non de le parcourir simplement.

Amaztype

Bio-Back

Conclave Obscurum

D'art Design Gruppe

Don't Click

Feel the power

Fly Me to the moon

Freedom and Partners

The Glue Society

Guraphic Design

Jaquelyn A. Guevara

James Reid Graphic Design

Johnny Slack

Kamikadze

Mercedes A to S

M Studio

Nina Durdevic

Opalworks

Pedro Tabasco

Pencil Rebel

Self Titled

Semillero

Sprite test laboratories

Stompfrog

The Creative mind

Tongsville

TreLink

XRS Nowe Media

Melissa Hie

Nuuro

Inspiration : sites web et 3D

2008-11-11T14:59:00.009+01:00

Inspiration : sites web et 3D

Un post un peu particulier aujourd'hui puisque c'est le premier du genre. Je vous propose une sélection de sites web utilisant la 3D. Si ce type d'articles vous intéresse, d'autres pourront suivre. Si vous avez des remarques ou des suggestions à formuler, n'hésitez pas !

Absolut Vodka

Audi R8

Coca Cola

Designsul

Domenico Tedone Design

The eco zoo

Eminem

Fabric Estudios

Get the Glass

Iam Studio

Julian Velard

Karim Charlebois portfolio

Mathieu Badimon Lab

Leo Burnett agencies

Lumina Live

MCBD

Moon Palace

Spectra Visual Newsreader

NeoStream interactive

99_Noventaynueve

Rudebox (Archives uniquement)

Section Seven

Sukiland

White Void

Posteet : une mine de codes

2008-11-08T10:07:00.008+01:00

Posteet : une mine de codes

Vous avez enfin trouvé le code css permettant d'importer des polices dans votre site et vous aimeriez bien pouvoir garder ces quelques lignes que vous réutiliserez surement...A l'inverse, vous cherchez comment cibler Firefox3 en css, calculer le temps d'exécution d'un code php, ou créer un fichier compressé tar.gz sur un serveur Unix ? Ça tombe plutôt bien car le site Posteet permet de stocker vos bouts de code sur le net et bien entendu de les mettre à disposition gratuitement.

Un moteur de recherche vous permet de faire votre choix parmi les nombreuses catégories. Le site propose des réponses à vos question sur de nombreux langages, plateformes et systèmes : HTML, CSS, Javascript, PHP, Linux, Shell, Bash, Apache, MySQL, SVN, etc etc...

Une inscription suffit pour uploader vos petites astuces et les proposer aux internautes. Mieux, si vous disposez d'un compte, vous pouvez ajouter un lien vers Posteet sur votre site pour permettre aux utilisateurs qui naviguent dessus de créer des posteets à partir du contenu de votre site directement sur leur compte posteet. Petit luxe supplémentaire, le site est proposé en Français (et en Anglais).

Quelques liens pour finir :

> Posteet : le site > Bout2code : un autre site

Web Design Index 8: les tendances 2008

2008-11-05T22:05:00.008+01:00

Web Design Index 8 : les tendances 2008

Le nouveau "Web Design Index" est disponible dans les librairies depuis fin Octobre. Pour ceux qui ne connaitraient pas, "l'index de modèles de sites web" est un ouvrage faisant référence dans le domaine du web design.

Les sites présentés ont été sélectionnés sur Webdesignindex.org. Le processus de sélection met l'accent non seulement sur l'aspect visuel mais également sur la fonctionnalité et l'utilisation novatrice de nouvelles technologies.

Concernant la présentation, rien de plus simple...un screenshot par site, 3 screenshots sur chacune des pages du livre. Pour chacun, le nom du designer, du développeur, producteur, agence de conception et adresse du concepteur. De plus, le livre est accompagné d'un cdrom reprenant l'intégralité du contenu sous forme de diaporama avec liens renvoyant sur le web et aperçus vidéo des sites comprenant des animations. Bref, un must.

Cet ouvrage, qui en est à sa 8ème édition, est publié chaque année par "The Pepin Press". Il s'accompagne de "Webdesign Index by Content" (en Français : "Index de modèles de sites web par contenu") qui propose pour sa part un classement des sites web par catégories. Chaque livre est vendu aux alentours de 25€.

Quelques liens pour finir :

> Web design index : le site > The Pepin Press : l'éditeur

The Luminarium : 4ème Showcase

2008-10-21T07:16:00.009+02:00

The Luminarium : 4ème Showcase

Le collectif d'artistes The Luminarium propose au public son quatrième showcase : "Prismatic".

Si vous ne connaissez pas cette place sur le web, je vous la conseille. Visuellement, cette seconde version du site est un régal. Créé entièrement avec Flash, l'ensemble est très esthétique et ergonomique de surcroît.

Le site propose pour le moment 4 galeries, dont la dernière : Prismatic, qui impressionne par la qualité graphique de certaines œuvres. A chaque nouveau showcase, le collectif met un artiste en avant. Pour Prismatic c'est "Lev Savitskiy" qui répond à quelques questions. Vous pourrez ainsi découvrir son parcours, ses sources d'inspiration, sa place au sein du collectif...

Je vais terminer ce post par quelques screenshots des œuvres proposées pour "Prismatic"

Quelques liens pour finir :

> The Luminarium : le site > The Luminarium sur Deviant Art > Lev Savitskiy sur Deviant Art

Gerard Ferrandez : la passion du dhtml

2008-10-17T21:23:00.019+02:00

Gerard Ferrandez : la passion du dhtml

Ca fait longtemps que je voulais présenter les travaux de Gérard Ferrandez sur ce blog. Ce passionné de code a développé son art dans la maîtrise du "dhtml art" et il partage tout sur son site dhteumeuleu.com.

Vous pourrez voir de quoi il est capable, et ça en vaut la peine. Je suis assez impressionné par le nombre de ses projets, par sa technique mais également par sa créativité. Gérard Ferrandez a travaillé sur de nombreux projets : galerie 3D, 3D Parallax Scrolling, animation 3D, jeux de typo etc etc...

Si certains travaux vous intéressent, vous avez accès à toutes les sources. Le tout est sous contrat Creative Commons. Petit rappel : ce type de contrat vous autorise à reproduire, distribuer et communiquer ses créations au public. Vous pouvez également les modifier. Dans tous les cas vous devez citer le nom de l'auteur et vous ne pouvez pas utiliser le code pour un projet commercial.

Pour vous faire une idée plus précise du travail, voici plusieurs screenshots de quelques uns de ses projets. Toutefois, je vous invite vivement à aller faire un tour sur son site car le premier intérêt c'est surtout l'interactivité. Allez tester en live, c'est parfois assez intrigant...

Quelques liens pour finir :

> Dhteumeuleu : le site de Gérard Ferrandez

Quelques uns de ses projets

> Autumn2 : Gallerie 3D > Forgotten World : Galerie 3D > Parallax3 : 3D PArallax Scrolling > Mandatory Upgrade > Distance and Perception : Galerie > Tomorrow Again : conceptuel > I could not stop : Jeu

Monster edays : premier salon virtuel du recrutement

2008-10-12T16:50:00.002+02:00

Monster edays : premier salon virtuel du recrutement

Du 13 au 22 Octobre 2008 se tient le premier salon virtuel dédié au recrutement dans le secteur des nouvelles technologies. Cette initiative proposée par Monster a pour but d'ouvrir "de nouvelles perspectives au marché du recrutement en ligne et entend démocratiser l'usage du virtuel dans le monde de l'entreprise."

C'est avec grand étonnement que j'ai donc reçu une invitation jeudi dernier afin de participer à ce salon d'un nouveau genre, un univers type "Second Life", mais entièrement dédié au recrutement. Pour rencontrer les entreprises dans leur jolis stands en 3D, vous devez simplement télécharger et installer un logiciel puis vous créer un compte...C'est quand même pas mal de pouvoir rencontrer des entreprises sans se déplacer de chez soi :).

Lorsque vous vous connectez pour la première fois vous pouvez remplir un CV qui sera accessible à tous les recruteurs présents sur le salon. Vous pouvez également passer un test d'affinités qui vous permettra d'être mis en relation avec une liste de recruteurs s'intéressant plus particulièrement à votre type de profil. Ensuite, c'est assez simple...vous n'avez plus qu'à postuler pour l'offre qui vous plait afin d'entrer en relation avec la personne qui s'en occupe. Cool non ?

Il y a plusieurs moyens de communication mis en place. Vous pouvez discuter via un chat, ou via votre webcam. Une liste vous indique quels sont les autres participants au cas où vous vouliez discuter un peu entre deux stands... Un animateur est également toujours présent pour répondre à vos questions au cas où vous soyez un peu perdu. Personnellement j'ai trouvé que l'interface était un brin compliquée à première vue mais ce sont surtout les problèmes de lenteurs qui m'ont découragé. Celà étant, les organisateurs assurent qu'il s'agissait d'un problème technique ponctuel, qui ne devrait pas pas se reproduire par la suite. En gros, je n'ai pas eu de chance...

Côté technique, la plateforme des Monster edays a été réalisé en AS3, par la société Imaste-IPS, leader sur le marché espagnol dans la conception et la réalisation de salons virtuels dédiés au recrutement.

En mettant en relation recruteurs et candidats au sein d'un espace ludique et interactif, Monster ouvre la voie à un nouvel outil de communication dans le monde du recrutement. Si vous cherchez un taf dans le secteur des nouvelles technologies, vous savez où vous rendre maintenant...

Quelques liens pour finir :

> Monster.fr > Les Monster eDays > Le Kit Media Interactif : plus d'infos sur le salon > Korben : les monster eDays

[Design Solutions] by Guspim

2008-10-07T23:10:00.000+02:00

[Design Solutions] by Guspim

Web Designers, Webmasters et autres Graphistes, notre métier nous oblige à une veille créative permanente afin de mieux cerner les nouvelles tendances. En ce qui me concerne je ne suis malheureusement pas un de ces génies qui réussissent à lancer de nouvelles tendances créatives mais plutôt un "suiveur" malgré-moi. C'est peut-être une étape obligée pour "nous" les futurs dieu du web design (rire).

Ainsi, il m'est très utile de voir ce qui se passe sur le web afin de comprendre, d'apprendre, de modifier pour enfin arriver à quelque chose qui me ressemble... C'est en ce sens que je voudrais partager une adresse utile.

Il se surnomme "guspim" et adore faire des screenshots (ça tombe bien moi j'aime pas trop). Ainsi, sur sa page flickr, guspim propose une multitude de screenshots issus de nombreux sites web.
Vous pourrez y trouver de nombreux exemples de pages 404, de headers, footers, des solutions de présentation pour barres de recherche, formulaires, breadcrumbs, boutons, modules de commentaires etc etc...
Bref, c'est vraiment une bonne adresse si la créativité vient à vous fausser compagnie...

Je ne pouvais terminer sans citer l'excellent site Pattern Tap qui propose également de nombreux exemples créatifs en matière de web design...

Quelques liens pour finir : d'autres sources d'inspiration

> Les classeurs de FactoryJoe sur flick'r > WebdesignerWall_2008 Design Trends > Smashing Magazine : exemples de formulaires > Elements of design : Design Showcase > DesignMag : 101 Awesome Portfolio Sites > Function : 32 Examples of Websites with a Brave colour Scheme

Cheat sheets pour webdesigner

2008-09-27T22:03:00.014+02:00

Cheat sheets pour webdesigner

Ca date un peu mais c'est toujours utile...Je suis tombé sur Added Bytes, un blog qui propose des "Cheat sheets"...Autrement dit, des feuilles "mémo" traitant de sujets tels que : le HTML, les CSS, le Javascript mais aussi sur le language SQL ou encore les commandes SVN (pour ceux qui connaissent)...
Tout est entièrement gratuit, téléchargeable en version pdf ou en png et assez bien foutu même si réussir à caser, sur un format A4, la quasi-totalité des balises html ou des propriétés css engendre parfois une densité d'information à la limite du compréhensible...mais passons.

Ca peut toujours être utile d'avoir dans un coin ce genre de petit récap non ?!

Quelques liens pour ceux que ça intéressent...

- le blog AddedBytes
- le blog SIX Revision qui propose également 28 cheat sheets.

IE6, png et background-image : une solution

2008-09-07T23:57:00.015+02:00

IE6, png et background-image : une solution

Au fil de mes recherches sur le web j'ai trouvé un moyen pour afficher des images au format png24 sous IE6 lorsqu'elles sont placées en background-image.
Il existe de nombreux moyen d'afficher des png sous IE6 : pngfix.js , pngbehavior.htc, iepngfix.htc, etc..

Or, lorsqu'il s'agit de background-image, toutes ces méthodes ne fonctionnent plus.

Une solution partielle existe : Les filtres AlphaImageLoader.

C'est quoi ?

Je vais reprendre la petite explication du site Alsacreation car tout y est dit :

"À partir de la version 5.5, Internet Explorer intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L'une de ces manipulations graphiques consiste à intercaler, entre le fond d'un bloc et son contenu, une image avec transparence graduelle."

Comment ça marche ?

Dans cet exemple, je souhaite intégrer une image de fond dans un div dont la class est : "png-test".

code css :
.png-test{
float:left;
background:url(pngico.png) 0 0 no-repeat;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png');
width:128px;
height:128px;
}

Explication : On cible IE6 grace à l'étoile * puis on supprime le background pour le remplacer par le filtre AlphaImageLoader.

Mais...

Comme tout n'est jamais parfait cette technique comporte quelques inconvénients : la propriété background-position n'est pas prise en compte sous IE6, et la propriété background-repeat n'est prise en compte que partiellement. Pour que votre image en png se répète dans le div conteneur, il faut utiliser "sizingMethod="scale".

exemple
.png-test{
float:left;
background:url(pngico.png) 0 0 repeat-y;
*background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngico.png','sizing-method=scale');
width:128px;
height:128px;
}

Autre inconvénient majeur, il est impossible d'utiliser cette technique pour des liens avec un changement de l'image de background lors du rollover...Ca c'est con.

Quelques liens pour terminer

> Alsacréation : les filtres AlphaImageLoader
> Microsoft : AlphaImageLoader

CV:vous recherchez l'inspiration?

2008-07-06T20:29:00.017+02:00

CV:vous recherchez l'inspiration?

Si vous êtes en manque d'inspiration pour construire votre CV, vous pouvez aller faire un tour du côté de JobMob.

Ce site créé par Jacob Share, ancien project-manager d'Amazon, propose d'offrir un espace de rencontre entre recruteurs et chercheurs d'emploi. L'article sur lequel je vous renvoie vous présente plusieurs manières d'aborder la construction de votre CV au travers de 36 exemples concrets...Même si tous les CV de la liste ne sont pas forcément construits de façon très judicieuse (à mon humble avis), dans tous les cas, cela peut toujours constituer une petite base lorsqu'on est à court d'idée...

Joolz : graphic-designer Français à découvrir

2008-07-02T23:41:00.013+02:00

Joolz : graphic-designer Français talentueux

Découverte sur Julien Morel, alias "Joolz"... Ce jeune graphic-designer Freelance nous fait découvrir ses créations : Print, travaux vectoriels et Motion design...sur son portfolio. Certe, il y a assez peu de travaux présentés comparé à d'autres portfolios mais la qualité compense

Une grande clarté, un souci du détail et un habile jeu de lumières et de perspectives...tels seraient mes mots pour qualifier son travail.

Si son univers vous intéresse, Joolz dispose également d'un blog et d'une page Myspace

A découvrir...

Detruk change de look

2008-07-02T22:45:00.009+02:00

Detruk change de look

Ca faisait longtemps que je voulais le faire. Maintenant c'est fait ! Ce blog s'offre un nouveau "design" et même un design tout court à en juger par l'aspect graphique catastrophique des premiers temps...
Pour en juger, Detruk avant c'était ça

Si vous avez des suggestions, si selon vous, je me suis complètement planté, si au contraire ça vous plait bien, n'hésitez pas à vous exprimer...Les critiques sont toujours bonnes à prendre.

Réflexion autour du clic...

2008-06-06T22:32:00.013+02:00

Réflexion autour du clic...

Un petit post pour vous faire part d'un site réalisé par Alex Frank. Il s'agit d'une réflexion autour du clic de souris. La réalisation est assez exceptionnelle puisque cet ex-étudiant de l'université de Communication-Design d'Essen-Duisburg en Allemagne, a imaginé et conçu une navigation où le clic est purement et simplement banni... Le roll-over suffit à vous balader au travers des différentes rubriques d’un site entièrement réalisé en Flash

Ainsi, vous allez découvrir l'histoire du clic et ses enjeux ergonomiques et marketing. L’auteur présente également quelques solutions alternatives à notre bon (trop ?) vieux clic de souris. Une option intéressante vous permet de revoir les 20 premières secondes passées sur le site grâce à un enregistrement du déplacement de votre souris (A ce jour, il y a 15372 enregistrements en stock). Très instructif de voir comment nos habitudes de navigation sont mises à mal face à une ergonomie peu conventionnelle (mais néanmoins particulièrement efficace).

Avant de finir, vous pouvez passer par la rubrique "communicate" où vous pourrez donner votre avis mais aussi voir les réactions de vos prédécesseurs.
Ce site commence à dater (2005 aie...) mais il reste encore d'actualité puisque je n'ai pas vraiment entendu parler de nouvelles réflexions autour de ce sujet...

Si vous avez envie de tester par vous-même votre capacité à ne pas cliquer, et si vous voulez admirer l'énorme boulot d'Alex Frank c'est par ICI

liste déroulante avec images

2008-05-02T19:33:00.013+02:00

Liste déroulante avec images

En cherchant à ajouter des images au sein d'une liste déroulante en html, je me suis aperçu que c'était impossible de façon "classique". On ne peut pas ajouter de balises <img> après la balise <option > d'une liste.

Petit rappel :
pour créer une liste en html la syntaxe est la suivante :

< select name="nom de la liste" size="1" >
< option>choix1 </option >
< option>choix2 </option >
< option>choix3 </option >
< /select >

on obtient ainsi :

Mon but était d'insérer des pictos au début de chaque ligne de la liste
La solution que j'ai trouvé s'appelle : dhtmlxCombo

La procédure

Bon, j'avoue que c'est un petit peu long mais lorsqu'on veut quelque chose... on fini souvent par oublier l'énergie qu'on a dépensé pour y arriver n'est-ce pas?!...

1) Téléchargez les fichiers Javascript et css nécessaires sur le site officiel : ici
2) Pour cet exemple je ne vais m'attarder que sur l'insertion d'images au sein d'une liste déroulante mais dhtmlxCombo propose une multitude d'autres possibilités...

Vous avez besoin de 3 fichiers Javascript et un css... Donc, pour commencer, voici comment doit se présenter l'entête de votre page :

La première ligne sert à spécifier dans quel dossier aller chercher certaines des images nécessaires pour afficher la liste. Ensuite on spécifie le chemin du css puis des 3 Javascript.

3) L'opération va se dérouler en 2 temps : premièrement on va créer la liste déroulante dans un fichier xml, deuxièmement on va l'appeler dans la page html via un peu de code Javascript couplé à un brin de css... (j'avais prévenu c'est un peu fastidieux pour une petite liste déroulante illustrée...

Pour créer votre liste ça se passe dans le fichier data.xml.
exemple :

<complete>
<option value="1" img_src="../images/firefox.gif">choix1</option>
<option value="2" img_src="../images/ie.gif">choix3</option>
<option value="3" img_src="../images/opera.gif">choix3</option>
</complete>

ensuite...
dans votre page html, vous appelez la liste déroulante comme ceci :

C'est avec l'id du div ("combo_zone2") que vous aller charger votre liste déroulante grâce à un petit bout de code javascript :

Le résultat :
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Votre navigateur ne peut malheureusement pas afficher de cadre incorporé: Vous pouvez appeler la page incorporée&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; par ce lien: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.comonweb.info/tests/dhtmlxCombo/samples/options/test.html"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Résultat&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

14Ko pour un MarioBros en Javascript

2008-04-09T23:58:00.009+02:00

14Ko pour un MarioBros en Javascript

J'ai découvert sur le blog de Nihilogic qu'il est possible de recréer (en partie) le jeu MarioBros en... ... ... Javascript ! Je n'imagine même pas le nombre d'heures passées à réfléchir et à coder..Un foufou de la prog et un joli résultat.

Vous pouvez jouer sur une interface simple ou double taille, avec ou sans la célèbre musique que nous connaissons tous. Le jeu a été recréé en version très allégée (pas de champignon ni de fleur, pas d'autre niveau ...) mais néanmoins très ressemblante à l'original au niveau du graphisme ... et tout tient dans 14ko de js ! Le but pour le créateur était de tenter de minimiser le poids autant que possible. Ainsi, tout a été refait en js, il n'y a aucune image externe et chaque sprite n'excède pas les 60boctets... Une performance à mes yeux...pour moi qui misère en Javascript.

C'est beau les gens motivés :)

> le blog
> le jeu (grande taille, sans son)

Anton Granik : un jeune graphic designer à découvrir

2008-04-03T22:53:00.010+02:00

Anton Granik : un jeune graphic designer à découvrir

C'est par hasard que je suis tombé sur le site perso d'Anton Granik.
Vous pouvez y découvrir tous ses travaux : print, web, créa 2D, 3D, Photographies...
En plus de la maitrise des logiciels de création numérique 2D, 3D, ce jeune designer possède également une créativité à toute épreuve que vous pouvez notamment juger au travers de ses travaux présentés. Mon coup de cœur va tout particulièrement en direction d'une série de visuels...
"Just for fun", c'est le petit mot d'Anton à propos d' "Absolut", une collection de visuels 3D autour du nom et de l'univers décalé de la célèbre marque de Vodka.

Aller... quelques exemple pour le coup d'œil...

Vous pouvez visiter le site d'Anton Granik à cette adresse : http://granik.com/

Navigateur et cache : une alternative au ctrl +F5 ...

2008-04-01T20:02:00.014+02:00

Navigateur et cache : une alternative au ctrl +F5 ...

Cette phrase vous rappelle t'elle quelque chose ?

"Après chaque modification sur les pages de mon site web, lorsque je veux voir le résultat dans mon navigateur, il arrive que certaines d'entre elles ne soient pas prises en compte, même après avoir rafraichi la page via F5..."

Un exemple pour comprendre d'où vient le problème...
Vous avez un beau site web que vous faite évoluer constamment. Vous êtes donc amené, entre autre, à modifier les css (pour modifier certaines images par exemple)
Dans votre header, vous faites appel à une feuille de style externe qui se nomme "style.css" avec un petit bout de code sensiblement identique à celui-là :
{link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /}

Lorsque vous allez modifier cette feuille de style, vous n'allez pas l'enregistrer sous un nom différent et par la même occasion modifier son appel dans votre header. Vous aller faire vos modifs et enregistrer via "ctrl+s", tout simplement. Les modifications sont prises en compte, et vous n'avez pas eu à modifier l'appel à cette feuille de style dans votre header.

Lorsque vous allez recharger votre page dans votre navigateur, celui-ci va parcourir le code, s'arrêter sur le : href="css/style.css" et là... oh oh oh ! Mais je connais cette feuille de style! Je l'ai affiché il y a quelques minutes et je l'ai même conservé en mémoire! Youpi, pas besoin de la recharger une seconde fois, j'utilise celle que j'ai déjà...
Et là... Aïe aïe aïe c'est la cata. Vos modifications css ne sont plus prises en compte bouhhh !
Logique car le navigateur n'a pas cru utile de recharger votre feuille css modifiée pensant qu'elle ne l'était pas.

Le "cache", c'est quoi?
Je viens de décrire succinctement le fonctionnement du "cache" du navigateur. Cette "mémoire" sert simplement à gagner du temps pour afficher une page qui a été chargée précédemment. Lors du premier affichage d'une page (html, php etc...), le browser va stocker toutes les données en mémoire. Ainsi, les feuilles de style, Javascript, images et autres, sont mis en "cache". Lorsque vous allez afficher une seconde fois la page, un peu plus tard, le navigateur va parcourir la page et comparer toutes les données à celles qu'il possède déjà en mémoire. Si les noms et chemins des données à charger sont identiques, il considère qu'aucun changement n'a été effectué sur ces fichiers et va donc utiliser ceux qu'il possède déjà en mémoire.

Des solutions?
Pour pallier à ce petit souci il existe plusieurs solutions. L'une d'elle, très utile consiste à faire CTRL+F5, autrement dit : Vidage du cache du navigateur et rechargement de la page. Par ce biais, vous obligez donc le browser à tout recharger.
L'inconvénient de cette méthode est que tout le monde ne la connait pas et qu'elle requiert une action de l'utilisateur... D'autre part, si vous n'avez modifié qu'un ou deux fichiers, c'est dommage de tout recharger. L'idéal serait de recharger uniquement les fichiers ayant subi des modifications...

J'ai une petite astuce bien utile qui vous dispense de cette première solution très lourde...
Le but étant de forcer le navigateur à charger certains fichiers qu'il a déjà en mémoire, nous allons simplement utiliser une variable (peu importe le nom...) que nous allons affecter uniquement aux fichiers et données modifiés. Eux seuls seront rechargés par le browser...

Méthode
Pour utiliser une variable on utilise cette syntaxe : ?variable=x. Avec variable=le nom de votre variable et x=la valeur de votre variable. Vous avez déjà surement vu ce type de syntaxe dans les urls mais vous pouvez tout à fait l'utiliser dans n'importe quel nom de fichier.

Un exemple avec notre fichier "style.css".
Remplaçons le : {link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /}
par : {link rel="stylesheet" href="css/style.css?refresh=0" type="text/css" media="screen" /}
Ici, nous avons simplement indiqué au navigateur que la feuille de style "style.css" est accompagnée d'une variable qui s'appelle "refresh" est qui a pour valeur "0".
Après toute modification de cette feuille de style, remplacez le 0 par 1, puis par 2(pour une modification supplémentaire) etc... puis enregistrez votre page (html, php etc...)
Lorsque le navigateur va parcourir votre page, il va simplement voir que la valeur de la variable "refresh" a changé et va donc automatiquement recharger le fichier "style.css" sans utiliser celui qui se trouve en cache.

Bien entendu, vous pouvez utilisez cette petite astuce pour n'importe quel type de fichier appelé dans votre page. Vous pouvez également l'utiliser sur autant de fichiers que vous le souhaitez.

Remarque
Le cache du navigateur étant utilisé pour gagner du temps lors de l'affichage d'une page déjà chargée précédemment, utiliser l'astuce de la variable à outrance revient à supprimer la fonction de cache et donc augmenter le temps de chargement de la page... Tout à un coût...

unposter.com : un coup de pouce aux graphistes

2008-03-21T21:09:00.010+01:00

unposter.com : un coup de pouce aux graphistes

Le site unposter.com propose un concours de créa.
Donc avis à tous les graphistes...

Comment ça marche?

Vous créez un poster format 591x 739px, le thème est entièrement libre.
Vous soumettez votre œuvre sur le site (un enregistrement préalable est nécessaire... très rapide, ça prend 1min)
Pour accompagner votre créa, vous aurez à rédiger un texte descriptif pour l'œuvre et un second pour expliquer votre parcours.

Ensuite, le jury va présélectionner votre poster avant de le soumettre aux votes et commentaires des internautes. Les créateurs ayant réuni le plus de votes favorables se verront offrir l'impression de leur création, qui sera par la suite mise en vente au prix unique de 11€90.
Une limite de 250 exemplaires vendus par poster a été fixée. Cela fera quand même une somme rondelette de 500€ pour l'artiste.

A noter que chacune des œuvres sera bien entendu protégée et les créateurs bénéficieront de droits d'auteur.
A l'heure actuelle les votes ne sont pas encore ouverts aux internautes, le site est en phase de récolte des créations...

Je trouve que l'initiative est vraiment bonne et je profite donc de ce blog pour faire circuler l'info... J'ai d'ailleurs moi-même déjà soumis mon poster :)

> l'adresse du site: http://www.unposter.com/

ps : Merci à Jarodxxx chez qui j'ai appris l'existence de ce site (j'espère que tu ne m'en voudras pas de relayer l'info)

izzyMenu : vous cherchez un menu ?

2008-03-20T21:01:00.013+01:00

izzyMenu : vous cherchez un menu ?

Vous avez besoin de créer un menu pour votre site? Plutôt que d'aller chercher à droite à gauche un peu d'inspiration, le site "izzyMenu.com" vous propose de nombreux menus entièrement customisables et téléchargeables gratuitement.

Comment ça marche ?

Dans un premier temps vous aller devoir définir la structure de votre menu à savoir : le nom qui va apparaitre sur l'onglet et la cible sur lequel le lien va renvoyer. Tout cela dans une facilité déconcertante.
Ensuite, vous allez customiser entièrement cette base. A savoir : définir la police et la taille de fonte utilisée sur vos onglets. la largeur de chaque onglet, margin, padding, image d'arrière plan, bordures et couleurs des bordures... Et tout cela sur chacun des états "main", "link" et "hover" des onglets composant le menu. Pas mal non?

Vous pouvez visualiser le résultat dans la fenêtre principale.
Au cas où la créativité venait à vous faire défaut... izzyMenu.com vous propose une liste importante de menus pré-faits. Vous n'avez que l'embarras du choix et vous pouvez bien sur modifier la base choisie.
Votre menu créé, il ne vous reste plus qu'à télécharger le code, à utiliser le lien, à partager votre menu ou encore à le sauvegarder si vous avez ouvert un compte auparavant ...

Bref, un site fort utile, qui mérite à être connu!

Photorack : des photos gratuites (si si)

2008-03-19T20:37:00.009+01:00

Photorack : des photos gratuites (si si)

Etant souvent amené à chercher des photos sur le net dans le cadre de mon travail, et mon employeur n'ayant pas souhaité investir dans des banques d'images sur le web, j'ai donc longuement cherché avant de trouver un site proposant des images gratuites, et qui plus est, d'une qualité pas trop mauvaise contrairement à d'autre...

Le site Photorack vous propose des photos format 640x480px sur de nombreux thèmes : Lifestyle, Nature, Food and Cooking, Animals, Industrial and technology, Sports, Business, People, Cities ans countries, Backgrounds and textures, Miscellaneous, Wallpapers.
Les ressources étant gratuites, c'est évident que le rendu est en général moins bon que sur des banques d'images payantes mais honnêtement, vous pouvez trouver des photos utilisables sans problème.

Dernière remarque : si vous allez sur ce site, l'apparition récurrente d'une publicité très désagréable (prenant les 3/4 de l'écran) viendra sans doute perturber votre recherche d'images... Il faut croire que même la gratuité a un prix...

Thomas Marban's Screenfluent : solution pour Webdesigner en manque d'inspiration

2008-03-18T22:56:00.007+01:00

Thomas Marban's Screenfluent : solution pour Webdesigner en manque d'inspiration

Un tout petit post pour vous parler de ScreenFluent. Ce site est ni plus ni moins qu'une galerie répertoriant des sites aux design particulièrement aboutis (Aujourd'hui, il y a plus de 6800 références). Les sélections sont de Thomas Marban's.

Ici, pas de chichis, vous venez pour vous remplir de nouvelles idées en matière de design web (et pas pour commenter les choix de l'auteur, ni pour voter, ni pour demander un ajout supplémentaire dans la liste de blogroll...)

Encore une galerie supplémentaire... Qu'a t'elle de plus que les 438 autres qui existent déjà dans vos favoris me direz-vous?!
A ça je répondrai que premièrement, ergonomie et design sont 2 de ses points forts, deuxièmement la sélection des sites qui est faite est vraiment de qualité, et enfin... ben c'est ma galerie préférée donc je tenais à vous faire partager son adresse au cas où vous ne connaitriez pas déjà cette référence en la matière...

Quand le Newton Virus retourne le MacBook

2008-03-11T21:22:00.010+01:00

Quand le Newton Virus retourne le MacBook

Avis au possesseurs de MacBook....
Les 2 développeurs Mauritius Seeger et Dr Mo, faisant parti d'un collectif Anglais nommé "Troïka" ont mis au point un virus utilisant l'accéléromètre du MacBook.
Pas de panique il est gentil parait-il (le virus). Transféré sur une machine (via une clé usb par ex.), il ne se lancera qu'une seule fois à la première inclinaison de la machine et ne détruira aucun fichier.
Alors pourquoi utiliser un accéléromètre me direz-vous...

Et bien pour faire ça par exemple :)

Sympa non? J'imagine à peine le nombre d'heures passées pour mettre au point le bébé ... Ah tiens d'ailleurs je n'ai même pas indiqué son nom : le Newton Virus. Sa présentation s'est faite lors de l'exposition du Newyorkese Design and the Elastic Mind au musée des arts modernes de New York.

Plus d'infos

Le collectif Troïka ici
Le Newton Virus ici
Le Musée des Arts Moderne de New York ici

Nerdbusiness : des icones vraiment réussies

2008-03-11T20:34:00.005+01:00

Nerdbusiness : des icones vraiment réussies

Encore un site pour trouver des icônes... OK, c'est pas vraiment un scoop mais bon...
Cette fois, la qualité est particulièrement bonne et le nombre est assez important puisque ce n'est pas moins de 5900 icones qui s'offrent à vous sur Nerdbusiness ! Cool non?!
C'est ici que ça se passe :

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Clean-css : gratuit, simple et performant

2008-02-20T23:41:00.011+01:00

Clean-css : gratuit, simple et performant

Présentation rapide d'un outil plutôt utile pour tous les webdesigner et de façon plus générale, à tous ceux qui créent des feuilles de style.
Bien que nos réseaux actuels soient de plus en plus performants et même si nous disposons d'une bande passante de plus en plus élevée, n'en oublions pas pour autant d'optimiser nos sites... Après avoir passé toutes vos images en revue et optimisé leur poids au bit près, après avoir optimisé vos Javascript et vérifié que vos pages php ou html n'excèdent pas les 200ko, vous pouvez encore gagner du poids... si si !

CleanCSS vous permet de formater et d'optimiser vos css selon de nombreux critères... Et croyez-moi, vous pourrez gagner pas mal de poids, surtout si vous êtes de ceux qui - a è r e n t - les css, histoire d'y voir un peu plus clair dans des pages atteignant facilement plusieurs milliers de lignes...

Comment ça marche ?

1. Vous uploadez votre feuille de style
2. Vous procédez aux réglages :)
Une première liste à choix multiples vous permet de choisir la méthode de compression souhaitée : "le plus compact / très compact / normal / peu compact / sur mesure". Les feignants pourront s'arrêter là.
Pour ceux qui veulent un peu plus de précision, afin d'affiner votre choix, d'autres options sont proposées :

Tri des selecteurs ; fusion des propriétés(les classes ou id ayant les mêmes propriétés css sont mises ensemble) ; compression de la propriété "font-weight" (un chiffre remplacera la chaine de caractères : ex : "font-weight:bold" > "font-weght:300") etc etc...

Clean css est un outil gratuit, simple d'utilisation, traduit en Français pour les paresseux, et d'une redoutable efficacité (on vous donne même le pourcentage de compression après formatage de vos css).

Le lien : http://www.cleancss.com/

Web developer's field guide : encore une liste utile!

2008-02-15T19:18:00.009+01:00

Web developer's field guide : encore une liste utile!

Ola ola mes chers lecteurs (très nombreux si j'en juge du nombre de commentaires postés depuis le commencement de ce blog ! ...)
Je viens aujourd'hui pour vous livrer une adresse utile.
Dans la même lignée que le site Splitdaddiz où l'on peut trouver une liste de sites chers à l'auteur, je voudrais faire partager une autre liste d'adresses à faire pâlir tout bon webmaster/webdesigner et autre web-trucmuche' qui se respecte...

Au sommaire : créativité, techniques et langages de développement web, couleurs, typo, css ... et j'en passe...
Il m'est très difficile de quantifier le nombre de liens présentés ici mais croyez-moi, c'est assez phénoménal...
C'est vrai que niveau design, on a vu mieux, mais ça a au moins le mérite d'être clair et après tout, c'est ça l'important.

Comme je suis un brin toqué, là aussi, j'ai pris le temps de faire une "copie générale d'écran"... et hop !
Ah oui j'oubliais l'adresse...et un lien en rapport où vous pourrez trouver une autre grosse liste très utile...

CSS : des valeurs par défaut selon vos navigateurs

2008-01-18T22:40:00.004+01:00

CSS : des valeurs par défaut selon vos navigateurs

Qui ne s'est jamais arraché les cheveux en voulant résoudre un souci de mise en page foireuse entre un rendu web sur Internet Explorer et un rendu sur Firefox?
Malheureusement pour les webmaster, webdesigner et tous ceux qui s'adonnent aux joies de la conception Web, une même portion de code XHTML couplé à ses CSS n'aura pas le même rendu sur tous les navigateurs...
Cependant, comment expliquer qu'avant même de toucher une ligne de css, le rendu est déjà différent entre Firefox et...IE(par exemple).

C'est en cherchant un peu sur le net pour me documenter à ce sujet que je suis tombé sur un article très intéressant sur l'excellent site Alsacreations.

Comme vous ne le savez peut-être pas, chaque navigateur possède des valeurs attribuées par défaut pour tout élément constitutif des CSS.
Ainsi, pour un élément de type "body", Internet explorer attribuera par défaut un margin:15px 10px; tandis que Firefox attribuera un margin:8px;.
Bien entendu, ces valeurs ne s'appliquent que si vous même n'en inscrivez pas dans votre feuille de style...

Ah ah ! On comprend mieux pourquoi il est parfois si difficile d'arriver à un résultat nikel sur différents browser...
Un autre exemple : L'élément "p" aura par défaut, chez IE6 un margin:19px 0; et chez Firefox un margin:16px 0;

Maintenant je vous vois déjà arriver avec vos gros sabots et penser : "Hum hum... si j'ai accès à ces valeurs, ça m'aiderait pas mal pour corriger les différences de mise en page sur mes maquettes...oui oui oui... "

Malheureusement, il n'est pas toujours facile d'obtenir ces chiffres... Cela dépend des navigateurs. Sur Firefox par exemple, pas de souci. Tout est accessible dans les fichiers "html.css", et "forms.css" à l'adresse :
"..\Program Files\Mozilla\Firefox\res".
En revanche, pour d'autres (je ne citerai pas de noms mais suivez mon regard...) les fichiers ne sont pas accessibles...

Mais là je dis merci à un certain Julien Royer, (membre actif du forum d'Alsacreations) qui a trouvé une solution permettant de récupérer ces valeurs pour la majorité des browser.
Ainsi, vous pouvez récupérer des copies d'écran des valeurs par défaut d'IE6, IE7,Firefox etc...Vous pouvez également tester cet outil sur votre propre navigateur. (Je vous indique le lien en fin d'article)

Avant de clore ce post je voudrais revenir sur une chose importante citée dans l'article d'alsacreations (dont je suis entrain de vous faire un résumé) :

Puisque les valeurs attribuées aux éléments des css sont différentes en fonction des navigateurs, une solution consiste à tout remettre à zéro au début de votre feuille de style en indiquant :

* . {margin:0;padding:0}

Cette déclaration très utilisée n'en est pas pour autant efficace. En effet, si vous jetez un oeil aux valeurs par défaut des propriétés css, vous vous apercevrez surement que, selon les browser, les différences ne sont pas si étendues que cela. En tous cas, la solution consistant à faire un "reset" est trop excessive et requiert qu'on ré-attribue manuellement les marges à tous les éléments qui en ont besoin. Un oubli est donc vite arrivé (notamment dans le cas des formulaires) et peut donc engendrer une différence de mise en page entre IE et Firefox par exemple. Ainsi, en utilisant une "solution" qui était censée corriger les bugs, vous en avez créé d'autres... Bref, mieux vaut éviter les solutions trop "brutales" :)

Pour plus d'informations je vous donne le lien vers l'excellent article d'alsacreations traitant du sujet: ici.

splitdadiz.com : 99 adresses pour découvrir l'auteur

2008-01-01T16:55:00.002+01:00

Splitdadiz.com : 99 adresses pour découvrir l'auteur

Je ne résiste pas à l'envie de vous faire part d'un billet vraiment intéressant sur splitdadiz.com...

De quoi s'agit-il?

Une liste de bonnes adresses sur le web...99 adresses préférées de l'auteur. Et croyez-moi, c'est bon, très bon même.

Tout est classé par catégories :

- Graphisme général
- Webdesign
- Ressources
- ShowCase
- Développement
- Flash et Flex
- Typographie
- Video et Motion
- Blog perso
- Web 2.0
- Détente
- Divers

Vous vous doutez surement que je partage très largement les gouts de l'auteur c'est pourquoi je me permets de faire un retour sur cet article. De plus, je trouve la mise en page assez sympa avec un découpage méticuleux des header de chacun des sites et une liste ajustée au pixel...

Je ne pouvais résister à l'envie de faire un montage pour vous montrer visuellement l'ensemble de la page...c'est tellement mimi...

Je vous invite vivement à aller faire un petit tour sur splitdadiz.com, ça en vaut la peine croyez-moi.

Icofinder : vous cherchez des icones?

2007-12-31T18:27:00.002+01:00

Icofinder : vous cherchez des icones?

Si vous êtes régulièrement à la recherche d'icones pour customiser votre pc, je pense pouvoir vous donner un petit coup de pouce en vous communiquant l'adresse d' Iconfinder.
Ce site est une adresse utile si vous souhaitez télécharger gratuitement des icones de toutes tailles.
Plusieurs options vous sont proposées pour la recherche. Soit vous faites une recherche par mots-clés via le champ de texte prévu à cet effet, soit vous utilisez l'onglet "Search Cloud" qui vous permet de visualiser tous les mots-clés déjà répertoriés. De plus, le site vous offre la possibilité de filtrer les résultats par taille d'icones : de 12x12 jusqu'à 128x128px, et également par couleur de fond : noir ou blanc.

Bref, c'est plutôt une bonne base de recherche même si le contenu n'est pas aussi riche que sur des sites comme deviant-art ou crystal-XP mais ça mérite quand même un petit coup d'oeil lors de votre future recherche !

WebdesignerWall : un site très intéressant...

2007-12-02T15:30:00.002+01:00

WebdesignerWall : un site très intéressant...

J'aimerai vous présenter un site vraiment sympa pour tous ceux qui aiment s'adonner aux joies du webdesign et de la création numérique via Photoshop, Illustrator ou encore Flash.

WebdesignerWall est un concentré de tutoriaux, de ressources et actualités dans le domaine du webdesign/webmastering. Vous y trouverez également les dernières tendances du moment (ça ne fait jamais de mal de s'informer un peu...)

Que des bonnes choses donc, et beaucoup d'articles interressant concernant le codage HTML et CSS.
Si l'on rajoute à cela le design particulièrement résussi du site, on ne peut donc que recommander d'aller y faire un petit tour...

lien : http://www.webdesignerwall.com

MyPicture3D : Créer un album photo en 3D très simplement

2007-11-17T23:53:00.002+01:00

MyPicture3D : Créer un album photo en 3D très simplement

Il existe sur Internet une multitude de logiciels gratuits ou non permettant de créer vos albums photos en toute simplicité.
Le logiciel que j'aimerai vous présenter ici vous propose la même chose mais la 3D en plus. Alors là je vous entends déjà dire "Mouais.... encore un truc à la mords moi le noeud, genre gadget à deux balles comme on en connait tant..." Et là je dis non.

MyPicture3D est un logiciel libre qui a été créé à la base pour réaliser des écrans de veille. Mais le concept était tellement au point que ses créateurs l'ont transformé en véritable outil vous permettant de créer rapidement et très simplement (et je pèse mes mots) des galeries de photos en 3D.

Comment ça marche ?

Premièrement vous téléchargez le logiciel sur le site officiel. Ensuite, après avoir installé ce dernier, vous choisissez de créer une nouvelle galerie photo. Le logiciel vous propose alors de choisir votre environnement. MyPicture3D vous propose une multitude d'univers dans lesquels insérer vos photos (Galerie d'art, Pyramide, Bateau, Loft etc...). Vous pouvez, par la suite, compléter cette liste en téléchargeant de nouvelles galeries 3D, gratuitement, sur le site officiel.
Une fois votre choix effectué, vous arrivez sur l'interface simplissime du soft.

Cette interface est très intuitive. Au centre, votre univers en 3D, à gauche, un explorateur de fichiers. Une fois le dossier de photos choisi, les différents fichiers apparaissent tous dans la fenêtre de gauche (en bas).
Pour déposer une photo à un emplacement sur les murs de votre environnement 3D, un drag'n drop suffit ! Ensuite vous pouvez décider d'adapter la taille du cadre à la photo qu'il reçoit (option "Adapt"). Vous pouvez également ajouter un commentaire sur chacune des photos importées. Au fur et à mesure que vous déposez des photos dans votre univers, elles s'affichent dans la partie basse de l'interface. Pour supprimer une photo c'est très simple, vous faites suppr :). Pour avancer, reculer, tourner, vous utilisez au choix, la souris ou les flèches directionnelles de votre pc. Ce seront d'ailleurs les mêmes commandes qui permettront de se balader dans la galerie une fois celle-ci créée.
Votre album terminé, plusieurs options s'offrent à vous. Je ne vais pas toutes les détailler ici mais simplement vous indiquer comment faire pour visualiser votre oeuvre depuis un navigateur.

Il vous faudra donc sélectionner l'option "Share" puis "export to VRML"... Un dossier contenant toutes les photos utilisées pour la galerie va donc etre créé à l'emplacement désigné. En plus de cela vous verrez un fichier au format .wrl à côté de ce dernier.
A présent, pour afficher votre galerie dans un navigateur, il va falloir ouvrir votre éditeur de texte préféré et créer une petite page html. Entre body et /body vous mettrez quelque chose du type :

[embed src="votre fichier.wrl"
type="model/vrml"
width="largeur du fichier"
height="hauteur du fichier"
vrml_splashscreen="false"
vrml_dashboard="FALSE"
vrml_background_color="#CDCDCD"
contextmenu="false"]

Bien entendu, ce n'est qu'un exemple. Ensuite, vous enregistrez ce fichier au format html et c'est lui que vous appelerez depuis votre navigateur.

Remarques :

La visualisation de cette galerie marche sous Internet Explorer mais je n'ai pas réussi à la faire fonctionner sous Firefox car cela requiert un module complémentaire pour visualiser un environnement en 3D. Il existe certains plugin, cependant, perso, aucun n'a convenablement fonctionné... Donc si vous avez des infos, je suis preneur...

Les photos que vous importez dans votre galerie doivent toutes être format .jpg... C'est con mais c'est ainsi.

Le chargement de votre galerie dans le navigateur prend quelques secondes (pas plus de 5 si vous optez pour une qualité "web" (choix proposé lors de l'export de votre galerie)

Pour avoir une idée du résultat obtenu c'est ICI (Uniquement sous IE). A noter que cet exemple est simplement là pour vous montrer à quoi ressemble ce type de galerie 3D...

Conclusion perso : J'ai été très agréablement surpris par la facilité et la rapidité avec laquelle on réalise un album 3D grace à MyPicture3D. Bien qu'il existe des petits soucis dans l'utilisation des galeries par la suite (pb Firefox, photo uniquement jpg, lenteur de chargement) je pense que ce soft vaut la peine d'être connu.... D'ailleurs c'est bien pour ça que j'ai fais ce billet hein!?

CSS : faire un bloc auto-ajustable en hauteur

2007-11-13T23:23:00.004+01:00

CSS : faire un bloc auto-ajustable en hauteur

Certains d'entre vous se sont peut-être déjà confronté à un problème lors de la création d'une page web. Comment faire un bloc dont la hauteur va s'ajuster en fonction de son contenu ?

Il existe plusieurs méthodes pour coder cela mais j'en utilse une qui marche très bien. Je voulais donc en profiter pour vous en faire partager le code html/css.

Je commence ce "mini-tutoriel" pour débutants en css :

1. Le premier point est de créer votre bloc à l'aide d'un logiciel de création type Photoshop, Gimp, etc...

2. L Une fois créé, il vous faudra procéder au découpage de votre image en 3 partie distincte : le haut, le milieu, et le bas du bloc. Attention, pensez que pour gérer la transparence, il vaut mieux enregistrer votre image en gif (IE gèrant mal la transparence sur les formats png) Pour l'exemple je vais prendre un bloc à bords arrondis :

3. Le but sera donc d'intégrer ce bloc dans votre page html. Voici comment faire pour arriver au résultat : Tout d'abord la structure html. On va créer un div auquel on va attribuer une class "container". Cela va correspondre à notre bloc entier. Ensuite, à l'intérieur de ce div, on va en imbriquer 3 autres, correspondant aux 3 parties de notre image. On va donc donner des class "top", "middle" et "bottom".

4. Pour finir voici la partie de code css qui nous interresse : La largeur de mon bloc est de 200 px. Les parties top et bottom font 10 px de hauteur. Quant à la partie du milieu, l'astuce est de ne surtout pas lui donner de hauteur mais de la faire se répéter verticalement grâce à la propriété "repeat-y". Ainsi, la partie centrale de notre image va donc s'adapter au contenu du bloc !

Et voilou ! Je vous rappelle le résultat :

J'espère que ce petit tutoriel pourra aider tout ceux qui se galèrent avec ce pb...

Des outils pratiques pour le développement web

2007-11-08T21:00:00.004+01:00

Des outils pratiques pour le développement web

Comme promi, voici une liste d'outils qui pourront vous faire gagner du temps lors de votre travail de création web. Personnellement,j'utilise Firefox, donc les liens proposés ici seront majoritairement orientés pour ce navigateur :

Firebug : cet outil s'adresse aux utilisateurs de Firefox. C'est selon moi un outil indispensable pour la création de sites. "Il vous permet d'explorer par clavier ou souris les coins les plus reculés du DOM. Tous les outils dont vous avez besoin pour fureter, produire et controler votre JavaScript, CSS, HTML et Ajax sont rassemblés ensemble à travers une seule extension,incluant un débuggeur, une console d'erreur, une ligne de commande, et une variété d'inspecteurs intéressants…"(cf:Geeckozone)

Validateur W3C : Vous le connaissez surement ? C'est la référence des validateurs de code. Vous proposez l'url de votre site ou vous uploadez votre fichier. Le validateur vous indique où sont les erreurs et avertissements. Une version "corrigée" du code est proposée si vous voulez.

IE TAB: Toujours pour les utilisateurs de Firefox. Cette extention très utile permet de switcher entre IE et Firefox. Une petite icone en bas de Firefox vous indique si vous êtes sur IE ou sur FF. Super utile pour voir les différences de mise en page entre IE et FF ! Attention, lorsque vous êtes sur IE (mais dans Firefox), Firebug ne fonctionne plus. Dernière remarque, IE TAB utilise le moteur d'IE présent sur votre machine. Si vous êtes sur IE6 (par exemple), le rendu sera celui d'IE6.

HTML Validator: J'ai toujours pas changé de navigateur et cette extention propose de valider votre code HTML et CSS selon 2 algorithmes au choix : HTML Tidy ou l'analyseur SGML. Le résultat est tip top. Vous avez en plus de la validation de base, la correction de votre code et la possibilité de valider en fonction des critères d'accessibilité du web.

Debugbar : Ah ! Un outil pour les utilisateurs d'Internet Explorer... C'est un inspecteur de code genre Firebug... L'intéret est la possibilité de modifier les valeurs et de voir le résultat immédiatement dans la page...

Voila, même si je pourrais continuer encore longtemps, je vais m'arréter là !
J'espère que ce post vous servira !

Browsershots : un testeur de site inter navigateurs

2007-11-08T20:37:00.001+01:00

Browsershots : un testeur de site inter navigateurs

Un p'tit post pour tous ceux qui s'arrachent les cheveux pour créer un site web compatible sur plusieurs navigateurs !
Browsershots est un outil disponible sur le net. Il permet de tester votre site sur de nombreux navigateurs.

Son utilisation est simplissime : Premièrement vous cochez les cases correspondantes aux navigateurs sur lesquels vous voulez voir le rendu de votre page. Ensuite, vous indiquez l'adresse de votre site et vous validez. Il y a quand même un point à noter : C'est assez long... Voir même très long... Plus vous choisissez de navigateurs, plus vous attendez... Cela dit, la gratuité du service vaut bien un peu d'attente !

Le résultat apparait sous forme d'images.

Même si cet outil ne sert que pour la vérification, il peut toutefois s'avérer utile grâce au grand nombre de navigateurs proposés.

Cela me fait penser qu'il faudrait que je fasse un post pour lister les outils qui peuvent faire gagner beaucoup de temps dans la création de site web...

TouchGraph GoogleBrowser

2007-11-06T23:37:00.003+01:00

TouchGraph GoogleBrowser

TouchGraph est un outil utile pour voir quels sont les liens existant entre les sites Internet. C'est Alex Shapiro qui l'a développé, à partir de la version initiale du Google Graph Browser de Christian Langreiter, basé sur l'applet Java Vanilla-Vista. Par exemple, cela permet de voir quels sont les relations qui existent, pour un même mot clé, sur le web. La recherche se fait soit par mot, soit par url. Le résultat est graphique (et paramétrable) et vous présente une sorte de nébuleuse de sites liés (ou non) les uns aux autres. Il y a quelques années de cela, le moteur de recherche Kartoo avait déjà ouvert la marche à suivre.

Alors comment ça marche cette histoire me direz-vous? Et bien, c'est assez simple. Une barre de recherche en haut de votre interface de recherche TouchGraph vous permet de saisir une url ou un mot clé. Ensuite, un double clic sur un des résultats obtenus (sous forme de graph) va automatiquement déclencher une requête Google pour trouver 10 autres sites liés au premier selon les critères que vous avez entré précédemment. J'avoue qu'à première vue le résultat est assez déroutant... Cela étant, on s'y fait vite! L'interface est très intuitive et l'outil particulièrement marrant à utiliser! Bref, si vous voulez tester c'est par ICI que ça se passe!

Un aperçu de l'interface TouchGraph :

Quelques liens :

COLOURlovers : une aide bien utile !

2007-10-25T00:23:00.003+02:00

COLOURlovers : une aide bien utile !

Je m'adresse à toutes les personnes en manque d'inspiration colorimétrique ou ceux à qui il manque un petit truc pour arriver à la palette parfaite...
Il existe un endroit sur le web auquel je suis accro. ::: COLOURlovers ::: est un site entièrement consacré à la couleur. En aplat ou en palette, elle est présente partout sur le site...vous y trouverez surement l'inspiration qu'il vous manque !
Le site propose même une décomposition de sites web ou de magazines en fonction de leur couleurs principales. Très interesssant...

Vous pouvez vous inscrire et ainsi composer vous-même vos propres palettes de couleurs et les livrer aux votes des Internautes. Pour finir, le Blog ::: COLOURlovers ::: vous permet de vous tenir informé de l'actualité colorimétrique...C'est ty pas cool tout ça ?!

Je vous invite donc à aller faire un petit tour vers ce site très utile pour tous les créatifs ;)

Goowy : un web desktop à l'interface sympatique

2007-10-21T14:03:00.003+02:00

Goowy : un web desktop à l'interface sympatique

Goowy est un "bureau virtuel", donc, accessible depuis internet. Cet outil mérite d'être présenté car il regroupe une multitude de services plutôt sympas.

Voici la liste des services proposés par Goowy :

A première vue on pourrait penser que ça ressemble grandement à NetVibes. Oui, sauf que Goowy propose une interface en Flash. Niveau visuel, ça claque...niveau performance...un peu moins. En effet, le chargement est un peu long mais bon... la qualité et la variété des services proposés méritent d'être patient.

Pour tester Goowy, il vous suffit de vous inscrire sur la page officielle. L'inscription est rapide et gratuite. Ensuite, vous arrivez sur votre interface personnelle. Tout ou presque est personnalisable. Comme je le disais plus haut, Goowy fonctionne à la manière de Netvibes. A savoir, une page paramétrable, sur laquelle vous allez pouvoir ajouter flux rss et widgets en pagaille.

Voici une liste non exhaustive des Widgets (appelés ici "Minis") que vous pourrez ajouter à vos pages :

Recherche(Amazon,Ebay,Yahoo,Google,Flick'r,Lycos)
Vidéo(Yahoo,You-tube),
Calculatrice
Calendrier
Horloge
Comics
Cartographie Yahoo Maps
Cours de la Bourse
Liste Mémo
Notepad etc...

Goowy propose également de suivre vos blogs et sites favoris par flux RSS. Il est possible de créer des onglets afin de classer vos infos,services,flux,widgets. Pratique en effet, d'avoir sur une page tous ses flux RSS, et sur une autre, tous ses petits gadgets favoris.(ce n'est qu'un exemple)

En bas de l'interface se trouve un menu qui vous permet d'accéder à une multitude d'autres services que je vais détailler...

Accès à vos Widgets : c'est à partir de ce point que vous accédez à vos pages créées (cf : plus haut)

Messagerie instantannée (je n'ai pas encore testé ce service mais il semble que vous puissiez ajouter les contacts de vos messageries instantannées perso)

Interface d'upload de fichier : Très simple et intuitif, ce service vous permet d'uploader vos fichiers dans la limite d' 1 Go pour la version gratuite, de créer des dossiers, déplacer,renommer,partager bref... simple et pratique! Vous avez la possibilité de changer d'interface pour passer en mode "image viewer", pratique pour voir les images importées sur votre espace perso (avec effet de zoom sur le rollover sioux plait!)

Jeux : Des dizaines de jeux Flash classés par catégories

Mails : Goowy propose également un client de messagerie digne des meilleurs, avec 2 Go de stockage, anti-spam, création de dossiers, fenêtre double pour voir votre liste de mails d'une part et le contenu de chacun dans une fenêtre à côté. A noter que le drag'n drop fonctionne (sympa)

Contacts : Vous pouvez importer la liste de vos contacts, faire un export (csv. ou .vfc), imprimer également.

Calendrier : Goowy propose un calendrier (ce qui manque beaucoup à mon avis chez NetVibes). Un vrai calendrier ! Là aussi l'import, l'export et l'impression sont possibles.

Music : Goowy propose un lecteur mp3 simple et efficace. Vous uploadez et vous écoutez !

Enfin, vous pouvez également créer une liste de favoris. Je mettrais un petit bemol pour cette option car il n'est pas possible de faire un import! Si l'on considère que pour utiliser Goowy, il vous faut un navigateur (probablement d'ailleurs, celui sur lequel vos favoris sont classés, organisés, repertoriés avec la rigueur caractérisant les gens un brin toqués) on comprendra alors que sans pouvoir importer massivement sa propre liste de liens, cette option semble plutôt un gadget qu'autre chose...

Malgré quelques lenteurs dans l'utilisation, et certains aspects que je qualifierais de "gadgets", Goowy est sans conteste un WebDesktop fort sympatique, regroupant de nombreuses fonctionnalités. L'interface Ajax/Flash donne un véritable coup de boost niveau visuel !

Je vous conseille donc sans plus tarder d'essayer vous aussi Goowy ! Je pense que ça en vaut la peine ;)

PSDTuts : des tutoriels Photoshop de qualité...

2007-10-20T23:37:00.002+02:00

PSDTuts : des tutoriels Photoshop de qualité...

Ce post s'adresse à tous les utilisateurs de Photoshop ou à toutes les personnes intéréssées par sa découverte au travers de tutoriaux.

Personne ne pourra nier que le net regorge de tuto' de plus ou moins bonne qualité pour réaliser des travaux via Photoshop. Aujourd'hui j'aimerai vous faire gagner du temps et vous présenter un site entièrement consacré à ce sujet.

Pourquoi ce site plutôt qu'un autre ?
1) La forme :L'esthétique du site est remarquable. J'adore. Du vrai travail de qualité !
2)Le fond : Les tutoriaux présentés sont bien expliqués (par contre il faudra vous mettre à l'anglais hein! Mais bon, ça devient quasi obligatoire maintenant...), bien présentés, et assez utiles pour vos travaux ou futurs travaux.

Pas de doute, PSDTuts vaut la peine d'être visité !

Maciej Mizer, un graphiste d'exception

2007-10-18T21:08:00.003+02:00

Maciej Mizer, un graphiste d'exception

Maciej Mizer, alias Mosk est un graphiste-designer Polonais. C'est au fil d'un de mes nombreux "web-vagabondage" que j'ai découvert son portfolio. Et là je dois dire que j'ai été très impressionné par son travail. Ce cher Maciej (on va pas l'appeller "Mizer" quand même hein!) travaille sur plusieurs fronts : web,Créa 2D,Créa 3D,Photo, Graffiti... Outre l'esthétique et l'aspect technique particulièrement abouti de son portfolio, je vous invite à parcourrir ses réalisations proprement hallucinantes de maitrise des outils de créations graphique... Je ne resiste pas à l'envie de vous faire partager quelques un des nombreux visuels présents sur son site :

Travail 2D :

Travail 3D :

Travail Photographique :

Voilà, j'espère vous avoir donné l'envie d'aller jeter un coup d'oeil sur le travail de ce graphiste de talent.
Ah oui j'oubliais l'adresse du portfolio : MOSK

Wixi : un Web OS, une communauté

2007-10-14T00:27:00.003+02:00

WIXI : un Web OS, une communauté

Plus le temps passe et plus les applications sur Internet se développent... Les services se multiplient, à l'heure du "Web 2.0" (concept avec lequel j'ai un peu de mal, car mise à part la notion de "service" qui est bien nouvelle, il me semble que le reste est plus un "coup de pub" allant plus du côté "marketing" que de celui d'une vraie révolution...passons...je me trompe peut-être...).
Il est d'ailleurs assez étonnant de remarquer que dans le développement de l'informatique et des réseaux, nous arrivons aujourd'hui à un retour en arrière... (Quoi? Mais il est foufou celui là ?!) Je m'explique.

Au départ il y avait un ordinateur stockant programmes et documents, puis est apparu le serveur "travaillant" à la place des ordinateurs, leur permettant ainsi de garder plus de puissance... Avec l'augmentation de la puissance des processeurs ainsi que la diminution des coûts de la mémoire, les pc ont pu faire leur arrivée. Nous avons ainsi rapatrié sur l'ordinateur les programmes, le serveur est revenu à la place des machines! (Oui oui, je sais les serveurs n'ont pas disparu, c'était une imageuu)

Aujourd'hui, on assiste (il me semble) à un retour en arrière car les applications sur le web se développent de plus en plus. En effet, pourquoi acheter une suite bureautique puisque nous pouvons avoir gratuitement accès à des traitements de textes, tableurs et autres modèles de conception de diapositives directement en ligne ! Aujourd'hui, une simple connection Internet suffit pour pouvoir "tout faire" ou presque...

J'aimerais vous présenter aujourd'hui un "Web Desktop" appelé aussi "Web OS" j'ai nommé : Wixi. Il va vous permettre de vous créer un bureau directement sur le web afin d'y stocker vos vidéos, images ou fichiers audio. Bon, jusque là un bon logiciel de transfert FTP faisait l'affaire oui mais...

Wixi est un Web OS n'existant qu'en version beta pour le moment. Vous ne pouvez le tester que sur invitation. Le concept est plutôt sympa : Upload de vos images, musiques et vidéos sur votre espace de stockage (illimité pour cette version beta (youhouhou!) mais si j'ai bien compris il devrait être bridé à 3Go pour la version 1 (avec une possiblité de payer pour avoir le droit à plus)). En plus de cela, vous pouvez créer des dossiers, les déplacer, les renommer, les supprimer. Le "cliquer-glisser" et "cliquer-déposer" fonctionne très bien. Un lecteur intégré unique vous permet de lire vidéos et sons (après formatage des données par wixi)

Cet espace étant en ligne, vous pouvez rendre public tout ou partie de votre bureau. Là où cela devient intéressant c'est que Wixi joue sur le thême de la communauté. Et qui dit "communauté" dit aussi... des zamis ! Sur Wixi, l'échange règne en maître. Pour exemple, une fenètre vous indique quels ont été les derniers mouvements de fichiers de vos potes sur Wixi. Vous êtes donc directement informés des derniers upload. Pas moyen de tricher, dans une communauté, le partage est roi !

C'est en bas de votre bureau que vous pouvez accéder aux desktop des autres membres de la communauté. Vous pouvez inviter des gens chez vous, et aller chez eux. Une fois chez votre voisin, vous avez accès à ses amis et vous pouvez rapatrier, directement chez vous, tous les documents autorisés à l'être...Sympa non? Au cas où vous chercheriez quelque chose de très particulier (genre un mp3 super rare de Rika Zaraï chantant "Ma valise en carton" en live à Stockholm ), un moteur de recherche vous permet de trouver tout ce qu'il est possible de trouver comme vidéos, images et sons au sein de la wixi communauté. Vous pouvez bien entendu paramètrer votre espace perso en y insérant vos propres arrières plans ou en personnalisant votre avatar.

Je test Wixi depuis maintenant 2 semaines et je dois dire que c'est plutôt sympa ! C'est une version beta. Il y a donc encore des correctifs à apporter (notamment sur la conversion parfois très longue (bug?) des vidéos que vous uploadez sur votre wixi desktop) mais dans l'ensemble moi je dis BRAVO ! Si vous tombez sur un dysfonctionnement, vous pouvez de suite en informer la Wixi-Team grace à la fenêtre d'envoi de mail spécialement prévue pour la communication "Wixinautes > WixiTeam" (ben oui hein, ça sert à ça une Beta non?!).

Enfin, pour finir, chaque Beta-Testeur de Wixi possède un carnet de 6 invitations qu'il peut distribuer comme bon lui semble. (Tiens, ça me fait penser qu'il m'en reste deux...interessés les Zamis..?)

SWFir ou SWF Image Replacement...

2007-10-11T23:17:00.002+02:00

SWFir ou SWF Image Replacement...

Aujourd'hui je voudrais vous faire part d'une des solutions possibles pour redonner vie à vos images sur le web...

Pour peu que vous ayez déjà construit un site web et que vous eusse voulume mettre en page des images, vous avez surement dû vous confronter à certains problèmes...

Je vous donne un exemple très simple :
Comment faire pour arrondir les coins d'une image ?
Plusieurs solutions me direz vous...

Modifier l'image au préalable sur un logiciel spécifique (genre Photoshop ,the Gimp, etc.) en lui arrondissant ses coins.

Utiliser les CSS et superposer sur vos images un gif transparent (ou un png pour ceux qui ne souhaiterez pas que cette astuce soit visible sur Internet Explorer <7>

Dans le cas de "bloc", utiliser les CSS et se lancer dans une imbrication de 4
successifs (j'y reviendrai dans un futur post pour ceux que ça intéresse)

Bref, c'est pas forcément une tâche "aisée" en utilisant le language HTML ! Et si je vous demande maintenant d'appliquer sur vos images des ombres porteés? "Oulalalala !....." Des rotations ? "Aie Aie Aie" !

Je vais maintenant présenter une solution "simple" pour appliquer de nombreux styles sur vos images : ombre portée, bords arrondis, rotation etc...
Le "SWFir" pour SWF Image Replacement, est une méthode utilisant Flash et Javascript pour revaloriser vos images !

Illustration :

Comment ça marche?

Vous avez besoin de 2 fichiers principaux : 1 fichier Flash (.swf) et un fichier Javascript (.js), disponibles sur le site de SWFir ou plus simplement ici
Décompressez le dossier et placez les 2 fichiers dans le même dossier que vos pages html.

Entre [head] et [/head] vous placez cette ligne :
[script type="text/javascript" src="swfir.js"][/script] afin d'appeller le fichier Javascript.
Puis entre [body] et [/body] vous placez ces lignes :
[script type="text/javascript"]
window.onload = function(){
sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-radius", "15");
sir.specify("border-color", "fff");
sir .specify("rotate","-5");
sir.specify("shadow-blur", "15");
sir.specify("background-color", "9dcee0");
sir.swap("img");
}
[/script]

Par la suite, vous pouvez appliquer le style désiré sur toutes les images de votre site ou seulement sur certaines.
Je vais maintenant décrire ligne par ligne le script principal :

sir.specify("border-width", "20"); : Cette ligne vous permet de spécifier la largeur de la bordure qui sera appliquée sur l'image (ou les images). Ici, une bordure de 20px sera appliquée.

sir.specify("border-radius", "15"); Je vous parlais de bords arrondis sur les images, c'est grâce à cette ligne que cet effet est rendu possible. Ici on applique un rayon de 15px sur chaque arrondi. Plus ce chiffre est élevé et plus les coins seront arrondis.

sir.specify("border-color", "fff"); : Ici on spécifie la couleur de la bordure au format hexadecimal. #fff est une contraction de #ffffff et correspond à la couleur blanche.

sir.specify("rotate","-5"); Là on applique un effet de rotation sur l'image.

sir.specify("shadow-blur", "15"); Cette ligne est, à mon sens, assez intéressante car elle permet d'appliquer une ombre portée sur l'image. Plus le chiffre est élevé,plus l'opacité de l'ombre sera élevée. Attention cela dit, une valeur trop grande entrainera une diminution de la taille de votre image.

sir.specify("background-color", "9dcee0"); L'utilisation de background-color sert, comme vous vous en doutez surement, à insérer un arrière plan coloré à votre image. La couleur est,là aussi, spécifiée dans un format hexadécimal.

Enfin, la dernière ligne: sir.swap("img"); sert à appliquer ces différents styles sur les images.C'est ici que l'on peut attibuer un effet particulier sur certaines mais pas sur la totalité des images de votre site.

Pour le moment nous avons donc défini la nature des effets . Maintenant il faut encore les appliquer sur les images ! Il y a deux possibilités : si vous souhaitez appliquer les style sur toutes les images de votre site, vous n'avez plus rien à faire. En effet, ils s'appliqueront automatiquement sur chaque balise [img src="" /] autrement dit, sur toutes les images. Si vous souhaiter appliquer localement les styles préalablement définis, la suite est pour vous...

Comment faire pour appliquer les styles sur certaines images et pas sur d'autres ?

Il vous suffit d'indiquer les class ou les id sur lesquels vous voulez que la magie opère ! Pour cela il faut modifier la dernière ligne.

ex1 : Application du style sur un id :

sir.swap("#bloc img"); Ici, les styles vont s'appliquer sur les div portant un id="bloc".
Ensuite c'est du css classique (Nous sommes ici dans le body de la page) :

[div id="bloc"][img src="souffle.jpg" /][/div]

Ici, le style va s'appliquer sur l'image "souffle.jpg"

ex2 : Application du style sur une class :

sir.swap(".bloc img"); Ici, les styles vont s'appliquer sur les div portant un class="bloc".
Ensuite c'est du css classique (Nous sommes ici dans le body de la page) :

[div class="bloc"][img src="souffle.jpg" /][/div]

Ici, le style va s'appliquer sur l'image "souffle.jpg"

Bien entendu, ça marche pour d'autres balise css !

Récapitulation et exemple de fin:

[html]
[head]
[title][/title]
[style type="text/css"]
#bloc{
width:361px; height:547px;
position:relative;float:left;
}
[/style]
[script type="text/javascript" src="swfir.js"][/script]
[/head]
[body]
[script type="text/javascript"]
window.onload = function(){
sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-radius", "15");
sir.specify("border-color", "fff");
sir.specify("rotate","-5");
sir.specify("shadow-blur", "25");
sir.specify("background-color", "9dcee0");
sir.swap("#bloc img");
}
[/script>
[div id="bloc"][img src="souffle.jpg" /][/div]
[/body]
[/html]

Et voila !

Bien entendu, vous n'êtes pas obligé d'appliquer tous les styles sur vos images ! Si vous ne voulez qu'une ombre portée, vous mettrez simplement :

window.onload = function(){
sir = new swfir();
sir.specify("shadow-blur", "25");
}

Pour finir ce long post, quelques liens pour complément : - Le site SWFir : ici
- Un article du côté de Babylon-design : là

ps : J'ai remplacé les balises ouvrantes et fermantes par des crochets (Sinon, impossible d'afficher ça à l'écran...même avec des balises [pre]...

Les 10 Sites les plus visités au mois d'Aout en France

2007-10-07T22:36:00.003+02:00

Les 10 Sites les plus visités au mois d'Août en France

Une petite info aujourd'hui ?

Le classement des 10 premiers sites en France en nombre de visiteurs uniques est le suivant :

Sites Google : 18,7 millions (progression de +2,4% en un mois)
Sites Microsoft : 16,738 millions (-0,2%)
France Telecom : 13,65 millions (-2%)
Sites Iliad / Free.fr : 12,2 millions (-1,4%)
eBay : 10,9 millions (-4,1%)
Sites Yahoo! : 10,6 millions (-2,8%)
Groupe Pages Jaunes : 10,6 millions (-6%)
Réseau Skyrock : 9,4 millions (+3,3%)
Groupe PPR : 8,4 millions (-6,4%)
Sites Wikipedia : 7,4 millions (-1,1%)

Source : http://www.generation-nt.com

validation boosterblog

2007-10-03T17:40:00.003+02:00

Web CEO - ultimate software suite for Web site promotion

Copyright

2007-10-02T20:13:00.004+02:00

Accueil > Copyright

Le contenu de ce blog est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Pas de Modification 2.0 France.

Paternité : Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).

Pas d'Utilisation Commerciale : Vous n'avez pas le droit d'utiliser cette création à des fins commerciales.

Pas de Modification : Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette création.

Les autorisations au-delà du champ de cette licence peuvent être obtenues ici.

Inspiration créative

2007-10-02T18:52:00.018+02:00

Accueil > Inspiration créative

Maria Filo

Site de prêt à porter féminin

Full Flash

Checkland Kindleyside

Design consultant agency

Full Flash

Zune

Microsoft MP3 Player

Full Flash

Leo Burnett

Communication agencies

Full Flash

Sugarrhyme

Personnal portfolio

Full Flash

Philip Jordan Artworks

Personnal portfolio

Full Flash

I design nice things

Personnal portfolio

XHTML / CSS

10mg interactive

Creative agency portfolio

Full Flash

Lagraph.net

Lagraph collectif portfolio

Full Flash

Purple2Pink

Tania Conte portfolio

Full Flash

Kashiwa Sato

Kashiwa Sato portfolio

Full Flash

Marc Dahmen

Marc Dahmen portfolio

Full Flash

Okinawa aquarium

Okinawa aquarium website

Full Flash

Goblin Creative

Goblin Creative website

Full Flash

The Egg Republic

Multimedia Agency

Full Flash (Papervision)

Hello Monday

Creative design Studio

Full Flash

FETA2008

International Street & Open-air Theatres Festival

Full Flash

Brad Frost

Brad Frost portfolio

XHTML/CSS