Création de maquette web

Dimension: px
Commencer à balayer dès la page:

Download "Création de maquette web"

Transcription

1 Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte et les tailles d objet

2 Création de maquette web avec Photoshop Il faut travailler en 72dpi et en pixels, en RVB Choisir dans les préférences : unités et règles en pixels

3 Voir la grille 960 Fondée sur 960 pixels, avec des variantes de 12 et 16 colonnes, ou plus. 960.gs à télécharger

4 Intégration avec Fireworks et Photoshop

5 Analyser le fichier pour déterminer ce qui sera de l image, ce qui sera stylé en css. Photos, décorations en images Pour les ombres, typos «exotiques», coins arrondis, choisir entre images ou CSS3 Pour les besoins pédagogiques de ce tutoriel, nous choisirons images plutôt que CSS3

6 Ici 9 éléments à récupérer un morceau de l arrière plan du menu logo arrière plan du pavé l étoile 4 photos un morceau de l arrière plan du détail

7 Création des tranches

8 Le principe des tranches est de découper ce qui est visible à l écran. Il faut masquer les calques qui se superposent. Pour la partie supérieure : le logo et le pavé noir doivent être sur un fond transparent.

9 Il y a deux façons de créer les tranches. Première façon: on souhaite avoir comme tranche le contenu du calque entier, comme pour le logo et le pavé noir. Clic droit sur le fond jaune du logo > Insérer une tranche rectangulaire

10 Nommer la tranche ainsi créée Soit dans l inspecteur des propriétés de la tranche, soit dans le dossier «calque web» Attention! Les noms choisis pour les tranches seront les noms des images gif, jpg ou png utilisées dans vos pages web. Pas d espace, d accents...

11 Une tranche apparaît sur le bloc Tranche insérée avec le nom choisi. Ne pas se préoccuper de l extension qui apparaît à ce moment

12 Il y a deux façons de créer les tranches. Deuxième façon On souhaite avoir comme tranche un morceau du calque comme l arrière-plan du menu, qui se répètera en x Choisir l outil tranche Dessiner la tranche sur l objet Nommer la tranche comme précédemment

13 Modifications des tranches Une fois les tranches créées, il est possible de les déplacer avec le curseur, ou en changeant les valeurs x et y dans l inspecteur de propriétés et de changer la largeur et la hauteur aussi en plaçant le curseur sur les bords ou en utilisant l inspecteur des propriétés

14 Optimisation des images gif, jpg ou png? Pour le web, le mode de couleurs est un mode RougeVertBleu. le mode d'affichage des couleurs sur un moniteur.

15 Le format JPEG Format avec perte de données. Basé sur une compression ajustable de 0 (qualité minimum) à 100 (qualité maximum). Il permet d'afficher des images 16bits, c'est à dire en millions de couleurs. Le format est JPEG est particulièrement adapté aux images photo-numériques. Et de manière plus générale, aux images contenant un très grand nombre de couleurs (images contenant un dégradé radial ou linéaire par exemple). compression à 80% Une compression trop forte a tendance à pixelliser l'aspect de la photo, à rendre les contours des formes moins lisses et le texte peu lisible. compression à 13%

16 Le format GIF Format sans perte de données mais avec indexation des couleurs dans une palette. Le format GIF fonctionne sur 8 bits. Elle existe plusieurs types de palette, qui conserve de manière plus ou moins efficace les couleurs de l'image originale. Le format GIF est particulièrement adapté aux images «géométriques», ayant un aspect vectoriel. Toutes les images en aplats de couleurs, comme le texte, les illustrations, les boutons, les logos réagissent parfaitement à l'optimisation GIF. gif 16 couleurs 949 octets Le lissage est bien conservé. A qualité proche, le format JPEG génère un poids de fichier plus important pour une même image. jpg 83% 3.48 k

17 Les Palettes : GIF entrelacé : Le GIF «entrelacé» permet un affichage progressif de l'image parallèlement à son téléchargement dans la mémoire du navigateur. GIF transparent : De plus, le GIF permet de rendre transparente une couleur présente dans l'image. Néanmoins, il s'agit de La couleur transparente est toujours en opacité 0%! Cela oblige à ajouter un cache (couleur de détourage) autour de la forme détourée pour conserver le lissage du texte ou de la forme. GIF animé : Le GIF permet la réalisation d'images animées. Longtemps utilisé pour créer des bannières publicitaires, il semble être abandonné progressivement face à une utilisation croissante des animations FLASH

18 Les Palettes : Perception Palette qui conserve un maximum de couleurs auxquelles l'œil humain est sensible. Théoriquement la palette qui restituera le plus fidèlement les couleurs de l'image originale. Web : Palette qui indexe sur les 216 couleurs web sécurisées. Les couleurs web ont été définies à l'origine pour rendre l'affichage des couleurs compatible entre MAC et PC. Problème, certaines couleurs de l'image originale sont remplacées par des couleurs web. Il en résulte parfois de véritables pertes de couleurs. Sélective : Compromis entre Perception et Web... Adaptative : Palette qui favorise la conserve d'un nombre important de nuances de couleurs dans une partie du spectre RVB.

19 Le format PNG PNG 8 8 veut dire 8bits. Il gère jusqu à 256 couleurs, comme le GIF et utilise une compression sans perte de qualité. Il a la transparence d index et la transparence alpha. (Pas dans Photoshop, uniquement dans Fireworks) Utilisable comme le GIF pour des aplats de couleurs, des logos, il ne conviendra pas aux dégradés ni au photos PNG 8 dans Fireworks transparence alpha PNG 8 dans Photoshop pas de transparence alpha

20 Le format PNG Le PNG 24 ne gère pas la transparence, il n a que 3 canaux (RVB) Dans un PNG 32 il y a aussi le canal alpha, qui enregistre en mode 32 bits PNG 32 png dans Fireworks Photoshop ne le propose pas mais propose un PNG24 qui est en fait de PNG32, sans le dire. Firewoks propose les 3. PNG 32 est la plus haute qualité possible, mais aussi un poids en conséquence. Il gère la transparence alpha. png dans Photoshop

21 Transparence alpha et transparence index. La transparence d index ne permet de rendre transparente qu une seule couleur. La transparence alpha offre plusieurs niveaux de transparence qui donneront un effet beaucoup plus doux aux courbes et coins arrondis. En résumé pour la transparence alpha : Dans Photoshop : choisir PNG 24 (qui est en fait du PNG 32) Dans Fireworks : choisir PNG 8 s il n y a pas beaucoup de couleurs 832octets choisir PNG 32 s il a beaucoup de couleurs 21.68ko

22 Optimiser les images correspondant aux tranches Nous allons optimiser les tranches une par une, puis les exporter en une seule fois Afficher l aperçu 2 en1 (en haut et à gauche du document)

23 Sélectionner le calque web «logo» ou cliquer sur le logo dans la partie droite du document Afficher la fenêtre «optimisation» dans le menu «fenêtre»

24 Choisir dans le menu déroulant le format (ici png32, car il y a des dégradés et nous voulons une transparence alpha) Recommencer pour chaque tranche Transparence alpha avec beaucoup de couleurs : png32 Photos : jpg Peu de couleurs : gif

25 Firewoks mémorise les formats choisis pour chaque tranche Sélectionner toutes les tranches (dans la fenêtre des calques, par exemple) Puis aller dans le menu «fichier» «exporter»

26 Faisons d abord quelques règlages, car Fireworks va renommer nos tranches en y ajoutant des tirets etc Ne pa se préocupper du nom donné ici, par défaut le nom du fichier ouvert cliquer sur «options»

27 Aller dans l onglet «propre au document» Ici les ajouts faits par FW

28 Choisir «Aucune» ou supprimer les contenus de tout sauf «nom.doc» nom final de la tranche Cliquer sur «ok»

29 Nous revenons à cette fenêtre Défiler pour trouver

30 Fenêtre «exporter» avec images uniquement Ne pas se préocuper de ce nom de fichier qui n apparaîtra nulle part sur votre disque dur décocher «inclure les zones sans tranches» Choisir l endroit où vous souhaitez récupérer vos gif, jpg et png. Cliquer sur «exporter»

31 Aller dans le dossier de destination où vous avez enregistré vos images

32 Pour enregistrer une seule tranche, il est plus simple de faire un clic droit sur la tranche dans la partie gauche du document, après l avoir optimisée puis exporter la tranche sélectionnée

33 Pour garder le fichier avec les calques Web, enregistrer «sous» l extension native de Fireworks est «png» Pour pouvoir ouvrir le fichier avec tous les calques dans photoshop, «enregistrer sous» et choisissez dans la liste déroulante : photoshop

34 Création et optimisation des tranches depuis Photoshop Ouvrons notre fichier enregistré depuis Fireworks, en psd. Nous retrouvons tous les calques

35 Nous avons récupéré tous les calques dans un dossier Calque Pour faire des tranches dans Photoshop il faut aller dans les outils, sous l outil «recadrage» Il y a l outil «tranche» et l outil «sélection de tranche»

36 Comme dans Fireworks il y a deux façons de faire les tranches. Soit on veut récupérer le contenu d un calque. Il faut alors sélectionner le calque et aller dans le menu «calque» Choisir «Nouvelle tranche d après un calque» Photoshop crée automatiquement des tranches autour de celle que nous venons de créer. Elles sont numérotées. En gris les tranches faites par Photoshop, en bleu, celle que nous avons faite

37 Pour renommer la tranche qui vient d être créée : Double cliquer sur celle-ci. Si vous avez cliqué ailleurs entre temps, il suffit de choisir l outil «sélection de tranche» Nommer la tranche ici La tranche faite d après le calque ne peut être modifiée. Les paramètres sont grisés

38 Pour créer une tranche qui ne comprend qu un morceau de calque Choisir l outil «tranche» et dessiner sur l objet. Double cliquer sur la tranche pour la nommer. Nommer la tranche ici La tranche créée avec l outil tranche peut être modifiée dans cette fenêtre, ou en cliquant sur les bords de la tranche pour changer les dimensions, ou en utilisant les flèches du clavier pour la déplacer

39 Optimiser les tranches dans Photoshop Sans rien sélectionner, aller dans le menu «fichier» «exporter pour le Web et les périphériques», choisir 2 vignettes.

40 Optimiser les tranches dans Photoshop Choisir dans le menu déroulant le format choisi ici PNG24 pour la transparence. Rappel : il s agit en fait d un PNG32 poids de l image optimisée Recommencer pour chaque tranche

41 Sélectionner toutes les tranches en cliquant dessus avec l outil tranche et la touche «shift» poids de toues les tranches sélectionnées Mixte dit qu il y a plusieurs formats d images cliquer sur «enregistrer»

42 Choisir uniqument les images à exporter Choisir dans le menu déroulant Images Choisir dans le menu déroulant Paramètres Autre Cette dernière opération va nous permettre de choisir (comme dans FW) le nom de nos tranches sans ajouts

43 Changement du nom des tranches Choisir dans le menu déroulant Enregistrement des fichiers ne garder que nom de la tranche et ext nom final des tranches Cette opération va nous permettre de choisir (comme dans FW) le nom de nos tranches sans ajouts. Cliquer sur «ok»

44 Choisir le dossier de destination Ne pas se préocuper de ce nom de fichier Il n apparaîtra pas dans votre disque dur. Enregistrer Vous récupérer les gif, jpg et png dans votre dossier de destination Choisir dans le menu déroulant Tranches sélectionnées

45 Erreurs courantes Vous avez toutes les tranches dans votre dossier de destination vous n aviez pas sélectionné les tranches que vous vouliez récupérer ou vous avez oublié de cocher «tranches sélectionnées». Vos images s appellent dans Photoshop Les paramètres de sortie n ont pas été mémorisés. Retourner dans «paramètres» autres» «enregistrement des fichiers» avant d enregistrer. Vos images s appellent dans Fireworks Les paramètres de sortie n ont pas été mémorisés. Retourner dans «document HTML et Images», «options» «propre au document», changer les paramètres

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web 1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................

Plus en détail

REALISER UNE CARTE GEOGRAPHIQUE SUR MESURE

REALISER UNE CARTE GEOGRAPHIQUE SUR MESURE REALISER UNE CARTE GEOGRAPHIQUE SUR MESURE Que fait-on? On crée une carte géographique sur laquelle on n affiche que l information strictement nécessaire à la présentation d une oeuvre. Pourquoi le fait-on?

Plus en détail

Dessiner avec GIMP - Introduction des calques

Dessiner avec GIMP - Introduction des calques Dessiner avec GIMP - Introduction des calques Comme nous l avons signalé précédemment, GIMP comme PS sont des logiciels d infographie, nous allons donc créer notre première image. Ouvrir une feuille et

Plus en détail

Cliquez sur le menu Fichier / Nouveau, puis sur OK dans la fenêtre qui s'ouvre.

Cliquez sur le menu Fichier / Nouveau, puis sur OK dans la fenêtre qui s'ouvre. Photoshop vous permet de faire du montage photo. La superposition des éléments est gérée grâce aux calques. Il est crucial de bien comprendre leur fonctionnement car les calques sont l essence de Photoshop.

Plus en détail

Comment optimiser dans ImageReady?

Comment optimiser dans ImageReady? L optimisation des éléments graphiques et la création de la page Web 243 Comment optimiser dans ImageReady? Avec ImageReady, l optimisation d un fichier pour le Web est plus performante qu avec Photoshop.

Plus en détail

PHOTOSHOP CALQUES NOTIONS DE BASE

PHOTOSHOP CALQUES NOTIONS DE BASE Niveau : Que tout le monde devrait avoir COURS PHOTOSHOP PHOTOSHOP CALQUES NOTIONS DE BASE INTRODUCTION Nous avons vu, jusqu à maintenant, des corrections et traitements de base qui sont appliqués sur

Plus en détail

Créer un fichier PSD de travail avec plusieurs calques d images et un calque de texte

Créer un fichier PSD de travail avec plusieurs calques d images et un calque de texte Créer un fichier PSD de travail avec plusieurs calques d images et un calque de texte Sur une page Web de mon site consacré aux champignons de ma région, je veux afficher sur une page Amanites plusieurs

Plus en détail

Leçon N 5 PICASA Généralités

Leçon N 5 PICASA Généralités Leçon N 5 PICASA Généralités Avec cette leçon N 5, nous allons commencer l étude du traitement de vos photos avec le logiciel de GOOGLE, PICASA, que vous avez téléchargé dans la leçon N 3. 1 Présentation

Plus en détail

Nom :... Prénom :... Classe :... Techniques infographiques. InDesign

Nom :... Prénom :... Classe :... Techniques infographiques. InDesign Nom :... Prénom :... Classe :... Techniques infographiques InDesign 1 Insertion de blocs textes et images (bases) a Création d un nouveau document...p04 b Le plan de travail...p05 c Les outils de base...p06

Plus en détail

Utiliser le logiciel Photofiltre Sommaire

Utiliser le logiciel Photofiltre Sommaire Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner

Plus en détail

On peut aussi ne changer aucune de ces valeurs, et conserver le choix par défaut.

On peut aussi ne changer aucune de ces valeurs, et conserver le choix par défaut. Prise en main du logiciel Images actives Voici pas à pas la mise en œuvre du logiciel Images Actives sur l image d une miniature issue d un manuscrit du Moyen-Age, représentant l hommage d un vassal à

Plus en détail

Nous avons déjà étudié dans les leçons précédentes les masques de fusion qui permettent de rendre transparentes certaines parties des calques.

Nous avons déjà étudié dans les leçons précédentes les masques de fusion qui permettent de rendre transparentes certaines parties des calques. Photoshop propose au travers des calques différents types de masques qui permettent d'effectuer des détourages précis et de travailler avec des logiciels de mise en page. Nous avons déjà étudié dans les

Plus en détail

Photoshop propose de nombreux outils pour utiliser la couleur ou pour changer de mode colorimétrique.

Photoshop propose de nombreux outils pour utiliser la couleur ou pour changer de mode colorimétrique. Photoshop propose de nombreux outils pour utiliser la couleur ou pour changer de mode colorimétrique. Dans photoshop il est possible de définir 2 couleurs qui apparaissent dans la palette outils, la case

Plus en détail

Traitements de base d une image à l aide du logiciel PHOTOFILTRE

Traitements de base d une image à l aide du logiciel PHOTOFILTRE Traitements de base d une image à l aide du logiciel PHOTOFILTRE PhotoFiltre est un logiciel de retouche d images simple et intuitif, gratuit pour une utilisation privée, non commerciale ou éducative.

Plus en détail

Traitements de base d une image avec PHOTOFILTRE

Traitements de base d une image avec PHOTOFILTRE Traitements de base d une image avec PHOTOFILTRE Barre d outils Barre d outils complémentaire Nouveau Niveaux automatiques Contrastes automatiques Ouvrir Luminosité (-) Luminosité (+) Enregistrer Contraste

Plus en détail

RETOUCHER DES IMAGES

RETOUCHER DES IMAGES RETOUCHER DES IMAGES 1. Télécharger le logiciel gratuit Paint.net 2 2. Première approche du logiciel 3 2.1. Ouvrir et afficher une image 3 2.2. Choisir les couleurs 3 2.3. Utiliser les outils de dessin

Plus en détail

Adobe Indesign. L art de la mise en page CHAPITRE 2

Adobe Indesign. L art de la mise en page CHAPITRE 2 M2 Caweb 2014-2015 Enseignant : Boris Epp Adobe Indesign L art de la mise en page CHAPITRE 2 Sommaire 1. Les blocs a. Types de blocs b. Manipuler les blocs c. Interactions entre les blocs d. Appliquer

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7 M2 Caweb 2014-2015 Enseignant : Boris Epp Adobe Photoshop Bonnes pratiques pour une utilisation professionelle CHAPITRE 7 Sommaire 1. Les scripts a. Qu est-ce qu un script? b. La fenêtre script c. Créer

Plus en détail

DETOURAGE SUR GRAPHTEC GRACE A ILLUSTRATOR

DETOURAGE SUR GRAPHTEC GRACE A ILLUSTRATOR DETOURAGE SUR GRAPHTEC GRACE A ILLUSTRATOR Création d une matrice pour le Graphtec, Génération d un tracé sur Photoshop, Mise en page sur la matrice, Paramétrage du Plugin 1. Pour commencer, il faut créer

Plus en détail

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Vous allez créer avec cette leçon un album de photo avec le logiciel «Albelli livre photo». 2 La préparation Le travail le plus important pour

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Traitements de base d une image à l aide du logiciel PHOTOFILTRE

Traitements de base d une image à l aide du logiciel PHOTOFILTRE Traitements de base d une image à l aide du logiciel PHOTOFILTRE PhotoFiltre est un logiciel de retouche d images simple et intuitif, gratuit pour une utilisation privée, non commerciale ou éducative.

Plus en détail

GENERALITES ANALYSE ET ETUDES DE MARCHE MASTER 2 MARKETING ET COMMUNICATION COMMERCIALE E.MARTIN VERDIER 2012/2013. Photoshop

GENERALITES ANALYSE ET ETUDES DE MARCHE MASTER 2 MARKETING ET COMMUNICATION COMMERCIALE E.MARTIN VERDIER 2012/2013. Photoshop GENERALITES ANALYSE ET ETUDES DE MARCHE MASTER 2 MARKETING ET COMMUNICATION COMMERCIALE E.MARTIN VERDIER 2012/2013 Photoshop Présentation des différents outils On peut regrouper les outils de Photoshop

Plus en détail

II. Présentation de l'image

II. Présentation de l'image II. Présentation de l'image - Taille des images - La résolution des images - Notions d'image - Les modes colorimétriques - Les formats de travail LA TAILLE D UNE IMAGE Elle peut s exprimer soit en mm/cm

Plus en détail

SOMMAIRE 1. L espace de travail 2. La palette d outils 3.Les calques 4. Les différents modes de couleur 5. Les réglages de l image : luminosité,

SOMMAIRE 1. L espace de travail 2. La palette d outils 3.Les calques 4. Les différents modes de couleur 5. Les réglages de l image : luminosité, 1 SOMMAIRE 1. L espace de travail 2. La palette d outils 3.Les calques 4. Les différents modes de couleur 5. Les réglages de l image : luminosité, contraste 6. Modifier la taille de l image 7. Rotation

Plus en détail

TD M1205 - Infographie MMI1 - Les formats de fichiers image

TD M1205 - Infographie MMI1 - Les formats de fichiers image TD M1205 - Infographie MMI1 - Les formats de fichiers image 1. Préalable : extension des fichiers Dans les pages qui suivent il est question d extension des fichiers. Il est bien sûr préférable d afficher

Plus en détail

Déroulement de la formation

Déroulement de la formation Notes de cours Traitement de l image Marc Bernier Déroulement de la formation 1. Les différents formats d image. 2. Présentation de quelques applications Adobe Air. 3. Redimensionnement d une ou plusieurs

Plus en détail

Paint.NET Fiche n 3. Table des matières

Paint.NET Fiche n 3. Table des matières Paint.NET Fiche n 3 Table des matières Paint.NET Fiche n 3...1 1- Redimensionner...1 2- Recadrer...2 3- Enlever un élément gênant...2 4- Éclaircir une partie de l'image...3 5- Éclaircir une sélection complexe...3

Plus en détail

Les calques : techniques avancées

Les calques : techniques avancées Les calques : techniques avancées 9 Au cours de cette leçon, vous apprendrez à : importer un calque d un autre fichier ; créer un masque d écrêtage ; créer et modifier un calque de réglage ; employer les

Plus en détail

EDITER UNE IMAGE. L'imprimante. Deux technologies se partagent le marché éducatif

