Photoshop pour le Webdesign

La problématique web nécessite de maitriser Photoshop pour appréhender les enjeux d'une bonne intégration des maquettes graphiques.

[vc_row type=”full_width_background” bg_position=”left top” bg_repeat=”no-repeat” parallax_bg_speed=”slow” scene_position=”center” text_color=”dark” text_align=”left” bg_type=”no_bg” bg_grad=”background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E3E3E3));background: -moz-linear-gradient(top,#E3E3E3 0%);background: -webkit-linear-gradient(top,#E3E3E3 0%);background: -o-linear-gradient(top,#E3E3E3 0%);background: -ms-linear-gradient(top,#E3E3E3 0%);background: linear-gradient(top,#E3E3E3 0%);” parallax_style=”vcpb-default” bg_image_repeat=”repeat” bg_image_size=”cover” bg_img_attach=”scroll” parallax_sense=”30″ animation_direction=”left-animation” animation_repeat=”repeat” viewport_vdo=”off” enable_controls=”off” bg_override=”0″ parallax_content_sense=”30″ fadeout_start_effect=”30″ overlay_pattern_opacity=”80″ overlay_pattern_attachment=”fixed” multi_color_overlay_opacity=”60″ seperator_type=”none_seperator” seperator_position=”top_seperator” seperator_shape_size=”40″ seperator_svg_height=”60″ seperator_shape_background=”#ffffff” seperator_shape_border=”none” seperator_shape_border_width=”1″ icon_type=”no_icon” icon_size=”32″ icon_style=”none” icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ img_width=”48″ ult_hide_row_large_screen=”off” ult_hide_row_desktop=”off” ult_hide_row_tablet=”off” ult_hide_row_tablet_small=”off” ult_hide_row_mobile=”off” ult_hide_row_mobile_large=”off”][vc_column width=”1/3″ animation=”fade-in” delay=”5000″ boxed=”true” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″]

[social_buttons full_width_icons=”true” hide_share_count=”true” nectar_love=”true” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” pinterest=”true”] [/vc_column][vc_column width=”2/3″ animation=”none” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″]
[tabbed_section][tab title=”Présentation” id=”1441984111968-9″ tab_id=”1448360087922-9″][vc_text_separator title=”Infos pratiques” title_align=”separator_align_center” color=”grey”][vc_row_inner][vc_column_inner width=”1/6″]
[bsf-info-box icon_type=”selector” icon=”Defaults-time” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”2 jours” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

soit 14 heures de formation

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-euro” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”680€ HT” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

par personne en inter

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-download-alt” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Le programme” read_more=”box” read_text=”Read More” hover_effect=”style_1″ pos=”top” link=”url:http%3A%2F%2Fwww.kaligram.com%2Fprogrammes-formations%2Fweb%2Fformation-photoshop-web.pdf|title:T%C3%A9l%C3%A9charger%20le%20programme%20de%20formation%20Photoshop%20pour%20le%20web|target:%20_blank”]

en version PDF

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-mobile” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Plus d’infos” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

au (03).20.54.09.06.

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-edit” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Inscrivez-vous” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top” icon_animation=”swing”]

avec le formulaire PDF

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]
[/vc_column_inner][/vc_row_inner][vc_text_separator title=”Descriptif” title_align=”separator_align_center” color=”grey”][vc_column_text]

Photoshop, au fil des versions, s’est doté d’outils exclusivement dédiés à la réalisation de prototypes (mockups) web. Désormais, la génération de grilles, l’optimisation des images pour les différentes plateformes, les plans de travail sont des outils incontournables pour le webdesigner.

[/vc_column_text]

[vc_row_inner][vc_column_inner width=”1/3″]
[text-with-icon icon_type=”font_icon” icon=”icon-rocket” color=”Accent-Color”]

Objectifs

