Share
Mise à jour: Codage tut maintenant disponible! Aujourd'hui, nous allons vous expliquer comment créer votre propre "curseur à onglets juteux". C'est un excellent moyen d'ajouter de la profondeur et de la dimensionnalité à vos propres conceptions - et c'est la solution idéale pour un curseur d'image.!
Mise à jour du codage: Vous pouvez maintenant récupérer l'intégralité de la partie codage de ce didacticiel sur Nettuts! Vous avez demandé, et donc vous recevez :)
Et maintenant, pour tous ceux qui veulent une pièce après pièce, voici la version écrite complète du tutoriel. Vous remarquerez de légers changements par rapport à la vidéo (la vidéo est réalisée à la volée), mais les mêmes techniques de base s'appliquent aux deux procédures pas à pas..
L'image utilisée pour la démo est un fond d'écran exclusif d'Envato Marketplace de reAdactor. Vous pouvez trouver plus de ces images de papier peint cool ici!
Nous allons commencer avec notre document 600x400 px. J'ai ajouté un fond gris clair avec un motif de grille subtil afin que nous puissions voir notre élément ressortir du document un peu mieux au fur et à mesure que nous le créons..
Commencez par dessiner un simple rectangle (environ 450 x 270 px) sur la planche. Nous allons ajouter un très léger trait autour du rectangle dans le panneau d'options du calque (Trait = 1px extérieur, # c8c8c8). La raison pour laquelle nous ajoutons ce trait est d’ajouter un peu de séparation entre notre cadre et l’arrière-plan? cela sera particulièrement important si vous travaillez sur un fond blanc.
Ensuite, nous allons commencer notre "ombre" sous le cadre. Commencez par saisir simplement votre outil Pinceau de base, puis définissez la taille sur 40% et la dureté sur 0%. Commencez un nouveau calque, maintenez la touche Maj enfoncée (pour garder votre ligne droite) et tracez une ligne courte (environ la moitié de la largeur de notre cadre). Obtenir ce parfait n'a pas d'importance? nous allons ajuster la taille en utilisant l'outil de transformation dans les prochaines étapes.
Maintenant, tournons TRES légèrement le calque nouvellement brossé; L'angle que j'avais utilisé était de 2,5, mais vous pouvez jouer avec vous-même. Plus l'angle est profond, plus l'ombre apparaîtra plus tard. Vous pouvez utiliser la rotation ou la transformation libre (Ctrl + T) pour faire le tour.
Dupliquez le premier calque "ombré" brossé (Ctrl + J), puis retournez-le horizontalement (Édition> Transformation> Retourner horizontalement). Le résultat devrait être une ombre à l'opposé de la première.
Déplacez les deux calques d'ombre derrière le calque "image" et redimensionnez-les (sélectionnez les deux calques et appuyez sur Ctrl + T) de manière à ce qu'ils correspondent parfaitement à la largeur totale du rectangle du cadre..
Enfin, fusionnez les deux couches d'ombre (Ctrl + E) et déplacez-la au bon endroit (utilisez l'outil de sélection de base [V] et utilisez le clavier pour la déplacer). Vous pouvez également ajuster l'opacité du calque d'ombre en fonction de vos préférences personnelles. J'ai utilisé environ 50%, vous pouvez faire plus ou moins selon ce que vous recherchez.
Étape bonus: Si vous le souhaitez, vous pouvez encore plus bricoler avec l'ombre en utilisant ces techniques de base, plus le filtre "Flou gaussien". Plus l'ombre est floue, plus elle apparaîtra dispersée. Vous pouvez également bricoler la façon dont l'ombre se retire à l'aide de l'outil de déformation..
Bon, maintenant nous avons notre fond et notre ombre de base. L'étape suivante consiste à créer le calque "image" interne. Pour ce faire, créez un nouveau rectangle (en utilisant le même style de calque de trait que le premier) ou dupliquez simplement le calque d'origine et utilisez l'outil Convertir le point pour déplacer de chaque côté environ 10 pixels..
Vous pouvez évidemment ajuster l'espacement selon vos propres préférences. Plus l'espace est important, plus le rembourrage de votre cadre sera grand par la suite. Vous pouvez également ajouter un grand rembourrage en bas pour économiser de la place pour un titre et une description d'image..
Ensuite, déposez l'image que vous souhaitez utiliser sur le document (vous pouvez la faire glisser depuis un dossier ou utiliser l'outil d'importation). Vous souhaiterez redimensionner et positionner l'image sur le calque de forme "Image intérieure", puis transformer votre image en masque d'écrêtage sur le même calque de forme intérieur. Vous pouvez en faire un masque d'écrêtage en faisant un clic droit sur le calque d'image et en appuyant sur "Créer un masque d'écrêtage"..
Ajoutez une ombre intérieure claire à l'aide du panneau Styles de calque (double-cliquez sur le calque de forme). La démo utilise les paramètres suivants:
Encore une fois, c’est un cas où vous pouvez modifier l’effet pour obtenir les résultats souhaités. Une ombre plus sombre rendra l'image plus dramatique et profondément incrustée. Une ombre plus claire (ou aucune ombre) rendra l'image plus plate..
Whallah!
Les boutons à onglets de gauche et de droite sur le côté font partie de l’attrait principal de ce type de curseur car ils se détachent légèrement du cadre et créent une forme plus intéressante pour notre curseur..
Commencez par dessiner un cercle (maintenez la touche Maj enfoncée pour conserver un cercle parfait lorsque vous utilisez l'outil Ellipse). La taille doit être d'environ 60 px (vous pouvez regarder le panneau Info pendant que vous dessinez le cercle pour voir sa taille affichée dans le texte)..
Ensuite, ajoutez un trait de 1px en utilisant la même couleur que celle utilisée pour le cadre de fond.
En prime, ajoutez une légère ombre portée pour imiter celle que nous avons dessinée sous le cadre. L'ombre portée que nous avons utilisée correspondait à environ 15% d'opacité, à la distance 3 et à la taille 4. L'angle doit refléter notre source de lumière au centre de l'image. Dans ce cas, il s'agit d'environ 130 degrés..
Maintenant, ajoutez nos flèches. Vous pouvez utiliser une forme Photoshop ordinaire ou une version texte ">>" des flèches en utilisant votre police préférée. Vous pouvez même dessiner le vôtre dans Illustrator si vous préférez obtenir une forme vraiment unique. Dans notre cas, nous avons utilisé ">>" avec la police Lucida Sans.
Ensuite, regroupez le calque de forme cercle et le calque de flèche en les sélectionnant tous les deux et en appuyant sur Ctrl + G.
Dessinez maintenant un masque sur le groupe pour le faire apparaître comme si il chevauchait à peine notre cadre. Pour ce faire: Tracez un rectangle de sélection rectangulaire, puis appuyez sur le bouton "Ajouter un masque de calque" lorsque le dossier de groupe est sélectionné..
Ce qui est génial avec ce masque de "groupe", c’est qu’il masque également tous les styles de calque. Si nous essayions simplement de masquer le cercle lui-même, le trait et l'ombre seraient également coupés, ce qui les rendrait visibles sur le cadre (ce que nous ne voulons pas)..
Enfin, il vous suffit de dupliquer le groupe de boutons et de le retourner horizontalement. Nous le placerons à gauche du document. Le seul conseil valable ici est que nous aurons également besoin d'ajuster l'angle de l'ombre portée à environ 50 degrés afin de l'adapter à notre source de lumière située au centre du cadre. Assurez-vous de désactiver le sélecteur Global Light pour vous assurer de ne pas régler l'autre ombre..
Le dernier élément de ce curseur est le petit "module bouton de cercle" qui indique le nombre d'images que vous avez dans votre diapositive..
Commencez par créer un simple cercle de 13 pixels (maintenez la touche Maj enfoncée pour le rendre parfait). Nous voudrons ajouter un autre trait de 1px autour de l'extérieur en utilisant la même couleur que tous les traits précédents (# c8c8c8 pour la démo).
Enfin, ajoutez un dégradé très subtil au-dessus du cercle (gris clair [# D9D9D9] s’allouant au blanc en haut). Vous pouvez ajuster la couleur du dégradé en fonction de vos préférences, mais l’idée ici est de faire en sorte que le cercle ressemble davantage à un bouton sur lequel l’utilisateur peut appuyer..
Dupliquez plusieurs fois le cercle original et déplacez-le vers le côté (vous devez avoir autant de cercles que d'images dans votre diapositive)..
Ces cercles sont terriblement difficiles à voir maintenant? ajoutons donc un fond pour qu'ils soient un peu plus visibles sur des images claires.
Commencez par dessiner un rectangle arrondi avec un rayon de 10px (vous pouvez ajuster le rayon à votre guise). Ensuite, réglez le remplissage à 50% pour le voir légèrement à travers.
Enfin, définissez un trait de 2 pixels (# a7a7a7) avec une opacité d’environ 50% pour le rendre également transparent. L'effet final devrait être un rectangle arrondi transparent avec une bordure subtile.
Dernière étape! Ajoutez un cercle plus petit sur l'un des cercles d'origine et positionnez-le au centre. Ajustez la couleur (vous pouvez utiliser un dégradé ou une couleur unie) en fonction de vos propres couleurs. Vous remarquerez que dans la démo, nous avons utilisé les mêmes couleurs que celles du logo Webdesigntuts..
Excellent travail! Maintenant que vous avez la configuration de base du curseur, vous pouvez facilement ajuster la taille en fonction de vos propres projets. Vous pouvez également redéfinir cette option pour utiliser des arrière-plans de couleurs différentes, des boutons restylés ou même ajouter des textures au cadre lui-même. La limite est vraiment à vous - gardez juste à l'esprit les principes de base que nous avons installés ici et vous ferez bien.
Accentsconagua