Tutorial Photoshop : créer un gif transparent

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mar 17 Avr - 18:10

Pour ceux que cela interresse, Photoshop est un logiciel assez complet mais assez loin d'être simple d'utilisation.

L'exemple le plus frappant : qui ne s'est pas pris la tête à vouloir se créer un logo au format gif avec un fond transparent ?

Accrochez-vous, voici ma methode :

1- ouvrir sous Photoshop une image (si possible avec un fond uni)
Dans mon exemple, je prends l'image skull.jpg qui possède un fond noir.




2- prendre la pipette et cliquer sur la couleur de fond



3- prendre le pot de peinture et cliquer de nouveau sur le fond (afin d'uniformiser au mieux la couleur de fond et pour faire en sorte de bien distinguer les contours du logo)



4- cliquer sur Image -> Mode -> et sélectionner "couleurs indexées"



5- cliquer sur "ok" en laissant tout par défaut : grace à cela, l'image a changé de mode et est prette à avoir un fond transparent



6- cliquer sur Image -> Mode -> et sélectionner "Table des couleurs" : ce qui nous donne un apercu des couleurs utilisé par l'image



7- cliquer sur la pipette de cette table de couleurs



8- cliquer sur le fond de l'image
Le noir sera remplacé par des carreaux gris et blanc : ce qui indique que le fond est transparent.



9- cliquer sur "ok" pour valider la couleur de transparence



10- faire Fichier -> Enregistrer sous



11- à la place du format Photoshop (PSD), choisir CompuServe GIF (.gif) et cliquer sur Enregistrer



12- cliquer sur "OK" pour les options Gif : normal au lieu d'entrelacé.



Votre logo avec un fond transparent est fait !! Après il ne vous reste plus qu'à garder la partie de l'image interressante et de jouer avec la taille de l'image pour faire en sorte qu'il ne soit pas trop grand (surtout si vous partez comme moi d'un fond d'ecran).

Bon courage et n'hesitez pas à me demander si vous n'y arrivez pas, je me débrouille en Photoshop Wink


Dernière édition par le Mar 17 Avr - 23:51, édité 2 fois
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Bardaf le Mar 17 Avr - 21:28

Merci pour ce tuto...

Je ne me suis jamais penché sur photoshop, le peu que j'ai vu ne me donne pas envie Mr. Green

_________________

avatar
Bardaf
c'est l'embardée
c'est l'embardée

Nombre de messages : 3685
Age : 33
Localisation : Belgium
Date d'inscription : 13/03/2005

Voir le profil de l'utilisateur http://heavy-music.forumactif.com

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mar 17 Avr - 22:26

Pour moi Photoshop est un bon compagnon pour créer un site web.
Ceci dit, il n'est pas indispensable : pleins d'autres logiciels sont plus facile d'accès et font pas mal de truc aussi.

Par exemple, si on cherche un logiciel juste pour transformer des fichiers BMP(.bmp) en JPEG (.jpg), ACDsee ou XN-View sont très bien.

Pour ceux qui ne le savent pas, un fichier image en BMP fait environ 10 fois la taille d'un fichier JPEG : ainsi un fichier de 1 Mo en BMP peut faire 100 Ko en JPEG sans perdre de qualité. Wink
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Mrmoving le Mar 17 Avr - 22:29

ironchris a écrit:ainsi un fichier de 1 Mo en BMP peut faire 100 Ko en JPEG sans perdre de qualité. Wink

Je vais me renseigner de mon côté, dans ma belle famille ils travaillent beaucoup là-dedans (photos semi-pro) mais je pense qu'il y a une bonne raison pour qu'un BMP fasse 1MO là où un jpeg n'en fait que 100 ... et la qualité doit très certainement entrer en jeu!

Sinon excellent tuto!

_________________
I've lost control and I don't know If I am true to my soul
avatar
Mrmoving
Mr Ressources
Mr Ressources

Nombre de messages : 3674
Age : 34
Localisation : Metz
Date d'inscription : 30/04/2005

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Bardaf le Mar 17 Avr - 22:44

Oui, un JPEG c'est comme un divx...

Petite explication :

Un BMP (idem image d'un DVD) code les pixels par couleur et par position
exemple :
pixel 1 : #CE1428
pixel 2 : #CE1428
pixel 3 : #14EB32
pixel 4 : #CE1428
.....
Meme si l'image ne fait qu'une couleur, il codera tous les pixels un par un.

Un JPEG ou autres (idem image Divx) code les pixels par couleur
exemple :
pixel 1, 2, 4 : #CE1428
pixel 3 : #14EB32
.....
D'ou la différence de taille, il y a aussi un facteur de compression (si on utilise du JPEG à 100% c'est quasi comme l'original, mais ca reste "lourd" niveau taille), qui fait qu'il estime que certaines nuances de couleur sont une seule et meme couleur, d'ou parfois des flous, ou des "carrés" comme sur les vieux DivX... Mais bon, la compression évolue, et c'est de plus en plus beau.

_________________

avatar
Bardaf
c'est l'embardée
c'est l'embardée

Nombre de messages : 3685
Age : 33
Localisation : Belgium
Date d'inscription : 13/03/2005

Voir le profil de l'utilisateur http://heavy-music.forumactif.com

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mar 17 Avr - 22:49

La réponse est toute simple pour la différence entre un fichier BMP et un fichier JPEG à qualité égale.

Le jpeg, c'est un peu le fichier winzip de l'image : il correspond à une compression de cette même image.

Pour tenter d'être clair, sur un fichier BMP, il regarde tout les points (les pixels) de l'image
Tandis que sur un fichier JPEG, il regarde chaque groupe de points et compte comme un seul tout ce qui est identique.

La différence est invisible pour les yeux : c'est juste la façon dont l'interprette l'ordinateur qui change et qui change la taille.


Dernière édition par le Mar 17 Avr - 22:54, édité 1 fois
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mar 17 Avr - 22:52

Bonne comparaison le DivX, je pensais encore à une 3e comparaison plus parlante encore :

le JPEG c'est un peu le mp3 de l'image par rapport au son WAV.
En plus le rapport entre les 2 est le même 1 pour 10
5 Mo de mp3 corresponds à un fichier WAV de 50 Mo.
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  DeMoNiK MeSSiaH le Mar 17 Avr - 23:04

La compression JPG joue sur le nombre couleur, en baissant le taux, tu diminues ton nombre de couleurs. Ca permet aussi un poids moindre, mais tu perds en qualité.
avatar
DeMoNiK MeSSiaH
King of Metal
King of Metal

Nombre de messages : 544
Age : 30
Localisation : Rennes
Date d'inscription : 23/06/2006

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Bardaf le Mar 17 Avr - 23:41

DeMoNiK MeSSiaH a écrit:La compression JPG joue sur le nombre couleur, en baissant le taux, tu diminues ton nombre de couleurs. Ca permet aussi un poids moindre, mais tu perds en qualité.

street-lobotomy a écrit:il y a aussi un facteur de compression (si on utilise du JPEG à 100% c'est quasi comme l'original, mais ca reste "lourd" niveau taille), qui fait qu'il estime que certaines nuances de couleur sont une seule et meme couleur

_________________

avatar
Bardaf
c'est l'embardée
c'est l'embardée

Nombre de messages : 3685
Age : 33
Localisation : Belgium
Date d'inscription : 13/03/2005

Voir le profil de l'utilisateur http://heavy-music.forumactif.com

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Mrmoving le Mer 18 Avr - 0:39

ironchris a écrit:
le JPEG c'est un peu le mp3 de l'image par rapport au son WAV.

Donc c'est bien de la perte de données et de qualité, le mp3 étant d'une qualité moindre que le WAV.

Merci pour les explications!

_________________
I've lost control and I don't know If I am true to my soul
avatar
Mrmoving
Mr Ressources
Mr Ressources

Nombre de messages : 3674
Age : 34
Localisation : Metz
Date d'inscription : 30/04/2005

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  DeMoNiK MeSSiaH le Mer 18 Avr - 0:56

street-lobotomy a écrit:
DeMoNiK MeSSiaH a écrit:La compression JPG joue sur le nombre couleur, en baissant le taux, tu diminues ton nombre de couleurs. Ca permet aussi un poids moindre, mais tu perds en qualité.

street-lobotomy a écrit:il y a aussi un facteur de compression (si on utilise du JPEG à 100% c'est quasi comme l'original, mais ca reste "lourd" niveau taille), qui fait qu'il estime que certaines nuances de couleur sont une seule et meme couleur


Ah ouais, ca veut dire la même chose ! Mr.Red


Javais pas percuté en lisant Arrow
avatar
DeMoNiK MeSSiaH
King of Metal
King of Metal

Nombre de messages : 544
Age : 30
Localisation : Rennes
Date d'inscription : 23/06/2006

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Bardaf le Mer 18 Avr - 1:02

Mrmoving a écrit:
ironchris a écrit:
le JPEG c'est un peu le mp3 de l'image par rapport au son WAV.

Donc c'est bien de la perte de données et de qualité, le mp3 étant d'une qualité moindre que le WAV.

Merci pour les explications!

Non, c'est pas comparable Chris : Le MP3 est un echantilloneur, il enlève certaines fréquences, le MP3 a une qualité bcp moindre au WAV. Le JPEG bien fait a une qualité proche du BMP.

_________________

avatar
Bardaf
c'est l'embardée
c'est l'embardée

Nombre de messages : 3685
Age : 33
Localisation : Belgium
Date d'inscription : 13/03/2005

Voir le profil de l'utilisateur http://heavy-music.forumactif.com

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mer 18 Avr - 10:33

Faux pour la perte de qualité entre du bmp et du jpeg et faux aussi pour la perte de qualité entre du wav et du mp3.

Pour l'image, je parle juste d'une image bmp que j'enregistre tel quelle au format jpeg à 100%, je persiste et je signe, la taille est 10 fois moindre mais pour la qualité, il n'y a strictement aucune perte : bien malin sera celui me fourni la preuve par A+B qu'il voit une différence entre les 2 images.

Pour l'audio, idem, j'ai un son WAV, je l'enregistre au format mp3 tel quel, (après c'est sur, tout dépends de l'echantillonnage que je choisi mais à partir de 128kps voir plus, par défaut la qualité est la même) et à l'oreille je ne constate strictement aucune perte de qualité.

Comme tu l'a bien dis Street, le mp3 enleve des fréquences mais ce sont des fréquences inaudible pour l'oreille humaine : il s'agit d'ultra-son et d'infra-son. Donc l'humain que nous sommes ne fera strictement aucune différence entre les 2 fichiers. C'est bien pour cela qu'ont été créé les lecteurs mp3 : avoir la qualité d'un CD audio sur un tout petit support et ainsi pouvoir en mettre d'avantage dessus.

Pour perdre de la qualité sur un jpeg, il faut baisser le pourcentage : dans ce cas oui, il y a perte de données.

Pour perdre de la qualité sur mp3, il faut compresser en dessous de 128 kps : donc avec un echantillonnage à 80 kps par exemple, là oui, on constatera une différence.
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Bardaf le Mer 18 Avr - 14:45

En meme temps c'est ce que j'ai dit pour le JPEG...

Et pour MP3, les fréquences infra et ultra ne sont pas audibles mais sont perceptibles (infra-basses notamment), donc il y a perte de qualité.

_________________

avatar
Bardaf
c'est l'embardée
c'est l'embardée

Nombre de messages : 3685
Age : 33
Localisation : Belgium
Date d'inscription : 13/03/2005

Voir le profil de l'utilisateur http://heavy-music.forumactif.com

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  ironchris le Mer 18 Avr - 14:59

C'est infime quand même !
avatar
ironchris
Angel of Death
Angel of Death

Nombre de messages : 220
Age : 39
Date d'inscription : 19/03/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Mrmoving le Mer 18 Avr - 19:50

Le FLAC, le SHN et autres n'auraient jamais été inventé si le mp3 n'étaient pas de la perte de données Wink Une compression d etoute facon au delà de 128 pour du mp3 ne sert à rien, si ce n'est à prendre de la place pour rien.

A l'oreille oui, aucune différence bien sûr. Mais à l'analyse, c'est à se tirer les cheveux les différences.

_________________
I've lost control and I don't know If I am true to my soul
avatar
Mrmoving
Mr Ressources
Mr Ressources

Nombre de messages : 3674
Age : 34
Localisation : Metz
Date d'inscription : 30/04/2005

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  DeMoNiK MeSSiaH le Mer 18 Avr - 20:51

Ca sert a rien d'enregistrer au delà de 128 en mp3 ?

Donc quand me disent qu'ils encodent en 320 car sinon la qualité est pas au RDV, ils racontent nawak ?
avatar
DeMoNiK MeSSiaH
King of Metal
King of Metal

Nombre de messages : 544
Age : 30
Localisation : Rennes
Date d'inscription : 23/06/2006

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Mrmoving le Mer 18 Avr - 20:53

Tu veux de la qualité au RDV? Tu convertis en FLAC ... mais ca prend enormement de place.

Concernant le mp3, la "norme" c'est du 128, c'est la "qualité cd", du moins audible à l'oreille humaine. Au-delà, pas d'interet.

Faudra peut être créer un sujet là-dessus

_________________
I've lost control and I don't know If I am true to my soul
avatar
Mrmoving
Mr Ressources
Mr Ressources

Nombre de messages : 3674
Age : 34
Localisation : Metz
Date d'inscription : 30/04/2005

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Phantom Lord le Mar 3 Juil - 23:59

preferez le format png pour les image transparente fixe
avatar
Phantom Lord
Angel of Death
Angel of Death

Nombre de messages : 166
Age : 33
Localisation : In my Dreams
Date d'inscription : 14/07/2005

Voir le profil de l'utilisateur http://www.metallica-rml.fr/

Revenir en haut Aller en bas

Re: Tutorial Photoshop : créer un gif transparent

Message  Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

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