septembre 2011

comment Créer un template léger et professionnel Créer un template léger et professionnel Créer un template léger et professionnel

mardi 6 septembre 2011 oussama graff

Si vous avez besoin d'images ou de photos pour personnaliser vos créations visitez notre Galerie.
Commencez par créer un document (1100X1400px). Ensuite, créez des repères pour aider à former la base de votre template.
Créez un repère vertical à 100px et un autre à 1000px. Ensuite, créez un repère horizontal à 250 pixels. Nous allons rajouter de nouveaux repères plus tard mais ceux-ci forment le base de notre template.
template_1
Créez un nouveau calque nommé «arrière-plan principal».
Assurez vous que le calque «arrière-plan principal» est Sélectionné, puis prenez cette couleur #efeade comme couleur de premier-plan et faîtes alt+supp (ou utilisez l'outil pot de peinture) pour remplir votre calque en entier.
template_2
Avec l'outil rectangle de sélection, sélectionnez les 250px en haut de votre image à l'aide du repère horizontal.
Créez un nouveau calque appelé "entête bleue" et remplissez la zone sélectionnée avec un dégradé linéaire allant de #006fa3 à #0a92d2.
template_3
template_4
Créer un nouveau calque nommé 'lumière en-tête'.
Prenez votre outil de dégradé radial et sélectionnez un dégradé allant du blanc au transparent. Ensuite, tracez celui-ci à partir du bas-centre vers le haut de votre zone d'en-tête bleu.
Changez le mode de fusion de ce calque en "incrustation" et réduisez son opacité à 50%.
template_5
template_6
Téléchargez cette texture de vieux papier et collez-la sur votre document.
Réduisez l'opacité du calque "texture vieux papier" à 40%, et changez son mode de fusion à "produit".
template_7
template_8
Téléchargez cette jolie photo de nuages. Collez-la dans votre document et redimensionnez / recadrez si nécessaire.
Allez à Image> Réglages> désaturation.
Réduisez l'opacité de ce calque à 30%, et changez son mode de fusion à "superposition".
template_9
template_10
template_11
Avec votre calque "nuages" toujours sélectionné, allez dans menu calque>masque de fusion> tout faire apparaître.
Vous remarquez que le bas de votre image "nuages" ne s'intègre pas harmonieusement dans votre fond crème.
Avec le masque de fusion sélectionné, prenez un grand pinceau doux noir, et badigeonner le bord de votre image "nuages" pour la fondre en douceur et de façon non destructive dans l'arrière-plan.
template_12
Créez un nouveau calque appelé "diviseur".
Avec l'outil rectangle de sélection créez une ligne de 2px de hauteur au dessous de votre zone d'en-tête bleu, remplissez-la de blanc et réduisez l'opacité du calque à 30%.
Cela devrait créer un effet subtile entre l'entête et la zone de contenu.
template_13
L'utilisation du mode de fusion "produit" a terni les couleurs du template légèrement, donc créez un calque de réglage vibrance.
Vibrance: +100
Saturation: +40
Ce calque de réglage donnera plus d'éclat à notre template.
template_14
Ajoutez quelques repères de plus à votre document, deux repères horizontaux fixés  à 130 px et à 1100px.
Créez un nouveau calque nommé "zone contenu principal".
En utilisant vos nouveaux repères et vos repères latéraux, Créer une sélection et remplissez-la de cette couleur #f1efe9.
template_15
Allez dans les options de fusion et ajouter une lueur externe.
template_16
Télécharger cette icône coller-la dans votre entête. Ensuite, créez un texte logo:
template_17
Créez un nouveau calque nommé "champ recherche", sélectionnez l'outil rectangle arrondi avec un rayon de 5px et créer un rectangle blanc en haut à droite dans le template, puis réduisez l'opacité du calque à 50%.
template_18
Créez un nouveau calque nommé "bouton recherche" pour réaliser un bouton pour le champs de recherche. Utilisez pour cela votre outil rectangle arrondi à nouveau, puis appliquez une incrustation en dégradé et une ombre interne dans les options de fusion:
template_19
template_20
template_21
Ajoutez un peu de texte sur votre formulaire de recherche.
template_22
Nous allons réaliser un menu.
Créez deux nouveaux repères verticaux (90px et 1010px), créez aussi un repère horizontal (180px).
L'image ci-dessous montre où nous en sommes avec les repères:
template_23
Créez un nouveau calque nommé "barre menu". Utilisez l'outil rectangle de sélection à l'aide des repères pour créer la forme du menu, et  Remplissez cette sélection avec un dégradé linéaire allant de #ffc000 à #ffa200.
template_24
Allez dans les options de fusion du calque "barre menu" et appliquez une ombre portée et ombre interne.
template_25
template_26
template_27
Créez un nouveau calque nommé "effet menu 3D". Utilisez votre outil lasso polygonal pour créer un triangle noir sous la partie de votre menu qui déborde sur l'arrière-plan. Cela devrait donner l'impression que votre menu s'enroule autour de la zone de contenu.
template_28
template_29
Créez un rectangle arrondi (rayon: 5px, couleur: #55462b) sur le menu.
Appelez ce calque "menu survolé" et réduisez son opacité à 15%.
template_30
Tapez du texte sur votre menu.
template_31
Collez une belle photo de paysage sous vos calques de menu, puis redimensionner la photo pour bien cadrer.
template_32
Créez un nouveau calque nommé "barre noire". Utilisez votre outil rectangle de sélection et le pot de peinture pour créer une barre noire à la base de votre photo.
Ensuite, réduisez l'opacité du calque d'environ 50%.
template_33
template_34
Ajoutez votre slogan sur la partie gauche de la barre.
template_35
Utilisez l'outil forme personnalisée pour créer deux fléchettes (commandes d'une visionneuse) sur la partie droite de la barre noire.
template_36
Téléchargez cette photo de papier ligné.
Collez-la dans votre document, recadrer et redimensionner pour l'adapter en tant que colonne gauche au sein de votre zone de contenu principal.
template_37
Créez un masque de fusion pour votre calque "papier ligné" pour masquer son côté droit, afin que l'image se fonde harmonieusement dans la zone de contenu principal.
Sélectionnez l'outil pinceau, prenez une forme ronde d'une grande taille (vers les 200px) et d'une dureté de 0% puis choisissez la couleur noire et barbouillez un peu le coté droit du masque de fusion.
Réduisez l'opacité de votre calque "papier ligné" à 40%.
template_38
Tapez un peu de texte dans votre colonne de gauche.
template_39
Vous allez créer une ligne qui sépare votre colonne de gauche du reste de votre zone de contenu principal.
Créez un nouveau calque nommé "ligne séparatrice".
Commencez par la création d'une ligne de 1px (#544f41). Puis réduisez l'opacité du calque à 25%, et utiliser l'outil gomme (bord doux) pour effacer différentes parties de cette ligne de séparation:
template_40
Tapez un peu de texte sur votre colonne droite et n'oubliez pas de laisser un petit espace pour une image:
template_41
Téléchargez cette photo d'un fleuve et collez-la dans votre zone de contenu.
template_42
Il est temps de se mettre au travail sur le pied de page.
Commencez par télécharger ce magnifique pack d'icônes et collez-les comme ceci:
template_43
Enfin, ajouter du texte en bas de page, des liens vers vos pages de réseaux sociaux, vos coordonnées, vos partenaires et un copyright de base.
Et c'est fait!
Vous pouvez visualiser le résultat final ci-dessous. J'espère que vous avez apprécié ce tutoriel et je serais ravi d'entendre vos commentaires.
template_44

0

« Previous Posts Next posts »

Top Menu

Powered by Blogger. Tous Droits Réservés Tous Droits Réservés. by for dessinn.blogspot.com. Proudly powered by Blogger.