Share
Dans ce tutoriel, je vais vous expliquer le processus de création d'une interface simple et festive pour une application Web dans Photoshop CC. Le concept derrière l'application est que les utilisateurs peuvent se connecter à Twitter et écrire un souhait de Noël sur un tableau public, créant ainsi une énorme carte postale de Noël. Nous examinerons la typographie de style en combinant une palette de couleurs uniforme et en obtenant une composition nette et spacieuse..
Pour compléter ce didacticiel, vous aurez besoin des ressources suivantes (disponibles gratuitement):
Créer un nouveau document (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous.
N'oubliez pas de vous assurer que la résolution est réglée sur 72 pixels / pouce Définissons quelques guides pour que notre mise en page soit bien centrée et que la section principale (au-dessus du "pli") soit séparée. Aller à Voir> Nouveau guide… et définissez les directives suivantes: vertical à 200px, 700px et 1200px, et horizontal à 200px, 800px et 1590px.
Nous allons garder notre document bien organisé dès le début, alors créez trois groupes de couches nommés Entête, Corps et Bas de page. Si vous vous en tenez à cette étiquette Photoshop, les choses resteront organisées et faciles à naviguer ou à modifier. Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône..
À l'intérieur de Entête groupe créer un nouveau groupe et nommez-le TOP BG. Après cela, sélectionnez le Outil Rectangle (T) et dessine un 1400x800px rectangle. Il devrait être placé en haut du document à la première ligne directrice horizontale.
Téléchargez la photo du ciel nocturne de unsplash.com (une ressource géniale pour des images 100% gratuites) et placez-la sur le rectangle créé (vous pouvez faire glisser l'image directement du navigateur dans votre fenêtre Photoshop). Ensuite, maintenez la ALT clé et souris sur le bas du calque photo. Lorsque la flèche apparaît, relâchez-la pour créer un masque d'écrêtage. Une fois que vous avez terminé avec ce clic CMD + T et redimensionnez la photo pour qu'elle tienne dans le rectangle, en maintenant le Décalage clé pour le réduire proportionnellement.
Maintenant, cliquez avec le bouton droit de la souris sur la couche de photos (pour afficher un menu contextuel) et sélectionnez Options de fusion… . Ensuite, cliquez sur le Superposition de couleurs et mettre la couleur en noir # 000000. Enfin, réduisez le Opacité à 40%.
Maintenant pour un nouveau groupe. Cliquez sur la petite flèche à côté de la TOP BG dossier pour le réduire, puis créez un nouveau groupe appelé Insigne d'arbre Au dessus de.
Changer la couleur de premier plan en blanc #FFFFFF et sélectionnez le Outil Polygone (U). Met le Côtés option de 6 et dessine un 128x146px forme. Assurez-vous qu'il se trouve en position verticale.
Nous allons maintenant créer une forme d'arbre de Noël. Changez la couleur de premier plan en # 42a747 et choisissez le Outil stylo (P). Créez un nouveau calque au-dessus de la forme du polygone et placez des points avec l'outil Plume pour créer la moitié de l'arbre. En portant Décalage tandis que vous le ferez contraindra l’angle des chemins, si vous avez besoin.
Ayant dessiné la moitié de l’arbre, cliquez sur CMD + J dupliquer le calque. Puis transformez la forme (CMD + T) et changez la largeur en -100.00%, cela retournera effectivement notre forme sur l’axe vertical. Placez cette nouvelle forme à côté de l'original et cliquez deux fois sur la vignette du calque pour changer sa couleur en vert plus foncé. # 38993d. Nous avons maintenant une belle illustration plate de notre badge arbre de Noël.
Il nous manque encore le tronc de l'arbre. Créez un nouveau calque et choisissez le Outil Rectangle (U). Définir la couleur de premier plan sur marron # 795000 et dessine un 10x11px rectangle sous notre arbre de Noël.
Une fois notre badge Arbre terminé, cliquez sur la petite flèche située à côté du nom du groupe pour le réduire. Ainsi, le panneau des calques prend moins de place. Après cela, créez un nouveau groupe appelé Copie, puis changez la couleur de premier plan en blanc #FFFFFF et sélectionnez le Outil de type horizontal (T). Ensuite, en supposant que vous ayez déjà installé la police sur votre système, sélectionnez Klinic Slab. Choisir la Lumière version et définir la taille du point à 62 pt. Écrivez la copie comme indiqué ci-dessous ou créez votre propre strapline en la plaçant 50px en dessous de la première ligne directrice horizontale.
Utilisez la variante de police Light Italic pour le 'Merci' Changer la taille de la police en 42 pt et écrivez "et souhaitez à vos amis un". Le placer 30px sous le calque de texte précédent, en s'assurant qu'il est centré.
Retourner à la Insigne d'arbre groupe, développez-le et en maintenant CMD bouton sélectionner les couches des deux moitiés de l’arbre. Frappé CMD + J les dupliquer. Ensuite, renommez le calque en arbre de Noël et le déplacer dans le Copie groupe. Cliquez deux fois sur sa vignette et changez la couleur en blanc #FFFFFF. Frappé CMD + T pour transformer l'objet, et en maintenant le Décalage bouton (pour contraindre les proportions) le réduire à 32x27px , le placer avant notre couche de texte créée précédemment.
Maintenant, dupliquez la couche d'arbre de Noël en cliquant sur CMD + J et placez-le juste après le calque de texte, en gardant le même espace entre ces deux calques, autour de 20px. Puis sélectionnez le Outil de type horizontal (T) encore une fois, en conservant la même police que précédemment et en modifiant la variante de la police Lumière à Livre. Tapez le texte suivant "Joyeux Noël!".
Temps pour quelque chose de différent. Sélectionnez le Outil Ligne (U), ensemble Poids à 3px (vous pouvez trouver ce réglage dans la barre du haut) et tracez une ligne en maintenant Décalage c'est donc parfaitement droit. Le placer 20px sous le "Joyeux Noël!" texte. Dupliquez cette ligne en appuyant sur CMD + J, puis déplacez-le 3px en dessous du premier.
C'est tout pour le groupe de copie, alors réduisez-le en cliquant sur la petite flèche en regard du nom du groupe. Créez un nouveau groupe et nommez-le Connectez-vous avec Twitter, choisir le Outil Rectangle Arrondi (U), ensemble Rayon à 99px et changez la couleur de premier plan en rouge rouge # cf2f32. Après cela, dessinez un 250x57px rectangle et placez-le 60px en dessous des lignes précédemment créées.
Cliquez avec le bouton droit sur le calque de forme pour afficher le menu contextuel, puis sélectionnez Options de fusion… . Puis modifiez le Accident vasculaire cérébral, le mettre à 2px. Changer la couleur au rouge précédemment utilisé # cf2f32 Et mettre À l'intérieur pour le Position. Frappé D'accord.
Définir la couche de bouton Remplir à 0%.
Nous avons besoin de texte pour notre bouton. Avec le Outil de type horizontal (T) sélectionné, choisissez Open Sans Police (normale), définissez la taille sur 18 pt et utilisez la même couleur rouge qu'avant. Écrivez "Connectez-vous avec Twitter". Après cela, maintenez la CMD et survolez la vignette du calque de forme rectangulaire précédemment créée jusqu'à ce que vous voyiez une nouvelle icône avec des bordures en pointillés. Lorsque vous le voyez, cliquez dessus pour faire une sélection de cette couche. Ensuite, sélectionnez le calque de texte, appuyez sur V et alignez-le horizontalement et verticalement à l'aide des outils d'alignement présentés dans la capture d'écran ci-dessous..
Frappé CMD + D désélectionner le bouton. Réduisez le groupe et trouvez le Insigne d'arbre groupe. Sélectionnez-le et appuyez sur CMD + J pour le dupliquer ou faites un clic droit dessus et sélectionnez Groupe en double… . Développez le groupe et supprimez tout sauf les deux moitiés de l'arborescence. Placez notre nouvel arbre 50px sous le bouton.
Minimiser le Entête groupe et ouvrir le Corps groupe. Choisissez le Outil Rectangle (U), changer la couleur de premier plan en # e9e9e9 et dessine un 1400x790px rectangle entre les premier et deuxième repères horizontaux. Double-cliquez sur le nom de la couche et renommez-le. BG.
Maintenant, créez un nouveau groupe appelé Souhait. Changer la couleur de premier plan en blanc #FFFFFF et choisissez le Outil Rectangle Arrondi (U) avec un Rayon de 5px . Dessine un rectangle de 485x175px.
Encore une fois, créez un nouveau calque, sélectionnez le Outil Rectange (U) et en maintenant le Décalage clé dessiner un 30x30px rectangle. Frappé CMD + T et, tenant le Décalage clé, faites-la pivoter pour 45.00 ° , le plaçant 10px au-dessus du rectangle arrondi et 10px à droite de la première ligne directrice verticale.
Après avoir créé deux formes, tenez le CMD touche, sélectionnez les deux formes et allez à Calque> Fusionner les formes. Après cela, cliquez avec le bouton droit de la souris sur notre nouveau calque de forme fusionné et sélectionnez Options de fusion… . Vérifier Ombre portée, changement Mode de fusion à Ordinaire, Opacité à 5%, Angle 90 °, décocher la Lumière globale option, set Distance à 2px, propagation et Taille à 0. (Phew!)
Choisissez le Outil de type horizontal (T), sélectionner Open Sans (Gras), définissez la taille sur 13 pt, changer la couleur de premier plan en gris # a3a3a3 et écrivez l'heure et la date de notre exemple de souhait, par exemple. 22h13 - 28 novembre 2013.
Temps pour un avatar. Créez un nouveau groupe appelé PIC et placez-le au-dessus de la couche de forme arrondie. Sélectionnez le Outil Ellipse (U) et en maintenant Décalage clé, tracez un cercle de 90x90px. Après cela, déplacez-le 20px du haut et 20px à droite de la première ligne directrice verticale.
Maintenant, rendez-vous sur uifaces.com, un site d’avatar libre de droits (vous pouvez même ajouter le vôtre si vous souhaitez le soutenir). Choisissez un visage qui vous tente et copiez-le dans votre presse-papiers. Après cela, revenez à votre document Photoshop et collez-le en cliquant sur CMD + V, en s'assurant qu'il se trouve juste au-dessus de la couche de cercle.
Puis maintenez ALT clé et souris sur la couche d’image collée jusqu’à ce que vous voyiez une flèche vers le bas. Lorsque vous le voyez, cliquez dessus pour créer un Masque d'écrêtage. Puis utilisez le Outil de déplacement (V) pour le placer au centre du cercle et taper CMD + T le redimensionner si besoin.
Minimiser le PIC groupe et sélectionnez le Outil de type horizontal (T) encore une fois, définissez la couleur de premier plan sur # 2f2f2f, sélectionner 26 pt taille Klinic Slab (Moyenne) et écrivez le nom de l'auteur. Le placer 30px du haut et 20px directement de la photo de l'auteur.
Encore une fois, changez la couleur de premier plan en rouge précédemment utilisé # cf2f32, changer la police en Open Sans (Semibold) 16 pt taille et écrire le nom d'utilisateur Twitter de l'auteur. Nous utilisons cette couleur pour différencier le texte de sorte qu'il soit perçu comme un lien..
Changer la couleur de premier plan en gris foncé # 878787, réduire la taille de la police à 14 pt, changer le poids de la police en Ordinaire et écrivez un message semblable à un tweet (souhait). Assurez-vous que la hauteur de la ligne est définie sur 21 pt, donner un peu de marge de manœuvre pour que notre souhait soit lisible. Pour ce faire, allez à Fenêtre> Personnage et sur le panneau de caractères, définissez la hauteur de ligne sur 21 pt.
Notre Souhait groupe est terminé, minimisez-le, puis utilisez le Outil de déplacement (V) déplacez-le 60px sous la zone d'en-tête. Dupliquer le Souhait groupe en frappant CMD + J ou en cliquant avec le bouton droit de la souris sur le nom du groupe et en sélectionnant Groupe en double… . Déplacez ce groupe dupliqué vers la droite pour aligner son coin sur le dernier repère vertical. Changer le nom, l'image de l'avatar et le souhait aussi.
Maintenant, dupliquez quatre autres Souhait groupes et les placer dans deux colonnes. Utilisation 30px de l'espace ci-dessous et ci-dessus. Pour la dernière rangée, utilisez 50px de l'espace en dessous des groupes pour le maintenir cohérent avec l'espacement en haut de Corps groupe. Changez les noms, les noms d'utilisateurs Twitter, les souhaits et les avatars pour que cela paraisse plus naturel plutôt que de laisser le contenu dupliqué.
La dernière étape pour la zone de souhaits consiste à ajouter des hyperliens et des hashtags (comme ce sont des souhaits de Twitter). Nous allons prendre le vert précédemment utilisé # 42a747 et Semibold poids de la police pour rendre les liens et les balises différentes et perçus comme cliquables. Il suffit d'utiliser le Outil de type horizontal (T) pour sélectionner un hashtag ou une URL, mettez-le en surbrillance, changez le poids de la police en Semibold et la couleur au vert.
En descendant plus bas dans la mise en page, nous allons maintenant concevoir la zone de pied de page.
Commencez par minimiser le Corps grouper et élargir la Bas de page groupe. Définissez la couleur de premier plan sur # 727272, choisir le Outil de type horizontal (T) et choisir Klinic Slab (Moyen) à 26 pt . Après cela, écrivez ce qui suit "Remerciez votre famille, vos amis et vos disciples". Pour le maintenir cohérent, laissez-le suffisamment d'espace blanc et déplacez-le. 60px bas du groupe de corps.
Créez un nouveau groupe appelé Messagerie, définir la couleur de premier plan sur # f7f7f7 et choisissez le Outil Rectangle Arrondi (U) avec un rayon de 5px. Dessine un 525x220px rectangle, le plaçant 30px sous le titre.
Maintenant développez le Corps groupe, trouver le Souhait groupe et développez cela aussi, puis trouvez le PIC grouper et dupliquer en frappant CMD + J. Faites glisser le groupe dupliqué sur votre Messagerie groupe, en le plaçant au-dessus du calque de forme créé précédemment. Maintenant minimisez tous les groupes ouverts, sélectionnez le dernier copié PIC grouper et redimensionner à 28x28px en frappant CMD + T.
Nous devons montrer une pièce d’identité, qui publie le souhait, nous allons donc utiliser le nom d’utilisateur Twitter de l’utilisateur. Définissez la couleur de premier plan sur # 878787, choisir le Outil de type horizontal (T) et choisir Open Sans (Semibold) à 14 pt. Écrivez ce qui suit: "Connecté en tant que @nom_utilisateur".
Créons un bouton de déconnexion afin que, si les utilisateurs souhaitent modifier leur compte ou simplement se déconnecter, ils aient la possibilité de le faire. Créez un nouveau groupe appelé Déconnecter, définir la couleur de fond en blanc #FFFFFF et choisissez le Outil Rectangle Arrondi (T) avec un rayon de 99px . Dessine un 90x24px rectangle.
Changer la couleur de premier plan en gris # 878787 et choisissez le Outil de type horizontal (T). Choisir Open Sans (Gras) à 10pt et écrivez "Disconnect". Placez-le au centre du bouton.
Minimiser le Déconnecter groupe, définissez la couleur de premier plan sur blanc #FFFFFF et choisissez le Outil Ligne (U), définir le poids à 1px, et en maintenant le Décalage tracer une ligne horizontale à travers la forme de la boîte de message. Le placer 10px bas de l'image.
Changez la couleur de premier plan en # b2b2b2 et choisissez le Outil de type horizontal (T). Choisir Open Sans Police (normale), définissant la taille de la police sur 18 pt et écrire un exemple de copie.
Minimiser le Messagerie groupe et créer un nouveau appelé Bouton de remerciement. Après cela, définissez la couleur de premier plan sur vert # 42a747 et choisissez le Outil Rectangle Arrondi (U) avec un rayon de 5px et dessine un 525x60px rectangle de taille. Le placer 20px sous la forme de la boîte de message.
Double-cliquez sur le calque de forme ou faites un clic droit et sélectionnez Options de fusion… . Sélectionner Ombre portée et appliquez les options indiquées ci-dessous, le code de couleur du vert utilisé est # 349239.
Changer la couleur de premier plan en blanc #FFFFFF et choisissez le Outil de type horizontal (T) avec les paramètres suivants: Open Sans (Audacieux) 18 pt. Après cela, écrivez "Message 'Merci" et placez le texte au centre du bouton.
Génial, nous avons presque fini! Maintenant minimiser le Bouton de remerciement groupe et créer un nouveau appelé Gazouillement. Changez la couleur de premier plan en couleur de la marque Twitter # 00acee et choisissez le Outil Rectangle Arrondi (U) avec Rayon de 99px. Après cela, dessinez un 160x35px rectangle et placez-le 30px sous le bouton vert et 10px à gauche du guide du milieu.
Changer la couleur de premier plan en blanc #FFFFFF et choisissez le Outil de type horizontal (T) avec les paramètres suivants: Open Sans (Semibold) à 12 pt. Écrivez "TWEET THE LOVE" et placez-le au milieu du bouton.
Minimiser le Gazouillement grouper et dupliquer en frappant CMD + J. Après cela, double-cliquez sur le nom du groupe et renommez-le en Facebook. Placez-le sur le côté opposé, changez le libellé, puis changez la couleur du bouton en # 3b5998.
Minimiser le Facebook groupe, changez la couleur de premier plan en # 878787, choisir le Outil de type horizontal (T) et choisir Open Sans (Semibold) à 14 pt . Notez votre ligne de copyright et… vous avez terminé!
Donc là vous l'avez. Je vous ai guidé à travers la création d'une mise en page de site Web, à partir de zéro, d'une manière organisée et efficace.
J'espère que vous avez appris quelque chose de nouveau après ce tutoriel. Si vous avez des questions ou des difficultés s'il vous plaît n'hésitez pas à me cingler dans la section commentaires ou via Twitter.
Accentsconagua