Share
Comme les vacances approchent à grands pas, j’ai pensé qu’il serait peut-être amusant de créer un tutoriel sur le populaire effet de ruban enveloppant en 3D qui s’est tellement développé cette année. C'est un excellent moyen d'ajouter de la profondeur à vos conceptions, et c'est sacrément facile à compléter. Je vais vous montrer quelques exemples de ce logiciel en action sur le Web, vous expliquer les techniques de création dans Adobe Photoshop, puis vous expliquer les différentes méthodes de codage..
Avant de plonger dans le didacticiel, examinons une poignée de sites qui utilisent cet effet. Notez les différentes manières dont vous pouvez être créatif avec cela, alors ne vous arrêtez pas à ce tutoriel! Les principes sous-jacents sont très simples dans la nature, mais comme vous pouvez le constater à partir des exemples suivants, vous pouvez être assez fringant avec l'exécution.
Bon, maintenant que nous avons vu quelques exemples de la créativité que vous pouvez obtenir avec cet effet, passons au didacticiel. Le but ici est d'enseigner les techniques de base - ce que vous en faites est l'endroit où cela devrait devenir intéressant!
Créez un nouveau document dans Photoshop. La taille importe peu… nous utiliserons une toile de 600 pixels de large pour cette procédure pas à pas, mais vous pouvez utiliser votre propre taille si vous travaillez dans une conception Web.
Nous voulons créer immédiatement une séparation, commencez donc par assombrir l'arrière-plan et tracez un rectangle de couleur claire sur le dessus..
Nous allons commencer le ruban en traçant un rectangle de 310px par 44px. J'utilise un rectangle arrondi avec un rayon de 4px, mais vous pouvez également utiliser un rectangle carré si vous n'aimez pas le coin arrondi.
Faites attention à la largeur: vous souhaitez utiliser une largeur totale égale à la "largeur de votre colonne de contenu" + "à la largeur à laquelle le ruban doit chevaucher votre arrière-plan principal". Dans cet exemple, j'utilise 310px, soit 285px pour le contenu et environ 25px de chevauchement..
Ensuite, je veux rectifier le coin en bas pour qu’il ne soit pas rond. Je me déplace avec l'outil Convert Point, et déplace simplement le point afin qu'il y ait un angle de 90 degrés.
La raison pour laquelle nous faisons cela est simple: pour compléter l'illusion d'optique du ruban se "pliant" sur lui-même, ce coin ne doit pas être rond. Vous pouvez être assez créatif avec cette seule étape en créant l'illusion de "compléter" en faisant en sorte que le coin inférieur droit se plie réellement - mais nous allons rester simples dans cet exemple.
Maintenant, nous voulons couper la forme du ruban. Utilisez l'outil Lasso polygonal pour sculpter la forme… Je maintiens la touche «SHIFT» enfoncée pour forcer les angles à 45 degrés, mais vous pouvez sculpter n'importe quelle forme à votre guise..
Une fois que vous avez sélectionné la forme souhaitée avec l’outil Lasso, faites-en un masque vectoriel au-dessus de votre couche de ruban:
La prochaine étape consiste à créer le côté "ombré" du ruban qui disparaîtra derrière le premier plan. Commencez par dessiner un simple carré.
Conseil: utilisez une couleur un peu plus sombre que le recto du ruban pour créer une illusion de profondeur..
Nous devons maintenant créer l’effet "fold" - en utilisant à nouveau l’outil de conversion de point, déplacez le point inférieur droit du carré VERS LE HAUT jusqu’à atteindre le point supérieur droit..
Votre document devrait ressembler à ceci maintenant:
Ok - maintenant nous avons nos formes de base! Cela signifie que l'étape suivante consiste à ajouter des styles de calque personnalisés à notre ruban. Vous pouvez faire ce que vous voulez ici, mais je vais vous montrer les paramètres que j'utilise pour créer une apparence légère et texturée..
Les styles de calque suivants sont appliqués à l'avant du ruban.
Les styles de calque suivants sont appliqués sur le dessous du ruban.
Whallah! Maintenant cela devrait ressembler à ceci:
Temps pour un texte! J'utilise 18 pt "Eureka" avec une légère ombre portée, mais vous pouvez utiliser ce que vous voulez.
Les lignes en pointillé peuvent être réalisées de différentes manières, mais je vais vous montrer comment le faire en utilisant du texte de base "points" - en utilisant le "." clé. Notez les paramètres ci-dessus - la couche de texte est définie sur une opacité de près de 50% et j'utilise diverses techniques de caractères pour compléter l'effet..
Maintenant, regardons le ombre légère" cela aide à faire ressortir un peu les points:
Cela devrait compléter le ruban pour le rail droit; Vous pouvez copier / coller et retourner le groupe de calques pour créer une version pour le côté gauche..
Maintenant que nous avons conçu le ruban, prenez quelques minutes pour discuter des trois manières possibles de le coder. Nous n'entrerons pas dans les détails du code ligne par ligne; Il existe de nombreux tutoriels spécifiques à CSS qui peuvent vous aider avec cela (même sur notre site réseau, Nettuts!). Ce que je vais faire est de discuter des approches que vous pourriez utiliser et de partager quelques liens où vous pourrez trouver des informations plus détaillées sur celles-ci..
C'est l'approche la plus simple, la plus simple. Il utilise les propriétés d'arrière-plan CSS de base sans astuces autres qu'un peu de positionnement. Votre ruban peut sembler légèrement différent, alors je vais vous expliquer les étapes de base:
Avantages: C'est la méthode la plus simple - facile à compléter.
Les inconvénients: Ré-habiller nécessite d'ouvrir un fichier Photoshop; L'élément ne "s'étire" pas si vous voulez que ce soit autre chose qu'une taille fixe.
La méthode classique des "portes coulissantes" est similaire à la première approche, mais elle vous permettra d’étirer votre ruban pour s’adapter à la taille de votre choix.!
Avantages: C'est assez flexible - vous obtenez les avantages d'utiliser des images et la flexibilité de la méthode des portes coulissantes.
Les inconvénients: Cela peut être assez délicat d’être parfait dans tous les navigateurs; Ré-habiller nécessite toujours d'ouvrir un fichier Photoshop, mais maintenant il faut sauvegarder trois images, pas une seule..
Si vous êtes prêt à renoncer à certains détails (comme la texture de bruit et la lueur intérieure), il est possible de recréer cela en code complètement sans images. Le nouveau rotation méthode, les gradients, et élément ombres sont les techniques primaires (lisez toutes ces informations ici).
Lire le tutoriel complet basé sur CSS sur Nettuts!
Avantages: Aucune image nécessaire! Cela signifie qu'il est très facile de ré-habiller en changeant quelques valeurs dans le CSS.
Les inconvénients: En plus de perdre la possibilité d'ajouter de la texture et d'autres éléments saillants, cette méthode ne sera pas restituée correctement dans de nombreux navigateurs. Tout ce qui précède IE8, Safari 4.0 et Firefox 3.5 fonctionnera bien - mais vous risquez que cela ne fonctionne pas du tout dans les anciens navigateurs (ce que beaucoup de gens utilisent)..
J'espère que vous avez apprécié cette procédure! Cet effet est l’un des moyens les plus simples d’ajouter une illusion de profondeur à vos conceptions, et il existe de nombreuses façons d’en aborder le codage. Laissez des commentaires ou des questions en bas :)
Accentsconagua