Maison  >  Article  >  interface Web  >  Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

高洛峰
高洛峰original
2017-02-13 09:11:541977parcourir

En tant que codeur, mes bases artistiques sont faibles. Nous pouvons nous référer à certains didacticiels PS de pages Web matures pour améliorer nos capacités de conception. Pour paraphraser une phrase : « Si vous connaissez trois cents poèmes Tang, vous pouvez les réciter même si vous ne savez pas comment les composer. »

Les tutoriels de cette série proviennent de tutoriels PS en ligne, tous venus de l'étranger, et tous en anglais. J'essaie de traduire ces excellents tutoriels. En raison des capacités de traduction limitées, les détails de la traduction doivent encore être réglés. Nous espérons que les internautes vous donneront quelques conseils.

Promesse :

1. Le logiciel utilisé dans cet article est la version Photoshop CS5

2 Les captures d'écran du tutoriel original sont en anglais sur la base desquelles je les ai reprises. la reproduction. version chinoise de l'image

3. Certaines opérations dans le texte original ne donnent pas de paramètres. J'ai mesuré certains paramètres grâce à des tests répétés, qui sont affichés en rouge. Pour certains paramètres incorrects, les paramètres corrects sont directement affichés en texte rouge

Par exemple : (90, 22, 231, 77) , indiquant que les coordonnées du coin supérieur gauche du le rectangle sont (90, 22) , largeur 231, hauteur 77

Par exemple : (90, 22) , indiquant que les coordonnées du coin supérieur gauche du rectangle sont (90, 22), et les deux autres paramètres du rectangle ont été précisés dans le tutoriel

4. Ma propre expérience sera jointe à la fin du tutoriel. Certaines sont des optimisations de certaines étapes du tutoriel, etc.

Aujourd'hui, je vais créer une mise en page pour un travail d'hôtel également si vous avez un site lié à l'hôtellerie : chambres d'hôtes, motels, et cela fonctionnera très bien pour les restaurants, les cafés. , pizzerias, bars, établissements vinicoles, etc.

Cette mise en page fonctionnera également bien. Fonctionne sur des sites Web liés à l'industrie hôtelière : hôtels avec petit-déjeuner, motels et parfait pour les restaurants, cafés, pizzerias, bars, restaurants, etc.


J'utiliserai une belle image de fond et vous verrez qu'une simple image de fond créera une mise en page rustique élégante

J'utiliserai une belle image de fond et vous Nous verrons qu'une simple image d'arrière-plan créera une mise en page rustique et élégante.


Créez un nouveau document avec la taille suivante : 1000 pixels de largeur et 1100 pixels de hauteur

Veuillez cliquer sur l'image suivante. pour voir l'image en taille réelle. Enregistrez l'image sur votre ordinateur, puis ouvrez ce modèle sans couture dans Photoshop. Nous utiliserons cette image pour créer un arrière-plan pour cet aménagement d'hôtel.

Veuillez cliquer sur l'image ci-dessous pour. voir l'image en taille réelle. Enregistrez l'image sur votre ordinateur et ouvrez ce modèle sans couture dans Photoshop. Nous utiliserons cette image pour créer un arrière-plan pour cet aménagement d'hôtel.

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Ouvrez l'image d'en haut dans Photoshop puis allez dans Modifier > images.

Ouvrez l'image ci-dessus dans Photoshop et cliquez sur :

ModifierTutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop >

Définir le motif

. De cette façon, vous pouvez créer des motifs à partir de vos images.

Vous pouvez fermer le document avec cette image d'arrière-plan, puis vous devez ajouter ce motif sur votre document de mise en page. Pour ajouter le motif, vous devez sélectionner l'outil Pot de peinture.

Vous. Vous pouvez désactiver l’image d’arrière-plan de votre document, puis ajouter ce modèle à votre document de mise en page. Pour ajouter un motif, vous devez sélectionner l'Outil Pot de peinture

Assurez-vous de sélectionner le motif que vous venez de créer

<.> Cliquez une fois sur votre document. L'arrière-plan de cette mise en page ressemblera à l'image suivante.

