Voici enfin la première partie du tutoriel très détaillé vous permettant de réaliser l’upload panel.
Cette semaine, pas de ressource mais un tutoriel suite à une question que j’avais posée dans un lointain post où je rendais disponible la ressource : upload panel.
Voici donc la première partie de ce tutoriel qui en comportera deux. La raison de ce découpage est la taille assez conséquente de ce tutoriel découpé en de nombreuses étapes assez détaillées.
Etant donné que c’est l’un de mes premiers tutoriel, n’hésitez pas à commenter, poser des questions ou me proposer des améliorations.
Quelques petits conseils avant de commencer :
• N’oublier pas de créer et de nommer des groupes de calques lorsque vous travaillez.
• Concernant l’outil (U), n’oubliez pas de cocher la case « snap to pixel » comme montré sur le screenshot ci-dessous.
• Les techniques utilisées dans ce tutoriel ne sont pas les seules pour arriver au même résultat et probablement pas les plus simples. Si vous avez une autre façon de faire les choses, partagez!
• Ce tutoriel est destiné aux personnes ayant une connaissance de base de photoshop CS5
• Enfin, je m’excuse pour les screenshots en anglais (ma version de PS) ainsi que certain noms de fonctions dont je ne connais pas la correspondance française. Je ne pense pas que cela constituera un problème pour la réalisation du tutoriel, les images étant explicites.
Ce tutoriel est traduit du tuto disponible en anglais sur mon blog.
Vous pouvez également télécharger la source de cette première partie : Télécharger la source
1. Créez un nouveau document de 750*700px avec un fond sur un nouveau calque de couleur #3b3d40
2. Ajoutez du bruit à ce calque en faisant : Filtres > Bruit > Ajouter du bruit. Règlez le sur 1% en uniform.
3. Créons maintenant un pattern. Créez un nouveau document de dimensions 3*3px. Dans ce document, cachez le background et créez un nouveau calque. Sur ce calque et avec l’outil de selection (M), créez des carrés noirs comme montré sur le screenshot ci-dessous. Pour remplir rapidement la selection, utilisez le raccourci Cmd/Ctrl + Retour
4. Maintenant rendez-vous dans le menu Editer et « Define pattern ». Nommez ce nouveau pattern comme vous le désirez.
5. Retournez sur votre .psd principal, créez un nouveau calque et selectionnez l’outil pot de peinture (G). Dans le menu supérieur, selectionnez « pattern » et ensuite votre nouveau pattern
6. Appliquez ce pattern grâce au pot de peinture sur ce nouveau calque
7. Maintenant ajoutez de nouveau guides. Pour ce faire, rendez vous dans le menu « Vue > New guide ». Il est important d’ajouter les guides de cette façon et non pas en les faisant glisser à la main à partir des règles afin d’être très précis.
8. Ajoutez les guides horizontaux suivants : 110px, 150px et verticaux : 125px, 303px, 584px et 625px.
9. Grâce à l’outil rectangle (U). Dessinez un rectangle entre les guides verticaux 125px et 625px et les guides horizontaux 110px et 150px. Appliquez la couleur #3b3d40 sur ce rectangle et nommé le « base ».
10. Appliquez les styles suivants sur ce calque (en double cliquant dessus). Voir les deux screenshots ci-dessous pour les règlages.
11. Maintenant créons le séparateur sur le guide 303px. Pour ce faire, selectionnez l’outil rectangle (U) et dessinez un rectangle de la même hauteur que le header et d’une largeur de 1px. Appliquez la couleur #2b2d2f (voir le screenshot). Placez ce rectangle à gauche du guide 303px.
Répérez cette opération (ou dupliquez simplement le calque) mais cette fois-ci avec la couleur #484a4e. Placez ce rectangle sur la droite du guide 303px. Voir le résultat sur le screenshot ci-dessous.
12. Ajoutons maintenant l’icône et le texte. Pour cela, j’ai utilisé un icone issu du pack iconsweet2 en 16*16px. Alignez cet icône verticalement et appliquez la couleur blanche sur lui. Ajoutez l’ombre portée comme indiqué sur le screenshot
13. Ajoutez un texte sur la droite de l’icône. J’ai utilisé la police Helvetica Neue en Medium. Règlez la taille sur 14pt et la color sur #ffffff. Utilisez la même ombre portée que sur l’icône.
14. Espacez et centrez ces deux éléments à votre convenance entre la bordure de gauche et le separateur. Maintenant créons l’effet hover pour ce bouton. En utilisant l’outil rectangle (U) créez un rectangle blanc sur un nouveau calque. La taille de ce rectangle doit être réduite d’ 1px sur chaque côté afin de ne pas empièter sur la bordure de l’élément inférieur (voir le screenshot).
15. Créons un nouveau bouton nommé « upload a video » avec une icône différente toujours provenant du pack iconsweet2. La seule différence ici est que la couleur blanche est remplacée par la couleur #969696 afin de bien marquer la différence entre l’état actif et normal. Soyez libre de jouer avec l’ombre portée de ces élément pour les faire ressortir. Reportez vous au second screenshot pour ordonner vos calques et groupes.
16. Créons maintenant le bouton de fermeture. Dupliquez le séparateur précedemment créé et placez le sur le guide à 584px. Voir le screenshot.
De la même façon que nous avons créez l’état hover précédent, créez un carré avec l’outil (U) de couleur #232323. Règlez l’opacité sur 30%
17. En utilisant l’outil (U), Créez un cercle de couleur #000000 et centrez le sur le carré précédemment créé. Appliquez une ombre portée et une ombre interne comme montré sur le screenshot et règlez le remplissage sur 20%.
18. Parce que je suis feignant, j’ai utilisé la croix présente dans le pack iconsweet1 (on va pas réinventer la roue). Appliquez la couleur #cbcbcb sur cette croix, placez la au centre du cercle et appliquez une ombre portée comme montré sur le screeshot suivant.
Ajoutez également un dégradé avec les règlages suivant comme montré sur le screenshot. Concernant le dégradé, placez un marqueur noir à 47% et un blanc à 53%
19. Maintenant que le header est terminé, ajoutons l’effet final. Selectionnez le calque « base » et transformer le en « smart object » (voir le screenshot). Ensuite rendez-vous dans les filtres et ajoutez du bruit. Règlez le sur 0,5% et appliquez.
20. Créons le background de ce panneau d’upload. Placez un guide horizontal à 610px. Avec l’outil rectangle (U) créez une forme partant du header jusqu’au guide 610px de couleur #3b3d40 (voir screenshot). Ce calque doit être placé sous le groupe « header ». Convertissez ce calque en smart object et appliquez lui du bruit à 0,3%.
21. Sur ce même calque, ajoutez une bordure interne de 1px et de bouleur #2b2d2f. Ajoutez également une ombre interne comme montré sur le screenshot.
22. Pour créer l’ombre portée sous le panneau, utilisez l’outil (U) et créez un rectangle de la même taille que le panneau entier. Appliquez ensuite sur ce calque une ombre portée comme montré sur le screenshot suivant.
23. Créez de nouveaux guides horizontaux: 168px et 211px. Créez également des guides verticaux : 145px et 454px. Avec l’outil rectangle arrondi (U) d’un radius de 2px, créez une rectangle entre ces guides et règlez le remplissage sur 30%.
24. Sur ce même rectangle, appliquez une ombre portée blanche comme indiqué sur le screenshot.
Appliquez également une ombre interne comme montré sur le screenshot suivant.
25. Toujours avec l’outil rectangle arrondi règlé sur 2px de radius, dessinez un rectangle sur un nouveau calque au centre de rectangle noir créé à l’étape précédente. Laissez une marge de 5px sur tous les côtés de ce rectangle et appliquez les effets montré dans les screenshots ci-dessous.
26. En utilisant l’outil text (T), entrez votre texte dans le champs fraîchement créé. J’ai utilisé helvetica Neue Medium 14pt #a0a0a0.
27. Créé deux guides verticaux : 464px et 605px. Avec l’outil rectangle arrondi (U) règlé sur 2px de radius, tracez un rectangle entre ces lignes et de la même hauteur que l’arrière plan noir du champs de saisi.
28. Appliquez sur ce nouveau calque un dégradé de la couleur #80bb09 à #aed54d et une ombre interne comme montré sur le screenshot
29. Cliquez droit sur le même calque et selectionnez « convert to smart object ». Appliquez ensuite sur cet objet un filtre bruit de 1% et une ombre portée (réglages sur le screenshot ci-dessous).
30. Choisissez un icone (celui utilisé vient toujours du pack iconsweet2), appliquez lui la couleur #3c590b avec une ombre portée
Avec l’outil text (T) insérez le texte de la même couleur que l’icône et appliquez lui l’ombre portée ci-dessous.
31. Ajoutez un guide horizontal à 233px. Ensuite avec l’outil rectangle, créez un rectangle de 1px de haut et de largeur égale au panneau d’upload. Appliquez la couleur #47494d. Placez ce separateur juste au dessus du guide 233px. Enfin, appliquez l’ombre portée suivante.
32. Pour cette étape, dupliquez simplement les calques constituant le premier champ/bouton (le groupe portant le nom « field1 » dans le .psd). Bougez ce groupe vers le bas de 17px. Renommez ce groupe « Field2 » et supprimer le texte dans le champs de saisie.
33. Selectionner le background du bouton, cliquez droit dessus et sélectionnez « new smart object via copy ». Supprimer l’ancien.
34. Double cliquez sur ce nouveau smart object afin d’entrer dedans et modifiez le dégradé vert avec les couleurs suivantes : de #21b7f3 à #6dd9f8. Sauvegardez, fermez la fenêtre et revenez à votre .psd principal.
35. Comme pour le bouton précédent, prenez un icône, appliquez la couleur #0e5e7d et faites de même pour le texte.
À suivre… Voici ce à quoi devrait ressembler votre début de panneau d’upload.
Téléchargez la source
Ceci conclu la première partie de ce tutoriel.
À bientôt pour la suite.