Les jolies pages du web, les plus beaux sites du web
classement des plus beaux sitesles plus beaux sites du webAccueil joliespagesRecherche de sitesforum joliespagesNewsletter Joliespagescontact joliespagesles plus beaux sites du webclassement des plus beaux sites
classement des plus beaux sites
Google
 
Recherche sur le Web Recherche sur Joliespages
classement des plus beaux sites
logo joliespages
Joliespages
joliespages
Annuaire de joliespagesAnnuaire par catégories
moteur de rechercheMoteur de recherche
Les derniers sites inscrits sur Joliespages - www.joliespages.comLes derniers inscrits
Les premiers sites inscrits sur JoliespagesLes premiers inscrits
Les concepteurs qui ont référencés le plus de créations sur JoliespagesLes concepteurs
Les sites qui ont un nouveau look sur JoliespagesLes relookages
Tous les sites aux couleurs dominantes bleues référencés sur joliespages.comLes couleurs BLEUES
Tous les sites aux couleurs dominantes vertes  sur joliespages.comLes couleurs VERTES
Tous les sites aux couleurs dominantes marronLes couleurs ROUGES
Tous les sites aux couleurs dominantes marronLes couleurs MARRON
Tous les sites aux couleurs dominantes rosesLes couleurs ROSES
Tous les sites aux couleurs dominantes jaunesLes couleurs JAUNES
Tous les sites aux couleurs dominantes orange référencés sur joliespagesLes couleurs ORANGE
Tous les sites aux couleurs dominantes violettes sur joliespages.comLes couleurs VIOLETTES
Tous les sites aux couleurs dominantes blanches sur Joliespages.comLes couleurs BLANCHES
Tous les sites aux couleurs dominantes noires sur Joliespages.comLes couleurs NOIRES
Tous les sites aux couleurs dominantes grisesLes couleurs GRISES
Tous les sites aux couleurs dominantes multiples sur JoliespagesLes couleurs MULTIPLES
couleurs multiplesSite en Français  Site en Anglais  Site en Allemand  Site en Espangol  Site en Italien  Autre  

Membres
Accès membresAccès membres
Devenir membreProposer un site

Photoshop 6
copyBannière animée
copyChanger les couleurs
copyCopyright sur photo
trancheDécoupe des images
fusionFusion des calques liés
gommer par dégradéGommer par dégradé
Gommer sans abîmerGommer sans abîmer
associer deux photos dans une formePhotos dans un cercle
associer deux photos dans une formeScripts
les plus beaux sites web
Tuto
Les tutoriaux référencés sur Joliespages pour lPhotoshop/ImageReady
Les tutoriaux Illustrator référencés sur JoliespagesIllustrator
Les tutoriaux référencés sur Joliespages pour lInDesign
Les tutoriaux référencés sur Joliespages pour lFlash
Les tutoriaux référencés sur Joliespages pour lAfter effects
Les tutoriaux référencés sur Joliespages pour lThe GIMP
Les tutoriaux référencés sur Joliespages pour lPainter
Les tutoriaux ArtRage référencés sur Joliespages ArtRage
Les tutoriaux 3DS Max référencés sur Joliespages3DS Max
Les tutoriaux Php et MySQL qui sont référencés sur Joliespages.Php - MySQL
Les tutoriaux Illustrator qui sont référencés sur Joliespages.CSS
Les tutoriaux Illustrator qui sont référencés sur Joliespages.HTML
Javascript
Tutoriaux divers

tutoriauxRecherche tutoriaux
tutoriauxProposer un tutorial

Dossiers
cahier des chargesCahier des charges
copyrightCopyright
référencementRéférencement
balises METABalises <META>
iso 8859-1Norme ISO 8859-1

Astuces
codes couleursAvoir les codes RVB
Mettre une photo ou image dans une celluleCellules papier peint
infobulle imageInfobulle sur image
quiz phpPetit quiz en PHP
redirection de pageRedirection de Page
redirection de pageVisionneuse

Joliespages
Forum de joliespagesForum
Newsletter de joliespagesNewsletter
ContactContact
Faire un lienFaire un lien
Recommander ce siteRecommander ce site

Partenaires
partenairesTous les partenaires
partenairesGraphilab
partenairesWeb-Arts-Gallery
partenairesAilleur Production
partenairesELODIE FREGE
partenairesMyphphost.net
partenairesAtoutsweb
partenairesTabs 4 acoustic
partenairesScience-et-vie.net
partenairesCreation-Flash
partenairesGT Liens
partenairesNotoOn.com
partenairesTurquie Aras
partenairesAnnuaire des Gites
partenairesPicture & co
partenairesCreation-Flash
partenairesreferencement-fr
partenairesMa Maison de A a Z
partenairesLes Entreprenautes
partenairesMincoin
partenairesEgao
partenairesBoobup
partenaireshorslimite.net
partenairesImplisite
partenairesEspricrea
partenairesPsdmag
partenairesHorslimite.net
partenairesJN-Forum
menu

photoshop  
trancheLes tranches dans ImageReady
La charte graphique d'un site étant défini, nous avons besoin de faire les découpes des images pour la construction de nos pages. Pour cela nous allons nous servir d'ImageReady, le logiciel intégré à photoshop. Il est conçu pour faire les découpes des images, des boutons, des gif animés...


 Faire les découpes des images d'un fichier psd
Vous pouvez télécharger le fichier photoshop nature.zip 995 Ko.

Nous sommes donc actuellement sur photoshop et nous voulons aller sur ImageReady, pour cela vous devez cliquer sur la dernière icône de la barre d'outil : passer à ImageReady go ImageReady. Notre fichier se transfert directement sur ImageReady.

ImageReady est présenté de façon identique à photoshop, la seule différence est due à quelques outils et rubrique dans les menus en moins.

tranches


Nous allons pour commencer prendre les outils "tranches" en main.

Cliquez sur l'outil tranche dans la barre des outils et vous obtenez un menu avec les deux outils "tranches", puis sans relâcher allez jusqu'à la bande blanche avec la flèche qui pointe vers le bas.

 

tranches


Vous obtenez une fenêtre avec les deux outils à votre disposition.

tranchetranche
Le premier : outil "tranche" nous servira à délimiter nos découpes.
Le deuxième : l'outil "sélection de tranche" nous servira à modifier les dimensions des découpes, à les déplacer et surtout à les sélectionner pour les nommer.

Prendre l'outil "tranche" tranche et faire vos découpes. Utilisez le zoom pour être le plus précis possible : la touche CTRL et la touche + du clavier pour agrandir, CTRL et - pour le diminuer.

[1] - Prendre l'outil "sélection de tranche" tranche
[2] - sélectionner une tranche, elle devient jaune (la flèche bleue vous la montre dans la "Fenêtre tranche") : dans notre exemple l'image "accueil".
[3] - Dans la "Fenêtre tranche", nommer l'image en face de nom : accueil.

Si cette fenêtre n'apparaît pas sur votre écran : Menu fenêtre > Afficher tranche.

[4] - dans la fenêtre de l'image cliquer sur 2 vignettes, cela vous permettra de voir les deux effets : l'image originale et celle qui sera sauvegardée.
[5] - "Fenêtre optimiser", choisissez l'extension de l'image : gif pour ce qui est des images et fonds transparents, et jpg pour les photos. Dans cette même fenêtre vous pourrez également choisir la compression, c'est à dire que selon l'extension, vous pourrez l'optimiser un maximum en gardant une bonne qualité, jpg : régler la qualité et gif les couleurs.
[6] - En bas de chaque image (originale et la sortie), vous pourrez voir le poids de chaque tranche sélectionnée.

Enfin pour les sauvegarder :

Menu Fichier > "Enregistrer une copie optimisée sous".

Dans fenêtre "Enregistrer une copie optimisée sous"
- choisissez votre répertoire de sauvegarde, ImageReady va créer dedans une page html ainsi qu'un répertoire images avec les découpes.
- dans type > sélectionner HTML et images (*.html).

Vous pourrez voir vos découpes dans votre répertoire en passant par l'Explorateur Windows.

  Votre avis
Pour voter cliquer juste devant votre choix :

Découper des images d'un fichier psd par joliespages
Comment avez-vous trouvé ce tutorial ?
Facile
Moyen
Difficile

Si vous avez des questions ou que vous vouliez discuter de Photoshop utiliser le forum de joliespages dans le coin Photoshop :).

Copyright 2002-2010© www.joliespages.com       Cnil : 833650             webmaster

Mise à jour régulière - 2 connectés