Comment créer un curseur d'image à l'aide de Photoshop et de jQuery

Il ne fait aucun doute que le curseur d'image est l'un des éléments les plus couramment utilisés dans la conception Web d'entreprise, en raison de sa taille relativement grande, qui permet d'attirer l'attention des visiteurs une fois qu'ils sont arrivés sur le site. Bien que le Web ait commencé à repenser la convivialité du curseur d'image, il est toujours considéré comme un outil d'apprentissage indispensable pour le nouveau venu dans le secteur de la conception Web..

Dans ce didacticiel de conception de sites Web, nous allons apprendre à créer un curseur d’image personnalisé ci-dessus à l’aide de Photoshop, à partir duquel vous pouvez prévisualiser le résultat final. Non seulement nous l'illustrerons dans Photoshop, nous le transformerons également en une conception fonctionnelle en le convertissant en HTML / CSS et en ajoutant jQuery pour son effet de glissement impressionnant..

Cela ressemble à beaucoup d'éléments compliqués, mais en fait c'est assez simple et très facile à comprendre, commençons alors!

Plus intéressé par l'adoption d'un curseur d'image et de le personnaliser en chemin? Voici des articles dédiés pour vous.

• Curseur d'image: 23 curseurs jQuery
• Curseur d'image: 18 plugins WordPress

Commencer

Pour ce tutoriel, vous aurez besoin des ressources suivantes:

• 26 motifs de pixels reproductibles à partir de PSDfreemium.
• bibliothèque jQuery
• Nivo Slider plugin
• Moderniser
• Textures de papier trouvés de VandelayPremier
• (Alternative) 13 HQ Old Paper Textures de overdosse
• Rinjani de Ciaciya
• Stupa par Agnes Sim
• Tally de Nino Satria
• Offres de Timo Balk
• Uluwatu-Bali par Aris Wjay

Partie I - Conception du curseur d'image

Étape 1: Configuration de l'arrière-plan

Commencez par créer un nouveau fichier de taille 1000 × 700 px. Remplir le fond avec la couleur # efc89e.

Ajouter une superposition de motifs en utilisant un motif de pixels libre à partir de PSDfreemium.

Étape 2: Base du curseur

Activer l'outil Rectangle. Créez un rectangle de taille 940 × 450 px. Vous pouvez utiliser n'importe quelle couleur, peu importe.

Double-cliquez sur le calque pour ouvrir la boîte de dialogue Style de calque. Ajouter un style de calque Ombre portée, lueur externe et contour.

C'est le résultat. La base du curseur a maintenant un joli cadre avec une ombre douce derrière elle.

Étape 3

Ajoutez une photo et placez-la au-dessus de la base du curseur. Appuyez sur Ctrl + Alt + G pour le convertir en masque d'écrêtage et insérez la photo dans le curseur..

Étape 4: ruban

Dessinez un rectangle de couleur # f4e1ae à utiliser comme ruban.

Double-cliquez sur le calque de la forme et activez Bevel and Emboss, Superposition de dégradé et Superposition de motifs avec les paramètres suivants..

Voici le résultat après avoir ajouté des styles de calque.

Étape 5

Ajoutons de la texture du papier sur le ruban pour le rendre plus réaliste. Placez la texture sur la forme du ruban. Convertissez-le en masque de découpage en appuyant sur Ctrl + Alt + G.

Étape 6

Peignons quelques ombres et rehauts sur le ruban. Créez un nouveau calque au-dessus du ruban. Peindre en noir sur la partie inférieure du ruban. Convertissez-le en masque d'écrêtage (Ctrl + Alt + G), puis réduisez son opacité à 10%.

Étape 7

Répétez le processus précédent dans la partie supérieure du ruban. Mais cette fois-ci, ajoutez de la surbrillance en peignant en blanc, puis réduisez son opacité à 50%.

Étape 8: points de suture

Activer l'outil Crayon. Appuyez sur F5 pour ouvrir le paramètre Pinceau. Définissez la taille du pinceau sur 1 px et augmentez l'espacement jusqu'à obtenir une ligne en pointillé sur la zone d'aperçu..

Étape 9

Tracez une ligne noire de 1 px au-dessus du ruban. Réduire son opacité à 20%. Dupliquez le calque en appuyant sur Ctrl + J. Appuyez sur Ctrl + I pour inverser sa couleur. Augmenter l'opacité à 50%. Activer l'outil Déplacer, puis appuyer une fois sur la flèche vers le bas et sur la flèche gauche pour le déplacer.

Voici le résultat visualisé à 100%.

Étape 10

Répétez cette procédure pour tracer d’autres points de suture de l’autre côté du ruban..

Étape 11: Ajouter une forme ornée

Définissez la couleur de premier plan sur gris. Utilisez un pinceau doux de taille 1 px pour dessiner une forme ornée. Soyez créatif, vous pouvez utiliser n'importe quelle forme. À côté de lui, tracez une ligne de 1 px, puis effacez son bord extérieur à l’aide d’un outil de gomme doux. Dupliquez la ligne, retournez-la horizontalement et placez-la de l'autre côté.

Étape 12

Sélectionnez tous les calques ornés et fusionnez-les en un seul en appuyant sur Ctrl + E. Dupliquer la forme, puis placez-le sous la forme ornée d'origine. Appuyez sur Ctrl + I pour inverser sa couleur. Activer l'outil Déplacer, puis appuyer une fois sur la flèche vers le bas pour le déplacer 1 px vers le bas..

Étape 13: Informations sur la photo

Tapez les données photo à l'intérieur du ruban.

Étape 14: navigation

Ensuite, nous allons dessiner des cercles pour la navigation par diapositives. Dessinez une forme de cercle avec la couleur # 8d877c dans la partie inférieure du ruban.

Ajouter Inner Shadow en utilisant les paramètres suivants.

C'est le résultat. Le cercle devient un trou peu profond maintenant.

Étape 15

Maintenez Alt, puis faites glisser le calque de forme circulaire pour le dupliquer.

Étape 16

Définissons la condition active sur l'un de ces liens. Sélectionnez l'un des cercles et changez sa couleur en # bebbb5. Ajouter ombre intérieure, superposition de dégradé et contour.

Étape 17

Maintenez la touche Ctrl enfoncée, puis cliquez sur la vignette de la base du ruban dans le panneau Calques. Créez un nouveau calque sous le ruban et remplissez-le de noir. Activer l'outil de déplacement et appuyer plusieurs fois sur les flèches vers la gauche et vers le bas.

Étape 18

Adoucissez-le en utilisant un filtre Flou gaussien. Cliquez sur Filtre> Flou> Flou gaussien.

Étape 19

Placez l'ombre du ruban au-dessus du calque du curseur. Convertissez-le en masque de découpage en appuyant sur Ctrl + Alt + G.

Étape 20

Réduire l'opacité de l'ombre à 40%.

Étape 21

Peindre l'ombre du ruban sur le fond. Réduire son opacité à 20%.

Étape 22

Utilisez l'outil Plume pour dessiner une partie du ruban. Définissez sa couleur sur # b68f63. Placez-le derrière le curseur.

C'est le résultat vu à un grossissement de 100%.

Étape 23

Dupliquez la forme que vous venez de créer et placez-la derrière le haut du ruban. Retournez-le verticalement.

Étape 24: Résultat final dans Photoshop

Ceci est notre résultat final dans Photoshop. Ensuite, nous continuerons à le coder dans un curseur fonctionnel.

Partie II - Conversion en HTML / CSS

Étape 25 - Configuration des fichiers

Créez un nouveau dossier appelé My-Photo-Slider. Dans ce dossier, créez un nouveau document HTML vierge (index.html), feuille de style vierge (style.css) et un dossier pour les images (img). Nous devons également inclure la bibliothèque jQuery et le plug-in Nivo Slider dans le dossier. Comme nous utilisons le balisage HTML5, nous devons ajouter un hack IE pour activer les éléments HTML5 sur IE 8 ou une version antérieure. Nous allons utiliser un script appelé Modernizr pour accueillir IE.

Étape 26 - Balisage HTML de base

Ouvrir index.html dans votre éditeur de code préféré. Définir les DOCTYPE (nous utilisons HTML5), tête éléments (où nous ajoutons le titre des documents et un lien CSS et JavaScript (bibliothèque jQuery, Nivo Slider et Modernizr). Nous ajoutons également un div wrapper (pour centrer la mise en page), entête élément et emballage de diapositive.

Étape 27 - Tranche PSD

Ouvrez la maquette PSD et découpez toutes les images nécessaires. Pour la photo, récupérons les photos suivantes de sxc.hu (connexion requise, si vous n'avez pas encore de compte, vous pouvez vous inscrire gratuitement). Redimensionnez toutes les images à 920 × 430 px. Placez toutes les images dans le dossier images (img).

1. Rinjani de Ciaciya
2. Stupa par Agnes Sim
3. Tally de Nino Satria
4. Offres de Timo Balk
5. Uluwatu-Bali par Aris Wjay

Étape 28 - Créer un en-tête

Ajoutez ces codes suivants entre

et

.

 
 Mes diapositives photo 
 

Ajoutons maintenant du style à l’en-tête. Nous ajoutons également le style pour les éléments body et wrapper. Mettez tous les styles dans la feuille de style, style.css.

 / * Style de base * / body background: url transparent (img / bg.jpg); police: 15px / 2 'Adobe Caslon Pro', Géorgie, Serif; marge: 0; rembourrage: 0;  a contour: 0 aucun #pagewrap margin: 120px auto; rembourrage: 0; position: relative; hauteur: 100%; largeur: 960px;  header display: block; Flotter à droite; marge droite: 40px; largeur: 192px; z-index: 52; position: relative;  h1 background: URL transparente (img / separator.png) no-repeat centre bottom; / * Ajouter une ligne de séparation sous le titre * / font-size: 18px; poids de police: gras; hauteur: 70px; hauteur de ligne: 1,1; marge: 55px 10px 0; text-align: center; text-transform: majuscule;  

Étape 29 - Ajouter un curseur de photo

Nous allons maintenant ajouter du code à la partie principale de notre document, le curseur de photo. Ajoutons d'abord les photos. Placez ces codes suivants entre

.

Et puis ajoutez le ruban et la légende pour les photos.

 
 
 Photographe:
 Enrico Nunziati
 Emplacement:
 Désert du Namib
 Modèle:
 Dead Vlei
 Rendez-vous amoureux:
 18 mars 2011 
 
 Photographe:
 Lina Dhammanari
 Emplacement:
 Île de Lombok, Indonésie
 Modèle:
 Mont Rinjani
 Rendez-vous amoureux:
 8 mai 2008 
 
 Photographe:
 Agnes Sim
 Emplacement:
 Borobudur, Indonésie
 Modèle:
 Grand stupa
 Rendez-vous amoureux:
 12 juin 2008 
 
 Photographe:
 Nino Satria
 Emplacement:
 Taman Safari Indonésie
 Modèle:
 Tally Giraffe
 Rendez-vous amoureux:
 16 août 2009 
 
 Photographe:
 Timo Balk
 Emplacement:
 Ubud, Bali, Indonésie
 Modèle:
 Des offres
 Rendez-vous amoureux:
 20 déc 2009 
 
 Photographe:
 Aris Wjay
 Emplacement:
 Uluwatu-Bali
 Modèle:
 Magnifique plage
 Rendez-vous amoureux:
 20 juil. 2011 
 

Maintenant, si nous ouvrons index.html dans le navigateur, nous avons quelque chose comme ceci:

Étape 30

Nous avons encore besoin de corriger l'apparence du curseur en utilisant CSS.

 #slidewrap position: absolute; #slider position: relative; hauteur: auto; largeur: 920px; bordure: 10px solide #fff; box-shadow: 0 0 5px # 444; marge: 10px;  .ribbon background: url transparent (img / info-bg.png) no-repeat; hauteur: 482px; largeur: 192px; position: absolue; à droite: 40px; en haut: -3px; indice z: 50;  #slider img position: absolute; en haut: 0px; gauche: 0px; affichage: aucun;  

C'est ce que nous avons maintenant.

Actuellement, nous avons lié le plugin Nivo slider mais nous n'avons pas encore connecté le script. Nous allons donc brancher le script en ajoutant ces fonctions JavaScript entre et élément.

Étape 31: Style de curseur

La dernière étape consiste à ajouter le style du curseur.

 / * Les styles de curseur Nivo * / .nivoSlider position: relative;  .nivoSlider img position: absolute; en haut: 0px; gauche: 0px;  / * Si une image est encapsulée dans un lien * / .nivoSlider a.nivo-imageLink position: absolute; en haut: 0px; gauche: 0px; largeur: 100%; hauteur: 100%; bordure: 0; rembourrage: 0; marge: 0; z-index: 6; affichage: aucun;  / * Les tranches et les cases du curseur * / .nivo-slice display: block; position: absolue; z-index: 5; hauteur: 100%;  .nivo-box display: block; position: absolue; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; à droite: 20px; text-align: center; en haut: 130 pixels; largeur: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title style de police: italique .nivo-controlNav position: absolute; en bas: 10px; à droite: 20px; hauteur: 15px; largeur: 192px; text-align: center; bloc de visualisation; z-index: 51;  .nivo-controlNav a background: url transparent (img / button.png) no-repeat centre centre; affichage: inline-block; hauteur: 14px; largeur: 14px; retrait du texte: -9999px; curseur: pointeur;  .nivo-controlNav .active background: url transparent (img / button_active.png);  

Résultat final + Télécharger

Ceci est notre résultat final, cliquez ici pour voir la démo de travail.

Vous ne pouvez pas atteindre certaines étapes? Voici le fichier PSD du résultat et le projet complet que vous pouvez tester et jouer avec.

• Fichier PSD du tutoriel du curseur d'image
• Projet de tutoriel sur le curseur d'image terminé