Créer un effet tilt-shift simplement

Guilou — Fri, 29 Jan 2010 19:01:00 +0100

L'effet tilt-shift c'est ça :

Cet effet assez sympathique donne une illusion de maquette. Le flou autour de la photo laisse penser que les objets sont tellement petits qu'il est difficile de faire la mise au point. L'original de la photo se trouve dans la suite du billet, ainsi que les différentes façons de créer cet effet, notamment au travers d'un service en ligne !

La photo qui a été utilisé pour créer cet effet est ci-dessous. On note que c'est une photo "normale".

Pour créer cet effet, on peut se servir d'un site internet, qui propose ce service en ligne. Il s'agit de TiltShiftMaker. La procédure est très simple.

On commence par charger sa photo

Ensuite nous tombons sur cette fenêtre :

Nous pouvons avec différentes réglettes configurer notre effet comme il faut. Il ne faut pas oublier de cliquer sur Preview pour avoir un aperçu sur la partie droite du site. Une fois que le résultat est convenable, il suffit alors de cliquer sur Get full size et sur le lien qui apparaîtra à la place du bouton. C'est tout !

Astuce : Pour réussir au mieux vos photos, il est préferable d'en choisir qui ont été prises en hauteur, et où la distance est plutôt grande.

Pour ceux qui souhaitent faire cet effet eux-même dans leur logiciel favori, voici quelques ressources :

Créer facilement un Persona pour Firefox

Guilou — Fri, 22 Jan 2010 16:11:00 +0100

Firefox 3.1.6 est sorti le 21 janvier 2010 et a apporté son lot de nouveautés. Parmi elles, on trouve les Personas.

Qu'est-ce qu'un Persona ?

Les personas sont des thèmes simplifiés pour Firefox. On peut les changer à la volée, sans même redémarrer le logiciel. Ils sont constitués de deux images, un entête et un pied de page. De nombreux Personas existent déjà, vous pouvez parcourir la liste de ceux existant pour tester.

Voici par exemple l'image supérieure

et inférieure d'un Persona :

Vous pouvez également visionner cette vidéo :

Voir la vidéo sur Youtube

Nous allons ici voir comment nous pouvons créer le nôtre.

Comment créer le sien

Créer l'image supérieure

L'image supérieure doit impérativement respecter les règles suivantes :

Avoir une résolution de 3 000px de large et 200px de haut
L'image doit faire une taille d'au plus de 300Kb
Elle doit être au format PNG ou JPG

La partie la plus importante de l'image est la partie droite. En effet, c'est elle qui sera affichée dans le navigateur même si celui-ci est réduit en largeur. (Nous n'avons pas tous la chance d'avoir une résolution de plus de 3000px de large)

C'est donc à cet endroit qu'il est judicieux d'y placer la partie de l'image la plus importante (logo, texte, etc)

Créer l'image inférieure

On peut personnaliser l'apparence de la barre inférieure de Firefox, là où s'affichent l'URL pointée, "Terminé", etc. La partie basse du Persona doit respecter les mêmes règles qu'au dessus, à une différence près : la hauteur. Il faut donc faire une deuxième image respectant les conditions suivantes :

Avoir une taille de 3 000px de large et 100px de haut
L'image doit faire une taille d'au plus de 300Kb
Elle doit toujours être au format PNG ou JPG

Tester son thème

Maintenant que les images sont prêtes, il faut tester son Persona afin de constater le rendu. Pour cela, il faut installer l'extension Personas. Après installation, un petit renard orange devrait apparaître dans le coin inférieur gauche.

Il faut tout d'abord cliquer sur Préférences :

Il faut alors cocher Afficher les Personas personnalisés dans le menu :

Retournons dans le menu de l'extension et cliquons sur Persona personnalisé > Éditer.

Il suffit alors de renseigner les chemins des images relatives à l'entête et au pied de page, ainsi que de choisir les couleurs.

Le partager avec la communauté

Une fois que votre Persona est magnifique, il peut être intéressant de la partager. Qui sait, peut-être finira-t-il dans le Top 100 ?

Il faut aller sur cette page, s'inscrire si on ne l'est pas et suivre la procédure. Ne soumettez pas d'image si vous n'avez pas le droit de le faire !

Notez qu'il est possible de récupérer un fichier Photoshop (PSD) directement sur le site www.getpersonas.com pour avoir le template !

(Source : www.getpersonnas.com)

Le blog de Guilou - Mot-clé - Photoshop