Affichage des articles dont le libellé est design. Afficher tous les articles
Affichage des articles dont le libellé est design. Afficher tous les articles

31 janvier 2014

Color: un jeu en ligne haut en couleur

Color est un petit jeu en ligne tout bête qui va certainement séduire les designers, peintres et toutes les personnes qui aiment manipuler ou jouer avec les couleurs. Le but du jeu est très simple, vous avez un cercle chromatique dans lequel un timer d'une certaine couleur se déclenche, pour gagner, il faut arriver à vous placer sur exactement la même couleur que le timer.

Le premier niveau des teintes n'est pas trop compliqué, mais après ça se corse avec le niveau saturation, dans lequel il faut déjà être beaucoup plus précis et bien connaitre le placement des couleurs sur le cercle:

Bien entendu, vous avez plusieurs autres niveaux de plus en plus durs, mais ceux-ci, je vous laisse les découvrir !



Voilà, je me doute bien que n'allez y passer l'après-midi, mais ça risque de vous occuper quelques minutes quand même. Et puis c'est toujours un plus de connaître le cercle chromatique car ce n'est pas un simple cercle représentant les couleurs de l'arc-en-ciel, c'est bien plus. Voici par exemple ce qu'on peut en tirer selon Wikipédia:

Amusez-vous bien !

12 mars 2013

ColorBug: Un excellent sélecteur de couleurs (color picker)

J'avais déjà vu pas mal de logiciels capables de sélectionner une couleur pour en connaitre les valeurs HEXA, RGB etc ... Mais un aussi pratique, complet et intuitif que ColorBug jamais.

ColorBug est un logiciel gratuit pour les systèmes Windows qui va vous servir à sélectionner une couleur n'importe où sur l'écran, afin d'en connaitre les valeurs RGB, HEXA etc .. Il y a le choix entre 10 formats de couleur différents.

Pour sélectionner une couleur, vous déplacez le petit appareil photo sur l'endroit de l'écran ou se trouve la couleur que vous voulez prendre. Une fois que vous relâchez, vous allez pouvoir sélectionner la couleur au pixel près ! C'est assez bien foutu. Vous pouvez bien entendu vous faire une palette de couleurs perso que vous allez ensuite pouvoir importer / exporter au format .GPL (Gimp) ou .PspPalette (Paint-shop-pro Palette). Sinon, vous pouvez aussi choisir parmi les palettes déjà enregistrées.

ColorBug intègre aussi un outil de dégradé très pratique.

Je pense très sincèrement que ce logiciel est le meilleur "color picker" de tous, ou du moins de ceux que j'ai essayé.

15 février 2013

Marvel + Alphabet = Le Marvelphabet !

Vous êtes fan des Marvel ? Alors voici une petite infographie qui va vous faire plaisir, vous avez le droit à 26 super-héros et 26 méchants tous de chez Marvel & co.

[ source ]

14 février 2013

Créer votre police d'écriture personnalisé

Vous devez certainement connaitre des sites comme dafont qui vous proposent tout un tas de polices d'écriture toutes aussi originales les unes que les autres ? Seulement vous pourrez faire ce que vous voulez sur ces sites, elles ne seront jamais uniques. Le mieux est donc de la créer vous même, alors pourquoi ne pas essayer ?

Myscriptfont est justement un outil en ligne qui va vous permettre de le faire très facilement.

Sur le site il vous suffit de télécharger le Template, qui est un fichier PDF où il faut remplir les cases au stylo. Après ça, vous le renvoyez sur le site et aurez ainsi la possibilité de générer un fichier .ttf, .svg ou encore .otf.

Super simple et super pratique !

4 février 2013

Phrase.it: Créer des bulles de BD sur vos photos

Vous avez surement voulu un jour ou l'autre faire parler un personnage ou un animal sur une photo à la manière d'une bande dessinée. Seulement c'est pas ce qu'il y a de plus simple à faire avec des logiciels comme Gimp ou Photoshop.

Donc voilà un petit outil en ligne qui va vous permettre de faire ça très simplement et rapidement.

Phrase.it a simplement besoin de vote image, que vous pouvez uploader depuis facebook ou votre ordinateur.

Ensuite c'est fastoche, vous avez plus qu'à seletionner le type de bulle que vous désirez, la placer sur votre image, écrire votre texte en selectionnant l'outil texte et enregistrer.

Vous pourrez ensuite la partager directement, ou l'enregistrer sur votre ordinateur.

25 janvier 2013

Image Embellisher: Appliquer des effets spéciaux sur des images

Voilà une petit outil en ligne assez sympathique qui va vous permettre d'appliquer des effets spéciaux sur vos images.

Image Embellisher va en faite coller votre image sur une forme comme un cylindre, un cube, une boule etc ... Vous avez le choix entre 8 formes différentes.

Pour l'exemple, voici ce que vous pouvez obtenir à partir du simple logo de Geekologie.me:

C’est rapide et efficace, dommage que ce soit limité à 8 formes.

Art: Une collection d'images GIF magnifique !

D'habitude les images au format GIF sont surtout drôles et il n'y a pas de quoi se taper les couilles à terre ! Par contre quand on prend les images GIF du Croate Paolo Čerić's c'est autre chose, regardez, c'est juste magnifique.

art

Si vous êtes curieux, n'oubliez pas mon article sur scrubber qui va vous permettre de décomposer les images GIF, les ralentir, accélérer etc ...

[ Visitez la galerie de l'artiste ]

19 janvier 2013

Windows 8: Les bordures de fenêtres transparentes en un clic

Voilà un petit outil sympathique, qui est encore en version alpha mais qui marche déjà super bien. En faite WinAeroGlass devrait remplacer l'Aero Glass qui était disponible sur Windows 7.

Son fonctionnement est très simple, vous téléchargez le .exe sur le site et vous cliquez dessus, ce qui va rendre les bordures de vos fenêtres instantanément transparentes.

Pour enlever l'effet, le développeur a pas encore intégré de bouton ou d'interface, donc il vous suffit de vous déconnecter et vous reconnecter pour que l'effet disparaisse.

Une petite vidéo pour vous montrer ça en détail.

16 janvier 2013

Fan de Star Wars ? Vous allez aimer la table basse X-Wing

J'ai rarement vu une table basse aussi belle. Cette table en bois a demandée plus de 6 mois de travail et a été créée par Barry shields. Le vaisseau représenté est le célèbre X-Wing, chasseur stellaire de l'univers du film Star Wars.

23 décembre 2012

Pictures to color: Extraire toutes les couleurs d'une image

Pictures to color est un utilitaire gratuit pour Windows, qui va vous permettre d'extraire toutes les couleurs d'une image. Vous choisissez une image, vous faites un glisser / déposer dans la fenêtre du logiciel et il va vous afficher la palette de couleur. Vous avez ensuite la possiblité de l'exporter au format HTML.

Il y a 2 choses importantes à savoir, la première est que ce logiciel ne nécessite pas d'installation, et la seconde est qu'il est clean, c'est à dire pas de pub, et il ne vous installe pas de toolbar et autres saloperies. Vous avez par contre la possibilité de payer un café au développeur en faisant un don, je trouve cette démarche assez géniale, et ça mérite d'être souligné.

19 novembre 2012

PicMark: créer un cadre sympa sur image en ligne

Picmark est un petit outil en ligne sympathique qui permet de créer un cadre à une image, mais il permet aussi et c'est la que c'est fun, de rajouter un petit texte sur un des côtés de l'image, il y a aussi un éditeur ou vous personnalisez votre cadre, vos couleurs etc ...

Le site est ici

18 novembre 2012

Une vue aérienne de New-york en Lego

Il y a des gens qui sont complétement fous ! mais on aime, JR Schmidt 3D Artist et Motion Designer s'est attelé à créer la représentation d'une vue aérienne de la ville de New-york en Lego, et le résultat est surprenant !

Le site de l'artiste est ici

15 novembre 2012

Image2Icon: Créer un icone / favicon à partir d'une image

Si vous êtes un peu dans le développement web, ou même Blogueur, alors vous allez surement à un moment ou un autre avoir envie de personnaliser votre Favicon, vous savez la petite image qui s'affiche dans la barre d'adresse à gauche.

Vous pouvez même avoir envie de créer des icônes pour vos menus ! ou pour personnaliser un icône de votre système d'exploitation, bref les possibilités sont multiples.

Et bien une extension pour Firefox permet de faire ça assez simplement, elle propose de créer un icône à partir d'une image, il y a le choix entre plusieurs tailles, les tailles sont les tailles d'icônes les plus courantes: 16x16, 24x24, 32x32, 48x48, 64x64 etc ...

Le principe est extrêmement simple, un clic droit sur l'image, vous choisissez la taille et vous avez plus qu'à enregistrer !

L'extension est disponible ici.

31 octobre 2012

Créer facilement votre propre infographie

easel.ly vient de sortir en version bêta une application en ligne qui permet de créer une infographie personnalisée assez facilement.

C'est gratuit, il suffit de s'inscrire, de choisir un modèle et de commencer à le personnaliser.







27 octobre 2012

Clio 4: Comment serait-elle en version 3 portes ?

Renault l'a annoncé, la clio 4 ne sera jamais produit en version 3 portes, et pourtant un graphiste du nom de Theophilius Chin à quand même fait chauffer ses machines pour produire un dessin de la Clio 4 en 3 portes, résultat ? elle est tout simplement magnifique !



24 octobre 2012

Tester son site web sur différents navigateurs

Pour un développeur web, je crois bien que le problème le plus embêtant est la compatibilité avec les différents navigateurs, enfaite le problème concerne en grande partie Internet Explorer bien que depuis la version 9 il se soit considérablement amélioré.

Mais il y a pas qu'IE dans la vie, il y a aussi, Chrome, Firefox, Safari, Opéra pour ne citer que les plus connus.

Et pour ne rien arranger, en plus des nombreux navigateurs, il y a plusieurs versions différentes pour chacun.

Il faut savoir qu'il est impossible ou très compliqué d'installer 2 versions différentes d'un même navigateur sur un même système.



La solution



Pour palier à ce problème des développeurs on créés des outils comme browsershots, qui prend l'URL de votre site, le teste sur les navigateurs et systèmes de votre choix, prend des captures d'écran et vous les affichent, attention c'est un peu lent mais vous pouvez mettre le lien dans les favoris et revenir quelques minutes plus tard pour voir le résultat browsershots.org c'est simple gratuit et super pratique.



19 octobre 2012

Blogger: ajouter une barre verticale ou horizontale pour les réseaux sociaux

Indispensable ! De nos jours il est presque inimaginable de tenir un blog sans être présent sur les réseaux sociaux, moi même j'ai pas résisté plus d'un mois pour m'ouvrir un compte Twitter.

La je vais vous donner une astuce pour ajouter une barre verticale et flottante sur votre blog avec les boutons Facebook, Twitter, Google+. et une autre pour ajouter une barre horizontale puis je vous expliquerai un peu ce que vous pouvez changer et améliorer.

La barre que je vous propose d'ajouter est une barre codée en HTML et CSS avec du Javascript mais c'est simplement un lien vers un fichier donc on a pas à s'en occuper.

Voila sur l'image les différentes barres que je vais vous proposer:

Dans tous les cas vous devez coller le code dans un gadget Html/JavaScript.

Barre horizontale







Barre verticale à gauche de l'écran







Barre verticale à droite de l'écran







Barre verticale à gauche de l'écran avec effet d'ombre







Barre verticale à droite de l'écran avec effet d'ombre







Barre verticale à gauche avec coins arrondis et effet d'ombre







Barre verticale à droite avec coins arrondis et effet d'ombre







Si vous avez des questions, laissez un commentaire, je ferais le maximum pour vous répondre.

6 octobre 2012

blog / site web : les bases pour réussir

Dans cet article je ne vais pas vous donner les clés de la réussite financière, je ne vais pas vous donner d'astuce pour gagner de l'argent, je ne vais même pas vous donner d'astuce pour attirer plus de visiteurs, mais je vais vous donner les astuces qui retiendront et feront revenir les visiteurs sur votre blog / site web, les astuces qui feront que les visiteurs se sentent bien sur votre blog / site web.

Le Web Design

Le création du design est une étape très importante dans la vie d'un site web, le problème c'est que les services d'un professionnel peuvent coûter très chers, et cela peut prendre du temps.

Je vois des sociétés proposer des sites web "clef en main" à moins de 100€ ..

Certes c'est pas cher, mais c'est souvent des designs tout prêts, on vous fait choisir parmi ceux qui sont déjà réalisés et qui ont déjà été éprouvés.

En aucun vous obtiendrez un site à votre image, tel que vous l'avez imaginé, et question S.A.V la aussi vous pouvez oublier, à moins d'y mettre le prix mais est-ce que ça en vaut la peine ?



C'est justement pour cette raison que beaucoup de webmasters préfères se lancer dans la conception du design eux même, un peu comme pour les automobiles, c'est moins cher d'acheter une pièce à la casse et de la monter soit même plutôt que d'aller chez le garagiste du coin.

Choisir les bonnes couleurs

En web design il est conseillé de partir sur 2 ou 3 couleurs maximum, pour le choix des couleurs il existe d'excellent outils gratuits, vous pouvez vous servir par exemple de Color Scheme Designer pour votre palette de couleur.

Si le site a pour thème l’informatique il est évident qu'on ne va pas prendre le rose pour couleur dominante et qu'on ne va pas mettre des petits coeurs de partout, un minimum de logique devrait vous orienter sur le choix de votre thème.

Couleurs des zones de texte

Pour les zones de texte le mieux est soit de partir sur un fond blanc ou très clair, avec la couleur du texte très foncé, soit de faire l'inverse c'est à dire du texte blanc sur un fond noir mais c'est déjà plus difficile à lire pour certaine personne.

La chose à ne pas faire c'est de mettre des images ou des petites fantaisies en fond, à moins qu'elles soient vraiment très discrète et bien placées.

Le texte

Pour ce qui est du texte en lui même il faut veiller à ne pas faire des lignes trop longues, c'est extrêmement fatiguant de lire un bloc de texte qui en fini plus avec des lignes qui en finissent plus, la plupart des gens n'iront pas jusqu'au bout.

Pour cela CSS et HTML nous offres plusieurs possibilités:

  • Définir une largeur fixe en CSS pour votre zone de texte ce qui évitera des lignes trop longues.

  • La balise <br /> qui vous permettra de revenir à la ligne quand vous le voulez.

Penser aussi à la marge entre les lignes, (line-height en CSS), il est préférable de l’augmenter un peu car par défaut les navigateurs les affichent légèrement trop près l'une de l'autre.

Le texte doit être aéré, et plus il le sera plus il sera agréable de le lire même si c'est un texte très long et ennuyeux.

La police d'écriture

La police d'écriture joue un rôle majeur aussi, elle ne doit pas être trop grande ni trop petite, la tendance est entre 12 et 16 pixels.

Les polices trop exotiques sont aussi à bannir, sauf bien sur à certains endroit comme les titres, le pied de page etc ...

Arial, Georgia, Verdana, Trebuchet MS, Times New Roman sont des valeurs sures.

Les images

Attention à la taille des images, il y a des formats d'image adaptés pour le web, et d'autre pas du tout, convertissez vos image en jpg, jpeg, ou gif. Les autres formats sont beaucoup trop lourds et ça peut se ressentir fortement sur le temps d'affichage d'une page.

Le .png peut être utile surtout pour le design, mais comme il est très lourd il est donc à utiliser seulement si il n'y a pas d'autre alternative.

Les visiteurs n'aiment pas attendre pour voir une page, la aussi ça pardonne pas ils s'en vont rapidement.

La publicité

Les publicités sont aussi extrêmement désagréables si elles sont mal placées ou si elles gênent la navigation.Il faut vraiment qu'elles soient intégrées dans le design, et pas qu'elles sautent à l'écran en obligeant le visiteur à cliquer sur une croix pour la faire disparaître, perso j'appel ces sites des machines à fric, c'est un manque de respect envers les visiteurs.



Les hébergeurs gratuit c'est génial mais la plupart en contrepartie, vous oblige à afficher de la publicité, donc pour un site perso tout simple c'est pas gênant mais pour un site sérieux c'est pas envisageable, il faut se tourner vers un nom de domaine et un hébergeurs payant, il y a le choix en la matière.

L'accessibilité

L'accessibilité c'est ce qui concerne la navigation pour les handicapés, les mal voyants etc ... Pendant longtemps le web leur est resté hors de porté. Mais désormais c'est de l'histoire ancienne, il y a des outils adaptés et il y a eu d'énormes progrès en la matière et donc si vous le pouvez pensez-y.

4 octobre 2012

Color schème designer: l'outil indispensable pour les débutants en webdesign

Beaucoup de débutants en webdesign reste des heures, et parfois des jours entiers à se demander quelles sont les couleurs qu'ils pourraient bien mettre sur leur site web, il est vrai que choisir sa palette de couleur et s'y tenir est pas toujours chose facile.

Beaucoup mettent trop de couleurs, d'autre ne savent ou n'arrivent pas à les marier.



C'est pourquoi je voudrais présenter un outil très pratique gratuit et en ligne, c'est Color schème designer .





Color schème designer à la rescousse

Color schème designer est un outil très puissant qui permet à partir d'une couleur de trouver une palette de couleur.

Il y a plusieurs options selon si vous désirer rester sur 2 couleurs, 3 voir plus ...

Il permet aussi de tester en directement les couleurs sur un design d'exemple.

pas besoin d'un tutoriel complet car c'est très intuitif il suffit de lire un peu et de tester les différentes options.