La Vespa Chair par le studio de design espagnol Bel & Bel est une série limitée exclusive fabriquée à partir de partir de carrosseries de vieux Vespa. Chaque fauteuil est évidemment une pièce unique.

Le site : www.belybel.com

Depuis avril 2008, Speedzone était motorisé par joomla. La décision de passer sous Wordpress a été progressive et la demande de graphisme faite via le formulaire.

L’idée était de partir sur du bleu (mer/ciel) et un peu de blanc (écume ?). Au bout de quelques maquettes, je suis tombé finalement sur une interprétation qui me plaisait tant au niveau des couleurs que du concept du « sky surfer » dans les nuages, montant toujours plus haut, où les nuages remplacent la mer.

La maquette est à sa dernière étape : son intégration définitive sur le squellette d’un Wordpress 2.8.4 par Srad. On attend tous impatiemment de voir le template sur le site de beta-tests !

Basé sur une idée simple (je croyais même au départ avoir à faire à du tilt-shift !) il redonne un petit peu de poésie à ces tristes jours d’automne.

Vous trouverez sur le site de l’artiste d’autres petites perles du genre.

Une fraiche idée dans un monde de brutes !

Une liberté de création complète a été donnée à l’agence qui a développé un systeme de projection video en temps réel sans distorsion sur tous types de surface

L’idée de base était d’illuminer les murs noirs et blancs des bureaux avec de multiples projecteurs. Le programme informatique développé par Strukt est utilisable sur n’importe quelle surface et avec un nombre de projecteurs indéfinis.

Le contenu projeté peut aussi être interactif et réagir au passage des visiteurs.

Malgré cette toute relative mise de coté j’ai traité nombre de demandes émanant souvent de potes.

Aujourd’hui vous pouvez, vous aussi, en profiter à nouveau

Direction donc le formulaire de demande que je vous demande de remplir le plus scrupuleusement possible. Pour des raisons évidentes de gain de temps, Srad et moi proposerons uniquement des templates pour vos sites sous wordpress. Nous n’avons pas envie de recoder du xhtml ou html simple.

Et c’est plutôt avantageux pour vous puisque vous disposerez ainsi d’une interface d’administration complète pour votre site.

Il était temps de remettre le pied à l’étrier du webdesign gratuit de qualité. C’est chose faite !

Vous imaginez bien que mon regard a été aimanté par le matériel de tournage, finalement pas si impressionnant que ça. Les progrès de la technique en terme de miniaturisation des composants ont considérablement réduit l’encombrement des matériels de tournage.

La société de production de Gérard Depardieu nommée « DD » (sans doute en souvenir de son père qu’il appelait « le Dédé ») qui produit le film avait sur place deux ArriCam LT dont une sur steadycam. Trois camions présents sur place contenait le reste du matériel (éclairage, son, etc…)

Il suffit entre autre de mettre en noir et blanc tout ce que vous ne voulez pas mettre en avant et de laisser en couleurs la partie importante.

Cela se révèle utile pour la création d’affiches lorsque le sujet est « noyé » dans une flot de couleurs. L’effet obtenu est très sympathique.

Voyons la mise en place de la méthode.

L’image de base

Ouvrez une image couleurs. Dans notre exemple il s’agit d’une image de style vintage tirée des archives du gouvernement américain mettant en scene un ouvrier férroviaire dans un environnement de couleurs.

Commençons par duppliquer ce calque de base et à le mettre en mode superposition pour lui redonner un peu de couleurs. N’hésitez pas à jouer avec l’opacité si besoin (ici je l’ai descendue à 65,4% pour que l’image ne soit pas trop sombre) :

Mise en place de l’effet

Créeons un troisième calque vierge que nous nommerons « effet ».
Laissez le remplissage en transparence.

Attaquons nous maintenant au calque vierge.

Remplissez le de noir puis, créez un masque de calque. Dans les modes de fusion, choisissez le mode « saturation« . Votre image passe en noir et blanc.

Il ne nous reste plus qu’à supprimer la partie du masque de calque voulue pour laisser apparaitre la partie en couleurs. Assurez-vous en premier lieu que vous avez le noir comme couleur de premier plan puis, à l’aide soit d’une brosse soit du pinceau, effacez doucement les parties du masque de calque que vous souhaitez :

Peu à peu, les couleurs réapparaissent :

Au final, voici ce que donne l’image :

Avant et après

Si vous ajoutez à cela un mix d’images, votre affiche peut avoir un look très original !
Amusez-vous bien

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com

Alors que les heureux possesseurs de sites webs se rassurent : il est tout à fait possible de créer son propre icone de flux avec The Gimp

Nous n’allons pas travailler en vectoriel mais qu’importe finalement pour un usage sur internet ? J’ai choisi de le créer dans sa couleurs originale mais rien ne vous interdit d’en faire à vos couleurs.

Allez, hop ! Au boulot !.

Préparons le fond

Commencer par créer une image de forme plus ou moins carrée. A l’image de base ajouter un calque en transparence. Validez la création de ce nouveau calque et positionnez-vous dessus.

Nous allons maintenant créer la forme générique de l’icone. Pour cela, sélectionnez l’outil de sélection rectangulaire (R)

Cochez la case « Coins arrondis » et entrez un rayon de 20 pixels (comme déjà vu ici):

Sélectionnez l’outil de sélection rectangulaire (R) et tracez une forme carrée aux bords arrondis

Le choix des couleurs

Les couleurs originales sont dans les tons orangés.
Choisissez celle qui vous convient. Remplissez la forme avec un dégradé de la couleur de premier plan vers celle du second plan.

Créez un second calque sans rien désélectionner.
Faites un clic-droit dans la sélection et choisissez > Sélection > Réduire
Appliquer un rayon de 20 pixels

Remplissez cette nouvelle sélection uniquement avec de légers dégradés sur les 4 bords :

Un reflet web 2.0

Créez un nouveau calque.
Comme vous avez gardé la sélection précédente, remplissez cette dernière d’un dégradé de blanc vers transparent.

Vous pouvez désélectionner. Maintenant, prennez l’outil Courbes de Bézier (ou l’outil chemon (B)) et tracez une forme comme suit :

Transformez le chemin en sélection et supprimez ce qui se trouve à l’intérieur :

Les symboles RSS

Attaquons-nous maintenant aux symboles du RSS. Créez un nouveau calque. Tracez une forme ronde et remplissez-la de blanc. Toujours sans désélectionner, faites un clic droit > Sélection > Réduire et laissez un rayon de 20 pixels.

Supprimez ce qui se trouve dans la sélection. Votre premier arc est créé.
Opérez à l’identique pour le second arc.

Le point final

Pour tracer le rond du bas du logo, rien de plus simple. Prennez l’outil Sélection Elliptique, tracez un rond parfait et remplissez-le de blanc. Positionnez-le correctement si besoin.

L’image finale

Le fichier source

Télécharger le fichier source (format .xcf)

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com

Il s’agit tout simplement de dessiner un iMac avec les outils que propose The Gimp à savoir les outils de sélection, de calques et de couleurs.

Evidemment cela ne vaut pas une création réalisée sous un éditeur vectoriel tel qu’Illustrator mais mon propos n’est pas mettre en balance les deux logiciels mais bien de prouver que l’on peut obtenir un résultat plus que correct avec Gimp

Voici les différentes étapes de la création d’un iMac sous Gimp.

Préparons le fond

Commencer par créer une image de forme plus ou moins carrée disons de 550 pixels par 400 pixels. Il sera toujours temps de la redimensionner plus tard. A l’image de base ajouter un calque en transparence :

Validez la création de ce nouveau calque et positionnez-vous dessus

Nous allons maintenant créer la forme générique de l’iMac. Pour cela, sélectionnez l’outil de sélection rectangulaire (R)

Cochez la case « Coins arrondis » et entrez un rayon de 20 pixels :

Le dégradé du boitier

Un imac c’est une couleurs claire, allant du gris très clair au blanc. Choissiez ces deux couleurs en couleurs de premier plan et d’arriere plan car nous allons, dans la sélection, réaliser un dégradé de la couleurs de premier plan vers la couleur de second plan :

