AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


174 résultats trouvés pour signature

Nasträlya

Signature ptits triangles - Ven 10 Avr 2020 - 21:09





Signature: les ptits triangles



Bonjour :friends:

Je vous propose une petite signature que j'ai faite exprès pour qu'elle passe sans iframe  :cow: (et que j'utilise actuellement sur mon forum :bwaha: )

Tag signature sur Never Utopia - graphisme, codage et game design Screen40

Il suffit juste de mettre ce code dans la partie signature de votre profil:

Code:
<div style="background-color:transparent; width:363px; margin:auto; height:80px;"><!-- images 1--><img src="https://zupimages.net/up/20/15/770e.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:left;"/><!-- image 2--><img src="https://zupimages.net/up/20/15/11qm.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:left; margin-left:-35px;"/><div style="background-color:transparent; width:150px; color:#585858; text-align:center; margin:auto; margin-left: 95px;padding:10px; position:absolute; font-size:12px;"><!-- votre citation -->"Si tu veux être un homme libre, laisse les autres te mépriser."</div><!-- image 3 --><img src="https://zupimages.net/up/20/15/co6t.jpg" style="clip-path:polygon(50% 100%, 100% 0, 0 0); width:80px; height:80px; float:right; margin-left:-35px;"/><!-- image 4 --><img src="https://zupimages.net/up/20/15/0elq.jpg" style="clip-path:polygon(50% 0, 0 100%, 100% 100%); width:80px; height:80px; float:right;"/></div>


les images sont en 80*80. Normalement, elles sont automatiquement redimensionnées.


Et voilà, tout simplement :ange:



Nasträlya

(Poké)Ball Signature - Mer 8 Avr 2020 - 10:47





(Poké)Ball Signature



Bonjour :friends:


Je vous propose une signature façon ball ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Dans un premier temps, il faut une page HTML: Modules > Gestion des pages HTML > Création en mode avancé (HTML)

Vous y mettrez ceci:

Code:
<html>
     <head>
       <meta charset="utf-8" />
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}
       </style>
    </head>
<body>
  <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div>
<div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>
    </body>
</html>


Vous y mettez alors vos images en 150*150, votre citation et vous enregistrez!   :hehe:

Ensuite, il suffit de mettre l'iframe dans le profil, là où on met normalement la signature:

Code:
<center><iframe src="URL PAGE HTML" name="signa" scrolling="no" frameborder="no" align="center" height = "300px" width = "320px">
</iframe></center>


Le tour est joué, vous avez une (Poké)Ball Signature :pompom:

---

Dans le cas où vous n'auriez pas accès aux pages HTML et que vous voudriez essayer de la mettre directement dans votre profil, ce sera ce code-ci:

Code:
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}</style>

 <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div><div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>


Personnellement, elle m'apparaît trop longue pour être validée, mais ne connaissant pas les autres versions, voir même où vous souhaitez la mettre, cela peut, peut être, vous servir :bwaha:


Sparrow-style

Index - Ven 23 Sep 2016 - 12:08

Avancé (rouge)


What about playing a cryogenic game ?
Voir le tutoriel

ROGERS.

Signature #1 ♦ Valar Morghulis - Ven 16 Sep 2016 - 15:12



Signature assez simple mais que j'utilise beaucoup, je voulais la partager avec vous :heart: les gifs se mettent automatiquement à la bonne taille, je conseillerai néanmoins de passer par des réducteurs de liens pour ne pas surcharger l'espace "signature" :heart:


Valar Morghulis , Valar Dohaeris


Code:
<div style="margin: auto; width: 405px; text-align: center;"><link href='http://fonts.googleapis.com/css?family=Miss+Fajardose' rel='stylesheet' type='text/css' /><center>
<img src="https://67.media.tumblr.com/614765a73266ea72840de650218ed5bc/tumblr_o9i7jghBEd1t4n65oo7_r1_250.gif" style="width:200px; border-radius: 20px; box-shadow: #000000 0px 0px 10px;" /> <img src="https://66.media.tumblr.com/6aee180ea9fabebb4f868e4e69d33461/tumblr_o9i7jghBEd1t4n65oo6_r2_250.gif" style="width:200px; border-radius: 20px; box-shadow: #000000 0px 0px 10px;" /><div style="margin-top: -2px; font-family: 'Miss Fajardose', cursive; font-size:35px; text-transform : upperclass; width:400px;line-height:10px; color: #660000; text-shadow:#000000 0px 1px 3px; text-align: center;">Valar Morghulis , Valar Dohaeris
</div></div>

