Imago's Blog

Yet another personal blog…

Catégorie : Graphisme (Page 2 sur 2)

Opération un logo pour Grifon

GRIFON (Groupe Rennais pour un Internet Fourni de manière Ouverte et Neutre) est une association rennaise militant pour un internet neutre. Il y a près d’un an déjà, je leur ai proposé de créer leur logo. Je m’y suis enfin mise et voici le résultat:

 

Reste plus qu’à le coloriser, mais là j’avoue je sèche. Des idées?

Thème e17 en gestation

Généralement, quand je construit un thème e17, je ne prend pas le temps de réfléchir à son design avant de m’y mettre et souvent je change d’avis pendant que je développe. Résultat, le thème n’est pas aussi clean qu’il devrait l’être et il manque de consistance.

J’ai discuté récemment avec Rasterman, le développeur principale de Enlightenment, et il m’a donné ses astuces pour réaliser u bon thème. Je n’en ai pas perdu une miette et je vais tenter de suivre ses conseils.

Du coup, hier j’ai récupérer une de ses maquettes de thème et j’ai tenté de dessiner un nouveau thème sans même réfléchir à comment j’allais l’implémenter. Voilà le résultat du premier jet:

Comme toujours, j’ai nommé ce thème avec le titre d’une chanson. Cette fois, il s’agit de Silver Morning, en référence à un titre de la bande originale de l’animé Samurai Champloo: Nujabes – Silver Morning.

EFL Dev Day

Du 5 au 7 novembre prochain aura lieu à Barcelone la Linuxcon Europe, pendant laquel se déroulera également le EFL Developer Day. À cette occasion, l’association e.fr vendra des t-shirts que votre humble hôte a dessinés 🙂

Data Visualisation

Il y a de ça un peu plus d’une semaine, j’ai rédigé un nouvel article sur le blog Bioinfo-fr.net. J’y explique très brièvement l’intérêt de la DataViz. Je ne suis pas une spécialiste du domaine, mais j’aime le beau, même en science. N’hésitez pas à critiquer ou à me faire part de vos points de vue!

Data Visualisation ou l’art de se faire comprendre

 

Nouveau thème e17 : Snowblind

Télécharger

Webdesign

Ce n’est pas parce que je ne blogue plus que je ne fais plus rien! Voici 3 de mes réalisations :

Blog de l’association française Enlightenment-fr:

Thème wordpress basé sur Twenty-eleven, adapté du design du site officiel de Enlightenment. Thème téléchargeable .

Site web ElfTech:

Site internet statique, en html/css pur. Tous les effets sont réalisés en CSS3.

Blog Bioinfo-fr:

Thème wordpress basé sur Bubblepress. Thème et logo créé spécialement pour le blog, téléchargeable .

Tutoriel Gimp pour Page de garde

J’ai écrit ce tutoriel il y a quelque temps sur le forum de mon Master. Je vous en fait part ici, car je pense que ça peut être utile.

Je vais vous expliquer en quelques étapes comment j’ai réalisé la page de garde de mon rapport de M1. C’est pas compliqué, tout le monde peut le faire (si si, c’est vrai!).

  • Pré-requis

– un pc
– un écran
– une souris
– The Gimp (gratuit)
– un peu de patience
– des bon goûts (ça, c’est accessoire)

  • Démarrage

Bien évidemment, ce n’est un secret pour personne, il faut démarrer The Gimp. Allez-y, ne soyez pas timides! Le premier démarrage est un peu long, c’est normal, les suivants seront plus rapides.

Voici à peu près ce que vous allez voir:

Notez au passage ce magnifique fond d’écran, que je vous ferais partager avec plaisir si vous m’en faîtes la demande :P

Bref, l’interface se compose de 3 fenêtres, ce qui en générale déroute les habitués de ‘Toshop et consort, mais ne vous inquiétez pas, c’est pas si dur à gérer. À gauche, vous avez la boîte à outils, qui se compose… bah heu… d’outils! Au milieu se trouve la fenêtre où apparaîtra la page blanche. Et à droite, vous pouvez voir une fenêtre qui permet d’afficher des propriétés de la page, tels que les filtres, les brosses, mais surtout les calques.

  • Créons notre page!

