• Render

    Ressources

        

    Turoriel by Nagalia

    8 commentaires
  • Poisoned World

    http://img15.hostingpics.net/pics/394129concourshead3.jpg

     

    #header{
        height450px;
        margin-bottom30px;
    }
    #titre_header {margin-top110px;
        margin-left180px
    }
    #titre_header {colorrgb(25510030);
        font-familyDraculaComic sans ms;
        font-size70px;
        text-shadow20px black15px black10px black;
    }
    #body {background#100006 
    url("http://data0.ek.la/test-blog/perso/poisoned%20world/concours%20head2.jpg"
    no-repeat 50% -30px;
    }
    #background {background:none;
            width1210px;
        padding5px
    }
    #footer {colorrgb(25510050);
        text-shadow3px #eea54f;}
    #footer:after {content" - Design by Nagalia";
        colorrgb(25510050);
        text-shadow3px #eea54f;
    }
    .module_titre {
        margin-right15px;
        background
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/titreg.png
    no-repeat 10% 0%,
     
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/titred.png
    no-repeat 90% 0%;
        font-size15px;
        text-aligncenter;
        color#b9c899;
        font-familyverdana;
        text-shadow0px 0px 5px #8400ff0px 0px 10px #8400ff0px 0px 5px #8400ff;
        padding-top5px;
        height50px;

    .module_contenu {positionrelative;
        colorsilver;
        margin5px 5px;
        padding60px;
        padding-top45px;
        background
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/fondart1.jpg
    no-repeat 0% 0%,
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/fondart2.jpg
    no-repeat 100%100%;
    }
    .article_info,
    .article_info a
    text-alignright;
        margin-top0px;
        opacity0.3;
        color#f0bdda;
        -webkit-transition200ms
    }
    .article_info:hover,
    .article_info a:hover opacity1;
        color#f0bdda;
    }

    #menu1,
    #menu2 {width170px;
        color#eea56f;
        padding15px 15px;
        padding-bottom10px;
        padding-right20px;
        background
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/fondmen11.png
    no-repeat 0% 0%,
     
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/fongmen22.png
    no-repeat 100% 100%
    url(http://data0.ek.la/test-blog/perso/poisoned%20world/fonmen.jp.g
    repeat-y 0% 0%;
        
    }
    .module_menu_titre {colorSilver;
        text-shadow1px 1px 1px #ff5400;
        padding15px;
        font-size17px;
        text-aligncenter;
        font-familycomic sans ms;
        
    {colorsilver;}
    {color#f0bdda;
        text-shadownone;
    }
    a:hover {color#f0bdda;
        text-decoration3px #eea54f;
    }
    /*COMMENTAIRE*/
    .comment_normal{backgroundnone;
        border-bottom1px solid rgb(20050120);
        border-top1px solid rgb(20050120);
        margin-left10px;
        margin-right10px;
        width90%;
         marginauto;
    }
    .comment_admin {box-shadow10px #85e456;
        backgroundnone;
        bordernone;
        border-radius15px;
       width90%;
         marginauto;
        margin-top10px;
        margin-bottom10px
    }

    /*MENU*/
     
    #menu {positionfixed;
        left3%;
        top0%;
        z-index99
    }
     
    #menu a{width60px;
        height0px;
        background:  rgba(200501200.5;
        text-shadownone;
        margin-top10px;
        text-aligncenter;
        padding:20px;
        box-shadow5px rgba(0000.5);
        -webkit-transition500ms;
    }
    #menu a:hover {margin-top15px;
        border-radius10px;
         text-shadow1px 1px 1px #eea56f
    }
    /*MENU FIN*/
    /*BARRE D'OUTIL*/
    .menubar_section:hover div
        backgroundnone;
        colorsilver;
        text-shadow1px -1px 1px black
    }  
    #menubar_logo{float:right;
        padding:5px 7px 0;
        width:120px;}
    #menubar {background#2f093a none;
        margin-left-10px;
        padding-left7px;
        width105%;
        background-position0% 0%;
        box-shadow15px #85e4565px #ff5400inset 5px 10px #f1d7f5;
        colorsilver;
        text-shadownone;

    .menubar_section {background-imagenone}
    #menubar_notifications,
    #menubar_favorites{background-imagenone}
    #menubar_hidewidth0px;}
    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover{background
    url("http://img11.hostingpics.net/pics/824328fav1.png")no-repeat 50% 50%;
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn{background
    url("http://img11.hostingpics.net/pics/932327fav2.png")no-repeat 50% 50%;
    }
    .menubar_section li backgroundrgba(112691100.8);
        colorsilver;
    }
    .menubar_section li:hover,
    .menubar_section li:last-child:hover
    color:black;
        text-shadow-1px -1px 1px black;
         backgroundrgba(218,162,214,0.6);
        box-shadow2px black;
        colorsilver
    }
    .menubar_section li:last-child backgroundrgba(112691100.8);
        border-radius15px 15px;
    }
     .menubar_section ul {box-shadow0px 7px #85e456 ;
        border-radius0px 15px 15px;
        margin-left10px;
    }
     
    #menubar_notifications:hover 
    #menubar_notifications_btnbackgroundnone
    #notifications_panel box-shadow5px #85e456;
        border-radius0px 15px 15px
    }
    #notifications_panel a,
    #notifications_panel div {backgroundrgba(112691100.8);
        text-shadow1px 1px 1px black;
        color:silver;
    }
    #notifications_panel div:hover{color:silver;
        text-shadow-1px -1px 1px black;
         }
    #notifications_panel a:hover,
    .new_notification:hover {color:silver;
        text-shadow1px -1px 1px black;
         backgroundrgba(218,162,214,0.6);
        box-shadow2px black}
    #notifications_panel a:last-child,
    #notifications_panel div:last-child {border-radius0px 15px 15px 
    #notifications_panel
    .new_notification {backgroundrgba(133,228,86,0.8)}  
     

    36 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
  • Render
    Ressources
    Merci SoЯa

    4 commentaires
  • Render
    Merci SoЯa

    9 commentaires