Archive for the ‘Uncategorized’ Category

Tuesday, May 17th, 2011

COCA_COLA_LOGO_blanc

J’ai choisi d’étudier le site internet  www.coca-cola.fr

accueil

Un site web bien ancré dans la communication générale de la marque

www.coca-cola.fr est un site institutionnel, il vient compléter et appuyer la communication générale de Coca-cola France.
Ce site sert à présenter  toute la gamme de produits proposés par la marque (les différentes boissons).
Il informe également l’internaute des différents concours organisés par Coca-cola France, des événements sponsorisés dans les milieux du sport, de la musique, de la mode, des jeux vidéo.
La vocation écologique de la marque est aussi exposée ainsi que les publicités et les goodies à télécharger (fonds d’écran, écrans de veille, émoticônes).

barre accueil

 

 

 

Coca-cola, ancien symbole de l’Amérique, est aujourd’hui une marque qui véhicule le positivisme, un mode de vie dynamique et heureux.
Les objectifs de la marque sont de promouvoir une boisson rafraîchissante, destinée aux adultes comme aux enfants, qui se boit dans la vie quotidienne comme pendant les grands événements, l’objectif de chaque campagne de communication de la marque est de rendre cette boisson encore plus indispensable et mythique qu’elle ne l’est déjà, et si c’est possible encore plus proche de chaque consommateur.
Le cœur de cible de la marque est constitué des français entre 15 et 24 ans sensibles à l’univers créatif et  pétillant de Coca-cola, appréciant la fameuse boisson autant pour son goût unique et inchangé depuis 125 ans que pour les légendes qui l’entoure.
Il existe cependant des produits commercialisés par la marque possédant un cible plus définie :

- Coca-Cola light cible les femmes entre 25 et 35 ans, avec comme idée « que les femmes soient vraiment elles-mêmes ». Ils ont notamment fait un partenariat avec Nathalie Rykiel pour le design d’une bouteille édition limité « Vivez light ».

 - Coca-Cola Zéro est un produit destiné quant à lui aux hommes entre 16 et 24 ans. Il s’agit du positionnement, mais dans la réalité, le produit est consommé par une cible beaucoup plus large. Le slogan de la boisson est  « L’impossible devient possible » et 40% de notoriété a été atteint avant même le lancement des publicités TV.

Depuis quelques années, Coca-cola adopte une promesse qui joue sur le positivisme, une personne consommant cette boisson aura plus de facilité à atteindre le bonheur et à vivre une existence heureuse. Le ton de la communication est dynamique et joyeux.

Le site internet www.coca-cola.fr vient donc parfaitement s’inscrire dans la stratégie de communication de la marque. La marque a toujours su jouer sur ses valeurs uniques, son site présente donc naturellement tout l’univers de la marque. De plus il apporte à la marque l’intérêt de présenter l’ensemble de sa gamme, ce qu’il n’est pas possible de faire avec les autres médias, où un produit nécessite d’être mis en avant pour un impact plus grand.
Ce site permet à la marque de présenter sa démarche environnementale en détails.

3

Un graphisme intéressant

Le site est dynamique et coloré.
Ce jeu de couleurs vives est en accord parfait avec le positionnement joyeux et dynamique de la marque.
En effet la couleur de la charte graphique : l’emblématique rouge coca-cola est accompagné ici de couleurs vives telles que le jaune, le vert, le orange.
Dans la signification des couleurs, le fait d’allier ces couleurs est symbole de force, d’activité de positivisme.

4

On note également que les illustrations graphiques viennent en complément des couleurs, appuyer le positionnement positiviste de Coca-cola :
des arcs en ciel, des rayons de soleil, des bulles, des fleurs écloses.
C’est par ses couleurs et sa simplicité graphique que le site est le plus en accord avec le positionnement de la marque.

5

Un message clair

L’aspect rédactionnel est quant à lui plutôt simple. Coca cherche dans ses messages comme dans l’ensemble de sa communication à s’adresser à tous.
On interpelle directement la cible avec des « vous », l’utilisation d’impératif visant à attirer l’attention du lecteur.
Coca essaye d’interpeller et d’intégrer le plus possible sa cible dans sa communication.

6

Une organisation ludique et simple d’utilisationComme on peut le constater ci-dessous, l’arborescence du site coca-cola est très simple. La navigation est fluide et claire.
Dès son arrivée sur la première page, l’internaute est projeté dans ce monde onirique et particulier propre à Coca-cola.
L’internaute peut découvrir le dernier jeu concours, la dernière publicité ou l’ensemble des produits cocas.

 

7

Les détails techniques

Ce site internet utilise un langage HTLM. Ce langage présente des avantages certains, il est simple à utiliser et aucun logiciel spécialisé n’est nécessaire pour composer des pages HTML.
C’est un langage de programmation qui permet de donner des informations sur la structure de texte (titre, caractère gras, centrer…) du document tout en laissant au navigateur la charge de la présentation du texte.
Pour le site internet www.coca-cola.fr le langage HTLM est le code de base, mais du langage JavaScript est utilisé à l’intérieur de ce dernier.
Le langage JavaScript est quant à lui un alternatif au Flash, les animations et l’affichage sont rapides.
C’est un codage réactif et dynamique. Ce codage offre aussi la possibilité d’interagir avec les internautes présents sur le site.

8

Transformer une Photographie en 3D Anaglyphe

Monday, May 16th, 2011

Vos créations prennent du relief

A l’heure des Avatars, et autre Dragons de dessins animés diffusés au cinéma en 3D, il est normal d’y consacrer un bref tutoriel.

Nous allons voir comment transformer une photographie (ou plutôt deux plus exactement) en une photographie en 3D anaglyphe (visible avec les lunettes rouges et bleu).

Tout d’abord, que veux dire anaglyphe ? C’est une image imprimée pour être vue en relief, à l’aide de deux filtres de couleurs différentes disposés devant chacun des yeux de l’observateur.

anaglyphe_lunettes

J’ai choisi cette méthode, car c’est la plus simple à réaliser, la plus rapide et la moins coûteuse. Dans les autres cas, vous auriez du acheter un appareil photo 3D ainsi que des lunettes actives (ou passives) et l’écran qui va avec. Vous aurez besoin uniquement de photoshop et d’une paire de lunettes Rouge et Cyan en carton (dénicheable sur ebay pour moins de deux euros).

Commencons dès maintenant.

Vous devez vous munir en premier ordre de deux photos. Ces photos doivent êtres très similaires : lorsque vous prenez vos photos, faites en sorte de décaler très légèrement votre appareil sur le plan horizontal et non sur le plan vertical. De la même facon que si vous aviez pris une photo au niveau de l’oeil droit et ensuite de l’oeil gauche.

Voici les photos que j’ai choisi :

1

La première est celle correspondant à l’oeil gauche, la deuxième correspond à l’oeil droit.

Importez alors les deux photos dans photoshop, nous travaillerons uniquement sur la photo “gauche”.

Choissisez la couleur #00FFFF en couleur de premier plan. Créez un nouveau calque pluis remplissez le avec cette couleur (apellée Cyan).

Dupliquez ce calque.

3

Allez dans :

  • Image > Réglage > Négatif

Ou faites simplement CTRL + I. Le calque est devenu rouge. C’est la couleur opposée au Cyan. 5 en RGB le cyan est 0 – 255 – 255 le rouge est 255 – 0 – 0.

4

Importez en suite par simple glisser déposer votre photo de “droite” dans le projet puis glissez la sous le calque Cyan. Placez ensuite votre photo “Gauche” sous le calque rouge. Vous devez avoir votre calque “Droit” en bas, au dessus le calque “Cyan”, au dessus l’image “Droite” puis enfin le calque Rouge. (double cliquez sur un calque si il est verouillé).

Désactivez les calques Rouge et Cyan (cliquez sur le petit oeil dans la fenêtre des calques).

6

Puis baissez l’opacité de la photo de droite à 50. Enfin vérifiez que les deux calques sont bien sur le même niveau horizontal. Si necessaire ajustez les calques et rognez si necessaire avec l’outil recadrage (C). Afin d’obtenir quelque chose de semblable à ceci :

11

Repassez ensuite l’opacité de votre calque à 100%.

Réactivez le calque de couleur Cyan puis passez le en mode Superposition.

7

Fusionnez les calques Cyan et “Droite” puis passez ce calque en mode Produit.

Activez et passez le calque Rouge en mode Superposition.

Enfin placez le calque “Droite + Rouge”  par dessus tout vos calques.

10

Vous devez obtenir le resultat suivant : On distinque alors le serpent au premiers plan, et on remarque que les autres éléments se détachent du décors.

9

Créer une illustration avec des symboles

Friday, May 13th, 2011

Pour créer un portrait ou une illustration avec des symboles :

- Choisissez une photo
- Importez votre photo sur Illustrator (Fichier + Importer)
- Choisissez les symboles que vous souhaitez utiliser pour faire votre portrait, en fonction de vos compétences et de vos capacités sur Illustrator ce choix est déterminant pour la réussite de l’illustration.
- Une fois les symboles sélectionnés, importez-les sur Illustrator (Installez la police sur votre ordinateur si ce n’est pas encore le cas puis sélectionner l’outil texte (T) et tapez les symboles)
- Vectorisez (Clic droit + vectoriser)  les symboles afin de pouvoir librement les utiliser
- Diminuez l’opacité de la photo afin de mieux travailler dessus (outil transparence et diminuer l’opacité de de 100% à 60%)
- Commencez d’abord par les traits de contour du visage avec les plus symboles les plus linéaire en les dupliquant (« Ctrl + C » copier et « Ctrl + V » coller)  et modifiant la taille du symbole pour mieux l’accorder en fonction des zones
- Zoomez et faites en de mêmes pour les détails maintenant.
- Sélectionnez la photo d’origine en arrière-plan et effacez la maintenant tous devriez obtenir un résultat proche de celui-ci