Être en mesure de réaliser une maquette de site internet exploitable, disponible sur différentes plateformes.[/text-with-icon][/vc_column_inner][vc_column_inner width=”1/3″]

[text-with-icon icon_type=”font_icon” icon=”icon-certificate” color=”Accent-Color”]

Prérequis

Connaitre les fonctions élémentaires de Photoshop est nécessaire.[/text-with-icon][/vc_column_inner][vc_column_inner width=”1/3″]

[text-with-icon icon_type=”font_icon” icon=”icon-user” color=”Accent-Color”]

Public

Les webdesigners, les UX designers.[/text-with-icon][/vc_column_inner][/vc_row_inner]

[vc_text_separator title=”Formateur” title_align=”separator_align_center” color=”grey”][vc_row_inner][vc_column_inner width=”1/4″]
[indeed-my-team team=”web” limit=”1″ order_by=”name” order=”ASC” show=”name,photo,description,job,social_icon,website,email” theme=”theme_3″ color_scheme=”ee3733″ hide_small_icons=”0″ align_center=”0″ columns=”1″ slider_set=”0″ items_per_slide=”3″ slide_speed=”5000″ slide_pagination_speed=”500″ slide_opt=”bullets,nav_button,autoplay,responsive,loop” pagination_theme=”pag-theme1″ animation_in=”none” animation_out=”none” filter_set=”0″ filter_select_t=”small_text” filter_align=”left” layout_mode=”masonry” page_inside=”0″ inside_template=”IMT_PAGE_TEMPLATE” tm_custom_href=”0″][/vc_column_inner][/vc_row_inner][/tab][tab title=”Programme” id=”1441984112011-0″ tab_id=”1448360088421-8″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Le design web actuellement
  • Les différentes technologies:CSS, HTML5, Ajax
  • Créer pour le web : Quelques réflexes
  • Ressources utiles : grilles, éléments graphiques, polices
Préparer Photoshop pour le design web
  • L’espace de travail
  • Raccourcis utiles
  • Les préférences de Photoshop, gestion de la couleur
  • Les plans de travail
  • Les bibliothèques
  • La palette Device Preview
La couleur pour le design web
  • La commande Enregistrer pour le web
  • Les différents formats de fichiers : JPG, GIF, PNG et SVG
  • Recadrer, amélioration des images
  • Enregistrer des images Retina
  • La commande Générer
Les arrière-plans
  • Principes d’un arrière-plan dans le design web
  • Créer un arrière-plan, à répétition, entier
Les formes
  • Utiliser des formes vectorielles
  • Utilisation du contour et du fond

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

Les calques
  • Méthodologie d’utilisation des calques et des groupes
  • La fonction Rechercher
  • Convention de nommage
  • Les styles de calque
Une maquette graphique avec Photoshop
  • Taille, règles, repères et grilles
  • Les tranches utilisateur, les tranches depuis des calques
  • Optimiser et enregistrer les tranches
  • Astuces de découpes en fonction du balisage
  • Différencier contenu et mise en forme
  • Quelques extensions utiles
Images survolées et animations
  • Principes des images survolées (rollovers)
  • Les compositions de calques
  • Créer une animation pas à pas
  • Trajectoire avec la position, l’opacité et les effets
Automatisation
  • La commande Exportation
  • Processeur d’images
  • Variables et ensembles de données
Collaboration avec d’autres applications
  • Avec Dreamweaver (objets dynamiques)
  • Avec Edge Reflow
  • Avec Edge Inspect
  • Avec Illustrator
  • Avec Muse
  • Avec Fireworks

[/vc_column_text][/vc_column_inner][/vc_row_inner][/tab][tab title=”Dates” id=”1441984112034-2″ tab_id=”1448360088600-2″][vc_column_text]

novembre

26nov(nov 26)9 h 15 min28(nov 28)17 h 15 minIllustrator pour les Stylistes en novembre

[/vc_column_text][/tab][/tabbed_section][/vc_column][/vc_row]

X