Tutoriel - Réaliser l'upload panel - Partie 1

Par Sébastien GABRIELle 26/08/2011

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

remarque

1. Créez un nouveau document de 750*700px avec un fond sur un nouveau calque de couleur #3b3d401

2. Ajoutez du bruit à ce calque en faisant : Filtres > Bruit > Ajouter du bruit. Règlez le sur 1% en uniform.

2

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

3

4. Maintenant rendez-vous dans le menu Editer et "Define pattern". Nommez ce nouveau pattern comme vous le désirez.

4

4-2

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

5

6. Appliquez ce pattern grâce au pot de peinture sur ce nouveau calque

6

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.

7

8. Ajoutez les guides horizontaux suivants : 110px, 150px et verticaux : 125px, 303px, 584px et 625px.

8

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".

9

10. Appliquez les styles suivants sur ce calque (en double cliquant dessus). Voir les deux screenshots ci-dessous pour les règlages.

10

10-2

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.

11

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.

11-2

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

12

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.

13

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).

14

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.

15-1

15-2

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.

16-1

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%

16-2

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%.

17-1

17-2

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.

18-1

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%

18-2

18-3

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.

19-1

19-2

19-3

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%.

20

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.

21-1

21-2

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.

22

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%.

23

24. Sur ce même rectangle, appliquez une ombre portée blanche comme indiqué sur le screenshot.

24-1

Appliquez également une ombre interne comme montré sur le screenshot suivant.

24-2

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.

25-1

25-2

26. En utilisant l'outil text (T), entrez votre texte dans le champs fraîchement créé. J'ai utilisé helvetica Neue Medium 14pt #a0a0a0.

26

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.

27

28. Appliquez sur ce nouveau calque un dégradé de la couleur #80bb09 à #aed54d et une ombre interne comme montré sur le screenshot

28

28-2

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).

29-1

29-2

30. Choisissez un icone (celui utilisé vient toujours du pack iconsweet2), appliquez lui la couleur #3c590b avec une ombre portée

30-1

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.

30-2

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.

31-131-2

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.

32-132-2

33. Selectionner le background du bouton, cliquez droit dessus et sélectionnez "new smart object via copy". Supprimer l'ancien.

33-133-2

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.

34

35. Comme pour le bouton précédent, prenez un icône, appliquez la couleur #0e5e7d et faites de même pour le texte.

35

À suivre... Voici ce à quoi devrait ressembler votre début de panneau d'upload.

final

Téléchargez la source

Ceci conclu la première partie de ce tutoriel.

À bientôt pour la suite.

  • Partager l'article en 1 clic !

    Subtitle
Avatar_thumbAuteur : Sébastien voir son blog

Passionné par le Webdesign et les art graphiques, je suis actuellement Webdesigner pour l'entreprise WannaWeb basée sur Marseille.
J'interviens dans différents domaines tels que la création de logotype et d'identités visuelles, le design d'interface, le webdesign et le design d'application mobile.
Je suis très attentifs aux dernières tendances et attache une grande importance à toujours rester informé sur ce monde en perpétuelle évolution.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

7Commentaires

  • Avatar_thumb
    Mixx

    le 26/08/2011 | #1

    Superbe rendu, vivement la suite.

  • Avatar_thumb
    Romain Calix

    le 27/08/2011 | #2

    Le rendu est vraiment très sympa, merci pour ce tuto

  • Avatar_thumb
    Guidraw WEBDESIGNER

    le 28/08/2011 | #3

    Très beau rendu, bravo !

  • Avatar_thumb
    Laetitia Mouloud

    le 29/08/2011 | #4

    Super tuto ! Merci !

    Je n'avais jamais utilisé l'ajout de repères de cette façon, c'est pas idiot !
    Merci pour l'info.

  • Avatar_thumb
    Christophe Laverdure

    le 29/08/2011 | #5

    Merci pour ce tuto ! Vraiment cool !

  • Avatar_thumb
    Claude Meri

    le 31/08/2011 | #6

    Pas mal pour un de tes premiers tutos , les explications sont assez claires.

  • Avatar_thumb
    Sebastien Lfg

    le 18/09/2011 | #7

    Merci aussi pour le tuto ^^.
    C'est en cours, je posterais ma version plus tard !

Ecrire un commentaire

captcha

Ouvrir