Quantcast
Channel: WEBMASTER TUTORIAL » Webdesign
Viewing all articles
Browse latest Browse all 7

Tutoriel : Créer un template de site web avec photoshop CS5

0
0

Ce tutorial va vous apprendre comment créer un template de site web. Bon nombre des techniques impliquées sont assez basique, mais dans le tutoriel,connaitre les différents technique de création de template de site web avec les outils de photoshop CS5

Image finale

C’est l’image finale que nous allons créer:

les étapes pour Créer un template de site web avec photoshop CS5

Étape 1:

Créez un nouveau document (1000X800px). Créez un nouveau calque de votre arrière-plan et le remplir avec E3D4B9.

Étape 2

Maintenant, collez-le dans une image de quelque papier ligné, j’ai utilisé la première photo de notre libre Papier Texture publié ici même au PSDFAN. Découpez le papier à l’aide de votre baguette magique, puis l’outil de aller à Image> Réglages> désaturer. Ensuite, appliquer les paramètres d’ombre portée ci-dessous:

Étape 3

Maintenant, je prends quelques images de notre Pack Essentials Grunge . Je commence par placer quelques taches de café sur mon papier ligné, ensuite pour s’assurer qu’elles ne montrent que sur mon papier et non pas mes antécédents, je sélectionne mes couche de papier, cliquez quelque part autour de lui en utilisant l’outil baguette magique, puis sélectionnez mon café taches couche et appuyez sur Supprimer. Réduire l’opacité de votre tache couches de café à 25%. Maintenant la position d’une image un trombone sur le côté de votre document et l’utilisation de votre outil lasso pour couper la partie du clip qui devrait être derrière le papier. Puis donnez-lui une ombre portée subtile. Ensuite, collez-le dans les images de ruban adhésif (également de l’essentiel de notre grunge pack). J’ai également installé dans le poste qu’il image, bien que la prochaine étape sera d’expliquer comment j’ai fait cela plus en détail.Enfin, j’ai ajouté un peu de texte à mon post it (police: l’écriture manuscrite Dakota).

Quelques pointeurs

design Grunge est sur toutes les images de montage très bien ensemble. Pour rendre le ruban adhésif mélange avec le reste de ma mise en page-je réduire la saturation de l’image à -45 (Image> Réglages> Teinte / Saturation). J’ai aussi de réduire l’opacité du calque du ruban adhésif à 90% pour donner l’illusion d’un peu les variations de la surface recouverte. Pour ma post-ce l’image que je radicalement modifié la saturation et la luminosité / obscurité afin de cadrent bien avec mes éléments grunge autres.

Un autre conseil pour la conception grunge est de faire varier les éléments de votre visuel. Il est autorisé à utiliser les mêmes images encore et encore, mais vous ne pouvez pas les faire regarder exactement la même chose. A chaque utilisation de mon image de ruban adhésif, j’ai essayé de redimensionner / tourner légèrement, ainsi que subtilement modifier la luminosité / saturation. Cela aide à construire le regard désordre global de grunge.

Etape 4

Après avoir réfléchi à la façon dont les différents éléments s’intègrent bien ensemble, je ne pouvais m’empêcher de remarquer comment l’image en niveaux de gris doublé de papier avait l’air un petit appartement en noir / blanc. Pour lui donner une teinte de couleur je suis allé à l’image> ajustements de balance des couleurs> et a appliqué les réglages indiqués ci-dessous.Cela a permis de se fondre avec les autres éléments beaucoup mieux.

Etape 5

Maintenant, je prends une image de notre rayon de soleil Je le coller de sorte que le centre de la sunburst est derrière mon poste, il l’image. Pour supprimer les parties du rayon de soleil qui se chevauchent mon mémoire, je sélectionne mes couche de papier, cliquez sur l’extérieur en utilisant la baguette magique et puis ma couche sunburst et cliquez sur Supprimer. J’ai également sélectionner chacun des trous dans le haut de l’image papier et répéter la même étape. Puis-je mettre la couche de mélange de mode sunburst mon possible pour «brûler la couleur et de réduire l’opacité à 8%. On obtient ainsi une sorte d’effet d’aquarelle cool.

Étape 6

Maintenant, créez un nouveau document et tracer un carré brun foncé à peu près au milieu de l’image. Avec votre carré sélectionnés, allez dans Sélection> Modifier> Contrat et le contrat de votre sélection par 10px, puis appuyez sur « supprimer » pour laisser une sorte de cadre.Ensuite, prenez votre pinceau gomme et effacer votre cadre marron à l’aide d’un pinceau d’aquarelle à faible opacité. Maintenant, prenez une image que vous voulez mettre dans votre cadre et redimensionner / culture pour l’ajuster.

Étape 7

Dans votre document cadre de cacher votre couche principale fond blanc, puis passez à la couche> Fusionner les calques visibles de fusionner le cadre et l’image. Ensuite, copiez l’image fusionnée dans votre document original. Répétez cette étape grâce à des images différentes jusqu’à ce que vous avez environ 3 dans votre conception principale. L’avantage de créer vos images dans un nouveau document est que vous pouvez facilement changer l’image d’être encadrées et puis fusionner / copier ce retour dans votre conception d’origine. J’ai aussi ajouté un peu de texte et une flèche au-dessus de ces images.

Étape 8

Maintenant, collez-le dans une autre image de notre Set textures de papier dans le fond de la conception. N’oubliez pas de créer un nouveau calque en dessous de votre papier principale bordée, comme nous voulons que cette section doit être inférieur à celui région. Pour le mélange bien avec le fond, j’ai mis la couche de mode de fusion de combustion linéaire et réduit son opacité à 30%. J’ai aussi appliqué les paramètres d’ombre intérieur indiquées ci-dessous pour donner l’effet de profondeur.

Étape 9

Cette partie est vraiment à votre créativité. Utilisation des textures de papier que vous pouvez trouver commencer bits coller du papier tout au long de votre conception. Soyez sûr de faire les mélanger ensemble bien en ajustant les couleurs des images / lightnesses. J’ai aussi collé à mon image du ruban adhésif quelques fois plus de contribuer à l’arrière-plan, mais fait en sorte de maintenir le faible opacité de sorte qu’il n’était pas écrasante. L’astuce est de combiner autant d’images que possible, sans être trop occupé ou distrait. Il est préférable de garder l’opacité de la plupart des couches très bas, que vous pouvez construire une vraiment sale impression sans nuire à vos domaines de contenu.

Etape 10

Maintenant, je ajouter un peu plus de détails tels que les taches de café encore / trombones, et j’ajoute l’étiquette de mon Pack Essentials Grunge. Enfin, je ajouter du texte à l’étiquette, simplement en le tapant sur et ensuite aller dans Edition> Transformation> Rotation et montage correctement.

Etape 11

Maintenant, pour créer le menu du site. Je tape mes liens du menu sur la feuille de papier juste en dessous de mon label. Puis-je utiliser mon outil en ligne et outil personnalisé formes pour créer des lignes de démarcation et des flèches à côté de mes liens de menu. La grande chose au sujet de conception grunge, c’est que souvent les choses n’ont pas besoin d’être trop précis. Lorsque vous faites sortir vos flèches et des lignes dont vous n’avez pas à vous soucier de tous à la même taille ou de tous les alignant parfaitement, il suffit de les sortir le plus rapidement et à peu près que vous le souhaitez. Enfin, de fusionner l’ensemble de vos flèches en une seule couche, puis l’ensemble de vos lignes de séparation en une seule couche.pinceau d’aquarelle Prenez une faible opacité, les pièces de gomme et effacer l’écart de vos lignes / flèches pour créer un look plus grunge.

Etape 12

Coller dans une bonne image sur votre papier ligné, en étant sûr de la position de ce nouveau calque que vous publiez sous couche et il vignettes couches. Découpez-la en utilisant la technique de baguette magique a été expliqué précédemment. Réglez ensuite la couche de mode de fusion lumière dure et de réduire l’opacité à 70%. Enfin l’utilisation d’une aquarelle pinceau gomme pour effacer le bas côté de votre image dans un style désordonné.

Etape 13

La disposition est à la recherche tout à fait bien jusqu’ici, mais il est sans structure, en particulier la zone supérieure. En dépit de la conception grunge étant généralement très salissant, cela ne signifie pas qu’il manque de structure. Certains des meilleurs dessins grunge encore appliquer des structures assez rigides, tout simplement parce qu’il permet de lier une mise en page très bien ensemble. Dans ce cas, j’ai choisi de créer deux barres sombres qui traversent ma mise en page. Cela peut être assez simple à faire, mais il aide vraiment la mise en page, comme auparavant il était dépourvu de toute forme réelle ou une définition. Les deux lignes de créer des plans pour l’œil de courir à travers et d’aider à encadrer les images en désordre dans le reste de la conception. Rappelez-vous – désordre ne veut pas dire non structurées.

Etape 14

Maintenant, je crée un bulletin inscription aire sous mon menu. Les techniques sont assez explicites en regardant l’image ci-dessous, mais encore une fois, le raisonnement derrière eux est essentielle pour appréhender la conception grunge. J’ai délibérément varié l’obscurité du texte (‘Newsletter’ est plus sombre que « Nom » et « Courrier électronique », car cela crée un look superposé. Je crée des boîtes structuré pour le formulaire d’inscription, mais a réduit leur opacité et lentement effacé leurs bords un peu de leur donner un sens sale.

Etape 15

-Je ajouter du texte au fond de ma conception. Il est important de noter que je combine les polices manuscrites et les polices régulières – l’exploitation de la combinaison de la structure / désordre que je l’ai déjà dit. Remarquez aussi comment je réutiliser les flèches de mon menu.Réutilisation des éléments ne fait pas votre conception ennuyeux ou répétitif, mais peut être tout à fait une belle touche de grunge design, le dessin de votre mise en page très bien ensemble.

Etape 16

Enfin, c’est une technique que j’ai utilisé pendant un certain temps. Pour parvenir à une structure de style belle manuscrite autour de ma tête en bas-je choisir un pinceau 1px un tirage d’un grand, de forme ovale bruts. Ensuite, un redimensionnement cet ovale pour s’adapter autour de ma tête. Parce que je l’ai redimensionné autant, les marques de pinceau déjà examiné bruts et non professionnelle ont maintenant un sommaire, la qualité détaillées pour eux. Enfin je prends un pinceau faible opacité aquarelle et peinture à peu près derrière ma tête, juste pour lui donner un peu plus la priorité sur les liens en dessous.

Et nous avons terminé

Voici la maquette. Cliquez sur l’image ci-dessous si vous souhaitez afficher la version pleine grandeur.


Viewing all articles
Browse latest Browse all 7

Latest Images





Latest Images