Archive for April, 2011

Marre des logos trop “plats”

Friday, April 22nd, 2011

Grâce à ce tutoriel, vous allez apprendre de façon très simple à faire un logo avec des effets de lumières et de transparences très web 2.0 sur illustrator.

Étape 1 :

Créez un nouveau document, prenez l’outil texte (le petit T dans la palette des outils) et tapez le texte de votre logo, ici j’ai choisi ISCOM. Puis appliquez-lui la couleur voulue. Faites ensuite un rectangle autour, sans couleur interne.

etape1

Étape 2 :

Maintenant appliquez à ce rectangle un dégradé noir et blanc comme celui qui se trouve en bas sur la palette de dégradé. Appliquez lui un angle de 90°, comme sur la photo ci dessous.

Étape 1

Étape 3:

Prenez l’outil de sélection (flèche noire) et sélectionner votre texte ET votre rectangle. Maintenant aller dans la palette transparence et cliquez sur le petite flèche en haut à droite, et cliquez sur créer masque d’opacité.

Image 2

Étape 4 :

Admirez le résultat.

Image 3

Étape 5 :

Pour rajouter un autre petit effet, faites ensuite une ellipse (l’outil ellipse est caché derrière l’outil rectangle, cliquer longuement pour le faire apparaître) et remplissez la de blanc, puis rendez vous dans le menu transparence et passez la en opacité à 25%.

Image 4

Étape 6 :

Et voilà c’est fait. Vous avez réalisé un logo avec effets de façon très simple.

Image5

Besoin de bouton pour votre site web ?

Thursday, April 21st, 2011

Voici un petit tutoriel qui vous expliquera comment créer un bouton web, ce petit élément qui ne paye pas de mine au premier abord mais qui fait toujours son effet. Il permet de garder une cohérence avec l’ensemble de la charte graphique de votre site.

Voici un exemple de site web :page-accueil1

C’est un site d’e-commerce, il est donc important d’ajouter un bouton « Votre panier ».

Voici la marche à suivre :

Pour commencer il faut ouvrir le logiciel magique : Photoshop. Pour ma part j’ai utilisé la version CS5 mais vous pourrez aussi vous y retrouver sur une version plus ancienne.

1 -   On créé un nouveau document, attention pour facilité la suite on ne met aucun arrière-plan.

image1

2 -   On choisi la couleur de notre bouton en utilisant le « pot de peinture ».

image2

On se retrouve donc avec ce document :

image3

3 -   On clic sur l’outil de sélection et on choisi un contour progressif de « 5px ».

image4

On sélectionne l’ensemble du rectangle et le résultat doit ressembler à ça :

image5

4 -   À partir de là on va dans le menu « Sélection » et on  interverti la sélection.

image6

5 –   Suite à cela on supprime la nouvelle sélection et on se retrouve avec…

image7ça !!

6 –   Fini les sélections, on désélectionne tout et on s’attaque à l’aspect physique du bouton. Pour lui donner la forme caractéristique d’un bouton on utilise le « biseautage », « l’estampage » et le « contour ». Vous trouverez toutes ces options dans le petit  onglet « fx » présent en bas du menu calque.

image8

Pour ce qui est de la « structure » et de « l’ombrage » chacun fait marcher sa créativité, mais voici les données de mon merveilleux bouton. ;)

image9

Moi j’ai choisi un dégradé en utilisant une des couleurs du site.

image10

Pour finir l’aspect physique du bouton je rajoute un petit contour d’une couleur un peu plus foncé que celle utilisée à l’intérieur de l’élément.

image11

7 –   Maintenant qu’on a le bouton, on rajoute le texte :

image12

8 –   Encore un petit-peu de personnalisation, en réutilisant l’onglet « fx » et on ajoute quelques effets :

image13

9 –   Le bouton est terminé et on admire le résultat !

image14

10 –   Bon ok il reste encore une étape, intégrer le bouton dans son site :

page-accueil2

Cette fois on peut être se féliciter du travail accompli !

Les secrets de Ladurée

Thursday, April 21st, 2011

Analyse du site internet

www.laduree.fr

ladure_logo

Aujourd’hui, j’ai décidé d’analyser un site internet qui en fera baver plus d’un. Un site internet qui fera gargouiller votre ventre et mettre en éveil toutes vos papilles. Le site internet de Ladurée, le fabriquant de douceur et de gourmandises.

Qui est Ladurée ?


Ladurée est une maison de pâtisserie parisienne qui a été fondée en 1862 par Louis Ernest Ladurée. Depuis, et surtout ces dernières années, la marque a su se créer une image de marque bien distinctive et a acquis une réputation internationale.

Ladurée est réputée pour ses délicieux et inimitables macarons pour lesquelles les parfums et les saveurs se développent continuellement.

Son site internet a été crée par l’agence MM Création, une agence de communication spécialisée en création de site internet.

La construction du site internet

laduree-fr

Ladurée.fr utilise un plan de site internet classique. La construction de la page d’accueil est bien évidemment un peu différente des autres pages. Ces dernières sont structurées de la même manière.

construction-du-site

La barre des menus reste toujours présente en haut du site.

barre-des-menus
Ensuite, on distingue un petit bandeau avec le nom de la marque et une image illustrant la page où l’on se trouve. En dessous, le développement du sujet et ensuite certaines actualités et un renvoi sur les réseaux sociaux.

Quant à elle la page d’accueil est surtout importante grâce à son graphisme. On se retrouve dans la pâtisserie des Champs Elysées. Il est alors possible d’agir sur les différents éléments.

Les caractéristiques graphiques du site internet

Lorsque l’on arrive sur la page ladurée.fr, on se trouve directement plongé dans l’univers de la marque. La gamme de couleurs nous frappe immédiatement ; des couleurs pastels, très douces et agréables à regarder. Trois couleurs dominantes en ressortent donc :

rose
R: 243   V: 232   B: 246
#F3E8F6

vert

R : 229   V :240     B :218
#E5F0DA

or

R : 160   V :145   B :99
#A09163

Le rose est la couleur du romantisme et de la féminité. C’est une couleur dynamique avec une pointe de délicatesse féminine. En effet, elle est souvent associé au coté femme-enfant. Ici, elle renvoie évidemment à la couleur rose associée au bonbon.

Ce doré fait est un rappel à la couleur du logotype de Ladurée. La couleur dorée connote un coté haut de gamme associée évidemment à la richesse et à l’argent.

Outre ces trois couleurs dominantes, le site internet utilise d’autres couleurs, toujours dans les tons pastels pour rester dans le même univers.

La typographie utilisée est également une autre caractéristique importante du site internet. Pour la barre de menu, la typographie utilisée est English111 Adagio. Celle-ci se retrouve également dans le logo est fait référence à la finesse et à la classe de la marque et de ses produits.

Caractéristiques techniques du site internet

Le site ladurée.fr a été construit en flash, ce qui lui impose un dynamisme évident et qui peut créer une interactivité avec l’internaute. Cette interactivité est surtout décelable et important dans la page d’accueil et la page précèdent l’accueil. En effet, on arrive tout d’abord sur cette page :

ouverture-site

C’est ensuite en cliquant sur le cadeau qui s’ouvre que l’on découvre le site internet.

Sur la page d’accueil, le flash est indispensable pour créer cet univers virtuel qui retranscrit le lieu et qui permet de faire bouger tous les éléments. On retrouve également des éléments animés sur les autres pages : les images illustrant le sujet de la page où l’on se trouve.

Les caractéristiques du site nous plongent au cœur du magasin Ladurée

La page d’accueil du site internet permet à quiconque de se retrouver à l’intérieur de la célèbre pâtisserie. Cette animation et cet univers virtuel permettent aux internautes de sentir dans la peau d’un client qui choisit ses pâtisseries. Dans cet univers virtuel, 11 éléments peuvent être contrôlés par l’internaute. Chacun d’eux nous emmène sur un élément du site, mais de manière différente. L’internaute qui visite le site a alors l’impression de visiter la boutique et de pouvoir agir. Par ailleurs, la musique permet également de mettre en place cette ambiance. En effet, le bruit d’un commerce est ici retranscrit.

zoom--page-accueil

En outre, les caractéristiques du site nous plonge également dans l’univers de la marque.

Depuis le début, la pâtisserie Ladurée a capitaliser son image de marque sur le savoir-faire et sur des produits de qualité et innovant. Tout dans le design et la construction du site internet nous renvoie au positionnement de la marque de pâtisseries. En passant par les couleurs ou encore les multiples arabesques présentes, le site arbore un design majestueux et haut de gamme. Les couleurs pastels nous renvoie à la douceur des pâtisseries tandis que la typographie ou encore les graphismes nous renvoie à la qualité.

Grace à ce site, on peut ainsi retrouver la stratégie de Ladurée. Les objectifs sont majoritairement des objectifs affectifs qui concernent l’image. Grace à son site internet, Ladurée ne cherche pas à vendre ces produits, elle recherche à capitaliser sur l’image d’exception et ensuite d’augmenter la notoriété des autres produits (parfums, …).  Le site Ladurée s’adresse à deux sortes de cibles. Tout d’abord, les personnes connaissant déjà le magasin et qui se retrouve donc dans l’environnement du site et ensuite celles qui ne sont encore jamais entrées et qui arrivent à se projeter grâce à l’animation virtuelle.

Depuis le début, Ladurée consolide sa stratégie créative sur une stratégie de Lovemark. Le site internet appuie. La lovemark est une stratégie créative où la marque entretient une relation quasi amoureuse avec ses clients. Ladurée place les consommateurs en tant que client privilégié.

Ladurée.fr montre ici toutes les qualités que Flash peut permettre. La marque nous montre également qu’il est possible de créer un véritable lien entre le site internet et l’univers de la marque. Ladurée a ici été capable de nous faire entrer dans sa pâtisserie et dans son univers.

Et pour le plaisir, quelques petites douceurs …

macarons-laduree

Analyse, site fondation Nicolas Hulot

Wednesday, April 20th, 2011

“Pour la nature et l’Homme”


J’ai choisi d’analyser le site de la fondation Nicolas Hulot pour plusieurs raisons.Tout d’abord car l’écologie et la sauvegarde des espèces protégées est aujourd’hui un problème qui nous concerne tous. De plus, l’actualité récente avec la candidature officielle de Nicolas Hulot aux présidentielles de 2012, m’a incitée à découvrir sa fondation via son site internet.

Rappel : Cette fondation pour la Nature et l’Homme a été créée par Nicolas Hulot en 1990. Elle développe ses programmes autour de plusieurs thématiques qui sont : le climat et l’économie, l’énergie, l’alimentation durable et solidaire …

Design et Ergonomie