Le fond noir

Une fois votre dégradé réalisé, ne désélectionnez rien. Créez un nouveau calque.

Re-sélectionnez l’outil de sélection rectangulaire (R) et faites un clic droit dans la sélection. Choisissez le menu contextuel « Réduire ». Entrez une valeur de 5 pixels.

Remplissez maintenant cette nouvelle sélection de noir :

Encore un nouveau calque ?

Oui

Créez un nouveau calque. Créez à l’intérieur une sélection cette fois-ci bien rectangulaire (décochez « coins arrondis » dans les options) :

Remplissez cette sélection de bleu.

L’iMac commence à apparaitre doucement ….

Un petit reflet

Pour le reflet sur l’écran, créez un nouveau calque, sélectionnez l’outil de sélection elliptique (E) et tracez un ovale sur le haut de l’écran.

Assurez-vous que le blanc est la couleurs de premier plan et sélectionnez un dégradé de premier plan vers transparent. Tracez le dégradé vers le haut :

Réduisez maintenant l’opacité de ce calque à 10-15 :

Finalisons notre iMac

Pour le pied, à l’aide de l’outil de tracé de courbes de Bézier, réalisez la forme puis emplissez-la d’un dégradé gris-blanc-gris.

Pour l’écran, sur un nouveau calque, tracez des ronds de différentes tailles à l’intérieur desquels vous tracez des dégradés de blanc vers transparent :

A l’aide de l’outil de sélection de couleurs, portez-vous sur le calque contenant le bleu et sélectionnez le bleu. Revenez sur le calque des formes puis faites un clic-droit > sélection > Inverser. Un petit CTRL+X permet d’effacer les formes en dehors de la partie bleue …

Placez ce calque (formes) sous le calque du reflet :

Un petit logo pour finir

J’allais oublier : le iMac dispose d’un logo en bas, sous l’écran. Récupérez n’importe quel logo Apple sur internet et ouvrez-le avec The Gimp. Importez-le sur l’image de l’iMac :

Au besoin, réduisez-le, passez-le en mode Multiplication et descendez son opacité :

L’image finale

Le fichier source

Télécharger le fichier source (format .xcf)

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com

Ils apparaissent aussi dans les favoris, dans les onglets des navigateurs ainsi qu’en icone de raccourci sur le bureau. Les favison sont petits et quand je dis petit c’est très petit : 16 pixels par 16 pixels.

La seule chose dont vous avez besoin pour ajouter un favicon à votre site est … un favicon format windows (.ico) qui souvent se nomme favicon.ico. Il s’agit simplement de l’uploader sur votre FTP, à la racine. De nos jours, la plupart des navigateurs supportent le format .ico.

Voici donc comment en créer un rapidement sous Gimp.

Créer une image carrée

Commencer par créer une image de forme carrée disons de 250 pixels par 250 pixels. Il sera toujours temps de la redimensionner plus tard.

Nous allons changer la couleurs de fond de l’image. Ouvrez pour ce faire la palette de couleurs, choisissez une couleurs assez sombre et remplissez le calque d’arrière plan avec cette couleurs.

Créons notre symbole

Sachant qu’au final l’image fera 16 pixels par 16 pixels, n’hésitez pas à utiliser un symbole ou une police de grande taille.

Redimensionner la police

Ouvrez les options de l’outil police et augmentez la taille de la police ainsi que sa forme pour obtenir un résultat honorable :

Réduisez l’image

Pour que le favicon soit accepté par les navigateurs, il faut lui donner une taille adéquate. Redimensionnez votre image originale en 16px par 16px :

Enregistrons notre favicon

Pas besoin d’aller chercher bien loin : le menu d’enregistrement de Gimp propose un format Windows Icon (alors que Photoshop ne le propose que via un plugin …. ). Choisissez de ce fait le format .ico (windows icon).

Nommez le fichier favicon.ico.

Laissez les options de compression par défaut et finalisez l’enregistrement.
Votre favicon est créé !

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com