#tuto rpg

[jawnressources]

— et oui ! Je l'ai enfin écrit ce tuto pour apprendre à coder des catégories différentes ! C'est PAR ICI ♥

[andthesunrisesagain]

Tuto : effet "poussière"

Version requise : Photoshop, pas besoin d'une version récente.

Durée de la video : 8.21min (effet poussière d'étoile + effet "grain texture/brûlé")

Infos : français et sous-titré. Ne pas hésiter à mettre en grand écran pour mieux voir, j'aurais dû zoomer dès le début.

Si vous avez des questions ou si ça manque de clarté, n'hésitez pas ! Ce tuto est sponsorisé par les "hop" et les "zoup" et les "euh".

Exemples de rendu (les effets de poussière d'étoile/ textures grains comme si brûlé) :

[soeurdelune]

Tutoriel : comment savoir si on a affaire à une image générée par IA...

... en utilisant principalement vos yeux et une connexion internet pour aider si besoin.

J'imagine que si vous lisez ce tutoriel, vous ne souhaitez pas soutenir tout ce qui est travail d'IA. Sans plus attendre, voici donc quelques astuces et méthodes (rangées par ordre de simplicité d'exécution) pour vous aider à reconnaître les images générées par ces merdes de robots intelligences artificielles.

J'ai également accompagné certaines des sections ci-dessous de petits tests/jeux à faire pour que vous puissiez vous évaluer, et voir si vous arrivez à déterminer quelle image est générée par IA et quelle image est réelle.

1. Reverse image search

Il existe des extensions internet à ajouter à votre navigateur pour rechercher la source ou l'origine d'une image. La source de l'image suffit souvent à renseigner s'il s'agit d'une image générée par IA ou non (en particulier si celle-ci est accompagnée d'un descriptif).

Ensuite, dites-vous que l'IA n'invente jamais, elle se contente de copier ou d'imiter. Même sans trouver la source, vous pouvez donc regarder les images suggérées/similaires proposées. Si vous voyez de nombreuses déclinaisons à peine différentes de votre image "originelle", vous pouvez être certain qu'elle provient d'une IA :

Si vous êtes sur Chrome ou Firefox comme moi, je recommande l'extension Search By Image (firefox, chrome).

2. Textures trop lisses ou manque de détails

Les textures des images générées par IA (qu'il s'agisse de paysages, de matériaux comme le bois ou la pierre, ou le grain de peau des personnages) présentent fréquemment un aspect lisse, sans grandes imperfections ou variations importantes dans le motif représenté.

L'IA est également paresseuse. Ses productions manquent donc de détails et de nuances, surtout pour les objets plus petits ou qui semblent passer inaperçus dans l'ensemble de l'image : on pense notamment aux feuilles d'arbre dans un paysage, aux formes de fleurs, ou encore les variétés de motifs sur un plumage ou des poils d'animaux (pensez au pelage moucheté des léopards, dans la nature, leurs taches ne sont jamais identiques ou bien organisées).

Si toute l'image présente une texture exagérément lisse, doublée d'un manque de détails alors que les matériaux et surfaces dépeintes sont variés, il y a alors de fortes chances qu'il s'agisse d'une image générée par IA.

Quelques exemples de ce côté lisse et du manque de détails : quelle image est réelle et laquelle est générée par une IA ?

Celle de gauche est générée par IA. Celle de droite est réelle (source). Regardez la différence de traitement des montagnes. À droite, on a une forte variété des plis dans la roche, des traînées de neige qui ne suivent aucun ordre ou rythme spécifique, une multitude d'ombres, crevasses et sillons dans le paysage. Il en est de même avec les lumières, celles de gauche étant considérablement plus grossières, comme des traînées de peintures mal estompées.

Un autre exemple pour vous tester !

Celle de gauche est réelle (source). Celle de droite est générée par IA. Les lignes et drapés du vêtement de gauche, sur l'image réelle, sont plus fluides, moins réguliers et raides que sur l'image de droite. Comparez surtout le buste sur les deux images : voyez-vous la manière dont les lignes de couture sont représentées ? Elles sont quasiment rectilignes à droite, et plus "tordues" sur la gauche (comme pour tout vêtement lorsque le corps est en mouvement...). Certains détails de drapé sont également incohérents sur l'image de droite, notamment les plis des manches au niveau des avant-bras, ou encore la manière dont le tissu tombe sur le jupon bleu clair.

Le dernier pour finir ! Facile en plus, celui-là :

Celle de gauche est générée par IA. Celle de droite est réelle (source). La différence de détail des feuilles est flagrante sur les deux images. De plus, l'architecture est cohérente sur celle de droite, beaucoup moins sur l'image de gauche (non mais vraiment, c'est quoi cette boîte aux lettres qui déborde presque de moitié sur la porte, dans le coin à gauche ?).

3. Anatomie éclatée au sol

Allez savoir pourquoi, l'IA a du mal avec l'anatomie humaine. En dehors d'erreurs de proportions aisément décelables (bouches ou yeux immenses, cou trop fin sous une tête énorme, etc.), c'est vrai que les mains, c'est super dur à dessiner, et surprise surprise, l'IA n'y arrive pas toujours non plus. Si vous avez un doute : comptez les doigts.

C'est important d'adopter le réflexe de regarder les mains, la manière dont elles s'articulent (en tant qu'être humain, votre œil ne vous décevra pas, vous savez instinctivement à quoi ressemble une main humaine, même si vous ne savez pas forcément en dessiner !). Si vous soupçonnez une image d'être générée par IA et que les mains ne sont pas visibles, ce n'est probablement pas un hasard...

On va jouer à un petit jeu, voici quelques images, certaines sont générées par IA, d'autres non, saurez-vous déterminer lesquelles sont réelles et lesquelles sont fausses en vous appuyant sur ce que je viens de dire, y compris dans la partie 2 ? (N'hésitez pas à cliquer sur chaque pour zoomer).

1 – générée par IA : Le mannequin possède six doigts à la main gauche, ce qui n'est pas impossible anatomiquement, mais ajoutez-y le grain de peau beaucoup trop lisse (on dirait un personnage de jeu vidéo) et l'armure complètement irrégulière dans ses détails, son relief et les jeux de lumière.

2 – générée par IA : Le pouce droit du mannequin semble pointer depuis l'intérieur de sa robe, ce qui n'est pas logique quand on compare avec le bras gauche. De surcroît, vous avez déjà vu des topiaires comme ça ? Même sur les topiaires les plus “propres”, on constate une variation de texture et de détail des feuilles plus importante. Ne parlons même pas des deux petites boules de topiaire en lévitation derrière la tête du modèle...

3 – image réelle (source) : Même sur une photo toute simple d'un jeune homme en jean probablement un peu retouchée, on constate une grande variété de détails, notamment pour le grain de peau, les grains de beauté, les cheveux et le jean. L'anatomie est cohérente, la main droite a ses cinq doigts, articulés comme il faut.

4 – générée par IA : Un zoom sur les mains suffit à vous renseigner.

5 – générée par IA : Encore un vêtement qui tombe bizarrement, l'impression que sa hanche gauche est complètement décalée par rapport à la droite, le bras est un peu tordu, la peau est étrange car l'IA semble avoir essayé d'ajouter du grain, mais s'y est pris à une échelle trop grande qui ne suffit pas à estomper l'impression que la peau du modèle est très lisse.

6 – image réelle (source) : Même s'il n'est pas impossible qu'il soit un peu retouché, ce portrait présente de nombreux petits détails que l'IA ne parviendrait pas forcément à répliquer : la variété de motif des taches de rousseur, le fin duvet du visage, les détails dans les cheveux et les sourcils, la texture des lèvres, les fils répartis de façon cohérente, les iris bleus qui ne sont pas identiques et eux-mêmes très détaillés.

4. Incohérences de traitement de la lumière ou des ombres

Si les figures humaines ne vous guident pas, faites attention au décor. L'IA fait ÉNORMÉMENT d'erreurs de continuité, c'est généralement flagrant dans la manière dont elle représente la lumière ou les ombres.

Voici un exemple généré par IA :

Déjà, même sans réussir à détecter les incohérences de lumière, cette image-ci donne une multitude de copycats quand on fait un reverse search. Sinon, regardez attentivement la forme de l'ombre de l'arbre sur le carrelage et les petites percées de lumière. Le problème, c'est que l'arbre qui est susceptible de projeter une telle ombre est beaucoup trop éloigné et orienté sur la droite dans le paysage pour qu'une telle forme fasse sens.

Autre exemple :

La projection de lumière sur le parquet dans le coin en bas à droite ne reflète absolument pas sa source : autrement dit la forme de la fenêtre. Encore une incohérence de l'IA.

Conclusion

Les conseils dispensés ici fonctionnent aussi avec les illustrations générées par IA. Même si certains styles divergent de la réalité et ont une approche plus abstraite ou surréaliste, vous pouvez quand même rester à l'affût des incohérences comme les jeux d'ombres et de lumière illogiques, les textures trop lisses, le manque de détail, et utiliser le reverse image search pour voir s'il existe d'autres illustrations trop similaires pour être une simple coïncidence.

J'espère que ce tutoriel vous servira ! Force, soutenez vos artistes locaux quand vous le pouvez, et continuez de combattre les robots ! 💪✨

[ariesfelis]

TUTO ACTIONS PHOTOSHOP (version avatars rpg)

J'ai réalisé une (longue oops) vidéo tuto pour expliquer comment exploiter la fenêtre "actions" sur Photochop CC et pouvoir aller plus vite dans la création de vos avatars. Les actions ça sert à ce qu'en un seul clique et bouton, vous pouvez redimensionner, recadrer, copier coller votre coloring ou tout ce que vous voulez. Disclaimer, c'est un peu long je mets le petit sommaire en dessous, je bafouille beaucoup et mon micro n'est pas du tout de qualité, désolée d'avance ! J'espère que c'est compréhensible et que ça pouvoir aider quelques personnes !

Pensez bien à mettre en 720p !

de 0 à 2,18 minutes : introduction, je montre ce qui est possible de faire rapidement.

de 2,18 à 7,20 minutes : tuto basique pour recadrer et redimensionner en un clic.

de 7,20 à 9,50 minutes : tuto action pour ouvrir tous ses fichiers en un clic.

de 9,50 à 11,50 minutes : tuto pour recadrer, redimensionner et rajouter son coloring en un clic.

de 11,50 à 12,50 minutes : tuto pour enregistrer en .atn et ne pas perdre ses paramètres. C'est fini !

[mathoumatoufait]

Test tuto de @andthesunrisesagain (begona vargas - fai khadra - simone ashley)

merci beaucoup pour ton partage et tes explications qui guident à la perfection. 🫶🏻

[strange-hell]

Okay, I'm just going to come out and say it could you possibly guide me to tutorials or textures for this rpg avatar style of editing? Still or GIF, any knowledge you're able to pass on would be greatly appreciated! I've used Photoshop in the past but definitely need to refresh my memory. If youre able to help, Thank you! If not, your work is still fire!!!

thank you for your words, glad you like my work. i really appreciate that you could like my edits to the point of asking me for some tutorials. actually it's so hard to tell because i don't know how to explain by writing lmao. my psd is an incredibible mess i swear, that's my secret to make it i guess haha. i pick my inspiration on pinterest for the textures, those are not mine. i only own my coloring (contrast, light, color balance, saturation, noise, etc...) the rest you can find on google, tumblr, pinterest.

for the GIF part, it's skills that you can improve with tutos on youtube or tumblr. personnaly, i only improve myself on photoshop by testing all the patterns, i just try and watch the result until i get satisfied. depends on the version you have, you have to get on the "montage" part on photoshop.

i let you a tuto to make a gif, it's in french i'm sorry but you can translate or find it in another langage version ; https://helpx.adobe.com/fr/photoshop/how-to/animated-gif-photoshop.html

try until you're satisfied, work on your skills by discovering photoshop and on the vibes you want create. you can make it ! :)

[decrescxndo]

J'ADORE cette question !!

J'ai commencé à lire les réponses, j'adore savoir comment tout le monde a commencé, je trouve ça hyper intéressant. Shout out à celleux qui citent des forums, ça serait trop marrant de se rendre compte qu'on a été sur les même au début ! Du coup je vais essayer d'en citer aussi.

Du coup perso ça va presque faire 19 ans que je rp - en mai ça fera 19 ans (j'ai 30 ans, donc oui j'ai commencé à 11 ans ce qui est BCP trop jeune).

J'ai toujours adoré écrire, en fait. J'imaginais des histoires pour les jeux que je faisais avec mes petites soeurs, je lisais ENORMEMENT et j'écrivais déjà des petites histoires dans des carnets (je me souviens notamment d'une bande dessinée que j'essayais de faire juste avant de trouver mon premier forum, avec des fées parce que j'étais fan de witch mdr).

(je vais mettre en hide, ça va être long mdr)

D'ailleurs c'est witch qui m'a faite démarrer le rpg. J'étais hyper fan et abonnée aux magazines, et je voulais savoir la suite. Attendre 1 mois (il me semble que c'était un mensuel) c'était bcp trop me demander mdr. Alors je cherchais des suites sur internet. Sur leur site officiel, ils sortaient quelques planches en avant-première, et ils avaient aussi un forum. Je me suis inscrite je ne sais plus trop pourquoi (pour lire des fanfic je crois), et je me souviens encore avoir demandé à ma mère (qui fait du mmorpg en ligne) ce qu'était un avatar mdr.

J'ai commencé sur alloforum, une plateforme que personne ne connait aujourd'hui ! (vous êtes où les anciens de alloforum??) et au début les avatars n'avaient pas de taille, on trouvait des images sur google images et on les foutait quoi. C'était souvent des illu, mais en vrai c'était un peu mélangé aussi.

Puis je suis passée sur des forums dollz et là vraiment, j'étais BCP trop jeune parce que c'était hyper sexualisé. Je me souviens que ça me mettait mal à l'aise, parce qu'en gros t'arrivais sur un forum et les gens cherchaient d'office à se taper ta dollz. Je suis partie pour les forums charmed/harry potter/eragon après (je suis tombée hard dans le rpg je faisais que ça mdr). Les rp étaient effectivement hyper courts, mais je vous parle d'une époque qui remonte à presque 20 ans mdr. On faisait plein de fautes, on écrivait en langage sms, on en avait rien à foutre quoi.

Les 2 noms de forums dont je me souviens de cette époque : Poudlard Magical, Le monde de l'Alagaësia. Les autres, je les ai oubliés.

Assez rapidement (même pas 1 an après je pense), les gens ont commencé à migrer soit vers aceboard, soit vers forumactif. Y'avait xooit aussi mais j'ai pas trop connu. J'étais vraiment une hard team alloforum parce que je connaissais mieux et j'avais pas envie de changer mes habitudes mdr.

Je suis finalement passée sur FA par la force des choses. J'ai commencé là avec des forums lycée/université (j'en ai ouvert quelques uns aussi, dont certaines qui marchaient plutôt bien) et je me souviens qu'un forum... A Berkley je crois avait (selon moi et ma perception des choses) plus ou moins instauré ce truc de "maintenant faut écrire des posts un peu long sinon c'est pas de la qualité". Y'avait même une sorte de tuto sur comment rendre ton rp plus long, avec des conseils du style "décrivez le lieu, ce que votre personnage porte, ce qu'il ressent" (en soit c'était bien foutu ce tuto, il m'avait aidée à l'époque mdr). J'ai jamais été sur ce forum, hein, mais tout le monde connaissait.

Puis j'ai eu une longue pause de 2 ans parce que j'étais partie vivre chez mon père, et j'avais plus droit à l'ordi en "illimité". Pas de chance pour moi, c'était pile pendant que les forums évoluaient de leurs débuts faits de bouts de rien à des choses très évoluées. Je suis revenue sur les rpg avec un forum "Prelude to dawn" qui était un forum vampire/loup-garous où tu n'étais pas du tout sûre que tu serais acceptée ! (je connais une des admins avec qui on en a déjà parlé des années après mdr). J'avais galéré avec ma fiche, mais j'avais pris un perso qui était assez attendu il me semble (à l'époque sur certains forums on n'avaient pas le droit d'inventer des perso - je ne me souviens plus si celui-ci était comme ça ou pas - et le process de validation était "ultra select", on ne gardait que les meilleures fiches, il fallait tout donner, y'avait grave ce truc d'élitisme), j'ai du modifier ma fiche 2 fois je pense pour être validée sauf que derrière j'ai galéré à m'intégrer parce que le groupe était ensemble depuis longtemps, tout le monde semblait se connaître irl, et j'ai finalement quasi jamais rp mdr (tout ça pour ça).

J'avais fait un autre forum comme ça aussi, pour le coup c'était que des pv, tu devais demander que le staff créé le pv si t'avais une idée que tu voulais faire qui n'était pas déjà dispo dans les pv, et là pareil après avoir fait ma fiche j'ai même pas rp.

J'adorais les forums fantastiques, mais ils étaient bcp trop exigeants donc j'ai été sur... Filthy secret ! Que vous connaissez tous, je suis sûre. C'était sa version 2 (il a eu 3 versions je crois ce forum). J'avais un perso avec Nikki Reed, mais pareil je n'arrivais pas à m'intégrer donc je ne suis pas restée.

Après ça, je suis passée sur des forums télé-réalité : Fake lover dans un premier temps, Thrown Dice dans un second temps. Mon premier personnage était trop nul mdrrr son secret c'était "je suis medium", mais il avait été assez loin quand même (parce que je rpais bcp, c'était un peu le principe de ces forums, si tu rpais bcp en général tu avais quand même moins de chance de te faire éliminer, surtout au début). Je suis restée longtemps dans ce microcosme. Je ne me souviens pas de tous mes perso, mais y'avait donc : Nolan, Finnick, Keane,... Et je me rappelle plus des autres mdr.

Après ça, a commencé mon strike de 10 ans d'administration. Pendant 10 ans, je n'ai fait que ça, sans plus jamais être membre. J'ai administré plusieurs forums (je vais pas me souvenir de tous mdr) : watch them die, catching fire, tears of the phoenix, path beyond the blood, earth, wind and fire, what's a god to a non-believer, pinned under the weight, deus ex machina, gods will fall, killer queen. Avec, entre deux de ces forums, 1 an et demi de rp tumblr en anglais sans plus aucun contact avec du rp forumactif.

Je vais pas revenir sur ces expériences d'administration parce que pas la peine, j'ai ma dose de trauma liés à ça. J'étais quelqu'un d'extraverti qui faisait confiance (trop) aux gens, aujourd'hui je suis plus méfiante qu'un animal qui a une patte dans un piège. Donc oui, des drama, y'en avait à la pelle (je sais pas si y'en a plus qu'ajourd'hui ou pas, parce que ajd justement je me barre dès que ça sent le drama mdr ou j'évite soigneusement les gens avec qui ça pourrait faire du drama).

J'ai rouvert quelques forums depuis, mais je préfère être membre aujourd'hui. J'ai 30 ans, presque 20 ans de rpg à mon actif, je suis fatiguée mais j'aime toujours autant ça, j'aime tjrs autant écrire, découvrir les personnages des autres, parler de nos perso avec mes potes, qui sont des personnes incroyables, j'ai vraiment trouvé des amis dans ce wild world qu'est internet.

Et puis enfin et surtout, je vais me pacser dans 1 mois et demi avec ma copine, que j'ai rencontré sur les forums et avec qui je suis depuis presque 6 ans hehe.

(Je pense aussi que je fais mon métier grâce à cette passion de l'écriture et à l'entrainement intensif que j'ai eu avec les rpg - je suis consultante édito dans une agence de com, voilà)

hey, je suis curieuse, comment vous avez commencé le rpg, vos tout débuts ?

parce que perso, j'ai pris des grooos détours avant d'atterrir dans la sphère rpg de forumactif (sous hide parce que c'est long).

Est-ce que quelqu'un a déjà entendu parler d'Edenya ? Je crois que ça existe toujours, c'était du high fantasy rpg illustré mais la plateforme était complètement unique, et la façon de rp était incroyablement différente. Mon perso a chopé la PESTE ... deux fois ... J'avais 13 ans et j'y suis resté trois, quatre ans, et pourtant je me souviens même pas du nom de mon perso.

J'ai appris là-bas ce qu'était le ttrpg, mais étrangement très peu d'entre eux faisait du forum rpg, à part une, et c'est elle qui m'a emmenée sur ma deuxième aventure cheloue.

Techniquement, c'était sur forumactif. Techniquement, c'était ma première réelle expérience de forum rpg comme on le connaît. En réalité ? Rien à voir.

Pour commencer, j'étais la seule joueuse pour les trois premier mois avec elle en seule admin. Cette fois je me souviens un poil plus de mon perso, Alix, mécanicienne des vaisseaux spatiaux, tester la syfy oui oui. "C'est dans l'espace" c'est aussi tout le contexte que j'ai eu avant la question "Qui est ton perso ?" donc on testait mon improv du haut de mes 16 ans clairement.

Malgré la confusion constante dans laquelle j'étais, c'était une expérience cool parce que en gros, le principe était que mon admin postait un contexte (ex: Alix reçoit une lettre de convocation à tel poste), je postais en tant qu'Alix, et l'admin continuait en tant que GM de l'univers avec ce plot créé autour de mon perso qui s'adapte constamment à mes choix. En soi, c'était bien plus proche de jeux de rôle type DND. Finalement, d'autres joueurs nous ont rejoint et je suis partie discrètement après quelques mois.

A partir de là, j'ai découvert les vrais forums rpg, mais les illustrés en premier. ET G PRIS PEUR OK.

Tout le monde parle des vieux forums où on écrivait que deux ou trois lignes, j'ai jamais connu ça ! Jusqu'à maintenant, les rps que j'avais fait étaient de la même taille qu'on fait aujourd'hui. Mais quand j'ai exploré de loin, j'ai toujours trouvé que des forums où les gens écrivaient des ROMANS, et j'exagère pas, les rps étaient 3 pages word minimum à chaque fois. C'est la raison pourquoi j'ai mis tant de temps à rejoindre les forums, je croyais que tout le monde écrivait comme ça et que je n'avais pas le niveau.

Finalement, j'ai trouvé Bazzart, et après some lurking j'ai rejoint un des fo les plus populaires à l'époque en test, croyant sincèrement que j'allais paniquer et partir et que c'était mieux de se noyer dans la foule si ça arrivait. Heureusement, le forum a crashé avant moi, peut-être deux semaines après ma validation. Mon perso était si mauvais mais j'avais good taste parce que c'était avec le fc d'Alexis Bledel ok, et elle avait des yeux de deux différentes couleurs parce qu'elle était possédée par un esprit et omg le cringe.

Le prochain forum que j'ai choisi était aussi très populaire, mais celui-là était debout depuis quelques mois, et cette fois j'ai pris un scénario pour être sûre de m'intégrer et boom je suis restée trois ans et des poussières sur ce fo, même finie par être admin dessus. (ps edit: aussi le seul perso que j'ai tué en partant, et je regrette rien fyi, mais c'est une histoire pour plus tard)

Après ça, c'était smooth sailing from there.

Merci aux pauvres âmes qui ont lu jusqu'au bout.

Sincèrement, j'adore lire les histoires des gens et ça aurait pas été juste si j'avais pas donné ma version avant mais pls parlez moi vos débuts !

[itsamooncalf]

Les bonnes pratiques de code : conseils et Q&A [live : 30 juin à 20h00]

Hello ! J’espère que vous allez bien?

Je reviens vers vous cette fois-ci avec un nouveau cours / tutoriel en live twitch qui se portera sur les bonnes pratiques de code CSS/HTML dans le cadre de la création d’un forum sur forumactif. De mon expérience en tant que UI/UX designer et front-end developer, j’essayerais de vous donner les meilleures conseils sur comment écrire son code pour qu’il soit optimal et que le rendu soit user friendly ! 

Etant une introduction, le “cours” sera plutôt simple. Le sujet est quand même très très large donc je ne verrais pas tout en détails mais je dirais les grandes lignes de ce que je juge important à mettre en place. Voici le programme des différents points que j’aborderais :

UI/UX : Les principes fondamentaux du user friendly

CSS/HTML : Classes parents et classes enfants, kesako?

CSS/HTML : Comment bien nommer ses classes  (les conventions)?

CSS/HTML : Flexbox, ton meilleur ami

CSS/HTML : Position absolute et relative, comment l’utiliser?

Random tips and tricks

Par la suite, il y aura également une séance de Q&A pour que vous puissiez poser vos questions que cela concerne le CSS, l’HTML (ou même peut-être Javascript bien que cela ne soit pas mon fort!) et/ou UI/UX en général, pour des cas spécifiques ou points bloquants relatifs à votre code actuel. Je ne promets pas d’avoir réponse à toutes les questions mais je ferais mon maximum! Par ailleurs si il y a des fellow devs par ici, n’hésitez pas à prêter mains fortes durant ce Q&A, ça pourrait être une chouette séance de partage 🤩

Rendez-vous le vendredi 30 juin à 20h00 sur Twitch ! 

[noxeternam]

TUTO : Installer le widget d'accessibilité UserWay

L'accessibilité, c'est quoi ?

L’accessibilité web désigne l’ensemble des techniques et bonnes pratiques ayant pour objectif de rendre un site internet accessible à tous – et en particulier aux personnes "handicapées", au sens large du terme : personnes âgées, handicapés physiques ou mentaux, personnes malentendantes, malvoyantes…

UserWay, le widget d'accessibilité

Les widgets d'accessibilité agissent en "superposition". Dès que vous cliquez sur l'icône d'accessibilité, une fenêtre de contrôle s'ouvre dans laquelle vous pouvez ensuite adapter la présentation et le fonctionnement du site à vos besoins.

Voici ce que UserWay propose comme ajustements :

ajuster le contraste (couleurs inversées, sombre, clair, noir et blanc)

taille du texte

liens surlignés

espacement du texte

arrêter les animations

adapter la police pour les dyslexiques

agrandir le curseur

afficher les info-bulles

ajuster l'interlignage (hauteur entre les lignes)

Installer UserWay sur un forum

Étape 1 ― Remplir le formulaire à cette adresse : https://userway.org/get

Étape 2 ― Vous allez recevoir un script (dans une balise <script>).

Étape 3 ― Copier/coller ce script dans le template overall_header, juste avant la balise fermante </head>. N'oubliez pas de valider votre template!

Étape 4 ― Et voilà ! Normalement, votre icon de widget devrait apparaître sur votre forum.

Étape 5 (facultative) ― Vous pouvez personnaliser l'apparence de l'icon. Pour cela, cliquez dessus et un menu apparaîtra. Cliquez sur "Configuration" pour afficher toutes les options de personnalisation (type, couleur, taille, endroit d'affichage...)

Et voilà, vous savez comment installer le widget d'UserWay ! Beaucoup me l'ont demandé donc je me suis dit que ça nécessitait un petit tuto.

Si vous avez des questions ou des soucis, n'hésitez pas à les poser dans les commentaires de ce post 🥰

[velunes]

Tutoriel : Profil en onglets + Isoler les champs du profil

Suite à un post de @Geniuspanda (celui-ci) cherchant comment isoler les champs du profil dans un profil en onglets, j'ai écrit une petite explication de tutoriels trouvés. Les codes ne m'appartiennent pas, c'est pour aider à mieux les comprendre avec images à l'appui. Parfois, tout tiens à une autre façon d'expliquer les choses. Merci aux créateurs/trices.

TUTORIEL, CLIQUE ICI

En espérant que ça vous aide à coder des profils du tonnerre ! xxx, Velunes.

[jawnressources]

Appliquer le dark mode à une bannière

Il est d'utilité commune désormais d'utiliser un dark mode sur nos forums afin de rendre l'accessibilité la plus complète possible au maximum d'utilisateurices. Cependant un souci se pose souvent; c'est celui de la bannière. Une fois installé dans le panneau d'administration, il est difficile de savoir comment faire en sorte qu'elle change lorsqu'on clique sur le bouton de dark mode. Les couleurs; c'est souvent très bien expliqué mais la bannière, je n'ai personnellement pas trouvé de tuto' explicatif de comment faire. C'est pour ça que nous sommes là aujourd'hui ! Avec quelques petites modifications de template et de rajout de CSS, nous allons apprendre à mettre en place une bannière en deux "couches" afin qu'elle change au click du dark mode.

Il va falloir tout d'abord comprendre comment nous allons procéder. Nous allons tout simplement supprimer la balise dans notre template principal qui correspond à la bannière et en "recréer" une toute nouvelle. Ça semble compliqué de premier abord, mais pas du tout !

Dans votre template "overall_header" (Panneau d'administration > Affichage > Template > Général), vous avez cette ligne là :

<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>

Cette ligne correspond à la bannière que vous allez entrer dans votre panneau d'administration au niveau des images, et qui est cliquable en renvoyant à l'accueil. Donc si on la supprime, allez-vous me dire, comment avoir une bannière qui s'affiche correctement et qui est ensuite cliquable ? Et bien, on va tout simplement simuler cet effet avec deux couches; un peu comme les calques sur Photoshop. Le premier calque correspondra à notre bannière qui va changer au dark mode et la seconde couche sera une bannière "invisible" à la même taille que l'on va poser par dessus, et qui sera elle, cliquable. C'est donc en décortiquant cet effet pour le reproduire en deux étapes simples que l'on va pouvoir avoir une bannière qui change avec le dark mode.

Alors avant de continuer, il faut que vous ayez d'ores et déjà installé un dark mode (celui de @code-lab, EDISON, est très bien, très bien expliqué et très pratique !) afin d'avoir dans notre CSS le root correspondant au mode de base de notre forum et le "data:root", correspondant aux valeurs du dark mode.

Commençons donc par installer les deux couches de bannière. À la place de votre valeur supprimée qui correspond à la bannière de base de Forumactif, vous allez rajouter ceci à la place :

<div class="dark_bann"></div>                                    <div class="dark_bann_sup"><a href="/"><img src="https://2img.net/i.ibb.co/BTqHhnX/prdbirthday3.png"/></a></div>

Ici, vous pouvez voir que la première div est vide et que la seconde contient une bannière invisible. Votre affichage de forum après avoir enregistré le template sera tout vide en haut de la page d'accueil et c'est parfaitement normal ! On ne panique pas, et on va installer le CSS pour rendre tout ça un peu plus joli.

La première étape est d'aller créer une nouvelle valeur dans le root correspondant à l'image de la bannière de base que vous voulez afficher; comme celle que vous aviez installé dans votre panneau d'admin. Exemple :

:root {   --imgbann:url(VOTREURLD'IMAGEICI); }

Une fois ceci fait, vous allez copier coller cette même valeur dans le dark:root (qui correspond à ce que le dark mode va aller remplacer), mais en changeant l'URL par la bannière en dark mode. Exemple :

[data-color-scheme="dark"]:root {   --imgbann:url(VOTREURLDELABANNDARK); }

D'accord, c'est bien mignon mais rien ne change quand on clique sur le dark mode, oskour ! Pas de panique, c'est parfaitement normal. On vient simplement de configurer le changement d'image au click du bouton de dark mode. Maintenant, il va falloir appliquer cette même image par le CSS dans la bannière dont la div était vide. Et oui, elle servait à ça ! Retournez donc dans votre CSS, et rajouter ceci :

.dark_bann {   width: 800px;   height: 500px;   overflow: hidden;   background-image: var(--imgbann);   background-size: 100%;   background-position: 50% 50%; }

Ici, nous avons donné une largeur de 800px à notre bannière, une hauteur de 500; on a imprimé en image de fond notre bannière de base; on lui a appliqué une taille de 100% pour que ça prenne bien toute la place disponible et on l'a centré totalement. Et là, magie, notre bannière s'affiche bien et change au click du dark mode !

Cependant il reste un souci, notre bannière invisible cliquable apparaît en-dessous de notre "vraie" bannière qui elle n'est pas cliquable. Nous allons donc ajouter à notre CSS :

.dark_bann_sup {   overflow: hidden;   width: 1005px;   height: 500px;   margin-top: -500px; } .dark_bann_sup img {   width:100%; }

Ici, on a donné la même taille à la bannière invisible (vous pouvez essayer de lui mettre un background d'une couleur bien voyante comme le rouge pour bien la voir) et on l'a "remonté" pour qu'elle se superpose à notre vraie bannière. Et là, tout est parfait ! On peut bien la cliquer comme une bannière "normale", et la couche inférieure est notre bannière qui change au dark mode.

Voilà voilà, j'espère que ce tuto pourra aider qui que ça intéressera et que ça ne sera pas trop difficile à utiliser !

[andthesunrisesagain]

Tuto : créer des lignes fluides

Version requise : Photoshop, pas besoin d'une version récente.

Durée de la video : 9.44min avec 3 techniques expliquées (vous avez les time-code dans les explications ci-dessous)

Infos : français et sous-titrée + tutoriel détaillé écrit ci-dessous. J'espère que la qualité ira, elle a été réduite quand j'ai fait le sous titrage :(

Si vous avez des questions ou si ça manque de clarté, n'hésitez pas !

Exemples de rendu (toutes les lignes) :

Aujourd’hui, je vous présente 3 techniques que j’utilise pour créer des lignes fluides, comme dessinées à la main, sur mes avatars. L’objectif est de vous montrer les différents outils utilisés - il y en a surement bien d’autres mais déjà, en voici 3 - pour que vous puissiez vous les approprier et les utiliser pour vos propres styles et graphisme !

(0 à 0.50s : introduction + je vous montre des avatars sur lesquels j'ai utilisés ces effets)

(0.50) Technique 1 : le pinceau

Avec l'outil pinceau, vous pouvez dessiner les effets et tracés que vous souhaitez ! Mais souvent, les tracés peuvent être un peu trop abrupts ou présentés des angles/cassures non voulues. 

Pour les éviter, ça se joue dans les réglages :

(1.18) Créer un calque vide pour pouvoir dessiner dessus et éviter de le faire directement sur une photo/image. Ainsi, vous pourrez plus facilement supprimer l’effet si à la fin vous n’aimez pas.

(1.40) Dans le panneau ds outils, choisir l’outil pinceau et dans les caractéristiques du pinceau, opter pour “pinceau arrondi net” 1 ou 2px d’épaisseur (pour qu’il soit assez fin), 100% dureté (pour qu’il ne soit pas flou). Dans le “flux”, choisissez 100% (ou un peu moins, le flux correspond à la pression de votre pinceau).  Dans le “lissage”, opter pour 80 à 100%. C’est le lissage qui va lisser (lol) votre courbe et la rende plus fluide. Si le lissage est à 0%, vous aurez des cassures dans votre courbe (voir à 3min le rendu)

(3.25) Dessiner la ligne voulue. Je vous montre plusieurs idées d'usages.

(4.40) Pour la couleur de votre ligne, vous pouvez soit la choisir dès le début soit ensuite lui appliquer un style à votre calque “incrustation de couleur” (l'icône fx dans le panneau “calques”)

Rendus exemple : la ligne fluide autour du texte ; la ligne qui contourne ; la vague ; les lignes qui entourent la photo centrale de Rachel. Mais vous pouvez aussi créer une silhouette de personnage, faire des effets “doodle” en changeant l’épaisseur du trait, entourer des mots...

(4.50) Technique 2 : le filtre “onde”

Effet plus hasardeux mais qui peut créer des rendus très cools et intéressants comme je vous montre sur l’avatar de Sydney Sweeney

(5.10) Créer une ligne avec l’outil “trait” + ou - grande - (à vous de faire vos tests) en 1 ou 2 px. Le rendu ne sera jamais pareil en fonction de la longueur, angle, l'épaisseur....

(5.24) Aller dans Filtre > Distorsion > Onde. Une fenêtre s’ouvre, choisir “convertir en objet dynamique”. Cela vous permet de revenir sur votre effet onde tant que vous le voulez alors que si vous choisissez "pixeliser", vous serez bloqué·e.

(5.32) Une fenêtre “effet onde” s’ouvre. On ne voit pas la ligne sur la prévisualisation de droite car on est sur un calque vierge (même si on peut changer ça en ajoutant avant un calque fond noir en dessus du calque ligne, puis en créant un objet dynamique en sélectionnant les 2 calques fond + ligne. Mais parfois, le hasard, c’est cool aha et j'avais du ma à expliquer à l'oral).

(5.50) S’amuser avec les différents réglages, en changeant les chiffres et appuyer sur “ok” pour voir le rendu ! Comme vous avez créé un calque dynamique, vous pouvez revenir sur votre effet en cliquant sur “Onde” où y'a un petit oeil à côté, apparu dans votre calque ;) 

(6.05 à 7.00) Vous pouvez mettre les mêmes chiffres que la vidéo pour débuter (générateur : 1 ; Longueur d'onde Min 47, max 60 ; Amplitude Min 51, Max 52 : Echelle 100% les deux) et ensuite, jouer sur chacun des réglages pour voir les rendus. C’est assez hasardeux mais j’aime beaucoup ce que ça créé : des épaisseurs différentes, + ou - de courbes... Parfois ça rend rien aussi !

Rendus exemple : les lignes sur les côtés du texte ; la ligne en diagonale de cette texture

(7.11) Technique 3 : la plume

Outil que j’utilise le moins sur Photoshop mais qui a le mérite de donner plus de contrôle au tracé, si on n’est pas à l’aise avec le pinceau et le dessiné à la main de la technique 1 !

(7.30) Définir le style de votre pinceau (nous on l’a déjà fait en amont mais il faut choisir son épaisseur, son style, sa dureté...)

(7.30) Créer un calque vide pour pouvoir créer votre tracé à la plume dessus.

(7.40) Choisir l’outil plume présent dans votre barre d’outils à gauche.

(7.45) La plume va créer différents points : en appuyant une fois, vous créer un point. Puis en mettant un autre point et en tenant appuyé votre curseur, vos pouvez créer des courbes grâces aux poignets. Créer le tracé que vous souhaitez. 

(8.30) Quand votre tracé est fait, clic droit dessus > Contour du tracé. Une fenêtre s’ouvre, choisir  “outil = pinceau” > Ok.

(8.50) Effacer le tracé plume en appuyant sur supp du clavier ou autre. Tadam votre tracé est bien là !

Rendus exemple : la ligne diagonal

Super outil sur la plume par Geoffrey creative lab sur youtube (sous-titré fr)

[ablackroseablaze]

—Tuto Kay #01: Fonts Externas!

Traigo un tutorial sobre fuentes externas. ¿Te interesa saber cómo? :3 Tutorial~

[euyevair]

Sometimes an illustration must be splitted to stick to the text. Yet as you can't really see what's drawn in the middle when the book gets printed and folded, I often take avantage of that "blind zone"😏 #dailydrawing #drawing #dessin #pencil #crayon #layout #background #landscape #sea #gaming #gamingart #artoftheday #ulule #crowdfunding #occuriatrigger #rpg #jrpg #japanexpo2018 #illustration #tuto #stepbystep #japanexpo (à Kyoto, Japan)

[necromancercoding]

¡Hola, Necro! Ya sé que estarás muy ocupado, pero, ¿podrías plantearte hacer un tuto para crear los perfiles /uX? Te lo agradecería un montón. Ya tengo el diseño hecho en codepen pero no tengo claro qué clases de css del foro y variables de los templates tendría que tocar. Sea como sea, gracias por tu tiempo.

¡Hola anon! A ver, el perfil sencillo no tiene muchas variables que usemos de normal, por lo que su edit es relativamente más sencillo de lo que parece. (Explicación bajo cut)

Como aclaración, antes de empezar, cuando hablo de bloques, hablo de estas cosas:

<!-- BEGIN nombre_de_bloque --> <!-- END nombre_de_bloque -->

Como segunda aclaración: El bloque profile_field genera todos los campos de perfil, cada uno con su HTML dentro de dicho bloque. No funciona como en jcink que puedes poner cada profile field con su ID.

{AVATAR_IMG}: El avatar.

{POSTER_RANK}: Rango (imagen, si tiene, + texto).

{USER_ONLINE}: Estatus (produce el texto 'Fuera de línea' o 'En línea'). Debe estar envuelto en el bloque switch_show_status.

{ADMINISTRATE_USER}: Link que lleva al editar perfil de usuario en el PA. Debe estar envuelto en el bloque switch_auth_user.

{BAN_USER}: Link que lleva al panel de banear usuario en el PA. Debe estar envuelto en el bloque switch_auth_user.

{switch_awards.L_AWARDS}: Título de los awards. Debe estar envuelto en el bloque switch_awards.

{switch_awards.AWARDS_LIST}: Lista de los awards. Debe estar envuelto en el bloque switch_awards.

{profile_field.LABEL}: Título de campo de perfil. Debe estar envuelto en el bloque profile_field.

{profile_field.CONTENT}: Contenido de campo de perfil. Debe estar envuelto en el bloque profile_field.

{PUSERNAME}: Genera el uX del usuario. Si es el user 1, generaría el texto 'u1', sin comillas. Se usa para los links de mensajes y posts (/sta/ para todos los temas donde haya participado, /st/ para temas creados por el usuario, /spa/ para mensajes. Ejemplo: /sta/{PUSERNAME}).

{USERNAME}: Genera el nombre del usuario con su color de grupo.

{contact_field.LABEL}: Título de campo de contacto. Debe estar envuelto en el bloque contact_field .

{contact_field.CONTENT}: Contenido de contacto. Debe estar envuelto en el bloque contact_field.

Los RPG funcionan de manera concreta y es que tienen 2 bloques: el que lo envuelve todo (switch_rpg) y el que envuelve cada tipo de field. Por defecto, los fields rpg responden al bloque rpg_fields, sólo responderán a rpg_fields_left si le cambias la posición en Estilos de campos en la sección Módulos > Juegos de papel.

{switch_rpg.rpg_fields.F_NAME}: Título de campo de RPG. Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields.

{switch_rpg.rpg_fields.F_VALUE_NEW}: Contenido de campo de RPG. Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields.

{switch_rpg.rpg_fields_left.F_NAME}: Título de campo de RPG (a la izquierda). Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields_left .

{switch_rpg.rpg_fields_left.F_VALUE_NEW}: Contenido de campo de RPG (a la izquierda). Genera un span.gen con el nombre. Debe estar envuelto en el bloque switch_rpg y rpg_fields_left.

¡Espero que te sirva como guía! Un abrazo.

[zuzcreation]

Reprise de l’activité

Après un mois d’arrêt pour me ressourcer et prendre du recul, le tumblr va reprendre de l’activité. Mais un peu différemment que uniquement partager mes avatars/icons et mes quelques headers. J’ai envie de faire des choses différentes et j’ai surtout envie de me réapproprier MON tumblr. Que ce soit ma zone, mon espace et que ceux qui ne l’aiment pas clique sur désabonner et me bloque. On ne peut pas plaire à tout le monde donc, j’ai décidé que je ferais d’abord mon tumblr pour moi et si certains l’apprécient et bien ils me suivent, les autres passent leur chemin. 

Concrètement comment les choses vont s’organiser ? 

- Je continuerais de partager mes ressources (qui sont majoritairement historiques/fantasy), mais j’aimerais faire un peu plus de création “moderne” pour me diversifier et faire plus de choses expérimentales. Pour le moment les asks sont fermés (et désactivés pour tous) donc à la rigueur si vous avez des suggestions (hors poc) n’hésitez pas en commentaire de ce post. Pourquoi pas de poc ? Je ne me sens pas encore prête à regrapher sur eux, je veux prendre davantage de temps pour éduquer mon oeil et apprendre à faire les bons réglages. Tant que je serais pas à l’aise et que j’aurais cette “peur” au fond de moi qu’on me tombe dessus, je ne publierais aucun poc sur mon tumblr. Ca reviendra mais quand je me sentirais prête ! Ce n’est pas le cas pour le moment !

- Je rebloguerais davantage de tuto que je vois passer, des ressources pour le graphisme/le rpg. Plus de pub pour mes forums et mes projets (parce que oui, c’est mon tumblr, je fais la pub pour ce que je veux !) ! 

- Je ne sais pas encore à quelle fréquence, mais je mettrais en lumière le créateur du moment qui m’inspire, dont j’ai des coups de coeur à chaque créa qui sort, pour l’univers. Et si j’en ai pas, des initiatives que j’apprécie. J’alternerais probablement avec des forums/sites qui me font de l’oeil. Certains où je serais inscrite et d’autres non. Bref, partager un peu plus mon quotidien de bidouilleuse de photoshop du dimanche et rpgiste. Bref des good vibes dans ce monde de brute !

- Je partagerais de temps à autre des photographies pris par mes soins car j’aime prendre en photo des choses lors de mes voyages, excursions, visites. Ce sera parfois des paysages, parfois des bâtiments, des fleurs,etc... Ca peut-être tout et n’importe quoi. Si vous les utilisez pour vos créations, n’hésitez pas à me taguer que je puisse voir le résultat final.

- Une fois par mois, je ferais un instant sciences fondamentales. Pourquoi ? Car je suis scientifique et que c’est une autre de mes passions. Je suis souvent frustrée de pas pouvoir partager cette passion, de pas pouvoir l’intégrer à mes écrits/créations. Donc, une fois par moi, sur ce tumblr ça va parler chimie et physique (voir astronomie car j’aime aussi cette matière même si je la maîtrise beaucoup moins) ! 

- Et ensuite, de temps en temps des posts sauvages sur des défis/challenge qu’il soit graphique ou pas. Juste pour penser à autre chose et s’amuser. 

En gros il y aura beaucoup plus de moi sur mon tumblr qui  était trop impersonnel et juste un libre service.