Beaucoup d’entre vous connaissent les services qui permettent de rechercher des images par couleur . Et bien Pictaculous vous propose de faire exactement l’inverse ! A savoir de vous trouver votre palette (vos couleurs dominantes) à partir d’une image de votre choix ( préalablement uploadées sur leurs sites).

Je trouve le concept intéressant…

lien : http://pictaculous.com/

A voir dans le même registre : Bighugelabs.com

Sujet : Deux techniques pour créer un logo quand on a pas d’idée

Intro : Chaque site/entreprise possède sa “marque”, dans le monde du web et du print, vous aurez souvent a créer vous même ce logo. Et attention, il s’agit de ne pas se louper car si le site web peut évoluer, le logo lui reste le même. Il nous faut quelque chose :

• De simple
• De représentatif du nom ou du concept
• D’original
• En harmonie avec la charte graphique de l’entreprise

Ce tutoriel n’en est pas vraiment un , il s’agit uniquement de deux petites astuces pour vous aider en cas de coups dur.

Programme : Photoshop CS3 Fr

Niveau : Moyen

Temps de réalisation : 10 minutes

La question est : Comment faire quand on a pas le moindre début d’idée ? Plusieurs solutions :

1) Utiliser les lettres du nom comme environnement graphique :

Mettons que je doive créer un logo pour Season (le framework PHP que je developpe)

Je commence par rappeler le nom du framework avec une petite police sympa ( quelque chose de sobre mais différent des polices usuelles) :
Ici J’ai utilisé Deco-R791, une police que j’affectionne particulièrement.

Je choisis ensuite deux couleurs ( au dessus de deux ça fait trop) une couleur “vive”(claire et saturée) et une couleur “de fond”(discrète et sombre) que je repartis aléatoirement sur les lettres . Et tient ! Season ça me fait penser a l’automne ( ben oui les saisons) donc je vais balancer un petit jaune orangé en couleur vive et un gris foncé en couleur de fond :

C’est a cette étape que s’opère la technique de lettrification (je sais j’invente des mots mais je suis sur que vous m’avez compris)  de l’environnement graphique du logo .

Paf !! Concrétement qu’a-t’on fait ?

• On a créé un S de la même police que le reste (Deco-R791)
• On a agrandis la taille de la police de ce S a 168px
• On a retourné le S : Onglet Edition>>Transformation>>Rotation 90° anti-horaire
• On a appliqué une bordure blanche de 2 px sur le calque season

Admettez Que ça commence a avoir de la gueule non ? Comment ça non?!!

Bref vous pouvez également rajouter une courte phrase choc, slogan de votre concept et le tour est joué :
Ici j’ai même décalé légèrement le contour blanc de season histoire de casser un peu cette symétrie trop parfaite .

2) Utiliser des motifs de serviettes/Papier peint/Carrelage etc…

Oai je sais que ça peut sembler un peu saugrenu mais peu de gens y pensent et ça rend souvent un effet très sympa .

Dans cet exemple, je dois faire un logo un peu destroy pour un groupe de musique nommé stripOfKaput.

Prenons un morceaux de carrelage chopé a la vas vite sur Google :

Et le nom de mon concept avec une police un peu trash, mettons “HARD ROCK” :

Pouf !!
Concrétement qu’a-t’on fait ?

• Une désaturation du carrelage ( ctrl+Maj+U)
• Un changement de niveau (Ctrl+L on prend la pipette noire , on clique sur une partie sombre du carrelage , on prend la pipette blanche , on clique sur une partie blanche du carrelage )
• Rotation en transformation manuelle (ctrl+T) histoire de mettre le tout de biais
• Et bien sur suppression de quelques motifs sur les bords histoire de ne pas en faire trop .

Finalement un logo c’est quoi?

Un logo c’est avant tout :

• Une police sympa
• Un jeux de couleurs ou de dégradé
• Quelques rotations
• Une phrase choc
• Un rappelle du concept sur les formes ou les couleurs du logo (même vague)

Je M’arrête ici pour ce tuto, j’espère que celui ci vous orientera quelque peu vers quelque chose de potable un futurs chef d’oeuvre .

Je suis dans ma période retouche photo ! Je n’ai jamais été doué pour ça mais ça m’a toujours passionné ! Je me suis donc réçamment lancé dans la retouche des portraits sur le thème des vampires ( la plus intéressante des créatures mythique de mon point de vue ).

Seulement je manque de figurants, je suis actuelement obligé de me prendre moi même (je varie les style vestimentaire et les coiffures mais on ne s’y laisse pas tromper ) j’invite donc mes rares milliers de lecteurs a m’envoyer leurs photos à cette adresse .
Si je parvient a en faire quelque chose de correcte, elle seront publiée sur le blog .

Voiçi mes retouches récentes:

Le script IdleWIO à été amélioré, quoi de neuf dans cette nouvelle version ?

• La base de donnée utilisateur est gérée en XML
• La position et le skin attribué aléatoirement aux utilisateurs est visible de la même façon pour tous
• Plus de bugs d’ajouts et suppression de membres
• Infobulle au passage sur les visiteurs
• Possibilité de définir un nom visible par tous au lieu d’une ip

etc…etc…

Pour ceux qui n’auraient pas suivis l’affaire Le script idleWIO (Who Is Online?) est un compteur de visites instantané en AJAX/PHP/XML qui présente de manière ludique les visiteurs présents sur votre site web .

-Pour voir la démonstration c’est par ici
-Pour télécharger le script c’est par la
-Pour plus d’infos sur le script c’est dans ce coin

Suggestions?Participations?Critiques ou autres discutailles, n’hésitez pas a me contacter : idleman@idlewave.com

Voici un petit script que j’ai développé pendant le boulot mon temps libre. Il s’agit d’un compteur de visite instantané en PHP/Javascript qui utilise la technologie AJAX pour se mettre a jour sans rafraîchir la page .

Jusque la rien de bien exceptionnel!

Le côté original c’est la présentation : p , en effet chaque visiteur est représenté par un petit bonhomme (ou une petite femme) sautillant sur une minimap.

Vous pouvez voir la démonstration en ligne ici .

Il existe différents types de bonhomme aléatoirement choisis et aléatoirement disposés sur la map :

(Merci a iconFinder pour ces magnifiques petites figurines)

Le Script offre également la possibilité de configurer la map (actuellement 5 propositions):

Ainsi que l’ajout d’effets comme des ombres ou des animations des personnages .

Bugs constatés:

• La connexion multiple d’un utilisateur unique n’est pas gérée
• Les IP ne sont pas vérifiées ni enregistrées
• Bug d’ajout d’utilisateurs inexistants ( lié a la connexion multiple possible d’un utilisateur)

Améliorations prévues :

• Ip affichée au survol d’une figurine utilisateur
• Possibilité de bloquer une ip
• Ajout de zones non habitables sur la map (rivières, toit, ravins etc…)
• Distinction de la figurine administrateur

-Si vous souhaitez télécharger la version en construction, cliquez ici.

Ce script est ouvert a tous !

Si vous avez quelques connaissances en programmation web, n’hésitez pas a m’envoyer vos apports/améliorations sur le script a l’adresse suivante : idleman@idlewave.com. Si l’apport est judicieux il sera ajouté dans la version officielle et votre participation sera citée sur le script.

Un bug,une suggestion ?

n’hesitez pas une seconde a me contacter, ça me fera plaisir : idleman@idlewave.com

Je m’essaye dans l’art tu tuto, vous m’en direz des nouvelles :p !

Sujet : Comment améliorer une photo produit

Exemple Avant/Après :

Intro : Il m’arrive souvent, dans l’e-commerce ou je travaille, que l’on me confie des Opérations suicide . Les opération suicide comprennent : Des briefs de 70 pages sous excel en caractères 9 px , des visuels pourris et une bonne centaine de modifications par jours . Il y a des choses que l’on ne peut arranger pour tous le reste il y a eurocard master card. en revanche j’ai a ma disposition quelques techniques basiques pour présenter plus correctement les visuels que l’on me fournis .

Programme : Photoshop CS3 Fr

Niveau : Débutant

Temps de réalisation : 10 minutes

C’est partis ! !

1- Initialisation:

• Ouvrez adobe Photoshop Cs3
• Cliquez sur l’onglet Fichier puis Ouvrir et allez chercher la photo a améliorer dans votre explorateur.

Prenons pour exemple ce magnifique cliché du roman de Paulo Coelho “La solitude du vainqueur” livre qui, a n’en pas douter, mérite une bien meilleure affiche que ce piètre ramassis de pixels délabré que j’ai trouvé sur le net.

2- Réglage des niveaux blanc et noir:

• Cliquez sur l’onglet Image puis Réglage et enfin Niveau (raccourcis : Ctrl+L)
• Sur la droite du panneau, cliquez sur la pipette au bout noir
• Sur le visuel, sélectionnez la zone de l’image qui devrait être la plus sombre ( ici la zone violacée en haut d’image)
• Cliquez ensuite sur la pipette au bout blanc
• Sur la visuel, cliquez sur la zone la plus claire (ici les écritures)

Le réglage des niveaux s’effectue alors de manière automatique et calibre le noir et blanc de votre image, ce qui a pour avantage d’ôter cet aspect “poussiéreux” au visuel :

