Photoshop – Pour le web et les terminaux mobiles

Photoshop–Pourlewebetlesterminauxmobiles
Al’issuedecestagelesparticipantsserontenmesurede:Prépareretdéclinerlesimagespourlesécrans:sitesWebetterminauxmobiles,
tablettesiPadetAndroid,smartphonesiPhoneetAndroid-Corrigerlesphotosetlesintégrerdansdesphotomontages-Créerdesmaquettes
depagesWebexploitablespardesdéveloppeurs
Référence:AFDPHO-ECR
Duréetotale:20h
-6hene-learning
-2jour(s)(13h)enprésentiel
-1hdepassagedecertificationACE
Modalitésetmoyenspédagogiques:
• e-learning+Présentielensalledeformation
• Caspratiques
• Synthèse
Prérequis:
Publicconcerné:
Avoirunetrèsbonneconnaissanceduwebetdesbaseseninfographie.
Photographes,maquettistes,infographistes,webmasters,techniciensdel’audiovisueletresponsablesde
communication.CeparcoursdeformationrespecteleréférentielM2iFormationetestaccompagnéd’unmoduleelearning.
Cetteformation:
•
•
estaniméeparunconsultant-formateurdontlescompétencestechniques,professionnellesetpédagogiquesontétévalidéespardes
diplômeset/outestéesetapprouvéesparl’éditeuret/ouparM2iFormation
bénéficied’unsuividesonexécutionparunefeuilledeprésenceémargéepardemi-journéeparlesstagiairesetleformateur.
PROGRAMME
INTRODUCTIONDELAFORMATIONAPHOTOSHOPCC
POURLEWEB
PrésentationdelaformationPhotoshopCCpourleWeb
Rappelduprincipebitmap/vectoriel
Lesformatsd’'imagesàdestinationduWebetdesmobiles
LESRACCOURCISUTILESDEPHOTOSHOPCC
Gestiondel'interface(palettes,règles,pleinécran,quitteruntraitement
encours)
SauvegardesetexportsdansPhotoshopCC
Personnalisationdel'espacedetravail
Manipulationdescalques(création,suppression,sélection,fusion,
groupes)
Outilsdesélection,déplacementettransformation
OutilsdetracéPlumeetconversionensélection
Créationdeformesvectorielles,éditiondeformes
Outildedécoupe,derecadrage
Créermasquesdefusionàpartird'unesélection
Outiltexte,pixellisation,conversionensélection
LESREGLAGESELEMENTAIRESDEPHOTOSHOP
ExporterauformatSVGvialemoteurd'Illustrator
CREERPLUSIEURSVERSIONSD’UNE COMPOSITION
PHOTOSHOPCC
Conceptiond'unprojetmulti-écran(impression,web,tablette,bannière)
Créationd’undocumentPhotoshopMaster(dimensions,résolution,ratio,
mode)
Gestiondesobjetsdynamiques
Exporterunposter30x40cmpourl'impression
ExporteruneinterfaceWebde980x1000pixels
ExporteruneinterfaceiPadde1024x768pixels
Exporterunebannièrede768x90pixels
REALISERUNGIFANIME
OrganiserledocumentpouruneanimationGif
Animeràl’aidedelafenêtredeMontage
Exporteretoptimiserl’animationGifpourunebannièreWeb
REALISERUNROLLOVERCSS
OrganiserledocumentpourunrollOverCSS
Exporterlesimagesdurollover
LesniveauxdansPhotoshopCC
Teinte,luminositéetsaturationdansPhotoshopCC
LescourbesdansPhotoshopCC
LesbalancesdecouleursdansPhotoshopCC
LenoiretblancnuancédansPhotoshopCC
GénérerlecodeCSSdurolloveretstructurerlelienenHTML
Adapterl’affichageausurvol,auclicetàl'étatvisité,àl'aidedespseudos
classesCSS
Localiserlestyledulienàl'aided'uneclassecontextuelle
EXPORTERINDIVIDUELLEMENTLESIMAGESBITMAPS
POURLEWEB
IntroductionauxanimationsSpritesheet
Configurationetexportationd'uneanimationSpriteSheet
IntégrationCSSetjQueryd’uneanimationSpriteSheetavecAnimate
REALISERUNSPRITESHEET(ANIMATIONPELLICULEE)
Présentationdelafenêtred'enregistrementpourleWeb
ExporterenJpegdepuisPhotoshopCC
ExporterenPNGdepuisPhotoshopCC
ExporterenGifdepuisPhotoshopCC
EXPORTERUNSVGDEPUIS PHOTOSHOPCC
ExporterunfichiervectorielàpartirdePhotoshopCC
www.m2iformation.fr
EXPORTERUNEPAGEXHTMLSTATIQUEAL’AIDEDE
L’OUTILTRANCHES
PréparerlacompositionPhotoshopCCpourunedécoupeentranches
Définirleszonesdedécoupe
Echantillonnerleszonesdedécoupe
Configurerl'exportHTML
N°Azur:0810007689
[email protected]
Mettreàjourunedécoupe
Avantagesetlimitesdel'outilTranches
REALISERUNECOMPOSITIONHTML5SEMANTIQUEA
PARTIRDEPHOTOSHOP
Analysedelastructured'‘unepageHTML5
OrganiserundocumentPhotoshoppourunexportHTML5àl'aidede
différentsconteneurs
IdentifierlesspécificitésHTML5dechaquetypedeconteneurPhotoshop
dansDreamweaver
ExporterunemaquettedesiteHTML5depremierniveau,dePhotoshop
versDreamweaver
IntégrerlesélémentsdepremierniveaudansDreamweaver(header,
main,footer)
Gérerlepositionnementcontextuelducontenuimbriqué,dansPhotoshop
(section,article,nav,aside)
IntégrerlesélémentsimbriquésdansDreamweaver(section,article,nav,
aside)
GERERLESSTYLESCSSDEFORMESPRIMITIVESAVEC
PHOTOSHOP
Identifierlesstylesdeformeprisencharge
AjouterdesstylesetdeseffetsàdesformesprimitivesdansPhotoshopCC
Placerlesstylesd'uneformesurunélémentHTML5isolédans
Dreamweaver
Placerlesstylesd’uneformesurunélémentdelistepourunmenudans
Dreamweaver
GERERLESSTYLESCSSDETEXTESEDITABLESAVEC
PHOTOSHOP
Identifierlesstylesdetextesprisencharge
CréerunnuancierdecouleurspourPhotoshopCC,àpartird’unefeuillede
stylesCSSexterne
Rationnaliserlamiseenformeàl'aidedesstylesdeparagrapheetde
caractèresdansPhotoshopObtenirlecodeCSSdesstylesdetextesetles
appliquerdansDreamweaver
EXPORTERLESCALQUESPARLOTAL’AIDEDE
L’EXTENSIONPHOTOSHOPGENERATOR
ConventionsdenommagedesfichiersimagepourunexportGif,Jpeget
PNG
OrganiserledocumentPhotoshopCCpourunexportviaGenerator
Organiserlesfichierspourunegestiondynamiquedesimagesausein
d’'unepageHTML
OrganiserlesfichierspourunegestiondynamiqueauseindeEdge
Animate
GENERERAUTOMATIQUEMENTLESICONESD’UNE
APPLICATIONMOBILE
Identificationdesformatsd'imagespourapplicationsmobiles
ConfigurationdudocumentPhotoshopCCpourunexportautomatisé
d’'icônesd'applicationsmobiles
EXPORTERUNECOMPOSITIONPHOTOSHOPVERSLES
AUTRESLOGICIELSADOBE
PositionnementdeslogicielscompatiblesHTML5,delasuiteAdobe
ExporterversEdgeReflow
ExporterversEdgeAnimate
ExporterenHTMLpourunprojetdigitalversInDesignetDPS
ExporterennatifpourunprojetdigitalversInDesignetAfterEffects
ExporterversFlashPropourunexportHTML5Canvas
ExporterversMuse
REALISERUNGIFVIDEO
Rappeldescontraintesdelavidéoetdel'intérêtduformatGifvidéo
Convertiruneséquencevidéoensuited'images,dansPhotoshopCC
ExporteretoptimiserlavidéoauformatGif
REALISERUNMONTAGEVIDEOPOURLEWEBAVEC
PHOTOSHOP
Organiserlemontagevidéoetl'‘animationdepropriétésdecalquesdans
undocumentPhotoshopCC
ExporterlavidéopourleWeb
CONCLUSION
PhotoshopCCaucentredelacréationnumérique
www.m2iformation.fr
N°Azur:0810007689
[email protected]