EDITER UNE IMAGE. L'imprimante. Deux technologies se partagent le marché éducatif EDITER UNE IMAGE L'imprimante Deux technologies se partagent le marché éducatif - les imprimantes à jet d'encre qui fonctionnent par projection de micro gouttes d'encre. Elles sont soit monochromes, soit

Plus en détail

Support de cours Dreamweaver CS5 les images. MC Benveniste

Support de cours Dreamweaver CS5 les images. MC Benveniste Support de cours Dreamweaver CS5 les images MC Benveniste 2013 Insertion de contenu > insertion d images image hors du dossier racine Si l image ne se trouve pas dans le site dans lequel vous travaillez

Plus en détail

Réalisez votre propre carte de vœux Éléctronique

Réalisez votre propre carte de vœux Éléctronique Les différentes possibilités d animer une carte de vœux Il existe plusieurs possibilités d animer une carte de vœux : - Une Vidéo : Vous pouvez créer une vidéo, un film simplement avec Windows Media Player.

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Editez vos photos en ligne, avec Pixlr

Editez vos photos en ligne, avec Pixlr Editez vos photos en ligne, avec Pixlr Pixlr, est un outil en ligne gratuit permettant de retoucher vos images et photos. Ici, pas besoin de logiciel à installer, un simple navigateur Internet connecté

Plus en détail

Mettre ses photos en ligne avec Picasa (Google)

Mettre ses photos en ligne avec Picasa (Google) Mettre ses photos en ligne avec Picasa (Google) Survol Organiser les photos efficacement dans Picasa Albums Diaporamas Montage photos Film Retouche photo Compression Partage Web 2 Qu est-ce que Picasa?

Plus en détail

Traitements de base d une image à l aide du logiciel PHOTOFILTRE

Traitements de base d une image à l aide du logiciel PHOTOFILTRE Traitements de base d une image à l aide du logiciel PHOTOFILTRE PhotoFiltre est un logiciel de retouche d images simple et intuitif, gratuit pour une utilisation privée, non commerciale ou éducative.

Plus en détail

Créer un dessin avec Word

Créer un dessin avec Word Créer un dessin avec Word Introduction Introduction Deux écoles, pour la création du dessin La réalisation du dessin Dessin à partir d une image Afficher les dessins Dans le menu, choisir : Outils Option

Plus en détail

Les images en informatique

Les images en informatique Partie 1 Les images en informatique Anne GEDDES 1 I. Les catégories d images Il existe 2 catégories d images : Les images vectorielles Les images bitmap (ou images raster) 2 A. Les images vectorielles

Plus en détail

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160 Sommaire Choisir son image... 2 Enregistrer son travail... 3 Créer les détails... 4 Supprimer une zone ou un détail... 6 Les commentaires... 6 Créer un lien hypertexte... 8 Appliquer un modèle... 8 Personnaliser

Plus en détail

PC & Windows Livret d exercices Laurent DUPRAT Pratiquons

PC & Windows Livret d exercices Laurent DUPRAT Pratiquons Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT Pratiquons ensemble PC & Windows Livret d exercices Laurent DUPRAT

Plus en détail

Leçon N 5 Traitement des photos 1 ère Partie

Leçon N 5 Traitement des photos 1 ère Partie Leçon N 5 Traitement des photos 1 ère Partie Nous allons entamer une série de leçons pour le traitement des photos. Pour cela nous utiliserons 4 logiciels principaux : PICASA PAINT - GIMP et PIC MONKEYS.

Plus en détail

APPRENDRE ET DEBUTER AVEC PHOTOSHOP // Tutorial Photoshop CS Difficulté : // Télécharger le tutorial au format PDF.

APPRENDRE ET DEBUTER AVEC PHOTOSHOP // Tutorial Photoshop CS Difficulté : // Télécharger le tutorial au format PDF. ACCUEIL CREDITS SERVICES FORUM LIENS ANNEXES NAVIGATION Crédits Services Portfolio Forum Articles Tutoriaux Partenariat Contact APPRENDRE ET DEBUTER AVEC PHOTOSHOP // Tutorial Photoshop CS Difficulté :

Plus en détail

FICHIERS ET DOSSIERS

FICHIERS ET DOSSIERS La différence entre fichier et dossier FICHIERS ET DOSSIERS La première notion à acquérir est la différence entre un dossier et un fichier Un dossier est une sorte de classeur dans lequel on range divers

Plus en détail

PHOTOFILTRE mode d emploi

PHOTOFILTRE mode d emploi I- Qu est ce que Photofiltre? PHOTOFILTRE mode d emploi C est un logiciel qui permet de retoucher ses photos : recadrer, améliorer la luminosité ou les contours de l image, détourer ou gommer un objet,

Plus en détail

Logiciel images-actives. Nouvelle version 1.0

Logiciel images-actives. Nouvelle version 1.0 Logiciel images-actives Nouvelle version 1.0 1. Importer une image Dans le panneau «Image», cliquez sur le bouton «Importer une image». Choisissez un fichier image au format jpeg, png, gif ou tiff. Ex

Plus en détail

Figure 6.3: Possibilité d exprimer son talent

Figure 6.3: Possibilité d exprimer son talent SÉANCE 6 Création de schémas 6.1 Présentation du logiciel «Draw» est un logiciel de dessin vectoriel et de PAO (Publication Assistée par Ordinateur). Avec ce logiciel, il vous est possible de créer divers

Plus en détail

Créer un diaporama photos

Créer un diaporama photos Créer un diaporama photos Diapo = diapositive, image positive sur support transparent, visible par projection sur un écran. Orama = vient du grec orama, ce que l'on voit, spectacle C'est un terme qui a

Plus en détail

Leçon N 4 Picasa 1 ère Partie

Leçon N 4 Picasa 1 ère Partie Leçon N 4 Picasa 1 ère Partie Nous allons maintenant revoir PICASA en détail, car c est le principal logiciel pour gérer et traiter ses photos et que vous serez amenés à utiliser assez souvent. PICASA

Plus en détail

Les images numériques

Les images numériques Les images numériques On traite les opérations sur les images numériques en plusieurs temps : 1. L acquisition d images Elles proviennent Du scanner De l appareil photo numérique D images envoyées par

Plus en détail

Vectorisation des images

Vectorisation des images Vectorisation des images Bienvenue dans CorelDRAW, programme de dessin vectoriel et de conception graphique complet destiné aux professionnels de l image. Dans ce didacticiel, vous apprendrez à vectoriser

Plus en détail

Tutoriel 2. 23 septembre 2013 Page 1

Tutoriel 2. 23 septembre 2013 Page 1 Tutoriel 2 Nous avons vu dans le tutoriel précédent plusieurs techniques de détourage. En mode masque de fusion Avec le filtre extraire Avec l outil lasso magnétique (dans le tutoriel les couches) Nous

Plus en détail

FICHE 10 : MODIFIER LES OBJETS

FICHE 10 : MODIFIER LES OBJETS 1. SELECTIONNER UN OBJET FICHE 10 : MODIFIER LES OBJETS Avant d'éditer un objet (zone de texte, tableau, image, objet ), vous devez le sélectionner en cliquant au milieu de l'objet. Des petits carrés noirs

Plus en détail

Initiation à Photoshop

Initiation à Photoshop 56 / 81 Scanner une image Un Scanner transforme une image papier en un fichier numérique Pour cela il faut définir: le type d image (couleur, niveau de gris ou texte) la résolution en dpi ou ppp (point

Plus en détail

Gthumb : gestionnaire d'images

Gthumb : gestionnaire d'images Plus qu un simple visualisateur d images, Gthumb permet quelques manipulations parfois inédites. Il a été créé pour l environnement GNOME (mais il va sans dire qu il fonctionne aussi fort bien sous d autres

Plus en détail

- JE ME PERFECTIONNE - 8 Janvier 2014 JE CREE MA CARTE DE VOEUX

- JE ME PERFECTIONNE - 8 Janvier 2014 JE CREE MA CARTE DE VOEUX - JE ME PERFECTIONNE - 8 Janvier 2014 JE CREE MA CARTE DE VOEUX Objectif de la séance VOTRE CARTE DE VŒUX Vous allez réaliser la carte de vœux de votre choix avec vos photos et vos illustrations personnelles.

Plus en détail

ANIMATION PAR LE COLORIAGE avec GIMP

ANIMATION PAR LE COLORIAGE avec GIMP ANIMATION PAR LE COLORIAGE avec GIMP Ouvrir le logiciel GIMP Aller chercher l'image qui va servir pour fabriquer l'animation. FICHIER / OUVRIR Dans la palette des calques la première image s appelle «Arrière-plan»

Plus en détail

1. Ouvrir une image. * 2. Faire le double d'une image. * 3. Rotation d'une image. * 4. Recadrer une photo. * 5. Redimensionner une image.

1. Ouvrir une image. * 2. Faire le double d'une image. * 3. Rotation d'une image. * 4. Recadrer une photo. * 5. Redimensionner une image. Sommaire Titre 1. Ouvrir une image. * 2. Faire le double d'une image. * 3. Rotation d'une image. * 4. Recadrer une photo. * 5. Redimensionner une image. ** 6. Imprimer une image. * 7. Copie d'écran. **

Plus en détail

génial petit logiciel gratuit bon à tout faire!

génial petit logiciel gratuit bon à tout faire! IrfanView: Meguerdit itchia ian G. passetice.f p a s p a s génial petit logiciel gratuit bon à tout faire! Irfanview est avant tout un «visualiseur d'images» c'est à dire que c'est lui qui affichera sur

Plus en détail

Mode d emploi du logiciel PhotoFiltre

Mode d emploi du logiciel PhotoFiltre Mode d emploi du logiciel PhotoFiltre Ce document a pour but de vous aider à redimensionner vos images. Confidentiel E-comouest 2009 Tous droits de reproduction interdits. 1. Installer PhotoFiltre 1. Installer

Plus en détail

Leçon N 13 Création d un album photo avec CEWE 2 ème partie

Leçon N 13 Création d un album photo avec CEWE 2 ème partie Leçon N 13 Création d un album photo avec CEWE 2 ème partie 7 Les éléments de réalisation. A gauche du poste de travail vous avez une fenêtre où vous pourrez faire apparaître les éléments qui vous permettrons

Plus en détail

EXEMPLE DE PAGE : FORMAT A4 (210X297)

EXEMPLE DE PAGE : FORMAT A4 (210X297) EXEMPLE DE PAGE : FORMAT A4 (210X297) 220 210 Filet noir format réel du document soit 210x297mm Zone Rose Marge intérieure de 5 milimètres ou zone d exclusion qui doit être, si possible vierge de tout

Plus en détail

Travailler avec Photofiltre

Travailler avec Photofiltre Travailler avec Photofiltre 1 - Isoler / Sélectionner une zone d'une image et définir sa forme Les sélections vectorielles Sélectionnez une forme en cliquant sur le bouton la représentant dans la palette

Plus en détail

Stage Photoshop, Illustrator... - publié le 20/02/2015

Stage Photoshop, Illustrator... - publié le 20/02/2015 Espace pédagogique de l'académie de Poitiers > Arts Appliqués > Tutoriels informatiques http://ww2.ac-poitiers.fr/arts_app/spip.php?article551 - Auteurs : Thierry Bigot - PELIZZARI Marianne Stage Photoshop,

Plus en détail

Vectoriser Coloriser

Vectoriser Coloriser Vectoriser Coloriser un dessin scanné Logiciels Requis : Adobe Photoshop CS2 (ou version supérieure) Adobe Illustrator CS2 (ou version supérieure) Tutorial réalisé par Thomas Loritte le 02/04/08 Introduction

Plus en détail

Confection d une carte de vœux animée

Confection d une carte de vœux animée 1) Création du fond d image Ouvrir Photofiltre a) Importation de l image i) S il s agit d une image provenant d Internet (1) Dans l explorateur (a) cliquer sur l image pour l agrandir (b) Faire un clic