Vous pouvez le constater, l’image a faite peau neuve , en revanche elle est maintenant hyper saturée et le texte a pixelisé lors du calibrage des niveaux, il vas donc falloir remédier a ça.

3- Edulcoration des Teintes et lumières :

• Cliquez sur l’onglet Image puis Réglage et enfin Teinte Saturation (raccourcis : Ctrl+U)
• Réduisez la saturation a -15

• Validez la nouvelle saturation
• Cliquez sur l’onglet Image puis Réglage et enfin Luminosité Contraste
• Baissez la luminosité et augmentez le contraste de manière conséquente

La c’est du pifometre , les valeurs varient en fonction de l’image que vous avez sous la main , contentez vous de trouver un équilibre pour obtenir une image qui ressorte sans pour autant piquer les yeux .

4- Dépixelisation des zones textuelles:

• Dans la barre d’outil a votre gauche, cliquez sur l’outil goutte d’eau (Raccourcis : R )
  Si vous ne voyez pas l’outil goutte d’eau dans votre barre d’outil cherchez un outil netteté ou doigt , faites clique droit sur l’outil et sélectionnez goutte d’eau

• Réglez l’intensité de l’outil goutte d’eau a 50% ( le réglage se fait sur la barre d’option qui se trouve en dessous des onglets principaux du programme)
• Dans la même barre , vous avez la possibilité de régler la taille de votre goutte d’eau, adaptez en fonction de la taille du texte sur votre image
• a l’aide de l’outil goutte d’eau , faites minutieusement le tour du texte aux endroits les plus pixelisés et aux abords du texte
  

Afin de vous aider , n’hésitez pas a zoomer sur les zones de texte a l’aide de l’outil Loupe ( Raccourcis : Z )

5- Simuler une fausse 3D:

• Agrandissez votre zone de travail a l’aide de l’outil recadrage (Raccourcis : C ) , sélectionnez votre image entière , puis redimensionnez votre sélection de manière a agrandir quelque peu votre zone de travail :

• Puis double cliquez sur votre sélection pour validez le recadrage
• Pour le moment , créez un calque de fond de couleur blanche afin d’y voir plus clair

• Sélectionnez le calque de votre image , puis cliquez sur l’onglet Edition puis Transformation Manuelle ( Raccourcis : CTRL+T)
• En maintenant la touche ctrl appuyée , faites glisser le point de transformation haut droit , vers le bas de manière a incliner la couverture du livre et donner une impression de profondeur
• Répéter la même opération sur le point de transformation bas droit (faire glisser vers le haut ) :

• Appuyer sur Entré pour valider la transformation
• Cliquez droit sur le claque du visuel et sélectionnez “Dupliquer le calque” ( ou faites simplement glisser le claque en maintenant la touche alt appuyée)
• Cliquez sur l’onglet Edition puis transformation et symétrie horizontale:

• placez la copie du visuel retournée et du visuel original bord a bord de manière a faire une symétrie parfaite de l’image
• Sélectionnez le calque de l’image dupliqué et redimensionnez le ( CTRL+T ) en largeur uniquement de manière a ce qu’il fasse office de tranche du livre:

Essayez de vous renseigner auparavant sur l’épaisseur du livre réel , il m’est arrivé d’exagérer ou de sous estimer légèrement le nombre de page , je me suis fait taper sur les doigt par l’éditeur .

• Afin de donner un effet de profondeur , appliquez un dégradé de noir vers transparent sur la tranche du livre a l’aide des options de calques :

6- Reflet Web2.0:

Nous avons un magnifique objet 3d , il est maintenant temps de lui ajouter un petit reflet branché afin de donner corps au support ( pour le moment il flotte un peu dans le vide )

• Dupliquez le calque de la face du visuel
• Cliquez sur l’onglet édition puis Transformation puis symétrie axe vertical
• Collez bout a bout les deux calques :

• Sélectionnez le calque du bas (le calque qu’on vient de retourner) appuyez sur CTRL+T afin de le transformer , puis faites glisser le point de transformation de droite sur le bord bas droite de la face du visuel (toujours en laissant la touche CTRL enfoncée) :

• Effectuez les mêmes opérations de duplication,retournement , transformation sur le calque de tranche .

• Sélectionnez les deux calques retournés (tranche retournée + face retournée ) puis faites clique droit sur l’un des calques sélectionnés et choisissez Fusionner les calques (Raccourcis : CTRL+E)
• Les deux calques ont fusionné en un seul , réduisez son opacité a 50% :

