Voici donc le deuxième avec un effet que j’affectionne particulièrement.

Préparation

Admettons que je souhaite ajouter une “top bar” dans mon design pour y placer certains liens/boutons importants.

A l’aide de l’outil forme (raccourci U), je fais dépasser légèrement cette dernière sur les cotés et en haut.

Afin d’y apporter une touche design web 2.0, je vais appliquer 3 effets.

1 – D’abord un dégradé très fin.

2 – Ensuite une ombre portée légère.

3 – Et enfin un contour dégradé

Pour ce contour dégradé, j’utilise deux particularités : l’opacité des curseurs et un style “Réfléchi”

Sans les effets

Cliquez sur la première image et naviguez entre les deux images dans le slideshow pour bien comparer

Avec les effets

Maintenant à vous de jouer en déclinant et en customisant cet effet sur votre footer par exemple !

Autre article : Effet web 2.0 : Eclairez vos backgrounds

1. Introduction

Définissons d’abord ce que nous entendons par blog :

Le mot blog est la contraction de deux mots web et log (journal-carnet). Un blog est un site Internet dont la fonction principale est de fournir des informations sur un ou plusieurs thèmes. Ces informations sont organisées sous forme de “billets” ou “articles” périodiques des plus récents aux plus anciens, et sont caractérisées par un aspect communautaire fort.

• Présence de boutons de partages sur les réseaux sociaux (facebook, twitter, etc..),
• possibilité de réagir en commentant les articles,
• suivre la parution des nouveaux articles en utilisant les flux RSS.

On pourrait aisément les comparer aux magazines de la presse papier à la différence près que leurs consultations sont gratuites et la parution des articles se fait en temps réel.

Les flux RSS permettent aux utilisateurs de s’abonner afin de regrouper les gros titres des différents blogs qu’ils suivent et de les afficher dans un journal commun alimenté en temps réel (exemple Google Reader).

Les blogs n’ont pas toujours eu la côte, assimilés à tord par certains à du voyeurisme et de l’exhibitionnisme car beaucoup les utilisaient comme un journal intime. Aujourd’hui, les blogs sont presque incontournables dans ce qu’on appelle le hub (zone d’influence médiatique).

Intéressons nous quelques minutes à une infographie toute récente de l’excellent site nowhereelse.fr qui publie pour la 4ème année une enquête révélant quelques tendances de la blogosphère :

Difficile de passer à coté des blogs quand on sait que BlogPulse annonce plus de 82 000 blogs créés tous les jours (source : blogpulse.com)

Alors est-ce utile d’en ajouter un sur la pile ?

Est-ce vraiment utile pour mon activité ?

Questions auxquelles bon nombre de créateurs d’entreprises doivent répondre à un moment ou à un autre.

2. Différences entre un blog (éditorial) et un site société (institutionnel/Commercial)

2.1 Différences fondamentales

De nos jours, nous voyons de plus en plus de sites internet dit “classiques” et les blogs converger.

Certaines sociétés ne se contentent parfois que d’un site de type blog qu’ils agrémentent de pages “secondaires” reprenant les éléments que nous trouverions dans un site internet vitrine (présentation de la société, offres, etc.).

Mais il existe tout de même de grandes différences pour l’internaute entre un blog et un site internet vitrine, et il n’abordera pas de la même manière l’un ou l’autre.

Un site web peut ressembler autant qu’il peut à un blog (graphisme, construction), mais il faut garder en tête qu’un blog est destiné à proposer une activité régulière et permanente, alors que la plupart des sites internet, même s’ils peuvent être mis à jour souvent, présentent dans la plupart des cas une information à caractère commercial et figée dans le temps.

Je pense notamment à la description des produits ou services proposés ou une description de l’activité de l’entreprise.

2.2 Les deux grands types de blogs “professionnels”

Blog d’entreprise

Un blog d’entreprise peut avoir plusieurs formes.

Il peut être public et représente dans ce cas un espace moins stricte et moins officiel que le site internet de l’entreprise et permet une communication en temps réel avec le client.

Il peut être utile pour informer par exemple d’une anomalie, mais aussi pour communiquer autour de l’activité de l’entreprise.

Un blog d’entreprise peut aussi être privé (interne) et permet de faciliter le partage d’informations au sein de l’entreprise. Un “Wiki” est par exemple un type de blog particulier destiné à la documentation.

Mais il peut aussi avoir un caractère informatif et communiquer des informations “privées” comme des statistiques ou des résultats financiers.

Blog de connaissance

Il s’agit d’un type de blog qui rejoint le but premier de ce type de plate-forme. A savoir, divulguer de l’information structurée et régulière.

Ce type de blog est opposable à un blog “perso” car il ne traite pas du tout de la vie privée de l’entreprise ou d’une personne, mais propose de partager des connaissances sur des sujets particuliers et ciblés.

Les blogs de partage de connaissances ont souvent un aspect très pédagogique. Certains articles peuvent avoir la forme d’une synthèse, tandis que d’autres se présenteront par exemple sous la forme de didacticiels et donneront une information plus direct et plus “pratique” (non péjoratif).

2.3 Avantages d’un blog

Chaque type de blog présente des avantages.

Le blog d’entreprise public, à condition de proposer une information régulière et pertinente, démontre à vos clients une activité soutenue et permanente au sein de l’entreprise. Il aide à construire une image “dynamique” de votre société et peut aider le client à se sentir en confiance.

Il peut permettre également de fidéliser le client qui appréciera de suivre les événements autour de votre activité et se sentira plus proche de vous.

Le blog de connaissance, quant à lui, demande un travail beaucoup plus soigné et de qualité. Il vous permettra de prouver votre valeur et vos compétences.

L’impact peut être très fort, et si vos articles ont du succès, les lecteurs en parleront autour d’eux, dans leurs propres “réseaux sociaux”, et un effet boule de neige peut très vite apparaître.

J’ai déjà un site Internet pourquoi aurais-je besoin d’un deuxième ?

La plus grande différence provient certainement de l’aspect éditorial mais également du coté communautaire qu’il implique.

Votre site internet à un but précis, décrire votre activité, vos produits ou vos services pour générer du business, il est essentiellement centré sur vous et s’organise autour de pages à thèmes (Qui sommes nous ? – Notre activité etc…).

Sa réalisation est beaucoup plus longue mais vous pouvez vous permettre beaucoup plus de liberté.

Globalement, la création d’un blog implique une ouverture sur le monde plus poussée, votre but sera de vous forger une e-reputation. C’est à dire améliorer votre image de marque auprès de votre clientèle, mais également auprès d’autres professionnels et parfois même vos propres concurrents.