L’élément le plus frappant lorsque l’on arrive sur le site, est son esthétique inhabituelle. Que ce soit dans la mise en forme du texte, des images ou de son ergonomie en générale.

Premièrement,  le site peut se lire horizontalement. Il suffit de se déplacer vers la droite avec la souris.

accueil

Une frise en bas représentant des paysages, est encadrée par du texte qui sert de chemin de fer. Celui-ci encourage l’internaute à se « balader » sur le site. On retrouve d’ailleurs cette frise sur toutes les pages du site.

Les messages sur la home page forment comme une ligne de vie représentant l’esprit de la Fondation. Ils définissent les enjeux liés à la protection de l’environnement, posent les questions sur la place de l’humain au cœur de celle-ci, et s’interrogent sur la manière de construire un développement économique, social et durable.

Les ambitions du site nous apparaissent donc très clairement dès la première page.

Une barre de menus, permet d’accéder aux différentes thématiques développées sur le site. On peut ainsi consulter les rubriques directement sur la home page ou via ces menus déroulants en haut de l’écran.

Comparativement à des sites traitant du même sujet (type Greenpeace, WWF, France Nature Environnement), celui-ci se démarque par son contenu et sa forme peu classiques. Un grand nombre  d’images ainsi que de couleurs l’alimentent et lui donne un caractère “naïf”.

Couleurs

En ce qui concerne les couleurs, celles-ci sont plutôt « flashy » et créent un contraste assez élevé au niveau de l’interface. La plupart des teintes rappellent la nature telles que le vert, l’orange, le marron … (couleurs également présentes  dans la frise du bas).

Violet : C : 29  M :97  J : 47 N : 10

Vert : C : 44  M :7   J : 93  N : 0

Orange : C : 15 M : 54 J : 86 N : 1

Gris : C : 71  M : 64 J : 59 N : 55

Marron : C : 58 M : 56  J : 100  N : 50

Bleu : C : 69  M : 13  J : 14  N : 0

Technologies

Au niveau technique, le site regorge de petites astuces.

  • Tous les articles sont disponibles en audio, grâce à une bande sonore disposée à chaque début de paragraphe. Cela permet aux personnes malvoyantes de profiter du contenu des articles.

audio

  • On peut également consulter en temps réel l’évolution du nombre d’engagés pour la fondation Nicolas Hulot, grâce à ce cadran apparaissant sur toutes les pages.  A chaque nouvel inscrit celui-ci se modifie.

cadran

  • Un espace presse rassemble tous les articles parus concernant la fondation qui sont généralement tirés de blogs.
  • Des vidéos sont mises à la disposition des internautes. Par exemple, dans l’une d’elles Nicolas Hulot explique son engagement pour les présidentielles de 2012.
  • Un flash info, pop up, apparait dès l’ouverture du site pour informer des dernières actualités importantes (ici la démission de Nicolas Hulot à la présidence de la fondation qui est apolitique et donc non compatible avec sa candidature présidentielle).
  • Une barre de recherche située en haut de l’écran facilite la navigation et la rapidité d’accès à l’information.

La communauté

Le site laisse également une grande place à sa communauté, composée de personnes inscrites en ligne.

Les langages utilisés sont : l’ HTML et Java Script.

Le langage Java Script permet aux internautes de s’inscrire en ligne et de se créer un profil type Facebook. Ils peuvent ensuite intérargir sur la plateforme et partager des idées, des conseils, des commentaires etc. C’est un lieu d’échange et de partage.

profil

On y trouve plusieurs rubriques :

-          Les 11 gestes écologiques de « l’éco-citoyen »

-          Ses engagements

-          Ses centres d’intérêt

-          …

L’internaute a la possibilité de poster des informations ou des vidéos via son mur.

  • Plusieurs célébrités ont rejoint la cause de Nicolas Hulot en tant qu’ambassadeurs. La plupart sont acteurs, chanteurs, sportifs. Dans une rubrique leur étant consacrée, ils expliquent la raison de leur engagement respectif. Ce sont autant d’arguments d’autorité ayant un impact auprès de la population.
  • Pour se tenir informé des dernières nouvelles, il existe :

- un blog,constitué d’interviews d’auteurs, de posts publiés part les membres de la communauté etc.

- une newsletter

- des flux RSS

- une FAQ répondant aux interrogations que peuvent se poser les personnes visitant le site.

blog

Analyse de la communication du site

Positionnement

Prévenir et encourager à la protection de l’environnement et des espèces menacées.

Cibles

Ici tout le monde est une cible potentielle. En effet,  toute personne souhaitant soutenir la fondation, ou étant sensible à la protection de l’environnement est visée. Le public est donc très large et peut correspondre à n’importe quelle tranche d’âge (10-90 ans). Les différents moyens de mise à disposition de l’information permettent à chacun de trouver son compte; selon si l’on préfère la vidéo, les articles, l’audio (pour les malvoyants) etc.

Objectifs

-          Apporter des informations, conseils  et astuces

-          Être ancré dans l’actualité et tenir informé des dernières nouveautés que ce soit sur le plan législatif ou technologique.

-          Faire participer chaque citoyen. L’idée étant que chacun a un rôle à jouer dans le combat pour la protection de l’environnement, d’où une interface permettant une grande interactivité et des échanges entre les internautes (possibilité de publier du contenu, faire partager une nouvelle, poser des questions …).

Conclusion

Pour conclure je dirais que ce site est très interactif, ludique et d’une grande richesse d’informations. On peut en revanche regretter que cette quantité de renseignements associée aux nombreuses images donne une impression de fouillis.