• En gardant le calque sélectionnez , appuyez sur le bouton “Ajouter un masque de fusion” en bas a droite du programme ( le petit carré gris contenant un rond blanc)
• Dans la barre d’outil , sélectionnez l’outil dégradé (Raccourcis : G)
• Sur le masque de fusion du calque, appliquez un dégradé de noir vers transparent afin de masquer progressivement le reflet :

Et voila votre produit tout beaux tout propre !!! Vous pouvez également rajouter un léger dégradé en fond d’image pour la forme :

Si vous avez la moindre question/suggestion/critique, n’hésitez pas a poster votre commentaire ici.

Bien à vous.

J’ai le regret de vous informer que le site web d’idlewave a aujourd’hui fermé ses portes.

Pourquoi?

• Manque de temps
• La Version actuelle de l’idlebox ne marche pas sous php5
• Mon examen de fin d’année qui approche
• Le ftp a besoin d’être réorganisé

Voila ça c’étais pour la mauvaise nouvelle ! Maintenant les bonnes news  !

Le site n’est fermé que temporairement,  je compte le refondre entierement et y proposer l’ensemble de mes projets les plus aboutis a savoir :

IdleBox V3.0 : Shoutbox en Ajax/PHP

IdleBloc v1.0 : Generateur de bloc d’édition Inline Ajax

Kaput Galerie v1.0 Alpha : Galerie photo php/ajax

IdleWhois v1.0: Compteur de visites en temps réel php/AJAX

IdleLab v1.5 : Plateforme collaborative pour projets php/Ajax

Kaput galerie et idlebloc devraient sortir sous peu et inaugurer l’ouverture prochaine du site.

Salut a toi public !

Aujourd’hui je vais vous parler de l’ouverture du portfolio officiel de mon mentor graphique , j’ai nommé Stanislas Besse Alias Stanley Gribouille .

Infographiste, Illustrateur, Ex Printeur et dessinateur de talent, S.Gribouille s’est imposé au fil des années dans de nombreux domaines artistiques . A l’aise dans tous les styles, Stanley s’essaye au photomontage, à la vécto et a la vidéo mais sa véritable ambition, son leimotiv, c’est le gribouillage !

Sa passion du graphisme s’est récemment ouverte au web avec l’ouverture de son portfolio officiel. Ce coin du web contient une présentation humoristique de sa personne et de ses dernières créations !

Le site étant très récent, beaucoup de ses travaux ne sont pas encore publiés cependant les créations déjà en ligne valent le détour .

Pour voir son porfolio :

http://stanley-gribouille.fr/

Pour accéder à ses réseaux sociaux (twitter,delicious,myspace,netvibes etc…):

http://stanislas.besse.free.fr/

Si comme moi vous pensez que cet artiste a du potentiel , n’hésitez pas à lui envoyer vos encouragements sur sa page de contact ou
directement par email et a lui proposer vos suggestions pour développer son site .

.

Il fallait que ça arrive un jour ou l’autre , l’idlebox v2.0 est a présent obsolète ! (du moins de mon point de vue) . Outre le fait que la version bug depuis le passage de php 4 a php 5 , j’ai des frissons en relisant mon code aujourd’hui ! Pas jojo tout ça ^^ . Bref j’ai décidé de me mettre officiellement a la V3.0 de l’idlebox !

Quoi de neuf sur cette nouvelle version ?

Outre quelques gadgets inutiles , la V3.0 sera essentiellement axée sur la gestion de base de donnée XML , qui permettra aux utilisateurs de créer des shoutbox multi-site , de proposer un flux rss de leurs box et de conserver leurs données directement sur leurs espace web . Le choix sera bien sur possible pour ceux qui souhaiteraient rester sur du SQL .

Quelques aperçus du skin?

Ok mais c’est vraiment parce que c’est vous , d’habitude de répugne a dévoiler mes skins avant que le projets soit terminé ^^ . Cette fois j’ai opté pour un design clair et classique que j’espère être passe partout , le skin de la v2.0 étant sacrément (peut être un peu trop) tape a l’oeil et trop dark.

Voila le skin déplié en mode utilisateur simple :

En mode plié :

Partie administration :

Outil d’installation simplifié :

Certaines parties du design sont encore a peaufiner mais l’ensemble de la charte est la .

Je vous invite a m’envoyer vos suggestions sur le graphisme le développement ou simplement vos idées a l’adresse email suivante : idleman@idlewave.com

Si vous souhaitez participer d’une quelconque façon au projet vous pouvez également me mailler a cette adresse.

Voila un design inhabituel puisqu’ils se démarque de mon habituelle touche web2.0  (dont j’ai beaucoup de mal a me défaire) . Je me permet donc de vous le montrer  :

Pour la petite histoire , il s’agit d’un design pour phantasia-fr.net , serveur privé ragnarok fort sympathique , je regrette presque d’avoir cessé de jouer .