Elyndra

Signature The Violonist - Sam 10 Sep 2016 - 11:55



Bon ben je viens vous proposer un de mes tutos pour photofiltre simple. On peut faire des merveilles même avec cette version là =)

Version logiciel: Simple et +

Niveau: Intermédiaire

Matériel:
- Textures: https://2img.net/r/hpimg11/pics/959369LightTexture001byDiellza.jpg
https://2img.net/r/hpimg11/pics/435484text104.jpg
- Stock: http://browse.deviantart.com/digitalart/?q=violonist#/d4jyvt3

Tutoriel:
Tag signature sur Never Utopia - graphisme, codage et game design 497795PFSignTheviolonist

Exemple de rendu:
Tag signature sur Never Utopia - graphisme, codage et game design 687954TheViolonist
Tag signature sur Never Utopia - graphisme, codage et game design 315675SOD

Astuce - Retirer les retours à la ligne en haut des signatures - Dim 24 Juil 2016 - 20:09



Enlever l'espace en haut de la signature



Une petite astuce pour les codeurs qui veulent personnaliser l'affichage des signatures.

Sur forumactif, les signatures ont toujours 2 retours à la ligne (balises br) qui s'ajoutent au début et vont créer un espace non désiré.

C'est à dire que si je veux styliser ma signature en lui mettant une couleur de fond, ou une bordure, ou des marges intérieures, j'aurai toujours un grand truc en haut qui déséquilibre.

Exemple



J'ai voulu mettre un fond bleu à ma signature, et des marges à l'intérieure mais... J'ai un grand espace en haut !
Tag signature sur Never Utopia - graphisme, codage et game design Iqfy6eE

Une fois le code ajouté, je n'ai plus le soucis des retours à la ligne en haut :
Tag signature sur Never Utopia - graphisme, codage et game design GyiR68D

Code



Pour enlever seulement ces 2 balises br là, il suffit d'ajouter ce petit code CSS :
Code:
/* Enlever espaces en haut de la signature */
.signature_div > br:nth-of-type(-n+2) {
  display: none;
}


La classe "signature_div" que j'utilise est celle présente par défaut autour de la signature dans le template viewtopic_body.
Code:
<div class="signature_div">{postrow.displayed.SIGNATURE}</div>


Onyx a écrit:
Si je peux me permettre, cette div n'existe pas pour PunBB. À la place, le CSS à utiliser serait celui-ci :
Code:
/* Enlever espaces en haut de la signature */
.sig-content > br:nth-of-type(-n+2) {
  display: none;
}


Pensez à faire un lien de remerciement vers Never Utopia pour la petite astuce Wink

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Jasmée

Signature basique - Sam 2 Avr 2016 - 19:21



Bonsoir tout le monde !

Je me suis fabriqué hier une petite signature toute simple qui a pris un temps absolument indécent à la noobette que je suis et comme j'ai beaucoup utilisé les LS adorablement proposés par les membres de NU, j'aimerais rendre un peu de ce que j'ai reçu en attendant de savoir produire quelque chose de plus complexe. Cette signature n'a pas la prétention d'être originale, mais elle est faite maison et je la trouve sympa donc je partage, en espérant que ça plaira à quelqu'un !

Les dimensions de l'image sont ici de 300 x 150 px, mais rien n'empêche de faire quelque chose de plus long, surtout si on veut mettre davantage de texte. Tout est modifiable, évidemment !

L'aperçu qui va bien (la signature sera sans fond et centrée), illustration de GUWEIZ.

Et le code qui va avec, tout ramassé parce que sinon FA prend les sauts de ligne en compte...
Code:
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' /><div style="width: 300px; margin: auto;"><div style="width: 300px; height: 150px; border-radius: 15px 35px 15px 35px; background-image: url('http://i86.servimg.com/u/f86/18/39/18/54/300x1511.jpg'); font-size: 7px;"><a href="http://www.never-utopia.com/" style="font-weight: bold; text-decoration: none; color:#31353A;" />Jasmée sur Never-Utopia</a></div><div style="margin-top: 2px; border-top: solid 3px #FF6600; text-align: center; font-family: 'Rock Salt'; font-size:13px; color:black;">Lorem ipsum <span style="font-weight: bold; text-transform: uppercase; color: #FF6600;">dolor</span> sit amet...</div></div>

Syel

Index - Ven 27 Nov 2015 - 18:47

Initié (orange)


Korn - Leave me alone
Voir le tutoriel
Wade Barrett - Leader of Nexus
Voir le tutoriel
Jeff Hardy - Extreme Enigma
Voir le tutoriel
Killer Instinct SNES Sprite
Voir le tutoriel
Bannière Fairy Tail no hattan
Voir le tutoriel


Jadelina

Index - Ven 5 Juin 2015 - 12:23

Techniques diverses - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.


Eclairage


Rond de lumière coloré avec l'outil pinceau
Voir le tutoriel
Effet constellation lumineuse
Voir le tutoriel



Effet abstrait


Effet désintégration (brush)
Voir le tutoriel



Effet 3D


Texte 3D avec effet de torsion
Voir le tutoriel
Effet 3D sur une image
Voir le tutoriel
Boutons d'interface avec incrustation Lumineuse
Voir le tutoriel
Effet sous-verre/Effet de reflet
Voir le tutoriel



High-tech


High-tech, créer une forme métallique en 10 commandements
Voir le tutoriel
Faire un tube en verre rempli de fluide
Voir le tutoriel



Formes


Créer des formes de fond de création
Voir le tutoriel
Donner une forme originale à sa création
Voir le tutoriel
Créer un masque d'écrétage
Voir le tutoriel
Bulle qui ressort d'un fond noir et blanc
Voir le tutoriel
Mettre un cadre à une forme
Voir le tutoriel



Incrustation


Incruster un render par contour progressif
Voir le tutoriel
Incruster un render via flou gaussien
Voir le tutoriel
Double Exposure [video]
Voir le tutoriel



Motifs


Faire un motif en lignes diagonales
Voir le tutoriel



Outils


Outil plume : faire un serpentin
Voir le tutoriel



Transparence


Création avec éléments sortant du cadre
Voir le tutoriel

Sparrow-style

Index - Jeu 4 Juin 2015 - 12:31

Signatures complètes - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.

Ces tutoriels étant très nombreux ils ont été classés par difficulté dans cet index, pour plus de clarté. Ces indices de difficulté correspondent aux pastilles de couleur présentes en icône de sujet dans la liste des sujets.


Novice (vert)


Follow the light > Black & White
Voir le tutoriel
Kazeshini, Dark Shinigami
Voir le tutoriel
Edge - Rated R Superstar
Voir le tutoriel
The War of the Simpsons
Voir le tutoriel
Wolverine - Marvel comic
Voir le tutoriel

Giant Blaster of Smudge
Voir le tutoriel

Faire une pub iPod style
Voir le tutoriel
Sans détourage et sans brushes
Voir le tutoriel


Sparrow-style

Index - Jeu 4 Juin 2015 - 11:56

Fonds & Textures - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.


Fonds


Fonds divers et simples (x2)
Voir le tutoriel



Textures


Effet métal "griffé"
Voir le tutoriel
Texture Asphalte / Bitume
Voir le tutoriel
Texture bois en 3 étapes
Voir le tutoriel
Texture bois (simple)
Voir le tutoriel
Faire un Schnout
Voir le tutoriel
Créer un vieux document (parchemin)
Voir le tutoriel
Map façon seigneur des anneaux
Voir le tutoriel



Effets 3D


Citrons et oranges réalistes
Voir le tutoriel
Se faire cuire un oeuf
Voir le tutoriel

Sparrow-style

Index - Jeu 4 Juin 2015 - 11:32

Retouches & Photomanip' - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.


Retouche


Retouche d'image (contours épais)
Voir le tutoriel
Vintage...mais pas trop
Voir le tutoriel
Photomanipulation : effet peinture
Voir le tutoriel
Faire ressortir un élément en couleur
Voir le tutoriel
Récupérer un line sur un scan pourri
Voir le tutoriel
Donner un aspect coloré à vos créations (simple)
Voir le tutoriel
Faire un maquillage de clown
Voir le tutoriel
Faire un coloring simple
Voir le tutoriel




Colorisation


Colorisation d'illustrations
Voir le tutoriel



Photomanipulation


Photomanip - Ville en destruction
Voir le tutoriel
Typo'art creative cloud
Voir le tutoriel

Onyx

Signature à onglets - Jeu 25 Sep 2014 - 2:56




LS - Signature à onglets


Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons créer notre signature dans une page html.
  • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

  • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

  • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

  • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
Merci de ne pas enlever le crédit vers Never-Utopia.



1. Le corps de la signature (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre signature.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)"
On choisit un nom, comme "Signature de NOM" par exemple.
Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>


Changer les images/texte
Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

Modifier les onglets pour qu'ils changent au clic
Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

Comment modifier le style ou la mise en forme
Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
Code:
<style type="text/css">
VOTRE CSS EST ICI
</style>


Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



1. Mettre l'iframe (espace signature)


Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

Pour cela, nous allons aller dans :
> PROFIL
> > SIGNATURE

Puis, nous allons mettre le code suivant :
Code:
<iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, notre signature), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Darkprincess

Marill - Mer 10 Aoû 2011 - 8:03


HA HA HA HA ! Je suis de retour !! DOH HA HA ! Pour vous jouer un mauvais tour !! Afin de préserver le monde de la tutorialisation ! Afin de rallier tous les peuples à notre communauté. !Afin d'écraser le vol et les ressources !Afin d'étendre notre pouvoir sur le web entier !DP !!La Team Rocket, plus rapide que un modem !Rendez vous tous, ou ce sera la guerre !oui la guerre !!!

Okay j'men vais m'cacher ---------> comment ne pas résisté?

Voilà un petit tutoriel qui nécessite AUCUN C4D ni de brush ni de tralala effet bourrin.

Rendu :
Tag signature sur Never Utopia - graphisme, codage et game design 5540779Pw4gFTeHK

Ressource :
http://planetrenders.net/renders/albums/userpics/413942/183_marill.png
Texture :
texture 3 by =Sirius-sdz on deviantART

Faisable aussi avec n'importe quelle pokemon exemple Pikachu au lieu de mettre des algues vous mettez des éclairs avec un fond jaune ! Soyez un peu imaginatif !

Tuto
Tag signature sur Never Utopia - graphisme, codage et game design 484981byL2HWhHWd

Tag signature sur Never Utopia - graphisme, codage et game design 505277umLj3DXWOp

Sugar Boy

Abstraction - Lun 25 Juil 2011 - 3:57


Les rendus possibles:

Spoiler:


Le tuto:
Spoiler:


Invité

10 6 11 - 4 Years - Ven 1 Juil 2011 - 2:17

{#}signature{/#}

Hey!
Me voilà avec un nouveau tuto, que je devais à la base poster à la MAJ, et en fait j'allais le faire, sauf que BLAM!!! Toshop me sort une crise de "j'aime pas ta mise en page :hap:" et BLAM!!! mise en page foirée. Du coup j'ai du refaire le tuto, c'tait magnifique, à la base je l'avais fait en 3 heures, et la REMASTERISATION DE FOUUUUUU a mis genre 2 semaines, cool!

M'enfin bref, bien ma vie, v'la le tuto.

Tuto sur une nouvelle page
Spoiler:


Les ressources? ... 'm'parlez de quoi là? *grand sourire à la Phoenix Wright*
Pas taper c'bon, j'vais les retrouver + héberger u_u

Voilà : ici

Voilà voilà, j'espère que ce tuto vous aura plu, postez vos rendus ^^

Lirou21

Ton regard me rend fou - Ven 3 Juin 2011 - 13:22


Voici mon tout nouveau tuto, il vous apprendra à faire ceci :)

Tag signature sur Never Utopia - graphisme, codage et game design 762943lirouuu21

Voici pour commencer les ressources ^^

Perso:

Spoiler:


C4D 1 :

Spoiler:


C4D 2 :

Spoiler:


C4D 3:

Spoiler:


Brushes splatters : ici'

