Forum Akamatsu
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -20%
Ecran PC GIGABYTE 28″ LED M28U 4K ( IPS, 1 ms, ...
Voir le deal
399 €

Mettre des screens sur forum (avec retouches)

Aller en bas

Mettre des screens sur forum (avec retouches) Empty Mettre des screens sur forum (avec retouches)

Message par Invité Sam 20 Fév - 17:52

Suite a la demande de DARM (heureusement qu'il m'a vu lors de mes rares connexions épisodiques) je mets en ligne un tuto pour mettre des screen sur le forum.

Pour le moment vous n'avez que la partie avec PAINT puisque je l'ai écris a la base pour la femme d'un pote qui me l'a demandé gentiment (la femme de Loki pour info). Je ne l'ai pas relu alors j'espère qu'il n'est pas trop personnel What a Face

A la base c'est un code HTML qui est heureusement supporté par le forum. Je vous file après le fichier .txt
Pour le sauvegarder il suffit donc de le coller dans un fichier blocnote puis une fois enregistré il suffit de renommer le fichier en .htm pour le lire directement au bon format (avec normalement les images en taille normale, c'est a dire lisible).
Le code est propre et il a été mis en page pour qu'il soit facilement lisible meme pour les novices en html (d'ailleurs c'est presque mon niveau Razz)

Bonne lecture a tous.

ps : j'essayerais de le mettre au propre pour forum un de ses quatre mais vu le PEU de temps que je peux accorder au pc et a ogame ca risque de prendre du temps.
ps bis : si je me motive je le ferais aussi pour photoshop qui est beaucoup plus plaisant a utiliser.




Tutorial screen via paint



Tutorial screen via PAINT















Préambule







Bon je vais essayer de ne pas faire brouillon ni cochon et de détailler vraiment pas à pas. S'il y a un souci suffit de demander des infos. A noter que je fais tout au format HTML donc il se peut qu'il y ait des balises loupées donc faut pas hésiter a me le dire (ca fait longtemps que je n'ai pas touché au HTML créé par bloc note).


Dans ce tuto je détaillerais chaque étape par écrit puis en dessous il y aura une capture d'écran dans la mesure du possible pour illustrer ce que je dis.







Faire le screenshot.



(La capture d'écran en francais)






Alors voici par exemple ton ecran et tu désires montrer une partie de cet écran aux autres (dans un exemple sur un forum). Sur le clavier il y a la touche magique Imp écr (impression écran)




















Copier le screen sous paint.







Bon dans un premier temps on va chercher paint, si vous avez vista ca simplifiera la chose sinon faut juste chercher un peu car la manip doit etre approximativement la meme.


Donc il faut aller sur le menu démarrer > Tous les programmes (tout en dessous) > Accessoires > Paint (va savoir pourquoi le mien s'appelle Paint.net ... Ca va t'ouvrir donc paint dans la logique des choses.



















Paint est maintenant ouvert donc on va recuperer l'image. Pour cela il faut aller dans l'onglet Fichier > Nouveau




















Tu as une nouvelle fenetre qui s'affiche pour te demander la taille de l'image. Par defaut mon image est de 1920x1080 pixels mais ca depend de votre écran et là j'avoue que présentement je n'ai pas d'astuce pour savoir la résolution (j'utilise photoshop donc c'est automatique). Au pire prend large, de toute facon faudra faire des retouches. Quand tu auras fini tu clique sur OK





















Ensuite rien de plus simple il suffit d'appuyer sur Ctrl et v en même temps pour coller l'image. Bon c'est un raccourci clavier pour gagner du temps et de me faire une autre image mais comme je suis gentil j'en fait une.


Pour la version longue donc il faut aller dans Edition > coller.
























Modifier le screen sous paint.







Là c'est le moment que tu ne vois pas mais que je préfère ... je redécouvre le paint nouvelle génération et je m'arrache les cheveux pour le comprendre pour après trouver comment faire simple, suivi bien sur de savoir comment l'expliquer avec des mots. Bref un grand moment de solitude que tu ne peux pas voir.






Voila j'ai trouvé une astuce pas longue par hasard. Alors tu prends le Rectangle de selection (1) puis tu cliques en maintenant enfoncé le bouton de la souris (un clic glissé) pour "entourer" ce que tu désire garder (2)



















Ensuite il suffit de cliquer sur Rogner de selection pour ne garder que ce qu'il y a d'encadré.



















Accessoirement tu peux redimensionner ton image si tu la trouve trop grande (agrandir une image c'est généralement mauvais car ca pixelise pas mal). Pour cela tu vas dans Image > Redimensionner.



















Il te suffit de choisir tes dimensions souhaitées (en pixel ca parle plus qu'en pouce j'imagine) et cliquer sur OK.


Attention si tu veux que ca ressemble a quelque chose coche bien garder les proportions.




















Enregistrer l'image sur le disque dur.







Simple comme bonjour mais autant l'écrire aussi. Il suffit d'aller sur Fichier > Enregistrer sous...



















Dans la nouvelle fenetre tu cliques sur Parcourir les dossiers.



















Il te suffit maintenant d'enregistrer l'image où tu veux mais ca tu dois savoir faire ...


A noter vérifie bien le Type de l'image soit bien en jpeg (plus facile pour l'hoster et c'est pas lourd tout en gardant une bonne qualité). T'oublies pas non plus de cliquer sur Enregistrer a la fin :p



















Ensuite tu as une fenetre pour définir la Qualité de ton image. Plus le chiffre sera proche de 100 et plus l'image sera belle mais lourde en terme de Ko/Mo. Une fois que tu auras choisi tu cliques sur OK




















Heberger l'image sur internet.







Personnelement j'utilise ImageShack c'est en anglais mais c'est gratuit et rapide alors autant en profiter. Alors tu vas dessus et tu clique sur Browse...



















Donc ensuite tu vas chercher ton image (je ne pense pas qu'il y ait besoin de t'expliquer comment faire) et tu clique sur OK.



















Tu reviens sur la page principale avec ton image prete a etre hoster (1). Il ne te reste plus qu'a cliquer sur start upload! (2).



















Tu as maintenant differents liens qui s'offrent a toi. Nous allons nous interesser pour le moment qu'au Direct link to image (le lien direct de l'image au cas où tu n'aurais pas compris ^^). Tu cliques dans l'encadré jaune et il est directement surligné pret a etre copier. Tu sais copier du texte mais dans le doute ... tu appuye simultanement sur Ctrl + c.



















Et voila il ne te restera plus qu'a mettre sur le forum ton lien entre les balises Mettre des screens sur forum (avec retouches)  soit pour l'exemple present : Mettre des screens sur forum (avec retouches) Screenretouch














Et voila ce tuto m'aura couté au minimum 6h de ma vie pour en gros 350 lignes de code (j'ai pris soin de bien présenter mon code meme si tu t'en fous). Cette page a été entierement réalisé via le blocnote car j'aime pas qu'on m'assiste en HTML donc il se peut qu'il y ait des bourdes que je n'ai pas vu, si c'est le cas n'hésite pas a me le dire que je puisse corriger car ca pourra surement servir a d'autres personnes. Il reste un nombre incalculable de fautes d'orthographe (surtout des accents) mais je suis un fénéant donc ... Je peux te l'étoffer au besoin si tu as encore des questions ou si tu veux des précisions.


D'ailleurs si tu veux le codage HTML et le modifier il suffit de renommer ce fichier en remplacant le ".htm" par un ".txt"








KZP 2009.









Code:

<html>

<title> Tutorial screen via paint</title>
<head>

<font color="#FF0000"><p align="center"><font size="7"><u><b>
Tutorial screen via PAINT
</u></b></font></p></font>

</head>

<body>

<br>
<br>
<br>

<font color="#0000FF"><font size="6"><u><b>
Préambule
</u></b></font></font>

<br>
<br>

Bon je vais essayer de ne pas faire brouillon ni cochon et de détailler vraiment pas à pas. S'il y a un souci suffit de demander des infos. A noter que je fais tout au format HTML donc il se peut qu'il y ait des balises  loupées donc faut pas hésiter a me le dire (ca fait longtemps que je n'ai pas touché au HTML créé par bloc note).
<br>
Dans ce tuto je détaillerais chaque étape par écrit puis en dessous il y aura une capture d'écran dans la mesure du possible pour illustrer ce que je dis.

<br>
<br>

<font color="#0000FF"><font size="6"><u><b>
Faire le screenshot.
</u></b></font></font>
<br>
(La capture d'écran en francais)

<br>
<br>

Alors voici par exemple ton ecran et tu désires montrer une partie de cet écran aux autres (dans un exemple sur un forum).  Sur le clavier il y a la touche magique <font color=cc00ff>Imp écr </font>(impression écran)

<br>
<br>

<p align="center">
<img src="http://img104.imageshack.us/img104/7279/97519545.jpg">
</p>

<br>
<br>
<br>
<br>

<font color="#0000FF"><font size="6"><u><b>
Copier le screen sous paint.
</u></b></font></font>

<br>
<br>

Bon dans un premier temps on va chercher paint, si vous avez vista ca simplifiera la chose sinon faut juste chercher un peu car la manip doit etre approximativement la meme.
<br>
Donc il faut aller sur le menu <font color=cc00ff>démarrer</font> > <font color=cc00ff>Tous les programmes</font> (tout en dessous) > <font color=cc00ff>Accessoires </font> > <font color=cc00ff>Paint</font> (va savoir pourquoi le mien s'appelle Paint.net ... Ca va t'ouvrir donc paint dans la logique des choses.

<br>
<br>

<p align="center">
<img src="http://img190.imageshack.us/img190/9523/14260820.jpg">
</p>

<br>
<br>
<br>
<br>

Paint est maintenant ouvert donc on va recuperer l'image. Pour cela il faut aller dans l'onglet <font color=cc00ff>Fichier</font> > <font color=cc00ff>Nouveau</font>

<br>
<br>


<p align="center">
<img src="http://img42.imageshack.us/img42/2407/24824543.jpg">
</p>

<br>
<br>
<br>
<br>

Tu as une nouvelle fenetre qui s'affiche pour te demander la taille de l'image. Par defaut mon image est de 1920x1080 pixels mais ca depend de votre écran et là j'avoue que présentement je n'ai pas d'astuce pour savoir la résolution (j'utilise photoshop donc c'est automatique). Au pire prend large, de toute facon faudra faire des retouches. Quand tu auras fini tu clique sur <font color=cc00ff>OK</font>


<br>
<br>


<p align="center">
<img src="http://img12.imageshack.us/img12/8780/95564927.jpg">
</p>

<br>
<br>
<br>
<br>

Ensuite rien de plus simple il suffit d'appuyer sur <font color=cc00ff>Ctrl</font> et <font color=cc00ff>v</font> en même temps pour coller l'image. Bon c'est un raccourci clavier pour gagner du temps et de me faire une autre image mais comme je suis gentil j'en fait une.
<br>
Pour la version longue donc il faut aller dans <font color=cc00ff>Edition</font> > <font color=cc00ff>coller</font>.


<br>
<br>


<p align="center">
<img src="http://img197.imageshack.us/img197/3250/88563203.jpg">
</p>

<br>
<br>
<br>
<br>



<font color="#0000FF"><font size="6"><u><b>
Modifier le screen sous paint.
</u></b></font></font>

<br>
<br>

Là c'est le moment que tu ne vois pas mais que je préfère ... je redécouvre le paint nouvelle génération et je m'arrache les cheveux pour le comprendre pour après trouver comment faire simple, suivi bien sur de savoir comment l'expliquer avec des mots. Bref un grand moment de solitude que tu ne peux pas voir.

<br>
<br>

Voila j'ai trouvé une astuce pas longue par hasard. Alors tu prends le <font color=cc00ff>Rectangle de selection</font> (<font color=cc0000>1</font>) puis tu cliques en maintenant enfoncé le bouton de la souris (un clic glissé) pour "entourer" ce que tu désire garder (<font color=cc0000>2</font>)

<br>
<br>

<p align="center">
<img src="http://img42.imageshack.us/img42/3356/14105291.jpg">
</p>

<br>
<br>
<br>
<br>

Ensuite il suffit de cliquer sur <font color=cc00ff>Rogner de selection</font> pour ne garder que ce qu'il y a d'encadré.

<br>
<br>

<p align="center">
<img src="http://img251.imageshack.us/img251/6545/78274357.jpg">
</p>

<br>
<br>
<br>
<br>

Accessoirement tu peux redimensionner ton image si tu la trouve trop grande (agrandir une image c'est généralement mauvais car ca pixelise pas mal). Pour cela tu vas dans <font color=cc00ff>Image</font> > <font color=cc00ff>Redimensionner</font>.

<br>
<br>

<p align="center">
<img src="http://img207.imageshack.us/img207/9735/36778075.jpg">
</p>

<br>
<br>
<br>
<br>

Il te suffit de choisir tes dimensions souhaitées (en pixel ca parle plus qu'en pouce j'imagine) et cliquer sur <font color=cc00ff>OK</font>.
<br>
<font color="#ff0000"><u><b>Attention</u></b></font> si tu veux que ca ressemble a quelque chose coche bien <font color=cc00ff>garder les proportions</font>.

<br>
<br>

<p align="center">
<img src="http://img11.imageshack.us/img11/3223/19364848.jpg">
</p>

<br>
<br>
<br>
<br>

<font color="#0000FF"><font size="6"><u><b>
Enregistrer l'image sur le disque dur.
</u></b></font></font>

<br>
<br>

Simple comme bonjour mais autant l'écrire aussi. Il suffit d'aller sur <font color=cc00ff>Fichier</font> > <font color=cc00ff>Enregistrer sous...</font>

<br>
<br>

<p align="center">
<img src="http://img30.imageshack.us/img30/6900/21265003.jpg">
</p>

<br>
<br>
<br>
<br>

Dans la nouvelle fenetre tu cliques sur <font color=cc00ff>Parcourir les dossiers</font>.

<br>
<br>

<p align="center">
<img src="http://img97.imageshack.us/img97/5756/94527732.jpg">
</p>

<br>
<br>
<br>
<br>

Il te suffit maintenant d'enregistrer l'image où tu veux mais ca tu dois savoir faire ...
<br>
<font color="#ff0000"><u><b>A noter</u></b></font> vérifie bien le <font color=cc00ff>Type</font> de l'image soit bien en jpeg (plus facile pour l'hoster et c'est pas lourd tout en gardant une bonne qualité). T'oublies pas non plus de cliquer sur <font color=cc00ff>Enregistrer</font> a la fin :p

<br>
<br>

<p align="center">
<img src="http://img23.imageshack.us/img23/1425/28907921.jpg">
</p>

<br>
<br>
<br>
<br>

Ensuite tu as une fenetre pour définir la <font color=cc00ff>Qualité</font> de ton image. Plus le chiffre sera proche de 100 et plus l'image sera belle mais lourde en terme de Ko/Mo. Une fois que tu auras choisi tu cliques sur <font color=cc00ff>OK</font>

<br>
<br>

<p align="center">
<img src="http://img194.imageshack.us/img194/1354/entre13et14.jpg">
</p>

<br>
<br>
<br>
<br>

<font color="#0000FF"><font size="6"><u><b>
Heberger l'image sur internet.
</u></b></font></font>

<br>
<br>

Personnelement j'utilise <a href="http://load.imageshack.us/"> ImageShack </a> c'est en anglais mais c'est gratuit et rapide alors autant en profiter. Alors tu vas dessus et tu clique sur <font color=cc00ff>Browse...</font>

<br>
<br>

<p align="center">
<img src="http://img28.imageshack.us/img28/4052/50144102.jpg">
</p>

<br>
<br>
<br>
<br>

Donc ensuite tu vas chercher ton image (je ne pense pas qu'il y ait besoin de t'expliquer comment faire) et tu clique sur <font color=cc00ff>OK</font>.

<br>
<br>

<p align="center">
<img src="http://img203.imageshack.us/img203/4641/99904872.jpg">
</p>

<br>
<br>
<br>
<br>

Tu reviens sur la page principale avec ton image prete a etre hoster (<font color=cc00ff>1</font>). Il ne te reste plus qu'a cliquer sur <font color=cc00ff>start upload!</font> (<font color=cc00ff>2</font>).

<br>
<br>

<p align="center">
<img src="http://img21.imageshack.us/img21/5213/52444486.jpg">
</p>

<br>
<br>
<br>
<br>

Tu as maintenant differents liens qui s'offrent a toi. Nous allons nous interesser pour le moment qu'au <font color=cc00ff>Direct link to image</font> (le lien  direct de l'image au cas où tu n'aurais pas compris ^^). Tu cliques dans l'encadré jaune et il est directement surligné pret a etre copier. Tu sais copier du texte mais dans le doute ... tu appuye simultanement sur <font color=cc00ff>Ctrl</font> + <font color=cc00ff>c</font>.

<br>
<br>

<p align="center">
<img src="http://img104.imageshack.us/img104/8519/79521798.jpg">
</p>

<br>
<br>
<br>
<br>

Et voila il ne te restera plus qu'a mettre sur le forum ton lien entre les balises [img] [/img] soit pour l'exemple present : [img]http://img209.imageshack.us/img209/3986/screenretouch.jpg[/img]

<br>
<br>
<br>
<br>
<br>
<br>

Et voila ce tuto m'aura couté au minimum 6h de ma vie pour en gros 350 lignes de code (j'ai pris soin de bien présenter mon code meme si tu t'en fous). Cette page a été entierement réalisé via le blocnote car j'aime pas qu'on m'assiste en HTML donc il se peut qu'il y ait des bourdes que je n'ai pas vu, si c'est le cas n'hésite pas a me le dire que je puisse corriger car ca pourra surement servir a d'autres personnes. Il reste un nombre incalculable de fautes d'orthographe (surtout des accents) mais je suis un fénéant donc ... Je peux te l'étoffer au besoin si tu as encore des questions ou si tu veux des précisions.
<br>
D'ailleurs si tu veux le codage HTML et le modifier il suffit de renommer ce fichier en remplacant le ".htm" par un ".txt"

<br>
<br>
<br>

KZP 2009.



<body>

<html>

Invité
Invité


Revenir en haut Aller en bas

Mettre des screens sur forum (avec retouches) Empty Re: Mettre des screens sur forum (avec retouches)

Message par Invité Sam 20 Fév - 18:06

et tout ça pour un boulot qui dure max 5 min lol
merci pour l'effort wink

petite précision qui ne change en rien la qualité de ce qui est dit plus haut :

pour obtenir paint, sous windows toute version :

clic droit sur bureau
choisir nouveau > image bitmap
enregistrer

puis clic droit sur l'image enregistrée
et choisir modifié.

en principe c'est paint qui s'ouvre.
cependant, si vous éprouvez des difficultés, vous pouvez également choisir le menu ouvrir avec (disponible en maintenant la touche maj enfoncée pendant le clic) et choisir paint.

Invité
Invité


Revenir en haut Aller en bas

Mettre des screens sur forum (avec retouches) Empty Re: Mettre des screens sur forum (avec retouches)

Message par Invité Lun 22 Fév - 9:23

Beaucoup de travail, bravo !

C'est un tutoriel clair et facile à suivre.

Invité
Invité


Revenir en haut Aller en bas

Mettre des screens sur forum (avec retouches) Empty Re: Mettre des screens sur forum (avec retouches)

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum