Ce tutoriel est divisé en 2 parties : nous verrons premièrement comment créer la texture avec Photoshop puis dans un second temps, comment l’utiliser concrètement sur un élément d’une page web.

La création d’un motif “bruit” transparent sur photoshop

Nous allons créer un nouveau document dans Photoshop : 150px x 150px / 72ppi / arrière-plan : blanc.

Premièrement nous allons déverrouiller le calque de fond et le renommer : “Noize”.

Nous allons ensuite convertir ce calque pour qu’il supporte des filtres dynamiques (Nous pourrons ainsi utiliser les filtres de façon non destructive et revenir sur leurs réglages si besoin). Pour cela, faites : Filtre > convertir pour les filtres dynamiques.

Note : Cette étape est facultative. Pour les versions de Photoshop ne supportant pas cette option, vous pouvez passer à l’étape suivante.

On ajoute ensuite le bruit sur notre objet dynamique (ou sur un calque classique pour les anciennes versions de Photoshop) en faisant : Filtre > Bruit > Ajout de Bruit.

Voici les réglages que j’ai utilisé : quantité 10% / répartition uniforme / Monochromatique.

Nous allons maintenant créer un nouveau calque vide au dessus du précédent et le renommer : “Noize png”.

Nous allons ensuite chercher à dissocier la texture de la couleur de fond afin de pouvoir réutiliser le bruit sur n’importe quelle couleur. Il y a plusieurs possibilités pour effectuer ce type d’opération. Je vous propose d’utiliser la selection par plage de couleurs en faisant ceci : Sélection > Plage de couleurs. Ce type de sélection nous permet de conserver les différents niveaux de transparence de notre texture initiale.

Le curseur s’est transformé en pipette. Nous allons sélectionner un pixel dans les tons foncés en cliquant dessus. Sélectionnez les paramètres suivants : Décochez “Clusters de couleurs localisées” / Tolérence 20. Cliquez sur “OK” pour valider.

Note : la tolérence est un paramètre à ajuster en fonction du résultat souhaité. Plus la valeur de la tolérence est élevée, plus la texture est dense.

Notre sélection est faite, nous allons maintenant la remplir. Pour cela faites : Edition > Remplir (vérifiez de bien être positionné sur le calque vide “Noize png”)

Pour le remplissage nous utiliserons une couleur foncée si la texture est appliquée sur un fond clair, et inversement. Pour cet exemple, nous opterons pour du noir (100% d’opacité et décochez “conserver les zones transparentes”). Cliquez sur “OK” pour valider le remplissage du claque Noize png.

Notre motif est créé mais son contraste trop élevé le rend difficilement utilisable en l’état.

Nous allons donc simplement réduire l’opacité du calque “Noize png” à 5% et rendre invisible le calque d’arrière plan (qui nous a simplement servi à créer notre sélection).

Note : l’opacité du bruit est un paramètre à ajuster en fonction de votre utilisation.

Pour pouvoir visualiser le rendu de notre texture nous allons créer un nouveau calque juste en dessous du calque “Noize png”, et nous allons le remplir avec une couleur au choix. Pour notre exemple j’ai utilisé la couleur beige #cccc99.

Avant d’enregistrer n’oubliez pas de rendre invisible le calque d’arrière plan (objet dynamique) et le calque de couleur que nous venons de créer. Seul le calque à 5% d’opacité doit rester visible.

Nous allons maintenant enregistrer notre texture en faisant : Fichier > Enregistrer pour le web et les périphériques.

Note : A ce stade, nous pouvons également enregistrer la texture sous forme de “motif” Photoshop (Edition > Utiliser comme motif).

Pour conserver la transparence nous utiliserons le format png24.

Et voilà c’est terminé, nous venons de créer une texture bruit sur fond transparent. Nous allons maintenant voir comment l’utiliser concrètement dans une page web.

<p class="noize"> Ceci est un paragraphe d'exemple avec une texture bruit </p>

.noize{background-image: url(noize.png);}

Vous n’avez pas envie de lire l’article ? Téléchargez dès maintenant la liste de clips CSS3 pour Coda :

Télécharger CSS3 Coda Clips

Coda

Les nombreuses fonctionnalités de Coda en ont fait l’un des outils de développement privilégié des utilisateurs de Mac. C’est un logiciel “tout en un” : éditeur de texte, éditeur css, transfert de fichiers, système de gestion de versions, nombreux plugins etc… un outil parfait pour le travail d’intégration web (entre autre).

Parmi les multiples fonctionnalités proposées, le système de “clips” est vraiment intéressant car il permet de gagner un temps précieux.

Les Clips ?

Coda dispose d’une bibliothèque dédiée au stockage de snippets (petit morceaux de code préformatés, réutilisables facilement). Par défaut la bibliothèque ne contient que très peu de clips mais libre à vous d’en ajouter autant que vous voulez (html, css, js, php etc.).

Voici l’exemple d’un clip pour la propriété border-radius

On y retrouve les différents préfixes propriétaires et la propriété border-radius initiale. Chaque clip se compose d’un titre, d’un contenu et il est possible d’attribuer un raccourci pour en inclure rapidement le contenu dans la page en cours (ici : radius + tab)

Il existe de nombreux Clips Coda disponibles gratuitement sur Internet : Wordpress, Javascript, HTML etc.

CSS3

Depuis l’arrivée des CSS3 nous sommes habitués à utiliser des propriétés à rallonge. Entre les préfixes propriétaires permettant la compatibilité inter-navigateurs, le progressive enhancement, et des propriétés CSS3 naturellement longues (comme les dégradés par exemple), tout cela accroit le temps passé à créer nos feuilles de style.

Pour optimiser mon travail d’intégration j’ai créé une liste de clips regroupant de nombreuses propriétés CSS3 auxquelles sont rattachés des raccourcis. Cet article est l’occasion de partager cette liste avec les utilisateurs de Coda qui pourraient en avoir besoin.

Voici la liste exhaustive du contenu que vous trouverez dans mes clips CSS3 :

• Box-shadow
• Text-shadow
• Border-radius
• Gradients
• Gradients + background image
• Multiple backgrounds
• Transform : scale
• Transform : rotate
• Transform : translate
• Transform : skew
• Transition : all
• Animation
• Keyframes

Screenshot de la liste de clips CSS3 :

Pour être utilisé plus rapidement, chaque clip possède son propre raccourci. Pour border-radius, par exemple, il suffit de tapper radius et tab pour insérer le contenu dans votre feuille de style.

Autre exemple : si vous souhaitez ajouter un dégradé (et sa longue syntaxe), il vous suffit de tapper gradient suivi de tab pour insérer le clip. C’est très simple et cela vous économise quelques lignes de CSS à chaque fois.

Installation

L’installation est simplissime puisque vous n’avez qu’à double cliquer sur le fichier CSS3.clips pour ajouter une nouvelle famille de clips “CSS3″ à la liste des clips de Coda.

Vous pouvez bien sûr personnaliser le contenu afin de vous l’approprier plus facilement. Pour modifier un clip il vous suffit de cliquer sur l’icône “i” située sur chaque intitulé comme vous pouvez le voir sur le screenshot ci-dessous.

Vous l’aurez compris, ce système de clips peut vous faire gagner un temps précieux alors pourquoi s’en priver ?

Télécharger CSS3 Coda Clips

You don’t want to read the complete article ? Download right now the CSS3 coda clips :

Download CSS3 Coda Clips

Coda

With its numerous features, Coda is a great development tool for Mac users.It’s a “all in one” software : Text editor, css editor, file transfer, svn, lots of plugins etc. Perfect for html/css integration jobs (among others).

Among the many features available, the system of “clips” is really interesting because it saves valuable time.

Clips ?

Coda has a library dedicated to storing snippets (small pieces of preformatted and easily reusable code). The default library contains very few clips, but you can add as many as you want (html, css, js, php etc..).

Here is an example of clip for the border-radius CSS3 property

You can see the different vendor prefix and the initial border-radius property. Each clip has a title, some content and it is possible to assign a shortcut to quickly include the content in the current page (here: radius + tab).

There are lots of Coda Clips available on the internet : Wordpress, Javascript, HTML etc.

CSS3

Between vendors prefix, progressive enhancement and some naturally long CSS3 properties (like gradient for example), we spend a precious time to write and code our stylesheets.

In order to optimize web integration in my projects I’ve created a list of clips with many CSS3 properties and their attached shortcuts. This article is an opportunity to share those clips with Coda users who may need it.

Here are all the CSS3 properties you will find in my clips :

• Box-shadow
• Text-shadow
• Border-radius
• Gradients
• Gradients + background image
• Multiple backgrounds
• Transform : scale
• Transform : rotate
• Transform : translate
• Transform : skew
• Transition : all
• Animation
• Keyframes

Screenshot of the CSS3 clips content

In order to be used quickly, a shortcut is attached to each clip. For example, to insert the border-radius property, you just have to write radius and tab to insert he content into your stylesheet.

Another example : write gradient and tab to insert a CSS3 gradient property. It’s easy and it saves few lines of CSS code each time.

Installation

The installation is very simple as you just have to double click on the CSS3.clips file in order to add it to your Coda clips list.

You could also customize the content of each clip if you click on the “i” icon at the right of each clip title as it’s shown on the screenshot bellow

As you’ll probably understand the Coda clips system can save you valuable time so why deny it ?

Download Coda CSS3 Clips

Mon expérience passée

Je viens donc de quitter mon poste de web designer chez Buongiorno, leader européen sur le domaine du marketing mobile. J’ai ainsi travaillé pendant plus de 3 ans pour de nombreux clients : Orange (Fr), Mobistar (Be), Vodafone (NL) Three (UK) mais aussi Playboy, Nestlé etc.

J’ai évolué au sein d’une importante structure avec des équipes multiples (Marketing, Développeurs, R&D etc.) et mon poste m’a amené à être l’interlocuteur privilégié de certains clients.

Comme je suis passionné par mon métier j’ai également travaillé à titre personnel sur différents projets. Le dernier en date se nomme “Beautiful Type », un site web réalisé en collaboration avec Francis Chouquet.

En parallèle, je travaille sur l’écriture d’un livre pour mon éditeur “Atelier Perrousseaux », sur la problématique de la lisibilité typographique sur le web.

Mes domaines d’intervention

Aujourd’hui je suis capable d’apporter mon expertise sur les domaines suivants :

• Identification des besoins : mise en évidence d’une problématique de communication
• Travail ergonomique : Zoning / Wireframing
• Design d’interfaces web & mobile
• Intégration front-end : HTML5 – XHTML / CSS 3 – CSS 2.1

Quelques exemples de réalisation

Abendzeitung icons

Abendzeitung Iphone app

Beautiful Type

Garamond ampersand

AFD Folio

Si vous souhaitez voir l’ensemble de mes réalisations, vous pouvez visiter la page projets de mon portfolio : AFD-Folio : Projets.

Vous pouvez également me suivre sur Dribbble et sur Twitter.

Tarif de mes prestations

Je ne pourrais pas vous donner le prix moyen d’un site au même titre que le prix moyen d’une voiture n’a pas vraiment d’intérêt si l’on considère l’étendue des marques et modèles.

Je peux en revanche vous donner le tarif journalier de mes prestations, bien que ça ne semble visiblement pas être une pratique très répandue en France. Je travaille donc pour 400€/jour ce qui se situe dans la moyenne des tarifs pratiqués par les web designers freelances français (à expérience comparable).

J’applique ensuite la formule suivante : Tarif journalier x nb jours = prix de la prestation.

Voilà, tout est dit ! N’hésitez pas à me contacter si besoin…

My past experience

So I just quit my job as web designer at Buongiorno, European leader in the field of mobile marketing. For over 3 years I have worked for many clients: Orange (Fr), Mobistar (Be), Vodafone (NL) Three (UK) but also Playboy, Nestlé etc.

I could grow within a large structure with multiple teams (Marketing, Developers, R & D etc..) And my job brought me to be the main contact for several clients.

As I am passionate about my job I also worked on various projects during my free time. The latest is « Beautiful Type », a website developed in collaboration with my friend Francis Chouquet.

