En-tête de site Web dans Photoshop

• Mai 21, 2024

Dans ce didacticiel, nous allons créer un en-tête de site Web dans Photoshop^R que nous animerons en Flash^R Catalyseur^TM. L'animation commence avec un arrière-plan vide et les éléments de conception se glissent pour «construire» l'en-tête sous nos yeux. L'animation sera programmée pour commencer "en charge" et ne durera que quelques secondes. Cet en-tête de site Web sera destiné à une entreprise factice de cartes de voeux.

Notre première étape consiste à créer l'en-tête dans Photoshop. Nous allons placer chaque élément de conception sur son propre calque afin de pouvoir travailler avec eux dans Flash Catalyst. Comme vous pouvez le voir, nous aurons 6 éléments de conception.

1. Origines
2. Barre inférieure sur toute la largeur de l'en-tête
3. Nom de l'entreprise
4. Carte d'anniversaire
5. Carte de correspondance de citrouille
6. Carte de Noël

1. Commençons un nouveau projet dans Photoshop. Réglez la largeur sur 1000 pixels, la hauteur sur 225 pixels et l'arrière-plan sur transparent. Cette taille s'intégrera bien en haut de notre page Web.
   
   
2. Le seul élément qui sera visible au début de l'animation est le fond blanc. Remplissez le premier calque de l'image avec la couleur d'arrière-plan de votre choix. Dans le panneau Calques, renommez ce calque "Arrière-plan".
   
   
3. Pour créer le bord ombré, j'ai utilisé le style de calque d'ombre intérieur. Double-cliquez sur le calque d'arrière-plan et cochez la case en regard de l'ombre intérieure. Réglez la distance et le starter sur 0 et la taille sur 49.
   
   
4. Ensuite, nous ajouterons la fine bordure autour de l'image avec le style de calque de trait. J'ai défini la couleur sur un brun (# 6e674f), la taille sur 2 et la position sur l'intérieur.
   
   Ensuite, nous ajouterons les cartes. J'ai réduit la taille de mes cartes de vœux à 230 x 175 pixels. Cela les gardera proportionnellement à la taille de l'en-tête.
   
   
5. Copions / collons la carte Citrouille dans notre en-tête. Nommez le nouveau calque "Pumpkin". Cliquez sur Edition - Transformation libre pour faire pivoter légèrement la carte vers la droite. Cliquez sur le calque Citrouille et appliquez le style de calque Ombre portée, en conservant les paramètres par défaut.
   
   
6. Répétez la dernière étape pour la carte d'anniversaire et de Noël.
   
   Ensuite, nous ajouterons la barre au bas de l'en-tête. Nous placerons nos cartes derrière ce bar pour émuler des cartes sur une étagère.
   
   
7. Ajoutez un nouveau calque au panneau Calques et nommez-le "Bar".
   
   
8. Avec l'outil Rectangle de sélection, sélectionnez la zone inférieure de l'en-tête, juste à l'intérieur de la bordure brune. Choisissez une couleur pour votre barre et remplissez la sélection avec cette couleur.
   
   
9. Double-cliquez sur le calque et ajoutez le style de calque de trait comme vous l'avez fait au calque d'arrière-plan.
   
   
10. Cliquez sur l'outil Type horizontal et choisissez une police pour le nom de votre entreprise. J'ai utilisé la même couleur brune que la couleur de la bordure. Tapez le nom de l'entreprise sur le côté gauche de l'en-tête.
    
    
11. Cette étape est facultative. Nous allons pixelliser le texte. Cliquez avec le bouton droit sur le calque de texte et choisissez Rasterize Type dans le menu.
    
    
12. Enregistrez votre projet au format Photoshop .psd.
    
    

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: 7 Règles à Absolument Appliquer Quand Vous Créez Un Site Web (Mai 2024).