Share
Créons un gif de pré-chargement animé pour votre prochain projet d'interface utilisateur. Vous aurez besoin de la version étendue Photoshop CS3 ou supérieure.
Nous allons créer un petit gif animé pouvant être utilisé pour une multitude de widgets, à chaque fois que du contenu ajax est demandé, que des fichiers sont en cours de téléchargement, quelles que soient vos envies. N'hésitez pas à ajouter vos propres styles et variations au chargeur au fur et à mesure. Nous allons entreprendre trois grandes sections:
Prêt. Ensemble. Aller…
Commencez par définir la taille de la zone de travail et ajoutez un arrière-plan rapide pour commencer..
Juste pour le plaisir, nous allons ajouter un motif ligné à notre arrière-plan, puis commencer à travailler sur le chargeur..
Créez un nouveau document transparent: (7px par 7px). Tracez une ligne diagonale avec un crayon noir de 1 pixel (cliquez sur le pixel en haut à gauche, maintenez la touche Maj enfoncée et cliquez sur le pixel en bas à droite).
Définir et nommer le motif (menu Edition> Définir le motif).
Cela fait, revenez au document d'origine et créez un style de calque "Superposition de motifs" sur notre calque d'arrière-plan gris: (menu Calque> Style de calque> Superposition de motifs). Choisissez votre modèle dans la zone des modèles et diminuez l'opacité (j'ai utilisé 20%).
Nous allons mettre en place quelques repères qui serviront de guides pour nous aider - nous utiliserons la commande "Transformer à nouveau" pour accélérer les choses..
Tracez une ligne blanche verticale de 1 px avec l’outil Ligne de votre document:
Pour vous assurer qu'il est aligné au centre, sélectionnez son calque et le calque d'arrière-plan, saisissez l'outil de déplacement, puis cliquez sur l'option "Aligner les centres horizontaux" comme suit:
Faites pivoter la ligne de 45 ° (sélectionnez la ligne Menu Edition> Transformation libre || Contrôle / Commande + T)
Sélectionnez le menu Edition> Transformer> "Transformer à nouveau" tout en maintenant la touche "Option / Alt" enfoncée (Commande / Contrôle + Option / Alt + Maj + T).
Exécutez cette commande plusieurs fois jusqu'à ce que la ligne soit complètement pivotée, comme suit:
En utilisant la même technique que celle expliquée ci-dessus, nous allons ajouter quelques petits repères sur chaque ligne de la grille pour faire en sorte que le chargeur tourne en rond….
Ajoutez quelques guides autour de l'endroit où vous souhaitez que votre "coche" initiale apparaisse (assurez-vous que vos guides sont sur des pixels entiers, ne divisez pas les pixels).
Créez un rectangle arrondi avec un rayon de 1px dans nos lignes de guidage (assurez-vous que la capture est activée pour les guides: menu Affichage> Snap).
À l’aide de l’outil de sélection directe, déplacez les coins inférieurs (nœuds) de la forme de la tique rectangle vers l’intérieur, de sorte que la forme se resserre.
Utilisez le même truc "Transformer à nouveau" que nous avons utilisé ci-dessus, pour dupliquer la forme tout autour de nos graduations (lorsque vous faites pivoter de 45 °, veillez à définir le point de transformation au centre de notre grille, et non au centre du rectangle. forme, qui le cas où il par défaut).
Sélectionnez le menu Edition> Transformer> "Transformer à nouveau" tout en maintenant la touche "Option / Alt" enfoncée (Commande / Contrôle + Option / Alt + Maj + T) jusqu'à ce que la coche soit copiée à fond. Ça devrait ressembler à ça:
Vérification des calques: assurez-vous que votre panneau de calques ressemble à ceci:
Phew. Nous avons toutes les formes de pré-chargement créées, nous allons maintenant ajouter un ensemble de styles de calques pour améliorer un peu les choses. Comme d'habitude, sel au goût. Nous allons ajouter des styles de calque qui se trouvent tous dans "Menu Calque> Styles de calque"..
Ajouter un style de calque "Superposition de couleurs" au calque ticks (j'ai utilisé # 242424).
Ajoutez un style de calque "Ombre portée" au calque ticks:
Ajoutez un style de calque "Inner Shadow" au calque ticks:
Votre chargeur devrait maintenant ressembler à ceci:
Nous pourrions utiliser cette méthode de différentes manières, mais pour simplifier les choses, nous allons dupliquer notre calque de ticks cinq fois, puis supprimer tous les ticks de forme qui n'appartiennent pas à ces calques de forme particuliers. Nous ne voulons pas que les calques se chevauchent des calques en dessous, car les styles de calque que nous allons ajouter s'empileraient, ce qui provoquerait des effets superposés..
Dupliquez votre calque de coche de base quatre fois, puis commencez à supprimer les repères sur chacun des calques jusqu'à obtenir les résultats suivants:
Vous pouvez utiliser l'outil Sélection directe pour supprimer les formes de graduation de chacun des calques..
Nous allons maintenant ajouter quelques styles à chacun des calques de coche séparés. Je vais faire référence à mes propres noms de couche.
Au calque "Shine-Active", ajoutez / modifiez le style de calque "Lueur externe":
Pour le même calque, ajoutez / modifiez le style de calque "Inner Glow":
Puis ajoutez / modifiez le style de calque "Superposition de couleurs" (j’ai utilisé # 0087c6):
Dans le calque nommé "Shine-Fading1", ajoutez exactement les mêmes styles ci-dessus, en omettant le style de calque "Outter Glow":
Au calque nommé "Shine-Fading2", ajoutez / modifiez le style de calque "Inner Shadow":
Pour le même calque, ajoutez / modifiez le style de calque "Inner Shadow" (j'ai utilisé # 0087c6).
Ensuite, ajoutez / modifiez le style de calque "Inner Shadow" sur le calque nommé "Shine-Fading3" (notez également le changement d'opacité):
Votre chargeur devrait maintenant ressembler à ceci (modifiez les styles de calques à votre convenance):
Ok, nous avons les styles de base mis en place, il est maintenant temps de dupliquer les calques en entier (ce qui rend l'animation instantanée) et de créer notre fichier animé .gif
Regrouper tous les calques qui composent notre coche (mettez-les en surbrillance tous + menu Calque> Regrouper les calques)
Dupliquez tout le groupe, puis faites-le pivoter de 45 ° (menu Edition> Transformation libre). Répétez l'étape 2 jusqu'à ce que vous ayez tourné la coche tout autour (vous aurez huit groupes au total)..
Votre chargeur devrait ressembler à ceci:
Bon, nos calques sont tous configurés et nous sommes prêts à animer. Nous allons nous en tenir à une animation image par image normale, bien que nous puissions réaliser les mêmes choses avec l'animation basée sur la chronologie..
Ouvrez le panneau d'animation: (Fenêtre> Animation). Désactivez tous les calques de groupe de ticks sauf le premier, puis cliquez sur le bouton "Dupliquer les images sélectionnées" dans le panneau d'animation..
Désactiver le premier calque groupé et activer le deuxième calque groupé.
Répétez l'étape précédente pour chacun des groupes de couches. Mettez en surbrillance toutes les images de votre calque d'animation (Maj + cliquez sur chaque image) et définissez la durée de celle-ci sur 0,1 seconde.
Choisissez Fichier> Enregistrer pour le Web et les périphériques et utilisez les paramètres suivants pour votre fichier .gif animé.
Ouvrez votre fichier .gif dans un navigateur Web et admirez votre nouveau chargeur original! Enfin, prenez de la glace.
C'est tout. J'espère que vous avez aimé créer le chargeur! C'était amusant pour moi de m'installer. Téléchargez et créez des liens vers certaines de vos créations dans les commentaires et posez toutes les questions que vous pourriez avoir..
Accentsconagua