Plus en détail

Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP

Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP I. CONTENU DU COURS THÉORIQUE ET PRATIQUE CHAPITREIV : CREATION DE BOUTONS Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP OBJECTIF PEDAGOGIQUE OPERATIONNEL : A la fin de cette leçon, l élève doit

Plus en détail

Cliquez sur suivant (image 1.4)

Cliquez sur suivant (image 1.4) Alain Lamaison 1 10 utilisations de Irfanview 3.33 Utilisation de Irfanview 3.3 Irfanview est un logiciel gratuit d'affichage et de traitement d'image simple, extrêmement rapide et efficace. Très léger

Plus en détail

A) - Différents logiciels pour retouche de photos... 2. B) - Logiciel PICASA... 2. C) - Logiciel XnView... 6

A) - Différents logiciels pour retouche de photos... 2. B) - Logiciel PICASA... 2. C) - Logiciel XnView... 6 Sommaire A) - Différents logiciels pour retouche de photos... 2 B) - Logiciel PICASA... 2 C) - Logiciel XnView... 6 1) - Renommer vos photos par lots... 7 2) - Redimensionnement des photos... 8 9_Retouches_Photos.doc

Plus en détail

Photofiltre : premières retouches d'images

Photofiltre : premières retouches d'images Photofiltre : premières retouches d'images Niveau débutant Niveau intermédiaire Niveau confirmé PhotoFiltre est un logiciel de retouche d images, libre et gratuit, très complet. Il permet d effectuer des

Plus en détail

DIGITAL PHOTO PROFESSIONAL CANON

DIGITAL PHOTO PROFESSIONAL CANON DIGITAL PHOTO PROFESSIONAL CANON Le logiciel Digital Photo Professional de chez Canon permet trois fonctions : 1 - Gérer ses photos (images RAW, TIF et JPG) 2 - Travailler ses photos (images RAW, TIF et

Plus en détail

Formation à l'utilisation de XnView

Formation à l'utilisation de XnView Formation à l'utilisation de XnView Clément Lièvre - octobre 2013 - novembre 2014 Comment trier ses photos 1. Dans la fenêtre de gauche, développer l'arborescence et créer un sous-dossier "sélection" dans

Plus en détail

Création d un Calendrier pas à pas.

Création d un Calendrier pas à pas. Bureautique Création d un Calendrier pas à pas. Liste du matériel à utiliser pour la création du calendrier : Word 2007. Une imprimante jet d encre. 1 feuille de carton en couleur. (Fond) 1 feuille de

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

Insertion d'images dans Dreamweaver

Insertion d'images dans Dreamweaver Insertion d'images dans Dreamweaver Ecole-Club Migros Alain Court 3 formats d images utilisables Gif (Graphics p Interchange Format) ) a été créé par CompuServe pour afficher plus rapidement les images

Plus en détail

Animation Shop PREAMBULE... 2 CONTRAINTE... 2 CREER UNE ANIMATION... 2 AJOUTER DES IMAGES... 3 ENREGISTRER UNE ANIMATION... 3

Animation Shop PREAMBULE... 2 CONTRAINTE... 2 CREER UNE ANIMATION... 2 AJOUTER DES IMAGES... 3 ENREGISTRER UNE ANIMATION... 3 Jasc Software Animation Shop Sommaire : PREAMBULE... 2 CONTRAINTE... 2 CREER UNE ANIMATION... 2 AJOUTER DES IMAGES... 3 ENREGISTRER UNE ANIMATION... 3 AJOUTER DE L'EFFET... 5 TRANSISSIONS D'IMAGE... 5

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Photo filtre 7, collage spécial, initiation à la gestion des calques.

Photo filtre 7, collage spécial, initiation à la gestion des calques. Photo filtre 7, collage spécial, initiation à la gestion des calques. A - Travail préparatoire Télécharger depuis le blog le dossier fournitures oiseaux exotiques: ICI. Affichez le dossier dans Photo Filtre

Plus en détail

Je débute avec. FastStone Image Viewer

Je débute avec. FastStone Image Viewer Je débute avec FastStone Image Viewer 1 FastStone Image Viewer Importer des photos Menus et Icônes Redresser les photos Sélectionner des photos Envoyer des photos par Email Corriger les yeux rouges 2 FastStone

Plus en détail

Menu. Modifier les images et les photos avec Picture Manager

Menu. Modifier les images et les photos avec Picture Manager Menu Modifier les images et les photos avec Picture Manager 1. Lancer le logiciel (page 2) 2. Sélectionner le dossier à afficher 3. Créer le raccourci vers les images 4. Découvrir le logiciel (page 3)

Plus en détail

