TUTOS   DIY   COUTURE   WEB   DÉCO   LIFE   LOVE   CONTACT

23 avr. 2013

Leçons de blogdesign pour les fauchées (et les nulles)

Avoir un blog, c'est bien. Avoir un beau blog, c'est mieux. Et c'est pas si compliqué que ça. J'ai pas un radis, un ordi qui rame qu'il en peut plus (et le chat qui cohabite malgré moi dans mon appartement a même mangé une touche) je n'ai jamais touché à photoshop (à cause de l'ordi qui rame et à cause du prix) mais quand on connaît les bons tuyaux, on s'en sort. Bon, mon blog n'est pas (encore) le meilleur exemple (mais j'y travaille dès que je peux) mais je peux quand même vous filer quelques conseils / astuces pour avoir un beau blog, sans se ruiner en matos et sans avoir faire de formation en graphisme...





L'article d'aujourd'hui est une présentation des bases qu'il vous faut, et de ce que j'utilise au quotidien. Par la suite je vous ferais des tutoriels pour créer des jolies choses pour votre blog.

Idée reçue #1 : "Il me faut un ordinateur surpuissant"

 

Contrairement à ce qu'on pourrait croire, pas la peine d'avoir le tout dernier Mac qui coûte le PIB d'un pays en voie de développement, une palette graphique qui coûte plus cher que l'assurance annuelle de ma voiture et des logiciels que je me demande comment les gens normaux font pour les avoir (légalement) ( je dis ça parce qu'adopi m'a à l'oeil alors je suis bien obligée)

Évidemment, avoir un ordinateur puissant, c'est mieux... Mais on n'en a pas toujours pas possibilité. Et de toute façon, comme pour à peu près tout, il faut surtout savoir utiliser la matériel que l'on a, exploiter à fond ses possibilités. Avoir du matos ultra-performant, oui, ça vous faciliteras la vie, mais ça ne remplace JAMAIS des connaissances approfondies dans tel ou tel domaine. J'ai un ordi portable Sony Vaio de je sais plus quelle année, une carte graphique pourrie, un processeur ultra lent, mais je m'en sort, parce que sais l'exploiter.

C'est comme pour les appareil photos : Oui, avoir le dernier réflex à 1389€, c'est sûr, ça aide à faire des belles photos. Mais on peut aussi faire de très belles photos avec un appareil moins performant quand on sait s'en servir, qu'on maîtrise ses réglages et qu'on a des connaissances en photographie / exposition / etc.
(Par contre je ne suis pas DU TOUT un bon exemple des choses à faire en photographie) 

Idée reçue #2 : "Je dois utiliser Wordpress pour pouvoir personnaliser mon blog"

 

J'utilise blogger pour Crafty Bitches, et c'est vraiment trop. C'est très simple d'utilisation au départ, et si on n'a pas envie de toucher au html ou au css, c'est possible.
Si on veut plus personnaliser, c'est possible aussi, en utilisant des moyens détournés et des astuces... Je n'y connaissais rien en html ou autres avant de commencer mon blog. Et je n'y connaît toujours rien (ou en tout cas pas grand-chose) Quand j'ai envie de faire quelque chose avec le blog, je cherche sur google, et généralement, je trouve. Et si je ne trouve pas, je contourne le problème.
Comme mon image "catégories" à la base, sous blogger, c'est pas possible de mettre dans la sidebar une image avec plusieurs liens dedans, seulement UNE image avec UN lien. MAIS vous pouvez créer une image avec des zones cliquables, avec des liens différents, copier le code de cette image dans un gadget blogger "HTML/Javascript", et le tour est joué... Le tuto est en cours de préparation !


Idée reçue #3 "Je dois avoir Photoshop, Indesign et Illustrator"

 

ET BEN NON. Photoshop, qui est un peu un must-have dès que tu veux faire le moindre truc en web design, coûte la modique somme de 699$. Je sais pas vous, mais j'ai pas super envie de dépenser autant d'argent dans un logiciel que je n'utilise qu'en "loisir". Mais il vous faut quand même quelques logiciels, c'est indispensable si vous voulez créer vous-même le design de votre blog. Mais la bonne nouvelle, c'est qu'il en existe des gratuits très très bien.
Vous avez sans doute déjà entendu parler de The Gimp. Ou pas. C'est comme photoshop, mais en gratuit, et libre.
Je n'ai jamais utilisé photoshop de ma vie, ça fait des années que j'utilise gimp, et je n'ai jamais eu envie de passer à autre chose. On trouve des centaines de tutos sur le web pour apprendre à s'en servir, et certains tutos photoshop sont facilement transposables à Gimp (quand on connaît un peu le logiciel)



J'ai fait tous les designs du blog avec Gimp, et je n'utilise que, à tout casser, 10% des fonctionnalités du logiciel.
On peut aussi trouver une foule de brosses, motifs etc sur le net, gratuits. Et la plupart des brosses et tout ça de photoshop sont compatibles avec Gimp.

Après, le logiciel à certaines limites (pour le texte par exemple je suis pas ultra satisfaite, mais en même temps ce n'est pas un traitement de texte)  et j'imagine que quand on est webdesigner professionnel, ce n'est peut -être pas suffisant (et encore j'ai des doutes)
Certaines fonctionnalités de Photoshop ne sont parfois pas intégrées à Gimp, mais ce n'est pas un problème : ou bien il y a des "extensions" du logiciels qu'on peut installer (ce qui veut dire que vous ne bouffez pas inutilement de la place sur votre disque dur en trucs que vous n'utilisez pas) Ou bien d'autre logiciels libres et gratuits peuvent prendre le relais (par exemple pour vectoriser, mais je vous en parle un peu plus loin)

Quand on utilise un logiciel d'édition d'images et de retouches photos pour son blog par exemple, c'est très largement suffisant, les possibilités sont quasi illimitées.
Je précise aussi que Gimp ouvre tout type d'image, y compris les PDF (très très utile quand on veut modifier des patrons téléchargés en pdf) et les SVG (images vectorielles)

4. Idée reçue #4 : " Je n'aurais jamais des images qui font pro"


Et si, il suffit de savoir comment faire pour avoir des images et des logos "propres" qui font plus pro. Et ça, on l'obtient en vectorisant ses images...
Une image vectorielle est une image qui, pour résumer très très grossièrement, peut être agrandie/rétrécie à l'infini sans perte de qualité (donc sans pixelisation)

Je vous montre un exemple avec mon logo, crée sous Gimp :

Logo de base; 185x186 pixels, JPEG


Le même logo, agrandi à 400px, JPEG. Il est tout moche.
Logo vectorisé, agrandi à 400px. Beaucoup BEAUCOUP plus propre. Les couleurs sont légèrement modifiées, mais on peut remédier le problème en utilisant le bon profil de couleurs sous Gimp, ou en retouchant les couleurs sous Inkscape.
détail du logo vectorisé agrandi à 1000px

Pour ça, je crée mes logos sous gimp, et je les vectorise avec Inkscape, qui est aussi un logiciel libre et gratuit (tout ça par la même équipe que Gimp, Linux...)
Je n'utilise Inkscape que pour convertir mes images en SVG, éventuellement les modifier un peu, puis je les ré-ouvre sous gimp pour leur donner la taille que je veux. Mais on peut faire plein d'autres choses avec ce logiciel, comme créer directement le logo dans le logiciel.



Et voilà pour aujourd'hui, je vous prépare un petit tuto pour créer une barre de menu avec des images cliquables, pour que tu puisses mettre des jolies papillons multicolores là ou tu en as envie. Et peut-être même des papillons qui volent, si j'ai la motivation.

26 commentaires:

  1. Waouh!! je suis sans voix! tu fais quoi dans la vie? nan parce que sérieux, je pensais pas que c'était aussi comment dire....fourni pour tenir un blog!! Perso je suis dessinatrice en architecture, et quand je lis cet article, je me dis argh! quelle activité chronophage!!
    en tout cas, chapeau, c'est vraiment une bonne idée de partager ta façon de faire avec nous. puis c'est très bien expliqué.. keep going, on est fans!!^^

    RépondreSupprimer
    Réponses
    1. Rhooo merci !! Dans la vie je suis couturière, et en ce moment je bosse à mi-temps donc ça me laisse du temps... Parce que c'est clair, tenir un blog c'est archi-chronophage, mais j'adore !!

      Supprimer
  2. Je suis carrément nulle dès qu'il s'agit de créer un logo ou une bannière. J'ai eu GIMP sur mon ordi pendant deux ans sans jamais le maîtriser. Mais à te lire, cela me semble (un peu) moins intimidant.

    RépondreSupprimer
    Réponses
    1. Il faut commencer petit à petit pour comprendre le fonctionnement, et au fur et à mesure, on arrive à faire des trucs chouettes ! Si on essaye cash pistache de faire une animation de taré, c'est clair qu'on pige que dalle... Mais en commençant par un logo ou un petit dessin, c'est beaucoup moins rébarbatif et on y prend goût très vite !

      Supprimer
  3. j'ai installer gimp a l maison il a deux semaine! j'ai pas encore réussi à m'en servir lol mais je vais chercher les tutos! geekette dans l'âme!

    https://www.facebook.com/Passionnanteetpassionnee

    http://www.passionnanteetpassionnee.com

    RépondreSupprimer
    Réponses
    1. Le mieux pour apprendre à se servir de gimp, c'est de chercher un tuto pour débutants, même si le projet ne t'emballe pas plus que ça : tu suis les explications à la lettre, ça permet de comprendre à quoi servent les calques, les brosses, les filtres...
      Il existe aussi des vidéos etc de présentation des différents outils, mais perso je ne comprend le fonctionnement des trucs que quand je le fais moi !
      Un bon site plein de tutos pour débuter avec gimp:

      http://www.1point2vue.com/le-plein-de-tutoriels-pour-debuter-avec-gimp/

      Supprimer
  4. Super idée et merci de partager ton expérience ! En anglais il existe plusieurs ressources (dont parfois des conseils sympas sur A Beautiful Mess et puis plugly pixel mais même si je ne suis pas trop mauvaise en anglais des fois je rame :-) ) Par contre en français pas tant que ça (en tout cas pas des masses qui donnent envie de les lire et d'en savoir plus :-) ) Bref, j'ai hâte de voir la suite par ici!

    Et si on cherche à faire quelque chose de précis mais qu'on ne sait pas comment s'y prendre on peut t'envoyer un mp pour voir si tu peux créer un tuto ;-) Ou faut pas pousser mamie dans les orties?

    RépondreSupprimer
    Réponses
    1. Ah ben tu peut complètement m'envoyer une question en MP ! c'est pas sûr que je saurais y répondre, mais je vous ferais très très volontiers des tutos de ce que je sais faire !

      Supprimer
  5. Rrroh t'es trop forte ! Je suis intéressée par le futur tuto de l'image "catégorie" (je cherche partout comment faire et je n'ai JAMAIS trouvé !)
    Allez, je m'abonne à ton blog en attendant ;')

    RépondreSupprimer
    Réponses
    1. C'est en préparation ! Et c'est tellement simple que vous allez pleurez de pas l'avoir fait avant, j'vous jure.

      Supprimer
  6. Ah ben moi j'en suis au stade nullissime donc ça me paraît simplifié mais pas encore simple.

    RépondreSupprimer
    Réponses
    1. Le meilleur apprentissage, c'est de mettre les mains dedans... Amuses toi déjà à changer les polices, les couleurs... Ca vient petit à petit !

      Supprimer
  7. Info dont peu de gens sont au courant, c'est qu'il existe une version gratuite et légale des softs Adobe, il s'agit de la suite CS2 qui n'est plus supportée par Adobe et qu'ils ont décidé de rendre gratuit en téléchargement sur leur site. Certes ce n'est pas la version la plus récente, mais ça peut servir !

    Sympa comme article, c'est vrai que faire un blog un temps soit peu personnalisé est à la portée de beaucoup quand on sait quoi utiliser ^^

    RépondreSupprimer
    Réponses
    1. A priori, le "téléchargement gratuit" des anciennes versions CS2 étaient dûes à une erreur de la part d'Adobe ? Enfin je suis pas allée vérifier sur le site donc peut être que suite au succès e leur "erreur" ils ont décidé de le faire volontairement...

      Supprimer
    2. J'ai une amie qui l'a retéléchargé il y a pas longtemps (2-3 jours) sur le site d'Adobe directement, je pense que plus qu'une boulette de leur part c'était sans doute une technique de marketteux pour voir si ça attirait des gens et comme ça a marché comme ils voulaient, ils ont du la laisser à disposition.

      Enfin the Gimp et Inkscape reste très honorable aussi, ce qui est pratique avec Adobe c'est surtout le partage de contenu entre logiciels qui est plus simple !

      Supprimer
  8. Très bon article! Je ne connaissais pas du tout les images vectorielles, je retiens! Et je suis intéressée également par le tuto sur les images avec plusieurs liens cliquables dedans.

    RépondreSupprimer
  9. Coucou ma biche, j'ai téléchargé inskcape mais j'ai rien compris... ^^ (bon j'ai pas cherché longtemps j'avoue :p) je voudrais "verctoriser" des images... as tu un tuto ??

    bisous

    RépondreSupprimer
    Réponses
    1. Ah ! Cette fois je t'ai devancée :-) BIEN SUR que j'ai un tuto, quelle question !
      http://www.craftybitches.fr/2013/05/blogdesigh-pour-les-nuls-logo.html
      Il y a une partie dedans qui explique comment vectoriser une image...

      Supprimer
    2. super ! maintenant que tu me refiles le lien je me souviens l'avoir vu ton tuto :p je suis en train de le faire mais moi j'ai psp... le pb c'est que je ne peux ouvrir les svg donc je suis en train de dl gimp pour pouvoir l'enregistrer en jpeg...


      enfin bon on va y arriver !!! je fais ca pour mes catégories mais je ne sais pas si tous ces efforts sont utiles pour de si petites photos finalement... qu'en penses tu ?

      <3

      Supprimer
    3. Et ben t'es motivée dis donc ! Pour la vectorisation, c'est clair que ce n'est pas utile / adapté pour tout... Si il y a beaucoup beaucoup de détails par exemple ça devient compliqué (possible, mais compliqué) et pour les petites images par exemple pour les catégories, si elles sont en assez bonnes qualité à la base, c'est pas forcément la peine de se prendre la tête ! (Moi je l'ai pas fait pour tout ce qui est image de catégories, réseaux sociaux etc...)
      Bon courage poulette, j'ai hâte de voir ce que ça donne tout ça !

      Supprimer
    4. Bon ba je n'arrive pas à avoir gimp, c'est la deuxième fois que je le dl et qu'il me dise que la copie n'est pas bonne... j'ai dl une fois sur un lien du net et la deuxieme sur ton lien d'article.... :/

      Supprimer
    5. ah c'est nul ça !! Je sais pas quoi faire, moi comme j'ai Linux je télécharge pas de la même maniere du coup je peux pas vérifier si ça marche... Essaye éventuellement via telecharger.com ?
      Sinon : ne vectorise pas tes images (si elles sont petites et vouées à a rester on peut s'en passer) , fait ton menu sous photoshop et puis enregistre le en jpeg ou png...

      Supprimer
    6. ok je vais les faire en png ou jpeg alors... dommage pour gimp !!

      j'adore ton environnement, pourquoi tu ne proposerais pas tes services à des filles pour refaire leur blog ? avec une ptite rémunération histoire de te faire un peu de sousous ???

      enfin bon jessaie tout ca cet apm car ce week end..............; je bosse :(


      bisous <3

      Supprimer
  10. Rah merci ! J'ai justement un problème avec mon logo tout pas vectorisé !
    Je vais tenter ça, merci pour les conseils ;)

    RépondreSupprimer
  11. merci pour t'est conseils :) moi j'utilise photofiltre et photoscape et j'arrive vraiment a faire beaucoup de chose malgré que je n'y connait pas tellement.

    j'ai hate de continuer a lire tes autre article :)

    RépondreSupprimer