La première vidéo a donc été publiée cette semaine et tout ce que je peux dire, c’est que je suis déjà fan. Voyez plutôt ce qu’il nous apprend déjà à faire.

J’aime beaucoup le vase bouteille+feuille de papier.

via Presse-Citron

Nous avons déjà appris à créer un background et un effet de spots en haut du document, nous allons maintenant dessiner le header. Le header est le bandeau de votre site web. C’est dans cette partie que l’on retrouvera le nom de votre site avec éventuellement une petite description et quelques images représentant les thèmes que vous abordez dans vos articles. Sachez aussi que le lecteur doit pouvoir dire de quoi parle votre site/blog rien qu’en regardant le header. C’est donc une partie très importante de la page.

Allez, assez parlé! On se remet aux TP?

3. La création du header

Sur presque toute la largeur de votre document, faites une sélection d’une hauteur qui dépendra de ce que vous voulez afficher dans le header. Dans mon cas, ma sélection fait à peu près 200px de hauteur sur 950px de largeur. Remplissez-la dans un nouveau calque d’une couleur quelconque,nous allons vite la remplacer en utilisant les options de fusion.

Pour utiliser ces options, faites un double clic sur le calque que vous venez de créer. Une fenêtre s’ouvrira alors. Elle est très importante car c’est là que se retrouve les outils de style les plus fréquemment utilisés. Pour le moment, nous aurons uniquement besoin de l’outil ‘Ombre portée’ et ‘Incrustation en dégradé’. Remplissez ces deux options comme suit.