Cependant, je pense que ce site rempli ses objectifs en apportant un discours varié et en plaçant l’humain (l’internaute) comme acteur et non comme spectateur. Le discours n’est pas moralisateur mais au contraire relativement encourageant et optimiste. Le site s’inscrit tout à fait dans la logique du web 2.0, c’est-à-dire le web social, grâce à ses multiples moyens d’interaction.

Des fruits tout nus?

Wednesday, April 20th, 2011

logo innocent2

Avez – vous déjà eu  une envie  pressante de manger des fruits tout nus ?

Oui  des fruits tout nus  sans ajouts bizarres, sans conservateurs, 100 % naturels qui vous font du bien au teint !

Maintenant c’est possible grâce à  Innocent et ces petits smoothies tout frais venus tout droit d’Outre Manche.

Pour la Petite Histoire

Innocent   c’est une marque anglaise  qui a été crée en 1999 par trois jeunes étudiants de Cambridge.  Esprit décalé et ludique, recettes onctueuses, packaging 100% recyclables sont de mises pour cette  jeune marque qui  est  aujourd’hui le leadeur européen sur le marché des jus de fruits frais.

bouteilles-innocent

Innocent c’est :

-       2 millions de smoothies  vendus chaque semaine dans toute l’Europe : Allemagne, Angleterre, Suisse, Autriche…

-       un nombre incroyable de fruits frais mixés

-       145 millions de chiffre d’affaires

-       une illustre société mère : Coca Cola depuis 2010

-       un site intelligent : www.innocent.fr sur lequel nous allons passer un peu  plus de temps

Un site web qui donne du punch

site internet innocent


A peine arrivé sur ce site que se dégage une impression de fraicheur représentive du plus produit de la marque( à savoir 100 % frais)

Les couleurs sont dynamiques, actuelles à l’image de nos petits smoothies.

couleurs innocent

Pas étonnant qu’on est la pêche !

Le site mélange  à la fois du graphisme pour les icônes et  des photos de packshot produits. Le  contraste entre les images et l’arrière plan permet une bonne visibilité. De plus la charte graphique est claire et la marque est facilement reconnaissable grâce à son logo ludique.

La plupart du temps innocent utise des élèments graphiques, clairs  pour signifier ces différentes rubriques. L’arbre pour l’éthique ou encore le téléphone  pour prendre contact.

arbreappel
De plus, on trouve beaucoup de verdure puisque la marque est très sensible à  la préservation de l’environnement, et n’utilise que des emballages recyclables. Innocent s’engage également à redistribuer 10% de ses profits annuels dont la majorité sont reversés à sa fondation.

photos innocent

Le head nous montre les principales rubriques qui sont au nombre de six :

-       nos boissons

-       nous

-       notre éthique

-       notre famille

-       emplois

-       tout sur innocent

head innocent

Dès qu’on clique sur une nouvelle rubrique  les informations  sont trouvées rapidement comme par exemple les recettes ainsi que leur composition ce qui prouve que le site dispose d’une bonne ergonomie.

boissonsinnocent

Un Discours décalé, proche des consommateurs

Innocent c’est tout au second degré. Une volonté de ne pas se prendre au sérieux tout en restant proche du consommateur. En effet que ce soit par ses graphismes rigolos ou dans le choix  de son ton rédactionnel, la marque joue avec les mots et avec nous.

Elle invite à avoir une communication de proximité puisqu’ elle nous propose de passer les voir à leur site ou encore de leur envoyer des suggestions par mail ou d’adhérer à la newsletter afin de devenir membre à part entière de cette grande famille de fruits.

redaction innocent

Un site est bien fait

Pour donner naissance à un petit site innocent mélangeons :

De l’HTML, du CSS, du RSS  ainsi que du PHP.

ça a l’air sympa,  Mais ça sert à quoi ?

Pour tenter de trouver une explication,  plongeons dans le code source :

code source

Tout d’abord   on remarque que ce site est interactif grâce au Framework et est fait pour la plupart en HTML, mais pas n’importe lequel puisqu’il est généré par un logiciel Worldpress.

Ce logiciel  fait en  PHP et MySQL permet de faire des publications de presse ainsi qu’un blog. L’avantage est que le site est rapide et offre la possibilité à n’importe qui de rajouter des informations. Pas besoin d’être un pro de l’informatique.

Le site nous propose également la possibilité de s’abonner à une newsletter, permise ici grâce au flux RSS. Cette newsletter vous permet deux choses : de trouver une nouvelle famille celle des fruits si vous en rêviez. Mais aussi à  Innocent de pouvoir affiner ces cibles au travers de critères qualitatifs puisque vous devez entrer votre adresse, votre date de naissance.

newsletter innocent

Etant que donné que Innocent est  une marque internationale. La marque avait la nécessité de pouvoir traduire son site en plusieurs langues. Pour cela une table de caractère UTF 8 était donc inévitable  puisqu’elle  est la table d’encodage la plus générique actuellement.

Grâce à cela, il vous suffit de cliquer sur les drapeaux en bas à droite pour arriver sur la page de la langue que  vous souhaitez .

drapeaux innocent

La présence du logo d’innocent dans l’onglet  permet d’identifier le site parmi d’autres quand d’autres pages sont ouvertes.

Pratique au cas on perde de vue nos smoothies !

onglet innocent

Enfin on trouve du  css,  élément essentiel afin d’avoir un site  plus ou moins graphique

http://www.innocent.fr/wp-content/themes/innocent/style.css

en tapant cela vous arrivez  directement sur la fiche css et vous avez toutes les informations concernant la police utilisée, les couleurs, les marges…. Magique!

Par exemple :

body { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333; text-align:left;}

Un dernier élément important apparaît  à la fin du code source, la présence de Google analytics  permettant de savoir combien de visites il y a eu sur le site.

<!– GOOGLE ANALYTICS –>

Bref  Innocent  c’est un site  sympathique et coloré, simple à l’utilisation et de très bonne qualité.

A consommer sans modération comme ses smoothies !

Créer une bannière publicitaire avec un texte animé !!

Wednesday, April 20th, 2011

Hello Everybody !

Mon tutoriel va aujourd’hui vous apprendre à faire une animation sous Photoshop CS4 (ou CS5) que vous pourrez utiliser par la suite comme je l’ai fais pour la création d’une bannière publicitaire. Cela vous permettra,en un rien de temps, de réaliser une bannière ludique, et attirante pour l’internaute naviguant sur le web.

L’objectif est de faire disparaître et apparaître un texte en fondu. Nous allons donc voir pas à pas la procédure à appliquer !

  • 1 : Le fond

Créez un document de 468×60 pixels que vous remplirez selon votre goût.

Pour ma part j’ai réalisé un dégradé horizontal de la couleur : #ea38a6 à  #ffffff

1

Puis j’ai ajouté à cette bannière le logo de Closer sur la gauche.( fichier > ouvrir > logo closer que nous plaçons sur la bannière)

2

Pour embellir cette bannière j’ai choisi de réaliser des brushes Photoshop.

(Pour ceux qui ne savent pas en quoi cela consiste c’est très simple, vous téléchargez des brushes sur des sites spécialisés comme brusheezy ou chez plumeau puis à l’aide du pinceau vous l’ajoutez dans vos créations. Les brushes sont très pratiques pour ajouter des motifs à vos bannières, à vos affiches… en revanche il faut faire attention car beaucoup d’entre eux pixélisent en grande dimension)

A l’aide du pinceau, j’ai dessiné 4 petites figurines de mode. ( j’ai choisi le noir en référence au code couleur du magazine closer…)

5

4

  • 2 :  Le texte

Tapez votre texte au choix et appliquez différents styles de calques.

Pour ma part j’ai utilisé une police simple, Arial, en Bold et Bold italic, mais il y a des polices très originales que vous pouvez télécharger gratuitement sur le site dafont (si vous souhaitez plus de fantaisie !!); puis j’ai appliqué à l’aide de l’option de fusion (calque > style de calque > options de fusion) une lueur externe mode superposition.

6

8

Voici ce que vous devez obtenir avant de commencer l’animation :

9

  • 3 : l’animation

Ouvrez la fenêtre animation (menu Fenêtre > Animation)

10

Voici la fenêtre qui doit s’afficher à vous ! Je vous fais un petit descriptif des boutons principaux.

17

1. Play – Pour jouer l’animation.

2. Trajectoire – Pour faire les transitions entre les calques.

3. Nouveau calque.

4. Suppression de calque.

5. Contrôler le nombre de fois où l’animation se rejouera.

6. Pour sélectionner la durée d’affichage d’un seul calque.

Une fois la fenêtre d’animation ouverte vous devez créer un nouveau calque. Une deuxième petite vignette doit s’afficher :

12

Etant donné que nous voulons faire disparaître le texte en fondu, vous sélectionnez la deuxième vignette puis vous allez dans votre calque texte (fenêtre > calque) et vous réduisez l’opacité du calque (options de fusion) sur lequel il y a votre texte à 0 ou 1%.

13

Nous allons maintenant créer une transition entre ces 2 calques.

Cliquez donc sur l’onglet trajectoire (voir ci dessous) :

14

Une dizaine de calques doivent s’afficher dans la fenêtre (animation images).

Appuyez sur play ,depuis le premier calque, pour voir l’apercu de votre animation.

15

Voilà , votre animation est enfin prête , mais il reste quand même un tout petit détail :

Pour enjoliver l’animation , il faut que le texte s’affiche un peu plus longtemps avant de disparaître. Pour ce faire, changez la durée d’affichage de votre premier calque (dans la Fenêtre d’animation) en 0,2s par exemple ou selon vos besoins.

18

16

Maintenant il faut que vous enregistriez votre travail en gif animé.

  • 4 : L’enregistrement

Vous pouvez enregistrer votre travail en gif animé en allant sur Fichier > Enregistrer pour le Web et les périphériques. Une fenêtre s’ouvre, choisissez la meilleure bannière (gif) puis cliquez sur Enregistrer .

23

22

Voici votre bannière publicitaire terminée avec une jolie animation qui attire l’oeil des internautes !!

banniere pub

Tutoriel Photoshop:Créer une barre de navigation originale

Tuesday, April 19th, 2011

Créer une barre de navigation originale sur photoshop

Ce tutoriel va vous apprendre à réaliser une scroll barr/ barre de navigation pour votre site internet.

Voici les différentes étapes que vous allez devoir suivre:

-Créez un nouveau document A4 sur photoshop CS5.

-Créez un rectangle fin avec l’outil rectangle arrondi.

1

 

 

 

 

 

 

 

 

 
-Sur ce rectangle, vous allez créer plusieurs effets, pour ce faire cliquez sur le menu calque, modifiez
l’ombre interne et l’incrustation couleur. 

2

 

-

 

 

 

 

 

 

 

3
 

 

 

 

 

 

 

 

-Créez un nouveau calque afin de réaliser un premier bouton.
-Avec l’outil rectangle arrondi de nouveau, dessinez un carré de la même hauteur que la barre en
maintenant la touche shift.
-A ce nouveau bouton, appliquez un style de calque “incrustation en dégradé” et effectuez les réglages
comme ci-dessous4 premier.

 

 

 

 

 

 

 

 

-Pour ajuster les teintes du dégradé comme ci dessous voici les réglages des deux teintes choisies
(R :184 V:195 B:186 gris clair et gris foncé R: 109 V:109 B: 109).

4

 

 

 

 

 

 

 

 

 
-Afin de créer le second bouton que vous placerez à l’extrémité de la barre, dupliquez ce dernier
calque et placez le à l’opposé du premier.

6

 

 

 

 

 

 

 

 

 
-Il faut maintenant placez une flèche sur votre bouton, avec l’outil rectangle, créez un carré de petite taille.
-Tournez le à 90° afin de transformer le carré en losange. (Menu > Edition > Transformation du tracé > Rotation).
-Placez le losange au centre du bouton.

8

 

 

 

 

 

 

 

 

 
-Prenez l’outil selection directe et cliquez sur l’angle droit, appuyez ensuite sur la touche supprimer
et la flèche est faite.
-Dupliquez ensuite le calque de la flèche puis effectuez une rotation à 180°.
-Appliquez les mêmes effets aux deux flèches que ceux appliqués à la barre rectangulaire de départ.

10

 

 

 

 

 

 

 

 

 
-Pour finir créer un nouveau rectangle arrondi qui sera le curseur de votre barre. La hauteur de ce
rectangle doit être légérement inférieure à celle de la barre.

11

 

 

 

 

 

 

 

 

 
-Appliquez ensuite un nouveau style de calque. Séléctionnez l’option incrustation en dégradé, puis
ombre portée comme ci dessous. Vous pouvez ajuster votre curseur aux couleurs de votre choix
grâce à l’option incrustation en dégradé.

12

 

 

 

 

 

 

 

 

 

13

 

 

 

 

 

 

 

 

 
Voici le résultat. Votre barre de navigation est enfin terminée.

16

Tuto: créer une bannière animée: easy !

Monday, April 18th, 2011

Une bannière doit être esthétique, percutante et efficace !

Nous choisirons de faire une bannière de format standard: 460 x 60 pixels

Pour mon cas, je vais choisir de faire une bannière pour le blog de VOGUE magazine.

Pour  faire une  bannière avec un texte animé: nous allons procéder par 3 grandes étapes avec PHOTOSHOP CS5 :

Etape 1 : la bannière
Etape 2 : le gif
Etape 3 : la fusion des 2

ETAPE 1 : La création de la bannière :

- Ouvrez Photoshop

- Allez dans fichier > nouveau : document de 468 x 60 pixels

1

- On obtient alors ceci :

2

- Puis on va importer notre logo sur la bannière :

fichier > importer > et vous choisissez votre image

3

- Une fois l’image importée , placez la où vous le souhaitez.

Double clic sur l’image pour qu’elle s’insère dans le fichier

4

- Puis effectuez la même démarche, si vous avez d’ autres images à ajouter sur la bannière.

5

à ce stade nous avons une bannière terminée, simple et classique.

- Pour l’enregistrer vous allez dans :

fichier > enregistrer pour le Web et les périphériques > enregistré

6

= Maintenant nous voulons qu’il y est un message  animé qui apparaisse sur la bannière

(le fait que le texte soit animé cela attire encore plus l’œil et apporte une plus value à la bannière)

Pour cela nous allons passer à l’étape 2 :

Etape 2 : La création du gif :

- Ouvrez toutes les images une par une que vous voulez animer

1

- Rassemblez toutes vos images dans le premier onglet :

- Maintenez le clic gauche puis faites glisser l’image sur l’onglet. (puis fermez l’onglet de l’image qui vient d’être tranférer) : renouvelez cette étape pour chaque image.

2

- Enlevez le cadena de l’arrière plan : double clic gauche sur le calque puis ok

3

- Pour créer l’animation : Fenêtre > animation

4

Si dans la fenêtre animation vous avez ceci :

5

cliquez en bas à droite de cette fenêtre pour basculer de l’animation (montage) à l’animation (image).

- Puis pour avoir nos 3 calques (c’est à dire toutes les images que l’on a importées) : cliquez en haut à droite de la fenêtre animation:

- Sélectionnez : créer des images d’après des claques.

6

- Réglez les images à 1 sec : (clic : ctrl + clic et pour Mac : cmd (pomme) + clic ; pour sélectionner toutes les images ; on garde enfoncée la touche commande)

7

- Pour la transition entre les images : sélectionnez la 1ère image et la 2ème en faisant “cmd + clic” sur les 2 images sans lâcher  la commande “cmd”

8

- Puis allez dans transition (trajectoire) : mettez:  ”2″  à: images à ajouter, puis > ok.

- Puis faites de même pour les images 4 et 5, et ainsi de suite (selon le nombre d’images que vous avez)

9

- Pour faire retourner l’animation au début vous prenez la dernière et la première image (toujours: cmd + clic) et alt + clic (ce qui met automatiquement les mêmes paramètres que pour les autres transitions entre les images)

10

- Puis sélectionnez toutes les images de transition et mettez: 0,1 sec

11

- Pour que le texte défile en continu : sélectionnez «toujours» en bas à gauche de la fenêtre :

12

- Pour l’enregistrer : fichier > enregistrer pour le web et les périphériques > enregistrer > puis nommez le, par exemple «  gif »

(testez le, en prenant le fichier gif , puis faites le glisser dans votre moteur Web)

voici le résultat :

gif-tuto

Maintenant il nous reste plus qu’à introduire notre gif animé dans notre bannière.

Etape 3 : la fusion de la bannière avec le gif :

- Toujours sous photoshop > ouvrir > « bannière » (la bannière que vous venez de créer) puis dans un autre onglet ouvrez votre «gif »

- Allez dans l’onglet du gif , puis dans la fenêtre d’animation (image), petite flèche en haut à droite > sélectionner toutes les images > copier les images.

20

- Maintenant, comptez le nombre d’images d’animation qu’il y a dans la fenêtre. (pour mon cas, il y en a 9)

- Ensuite , allez dans l’onglet «bannière» et cliquez sur l’image fixe qui se trouve en bas à gauche de la fenêtre animation :

21

- Puis, dupliquez l’image en appuyant sur  l’icône : «  duplication des images sélectionnés « qui se trouve  en bas de la fenêtre d’animation (à gauche de l’icône « poubelle »)

ATTENTION : Cliquez selon le nombre d’image que vous avez compter auparavant. Moi je clic 8 fois, car j’avais 9 images d’animation : 8+1 (image fixe : bannière) = 9 images)

22

- Puis rappuyez sur la petite flèche en haut à droite de la fenêtre animation.

-Puis sélectionnez:  Sélectionner toutes les images > coller les images.

= Une fenêtre apparaît : cochez : coller la sélection > ok

24

- Maintenant si vous voulez déplacer le gif, sélectionnez la 1 ère image et déplacez le avec l’outil déplacement. (flèche noir)

- Puis : fichier > enregistrer pour le web et les periphériques > enregistrer > ok

- Pour la visualiser : prenez votre fichier, puis faites la glisser dans votre moteur Web.

ATTENTION : vérifiez le nombre de secondes en bas des images de la fenêtre d’animation. (Choisissez le nombre de seconde que vous souhaitez.)

voici la bannière animée terminée:


tuto-banniere

Luxueuse mise en scène

Monday, April 18th, 2011

Analyse du site internet

www.chanel.fr


1


Ce site est réellement prodigieux et exemplaire. Il a réussi à inclure tout ce dont on a besoin sur un site et un aspect graphique vraiment réussi.

Il respecte les valeurs suivantes qui sont pour moi primordiales et qui montrent la qualité d’un site web.

  • Rapidité d’affichage
  • Sobriété
  • Clarté de la présentation
  • Mise à jour fréquentes et de qualité

Le secteur du luxe est défini par trois critères : la visibilité de la marque ou de la maison (nom des entreprises du luxe), la temporalité (référence culturelle) et l’aboutissement (la performance, la qualité).

Depuis l’ergonomie Apple, je n’ai pas trouvé de site (luxe ou autre d’ailleurs) qui satisfassent complètement un désir de pureté, d’expérience immersive, et surtout d’ergonomie, Voila qui est fait !

Organisation générale du site www.chanel.fr

Voici un mini décryptage  qui je l’espère vous convaincra que ce site est le symbole de l’aisance de navigation on-line dont les marques du luxe devraient s’inspirer à l’avenir.

Coco chanel.

« Si une femme est mal habillée, on remarque sa robe, mais si elle est impeccablement vêtue, c’est elle que l’on remarque »

Un adage qui s’applique bien au site Chanel mode. Il est tellement bien structuré qu’on ne remarque rien, rien si ce n’est son contenu. Aucuns éléments ne viennent gêner ou attirer l’attention mise à part les modèles, et les informations données… Une timebar d’une clarté totale. Contrairement au site dans sa version précédente, tout est accessible de manière intuitive et quasi immédiate. Le taux de clic pour arriver à la rubrique que l’on souhaite voir est très faible cela en est presque déconcertant. La cohérence du système de navigation est quasiment parfaite de sorte que, où que vous soyez dans le site, l’on ne cherche même plus comment naviguer d’une rubrique à l’autre. Tout est intuitif et facile. Les boutons sont très peu nombreux et offre beaucoup d’aisance à l’internaute. Les pages s’enchainent comme si tout avait été fait pour faciliter les choses, les rendre agréables, éviter de fatiguer l’œil, éviter de perdre du temps. On a l’impression que l’expérience on line se rapproche sensiblement de l’expérience in store. L’on est guidé, servi discrètement et rapidement pour nous éviter l’attente ou la frustration.

Ce qui nous inspire le plus c’est vraiment la facilité d’éxecution, la clarté du site. Bref ça respire ! La découverte des collections rappelle la fluidité des robes de Chanel, son désir incessant de permettre le mouvement, l’aisance du geste, la liberté.

Les visuels et packshots sont présentés de manière à offrir une véritable immersion dans l’univers de la marque. Passage au roll sur des modèles des différentes collections, les images sont assez grandes pour avoir une bonne vision d’ensemble, et les passages relativement simplistes entre les différentes collections.

12

Le positionnement du site, cohérent avec les valeurs de la marque

Le site est en cohérence totale avec les valeurs de sa marque. Rien n’est gratuit, rien ne semble appartenir à un autre univers que celui de Coco Chanel.

Les couleurs et la charte graphique sont bien sur le blanc et le noir mais il faut noter que le site n’a pas ce côté froid et distant. Au contraire, il est aérien, il respire, il souligne le beau sans le rendre inaccessible. Les deux couleurs sont souvent utilisées ensemble pour symboliser une complétude, un absolu, une dualité totale, comme le Yin et le yang.

L’espace est conçu pour mettre en valeur l’aspect visuel, peu de texte, beaucoup de vide pour plus de pureté et de la vidéo lorsque c’est utile uniquement. Nous avons d’ailleurs la possibilité de regarder les derniers défilés en full screen avec une qualité d’image remarquable pour du web. On mise donc encore une fois sur l’excellence bien représentative de la marque.

2

La communication de luxe est à destination d’une cible de plus de 25 ans disposant de revenus plus élevés que la moyenne et ayant un haut niveau d’étude. Une étude à démontré que la consommation de produits de luxe était plus élevé ( plus de 80% en 2000) chez les hauts revenus, et la fréquence d’achat supérieure (plus de 40% une fois par mois) chez ces individus. Or on voit se développer des produits de luxe destinés à un population de plus en plus jeune. Actuellement beaucoup d’acteurs du luxe, s’interrogent sur la manière d’aborder les jeunes consommateurs.

Les « jeunes » (18-20 et 20-26 ans) sont des consommateurs « intéressants », cette cible est une des préoccupations de certaines maisons. Les jeunes représentent un nouveau marché qu’elles commencent à développer avec des produits. Mais pour toucher les jeunes, il faut avoir une autre démarche que la communication traditionnelle, il faut aller vers eux. Internet peut être un bon vecteur de communication. Or les internautes ont une vision très traditionnelle et classique du luxe, même s’ils constituent, par nature et dans de nombreux domaines, l’avant-garde des consommateurs.

Graphisme

Le site a peu d’amplitude mais tous les détails sont travaillés a fond. Le perfectionnisme est tel qu’on dirait que les images ont été travaillées comme pour du print. Cette qualité dans la finition est rare sur le web ou les problèmes de pixellisation d’images trop grandes sont moins fréquents. Toutes les images sont mis en valeur une à une, on respecte le travaille artistique du site, le regard n’est jamais perdu, mais au contraire complètement absorbé.

La précision extrême de l’image associée à la navigation fluide est aussi formidablement immersive. On se croirait près des podiums. Rien n’est laissé au hasard pour satisfaire l’appétit visuel de l’internaute. On a presque l’impression de pouvoir toucher les matières. (taille 1024*768)

13

Seul regret, on ne peut pas télécharger immédiatement chaque image ou vidéo pour en faire un fond d’écran ou voir le défilé sur son portable.

Référencement

Le site est en full flash :

Un site en Flash est un site internet constitué de pages réalisées avec Adobe Flash®, éditeur de contenus animés. Flash autorise en effet, une grande créativité graphique, animations, effets visuels, son et interactivité. C’est le cas dans les secteurs de la mode, l’artisanat d’Art, le tourisme, la joaillerie, etc… 

Il vous faudra alors insister sur la qualité du visuel pour vous démarquer de vos concurents. Cette technique à l’avantage de présenter aux internautes (ainsi qu’à vos clients et prospects) une image valorisée de votre société ou de vos produits.

Flash est une technologie qui est souvent utilisée pour renforcer l’impact visuel des sites internet, il permet la création des animations et des effets graphiques impossible à obtenir avec des langages statiques ou dynamiques. Flash est l’outil idéal pour les secteurs qui misent sur l’image pour communiquer.

8

Chargement et détails techniques

Les temps de chargements sont réellement courts pour un site avec quantités de vidéos, de visuels full screen etc… aucune frustration, le site permet de visualiser ce que l’on désire sans perdre de temps ou de flâner en passant d’une vidéo à l’autre sans temps morts.

7

Contenu éditorial et rédactionnel

Aujourd’hui, l’internaute désire avant tout qu’on lui offre du contenu étoffé et régulièrement enrichi. Il ne retourne sur un site que si chaque fois il est nourri, surpris de découvrir de nouvelles informations, de nouvelles histoires à raconter… Il faut du contenu de qualité, même lorsqu’on a une image qui suffit à faire rêver. Et justement, pour la plus part des sites du luxe, tout est trop souvent axé sur l’image et le contenu éditorial est considéré comme secondaire. Dans le cas de Chanel mode, forme et fond sont à la hauteur de ce qu’on attend.

6

5

C’était sans compter la rubrique Chanel news où l’on retrouve kyrielle d’informations sur la marque, sur l’actualité de la marque, les défilés, sur Karl Lagerfeld etc. Il est vrai que La communication de la marque Chanel se fait essentiellement autour de la personnalité de Karl Lagerfeld et de sa célèbre allure de dandy. Vous pourrez voir sur Chanel news le court-métrage qu’il a réalisé dernièrement.

10

Pour voir la vidéo du dernier court métrage “Windows world” de Karl Lagerfeld cliquez ici !

Petit plus :

Découvrez un nouveau “windows world” à chaque saison et admirez les pré-collections de chanel, incroyable tant dans la navigation que dans le visuel.

9

11

Ce site est une petite merveille du genre que je vous invite à aller voir.


chanel-logo2