Beside that, I’m working on writing a book for my editor « Atelier Perrousseaux », on typographic legibility issue on the web.

My skills areas

Today, as a web designer, I am able to bring my expertise in the following areas:

• Identifying needs: solve communication problems
• Ergonomic work: Zoning / wireframing
• Interface design web & mobile
• Front-end dev : HTML5 – XHTML / CSS 3 – CSS 2.1

Some previews of my works

Abendzeitung icons

Abendzeitung Iphone app

Beautiful Type

Garamond ampersand

AFD Folio

If you want to see all my work you could visit the projects page of my personal portfolio: AFD-Folio : Projets.

You could also follow me on Dribbble and Twitter.

About my working rate

I could not give you the average price of a website just as it’s impossible to give the average price of a car considering the large variety of brands & models. However, I can give you my daily rate even if it seems not to be a common practice in France. So, I’m working for 400 € / day which is an average rate on the french freelance market (with the same experience).

Now everything is said… Feel free to contact me if needed !

Ce n’est pas un secret de dire que la typographie est un domaine qui me passionne. Et je ne suis pas le seul à m’y intéresser de près … De nombreux web designers sont dans mon cas et le “cancer” se propage… Mon collègue et ami Francis Chouquet s’est fait happer à son tour.

Le site Beautiful Type est tout simplement né de cette passion pour la typo que nous partageons avec Francis.

Que trouve t’on sur Beautiful Type ?

La ligne éditoriale du site sera dirigée par nos coups de coeur respectifs pour des travaux typographiques divers : print, web, illustrations, logos, posters etc. la passion n’a pas de limite :). Vous n’y trouverez pas d’articles, mais des visuels (accompagnés des sources bien entendu) mettant à l’honneur la belle typographie.

Nous avons également inclu une page Links où une liste de sites web en rapport avec le sujet vous attend et une page Books où vous trouverez une liste d’ouvrages de qualité.

Et côté technique ?

Nous avons donc choisi d’utiliser Tumblr pour sa grande simplicité (en espérant que les soucis de connexion ne seront pas trop problématiques…) et avons donc conçu un thème spécifique à nos besoins.

Le site est codé en HTML5 / CSS3 et nous utilisons Typekit pour servir Angie STD de Jean-François Porchez suivie des plus classiques : Optima, Candara et MgOpen Cosmetica.

Quelques screenshots pour finir

Homepage

Page article

Page books

Page links

Page about

En conclusion

Voici donc une belle collaboration qui s’achève. J’ai pris beaucoup de plaisir à travailler avec toi Francis et j’espère que nous aurons d’autres occasions de bosser ensemble. J’espère maintenant que vous serez nombreux à venir visiter notre nouveau site Beautiful Type!

Ah oui j’oubliais… Nous sommes aussi sur Twitter : @bftype !

This is not a secret that typography is a field that fascinates me. And I’m not the only one interested in it closely … Many web designers are in my case and the “typo-cancer” is spreading … My colleague and friend Francis Chouquet became caught up in turn.

The website Beautiful Type is born from this passion with Francis and will allow us to centralize the information and share it with you

What kind of content will you find on Beautiful Type ?

The editorial line will be led by our respective favorites for various typographic work: print, web, graphics, logos, posters etc.. Passion has no limits:). You will not find articles, but visuals (with sources of course) honoring the beautiful typography.

We also included a Links page where a list of websites related to the subject awaits you and a page where you will find Books with a list of quality books.

About the technical side…

We’ve decided to use Tumblr for its simplicity (hoping that rate limits and downtimes will not be too problematic …) and have designed a theme specific to our needs.

The site is coded in HTML 5 / CSS3 and we use to serve Typekit to serve Angie STD by Jean-François Porchez followed by the more classical : Optima, Candara et MgOpen Cosmetica.

Finally some screenshots

Homepage

Article page

Books page

Links page

About page

In conclusion…

Here is a beautiful collaboration that comes to the end. I really enjoyed working with you Francis, and hopefully we’ll have other opportunities to work together. I hope now that many of you will visit our new site Beautiful Type ! Oh yes I forgot … We’re also on Twitter: @bftype !