Cliquez une fois sur votre document. L'arrière-plan de votre mise en page ressemblera à l'image ci-dessous

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Comme vous pouvez le voir, le modèle remplit tout le document mais au bas de la mise en page, cela n'a pas l'air très bien, je vais résoudre le problème très rapidement. . Avec l'outil Pinceau (et avec un pinceau lisse), je ferai un dessin au bas de la mise en page. La couleur que vous choisissez est très importante. Je vous recommanderai d'utiliser l'outil Pipette pour saisir la couleur exacte. ou une couleur similaire à la mienne.

Comme vous pouvez le voir, le motif remplit tout le document, mais au bas de la mise en page, il semble très déplacé. Je vais bientôt résoudre ce problème. À l'aide de l'Outil Pinceau (avec le Pinceau lisse), je peins le bas de la mise en page. La couleur que vous choisissez pour dessiner est très importante. Je recommanderais d'utiliser l'Outil Pipette pour les yeux pour obtenir des couleurs exactes ou des couleurs similaires aux miennes.

Suggestion : Utilisez l'Outil Rectangle pour créer un nouveau rectangle (0, 852, 1000, 248), couleur : #111119 est relativement simple

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Avec l'outil Rectangle arrondi, je vais créer une forme au milieu de la mise en page

Avec l'outil Rectangle arrondi Un rectangle arrondi(42 117 920 320)

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

J'ajouterai les styles de calque suivants

Ajouter le style de calque comme indiqué ci-dessous

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur pour la superposition de couleurs : #f3c090

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur du contour : #434343

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Voici mon résultat jusqu'à présent

Ce qui suit est le mien Résultat

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Maintenant, c'est à vous de décider ce que vous placerez ici. Je n'utiliserai qu'une image avec un restaurant, mais vous pouvez créer ici un joli diaporama, ou peut-être un formulaire de réservation.

La prochaine étape consiste à préparer du contenu ici. Je viens d'utiliser l'image d'un restaurant, mais vous pourriez créer un joli slider d'image, peut-être avec un formulaire de réservation

Remarque : après avoir placé l'image, faites un clic droit sur le calque d'image et sélectionnez Ajouter un masque d'écrêtage. À ce stade, le style de superposition de motifs dans le style de calque du calque rectangle arrondi précédent doit être supprimé. De plus, la couleur sélectionnée dans la superposition de couleurs précédente rend l'image plus lumineuse, car la couleur sélectionnée dans la superposition de couleurs est jaunâtre, ce qui correspond à la couleur principale de l'image. Si la couleur principale de l'image est une autre couleur, alors la couleur de la superposition de couleurs doit également être modifiée en conséquence

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

En haut Je vais créer une autre forme ronde. cette forme sera transformée en un menu simple

et un autre rectangle arrondi (42, 117, 920, 45) sera créé par dessus. Le rectangle deviendra un menu normal

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Pour ce calque, j'ajouterai les styles de calque suivants

Comme indiqué ci-dessous Ajouter un style de calque

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

à ce calque. Couleur de superposition dégradée : #9c9ea5

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur de trait : # 424242

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Voici mon résultat jusqu'à présent

Voici mon résultat

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Je vais utiliser encore une fois l'outil Rectangle arrondi pour créer trois formes>

Ils sont : (48, 546, 908, 437), couleur : #f4c79f ; ), couleur : #fbe1c7; (48, 993, 908, 87), Couleur : #fbe1c7

Pour toutes ces formes je utilisera les styles de calque suivants. Ajoutez la couleur de trait du style Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

dans l'image ci-dessous : # 424242

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Voici mon résultat jusqu'à présent

Voici mon résultatTutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Maintenant, je vais utiliser l'outil Plume pour créer une forme similaire à celle que vous voyez dans l'image suivante. Le moyen le plus simple de créer une telle forme est d'activer la grille (Affichage > Afficher > Grille). )

Utilisez maintenant l' Outil Plume pour créer une forme similaire à ce que vous voyez. Afin de créer cette forme plus facilement, vous pouvez ouvrir la grille (Affichage> Affichage> Grille)

Recommandation : Vous pouvez utiliser l'Outil Rectangle Créez un rectangle (350, -52, 307, 190), puis utilisez l' Outil Ajouter un point d'ancrage pour ajouter un point d'ancrage au milieu du bord inférieur du rectangle, et utilisez l'outil Direct Outil de sélection pour faire glisser l'ancre Cliquez sur la position appropriée

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

J'ajouterai les styles de calques suivants pour cette écharpe simple.

Suivez l'image ci-dessous Ajoutez un style de calque à la forme

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur pour la superposition de dégradé : #f8d3a5, # ca8f43

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Voici mon résultat

Voici mon résultat

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Je vais dupliquer ce calque plusieurs fois et je placerai les nouveaux calques comme dans l'image suivante

Je vais dupliquer ce calque. plusieurs fois et je placerai les nouveaux calques comme dans l'image suivante. (Appuyez sur Ctrl T pour transformer et ajuster librement à la taille appropriée)

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

J'ajouterai du texte et des images par-dessus cette mise en page.

Je vais ajouter du texte et des images sur ma mise en page


Encore une fois ce sera mieux si vous cliquez sur l'image suivante pour mieux voir la mise en page de mon restaurant/hôtel

Encore une fois, si vous cliquez sur ma photo, vous trouverez une meilleure mise en page de la page Web de l'hôtel (hôtel)

Remarque : Cette étape est également mentionnée d'un seul coup dans le texte original, donc, complétez ici

Utilisez l'outil de forme personnalisée pour créer 5 étoiles à cinq branches en haut de la mise en page et ajoutez à chaque étoile à cinq branches Le style suivant :

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur du trait : #424242

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Ajoutez le texte approprié au drapeau, avec la police comme indiqué ci-dessous :

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Ajouter le texte et la police du menu au menu bar Comme suit, la couleur : #41372d

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Au centre gauche de la mise en page, ajouter Un titre, et un paragraphe de texte, couleur : #40372e

La police du titre

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

La police du texte du paragraphe Police :

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

et ajoutez deux blocs de texte supplémentaires

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Ajouter des liens de navigation en bas de la mise en page, police :

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Utilisez l'Outil Rectangle arrondi pour créer quatre rectangles arrondis, à savoir (64 837 213 136), ( 284 837, 213 136), (504 837 213 136), (724 837 213 136)

Ajoutez le style de calque suivant à chaque rectangle arrondi

Couleur de lueur intérieure : # f8ddc5

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur du trait : #424242

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Placez une image sur chaque rectangle arrondi, faites un clic droit sur le calque d'image et sélectionnez Créer un masque d'écrêtage

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Maintenant, je vais essayer de créer une écharpe en haut de la mise en page. Je vais utiliser l'outil Stylo pour créer quelque chose comme ça

Maintenant, je vais essayer de créer. un foulard au dessus de la mise en page. J'utiliserai l' Outil Plume pour créer cette écharpe

Recommandation : Créez un rectangle avec l'outil Rectangle, appuyez sur Ctrl T pour transformer librement, sélectionnez le mode Transformation, ajustez ce qui suit forme

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Utilisez l'Ajouter un point d'ancrage pour ajouter un point d'ancrage au milieu du côté droit et faites-le glisser avec l'Outil de sélection directe Déplacez le point d'ancrage à la position appropriée

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Ajoutez un style de calque à le calque

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur de superposition de dégradé : #9c9ea5

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Couleur de trait : #424242

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Comme vous pouvez le voir, j'ai utilisé le même style de calque que moi avez utilisé pour le menu supérieur

Comme vous pouvez le voir, ajoutez le même style de calque que le style de calque de la barre de menu supérieure

Utilisez l'outil Ellipse pour créer un petit cercle et placez-le. sur l'écharpe Dans la partie supérieure gauche, l'ombre de l'écharpe a été formée, ajoutez le même style de calque que l'écharpe et ajustez l'ordre des calques

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop


Maintenant, je vais écrire « Bienvenue sur Grafpedia ». Ceci est mon résultat final

Ensuite, écrivez le texte Bienvenue sur Grafpedia. Voilà mon résultat

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Résultat final :

Tutoriel PS Web Design XVIII – Concevoir une mise en page Web élégante pour un hôtel ou un restaurant de campagne dans Photoshop

Post-scriptum :

Une page Web élégante avec des caractéristiques de grain de bois, utilisant pleinement les styles de calque pour obtenir des effets spéciaux de grain de bois

Plus de tutoriels de conception de sites Web PS XVIII - Concevoir un hôtel de campagne ou un hôtel élégant dans Photoshop Pour les articles liés à la mise en page des pages Web des restaurants, veuillez faire attention au site Web PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn