16/10/2007

Template Folklore

Le Template Folklore.

Voici le code HTML à intégrer (copier - coller) dans votre élément personnalisé:

 

<STYLE type="text/css"> <!-- @IMPORT URL(http://designs.blog.weareplaystation.fr/files/Template_folklore/folklore.css); --> </STYLE>


Vous pouvez avoir un aperçu en cliquant ici 
Vous pouvez également consulter notre Tutorial pour savoir toute les étapes de l'instalation du Template. 

11/10/2007

Template Skate

Le Template Skate.

Voici le code HTML à intégrer (copier - coller) dans votre élément personnalisé:

 

<STYLE type="text/css"> <!-- @IMPORT URL(http://designs.blog.weareplaystation.fr/files/Template_Skate/Design.css); --> </STYLE>


Vous pouvez avoir un aperçu en cliquant ici 
Vous pouvez également consulter notre Tutorial pour savoir toute les étapes de l'instalation du Template.

 

01/10/2007

[MAJ] Tutorial : Créer son propre Template (Part 2/3)

I) Création du design global

     1. Avoir l’idée

Avoir une idée est la chose la plus importante. Sans idée, pas de design (c’est logique). Il faut que vous réalisé un Template qui vous correspond ou bien qui correspond à la personne pour laquelle vous faite le Template. Attention toutefois avoir une idée c’est bien mais encore faut-il quelle soit réalisable. Car c’est vous qui le réalisé donc faite en sorte que le Template final soit au plus proche de ce que vous pouvez faire ;)

 

     2. Créer le design global

Nous partirons du principe que vous avez des connaissances en graphisme, car bon faire soit même un design signifie quand même avoir quelques notions de base. Il n’est pas nécessaire d’être un professionnel n’y d’avoir des connaissances de fou bien évidemment. Vous pouvez faire beaucoup avec très peu ;)

Passons au patron :

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Patron.jpg
Cliquez pour agrandir 

 Ci-dessous vous pourrez retrouver le patron. Dans ce patron nous vous avons mis les « zones» que tout design possède. A savoir le Header (l’entête du blog), le Background (le fond du blog) et le Footer (pied du blog). Ces zones sont, bien sûre, « déformables ». Rien ne vous empêche de créer un Footer plus grand ou plus petit. De même pour le Header et le Background.

Il faut savoir que le background est une image qui se répète verticalement et qui donc devra s’encastrer à la fois avec elle même et à la fois avec le Header et le Footer.

Par exemple vous avez décidé de faire un Header de couleur rouge et un background jaune, c’est bien mais il faut savoir qu’il y aura une « cassure », le Header va être suivi du Background et vous allez passer du rouge au jaune. Il faut donc prévoir une « transition » (un dégradé, une barre, …) Tout dépend de votre design bien évidemment.

La taille globale du design est d’environ 1600 pixels de largeur.

Mais pourquoi tout ça ?

Ben tout simplement car il faut que votre design s’étende pour les grands écrans également ;)

Par contre, chose très importante, le blog et son contenue eux ne sont que dans les 1024 premiers pixels. La Player’s Republic possède des blogs de taille non variables (qui ne s’adapte pas aux écrans et aux différente résolutions) donc il faut garder en tête la norme ;)

Bref tout ceci étant  assimilés dans votre tête vous pouvez créer votre design. Allez a vos Photoshop, Gimp, Paint et que sa saute ^^

Bon vous avez créé vos différents éléments ? C’est super.

Vous avez donc une image de taille environ 1600 pixels de largeur et de hauteur variant selon votre envie.

Au final vous avez quelques choses ressemblant à ceci (pour faire le tuto j'ai choisit le thème MGS4):

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature-Tuto.jpg
Cliquez pour agrandir 

 Une fois que vous avez ceci nous allons passer à la découpe ;)

 

3)                3. La découpe

La découpe…. Passage très facile et très rapide. C’est ici que vous allez donc cisailler votre design et lui définir précisément un Header, Background et Footer.

Bon ici je vais vous montrer avec Photoshop :

1 - Ouvrez votre image puis sélectionnez l’outil « Rectangle de sélection » ou appuyez sur « M » 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_1_.jpg
Cliquez pour agrandir 

 2 -  Sélectionnez la partie qui sera votre Header. Faite en sorte de prendre toute les partie complexe de la partie haute qui ne devront pas être dans le Background

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_2.jpg
Cliquez pour agrandir 
 
 
3 - Une fois la partie sélectionnez, faite [Edition] puis [Copier]. Ouvrez un nouveau document ([Fichier] >> [Nouveau…]) et la taille du document sera logiquement déjà pré-calculer pour la taille exacte de votre Header puisque vous venez  de faire un « copier ». Une fois le document ouvert faite [Edition] puis [Coller]. Vous avez votre Header ? Donc enregistrer le.

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_3.jpg
Cliquez pour agrandir 
 
http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_4.jpg
Cliquez pour agrandir 

 4 - Ici vous pouvez voir la zone du Background. Comme je vous l’ai dit précédemment, le Background est en faite une image qui se répète. Il est donc inutile de créer une image énorme.

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_5.jpg
Cliquez pour agrandir 

 5 - Au lieu de prendre une taille énorme comme au dessus vous n’allez sélectionnez qu’une seule partie afin d’avoir une image de taille petite (plus facile à charger). Une fois la zone sélectionnez faite exactement comme pour le Header (Copier, nouveau document, coller et enregistrer l’image)

 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_6.jpg
Cliquez pour agrandir 

 6 - Allez on refait la même manipulation avec le Footer. 

http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_7.jpg
Cliquez pour agrandir 
 
7 – Voilà vous avez toutes vos images ? Bravo ^^ Vous êtes prêt pour le codage. 
http://designs.blog.weareplaystation.fr/files/Tutorial/Miniature_-_Tuto_-_8.png
Cliquez pour agrandir 

 

II) Le Codage

        1. Héberger les fichiers images

Etapes très facile : l’hébergement des images. Pour ceci connectez vous sur votre panneau d’administration de votre Blog Player’s Republic.

Rendez vous dans [Tableau de Bord] puis dans [Fichiers]. Cliquez sur le dossier [Files]. Tout en bas vous verrez le cadre « Libellé ». Ce « Libellé » vous permet de créer un dossier. Vous allez donc créer un dossier du nom que vous voulez. Ici nous allons l’appelez « Design-Tuto » puis Valider

Le dossier « Design-Tuto » a été créé et apparait maintenant dans la liste. Cliquez dessus pour rentrer à l’intérieur du dossier.

Un nouveau cadre apparait [Ajouter Fichiers]. Vous allez chercher les fichiers images que vous avez créées. A savoir le Header, le Background et le Footer.

Puis vous faite [Enregistrer]. Vous patientez le temps que les fichiers soient bien hébergés.

medium_Min_1.jpg
Cliquez pour agrandir
 
medium_min_2.jpg
Cliquez pour agrandir

 

Ca y est vos dossier sont bien héberger ? Passons a l’étape suivante ^^

        2. Création du .css

Pour commencer nous allons vous donner le .css de base que nous utilisons. [Clique droit / Enregistrer la cible du lien sous]

Ouvrez le .css avec « Bloc Note ». [Clique droit / Ouvrir avec… et choisissez Bloc Note] 

Premièrement nous allons y incorporez le lien du Background. Pour ce faire vous allez faire un clique droit sur le fichier [Background] que vous avez hébergé puis vous aller faire [Copier le lien].

medium_min_3.jpg
Cliquez pour agrandir

 

Allez ensuite coller ce lien sur votre .css a l’endroit indiqué comme sur les images qui suivent.

medium_min_4.jpg
Cliquez pour agrandir 
 
medium_min_5.jpg
Cliquez pour agrandir  
 

Nous allons refaire la même opération pour le Header et le Footer.

medium_min_6.jpg
Cliquez pour agrandir
 

A partir de là nous allons commencer a installer le design sur notre Blog. Premièrement, pour avoir un aperçu et deuxièmement pour corriger tout les bugs que nous pourrions rencontrer (mauvais découpage d’image, non cohérence entre les images, …)

Pour ce faire vous allez enregistrer les modifications apportés à votre .css.

Ensuite vous allez l’héberger comme pour les images.

medium_min_7.jpg
Cliquez pour agrandir
 

Ensuite vous allez copier ce lcode dans un nouveau module (via le Panneau administrateur, puis dans [Présentation] et enfin dans [Contenu des colonnes])

<STYLE type="text/css">

<!--

@IMPORT URL(Coller-le-lien-de-votre-.css);

 

-->

</STYLE>

 

N’oubliez surtout pas d’y coller le lien de votre .css

Ne pas oubliez de [Mettre à jour] votre Blog en cliquant sur [Mettre à jour]

 
III) Les Box's

 La suite du Tuto arrivera surement un jour mais je peux rien garantir :( (Bac + Vacances avec la famille = pas de Tuto)

09:40 Publié dans Créer son Template | Lien permanent | Commentaires (29) | |  Facebook

Template Warhawk

Le Template Warhawk.

Voici le code HTML à intégrer (copier - coller) dans votre élément personnalisé:

<STYLE type="text/css"> <!-- @IMPORT URL(http://designs.blog.weareplaystation.fr/files/Template_Warhawk/warhawk.css); --> </STYLE>

Vous pouvez avoir un aperçu en cliquant ici

Vous pouvez également consulter notre Tutorial pour savoir toute les étapes de l'instalation du Template.

template warhawk