Portrait final
- Enregistrez votre travail sous le nom « illustration 1 » (« Maj + Ctrl + S » en choisissant le format pdf pour pouvoir conserver l’illustration sans le fond blanc et garder un résultat de bonne qualité
- Pour améliorer un peu l’illustration, passez maintenant sur Photoshop
- Importer tout d’abord le fond papier millitré
- Importez ensuite le fond effet papier froissé et modifiez ses paramètres de fusion pour obtenirTuto3 assurez-vous que le papier froissé se trouve bien au-dessus du papier millimétré
- Enfin vous pouvez rajoutez quelques taches d’encres grâce à l’outil pinceau pour améliorer un peu votre travail ( Sélectionnez l’outil pinceau puis cliquez sur la petites flèche Tuto6 prêt de l’icones  pour obtenir le menuTuto7

- Cliquez encore sur la petite flèche sur le côté et choissisez Charger les formes vous pouvez trouvez des formes de finceau sur http://www.tutsps.com/index.php?category/T%C3%A9l%C3%A9chargement/Brush

Tuto2

Un bouton animé Twitter

Friday, May 13th, 2011

Aujourd’hui, nous allons apprendre comment créer un bouton original pour votre page sur les réseaux sociaux; ici, pour inviter des individus à vous suivre sur Twitter.

bouton-twitter

Pour cela, vous aurez besoin de Photoshop (ici version CS5), de rigueur et d’un peu de patience !

Etape 1: Créez un nouveau document sur Photoshop. Fichier > Nouveau et complétez comme ci-dessous:

01

Etape 2: Dans la palette des calques à droite, renommez votre calque en “rectangle arrondi bleu”

02

Etape 3: Dans la palette des outils, sélectionnez le rectangle arrondi avec un rayon de 10 px. Code couleur : R180 V 225 B249

03

Vous avez ainsi votre base et obtenez alors ce ceci:

04

Etape 4: Créer un nouveau calque que vous nommez “bulle”

05

Etape 5: Dans la palette des outils, sélectionnez le rectangle arrondi avec un rayon de 10 px. Code couleur : R 250  V 184  B7

Vous obtenez alors ceci :

05bis

Etape 6: Créez un nouveau calque que vous nommez “triangle bulle”

06

Etape 7: Sélectionnez l’outil polygone à 3 côtés avec comme code couleur : R 250  V 184  B7

07

Etape 8: Tracez votre triangle à coté du rectangle arrondi comme ceci :

08

Etape 9: Sélectionnez les 2 calques “bulle” et “triangle bulle” et fusionnez-les.

09

Renommez le nouveau calque en “bulle”

Etape 10: Sélectionnez le calque “bulle” et cliquez sur fx en bas de la palette des calques.

10

Etape 11: Ajoutez une ombre portez comme ceci avec comme comme code couleur : R140  V99  B15

11

Vous obtenez alors ceci:

12

Etape 12: Importez ensuite vos images. Ici, j’ai choisi d’importer 3 images un peu différentes de l’oiseau de Twitter pour ensuite donnez l’impression qu’il bouge.

13

Etape 13: Sélectionnez l’outil Texte

14

Etape 14: Écrivez “Follow me” en code couleur R140  V99  B15

15

Etape 15: Resélectionnez l’outil texte et écrivez maintenant “on Twitter”. Voici :

16

Etape 16: Dans la palette des calques, masquez les textes “Follow me” et “on Twitter”

Etape 17: Pour commencer l’animation, faites Fenêtre > Animation

Etape 18: Dans la barre d’animation, ajoutez un nouveau calque

18

Etape 19: Dans la palette des calques, cochez “Follow me” pour que le texte apparaisse.

Etape 20: Dans les calques de l’animation, cliquez sur “trajectoire des images animées” et mettez les informations suivantes:

19

Vous obtenez alors ceci :

20

Etape 21: Créer ensuite un nouveau calque dans l’animation et cochez “on Twitter” pour que le texte apparaisse

Etape 22: Dans les calques de l’animation, cliquez sur “trajectoire des images animées” et mettez les informations suivantes. Vous obtenez alors ceci :

21

Etape 23: Créez un nouveau calque dans l’animation

Etape 24: Dans la palette des calques, cochez “oiseau-twitter-2″ et masquez “oiseau-twitter-1″

22

Etape 25: Ensuite créez un nouveau calque dans l’animation, ou vous cocherez “oiseau-twitter-3″ et masquez “oiseau-twitter-2″

23

Une fois que vous avez compris le principe, vous pouvez procédez à cette manipulation le nombre de fois que vous voulez. J’ai ici fait 3 séquences.

Etape 26: Cliquez sur le menu déroulant et cochez 0,2 secondes

Etape 27: Au début des claques de l’animation, vérifiez que “toujours” est coché, ce qui permettra de mettre l’animation en boucle :

26

Etape 28: Enregistrez ensuite votre fichier. Fichier > Enregistrer pour le web et les périphériques

27

Etape 29: Enregistrez en format GIF

Et voilà !

bouton-twitter

JE VEUX UN NOM DE DOMAINE !

Wednesday, May 11th, 2011

Obtenir un nom de domaine est une étape primordiale avant de créer son site internet. Le nom de domaine est donc une adresse utilisée pour se connecter sur son site internet.

Qu’est ce qu’un nom de domaine ?

Chaque ordinateur est enregistré sur Internet via une suite de chiffre appelée adresse IP qui pose des quelques problèmes de mémorisation. Pour pouvoir faciliter l’identification, le nom de domaine a été créé pour correspondre à chaque adresse IP.

Un nom de domaine est toujours composé :

-   d’une suite de caractères (lettres de A à Z et/ou chiffres de 0 à 9 et/ou le tiret)  Ces caractères correspondent au nom  d’une marque, d’une société, d’un particulier, etc.

-   et d’un suffixe (.fr, .de, .net, .com, etc.).

Un nom de domaine est constitué de plusieurs éléments :

  • Un préfixe : Il s’agit des trois W (World Wide Web)
  • La racine: le nom de l’entreprise ou de l’activité pratiquée (ex : Iscom). La racine peut être constituée de plusieurs mots, soient séparés (forcément par un tiret) ou accolés.
  • Un suffixe (appelé aussi extension) séparé de la racine par un point, ex : .fr, .com

=> La racine et le suffixe forment ce qu’on appelle le nom de domaine, ex : iscom.fr

=> Une adresse Internet correspond à la réunion des trois W, appelés aussi le préfixe (World Wide Web), puis de la racine, et enfin du suffixe. Ex : www.iscom.fr

Il existe deux types de domaines de premier niveau :

  1. les domaines nationaux de premier niveau composés de deux lettres identifiant un pays ou un territoire indépendant (exemple : fr pour France, be pour Belgique, de pour Allemagne, it pour l’Italie)
  2. les domaines de premier niveau génériques ne sont pas liés à un pays. Ils sont composés de trois lettres ou plus identifiant généralement le secteur d’activité dans lequel opèrent les individus ou les organisations qui les utilisent (com, net, org, edu, gov, aero, biz, etc.)

DEPOSER SON NOM DE MARQUE

Avant toute chose, il est judicieux, s’il s’agit par exemple d’une création de marque, de vérifier si son nom est disponible. Effectivement, pour se faire, il suffit de se rendre sur le site de l’INPI, dans la rubrique marque afin d’être fixé :

imagequatre

Il faut ainsi effectuer une recherche par nom, en tapant votre nom de marque souhaitée. Ici, nous inscrirons « Design 8B » :

imagecinq

Voici le résultat :

Imagesix

Dans ce cas, le nom de votre marque n’a pas été déposé

Cependant, si nous saisissons un autre nom, tel que « Karakol »:

Imagesept

Nous observons que la marque a été déposée dans plusieurs classes.

Deux possibilités :

-       Si votre société appartient à l’une des classes sélectionnées par l’entreprise, il faudra chercher un autre nom

-       Si votre société n’appartient pas à l’une des classes sélectionnées par l’entreprise, vous pouvez déposer ce même nom.

COMMENT CHOISIR UN NOM DE DOMAINE ?

Il y a plusieurs règles importantes dans le choix de son nom de domaine :

-       le nom de domaine doit être assez court pour être efficace et facilement mémorisable

-       Le nom de domaine doit comporter entre 3 et 63 caractères

-       Le nom de domaine doit être sans accent et sans caractères spéciaux

-       Il faut se renseigner si le nom de domaine désiré n’est pas une marque (voir ci-dessus : site de l’INPI)

-       Le nom de domaine doit également contenir un ou plusieurs mots-clés de votre site web

-       Choisir un suffixe (extension), pour ce nom de domaine, connu tel que .fr ou .com

VERIFIER ET RESERVER UN NOM DE DOMAINE

Lors du choix d’un nom de domaine, même si celui-ci s’avère libre, il faut noter qu’il ne peut pas être acheté à vie. En effet, il peut être seulement loué auprès d’un registre durant une période allant de 6 mois à 10 ans. Auparavant, l’obtention de ces noms de domaine était gratuite ou avec des frais de gestion minimes. Aujourd’hui il faut compter minimum de 10 à 69  euros par an pour une location de nom de domaine en .fr ou .com.

Pour pouvoir réserver un nom de domaine, il faut tout d’abord vérifier si celui-ci est disponible grâce à des outils de vérifications tels que les sites dédiés à cela.

En revanche, si le nom de domaine n’est pas disponible, il est possible de connaître qui l’a réservé grâce à un outil appelé « WHO IS ».

Les outils de vérification sont nombreux. En voici la liste des plus renommés et sûrs qui en complément des services internet proposés (hébergement, création de site) sont mandatés pour effectuer des réservations de noms de domaines :

-       OVH

-       Gandi

-        Amen

-       Mailclub

-       Viaduc

-       etc…

Pour nom de domaine en .fr, il y a un organisme qui gère les noms de domaines en suffixe .fr, appelé l’Afnic (Association française pour le nommage internet en coopération). Cette organisation propose également une liste de prestataires qui ont adhéré à sa charte et qui permettent de vérifier en ligne la disponibilité du nom de domaine souhaité.

La marche à suivre pour réserver son nom de domaine

-       Entrez le nom de domaine que vous désirez réserver

-       Cliquez sur « Vérifiez la disponibilité » ou « Recherchez » : vous verrez plusieurs résultats comportant des extensions différentes (si le nom n’est pas disponible, choisissez en un autre)

-       Choisissez le ou les noms de domaines que vous voulez réserver en les cochant

-       Cliquez sur « Commander »

-       Remplissez le formulaire pour vous identifier (Nom, Prénom, adresse E-mail, coordonnées, etc)

-       Passez au paiement et effectuez la commande

Imagehuit

Imageneuf

Une fois, la commande passée le délai d’activation est très rapide car il est traité en quelques minutes. Cependant, il peut varié selon la ou les extensions choisies et selon l’organisme qui les détient.

Et voilà les cocos, vous serez maintenant les rois du nom de domaine ;-)

La vie en musique

Tuesday, May 10th, 2011

logo-stereomood

On a tous rêvé d’avoir, dans notre vie ou à des moments spéciaux de nos journées, une musique qui correspond parfaitement. On voudrait parfois pouvoir vivre dans une comédie musicale où la bonne chanson arrive au bon moment (si, si).

Grâce au site STEREOMOOD.COM, c’est maintenant possible.


PRÉSENTATION

Le site Stereomood est un site qui permet, en fonction de son humeur du moment, de son état d’esprit d’écouter en ligne des compilations de musiques correspondant à nos envies. “Tuning my emotions”.

C’est une radio internet gratuite qui peut accompagner chaque personne à tous moments de la journée car elle propose des musiques regroupées en ambiances, en thèmes. Chaque instant a donc sa propre playliste.

Stereomood a été crée en Italie en février 2008 par une équipe de 6 amis voulant mettre en place ce que beaucoup de personnes attendaient : des compilations accessibles en un clic et le plus rapidement possible pour toutes nos humeurs, ou pour nos activités.

DESCRIPTION DE LA RADIO

Ils proposent donc un site assez simple, mais très fonctionnel puisque tout se trouve sur la page d’accueil.

accueil

L’image en fond d’écran change assez régulièrement, pour justement permettre de compenser cette simplicité de traité graphique et éviter que le site soit monotone pour ses usagers.

L’arborescence est très simple puisque tout part de la page d’accueil, et l’on est dans tous les menus en un seul clic.

Un clic et on est sur notre compil’ préférée. Un clic et on rentre en contact avec l’équipe. Un clic et on tombe sur la FAQ immédiatement. c’est une structure assez minimaliste mais qui est très pratique et plaisante à manier, car on ne risque pas de se perd. On ne vient pas sur ce site pour se ballader ou pour le regarder, mais pour écouter de la bonne musique: Une fois que notre compilation est mise en route, on fait tout autre chose en écoutant, car chaque thématique regroupe plusieurs milliers de morceaux.

croquis

Ce qui importe le plus dans ce site, ce sont clairement les compositions, les playlists, et peu le graphisme. La qualité des morceaux proposés dans ces compositions est réelle.

On peut bien évidemment suivre la radio sur Facebook et Twitter, sur Flicker, MySpace bien sûr et FriendFeed, grâce aux boutons.  Ce site s’adresse plutôt aux urbains, de 18 à 34 ans, sensibles aux nouvelles technologies et curieux des nouveautés en général, qui aiment partager, échanger sur le net et les réseaux sociaux. Le site crée un lien avec ses utilisateurs, et peut les suivre à tous les moments de leur journée.

GRAPHISME

Nous ne sommes pas sur ce merveilleux site pour son esthétisme.

La dimension de ce site est de 1518 x 0. On peut trouver cette information dans les outils de développement du site.

dimensions

Il y a une alternance de polices. Tantôt ils utilisent du Georgia,  et d’autres fois du Trebuchet. Cela donne un aspect dynamique, jeune, une sensation de mouvement et d’energie. Tout cela est combiné à plusieurs couleurs, plusieurs variantes de gris, de vert, d’orange…. C’est jeune, frais, sympa, et démontre bien la diversité des styles musicaux que l’on peut trouver.

couleurs

L’image de fond du site internet change assez souvent, mais les codes couleurs restent les mêmes. Nous rappelons que ce site n’a pas vocation à ce qu’on le visite longuement.

Les seuls effets graphiques sont dans la composition des playlists avec un effet dessiné, ce qui donne un petit coté ludique, et personnalisé. Stéréomood reste vraiment une interface créée par une équipe de jeunes qui veulent partager leur passion avec les internautes. Ces dessins font l’effet de “notes” laissées par les propriétaires pour les usagers.

playlist

CARACTÉRISTIQUES TECHNIQUES

Le site est hebergé sous Nohup, ce qui permet de lancer un processus qui restera actif même lorsque l’utilisateur se sera déconnecté, c’est à dire qu’il s’éxécutera de manière transparente et totalement indépendante de l’utilisateur.

code source

Le site est fait en PHP et Javascript, ce qui permet des interfaces simples et rapides dans le site internet.

Et même pour le peu de graphisme que comporte le site, on trouve du CSS lorsque par exemple on clique sur une icone dans la liste de lecture écoutée. Ce sont des apparitions d’images ou de textes successifs, ou de couleurs qui donne une certaine animation.

On peut également créer un compte Stereomood, et ainsi télécharger les chansons que l’on a aimé, ou enregistrer ses playlists préférées.

form

CONCLUSION

Le site Stereomood est un super site pour mettre votre vie en musique, ne pas se creuser la tête et rester 20 minutes à trouver la musique que vous voulez écouter, et surtout pour découvrir de nouveaux artistes. Alors maintenant, écoutez-vous, définissez votre “mood” et cliquez sur la playlist faite exprès pour l’occasion… et laissez vous porter par le “flow” qui vous envahit!!

Mise en place d’une image dans du texte (sous InDesign)

Tuesday, May 10th, 2011

A travers ce tutoriel vous allez découvrir comment insérer une image dans un texte vectorisé sous le logiciel InDesign

Durée : 10 min
Image 5

1. Dans un premier temps, créez un nouveau document au format souhaité. Une fois ceci fait, saisissez, dans un bloc séparé le mot dans lequel sera intégré l’image.

Image 1

2. Sélectionnez le bloc de texte dans lequel vous souhaitez intégrer l’image afin de le vectoriser. Pour cela, une fois le bloc sélectionné, aller dans le menu texte et cliquez sur Vectoriser.

Image 2

3. Maintenant nous allons intégrer l’image à l’intérieur du texte vectorisé. Ceci va être fait grâce à la fonction fichier/importer.

Image 3

4. Une fois l’image intégrée dans le texte vectorisé, vous pouvez l’ajuster et la déplacer grâce à l’outil sélection direct. Pour cela, sélectionnez l’outil sélection directe et cliquez sur le texte. Un cadre orange va alors     apparaître. Vous pouvez ensuite ajuster l’image comme vous le souhaitez et n’oubliez pas de maintenir shift lorsque vous réduisez ou agrandissez l’image afin de garder les proportions.

Image 4

Bravo, vous avez réussi à intégrer une image dans un texte vectorisé.

Image 5

Vous pouvez, par la suite, dissocier les lettres afin de placer une image dans chacune des lettres. Pour cela il suffit de sélectionner le bloc de texte et d’annuler le tracé transparent.

- Objet > Tracé > Annuler le tracé transparent

Image 6

Tous les tracés sont désolidarisés y compris les contreformes  des lettres comme on peut le voir pour la lettre A. Il suffit de le recréer en sélectionnant l’outil pathfinder/exclusion.

- Fenêtre > Outils et mise en page > pathfinder > exclusion

Image 7

Pour finir, importez une image dans chaque lettre.  Pour cela il suffit de réappliquer les consignes précédentes.

Faire tourner un texte autour d’un objet

Monday, May 9th, 2011

Mesdames, Mesdemoiselles, Messieurs, Bonjour !

Aujourd’hui, grâce à ce tutoriel, nous allons apprendre à créer un texte qui tourne autour d’un objet.

Niveau : Intermédiaire

Logiciels / Outils : Photoshop et Flash Professional CS5 . Choisir une image de votre choix, si possible un objet rond.

Durée d’exercice : 15-20 minutes environ (avec bien sûr une concentration optimale) !

L’exercice va se dérouler en deux temps : photoshop et flash.
PREMIER TEMPS : PHOTOSHOP

Ouvrez un nouveau document avec les dimensions suivantes : 10 cm X 10 cm sous Photoshop CS5 (le travail est réalisable sur les anciennes versions mais avec des manipulations un peu différentes).

Etape 1 : Tracez un cercle en mode tracer uniquement. Pour plus de perfection, appuyer sur MAJ en même temps.

1

Etape 2 : Sélectionner l’outil texte, pointez sur le rebord du cercle. Ecrivez votre texte au choix. (Si vous souhaiter modifier la couleur, la police, la taille, c’est le moment !)

2

Etape 3 : Enregistrez votre travail en PSD, ou PNG. (CMD S)

3

Félicitations, la partie photoshop est finie ! On va désormais s’attaquer à Flash, à partir de ce point, les choses peuvent se compliquer…

DEUXIEME TEMPS : FLASH PROFESSIONAL

Etape 1 : Ouvrez un document ActionScript 3.0 avec  Flash Professional.

Etape 2  : Dans le menu Fichier -> importer -> image de la bibliothèque. Ici, importez le texte réaliser sous Photoshop ainsi que l’objet choisi.

4

Les fichiers apparaitront sur la droite dans le menu.

6

Passons au choses sérieuse !

Etape 3 : Glissez le symbole 1 (qui représente votre objet) dans le cadre blanc. Cliquez droit sur celui-ci, et selectionner séparé. Cette étape nous servira pour plus tard.

7

Vous devez obtenir une image comme celle ci :

8

Etape 4 : Menu -> insertion -> nouveau symbole

9

Etape 5 : Glisser votre texte dans le fichier blanc qui vient de s’ouvrir. Celui-ci sera ainsi converti en symbole. Faites un clic droit sur le texte,  et séléctionner « créer une interpolation de mouvement »

10

Maintenant, dans la fenêtre scénario, qui en principe se situe en bas de page, étendez la frame jusqu’à 200. Ceci dépend bien sur de la vitesse de rotation du texte que vous souhaiter obtenir.

11

Vous devez obtenir une bande rouge comme ci dessous. Allez dans la fenêtre proprièté à droite, et configurer la rotation dans le sens que vous souhaiter. Faire pivoter 1 fois.

12

Etape 6 : Quitter la page symbole et revenez ainsi sur la page Séquence 1

13

Etape 7 : Dans scénario, insérez un nouveau calque

14

Puis insérer le symbole texte que l’on vient de créer. Pour effectuer cette manipulation il suffit de glisser « symbole 2 » sur l’image.

15

Etape 8 : Sélectionner l’outil Rotation 3D, puis avec les axes vert et rouge, vous pouvez orienter le texte selon votre choix.

ok

16

Etape 9 : Le texte qui devrait passer derriere, est devant la spère. Nous allons remédier à ce problème par une simple méthode. D’abord, commencez par verrouiller le calque texte.

17Selectionnez votre texte qui passe devant la sphère avec l’outil flèche noir sélection. Une fois cette manipulation éfectué, faites un clique droit et copier.

18

Etape 10 : Créer un nouveau calque, et placez le au dessus des autres. Verrouillez aussi le calque Sphère. Maintenant, placez vous sur le claque 3, et faites un clique droit coller sur place.

20

20Le problème est résolu.

Etape 11 : Enregistrer votre travail CMD S. Puis faites fichier exporter exporter l’animation.

22

Et voilà, c’est fini ! en un clin d’œil (ou presque !) le tour est joué.

Pour voir le résultat final, cliquer sur le lien ci-dessous

http://hebergratuit.free.fr/rapide/OKKK_1304849048.swf

Les 2 Vaches, des fermiers du bio

Monday, May 9th, 2011

Bonjour la compagnie !

De retour de vacances, je vous invite aujourd’hui à découvrir les 2 vaches les plus décalées du moment… Je parle bien entendu de Pipelette et Savante, les icônes de la nouvelle marque de yaourts bio Les 2 Vaches, des fermiers du bio.

logo

« Des produits vachement bio, vachement bon ! »

Les 2 Vaches, des fermiers du bio est une marque française de produits laitiers 100% bio. C’est en 2006 que les 2 vaches, prénommées Pipelette et Savante (celle aux lunettes), se lancent dans une aventure des plus écolos : promouvoir des produits laitiers ou plutôt des spécialités laitières préparées avec du bon lait issu de l’agriculture biologique (label AB), le tout commercialisés en GMS.

Cette marque est le fruit de la collaboration des groupes Danone et Stonyfield Farm, précurseur des produits laitiers bio aux États-Unis.

Le look de cette nouvelle marque Bio est résolument différent des codes habituels de Danone afin d’attirer le consommateur bio, qui n’est pas un fan des marques multinationales.

Description du site

Les2vaches.com, peu mieuhhhhhh faire !

C’est l’agence Supervision qui est en charge de toute la stratégie internet de Les 2 Vaches. Pour la petite histoire, le site les2vaches.com a changé trois fois de design depuis son lancement en 2006.

On peut constater que l’arborescence du site est simple et facile d’utilisation.

arborescence du site www.les2vaches.com

Toutes les pages du site, à quelques détails près, présentent la même structure.

page d'accueil

PAGE TYPE

La présence du réseau social Facebook est omniprésente sur les pages. Il y a trois rappels du compte Facebook des deux vaches. La marque propose à ses clients de rejoindre Les 2 Vaches sur la toile. Elle cherche à tisser un lien de proximité avec sa clientèle et à la rendre actrice. Les 2 Vaches est une marque engagée que ce soit sur Internet ou sur son site. En effet, le blog du site est un lieu d’expression militant pour l’agriculture biologique et le développement durable.

liens facebook

Connaissant les anciennes versions du site, je trouve dommage que l’interactivité ne soit plus aussi présente entre l’internaute et la marque. En 2008, la marque avait lancé un site où Pipelette et Savante étaient animées et se déplaçaient en fonction du curseur de l’internaute. C’était une interface ludique proposant une expérience de navigation décalée et mettant en scène l’univers de la marque. L’internaute pouvait également, si il le souhaitait, parrainer une vache. Ci-dessous la page de lancement du site à l’époque.

ancien site

Aujourd’hui, avec ce nouveau site, l’univers bio et fantaisiste de la marque n’est pas totalement mis en valeur. Les deux vaches s’effacent laissant place à des rubriques classiques telles que l’actualité, nos recettes, notre philosophie, … et où le texte prédomine face aux images.

Le graphisme

Simple et bio !

  • Les couleurs

Le site est épurée et les couleurs sont rattachées à l’environnement, la nature, les pâturages, l’écologie, la vache laitière… Elles correspondent tout à fait à la marque et à ses valeurs. Elles sont à dominante froide et correspondent à l’image de Les 2 Vaches à savoir fraiche et colorée.

couleurs

La couleur principale est un bleu qui temps vers le vert nous rappelant la verdure, le pré et l’eau. Une couleur qui s’attache à des valeurs très nature et très bio. Elle symbolise la fraicheur et le naturel des produits de la marque.

Le noir et le blanc font référence aux couleurs qu’arborent fièrement Pipelette et Savante mais c’est également le signe distinctif des vaches laitières. C’est deux couleurs sont harmonieuses et sont souvent utilisées ensemble pour symboliser une complétude, une dualité totale.

Le rose symbolise ici la couleur du mufle des deux vaches. Elle accentue la fraicheur du site et s’associe parfaitement avec l’image de marque. Le rose est également la couleur attribuée aux filles, les égéries de la marque étant des femelles. De plus, les symboliques du rose sont aussi la pureté et la fidélité, autres valeurs prônées par Les 2 Vaches. Cette couleur a aussi un côté relaxant et peut représenter le plaisir de vivre, le bonheur et l’optimisme. Sous un autre angle, c’est également la couleur de l’enfance et de la jeunesse en référence à la gourmandise de leurs produits.

  • Les typographies

typographie

Concernant la typographie du logo, c’est une typographie en bâton, qui donne l’impression d’être réalisée au pinceau. On peut même faire le lien avec les pancartes des militants lorsqu’ils vont manifester: le côté “négligé” de l’écriture donne cette impression. Il y a une légère ombre pour donner du volume à la typographie.

Mais ce n’est pas tout. Sur le site, la marque joue avec la typographie des noms de gamme en alternant une typographie manuscrite, avec des courbes très scolaires, et une typographie en bâton, plus “stricte” mais pour le moins décalée; chaque lettre n’étant pas alignée et l’ensemble donnant un côté  déstructuré et dynamique. Ci -dessous le titre concernant la gamme nature de Les 2 Vaches.

typographie des titres

Le site utilise une typographie plus lisible lorsqu’il s’agit du contenu et des sous-titres. On en comptabilise trois : une pour la barre des menus, une pour les sous-rubriques et une pour le contenu texte.

  • Le traitement graphique

La marque joue essentiellement avec un graphisme à la manière d’un dessin animé dans ses publicités (vidéos essentiellement).

Dans son site, Les 2 Vaches  joue sur la superposition d’une photographie et de Pipelette et Savante façon Bande Dessinée. En effet, les deux vaches sont dans un vrai pré (ou un champs, cela dépend du contexte) et communiquent entre elles avec le système des bulles. Cela renforce l’aspect ludique et décalé de la marque. Elles sont présentent partout dans le site car la marque se sert de leur paroles pour faire passer des messages importants et impactants.

images du site

Les caractéristiques techniques

Minimaliste mais efficaceuhhh!

Le site est très simple dans sa réalisation. C’est un site en Flash : seule l’apparition d’images successives donnent l’impression que le site est animé. Il n’y a  pas d’effets techniques demandant beaucoup de travail. Le site est riche en termes de fond mais non dans sa forme.

Dans le code source du site, on peut constater que les langages utilisés sont principalement le langage HTML et CSS.

HTML est le langage de base sur Internet. Il permet l’écriture d’un document avec des balises de formatage indiquant la façon dont doit être présenté le document et les liens qu’il établit avec d’autres documents. C’est en d’autres termes le langage permettant la mise en page des pages du site.

Le langage CSS  va permettre de structurer et régir la présentation de la page HTML. On associe donc le CSS au HTML pour ce qui est par exemple des couleurs des titres, des polices, etc…

Les2vaches.com utilise également du contenu RSS lorsqu’il s’agit de rubriques où le contenu est changeant au fil des jours telles que les rubriques notre actualité, nos recettes gourmandes, l’actualité du blog.

rss

Le site n’est pas sophistiqué. La marque prône des valeurs militantes et c’est en cela qu’elle se doit de rester simple dans la réalisation de son site. Il n’y a pas de superflu, ni d’artifices. On peut comparer cela avec la confection de leurs produits : sans additifs, sans conservateurs, sans arômes artificiels… Le site va droit à l’essentiel, en gardant la même ligne de conduite dans chaque page.

Petit bémol, l’utilisation de Flash est minimaliste. La marque aurait pu mettre en avant la réelle dynamique de Pipelette et Savante en jouant davantage sur l’animation du site.

Stratégie de communication de Les 2 Vaches

Une marque qui suit les traces de son papa Danone !

Qui aurait penser que cette marque 100% bio prônant de vraies valeurs écologiques serait le fruit de la multinationale française Danone ?

En effet, Danone a pris la décision de ne pas communiquer en son nom et donc de ne pas s’afficher sur le produit. Une décision purement stratégique puisque la marque avait déjà tenté de capitaliser sur le marché du bio avec son fameux BIO de Danone. Un nom que le géant a du vite modifier pour Activia de Danone car, dès 2006, seul les produits issus de l’agriculture biologique pouvaient bénéficier de cette appellation. Suite à cette révélation, la déception des consommateurs s’est rapidement fait ressentir.

On comprend donc le retrait volontaire de Danone face au lancement de sa nouvelle marque vraiment bio : Les 2 Vaches, des fermiers du bio. L’enjeu stratégique est véritable quand on voit la croissance historique que connait actuellement le marché du bio. En effet, en 2010, le chiffre d’affaires des produits alimentaires bio a dépassé 3,3 milliards d’euros, + 10% sur 2009.

Cette marque s’éloigne des yaourts traditionnels dans sa confection avec du lait 100% bio mais aussi et avant tout dans sa communication qui se veut militante, impactante et surtout originale. Pipelette et Savante ne vendent pas du rêve, elles expriment leur volonté pour un monde plus “bio” et rendent le consommateur actif pour une cause importante : le développement durable. Le bio est de plus en plus plébiscité par des consommateurs soucieux de leur bien-être et sensibles aux questions éthiques et environnementales. Ce type de consommateurs correspond tout à fait à la cible que cherche à atteindre Les 2 Vaches alias Danone.

Le lancement de cette marque n’a rien d’originale dans sa forme, mais dans le fond elle se démarque en proposant :

  • une philosophie de vie en adéquation avec le bio
  • un discours engagé et militant pour le développement durable
  • une responsabilisation du consommateur

On peut donc traduire le positionnement de Les 2 Vaches comme une marque engagée (attente du consommateur) proposant des produits 100% bio (attribut du produit).

La marque souhaite avant tout informer sa clientèle de la véracité de ses produits, de la provenance des matières premières et de l’utilité du développement durable dans notre société. Elle souhaite être transparente face à une clientèle de plus en plus douteuse sur les produits qu’elle retrouve dans son assiette. Le consommateur n’est pas seulement une cible pour la marque c’est aussi un moyen de communication et un acteur.Les objectifs sont donc principalement cognitifs.

Viennent ensuite les objectifs affectifs. Les 2 Vaches souhaite également fidéliser les consommateurs. C’est en cela que Pipelette et Savante jouent parfaitement leurs rôles : elles sont sympathiques, enthousiastes, amusantes, attachantes et surtout intéressantes. Elles ne sont pas là simplement en tant que vaches laitières, elles représentent les valeurs de la marque, elles militent fièrement pour leur cause. Danone a bien choisi ses mascottes car il n’y a rien de mieux qu’une vache pour parler de lait !

La promesse est la suivante : ” Avec Les 2 Vaches, dégustez des spécialités laitières 100% bio tout en agissant pour notre planète.” Le ton employé est à la fois décalé et ludique mais aussi et avant tout engagé et militant.

Concernant la commercialisation, Les 2 Vaches est présente en GMS. La concurrence est importante et il faut donc pouvoir se démarquer. Contrairement à des marques qui se disent écolo en supprimant simplement leur emballage cartonné, ici, Les 2 Vaches propose une stratégie différente. Elle veut se rendre visible au plus grand nombre, donc elle opte pour un emballage recyclé et recyclable. De plus, cela correspond à une surface supplémentaire pour communiquer sur les valeurs de la marque.

En plus d’être bio, les produits sont bons. La qualité n’est pas négligée. En effet, la marque parle de spécialités laitières et noms de produits laitiers. Une appellation qui donne un côté haut de gamme au produit et à la marque. Avec un rapport qualité/prix plus que raisonnable, Les 2 Vaches s’impose aujourd’hui comme une marque porteuse ayant un grand avenir devant elle.

Conclusion

Les 2 Vaches, des fermiers du bio a su apporter un regard novateur dans le marché des produits laitiers et surtout sur le marché du bio. Elle communique essentiellement autour des valeurs que Pipelette et Savante défendent et autour des actions qu’elles soutiennent. C’est une façon ludique de manger du bio et donc de se faire du bien.  Je n’ai qu’une chose à dire : “C’est bio pour le morale ! “.

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