Cherche un tuto de Web Design avec GIMP

babouche46 · Le 03/04/2011, à 11:40

Bonjour a tous,

Je recherche des tuto pour le web design sous GIMP , meme si il ressemble au niveau des outils a photoshop, je n'arrive pas a trouver les effet de fusion des calques, pour faire des lueur externe et des ombres , etc

et cherche aussi des tuto de decoupe pour ensuite le passer en HTML/CSS

je n'ai aucune envie de remettre windows rien que pour photoshop.

Merci de votre aide

PS: si un post existe deja, je m'excuse de ne pas l'avoir vu.

kimented · Le 03/04/2011, à 20:04

Salut,

Je crois que ce que tu cherches, c'est l'onglet des calques. Tu peux le trouver en cliquant sur la flèche (entourée en rouge). Tu pourras ensuite régler la transparence, les masques de calques, fusionner des calques...

Je n'ai pas de tutos sous la main, mais personnellement j'ai acheté le livre "Gimp 2.6" de chez Eyrolles (collection Accès Libre) que je trouves facile à lire et plutôt complet, pour pas trop cher (15€). Je peux te fournir quelques exemples et t'aider par message privé, si tu le souhaite.

edit: Peut être que celui-ci peut t'aider:
http://www.siteduzero.com/tutoriel-3-31 … p-2-6.html

Dernière modification par kimented (Le 03/04/2011, à 20:34)

jpr26 · Le 04/04/2011, à 17:31

bonsoir

il y a pas mal de choses ici aussi
http://www.etude-gimp.fr/

Mathieu147 · Le 05/04/2011, à 08:32

Bonjour,

Je ne réponds pas vraiment à ta question, mais je pense que pour le design web, Inkscape est plus indiqué que Gimp.

mydjey · Le 05/04/2011, à 12:11

Mathieu147 > Tu peux t'expliquer un peu plus sur ce point ? (ça m'intéresse)

Dernière modification par mydjey (Le 05/04/2011, à 12:11)

Mathieu147 · Le 05/04/2011, à 12:47

Installer Inkscape est facile: il est dans les dépôts.

Ensuite pour l'utilisation, tu devrais commencer par les didacticiels intégrés à Inkscape, dans le menu Aide. Le premier prend 10 minutes et en suivant ça, tu devrais déjà être ± à l'aise avec le logiciel. Les autres sont intéressants aussi et te présentent plus de fonctions.

Spécifiquement pour le web design, il n'y a rien de spécial, sauf éventuellement deux fonctions (en fait il y a un sous-menu «Web» dans le menu «Extensions» mais je n'ai jamais testé).

La première est l'export en bitmap (Fichier → Exporter en bitmap) qui te permet de créer un fichier PNG de tout ton dessin ou d'une partie. Comme ça tu crées tes images d'arrière-plan, tes boutons, etc.

La seconde est la grille, qu'on active ou désactive avec la touche #: si tu alignes tous tes objets correctement sur la grille, ils seront bien nets.

Des trucs que j'utilise tout le temps: pour faire une ombre portée, tu fais un copier/coller de ta forme, et dans les propriétés de remplissage tu choisis du noir et tu mets un peu de transparence et de flou pour une des deux formes.

La géométrie constructive entre deux formes permet de facilement créer des formes complexes (menu Chemin, puis union, intersection, différence, etc).

L'outil «Aligner et distribuer» est fort puissant une fois qu'on sait s'en servir.

Après, c'est à toi d'apprendre à te servir du programme, mais il y a vraiment moyen de faire de belles choses, avec des fonctions «avancées» qui donnent un max de possibilités (pavage de clones, filtres, effets de chemins, masques, etc.).

RegisBurin · Le 05/04/2011, à 12:51

mydjey a écrit :

Mathieu147 > Tu peux t'expliquer un peu plus sur ce point ? (ça m'intéresse)

Cela reviendrait à expliquer ce qu'est, et comment fonctionne, un soft de dessin vectoriel... Mais, en deux mots, cela permet de manipuler et positionner beaucoup plus simplement (qu'un soft de retouche d'image) des "blocs" de formes géométriques (simples ou complexes).