En créant votre blog vous mettez un pied dans l’aspect communautaire qui peut entourer votre activité et générez ainsi un intérêt particulier. L’impact sur votre activité commerciale peut-être très important.

Le blog peut être un moyen de vous faire repérer (vous pourriez être surpris de savoir qui lis vos articles), et génère un trafic permanent autour de votre entreprise.

Et ne vous dites pas, “ha mon activité n’intéresse personne, les blogs c’est vraiment pas fait pour moi”. Vous seriez aussi surpris par certains thèmes qu’on peut trouver sur de nombreux blogs. Certains blogs ont du succès parce qu’ils abordent justement des thèmes originaux et rares sur la toile.

Enfin, maintenir un blog peut enrichir votre propre expérience. Il vous apprendra à vous exprimer autour d’un sujet précis et vous obligera à effectuer des recherches qui compléteront vos propres connaissances. Il apporte aussi un intérêt nouveau dans le “travail” et écrire des articles peut devenir une véritable passion.

2.3 “Inconvénients” d’un blog

Évidemment votre blog vous demandera une attention soutenue, parfois quotidienne, contrairement à votre site internet.

• Rédiger des articles,
• répondre et modérer les commentaires,
• suivre ses visites et diffuser ses billets;

Autant de nouvelles tâches à ajouter à la gestion de votre site “vitrine” et/ou e-commerce.

Toutes ces nouvelles “contraintes” sont d’ailleurs venues compléter les domaines d’expertise d’un mêtier très à la mode : Le community management. Mais c’est encore un autre sujet…

Retenez simplement qu’il ne suffit pas de se dire “Ok, on fait un blog”.

La contrainte peut parfois être très pesante et maintenir une telle plate-forme vous demandera un temps considérable. L’idée est de considérer que le temps passé à gérer votre blog est aussi précieux que pour tout autre activité au sein de l’entreprise.

2.4 Un blog c’est bien, mais attention..

La mise en place d’un blog doit entrer dans une stratégie de communication globale (référencement) et nécessite une attention particulière.

Les effets peuvent être autant négatifs que positifs.

Créer un blog qui n’est jamais mis à jour ou très rarement, ou sur lequel les articles sont baclés “parce qu’il faut bien le faire”, fautes d’orthographes et j’en passe.

Sauf si votre stratégie est de décridibiliser votre entreprise, ce dont je doute (sait-on jamais, après rachat d’un concurrent peut-être ?), avoir un blog “parce qu’il en faut un” est une solution à écarter.

Les effets sur votre entreprise peuvent être très indésirables, et tout ceci peut entâcher gravement votre image. Rappelez-vous qu’il est difficile d’effacer les traces de son passage sur internet.

Un blog “professionnel” ne peut pas être géré au hasard. Il doit être de qualité et tout doit être mis en oeuvre pour proposer un contenu régulier.

Le contenu doit être étudié et contrôlé, il ne s’agit pas d’écrire un article sur la beuverie (avec photos :p) lors du pot de départ d’un collègue de travail. L’écriture, même pour des sujets précis, nécessite un travail d’imagination et de rédaction dont le but est d’accrocher l’intérêt des lecteurs (sans oublier de vous faire plaisir).

3. Comment faire un blog (aspect technique)

En gros, est-ce compliqué ? Comment ça marche et quelles sont les solutions existantes pour y parvenir ?

Généralement la réalisation d’un site Internet “classique” demande plus de travail que la mise en ligne d’un blog.

En effet il existe deux solutions pour créer votre blog :

• L’utilisation de CMS spécifiques aux blogs – Développement interne ou prestataire
• Création en ligne par des services spécialisés – Le mode hébergé

Mode hébergé

Avantages :

• Prêt à l’emploi
• Rapide
• Facile

Inconvénients :

• Publicité
• Rigidité du graphisme
• Dépendance du service
• Abonnement mensuel

Quelques exemples de services en ligne : blogspot (blogger), Skyblog, Myspace, over-blog, et il en existe beaucoup d’autres !

Développement interne ou prestataire

Avantages :

• Souplesse
• Possibilité d’habiller le site comme on veut
• Le site vous appartient

Inconvénients :

• Compétences requises
• Un peu plus long à mettre en place
• Hébergement + Réservation d’un nom de domaine obligatoire
• Plus chère à l’achat

Exemples de CMS pour blog : WordPress, Drupal, dotclear, spip, et beaucoup d’autres encore !

Le plus connu et dont vous avez certainement déjà entendu parlé est WordPress.

A l’heure actuelle, il est a peu près possible d’obtenir n’importe quel design pour votre blog. Cependant il est nécessaire de respecter certaines “conventions” admises, implicites et historiques.

Par exemple la position du logo dans la page, la structure en 2 colonnes, l’ordre d’apparition des billets du plus récent au plus ancien.

Mais si vous voulez jouer dans l’originalité la plus totale, c’est aussi possible !

Quelques articles intéressant sur le sujet

Et ainsi naquirent les premiers blogs – Article de Marie-Claire sur www.netz.fr

5 conseils pour un blog plus « responsable » – Article sur www.presse-citron.net

4 différentes raisons pour créer son blog – Article de Ling-en Hsia sur fr.locita.com

Merci à Benjamin Dulau qui a largement participé à l’écriture de cet article .

Voici donc le premier !

Préparation d’un fichier de gabarit

Lorsque je commence une maquette je pars toujours d’un document de 2000px de large par 1500px de haut. Pourquoi ? Bah pourquoi pas !

Non plus sérieusement, je fais en sorte que le fond de mon site occupe le maximum d’espace pour des résolutions d’écran HD.

CTRL + N pour créer un nouveau fichier.

Je définis toujours 2 règles verticales avant de commencer à travailler. Ces limites me permettent de définir une “zône sûr” que je choisis large de 990px.

Gardez et améliorez ce gabarit en fonction de vos habitudes de travail pour vos futures créations.

Ajoutez une lumière

Je remplis le calque de fond avec la couleur #000e15. Puis j’ajoute un calque par dessus que je nomme “light”.

Je trace ensuite un dégradé radial blanc au centre en prenant soin de ne pas dépasser de la zone de travail. (Raccourci “G”)

Je convertis le calque contenant ce dégradé en Objet dynamique.

En savoir plus sur les objets dynamiques

Je le transforme et le positionne dans le header.

Je lui applique ensuite une “Incrustation de motif”

Et j’ajoute également une ombre interne avec 10% de bruit pour réduire l’effet de strates généré par le dégradé.

Le résultat :

A vous de jouer en ajoutant votre style ! Cet effet peut-être décliné de mille façons différentes.

Nous avons remarqué lors de nos différents stages effectués lorsque j’étais encore auto-entrepreneur, que notre activité paraissait souvent “obscure” à beaucoup de jeunes créateurs d’entreprise et parfois même certaines sociétés confirmées et déjà équipées. Elle est souvent assimilée à un casse tête complexe lorsque ces personnes sont confrontées au jargon technique et souvent nouveau pour eux.

Ce billet s’adresse donc essentiellement à ceux qui n’ont pas encore eu l’expérience d’un projet web encadré par une agence.

Nous allons essayer de répondre, le plus clairement, simplement et concrètement possible, aux questions suivantes :

• Comment se déroule un projet Internet lorsqu’un client fait appel à nous ?
• Quelles sont les différentes étapes que nous traversons, du premier contact client jusqu’à la livraison du site ?
• Où intervient le client dans le processus de création de son image ?

Évidemment cet article n’a pas de prétentions particulières, et malgré les apparences pas de but “commercial”, mais je suis sûr qu’il intéressera beaucoup de monde pour qui la création d’un site Internet est surmonté d’un gros point d’interrogation. Il n’est donc pas représentatif d’une méthode “admise et appliquée” par toutes les agences ou autre créatif susceptible de vous rendre ce service. Chacun voit midi à sa porte ! Nous mettrons en avant les méthodes que nous avons choisi pour mener à bien ce type de projet, mais, globalement, nous devons certainement partager quelques points communs.

Nous attirons aussi votre attention sur le fait que le déroulement des opérations dépend beaucoup du type et de l’envergure du projet, nous ne pouvons donc pas entrer dans le détail, mais sachez que certaines grandes étapes se retrouvent dans tout type de prestation.

Nous espérons donc que cet article vous éclairera sur le coeur de notre métier, et sur tout ce que nous mettons en oeuvre pour obtenir le résultat que vous recherchez.

Dans le web, on trouve de tout !

La concurrence est rude ! Des freelances, des auto-entrepreneurs, des studios et sociétés en tout genre.
Au moment du boom d’Internet dans les années 90, nous avons vu fleurir toutes sortes de prestations visant à vous proposer la création d’un site sur Internet.

C’était l’heure des startup !

Évidemment dans la masse des prestations proposées, nous avions droit à des propositions parfois plus que douteuses, émanant de pseudo-webdesigners et webmasters.

Le web ne demandait pas de compétences très pointues, les langages étaient encore assez simples et la majorité des pages étaient statiques, aussi bien au niveau des interactions et du contenu que du graphisme, d’ailleurs souvent assez sommaire.

Aujourd’hui nous ne parlons plus seulement de site Internet, mais d’application web. Avec l’évolution de la toile et des technologies (web 2.0, maintenant sur la vague 3.0), un site internet ou une application exploite un certain nombre de technologies diverses qui réclament une véritable expertise dans de nombreux domaines. Si bien que différents corps de métiers ont émergé.

• Graphistes
• Intégrateurs/monteurs
• Architectes
• Développeurs
• Référenceurs
• Community managers etc…

Des métiers complexes, évolutifs et complets, qui ne peuvent pas être cumulés par une seule personne.

Pourquoi autant de compétences ?

D’une part, parce que le site doit respecter des standards.

Passer par exemple la validation W3C qui nous permet de vérifier en partie son accessibilité. Nous veillons également à ce qu’il respecte les grands principes d’ergonomie spécifiques au web. Le design est également un point sensible, puisque le web 2.0 (et bientôt 3.0) sont de plus en plus exigeants quand au rendu visuel des pages et nécessitent de véritables compétences artistiques.

Qu’est-ce que le web 2.0 (wiki) ?

Rien que cet aspect demande déjà plusieurs compétences différentes.

• Une sensibilité artistique,
• une maîtrise des outils de création graphique,
• des compétences en ergonomie,
• une bonne connaissance des standards et des règles d’accessibilité,
• la maîtrise des langages d’intégration tel que HTML, Javascript et CSS,
• des compétences en référencement, encore un métier complexe et défini par tout un tas de règles parfois farfelues.

D’autre part, la création d’un site ou d’une application web demande aujourd’hui des compétences techniques très particulières. Dans le cas d’un projet conséquent, c’est-à-dire dont la complexité dépasse celle d’un site Internet classique comme un site vitrine, une véritable réflexion de fond doit être menée pour assurer l’évolutivité et la robustesse du système.

D’autres spécialistes doivent alors intervenir, architectes, développeurs, chefs de projet, etc. Et tout ceci nous demande bien sûr une certaine organisation afin de mener à bien le projet dans des délais respectables.

Bref, vous l’aurez compris, créer un site Internet professionnel demande de l’investissement. Tenter de le faire seul nous parait une mission impossible. Et nous parlons d’un véritable site Internet, pas des solutions “clé en main” qui vous promettent un site réalisé par vos soins en quelques heures, directement en ligne.

Elles sont valables pour les particuliers qui veulent un site pour leur mariage ou pour partager une passion, un peu à l’image d’un blog, nous serions même les premiers à recommander certaines plate-formes.

Cependant nous pensons que ces solutions sont limitées pour les professionnels car :

• Elles ne sont pas adaptées à la réalisation de besoins spécifiques.
• Elles sont basées sur des templates communs qui ne permettent pas d’obtenir un site qui va vraiment vous différencier de la concurrence.
• Vous êtes livré à vous-même.

Par quoi on commence ?

Très souvent, le premier contact est un coup de téléphone ou un e-mail, le client fait rapidement part de son projet.

L’idéal étant d’avoir le cahier des charges, mais malheureusement ce précieux document est bien souvent inexistant. Un bon conseil pour gagner du temps lorsque vous démarchez les agences web : Venez avec un cahier des charges ! Ainsi vous n’aurez pas à expliquer 5 fois votre projet, les devis seront plus précis et donc certainement moins élevés.

Qu’est-ce qu’un cahier des charges (wiki) ?

Nous déclenchons alors un premier rendez-vous, téléphonique ou physique. Nous aimons privilégier les rendez-vous en personne car il améliore l’interaction et permet parfois une meilleure entente avec notre client. Malheureusement, comme vous le savez, ce n’est pas toujours possible.

Ce rendez-vous dure en moyenne entre une heure et trois heures, au cours duquel est généralement présent un chef de projet et éventuellement un graphiste et/ou un technicien en fonction du type de projet.

Ce temps nous sert à écouter, questionner, faire connaissance, cerner les besoins et commencer doucement une réflexion ergonomique et artistique.