Comme vous le voyez, nous pouvons régler la taille de l’ombre portée, la distance par rapport au background, l’intensité, la direction,… Quant au dégradé, nous pouvons modifier la couleur de départ (#5fa503), d’arrivée (#368204), mais aussi toutes les couleurs intermédiaires. De plus, tout ce que vous faites se voit directement sur votre document même si vous n’avez pas encore appliqué les changements. Quand vous avez fini, appuyez sur OK pour effectuer définitivement ces réglages.

Nous allons maintenant écrire le nom de notre site grâce à l’outil texte (le T dans les outils de gauche). Il vous suffit de cliquer à l’endroit où vous voulez que votre texte apparaisse et écrire ‘Piesto’ par exemple.

Comme vous le voyez, c’est plutôt triste. Nous allons donc utiliser à nouveau les options de fusion mais cette fois çi, ce sont les outils ‘Lueur externe’ et ‘Incrustation couleur’ qui nous intéresseront.

C’est déjà beaucoup mieux, vous ne trouvez pas?

Mais le côté droit fait un peu vide. Comme je l’ai dit plus haut, il faut que le lecteur sache de quoi vous parlez rien qu’en regardant le header. Nous allons donc remplir ce vide avec des images représentant les sujets abordés. Je dois vous avouer que je ne me suis pas foulé pour les images, j’en ai pris quelques unes qui m’intéressaient mais je n’ai pas pris le temps d’en faire une œuvre d’art. Je sais, c’est mal… C’est surtout une réflexion personnelle qui doit être menée ici. Chacun mettra des éléments qui lui correspondent.

C’est déjà fini pour ce tutorial. Rendez-vous très vite pour la création du menu et du moteur de recherche.

Après ces 2 cours théoriques, j’imagine que vous voulez plus que jamais commencer à faire un peu de pratique. Je le comprends bien et je trouve aussi qu’il en grand temps d’entamer la partie qui nous intéresse: Photoshop. J’aimerais juste vous prévenir d’une chose avant de commencer: les illustrations présentes dans tous ces articles sont en Anglais car j’ai décidé depuis quelques années d’utiliser ce langage universel dans Photoshop. Cela permet par exemple de suivre les tutoriaux en Anglais (les meilleurs généralement) bien plus facilement.

3. La création du document et son fond

Tout d’abord, ouvrez Photoshop et créez un nouveau document d’une largeur proche de celle d’une fenêtre de votre navigateur (1200px) et d’une hauteur d’environ 3000px. Il n’est pas obligatoire d’utiliser un fond transparent mais par habitude, je vous conseille de le faire.

La première chose à faire ensuite est de créer un fond à ce document vide. Il existe deux styles de fond (background): un fond composé de couleurs (uni ou dégradé) ou un fond composé d’un motif qui est répété sur tout le document. Dans mon exemple, j’ai choisi la seconde possibilité.

1ère technique

Cette technique est très simple. A l’aide de l’outil ‘Pot de peinture’ ou ‘Dégradé’, remplissez votre document de couleurs qui ne flasheront pas et qui auront tendance à détendre les yeux. Le blanc reste à la mode même si j’ai remarqué que le gris très clair commence à coloniser bon nombre de sites. C’est déjà fini

2ème technique

Si vous n’avez pas encore choisi de motif, rendez-vous sur le meilleur site de patterns: Google! Dans l’onglet ‘Images’, rentrez des mots clés suivis de ‘pattern’ et vous n’aurez plus qu’à faire le choix parmis quelques millions de résultats. D’autres sites spécialisés existent comme stock.xchng ou cgtextures mais vous vous apercevrez vite qu’ils sont bien moins fournis.

Une fois le motif choisi, ouvrez-le dans Photoshop et cliquez sur ‘Edition, Utiliser comme motif’. Donnez un nom à votre pattern et revenez sur votre grand document vierge. Sélectionnez le ‘Pot de peinture’ et dans les options de cet outil, changer la source de ‘Couleur d’avant-plan’ vers ‘Motif’. Dans la boite qui se trouve juste à droite, sélectionnez le motif créé précédemment.

Vous n’avez maintenant plus qu’à cliquer une fois sur votre document pour que le motif soit répété partout.

La base de votre template est assurée, il ne vous reste plus qu’à personnalisé un peu ce fond avec un peu de lumière par exemple.

C’était pas long, c’était pas dûr mais c’est joli, non?

2. Pourquoi créer un template?

Si vous vous êtes déjà amusé à développer un thème (ou même autre chose) en html, php, javascript, etc, vous aurez certainement remarqué qu’il n’est pas très pratique de coder l’aspect visuel sans avoir une idée préalable du résultat que vous souhaitez obtenir. Le fait d’utiliser un logiciel comme Photoshop ou The Gimp vous permettra de ne pas recommencer plusieurs fois un design si vous vous apercevez qu’il ne convient pas. Le principe du template est de dessiner l’aspect que vous voulez que votre site aie par la suite rien qu’avec un logiciel d’édition graphique. Ainsi, il est facile de modifier quelque chose qui semble ne pas convenir au reste du site.

Si vous pensez que le template vous ralentira dans le développement de votre design, détrompez-vous car il ne pourra que vous aider à ne pas recommencer à zéro vos scripts. Personnellement, j’ai déjà eu l’occasion de tester la méthode “avec” et la méthode “sans template” et la différence s’est bien faire sentir: alors qu’il ne m’a fallu qu’une semaine pour coder le thème actuel de Piesto en utilisant un template, je n’ai même jamais réussi à terminer celui que j’avais commencé 6 mois plus tôt, par manque de courage.

Besoin d’autre chose pour être convaincu? Tous les grands noms du webdesign utilisent Photoshop afin de créer un template pour leurs compositions.

Je comprends bien que ces premiers tutoriaux ne sont surement pas encore ce que vous espériez lire dans cette série de tutoriaux et que vous ne demandez qu’à apprendre à utiliser les outils de Photoshop mais sachez qu’il est indispensable de passer par ces points.

1. Les pré-requis

Pour suivre ce tutorial, vous aurez uniquement besoin du logiciel d’édition graphique Photoshop développé par Adobe, lequel est en vente sur internet à un prix avoisinant les 1 000€. Si vous ne le possédez pas encore et que son tarif est pour vous un frein, sachez qu’il vaut largement son prix puisqu’il m’a permis de réunir un bon nombre de logiciels en un seul. Vous pourrez par exemple dans le même programme créer des publicités, des flyers, modifier vos photographies, créer des icones, des fonds d’écran,… et la liste ne s’arrête jamais puisque le logiciel est toujours munis des outils à la pointe.

Si vous souhaitez par la suite coder ce template, vous aurez besoin d’un outil comme NotePad++ (gratuit) ou Dreamweaver. Ce dernier est lui aussi un produit développé par Adobe et coûte 499€. De plus, il fait partie d’un pack de logiciel appelé la “Suite Design Premium” proposé par l’éditeur contenant entre autre Photoshop CS4, Dreamweaver CS4, Illustrator CS4, After Effects CS4, Adobe Premiere Pro CS4, Soundbooth CS4, Adobe OnLocation CS4 et Encore CS4, tous des logiciels qui vous seront utiles un jour ou l’autre et qui peuvent communiquer entre eux, ce qui est à mon goût le plus gros avantage.

Le dernier outil que je juge indispensable est un navigateur internet. Vous connaissez certainement Internet Explorer (le logiciel à l’icone au E bleu entouré d’un flux jaune) qui est installé par défaut sur tous les ordinateurs tournant sous Windows. Cependant, toutes les personnes qui ont testé d’autres navigateurs et surtout les développeurs vous diront qu’ ”Internet Explorer, c’est de la merde en boîte”. Je me rallie à cet avis et vous propose d’installer un nouveau navigateur bien plus compétent et qui vous permettra d’afficher correctement une page web, Firefox. Maintenant que j’y pense, si vous pouvez lire cet article, c’est que vous n’utilisez pas IE (essayer seulement d’afficher Piesto dans IE et vous comprendrez pourquoi ). Mais revenons à nos moutons… ou plutôt à notre renard puisqu’il s’agit de l’animal représenté sur l’icône de Firefox. Grâce à ce navigateur, vous pourrez installer un bon nombre d’extensions qui vous faciliteront la vie et vous feront gagner un temps fou (voir cet article).

Vous voila maintenant enfin paré à démarrer la création de votre template.
Prochain numéro très vite !

C’est donc maintenant décidé, je vous proposerai à intervalle régulier dans un premier temps une série de tutoriaux sur la création d’un template, le modèle sur lequel vous vous baserez quand vous coderez votre site web ou votre blog et qui vous servira à vous faire une première idée de ce que vous voulez voir apparaître dessus.

Par la suite, je voudrais aussi vous apprendre comment coder le template que vous aurez créé mais mes connaissances minimes en PHP ne me permettent pas encore de le faire. Je pense plutôt vous rediriger pour le moment vers le site de Fran6 qui traite de ce sujet bien mieux que je ne pourrais le faire.

Ces tutoriaux seront basés sur un thème que je développe en ce moment appelé “Fresh Wood” mais que je ne prévois pas d’adopter sur ce blog. Bien évidemment, je ne m’attends pas et ne vous encourage pas à dessiner exactement le même template que moi car le but principal de cette suite de tutoriaux est avant tout de découvrir les fonctions utiles de Photoshop.

Si tout va bien, le premier numéro sera en ligne avant vendredi

Vive la tablette. Je pense que je vais aller faire un tour sur eBay.

D’autres vidéos sur IDSketching

via Eric

Voici un extrait.

via Emob

Si vous me suivez depuis assez longtemps, vous serez certainement tombé sur cet article qui vous proposait une manière de vous inscrire sur iTunes sans CB gratuitement. Depuis quelques mois, il n’était plus possible de créer un compte de cette façon.

Apple a donc réagi et a proposé un nouveau moyen que je décris pas-à-pas dans cette vidéo. Il s’agit de mon premier screencast et je sais que la taille de la vidéo n’est pas au rendez-vous. Je ferai mieux la prochaine fois.