Reproduire la pub Live.com de Microsoft

Voici ce que j'ai reçut dans ma boîte hotmail ce 23 novembre 2006. C'est une publicité de présentation du service Live.com de Microsoft. Et comme j'ai trouvé cette présentation assez jolie, je me suis fixé comme objectif de la reproduire sous Inkscape avec la version 0.45 ou supérieur.

Mise en place du support

Commencez par télécharger le fichier “publive.png” et importez le dans Inkscape! Sans blague :)

Puis enregistrez le fichier sous le nom “mslive.svg” par exemple:

Création des boutons

Créez un rectangle de taille équivalente à l'un des boutons, et appliquez un contour plat de 1px.

Ensuite appliquez la couleur (4b7c9fff) de contour du bouton avec la pipette et en appuyant simultanément sur Shift+BG.

Pour créer le dégradé, on a besoin de récupérer les 4 couleurs qui le compose, pour cela on créé quatre rectangles qui prennent chacun l'une des valeurs.

Puis on revient sur notre rectangle de départ auquel on applique un dégradé linéaire. Éditer ce dégradé afin d'ajouter deux “Stop” pour en obtenir 4 en tout.

Ensuite faites du copier/coller pour assigner dans l'ordre les 4 couleurs au dégradé. Une fois ceci terminé, on peut supprimer les quatres rectangles qui ne nous servent plus désormais.

Pour obtenir la cassure nette que l'on observe sur l'image originale, il faut opérer un décalage sur le troisième “Stop” afin de la coller au deuxième. Pour cela, on change sa valeur de 0,75 en 0,50.

Vous devez obtenir ceci:

Il ne reste plus qu'à créer le texte du bouton, de le mettre en blanc avec un contour noir d'opacité 30 puis de dupliquer le texte en noir avec un contour noir d'opacité 100 et de rendre ce texte flou de 2,5%.

En superposant tout ceci, avec le texte noir jouant le rôle de l'ombre au dessous du texte blanc, on obtient un résultat proche de l'image suivant.

Nb: il est possible de cloner les objets afin de modifier facilement le texte du bouton, malheureusement si l'on veut ensuite copier/coller ce bouton, les clones restent liés au texte original… dommage.

L'image de fond

On utilise le même principe que pour le bouton.

N'hésitez pas à ajouter encore des paramètres de dégradé pour une meilleur ressemblance

Maintenant nous allons reproduire les effets à la MacOS. Il faut donc créer une courbe de bézier ayant sensiblement la forme des originales.

Ensuite on applique un dégradé de blanc, avec un contour blanc, une opacité globale de 20-25%.

On fait des copier/coller de cette courbe en faisant des redimensionnements/rotation ainsi que des éditions de point pour éviter cette impression de répétition.

Et enfin on ajoute un rectangle de surcouche faisant un dégradé du bleu foncé original vers le même bleu mais avec une opacité nulle. Ceci permet de faire croire que les courbes s'attenuent vers le ciel.

La barre de recherche

A ce niveau, l'image est presque terminée comme vous pouvez le constater sur l'image suivante :

On commence par créer une étoile à l'aide de l'outil polygone (bouton en orange sur l'image suivante).

On duplique cette étoile avec un léger flou pour donner une impression de “glow” ou luminescence, puis grouper l'ensemble.

Ensuite il faut copier/coller ce groupe plusieurs fois en le déplaçant, le redimensionnant et en le tournant afin d'obtenir quelque chose proche de ce résultat:

Si on observe l'image originale, on s'aperçoit qu'il existe un autre glow qui est derrière l'ensemble des étoiles. On créé donc une forme patatoïdale qui se rapproche de celle de l'ensemble.

Et on le rend flou (15%) tout en le mettant en arrière plan …

On ajoute un rectangle arrondi blanc avec un contour de la couleur que l'on récupère sur l'image originale avec la pipette et on écrit du texte dessus d'un gris foncé.

Pour créé le bouton de recherche, on utilise le bouton créé dans la première partie que l'on rend un peu arrondi:

  1. Bouger le “Stop” pour éviter une cassure entre les couleurs
  2. On ajoute la “Loupe” (à vous de la dessiner)
  3. La demi-spirale du dessus simule l'effet “Crystal” avec l'aide d'un dégradé et la demi-sphère écrasée sert d'illumination du bouton
  4. Il faut flouter la demi-sphère pour rendre l'astuce moins visible
  5. Dupliquer “Loupe”, la mettre en noir, la flouter puis la mettre en arrière plan de la “Loupe” blanche
  6. Dupliquer le bouton de fond, le mettre en noir, le flouter puis la mettre en arrière plan du bouton
  7. Grouper le tout

Il suffit de déplacer le bouton pour le mettre à la droite de la barre de recherche pour conclure cette partie.

Finalisation

On peut peaufiner la réalisation en ajoutant des icônes au format SVG, les miennes proviennent du site gnome-look SnowIsh ou alors du paquet d'icône Gnome par défaut.

 
pub_live.txt · Dernière modification: 2006/12/08 15:05 par lemerou
 
Sauf mention contraire, le contenu de ce wiki est placé sous la licence suivante:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki