• Bric à Brac Graphisme

    Seront postés ici des articles généralement assez longs ne rentrants dans aucune autre catégorie. Vous y trouverez des conseils ou des cours plus long que les tutoriels classique. Le but n'est ici pas de vous guider pas à pas à dans une réalisation, mais de parler d'un concept d'une manière global.
    Tout ce qui est posté est susceptible d'être modifier à tout moment.

    Votre aide est la bienvenue pour compléter ces articles.

     

  • Un tutoreil plus simple sera disponible dans le courant de la semaine. Si vous n'êtes pas très à l'aise avec le CSS, je vous déconseille de suivre ce tuto.

     

    Voici le tuto de niveau avancé pour faire un thème sur EklaBlog de A à Z.
    Le but de ce tutoriel est de vous montrer comment réaliser un thème pour EklaBlog sans être bloqué par la structure de base "un menu à gauche, un menu à droite et les articles au milieu". L'idée est donc de laisser aller son imagination et d'avisez ensuite avec les contraintes du CSS, au lieu de faire l'inverse en se disant qu'il faut un header de la largeur de la page, un menu de 200px à gauche des articles...
    Pour illustrer ce tuto, j'ai choisi de faire un thème à l'apparence assez déstructurée :

    Hiver

    Pour suivre ce tuto, vous aurez besoin :

    • D'un logiciel de graphisme où vous pouvez utiliser les calques ( photofiltre studio, gimp, photoshop...)
    • De maitriser maitriser ce logiciel
    • De bonnes connaissances dans la structure HTML d'une page EklaBlog
    • De maitriser le CSS
    • D'un peu d'imagination
    • Et de beaucoup de patience

    Si vous disposez de tout cela, on peu commencer.

    Step 1 : Croquis

    Dans votre logiciel, ouvrez un nouveau document 2000*1000px. Commencez par placer des rectangles pour shématiser la future apparence de votre thème. Ne bridez pas votre imagination pour le moment, on s'occupera plus tard des contraintes techniques.

    Thème de A à Z

    Step 2 : Bannière

    Ouvrez un nouveau document pour votre bannière. J'ai personnellement choisi 1400*400px


    Commencez maintenant à découper cette bannière celon votre croquis. Ma page faisant 1000px, je veux faire dépasser 200px de chaque côté.



    J'ai également choisi de placer un menu de 180px à gauche.

     

    Une fois que vos découpages sont terminés, placez votre render et réservez vous une petite place pour un titre quelconque.



    Vous pouvez maintenant faire votre bannière. J'ai personnellement fait très simple, mais laissez aller votre imagination.



    Une fois cela fait, découpez la (ou non) ajoutez votre cadre, votre typo... Faites les finitions ;)

    Vous n'avez plus qu'à intégrer cette bannière dans le squelette de votre page.

    Step 3 : Autres éléments graphiques

    Réutilisez votre render, les textures ou un découpage particulier de votre bannière pour faire les autres éléments.
    Mon idée ici était de rester dans les tons du render, beaucoup de gris et quelques éléments rouges. J'ai donc récupéré la texture créée précédemment ainsi que le chat découpé du render pour le premier titre des articles. J'ai également utilisé le kunai ensanglanté pour marquer la fin des articles. Enfin, j'ai repris l'idée des notes explosives pour les menus.

    /!\ Mettez bien tous vos éléments sur des calques différents !

    Thème de A à Z

    Step 4 : Découpage CSS

    Une fois que vous êtes satisfait de l'apparence général de votre page, il faut réfléchir à comment placer tout ça en CSS. Commencez par définir où vont se placer les éléments suivant :
    • #background
    • #header
    • #content
    • #menu1
    • #menu2
    Oui, à ce stade, vous êtes obligés de savoir les sélecteurs d'EklaBlog pour connaître vos possibilités.
    Si vous arrivez à placer tout cela correctement, vous êtes tranquille pour la suite, car se sont les principaux conteneur.

    Si vous ne savez pas par où commencer, voici quelques pistes. Evidemment, tout va dépendre de votre design, je ne peux pas tout expliquer au cas par cas ;)

    Si vous choisissez de travailler en px :

    • Si un/vos #menu1(2) ou votre #content se trouve en haut de la page, votre #background doit prendre toute la hauteur de la page.
    • Si vous voulez pouvoir afficher un titre/slogan ou revenir à l'accueil en cliquant sur la bannière, pensez à laisser une place pour #header, quitte à ce qu'il soit invisible, cela vous permettra d'utiliser #titre_header a
    • Sachez que vos articles et leurs titres se trouvent dans le #content

    Si vous travaillez en % ou em :

    • Tous les éléments peuvent être positionné de manière totalement indépendante grâce à la proprité position: absolute; vous n'aurez donc pas de problème pour les placer avec les marges.
    • Votre principal problème sera d'arriver à les positionner de la même façon sur tous les écrans ( il faudra pour cela que toutes vos valeurs de positionnement ai la même unité, et que vos éléments aient des tailles dynamiques)

    Pour ma part, j'ai choisi de travaillé en px. J'en arrive au découpage suivant :

    Thème de A à Z

    Maintenant que vous savez exactement seront placés vos éléments, il faut que vous réfléchissiez comment intégrer les images à votre page. Vous ne pourrez bien souvent pas les placer directement en temps qu'arrière plan de votre élément, il va falloir faire un petit peu de gymnastique ;)

    Vous allez donc utiliser la propriété background, un petit rappel ne peut pas faire de mal :

    sélecteur { background: valeur; }

    On peut découper cette propriété général en plusieurs sous-propriété : background-color, background-image, background-position... Heureusement, il est possible de tout ecrire d'un coup. Faites bien attention à l'ordre ! Si vous ne souhaitez pas préciser la couleur, l'image, la position... Laissez simplement le champ de cette valeur vide.

    background : #COLOR url(IMAGE) repeat fixed Xpx Ypx;

    Mais la grande force de cette propriété est qu'elle permet de définir plusieurs images d'arrière plan, en définissant séparément leurs position, si elles se répètent, si elles sont fixes... L'ordre à bien évidemment son importance, la première image sera l'image de premier plan, la dernière celle d'arrière plan.

    background : url( 1er plan ), url( 2eme plan), url( 3eme plan ) ;

     


    Encore une fois, je ne peux pas tout traiter au cas par cas, ça vient avec l'entrainement. Voici néanmoins quelques conseils :

    /!\ Ne mélangeons pas le vocabulaire.
    - Ce que j'appelle la fenêtre correspond à #body
    - La page correspond à #background

    • Un arrière plan ne pourra jamais dépasser la taille de l'élément auquel il est attaché. Si votre image est plus grande que votre élément, vous êtes donc obligé de la placer en arrière plan de l'élément du dessous.
    => Dans mon exemple, ma bannière est plus large que ma page, je suis donc obligé de la mettre en fond de fenêtre.
    • Si votre image doit se répéter en mosaïque, horizontalement ou verticalement, vérifiez qu'elle peut le faire sans coupure, et que l'élément auquel vous voulez l'attacher s'y prête.
    • Faites attention à l'ordre dans lequel s'affiche les éléments : #body -> #background -> #header, #content, #menu1(2), #footer -> .module_contenu_block ...
    => Mon image de fond de page à la même largeur que ma page. Seulement, je veux qu'elle apparaisse derrière ma bannière, qui se trouve dans #body. Je dois donc également mettre cette image dans #body.

    Thème de A à Z

    Step 5: Placement CSS

    Vous pouvez maintenant enregistrer toutes vos images séparément, et passer à la feuille de style de votre blog. Il faut à présent reproduire ce que vous avez sur votre logiciel grâce au CSS.

    Armez vous de patience pour cette partie. Il est rare que tout fonctionne parfaitement du premier coup. Lorsque vous avez un problème d'affichage, dites vous bien que le CSS fonctionne de façon parfaitement logique, revoyez votre résonnement. N'hésitez pas à mettre des bouts de code en commentaire.
    Votre navigateur ne les lira pas, et cela vous permettra de voir quelle partie ne marche pas.

    Pour rappel, un commentaire s'écrit de la façon suivant en CSS :

    /**COMMENTAIRE**/


    Lorsque vous placez vos différents éléments, entourez-les de bordures provisoires. Cela vous permettra de bien vous rendre compte de la taille et de la position de ces éléments :

    border: 2px solid red;



    Pour ceux qui ne sauraient pas par où commencer, voici comment je procède :

    1- Placez correctement toutes les images de #body
    2- Définissez la largeur de votre page, et placez les images dans #background
    3- Définissez la taille et les images de #header
    4- Placez le(s) #menu1(2) sans pour l'instant vous occuper de leur contenu (module et titre)
    5- Placez et définissez la taille et les images éventuelles de #content

    Une fois que tous ces éléments sont correctement positionné, occupez vous de tous les petites éléments restant, les articles, les modules, les titres...

    Après quelques heures (et oui, je n'ai jamais dit que ça serait rapide), voici mon thème installé :

    Thème de A à Z

     

    J'espère que ce tutoriel vous aura été utile :)

    23 commentaires
  • Je vais principalement parler des thèmes sur EklaBlog, parce que 90% des visiteurs sont inscrits sur cette plateforme. Mais cela s'applique à tout site internet.

    Vous venez de créer votre blog, et vous voulez attirer plein de visiteur ? Alors il lui faut un thème fantastique ! Il faut de la couleur, des images, que ça brille, que ça flash... STOP !

    Pardonnez moi cette intro un peu niaise, mais qui n'a jamais hurlé en voyant un blog avec des gif animés de partout, des images plus grandes que l'écran, des couleurs vives de tout les côtés, du texte énorme à toute les sauces... Et j'en passe. Voici donc un petit récapitulatif des choses à faire et à éviter lors de la mise en place de votre thème.

    Les gifs animés : NON


    -> La lecture sur un écran n'est pas forcément agréable. Alors mettez vous à la place de potentiels lecteur qui essaie de s'intéressés à vos articles, mais dont le regard est sans cesse attiré par de nouvelles animation.
    Impossible de se concentrer sur quoi que se soit, et ça fini par donner mal à la tête.

    De plus, on a rapidement une impression de "trop chargé", ce qui est assez désagréable, car on ne sais plus ou regarder. Je pense nottemment à ceux qui mettent des fonds à paillette animés : Le fond bouge, donc on regarde le fond, et on n'arrive pas à se concentrer sur les articles qui sont peut être très intéressant. Résultat, au bout de quelques secondes, voir de quelques minutes pour les plus patient, on clique sur la petit croix rouge qui nous délivre de ce cauchemar épileptique.

    Je ne dis pas qu'il est interdit de mettre des gif, mais si vous n'êtes pas capable de définir quand ils sont utiles (et pas seulement décoratif) évitez, vous garderez des visiteurs. Car l'animation attire le regard. Vous pouvez donc les utilier dans vos article, pour mettre en valeur certaines parties.

    Les couleurs


    Alors, les couleus, c'est super. Même sans aucune image, elles permettent de définir l'ambiance de votre blog. Et c'est justement pour cela qu'il faut savoir les utiliser correctement, et ne pas faire comme un peintre débuttant qui vide tous ses tubes sur une toile, juste pour la colorer. La couleur doit servir à donner un thème, expliquer implicitement de quoi traite votre blog, donner l'ambiance qui vous permettra de garder le type de visiteur voulu.

    Tout comme les gif, les couleurs vives attirent le regard et rendent la lecture pénible, voir impossible. De ce fait, il ne faut jamais les utiliser comme fond de page. Vous pouvez donc bannir immédiatement les couleurs suivantes de vos idées de design :

    couleurs interdites

    J'insiste. Ces couleurs sont très jolies, alors n'écrivez pas dessus, ni en noir, ni en blanc, et encore moins avec autre chose.
    Parlons d'écriture justement. Tout un texte écrit uniquement avec l'une des couleurs ci-dessus est illisible. Les couleurs saturées sont à utiliser avec parcimonie, pour mettre en valeur un élément par exemple. Une phrase ou quelques mots d'un texte écrits avec une couleur vive attirons l'attention du lecteur ;)

    Pour vos fond d'articles, vous pouvez par exemple utiliser des couleurs claires ou désaturées :

    Design d'un Thème

    Design d'un Thème

    Vous pouvez également utiliser des couleurs sombres, mais pensez bien à l'ambiance que vous voulez donner à votre site. En revanche, elles sont souvent très bien en fond de page :

    Design d'un Thème

     

    Largeur du Site


    Pensez aux petits écrans, ne dépassez jamais 1000px de largeur de page. Il n'est jamais agréable de devoir scroller horizontalement sur une page web.
    Toutefois, vous pouvez indiquer la largeur de votre page en % ou en em, ce qui lui permettra de s'adapter à tous les écrans. Notez cependant que si vous choisissez cette unité, vous devrez penser tout le reste de votre design en % pour qu'il ne change pas radicalement d'un écran à l'autre.

    Organisation : les Marges et les Bordures


    Je radote, mais un blog lisible aura plus de chance de garder ses visiteurs. Si l'on ne peut pas différencier vos articles de vos menus, si l'écriture est toute serrée, on ne s'y retrouve plus. Alors aérez.

    La première chose à faire est d'espacer vos éléments des bords de l'écran. Que vous définissiez ensuite deux fond différents pour votre fond de page, et votre contenu, c'est votre choix de design, mais laissez au moins 50px, si ce n'est plus, entre vos articles ou vos menus, et les bords droit et gauche de l'écran.
    De manière général, laissez au moins 10px d'écart entre deux éléments bien distincts. Cela dégagera des blocs et rendra la lecture plus agréable.

    Vous pouvez accentuer cette démarcation grâce à des bordures, mais attention à ne pas en mettre partout, au risque de surcharger le design.

    1 - Sans fond




    Si vos deux éléments ont le même fond, un seul trait de séparation entre eux suffit très bien (si les marges sont assez importante) à les différencier.
    2 - Fonds différents
    Si vous voulez vraiment marquer une différence et que ces deux éléments ont des fond différent, vous être presque obliger de les entourer totalement.

     


    ATTENTION : Si vous utilisez des bordures, vous êtes obligez d'utiliser des marges internes pour "décoler" votre contenu des bordures.

     

    Les musiques


    De nombreuses personnes écoutent de la musique en surfant sur le web. Et vous savez tous qu'il n'y a rien de plus pénible que de se faire soudainement agresser par une page de publicité sonore qui se cache parmis vos nombreuses pages internet...
    La musique qui démarre automatiquement sur les pages de votre site est traitée de la même façon qu'une publicité : on ferme la page.
    Les playlistes automatiques sont donc à proscrire, si vous choisissez de mettre de la musique sur votre site, laissez toujours à votre visiteur le choix de l'activer.


    31 commentaires
  • Cet article regroupera divers techniques de graphisme. Vous trouverez des astuces pour vous aider à réaliser vos créations et un répcapitulatif sur les erreurs à éviter. Je remercie d'avance tous ceux qui voudront bien expliquer leurs petites astuces, notamment pour les autres logiciels que photoshop.  Pour l'instant, les explications sont centrées sur les signatures. On pourra toujours rajouter des choses spécifiques aux header, photomontage, wallpaper..
    => Logiciel de graphisme online : Photoscape

     
     
    I - Les Bases

    Quel que soit votre logiciel, lorsque vous créer un nouveau document, il faut définir sa taille.
    • Pour les signatures, la taille est en général comprise entre 350*110px et 500*200px. Il vaut mieux qu'elle soit au moins deux fois plus large que haute. Si ce n'est pas déjà fait, le choix de l'image/render. 

    Certaines images peuvent être placées de différentes façons (sur le côté, au centre, avec une rotation...)

    Alors que d'autre semblent faits pour n'aller qu'à un seul endroit:




    Visage de profil -> en général sur le côté






    Render symétrique -> au centre pour conserver la symétrie





    Personnage allongé -> occupe tout, ou une grande partie de la longueur de la créas

     


    Une fois le render choisi et positionné, il faut se donner une base de couleur pour éviter de faire des mélanges colorés bizarres. En général, on utilise la couleur principale du render

     

    II - Incruster le render

     

    On peut utiliser plusieurs méthode pour que le render s'intègre bien à une création:
    La gomme. Avec une gomme à bord doux, on gomme les bords du render. En général le bas, quelques mèches de cheveux, les bords des habits amples...
    Les modes de fusion. On peut par exemple superposer un calque en mode luminosité et un en mode incrustation
    Le smudge. On estompe le bas, les mèches de cheveux...
    • Placer des textures ou des C4D par dessus le render, en gommant les parties sur le visage, et les autres parties que l'on souhaite mettre en avant.
    -> Avec des C4D transparent

    Incrustation: Smudge

    1- Importez votre render redimensionné et faites en deux copies. (donc 3 calques du render ;) )
    2- Smudgez totalement celle du bas avec une brosse douce de 100px

    3- Smudgez les bords de la deuxième copie avec une brosse douce ~50px
    4- Sur le render du dessus, smudgez uniquement les parties coupées, et certains bords avec une brosse douce ~15px

     

    Incrustation: C4D transparent

    1- Placez vos C4D derrière le render pour qu'ils recouvrent un maximum de surface.
    2- Appliquez un flou assez prononcé sur les C4D
       (Sur Photoshop : "filtre => atténuation => flou gaussien" rayon 2 ~ 3px)

    3- Placez le C4D par dessus le render. Avec une brosse dure, gommez ce qui gêne et flouter légèrement.
       (Photoshop: appliquez un flou gaussien 1 ~ 0.5px) 
    4- Placez une nouvelle fois le C4D par dessus le render et gommez ce qui gêne (avec une brosse dure)



    III - Impression de profondeur

     

    Pour donner une impression de profondeur à la création, il faut pouvoir jouer avec des zones d'ombre et de lumière, ainsi qu'avec des zones floues et des zones plus nettes.

    1- Flou sur les C4D en arrière plan, ainsi qu'un filtre "accentuation" sur le render

    Observez votre render pour voir d'ou viens la lumière.
    2- Ici, j'assombris le côté gauche avec une brosse douce ~200px et je place un point de lumière blanche en haut à droite.

    IV - Calque de réglage

    En bas de la fenêtre des calques, on accede aux calques de réglages en cliquant sur cette petite icone rouge.


    La liste suivante apparait:

    En utilisant différents de ces calques de réglage, cela permet de fignoler sa création, d'ajuster les couleurs, d'augmenter le contraste... Essayez de bidouiller un peu avec pour trouver les réglages qui s'adaptent le mieux à votre créas.

     
    A tous ceux qui voudrait rajouter quelque chose, votre aide est la bienvenue, cette petite encyclopédie est loin d'être complète, beaucoup de chose sont à rajouter et à compléter.
    Merci d'écrire en commentaire ce que vous proposer de rajouter, en mettant des créas d'exemple si possible. Précisez aussi le logiciel utilisé. Vous pouvez lancer les explications d'une technique qui n'a pas encore été ajouté, ou compléter une partie que vous trouvez incomplète.

    12 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique