graphosoleil.blog4ever.net

Graph Ô Soleil

Tuto créer un design avec PFS10

Bonjour à toutes et tous,

 

je vais vous expliquer à travers ce tuto comment je réalise un design simple. Je n’ai pas utilisé de filtre spécial afin que ce soit le plus possible rapproché des bases.

 

En premier, je choisi mes tubes (ce sont des images avec un fond transparent). Vous trouverez plein de blogs qui réalisent des tubes et vous pouvez aussi prendre les miens.

 

Et ensuite je crée mon logo (bannière du haut du blog), c’est d’après le logo fini que  je vais réaliser par la suite tout le design afin qu’il soit harmonieux.

 

J’utilise le logiciel Photofiltre Studio, mais vous pouvez essayer avec d’autres logiciels, comme je n’utilise pas souvent Photofiltre Studio, je m’excuse à l’avance pour les erreurs si il y en a.

 

Vous pouvez télécharger le dossier où vous trouverez les images et un document Word que vous pourrez imprimer => 

 

Commençons :

 

Réalisation du logo.

 

Ouvrir votre Photofiltre studio, puis clic sur « Nouveau » les dimensions dépendent de ce que vous avez mis en dimensions pour  « Cadre » dans votre blog. Cocher « transparent ».

 

Exemple : si votre cadre fait 960px en largeur alors votre logo vous pouvez le faire de la même taille.

 

Pensez de temps en temps à enregistrer votre travail en PFI.

 

 

Mes dimensions pour ce logo 960px de large et 450 px de hauteur.

 

 

Maintenant vous allez chercher vos tubes. Pour cela vous cliquez sur « Fichier » puis « Ouvrir ».

 

 

 

Avec la pipette vous cliquez sur une couleur claire  sur un des tubes. J’ai choisi le bleu clair du haut de la bouteille de parfum. Et pour l’arrière plan j’ai choisi le bleu foncé de la bouteille du parfum.

 

Vous devez donc avoir comme sur l’image ci-dessous dans votre logiciel la couleur claire en haut et la couleur foncée en bas :

 

 

 

Ensuite on va faire le dégradé. Voir image ci-dessous.

 

 

Puis OK.

 

Ensuite vous faites un clic sur « Filtre » puis « Effet d’optique » puis « Flou gaussien » j’ai mis 10 en rayon.

 

J’active mon tube des danseuses je clic sur « Edition » puis « Copier ».

 

J’active mon image fond (960px) puis je clic sur « Edition » puis « Coller ». Si il est trop grand je le redimensionne en faisant un clic sur « Calque » puis « Transformation» puis « Redimensionner le calque ».

 

Je duplique le calque des danseuses. Puis je clique sur l’icône « Symétrie horizontale ».

 

Je vais positionner les calques comme sur l’image ci-dessous.

 

(Clic sur l'image pour la voir en grand)

 

Fichier hébergé par Archive-Host.com

 

Je fais un clic droit sur le calque 2 puis « fusionner avec le calque inférieur ».

 

Je reste sélectionner sur ce calque. Et je clic sur « Calque » puis sur « Options » coché la case  « Ombre portée » et faire comme sur l’image ci-dessous.

 

 

J’active le tube la bouteille de parfum. Et je vais la copier et la coller. Redimensionner le calque si il est trop grand.

 

Je vais lui faire la même ombre portée. Fusionner avec le calque inférieur.

 

Je duplique le calque et je clic sur « Symétrie verticale ». Je fusionne avec le calque inférieur.

 

J’active le calque « fond » et je le duplique. J’active le calque des danseuses et je fusionne avec le calque inférieur.

 

Je clic sur « Filtre » puis « effet d’optique » puis « flou radial », le niveau à 12. Refaire le même flou radial.

 

Je me positionne sur le calque « fond » et je clic sur « sélection » puis « tout sélectionner » je vais me positionner sur le calque au dessus et je clic sur « sélection » puis « inverser » et avec  la touche supprime je vais supprimer tout ce qui dépasse.

 

Je clic sur « Réglage » puis « Netteté » puis « plus de netteté ».

 

Je vais coller de nouveau les danseuses et la bouteille de parfum. Je vais les redimensionner, dupliquer le calque des danseuses et faire « Symétrie horizontale » ensuite je vais les placer. Puis je vais leur faire la même ombre portée.

 

(clic sur l'image pour la voir en grand)

 

Fichier hébergé par Archive-Host.com 

 

Je vais maintenant taper mon texte.

 

Clic sur l’outil « T ». Choisir la police et la taille. Et l’effet que vous voulez.

 

 

 

Ne pas oublier de faire « OK » Puis convertir votre texte en calque image.

 

Avec l’outil déplacement placé votre texte ou vous le désirez.

 

Signez votre travail.

 

Maintenant nous allons terminer le logo en lui mettant un cadre.

 

En premier je vais fusionner tous les calques. Je clic sur « Calques » puis sur « Fusionner tous les calques». Je l’enregistre sous… en jpeg.

 

Je clic sur « Edition » puis sur « Copier ». Coller en tant qu’image. Vous fermez l’autre.

 

Je clic sur l’icône  « Encadrement et recadrage » puis sur « Encadrer/recadrer ».  

 

 

Je clic sur enregistrer la photo Encadrée en la nommant cadre1.

 

 

Je vais ouvrir dans PFS ma création nommée cadre1.

 

Je vais refaire un cadre.

 

 

Et cette fois je vais clic sur « ramener la photo encadrée vers PF.

 

Calque nouveau calque vierge. Et je vais lui mettre le dégradé que nous avons déjà fait.

 

J’ai fait un clic sur Flitre puis Encadrement puis Bord en relief épaisseur 5 cocher lisser.

 

Sélection puis sélectionner tout. Sélection puis contracter de 10, et touche supprime de votre clavier. Masquer la sélection, fusionner tous les calques et enregistrer votre création.

 

Votre logo est fini. Il fera en dimension 950 de large sur 462 de hauteur.

 

Dans votre CSS à =>{haut} , il faudra mettre ces dimensions. 

 

(clic sur l'image pour al voir en grand) 

 

Fichier hébergé par Archive-Host.com

 

 

Réalisation du fond de page (ou contenu et menu) :

 

Afin que mon logo ressorte bien je vais le faire plus clair.

 

Je clic sur « Nouveau » et les dimensions seront de 400px de large et hauteur. Cocher « Transparent ».

 

Avec le pot de peinture je vais le remplir de la couleur claire.

 

J’y ai rajouté une texture, voir image ci-dessous. 

 

 

 

 

Ce fond vous pouvez l’utiliser pour votre fond de page ou contenu et menu, mais si vous le choisissez pour votre contenu et menu, il faudra que votre couleur texte soit foncé. Sinon on aura dû mal à lire votre texte.

 

Je clic sur « Fichier » et je l’enregistre sous… en fichier PNG.

 

Réalisation d’un 2ème fond :

 

 

 

Je clic sur « Nouveau » les dimensions sont les même (400px de large et de hauteur).

 

Comme j’ai choisi le premier fond en fond de page mon fond pour le contenu et menu sera avec une couleur foncée.

 

Je remplie donc mon image à l’aide de l’outil pot de peinture avec la couleur foncée.

 

Je vais lui faire également une texture. 

 

 

 

Je clic sur « Fichier » et je l’enregistre sous… en fichier PNG.

Vous pouvez aussi faire trois fonds. Le 1er fond pour  « Page », le 2è fond pour « Cadre » et le 3é fond (faire le même 2è fond mais avec la couleur claire) pour « Contenu et menu ».

 

Vous pouvez aussi procéder de cette façon :

Mettre le 1er fond pour « Page »

Le 2ème fond pour « Cadre »

Et utiliser le 1er fond pour « Contenu et menu », mais comme je vous l’ai déjà dit attention à la couleur du texte dans votre blog.

 

Ou bien :

Mettre le 2ème fond pour « Page »

Mettre le 1er fond pour « Cadre »

Mettre le 3ème fond couleur claire pour « Contenu et Menu ».

 

Réalisation de la barre :

 

 

Je clic sur « Nouveau » les dimensions que j’ai choisis sont :

 

200px de large sur 80px de hauteur (vous pouvez mettre d’autres dimensions selon ce que vous voulez faire comme barre).

Je l’ai rempli avec le même dégradé de couleur que le logo. J’ai fait également le même flou gaussien. J’ai rajouté aussi une texture.

 

Calque, Nouveau vierge. Je l'ai rempli avec une couleur claire (la même que la petite bordure du logo) . Ensuite j’ai fait sélection tout sélectionner puis contracter de 5. Ensuite touche supprime avec mon clavier. Sélection puis masquer la sélection.

 

J’ai également fait Filtre, encadrer puis bouton 3D

 

 

Il ne reste plus qu’à l’enregistrer sous… en jpeg.

 

Pour la barre survol faire idem de ce que je viens de faire mais au niveau couleur faire l’inverse.

 

Réalisation des boutons menu :

 

 

Je vais faire en sorte que les danseuses se positionnent juste en dessous du titre du menu.

 

Pour cela je clic sur « Nouveau » et je vais mettre ces dimensions :

200 px de large et 270 px de hauteur (il est évident que vous pouvez mettre d’autres dimensions).

 

N’oubliez pas de cocher transparent.

 

J’ouvre dans mon PFS le tube des danseuses, je clic sur « edition » puis « Copier ». Je reclic sur « Edition » puis « Coller» dans le calque nouveau. Je vais « Redimensionner » mon calque afin qu’il soit positionner comme sur l’image ci-dessous.

 

 

Je n’ai plus qu’à l’enregistrer sous… en type fichier PNG.

 

Réalisation de la petite créa pour le contenu H3 :

 

 

« Nouveau » aux dimensions de 500 pixels de large (ou plus c’est comme vous voulez) et 100 pixels de hauteur.

 

La case transparent cocher.

 

Je l’ai rempli de la couleur foncée (ou claire selon le fond de contenu) et je refaire la même texture que pour le fond foncé.

 

Et je lui rajoute une petite bordure. Puis je l’ai enregistrer sous… en JPEG.

 

Je vérifie les dimensions et si elles sont différentes je redimensionne ma création et je l’enregistre de nouveau.

 

Maintenant il ne me reste plus qu’à faire ma créa de bienvenue et merci aux visiteurs (ce n’est pas une obligation).

 

Je rajouterai aussi une barre séparatrice, soit que je la crée moi-même ou bien je vais en chercher une sur le net qui sera en harmonie avec mon design.

 

Créa de bienvenue et merci aux visiteurs :

 

 

 

Voilà mon design est terminé.

 

Je n’ai plus qu’à l’installer et une fois installer je n’ai plus qu’à faire les réglages dans mon CSS.

 

N’oubliez pas que sur le forum d’aide de B4E vous aurez toute l’aide pour les réglages.

 

Amusez vous bien !



28/10/2015
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au site

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 126 autres membres