L image numérique. Bitmap (ou matricielle) vectorielle

L image numérique. Bitmap (ou matricielle) vectorielle L image numérique Bitmap (ou matricielle) vectorielle L image Bitmap (ou matricielle) L image est considérée comme un rectangle constitué de points élémentaires appelés pixels. Elle permet la qualité photographique

Plus en détail

Traiter plusieurs photos en même temps

Traiter plusieurs photos en même temps Traiter plusieurs photos en même temps Vous souhaitez redimensionner, renommer, convertir, ajouter un filigrane, supprimer les informations EXIF ou faire pivoter plusieurs images en même temps? Vous avez

Plus en détail

Exposer correctement sa photo en contre jour

Exposer correctement sa photo en contre jour Exposer correctement sa photo en contre jour En intérieur comme en extérieur, les situations de contre-jour sont nombreuses. Si l'exposition reste gérée de manière automatique, le sujet ressortira souvent

Plus en détail

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

Plus en détail

Pour augmenter la taille du texte, plusieurs possibilités sont disponibles :

Pour augmenter la taille du texte, plusieurs possibilités sont disponibles : Agrandir le texte A l'ouverture de la page, l'écran contient l'ensemble de la fiche. Ceci vous permet de visualiser l'architecture de la fiche, mais peut rendre difficile la lecture du texte. Pour augmenter

Plus en détail

Formats de documents numériques 1. Format d images

Formats de documents numériques 1. Format d images Formats de documents numériques 1 Paramètres d une image Ecran Format d images Format : extention jpg, gif, png, tif Poids : 20 Ko, 100 Ko, 1 Mo Qualité : l image est-elle dégradée? L image est-elle zoomable?

Plus en détail

Feuille de style sous open office.

Feuille de style sous open office. Feuille de style sous open office. Une feuille de style permet de mettre en page un cours, un exposé ou un rapport en lui gardant la même présentation du début à la fin. Elle se programme avant de taper

Plus en détail

C'est idéal pour un carnet de voyage ou du «digital scrapbooking» par exemple.

C'est idéal pour un carnet de voyage ou du «digital scrapbooking» par exemple. Photoshop Fiche 16 - Montage de plusieurs photos Atelier réalisé sous Photoshop Elements 3.0 Voici une petite fiche très simple qui vous permettra d'effectuer un montage à l'aide de plusieurs photo. Il

Plus en détail

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des

Plus en détail

"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"

CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS "CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS" BONNES FEUILLES OFFERTES PAR MA-EDITIONS : "OPTIMISER" - pages à 1 OPTIMISER Partir d'un modèle existant très bien... Mais c'est encore mieux quand on

Plus en détail

Illustrator. version CS2 exercices

Illustrator. version CS2 exercices Illustrator version CS2 exercices L interface Introduction au vectoriel et au bitmap Les outils Les palettes La gestion de l affichage Les aides au dessin La sauvegarde d un travail Les scripts et les

Plus en détail

Leçon N 7 PICASA Autres fonctions

Leçon N 7 PICASA Autres fonctions Leçon N 7 PICASA Autres fonctions PICASA a de nombreuses autres applications pour la gestion de vos photos. 1 Les Albums Contrairement aux dossiers, les ALBUMS n existent que dans PICASA. Il n y a pas

Plus en détail

100% VISUEL. Photoshop CS4. Jérôme Lesage. mmaire.indd 1 15/04/2009 10:09:3

100% VISUEL. Photoshop CS4. Jérôme Lesage. mmaire.indd 1 15/04/2009 10:09:3 100% VISUEL Photoshop CS4 Jérôme Lesage mmaire.indd 1 15/04/2009 10:09:3 SOMMAIRE 1 - DÉCOUVRIR L'INTERFACE DE PHOTOSHOP CS4 1. Installer Photoshop p 8 2. Paramétrer Photoshop p 10 3. Mettre à jour Photoshop

Plus en détail

Utilisation de XnView

Utilisation de XnView http://www.rakforgeron.fr 27/02/2015 Utilisation de XnView Les photos d'actes généalogiques, les scans de documents réalisés par vous, ou vos saisies d'écran de documents téléchargés sur Internet, au-delà

Plus en détail

NCR-420-35 Hiver 2011

NCR-420-35 Hiver 2011 NCR-420-35 Hiver 2011 Enregistrer un fichier Mettre à jour un fichier Créer un nouveau fichier Ouvrir un fichier Imprimer un fichier Afficher les propriétés d un dossier/fichier Création de raccourcis

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

Initiation Publisher. Karine PEREIRA

Initiation Publisher. Karine PEREIRA BUREAU de WINDOWS Lorsque vous allumez votre ordinateur, vous arrivez directement sur le bureau de WINDOWS. Ce bureau, qui occupe la surface entière de l écran, est différent d un utilisateur à l autre,

Plus en détail

Photoshop Séquence 4 - Créer une image de taille personnalisée taille

Photoshop Séquence 4 - Créer une image de taille personnalisée taille cterrier.com 1/5 20/09/2006 Photoshop Séquence 4 - Créer une image de taille personnalisée taille Auteur : C. Terrier ; mailto:webmaster@cterrier.com ; http://www.cterrier.com Utilisation : Reproduction

Plus en détail

L espace de travail. Au cours de cette leçon, vous apprendrez à :

L espace de travail. Au cours de cette leçon, vous apprendrez à : L espace de travail 1 Au cours de cette leçon, vous apprendrez à : sélectionner des outils ; utiliser la barre d application et le panneau Contrôle ; gérer les fenêtres de document ; travailler avec les

Plus en détail