________________

Ceci étant fait, passons au tuto.
Ouvrez un nouveau document de taille 450*150. Collez le render de façon à obtenir ceci:

Tag signature sur Never Utopia - graphisme, codage et game design 955915tuto1v

Ensuite, collez une nouvelle fois votre render mais ce coup çi, de bonne taille, de façon à voir la fille quoi ^^
Gommez les cotés, le fond on en a pas besoin. Ensuite dupliquez ce calque et cachez le deuxième calque. Entre ces deux calques, vous allez coller le C4D 2 et le mettre en incrustation à 31% d'opacité. Le premier calque, c'est à dire celui en dessous du calque du C4D, vous allez le smudger à votre guise et le mettre en densité couleur - à 100% d'opacité.
Vous allez avoir quelque chose comme ça

Tag signature sur Never Utopia - graphisme, codage et game design 373199tuto2bw

Puis maintenant vous allez montrer votre deuxième calque caché.
Ceci étant fait, vous allez coller le C4D 1 deux fois. Tous les deux en incrustation à 60%, mais d'un endroit différent du C4D. Pour ma part, le calque du dessous sera plus dans les tons clairs, et celui du dessus dans les tons foncés en bas à droite du C4D.
Voici ce que vous devez obtenir.

Tag signature sur Never Utopia - graphisme, codage et game design 510873tuto3l

Vous aller faire un nouveau calque vide, et faire image-> Appliquer une image. Et vous aller faire dispersion (Filtre-> Déformation -> Dispersion). choisissez le psd que vous voulez. Vous allez voir votre image déformée, cachez donc ce calque.
Maintenant, vous allez faire des taches avec les brushs, sur les cotés du personnage.
Comme ceci:

Tag signature sur Never Utopia - graphisme, codage et game design 339439tuto5on

ça va vous suivez ? Aller courage c'est bientôt finii (pour moi aussi je veux dormir !!! T.T)
Maintenant, vous passez le calque caché au dessus de celui des brushs, faire clic droit dessus-> Créer un masque d’écrêtage. Les tache sont devenus colorés c'est magique !! ^^

Tag signature sur Never Utopia - graphisme, codage et game design 641242tuto6z

J'espère pour vous que vous avez un rendu du même type lol sinon ça risque d'être embêtant XDDD.
Ensuite, on colle le C4D 3 en incrustation à 100%, dans les tons clairs. Et on va dupliquer ce calque pour le mettre en superposition à 100%.
Gommez ce qui gène.
Nouveau Calque, remplissez le d'une couleur assez clair (pour ma part c'était 8589d6 le code ^^), ce calque en mode éclaircir à 20% d'opacité.
Vous devez obtenir quelque chose comme ça:

Tag signature sur Never Utopia - graphisme, codage et game design 878775tuto8q

Personnellement, j'ai rajouté avec une brush ronde, des petits endroits blancs, mais c'est pas obligatoires.
Et enfin, on fait les couleurs.
Calque-> Nouveau calque de réglage-> Courbes de transfert de dégradé.
La couleur que j'ai prise était le Bleu-Orange (dans cet ordre). Celui ci en lumière tamisée à 100%. Et le deuxième, c'est un Noir-Violet pareil en lumière tamisée mais ce coup ci à 30%.

Tag signature sur Never Utopia - graphisme, codage et game design 973370tuto10

Un cadre, une typo, et c'est terminé !!

Tag signature sur Never Utopia - graphisme, codage et game design 762943lirouuu21

Alors ? ça vous plait ?
J'espère bientôt voir vos rendus !! :)

Bisous !!!

Invité

Western Comics - Jeu 31 Mar 2011 - 14:42

{#}signature{/#} {#}texture{/#}

Yop!

Voici un tuto sur une sign aux effets assez sympas.
De plus ça vous apprendra à faire un effet comics!
Ok, le timing pour le poster est foireux m'enfin c'pas grave >_>

Voir sur une nouvelle page
Spoiler:


Voici les deux textures utilisées pendant le tuto, c'est exceptionnel que je vous file des ressources donc profitez mes amis Razz
Edit staff : les textures ne sont plus disponibles, sorry

Good luck & postez vos rendus!

Ryok'art

Flow to the beat - Jeu 10 Mar 2011 - 17:42


Bonjoir! Et bienvenue sur ce premier tutoriel photoshop pour moi. Tout est expliqué dedans celui ici. Ainsi, je ne tarde pas, le voici:

Ressources
Brushes:
Spoiler:


Render:
Spoiler:


Tag signature sur Never Utopia - graphisme, codage et game design 110310054120241657Tag signature sur Never Utopia - graphisme, codage et game design 110310055848206507

Et voilà, enjoy Wink. Laissez vos rendus =D.

Rendus des membres:

Gwellaouen
Tag signature sur Never Utopia - graphisme, codage et game design SignatureScott
J'aime bien ce rendu. Les couleurs sont bien harmonisées. D'autant plus que celui-ci nous provient de GIMP. Ainsi, c'est un travail appliqué que tu as réalisé Gwen'. Et le render Heise: Chapeau pour l'avoir aussi bien adapté au style vector. Toutefois, dans le coin de la typo, il y a de la pixélisation, légère, mais tout de même présente. D'autant plus que sur la typo elle-même... Sinon merci pour ce rendu qui reste bien et te connaissant, je sais que tu as pris plaisir à suivre ce tutoriel.

Na'Ya

Melancholy - Ven 25 Fév 2011 - 15:34


Melancholy
C'est encore moi. *.*

Tuto :
Spoiler:


Invité

Korn - Leave me alone - Lun 7 Fév 2011 - 14:47

{#}signature{/#} {#}brush{/#}

OUAICH GROS VAS-Y TAC TAC COMMENT TU VAS?
C'est GHdu29 A.KA.A GOULDAOUQUE A.KA.A GOLDHAWK A.KA.A Gégé qui te parle, mais tu le savais déjà Cool
(ouais style "My name is GOLD HAWK DEL RIOOOOO! But you, you already know that...")
Ouais bon, passons cette intro foireuse qui compte déjà plus de "ouais" qu'une seule de mes phrases et parlons de choses intéressantes. La culture des cucurbitacées au Mozambique, of course.

Voici donc un nouveau tuto sur ma sign "Korn", qui avait plu aux gens.
Elle nécessite pas mal d'autonomie et une bonne réserve de brushs, mais du moment que vous avez les deux ça devrait aller.

Accrochez-vous bien, le tuto est assez long.

Spoiler:


Je vous conseille d'écouter une musique relaxante durant ce tuto. "Right Now" de Korn par exemple. J'vous promet, c'est très relaxant... si vous aimez le métal Razz

Bonne chance à tous, postez vos rendus Razz

Na'Ya

Calmness - Lun 31 Jan 2011 - 15:36


Calmness
Les réglages donnent mieux sur une créa dans les mêmes tons que la mienne !

Tuto :
Spoiler:

Na'Ya

Music Sensation - Jeu 20 Jan 2011 - 12:35


Music Sensation


Tuto :
Spoiler:


Info :
Pour utiliser l'outil tampon, faites ALT+clic sur la zone à dupliquer puis cliquez ailleurs pour la dupliquer ! ( pour les trainés c'est pareil sauf qu'il faut resté appuyé )

J'explique parce que l'outil tampon a posé des problèmes à quelques personnes ayant testés le tuto. x)

Na'Ya

Fly in my dreams - Jeu 20 Jan 2011 - 12:33


Fly in my dreams

Outcome :
Tag signature sur Never Utopia - graphisme, codage et game design Fly_by_desproduction-d37fdvt

Ressource :
Je vous passe le pack parce que j'ai pas ma texture sous la main : ici !
J'ai utilisé celle avec marqué "ISO", la 6ème.

Tuto :
Spoiler:

Na'Ya

Mad... - Mer 19 Jan 2011 - 17:51


Mad

Bonus :
Je vous offre un pack de PSD pour le filtre "dispersion" que j'ai fais. /o/
Tout les PSDs utilisés dans ce tutoriel viennent de là ( mais je sais plus lesquels j'ai utilisé ).
-> Télécharger <-
Ils sont peut-être pas tous bons, j'ai eu la flemme de faire le tri.

Tuto :
Spoiler:


La suite de mes tuto... Demain. ._.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 11:41