M'est avis qu'il faut utiliser les 2, en fait. Gimp pour concevoir finement les différents "objets" graphiques (et encore que, pour des boutons/bannières/décorations/... Inkscape s'avère puissant et très simple), ainsi que le fond de page, etc... Et, ensuite, passer le tout sous Inkscape pour une mise page précise (grâce aux fonctions d'alignement/répartition) et facilement adaptable. Aussi, le travail sur les calques est autrement mieux foutu que sur un soft de retouche (possibilité de créer des "groupes de calques/sous-calques, les afficher ou pas, les verrouiller). En sortie, on peut avoir simplement un mockup de la future page en .jpg.

Et je pense même (sans m'y connaitre assez toute fois) que Inkscape ayant un éditeur xml intégré (dans lequel on retrouve toutes les caractéristiques des objets du documents), il doit être possible de récupérer/exploiter les infos de positionnement, etc... des objets pour les utiliser dans l'élaboration d'un html (mais je ne m'y connais vraiment pas en webdesign, et je peux me tromper...)

@+

Mathieu147 · Le 05/04/2011, à 14:03

RegisBurin a écrit :

M'est avis qu'il faut utiliser les 2, en fait. Gimp pour concevoir finement les différents "objets" graphiques (et encore que, pour des boutons/bannières/décorations/... Inkscape s'avère puissant et très simple), ainsi que le fond de page, etc... Et, ensuite, passer le tout sous Inkscape pour une mise page précise (grâce aux fonctions d'alignement/répartition) et facilement adaptable.

Marrant, moi j'aurais dit l'inverse. Gimp en fait n'est pas vraiment indispensable, je ne l'utilise que très rarement, pour recouper un bout de mon PNG généré à partir de Inkscape par exemple.

RegisBurin a écrit :

Et je pense même (sans m'y connaitre assez toute fois) que Inkscape ayant un éditeur xml intégré (dans lequel on retrouve toutes les caractéristiques des objets du documents), il doit être possible de récupérer/exploiter les infos de positionnement, etc... des objets pour les utiliser dans l'élaboration d'un html (mais je ne m'y connais vraiment pas en webdesign, et je peux me tromper...)

Il y a effectivement un éditeur XML, mais je ne comprends pas ce que tu veux dire ensuite.

RegisBurin · Le 05/04/2011, à 14:40

Mathieu147 a écrit :

RegisBurin a écrit :
M'est avis qu'il faut utiliser les 2, en fait. Gimp pour concevoir finement les différents "objets" graphiques (et encore que, pour des boutons/bannières/décorations/... Inkscape s'avère puissant et très simple), ainsi que le fond de page, etc... Et, ensuite, passer le tout sous Inkscape pour une mise page précise (grâce aux fonctions d'alignement/répartition) et facilement adaptable.
Marrant, moi j'aurais dit l'inverse. Gimp en fait n'est pas vraiment indispensable, je ne l'utilise que très rarement, pour recouper un bout de mon PNG généré à partir de Inkscape par exemple.
RegisBurin a écrit :
Et je pense même (sans m'y connaitre assez toute fois) que Inkscape ayant un éditeur xml intégré (dans lequel on retrouve toutes les caractéristiques des objets du documents), il doit être possible de récupérer/exploiter les infos de positionnement, etc... des objets pour les utiliser dans l'élaboration d'un html (mais je ne m'y connais vraiment pas en webdesign, et je peux me tromper...)
Il y a effectivement un éditeur XML, mais je ne comprends pas ce que tu veux dire ensuite.

Concernant Gimp, et dans le cadre du webdesign, il est peut-être inutile (encore une fois, pas adepte du truc, donc aucune idée...), mais il permet de travailler de façon matricielle, sur des pixels quoi... alors de fait, il fait tout ce que Inkscape ne sait pas faire (pour de la retouche pure -couleurs/effets et modes de combinaison des calques...).

Inkscape traite des vecteurs, des points, des interactions... et les réglages et propriétés sont "écrits" par des valeurs numériques dans un simple fichier texte (xml). Il me semblerais donc logique (mais je le répète je n'y connais rien...) de pouvoir récupérer/convertir/utiliser certaines de ces valeurs (de positionnement, de transparence, que sais-je...) et tout ce qui peut être nécessaire à inscrire dans le html d'une page web !?
(ce n'est qu'une simple idée, émmanant du fait que "sous Linux... tout est fichier"..., et c'est ce qui fait que des softs peuvent communiquer/interagir entre eux... enfin bon, je digresse)

Enfin, s'il y a des webdesigners linuxiens plus calés que moi pour répondre à tout ça, et donner leur avis sur les outils qu'ils utilisent...

@+

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 03/04/2011, à 11:40

Cherche un tuto de Web Design avec GIMP

#2 Le 03/04/2011, à 20:04

Re : Cherche un tuto de Web Design avec GIMP

#3 Le 04/04/2011, à 17:31

Re : Cherche un tuto de Web Design avec GIMP

#4 Le 05/04/2011, à 08:32

Re : Cherche un tuto de Web Design avec GIMP

#5 Le 05/04/2011, à 12:11

Re : Cherche un tuto de Web Design avec GIMP

#6 Le 05/04/2011, à 12:47

Re : Cherche un tuto de Web Design avec GIMP

#7 Le 05/04/2011, à 12:51

Re : Cherche un tuto de Web Design avec GIMP

#8 Le 05/04/2011, à 14:03

Re : Cherche un tuto de Web Design avec GIMP

#9 Le 05/04/2011, à 14:40

Re : Cherche un tuto de Web Design avec GIMP

Pied de page des forums