Nous y apprenons généralement le nom de la marque ou de la société, et nous sensibilisons immédiatement le client au sujet du dépôt de sa marque et de son logo, mais surtout de la disponibilité du nom de domaine associé.

Effectivement, le nom de domaine est la base de l’adresse internet que devront taper les utilisateurs pour afficher votre site. (ex: anonymation.com) Les clients n’ont pas toujours conscience des contraintes implicites lorsqu’ils choisissent un nom pour leur société. Si vous choisissez un nom de marque ou de société trop “standard”, du type “Mon site internet”, vous risquez d’être déçu en découvrant que vous ne pouvez pas bénéficier du nom de domaine mon-site-internet.com !

Vous pouvez vérifier vous-même la disponibilité de votre nom sur Gandi.net

Lors de ce premier rendez-vous, c’est aussi l’occasion d’apporter nos premières remarques et conseils sur l’orientation de votre projet afin de vous familiariser avec certaines “bonnes pratiques” liées à la communication sur Internet.

Lorsque c’est possible, nous estimons à la louche le temps de travail nécessaire pour vous donner une idée du budget engagé. Cette estimation n’est bien sûr pas définitive et nous réalisons par la suite une estimation détaillée qui abouti sur une proposition de devis.

Etapes d’un projet simple de type site vitrine

Le client désire :

1. La création d’un logo
2. La création d’une charte web
3. L’intégration d’une page d’accueil
4. L’intégration de pages de contenu
5. Développement des pages dynamiques du site
6. Un hébergement avec une mise en ligne et une maintenance du site.

1 – La création du logo

Tout commence avec le graphiste, dont la mission sera principalement d’écouter le client afin de s’imprégner de l’ambiance recherchée, et tenter de la transposer dans le logo.

Très souvent, l’idée de l’image est déjà existante mais il manque la “patte artistique” qui va permettre de la matérialiser. D’autres fois, le graphiste a carte blanche et peut laisser libre cours à son imagination.

En moyenne, la création d’un logo demande une journée complète de travail. Tout dépend du nombre d’aller-retours avec le client.

2 – Création d’une charte web

Lorsque le logo a été validé, nous réalisons une charte graphique “web” à partir de toutes les informations que nous avons pu réunir (cahier des charges, rencontres, logo).

La plupart du temps nos clients n’ont malheureusement pas le budget nécessaire pour réaliser une charte graphique “complète” regroupant l’ensemble des règles encadrant leur communication.

Qu’est-ce qu’une charte graphique ? (wiki)

C’est un document assez onéreux et nécessaire surtout aux grosses structures qui souhaitent uniformiser leur communication. Des règles strictes mais éprouvées. Si vous pouvez vous le permettre, c’est un document précieux qui vous suivra très longtemps et vous fera gagner un temps considérable.

Ce n’est bien sûr pas obligatoire et pour pallier à ce manque nous réalisons ce que nous appelons, une charte web. C’est en quelque sorte une charte graphique simplifiée, beaucoup moins stricte.

Elle se présente sous la forme d’un fichier .PSD (Photoshop) ou .PDF et représente généralement la page d’accueil du site. Elle peut éventuellement contenir la représentation d’autres pages spécifiques. Par exemple une fiche produit, s’il s’agit d’un projet de e-commerce.

Elle n’implique pas des règles aussi strictes qu’une charte “classique”, mais permet de poser de bonnes bases pour le site et d’harmoniser correctement sa communication sur Internet à moindre coût. Elle peut fixer entre autre l’utilisation d’une police particulière et de couleurs spécifiques, qui deviennent des références lorsque nous sommes amenés à créer un habillage pour une page twitter, un blog, une en-tête de lettre, des cartes de visite, ou encore lors de la création d’un e-mail type, toujours dans un souci de cohérence qui accroît votre crédibilité.

En ce qui nous concerne, le graphiste aura posé quelques questions du type :

• Pouvez-vous me donner quelques adjectifs pour décrire votre activité ?
• Quel ambiance voulez-vous faire transparaître ?
• Avez-vous des références de site Internet qui vous ont accroché ?

Le moindre indice que le client nous apporte est important dans le processus de création. A l’instar du logo, la réalisation de cette charte web représente un peu plus d’une journée de travail. Cela dépend vraiment de l’ampleur du projet et encore une fois du nombre de retours de la part du client.

3 – L’intégration de la page d’accueil du site

Lorsque la maquette graphique est validée, une première intégration de la page d’accueil est effectuée. L’intégration consiste à transformer une maquette (une image non cliquable) en une version interactive dans les navigateurs web. L’intégrateur, dont c’est le métier, va construire à l’aide de certains langages de programmation (HTML, CSS, parfois Javascript) une version web que le client pourra tester et visualiser dans un contexte proche du rendu final.

Cette étape est très délicate car l’intégrateur doit se conformer au graphisme et à l’ergonomie proposés par la maquette tout en respectant les différentes règles d’intégration et d’accessibilité, et en assurant la compatibilité avec tous les navigateurs internet, et ils sont nombreux ! (Internet Explorer, Firefox, Chrome, Opera, Safari, etc.).

C’est aussi très souvent l’intégrateur qui détermine la sémantique de la page, c’est-à-dire une cohérence dans la construction du document, notamment dans la hiérarchie et la structure du contenu (titres, images, textes, liens, etc.). Ce travail est très important car il aide les moteurs de recherche à mieux comprendre votre site et à déterminer les éléments clés de vos contenus (“zones chaudes”). Tout ceci contribue non seulement à l’optimisation de votre site pour le référencement mais représente aussi un gage de qualité.

Vous l’aurez compris, ce travail qui semble au premier abord assez simple s’avère en fait plutôt difficile, et seul un intégrateur professionnel et averti sera capable d’arriver à un résultat de grande qualité.

Lorsque la première version de l’intégration est achevée, nous communiquons une adresse internet (url) de test à consulter régulièrement pour suivre l’avancée des travaux. Il est très important pour nous que le client soit impliqué dans l’avancée du projet, car il a alors la possibilité de nous faire des retours au fur et à mesure, ce qui nous permet de répondre exactement à ses besoins.

4 – Les pages de contenu

Voici un des points les plus sensibles : créer ses contenus, son texte. L’étape sans doute la plus pénible pour le client et pourtant essentielle.

Quels avantages a-t-on à produire des contenus de qualité ?

En premier lieu, tout simplement pour donner envie aux visiteurs d’en savoir plus. Pour faire passer un message, pour donner en quelques mots une bonne image de votre société, de votre activité et renforcer votre crédibilité.

Ensuite, améliorer la visibilité du site et optimiser son référencement auprès des moteurs de recherche (Google par ex.).

Qu’est-ce que ça veut dire ?

Les moteurs de recherche référencent et positionnent les sites internet en fonction de critères très précis. Parmi les critères importants, nous retrouvons les titres, les liens et les textes du site.

Nous ne rentrerons pas dans le détail concernant les techniques de référencement car il nous faudrait plusieurs jours pour vous les expliquer mais sachez simplement que le positionnement sur un moteur de recherche est très stratégique. Il se fait sur certains termes et expressions, ou mots clés. Comme vous le savez peut-être, le but est que le site apparaisse dans les premiers résultats pour des recherches sur des expressions compétitives et naturelles (ce que saisirait naturellement un internaute). Pour cela, toutes les zones de textes du site doivent être articulées autour de ces quelques “mots clés”.

La rédaction des textes devient alors pénible et compliquée. Nous sommes en mesure d’apporter des conseils pour cette tâche. Le client peut alors demander une demi-journée, voir plusieurs, de formation pour se familiariser avec les méthodes à utiliser pour rédiger ses textes et comprendre l’importance et l’impact de ce travail.

Mais le référencement est devenu un métier complexe, à part entière, qui demande beaucoup de temps et une veille permanente, si bien qu’il peut nous arriver de faire appel à des agences spécialisées en fonction des attentes du client.

Notez donc que nous n’exerçons pas l’activité de référenceur, nous pouvons apporter quelques conseils dans le domaine, mais pour une approche plus pointue, l’intervention d’un professionnel du référencement est nécessaire.

5 – Développement des pages dynamiques du site

Qu’est-ce qu’une page dynamique ?

Une page dynamique, par opposition à une page statique, est une page dont le contenu peut varier en fonction de certaines informations. Ou encore une page nécessitant un traitement particulier en programmation pour fonctionner et donc l’utilisation d’un langage de programmation approprié (par exemple PHP).

Par exemple, une page contenant un formulaire de saisi (contact) est une page dynamique. La soumission du formulaire nécessite un traitement particulier qui est créé par un développeur.

Le temps nécessaire à cette tâche est très variable et dépend du nombre de pages dynamiques à créer et de leurs complexités.

6 – Mise en ligne et maintenance

Enfin, après avoir traversé toutes ces étapes, une fois que le site a été entièrement testé et validé par le client, nous effectuons ce que nous appelons une “mise en production” (ou recette).

Il existe deux cas de figure pour cette étape. Soit le client possède son propre hébergement, soit nous hébergeons le site sur un de nos serveurs.

Dans les deux cas, nous nous assurons de la mise en ligne du site et de le rendre accessible via le nom de domaine qui aura été préalablement déposé. Le site sera alors rendu public et sera accessible par tous via un navigateur internet.

Ce travail nécessite l’intervention d’un administrateur système. L’administration de serveur est également un métier complexe et pointu, nécessitant des compétences particulières. Parfois, les développeurs assurent eux-mêmes la mise en production d’un site, mais il est quand même recommandé de confier ceci à un administrateur compétent qui saura faire face à tout problème éventuel.

Projets complexes et sur-mesure ?

Nous avons détaillé les étapes d’un projet simple, mais néanmoins le plus courant.

Qu’en est-il pour un projet complexe ?

Un projet complexe nécessite une toute autre organisation, interne mais aussi avec le client. Certaines étapes sont les mêmes, le premier contact, la création du logo et de la charte graphique. Mais la suite du projet nécessite souvent l’intervention d’autres spécialistes et une gestion beaucoup plus fine.

Ici, le rôle du chef de projet est primordial. C’est lui, ou elle, qui va orchestrer le déroulement des opérations. Chez anonymation, nous pratiquons les méthodes agiles, arrangées à notre échelle et à la dimension du projet.

La méthode agile repose sur une implication maximale du client et sur des méthodologies de développement particulières. Le but est d’atteindre une réelle satisfaction du client et non de remplir “comme on peut” les termes du contrat. Pour rendre cela possible, le développement du projet se fait de manière itérative et incrémentale. Toutes les fonctionnalités sont mises à plat et leur développement est découpé en tâches. Chaque incrément, appelé “sprint”, représente la réalisation d’un certain nombre de tâches. Le but est de pouvoir montrer et faire tester une fonctionnalité au client à la fin de chaque sprint (entre 7 jours et 1 mois, en fonction de l’ampleur du projet).

Le client intervient donc dans toute la durée du développement, ce qui permet une validation continue des fonctionnalités et assure une satisfaction maximale, par opposition à une méthode de développement classique, dans laquelle le client ne voit le résultat qu’à la fin du développement et se rend parfois compte que ça ne correspond pas du tout à ce qu’il attendait.

Les méthodes agiles sont aussi centrées sur l’humain et repose sur la motivation de l’équipe de développement.

Plus d’informations : Méthode agile (wiki)

Ce type de projet demande la plupart du temps une grosse réflexion au départ et nécessite l’intervention d’un architecte logiciel qui va concevoir (sur le papier) l’application et déterminer les outils et les concepts à utiliser pour assurer la qualité du produit et sa pérennité. Un travail très important, effectué avant même de commencer à “programmer”.

L’aspect graphique et ergonomique est souvent traité en parallèle dès le début du projet.

Comme vous le voyez, la réalisation d’un projet peut demander une organisation complexe qu’il est très difficile de décrire avec précision en quelques lignes. Nous espérons quand même que ces quelques indications vous donneront une idée de ce qui se passe derrière un “gros” projet.

Conclusion

Evidemment, cet article pourrait-être complété d’un bon millier de conditions aux vues de la diversité et de la complexité des demandes auxquelles nous sommes confrontés.

J’ai pris volontairement le parti de “vulgariser” ces étapes ici pour donner une petite idée de ce qu’implique la création d’un site simple dans une agence web.

Je n’aborde pas certains points comme, les droits à l’image, les considérations techniques au niveau de l’architecture web et de l’hébergement, les contrats, le référencement, la maintenance, et bien d’autres aspects qui nécessiteraient l’écriture d’un livre en plusieurs tomes !

Quoiqu’il en soit, j’espère que cette article vous aura un peu éclairé sur le processus de création d’un site si vous passez par une agence.

Merci à Benjamin Dulau qui a largement participé à la rédaction de cet article !

Merci à Florian Fromentin (Photographe – Flexgraph) pour ses photos vraiment sublimes.
flickr de Florian Fromentin

Aujourd’hui, je vais aborder quelques particularités et propriétés très utiles qui découlent de l’utilisation des objets dynamiques.

Commençons d’abord par les transformations. Nous avons vu que notre objet dynamique peut-être assimilé à une “coque” protectrice qui permet de préserver l’intégrité des éléments qu’il contient, mais ce n’est pas tout.

Certaines modifications de l’objet dynamique sont conservées et éditables à loisir.

Les modifications “non-destructrices”.

C’est le cas des transformations.

Intéressons-nous à l’échelle dans ce petit comparatif en image.

Note :
Vous remarquerez que le pourcentage de la transformation est conservé à chaque fois que vous en effectuez une nouvelle, ce qui n’est pas le cas pour l’image originale, dont le pourcentage redémarre à 100% à chaque nouvelle transformation.

On retrouve le même comportement pour les transformations de déformation :

Chaque nouvelle transformation vous permettra de retrouver l’état précédent.

Application de filtres dynamiques

Je choisi d’appliquer le filtre pastel :

Un filtre appliqué à un objet dynamique est renommé filtre dynamique.

Le filtre est entièrement modifiable et ne détruit pas l’image originale.

Penchons nous sur le panneau “Calques” :

1. Cette petite icône est un simple indicateur de présence d’un filtre dynamique sur l’objet, utile quand l’ensemble est réduit.
2. Un masque est créé spécialement pour n’agir que sur le/les filtres appliqués.
   Il fonctionne comme un masque classique.
   Malheureusement, le masque s’applique à l’ensemble des filtres.
   Il n’est pas possible d’avoir un masque par filtre.
3. Un double clic sur cette icône vous permettra d’atténuer l’effet du filtre sur l’ensemble de l’objet mais également de choisir le type de fusion souhaité (normal, produit, etc..).
4. Vous pouvez à tout moment choisir un autre filtre en double cliquant sur son intitulé dans la liste.

Vous pouvez, bien sûr, ajouter plusieurs filtres sur le même objet dynamique. Attention cependant à l’ordre d’empilement de ces derniers qui ne donnera pas le même résultat si vous les permutez.

Conservation des espaces colorimétriques

Une propriété intéressante permet de conserver l’espace colorimétrique de l’image originale. En englobant votre image dans un objet dynamique vous pouvez changer, sans risque d’écrasement, l’espace colorimétrique.

Pour quoi faire ? Tout simplement parce que certains filtres ne sont pas permis dans tous les espaces colorimétriques.

Vous pouvez ainsi englober votre image CMJN dans un objet dynamique, changer l’espace colorimétrique en RVB, et utiliser l’ensemble des filtres proposés.

Répercussion sur le poids du PSD ?

Un petit mot sur l’instanciation de nos objets dynamiques et sa répercussion sur le poids du document pour conclure ce billet.

On pourrait penser que, puisqu’il s’agit d’instances, le poids du document ne devrait pas beaucoup augmenter lors de leur duplication : Faux !

C’est même le contraire.

Exemple pour mon document :

• 3 objets dynamiques pèsent 5725ko
• 3 calques classiques pèsent 3610ko

Les objets dynamiques c’est génial mais vos PSD risquent de prendre un peu d’embonpoint.

A bientôt pour une prochaine partie

Merci à James pour la photo !

flickr de James de Ocampo

Voir Les objets dynamiques (smart objects) : Première partie

Voir Les objets dynamiques (smart objects) : Deuxième partie

Je vais vous parler aujourd’hui d’un petit livre, premier d’une nouvelle collection nommée “A book appart” aux éditions Eyrolles et proposé par Jeremy Keith.

HTML5 pour les webdesigners.

Ne vous attendez pas à trouver une documentation fournie des spécifications HTML5 dans ce livre divertissant d’à peine 80 pages aérées, simple mais pas simpliste pour autant, pas moins intelligent qu’intelligible et bourré d’humour.

Extrait :
Il est extrêmement simple d’insérer un fichier audio dans un document HTML5.
[...]
C’est un peu trop simple. Vous voudrez probablement être plus spécifique quand au comportement du fichier sonore.
Imaginons qu’il existe un immonde salaud qui déteste le Web et tous ceux qu’on y croise. Il se fiche probablement qu’il est incroyablement grossier et stupide d’insérer un fichier audio qui démarre automatiquement. Grâce à l’attribut “autoplay”, de tels actes de malveillance sont possibles.
[...]
Si jamais vous utilisez l’attribut “autoplay”de cette façon, je devrai vous abattre.

Certains crieront certainement au scandale parce qu’ils auront vite fait de comparer son prix au kilo avec d’autres parutions. Je pourrais partager ce sentiment, car il faut quand même débourser 12€ pour se le procurer neuf. Personne n’est parfait et quand on aime …

Bref, je ne vous dirai pas d’acheter ce livre mais je vais vous dire pourquoi moi je l’ai trouvé “sympa”, et pourquoi pas vous donner envie de le feuilleter dans une FNAC, un Virgin ou autre.

Un peu de douceur dans un monde de Geek

C’est un livre qui se lit rapidement, tout au plus 1H, avec un format agréable et bien mis en page (demi A4) que j’ai consommé durant les transports. Il ne demande pas une concentration intense et nous trace avec une bonne dose d’humour l’histoire du HTML, de son origine à l’illustration de quelques spécifications qui vont changer notre manière d’appréhender le web.

Il permet d’entrevoir quelques possibilités de ces nouvelles spécifications et de nous laisser rêver ! L’auteur y aborde l’histoire, les grands principes, quelques exemples simples mais bien choisis et finit par une conclusion en bonne et due forme

On y apprend entre autres que le HTML1 n’a jamais existé, la différence entre HTML5 et HTML 5, que la balise a peut maintenant contenir des éléments tels que p ou h1 etc.., ou encore l’intérêt sémantique de l’élément section dans la composition d’un plan (h1, h2, h3,..), ainsi que le futur de nos précieux formulaires.

Conclusion

Un livre frais, de détente, agréable et simple, certes un peu cher, qui fait office d’excellent préambule pour tous ceux qui sont curieux de savoir ce qu’HTML5 peut bien vouloir dire à l’heure actuelle.

HTML5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

Quelques liens :

Des démos à tester sur les navigateurs compatibles:

• html5demos.com par Bruce Lawson et Remy Sharp

Un superbe site (anglais).

• diveintohtml5.org par Mark Pilgrim

Une mine d’informations et de tutoriels HTML5

• www.w3schools.com/html5

L’imprime écran ou capture d’écran est une fonction simple et connue du système d’exploitation et dont je me sers énormément, notamment pour la rédaction des “tutoriel” sur les forums ou ici.

Vous appuyez sur la touche “Impr écran Syst” et l’image “photographiée” de votre (ou vos écrans) est gardée en mémoire dans ce qu’on appel “le presse-papier”. Un simple “coller” dans votre logiciel d’image préféré vous permet de récupérer l’ensemble de ses pixels.

Mais bien souvent, nous ne souhaitons récupérer qu’une seule partie de l’écran et nous devons passer par de multiples traitements post imprime écran (recadrage, taille, etc).

Mais est-il possible d’effectuer rapidement ces manipulations pendant la capture ?

Il existe bon nombre de logiciel permettant d’optimiser son fonctionnement, et personnellement, j’utilise Gadwin PrintScreen. (Télécharger sur http://www.gadwin.com)

Pourquoi utiliser un logiciel de gestion de capture d’écran ?

Je vais vous donner les avantages qu’il donne à votre workflow

N’hésitez pas à donner votre référence en matière de capture d’écran dans les commentaires.

• Sélection manuel de la partie de l’écran à enregistrer.
• Prévisualisation de la capture.
• Enregistrement d’une image dans un dossier et mémorisation dans le pressa-papier.
• Choix du format (extension et taille) et de la qualité de l’image en sortie.
• L’affichage du curseur et l’étiquetage.

Les options de Gadwin PrintScreen

Faisons un petit tour par les préférences de l’application :

Notez que vous pouvez ouvrir le dossier contenant les captures depuis ce menu.

Préférences

Raccourci clavier : Personnellement j’ai complétement remplacé le fonctionnement de la touche imprim écran par le lancement de l’application, mais vous pouvez lui attribuer un autre raccourcis parmis une liste pré-determinée (ex : CTRL + Imprim écran)

Délai initial avant la capture permet de retarder la capture. Utile quand on capture le curseur et qu’on veut se donner le temps de le placer correctement dans l’image ou pour capturer des éléments qui disparaissent lorsqu’on appuis sur une touche du clavier.

Cacher l’icône pendant la capture retirera l’icône de Gadwin dans la barre système (L’endroit où se trouve l’heure dans la barre des tâches) pendant la capture.

Afficher les notifications vous permet de valider chaque étapes de la capture.

Prévisualiser l’image capturé affichera une fenêtre de prévisualisation de votre capture avec quelques options, comme la possibilité de zoomer et de changer la destination.

Afficher l’écran de lancement vous donne un feedback visuel lorsque l’application se lance.

Lancer au démarrage de windows porte bien son nom !

Sources

Vous avez le choix de capture :

La fenêtre active : La totalité de l’élément/programme sélectionné

La fenêtre fille : L’élément qui est sélectionné à l’intérieur d’un autre élément/programme.

Par exemple, je sélectionne le panneau calque de photoshop pour qu’uniquement le panneau calque soit capturé.

Plein écran : Capture la totalité de l’écran ou se trouve le curseur (pour le multi-écran)

Zone rectangulaire : Celle que j’utilise et qui permet de capturer précisément ce que vous souhaitez.

Capturer le curseur de la souris : Permet de cacher ou de le faire apparaitre le curseur sur votre image.

Note : Un défaut du logiciel fait que le curseur aura toujours la forme classique (flèche) lors d’une capture de zone rectangulaire. Le curseur est correctement capturé dans les autres cas.

Destination

Copier la capture dans le presse-papier : Garde en mémoire votre capture que vous pouvez coller à l’aide du raccourci CTRL+V.

J’active cette option car je peux annuler l’étape d’enregistrement de l’image (ce qui n’annule pas la mémorisation de la capture dans presse-papier) et m’en servir directement dans Photoshop.

Imprimer la capture : Lance directement l’impression de votre image

Envoyer la capture par E-Mail : Lance votre client mail avec en pièce jointe l’image.

Copier la capture dans un Fichier : Enregistre l’image dans le répertoire, au format (sélectionné dans le prochain écran) et portant la série de nom de votre choix.

Par exemple, on pourrait avoir une série d’image Screenshot1, Screenshot2, Screenshot3 etc… dans le répertoire D:/PrintScreenFiles

Demander le nom du fichier après capture : Option que je préfére à “Nom automatique” qui vous permet de nommer le fichier au moment de l’enregistrement.

Nom automatique : Active la numérotation dans le nom des images

Par exemple, Screenshot1, Screenshot2, Screenshot3 etc…

Ouvrir avec : Permet de lancer immédiatement le logiciel d’édition d’image pour travailler votre capture. Extrêmement contraignant, à éviter selon moi.

Image

Format de l’image : Sélectionnez le format de sortie de votre image parmis BMP, JPEG, GIF, PNG, TIFF.

Redimensionnement : Gadwin peut retailler à la volé vos capture.

Dégradé de gris : Capture l’image en noir et blanc.

Ombre de l’image : Ajoute une ombre de X pixels. Malheureusement, l’ombre s’applique toujours à droite et en bas de l’image et sur un fond blanc, à éviter donc.

Etiquette : Option tés intéressante qui permet de taguer vos captures. Il n’y a pas beaucoup d’option de présentation mais c’est, je pense, suffisant pour de l’imprim écran.

Changez le contenu du tag, le fond ainsi que la transparence du tout.

Il existe bien d’autre solutions pour gérer vos captures alors n’hésitez pas à commenter pour nous faire part de la solution que vous avez adopté !

Alors je sais qu’il existe beaucoup de tutos qui parlent de ce sujet, mais j’avais quand même envie d’avoir un billet à ce sujet sur notre blog, et je dois bien avouer, par la même occasion, de vous présenter un nouveau partenaire photographe, James de Ocampo . De plus, l’effet en question se prêtait à merveille à l’image que j’ai sélectionné.

J’ai d’abord appliqué à mon image les manipulations de l’article “Teinte/saturation et incrustation” afin d’accentuer l’ambiance de l’image.

Effectuer le tracé

Dessinez dans un premier temps le tracé à l’aide de l’outil Plume (Raccourci P).

Astuce : Pour “simplifier” le dessin du tracé et m’assurer une bonne fluidité, je commence par des lignes brisées grossières.

Attention ! Ce tracé ne s’inscrit pas dans un calque “classique” mais dans le panneau tracé qui lui est dédié.

Arrondir les angles

Puis à l’aide de l’outil conversion de point, tirez les tangentes de la courbe.

Vous pouvez maintenir la touche SHIFT pour contraindre la tangente à un angle strict.

Nous avons maintenant le “rail” que devra suivre le fil magique que nous allons maintenant générer.

Configurer l’outil Pinceau

Créez d’abord un nouveau calque qui contiendra les pixels de notre fil.

Sélectionnez le tracé depuis le panneau “tracé”.

Appuyez sur la touche “F5″ pour ouvrir le panneau Forme.

Si le panneau est grisé, c’est que vous n’avez pas encore sélectionné l’outil pinceau. Sélectionnez alors le pinceau en appuyant sur la touche “B”

Nous allons nous intéresser essentiellement aux deux premiers “onglets” : - Forme de pointe (Choix de la forme, taille, dureté et pas), - Dynamique de forme (Modifications dynamiques paramétrées).

A savoir : Le contour du tracé prendra la couleur de premier plan.

Dessiner le contour du tracé

Il y a deux manières d’appeler la fonction “contour de tracé” qui va dessiner les pixels sur le calque.

pour ceux qui aiment la souris :

• Sélectionnez l’outil “Sélection de tracé”,
• effectuez un clic droit sur le tracé,
• choisissez “Contour du tracé…”,
• et validez en prenant soin d’avoir coché la case “Simuler la pression”.

Pour ceux qui aiment le clavier :

• Le calque nouvellement créé ET le tracé doivent, tous deux, être sélectionnés.
• Modifiez vos paramètres dans le panneau Forme,
• et créez le contour du tracé en validant simplement avec la touche “Entrée”.

Annulez avec le raccourci CTRL+ALT+Z (répété pour revenir plus loin dans l’historique), modifiez vos paramètres de formes et re-validez avec “Entrée” autant de fois que nécessaire.

Attention ! si vous validez plusieurs fois d’affilée avec la touche “Entrée”, vous appliquez autant de fois le contour du tracé.

Voilà donc un moyen simple et rapide de tester les possibilités qu’offrent les formes sur le contour.

Attention ! les paramètres que j’utilise sont valables pour la résolution de mon image. Faites varier en conséquence.

Nous allons appliquer plusieurs paramètres et constater les différences. Je ne vais pas expliquer ici chacun d’entre eux. Prenez le temps de les tester dans leurs valeurs extrêmes afin de bien comprendre leur intérêt. Je reviendrai certainement dessus dans un prochain article.

Premier test :

Deuxième test :

Augmenter le réalisme et l’intégration

Appliquez ensuite quelques effets pour agrémenter et donner un peu plus de corps.

Ajouter une poussière d’étoile sur le même principe

Recommencez alors les mêmes manipulations sur un nouveau calque que vous pouvez appeler “étoiles” en prenant soin de bien configurer la nouvelle forme. Encore une fois, prenez du temps pour vous amuser avec les différentes possibilités offertes par le panneau forme et utilisez la technique du clavier vu plus haut pour appliquer l’effet rapidement.

Masquer le fil

Je range l’ensemble des calques dans un dossier que je nomme “composition” et lui applique enfin un masque pour cacher les parties non visibles de mon fil “magique”.

Originale :

Résultat :

Merci à James pour cette photo absolument sublime !

flickr de James de Ocampo

D’autres photos Cosplay de James sur Cosplay-it.com

Préparez votre image.

Ouvrez votre image puis convertissez votre calque contenant la photo en Objet dynamique.

Instanciez votre objet dynamique.

Dupliquez-le (sélectionnez-le puis CTRL+J) et modifiez le mode de fusion de l’instance en “Incrustation”.

Appliquez un premier calque de réglage.

Appliquez un calque de réglage “Vibrance” écrêté au premier Objet dynamique et abaissez la valeur de la vibrance au minimum (-100).

Appliquez un deuxième calque de réglage sur l’instance.

Écrêtez un calque de réglage Teinte/Saturation sur la copie, en prenant soin de cocher l’option “Redéfinir” et abaissez la saturation ainsi que la luminosité. Jouez enfin avec le curseur Teinte pour trouver l’ambiance que vous souhaitez générer.

Nuancez votre effet.

Réduisez l’effet en diminuant l’opacité de l’instance et du calque Teinte/Saturation.

Et le résultat (avant/après)

Image originale :

Image traitée :

Bien sûr, chaque photo nécessite un traitement particulier et les paramètres saisis ici, doivent être nuancés en fonction du résultat que vous recherchez.

Merci à Florian Fromentin (Photographe – Flexgraph) pour la photo.
flickr de Florian Fromentin

L’instanciation des objets dynamiques

Nous allons aborder dans ce billet un concept très puissant surtout connu de nos amis développeurs : L’instanciation des objets dynamiques.

J’espère que vous percevrez toute l’étendue des possibilités qu’offre une maîtrise des objets dynamiques.

Instancier : De manière plus générale, fabriquer un exemplaire d’un élément à partir d’un modèle qui lui, sert en quelque sorte de moule. Dans le cas d’un patron (template en anglais), la fabrication requiert un paramétrage, c’est-à-dire une fixation des valeurs des paramètres inclus dans le patron. En savoir plus..

Commençons par convertir notre calque en objet dynamique puis dupliquons-le.

Toute modification apportée à l’intérieur d’une des instances se répercutera sur l’ensemble des Objets dynamiques précédemment dupliqués.

Edition de l’objet dynamique et répercussion

Pour éditer l’image originale, vous pouvez :

• double cliquer sur un des objets dynamiques dans le panneau calque
• ou faire un clic droit sur l’un d’entre eux puis Modifier le contenu

Attention ! Le double clic doit être effectué précisément sur l’icône et pas à coté, afin d’ouvrir l’objet dynamique et pas le panneau “Style de calque” :

Nouvel objet dynamique par copier

Il arrive parfois que l’on souhaite rompre le lien entre plusieurs objets dynamiques. On utilisera cette fois-çi la fonction Nouvel objet dynamique par copier qui permet de rendre notre copie totalement indépendante des autres.

Cette copie ne fera plus référence à l’image originale mais à une copie de l’originale.

Et inversement, la modification de l’instance 3 n’aura pas d’incidence sur les deux autres.

Les objets dynamiques, c’est bon ! Créez-en !

Dans ces exemples, l’objet dynamique ne contient qu’un seul calque (la photo), mais un objet dynamique peut-être vu comme un PSD dans un PSD et peut contenir tous les types de calques sans aucune autre limite que la taille (Mo) de votre PSD “mère”.

Vous pouvez, par exemple, sélectionner autant de calques que vous souhaitez dans le panneau Calques (CTRL + Clic gauche) puis inclure l’ensemble dans un objet dynamique.

Je les utilise tellement souvent que je me suis fait un raccourci clavier dédié à la conversion des calques en objets dynamiques.

Menu > Edition > Raccourcis clavier…

Merci à Florian Fromentin (Photographe – Flexgraph) pour la photo.
flickr de Florian Fromentin

Voir Les objets dynamiques (smart objects) : Première partie

Voir Les objets dynamiques (smart objects) : Troisième partie