Pour cela, rien de plus simple, sur la fenêtre du milieu, allez dans Fichier -> Nouveau, choisissez le format A4 et puis c’est tout.
Voilà ce que vous obtenez:

Ça y est, on va pouvoir se lancer! (mais pas trop loin hein)

  • À l’attaque!

Créez tout d’abord un nouveau calque, pour ne pas dessiner directement sur la page blanche:

Sélectionner l’outil Ellipse. Puis essayez de reproduire un cercle comme suit:

On a sélectionné un cercle. Bien. Mais c’est pas vraiment ce que l’on veut. Ce qui nous intéresse c’est l’extérieur du cercle. On va donc inverser la sélection :

Ou tout simplement Ctrl+i pour le raccourcie.

On a ici plusieurs zones qui ne nous intéressent pas, il va falloir les enlever de la sélection. Pour cela on va par exemple sélectionner l’outil Rectangle, et changer ses options comme ci-dessous:

On va ensuite sélectionner les parties qui ne nous intéressent pas pour les enlever de la sélection:

N’oubliez pas de taper sur Entrer pour valider la sélection, sinon la zone reste active et n’est pas enlevée.

On a maintenant sélectionné un jolie coin arrondi, il va alors falloir le remplir! Pour faire ça, on ne va pas juste remplir par une couleur basique, on va faire un dégradé, c’est plus chic ^^

Pour appliquer le dégradé, cliquez et relâchez la souris un peu plus loin. Jouez un peu avec cet outil pour comprendre comment orienter le dégradé et trouver le meilleur angle.

Voilà, vous avez fait la première couche de l’angle!
Pour y rajouter des couches, créez un nouveau calque et répétez les opérations, en changeant la forme et la taille du cercle pour avoir un beau chevauchement, et changez légèrement la couleur du dégradé pour donner un peu plus d’effet.

  • L’ombre blanche

« Aïe, ça se complique! » Me direz-vous. Que néni! Si vous suivez toujours ça va le faire tranquille pépère!

On va dupliquer le calque du dessus:

On va ensuite modifier ce calque pour que le coin devienne tout blanc en utilisant la fonction Courbe:

Faites bouger la ligne diagonales pour voir ce que ça change sur votre image. Au final vous relèverez l’extrémité gauche de la diagonale en haut à gauche du graphe:

Validez, et voilà!

On va ensuite rendre flou de calque pour créer l’effet d’ombre en utilisant le filtre Flou Gaussien:

Changez l’intensité du flou en variant les paramètres, n’hésitez pas à y aller, on veut du flou bien flou! Une fois le flou à votre goût, vous validez, et la magie va opérer…

Vous pouvez ensuite déplacer votre calque sous le coin en utilisant les flèches dans la fenêtre de droite. Vous pouvez bouger votre calque pour que l’ombre soit plus visible avec les flèches directionnelles.

Vous pouvez également modifier l’intensité de l’ombre en jouant avec l’outil de transparence dans la fenêtre de gauche:

Voilà, vous y êtes! C’était si dur que ça? :D

Brainstorming

Je sais pas pour vous, mais quand je veux faire une nouvelle feuille de style les idées se bousculent dans ma tête et j’ai du mal à me fixer sur un objectif.

Je parcours les sites de webdesign en me disant « tiens, c’est bien ça! », et puis hop, je zap et ça tombe aux oubliettes.

J’ai donc décidé pour éviter ça de recourir à une technique bien connue dans le monde du dessin : le carnet à idées. Ça consiste à coller dans un carnet tous les trucs intéressants qui nous passent sous la main, que ce soit un morceau de prospectus, un bout de tissu, d’emballage, de journal, même de papier toilette pourquoi pas… Bref, tout ce qui nous a tapé dans l’œil à un moment ou un autre. Je vais donc faire de même avec les sites web qui me plaisent.

Voici ma récolte de ce soir  (cliquer pour agrandir) :

Page 2 sur 2

Fièrement propulsé par WordPress & Thème par Anders Norén